From 44f9c96d95285370183fae4e94cc61c5dbef0e4c Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 24 May 2022 08:37:37 +0200 Subject: [PATCH 1/5] refactor gradido template button, hover --- .../src/assets/scss/gradido-template.scss | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss index 97118ca2b..569f4d538 100644 --- a/frontend/src/assets/scss/gradido-template.scss +++ b/frontend/src/assets/scss/gradido-template.scss @@ -41,17 +41,19 @@ a, } .btn-gradido { - background-image: linear-gradient(146deg, rgb(220 167 44) 50%, rgb(197 141 56 / 100%) 100%); - background-size: auto; - background-position: 0% 0%; - background-repeat: repeat; - border-style: none; - box-shadow: 10px 10px 50px 10px rgb(56 56 56 / 31%); - color: #fff; + display: inline-block; + padding: 1em 3em; + letter-spacing: 0.05em; + color: #fff; + transition: all 0.5s ease; + background: rgb(249,205,105); + background: linear-gradient(135deg, rgba(249,205,105,1) 2%, rgba(197,141,56,1) 55%); + box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; + border-radius:26px; } .btn-gradido:hover { - color: #212529; + box-shadow: 0 5px 10px rgba(0,0,0,0.2); } .btn-gradido:focus { @@ -61,6 +63,11 @@ a, .btn-outline-gradido { color: rgb(140 121 88); border: 1px solid #f5b805; + box-shadow: 10px 10px 50px 10px rgb(56 56 56 / 31%); +} + +.btn-outline-gradido:hover { + box-shadow: 10px 10px 50px 10px rgb(56 56 56 / 0%); } .form-control, From 60945b0f72c5435ae38551fe1f290d16c8bec896 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 24 May 2022 09:05:09 +0200 Subject: [PATCH 2/5] fixed stylelint --- frontend/src/assets/scss/gradido-template.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss index 569f4d538..ed7e71173 100644 --- a/frontend/src/assets/scss/gradido-template.scss +++ b/frontend/src/assets/scss/gradido-template.scss @@ -42,18 +42,18 @@ a, .btn-gradido { display: inline-block; - padding: 1em 3em; - letter-spacing: 0.05em; - color: #fff; - transition: all 0.5s ease; - background: rgb(249,205,105); - background: linear-gradient(135deg, rgba(249,205,105,1) 2%, rgba(197,141,56,1) 55%); - box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; - border-radius:26px; + padding: 1em 3em; + letter-spacing: 0.05em; + color: #fff; + transition: all 0.5s ease; + background: rgb(249 205 105); + background: linear-gradient(135deg, rgb(249 205 105 / 100%) 2%, rgb(197 141 56 / 100%) 55%); + box-shadow: rgb(0 0 0 / 40%) 0 30px 90px; + border-radius: 26px; } .btn-gradido:hover { - box-shadow: 0 5px 10px rgba(0,0,0,0.2); + box-shadow: 0 5px 10px rgb(0 0 0 / 20%); } .btn-gradido:focus { From c7b727e984488dc141b4ed2ef541f2477f3b2141 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 24 May 2022 11:47:48 +0200 Subject: [PATCH 3/5] add button disable --- frontend/src/assets/scss/gradido-template.scss | 16 ++++++++++++++++ frontend/src/pages/Register.vue | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss index ed7e71173..04f47d8f5 100644 --- a/frontend/src/assets/scss/gradido-template.scss +++ b/frontend/src/assets/scss/gradido-template.scss @@ -53,6 +53,7 @@ a, } .btn-gradido:hover { + color: #fff; box-shadow: 0 5px 10px rgb(0 0 0 / 20%); } @@ -60,6 +61,21 @@ a, outline: none; } +.btn-gradido-disable { + padding: 1em 3em; + letter-spacing: 0.05em; + color: #fff; + transition: all 0.5s ease; + background: rgb(97,97,97); + background: linear-gradient(135deg, rgba(180,180,180,1) 46%, rgba(180,180,180,1) 99%); + box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; + border-radius:26px; +} + +.btn-gradido-disable:hover { + color: #fff; +} + .btn-outline-gradido { color: rgb(140 121 88); border: 1px solid #f5b805; diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue index 4ffd6ce79..7cab11bed 100755 --- a/frontend/src/pages/Register.vue +++ b/frontend/src/pages/Register.vue @@ -84,7 +84,7 @@ {{ $t('signup') }} From 9587b95ee67ab68d4ed4a309c169d9b5031f7693 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 24 May 2022 12:14:09 +0200 Subject: [PATCH 4/5] fixed stylelint --- frontend/src/assets/scss/gradido-template.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss index 04f47d8f5..e932774c0 100644 --- a/frontend/src/assets/scss/gradido-template.scss +++ b/frontend/src/assets/scss/gradido-template.scss @@ -63,17 +63,17 @@ a, .btn-gradido-disable { padding: 1em 3em; - letter-spacing: 0.05em; - color: #fff; - transition: all 0.5s ease; - background: rgb(97,97,97); - background: linear-gradient(135deg, rgba(180,180,180,1) 46%, rgba(180,180,180,1) 99%); - box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; - border-radius:26px; + letter-spacing: 0.05em; + color: #fff; + transition: all 0.5s ease; + background: rgb(97 97 97); + background: linear-gradient(135deg, rgb(180 180 180 / 100%) 46%, rgb(180 180 180 / 100%) 99%); + box-shadow: rgb(0 0 0 / 40%) 0 30px 90px; + border-radius: 26px; } .btn-gradido-disable:hover { - color: #fff; + color: #fff; } .btn-outline-gradido { From 3f17f8f5ed0e0b168bb39143b42688c8b8e5c44e Mon Sep 17 00:00:00 2001 From: ogerly Date: Wed, 25 May 2022 11:54:37 +0200 Subject: [PATCH 5/5] remove padding left right for .btn --- frontend/src/assets/scss/gradido-template.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss index e932774c0..007face42 100644 --- a/frontend/src/assets/scss/gradido-template.scss +++ b/frontend/src/assets/scss/gradido-template.scss @@ -36,13 +36,11 @@ a, /* Button */ .btn { border-radius: 25px; - padding-right: 50px; - padding-left: 50px; } .btn-gradido { display: inline-block; - padding: 1em 3em; + padding: 0.6em 3em; letter-spacing: 0.05em; color: #fff; transition: all 0.5s ease; @@ -50,6 +48,9 @@ a, background: linear-gradient(135deg, rgb(249 205 105 / 100%) 2%, rgb(197 141 56 / 100%) 55%); box-shadow: rgb(0 0 0 / 40%) 0 30px 90px; border-radius: 26px; + padding-right: 50px; + padding-left: 50px; + border-style: none; } .btn-gradido:hover { @@ -62,7 +63,7 @@ a, } .btn-gradido-disable { - padding: 1em 3em; + padding: 0.6em 3em; letter-spacing: 0.05em; color: #fff; transition: all 0.5s ease; @@ -70,6 +71,9 @@ a, background: linear-gradient(135deg, rgb(180 180 180 / 100%) 46%, rgb(180 180 180 / 100%) 99%); box-shadow: rgb(0 0 0 / 40%) 0 30px 90px; border-radius: 26px; + padding-right: 50px; + padding-left: 50px; + border-style: none; } .btn-gradido-disable:hover {