gofnnp/h-usersite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #14305 Изменение дизайна WPA Кофе-лайка: change styles

Browse Source
This commit is contained in:
nikolay 2023-05-25 16:43:27 +04:00
parent 7bade7caea
commit 7d098d1798
21 changed files with 94 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
angular/src/app/components/accordion/accordion.component.scss
View File

@ -6,7 +6,7 @@
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
color: var(--text-color);
overflow: hidden;
border-bottom: solid 1px #bdbdbd;
}

6
angular/src/app/components/exit/exit.component.scss
View File

@ -14,9 +14,9 @@
button {
padding: 10px 62px;
margin-top: 8px;
background-color: var(--main-color);
color: #fff;
background-color: var(--button-color);
color: var(--button-text-color);
border-radius: 3px;
border: none;
width: calc(50% - 12px);
}
}

6
angular/src/app/components/footer-buttons/footer-buttons.component.scss
View File

@ -15,9 +15,9 @@
align-items: center;
width: 60px;
height: 60px;
background: var(--main-color);
border: solid #fff 1px !important;
color: #fff;
background: var(--text-color);
border: solid var(--text-color) 1px !important;
color: var(--text-color);
border-radius: 100%;
font-weight: 600;
letter-spacing: 2px;

4
angular/src/app/components/invite-friends/invite-friends.component.scss
View File

@ -20,13 +20,13 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #ffffff;
color: var(--text-color);
}
.share {
width: 72px;
height: 48px;
background: #28af49;
background: var(--button-color);
padding: 8px 26px;
border: none;
}

2
angular/src/app/components/navbar/navbar.component.scss
View File

@ -8,7 +8,7 @@
width: 100%;
background: #231f20;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
color: #fff;
color: var(--text-color);
display: flex;
align-items: center;
justify-content: space-between;

3
angular/src/app/components/order-info/order-info.component.scss
View File

@ -15,8 +15,7 @@
}
.step {
width: 20px;
height: 20px;
background: #fff;
height: 20px;
border: 2px solid #acaca6;
border-radius: 50%;
transition: background 1s;

2
angular/src/app/pages/account/user-data/user-data.component.scss
View File

@ -186,4 +186,4 @@
*/
// input[type="date"]:focus::before,
// input[type="date"]:valid::before { display: none }
}
}

4
angular/src/app/pages/guest-card/guest-card.component.scss
View File

@ -29,7 +29,7 @@
}
& p {
color: #28AF49;
color: var(--button-color);
}
p.top-info__bonus{
@ -200,7 +200,7 @@
&__loyalty-program {
text-align: center;
color: #28AF49;
color: #7F2061;
font-style: normal;
font-weight: bold;
font-size: 12px;

4
angular/src/app/pages/not-found/not-found.component.scss
View File

@ -13,8 +13,8 @@
font-size: 14px;
}
button {
background-color: var(--main-color);
color: #fff;
background-color: var(--button-color);
color: var(--text-color);
border-radius: 8px;
display: flex;
justify-content: center;

8
angular/src/app/presentation-options/default-option/components/accordion/accordion.component.scss
View File

@ -6,7 +6,7 @@
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
color: var(--text-color);
overflow: hidden;
border-bottom: solid 1px #bdbdbd;
}
@ -18,8 +18,7 @@
.tab label {
display: block;
padding: 20px 26px;
position: relative;
background: #ffffff00;
position: relative;
font-weight: 400;
font-size: 12px;
line-height: 14px;
@ -33,8 +32,7 @@
// }
.tab-content {
max-height: 0;
overflow: hidden;
background: #292929;
overflow: hidden;
-webkit-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;

4
angular/src/app/presentation-options/default-option/components/invite-friends/invite-friends.component.scss
View File

@ -20,13 +20,13 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #ffffff;
color: var(--text-color);
}
.share {
width: 72px;
height: 48px;
background: #28af49;
background: var(--button-color);
padding: 8px 26px;
border: none;
}

8
angular/src/app/presentation-options/default-option/components/last-order/last-order.component.scss
View File

@ -16,7 +16,7 @@
font-size: 12px;
line-height: 16px;
span {
color: #828282;
color: var(--text-color_1);
}
.flex {
display: flex;
@ -31,7 +31,7 @@
width: 100%;
padding: 12px;
text-align: center;
border: 2px solid #28af49;
border: 2px solid var(--button-color);
border-radius: 6px;
font-style: normal;
font-weight: 700;
@ -39,7 +39,7 @@
line-height: 22px;
letter-spacing: -0.408px;
background-color: transparent;
color: #28af49;
color: var(--button-color);
}
.info {
@ -47,6 +47,6 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: rgba(255, 255, 255, 0.5);
color: var(--text-color_1);
}
}

2
angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss
View File

@ -8,7 +8,7 @@
width: 100%;
background: #231f20;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
color: #fff;
color: var(--button-text-color);
display: grid;
justify-content: space-between;
grid-template-columns: auto auto auto;

7
angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss
View File

@ -24,7 +24,7 @@
}
& p {
color: #28af49;
color: var(--button-color);
}
p.top-info__bonus {
@ -35,8 +35,7 @@
&__qr {
margin: 10px;
padding: 5px;
width: fit-content;
background-color: #ffffff;
width: fit-content;
// background-image: linear-gradient(
// #008251 33%,
// transparent 0px,
@ -193,7 +192,7 @@
&__loyalty-program {
text-align: center;
color: #28af49;
color: var(--button-color);
font-style: normal;
font-weight: bold;
font-size: 12px;

29
angular/src/app/presentation-options/default-option/pages/login/login.component.scss
View File

@ -54,7 +54,7 @@
line-height: 17px;
text-align: center;
span {
color: #13a538;
color: var(--button-color);
}
}
@ -67,7 +67,7 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #6a737c;
color: var(--text-color_1);
text-align: left;
position: absolute;
top: 10px;
@ -77,12 +77,12 @@
input {
width: 100%;
padding: 24px 16px 8px;
background-color: #252323;
margin-bottom: 16px;
border: none;
border-top: solid #6a737c 1px;
border-bottom: solid #6a737c 1px;
color: #6a737c;
border-top: solid var(--text-color_1) 1px;
border-bottom: solid var(--text-color_1) 1px;
color: var(--text-color_1);
font-style: normal;
font-weight: 400;
font-size: 22px;
@ -94,7 +94,7 @@
height: 46px;
width: calc(100% - 32px);
padding: 10px 24px;
background: #28af49;
background: var(--button-color);
border-radius: 6px;
display: flex;
flex-direction: row;
@ -102,13 +102,14 @@
align-items: center;
border: none;
letter-spacing: -0.408px;
color: #ffffff;
color: var(--button-text-color);
font-style: normal;
font-weight: 700;
font-size: 17px;
line-height: 22px;
&:disabled {
background-color: #344a3a;
color: var(--button-text-color_disabled);
background-color: var(--button-color_disabled);
}
}
}
@ -143,15 +144,15 @@
align-items: center;
justify-content: center;
height: 42px;
width: 42px;
width: 42px;
border-radius: 6px;
// box-shadow: 0 0 6px 1px hsla(240, 54%, 61%, 0.2);
overflow: hidden;
will-change: transform;
}
.box:focus-within {
box-shadow: 0 0 6px 1px rgba($color: #28af49, $alpha: 0.2),
0 0 0 2px rgba($color: #28af49, $alpha: 0.6);
box-shadow: 0 0 6px 1px rgba(rgb(127, 32, 97), 0.2),
0 0 0 2px rgba(rgb(127, 32, 97), 0.6);
}
.box::before,
.box::after {
@ -185,13 +186,13 @@
outline: 0;
font-size: 25.21px;
line-height: 42px;
color: #fff;
color: var(--text-color);
background-color: transparent;
text-align: center;
z-index: 100;
}
.field::placeholder {
color: #fff;
color: var(--text-color);
}
}
}

2
angular/src/app/presentation-options/first-option/components/accordion/accordion.component.scss
View File

@ -6,7 +6,7 @@
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
color: var(--text-color);
overflow: hidden;
border-bottom: solid 1px #bdbdbd;
}

4
angular/src/app/presentation-options/first-option/components/invite-friends/invite-friends.component.scss
View File

@ -19,13 +19,13 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #ffffff;
color: var(--text-color);
}
.share {
width: 72px;
height: 48px;
background: #28af49;
background: var(--button-color);
padding: 8px 26px;
border: none;
}

4
angular/src/app/presentation-options/first-option/components/last-order/last-order.component.scss
View File

@ -30,7 +30,7 @@
width: 100%;
padding: 12px;
text-align: center;
border: 2px solid #28af49;
border: 2px solid var(--button-color);
border-radius: 6px;
font-style: normal;
font-weight: 700;
@ -38,7 +38,7 @@
line-height: 22px;
letter-spacing: -0.408px;
background-color: transparent;
color: #28af49;
color: var(--button-color);
}
.info {

4
angular/src/app/presentation-options/first-option/components/navbar/navbar.component.scss
View File

@ -6,9 +6,9 @@
box-sizing: border-box;
padding: 12px 16px;
width: 100%;
background: #231f20;
background: var(--background-color);
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.5);
color: #fff;
color: var(--text-color);
display: flex;
align-items: center;
justify-content: space-between;

10
angular/src/app/presentation-options/first-option/pages/login/login.component.scss
View File

@ -95,7 +95,7 @@
height: 46px;
width: calc(100% - 32px);
padding: 10px 24px;
background: #28af49;
background: var(--button-color);
border-radius: 6px;
display: flex;
flex-direction: row;
@ -103,13 +103,13 @@
align-items: center;
border: none;
letter-spacing: -0.408px;
color: #ffffff;
color: var(--text-color);
font-style: normal;
font-weight: 700;
font-size: 17px;
line-height: 22px;
&:disabled {
background-color: #344a3a;
background-color: var(--button-color_disabled);
}
}
}
@ -186,13 +186,13 @@
outline: 0;
font-size: 25.21px;
line-height: 42px;
color: #fff;
color: var(--text-color);
background-color: transparent;
text-align: center;
z-index: 100;
}
.field::placeholder {
color: #fff;
color: var(--text-color);
}
}
}

51
angular/src/styles.scss
View File

@ -1,7 +1,7 @@
// Сброс стилей
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%;color:#fff;}
html{height:100%;}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
@ -12,8 +12,7 @@ table{border-collapse:collapse;border-spacing:0}
// @import url('https://fonts.cdnfonts.com/css/gotham-pro');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
// font-family: 'Gotham Pro';
* {
font-family: 'Montserrat', sans-serif;
}
@ -24,23 +23,45 @@ table{border-collapse:collapse;border-spacing:0}
body {
background-color: #231F20;
background-color: var(--background-color);
}
:root {
--main-color: #00b26b;
--main-border-radius: 35px;
--background-color: #ffffff;
--text-color: #222222;
--text-color_1: #666666;
--button-color: #7F2061;
--button-color_disabled: #4a0d37;
--button-text-color: #ffffff;
--button-text-color_disabled: #cccccc;
}
hr {
width: 100%;
border-top: 1px solid#BDBDBD;
border-top: 1px solid #BDBDBD;
}
.mat-form-field-appearance-outline .mat-form-field-outline {
color: var(--button-color_disabled) !important;
}
.mat-form-field-appearance-outline .mat-form-field-outline {
color: var(--button-color) !important;
}
.mat-form-field-wrapper {
padding: 0;
}
.mat-progress-spinner circle, .mat-spinner circle {
stroke: var(--button-color);
}
.mat-form-field-outline-start, .mat-form-field-outline-end {
border-radius: 0 !important;
}
@ -52,11 +73,15 @@ hr {
}
.mat-focused .mat-form-field-outline > div {
border-color: #28af49;
border-color: var(--button-color);
}
.mat-form-field-label {
color: var(--text-color_1) !important;
}
.mat-focused .mat-form-field-label {
color: #fff !important;
color: var(--text-color) !important;
}
.mat-form-field-invalid .mat-form-field-outline > div {
@ -64,7 +89,7 @@ hr {
}
.country-list-button {
color: #fff !important;
color: var(--text-color) !important;
}
.mat-menu-panel {
@ -82,7 +107,7 @@ hr {
}
.country-selector-code {
color: #fff;
color: var(--text-color);
}
@ -102,8 +127,8 @@ qr-code canvas {
mark {
padding: 4px;
background: #009688;
color: #fff;
background: var(--background-color);
color: bar(--text-color);
}
::-webkit-scrollbar {
@ -115,10 +140,10 @@ button {
}
.p-toast-message-custom {
background-color: #fff;
background-color: var(--background-color);
border: solid var(--main-color);
border-width: 0 0 0 6px;
color: #000;
color: var(--text-color);
.p-toast-icon-close {
color: var(--main-color);
}