bnsubramaniyan
/
ahcdashboardui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

login styling

master
ganga satish kumar 3 years ago
parent
f688f7a5ce
commit
b8a2900be6
1 changed files with 41 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 131
      src/app/login/login.component.scss

131
src/app/login/login.component.scss
View File

@ -4,15 +4,12 @@
flex-direction: column;
background-image: linear-gradient(to right bottom, #d8b946, #0f98c2, #c76167, #876591, #ad613b, #119499);
}
#login-screen {
background-image: linear-gradient(to right bottom, #d8b946, #0f98c2, #c76167, #876591, #ad613b, #119499);
}
#login-screen .content {
padding: 5%;
}
#login-screen .icon {
width: 70%;
height: 70%;
@ -21,7 +18,6 @@
margin: auto;
padding: 30% 5%;
}
#login-screen button {
border-radius: 10px;
font-size: 0.938rem;
@ -29,13 +25,11 @@
background: #22138b 0 0 no-repeat padding-box !important;
margin: 2%;
}
#login-screen .flex-row {
flex-direction: row;
display: flex;
width: 100%;
}
#login-screen .font-body-medium {
font-size: 1.25rem;
line-height: 1.125rem;
@ -43,26 +37,21 @@
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen ::ng-deep .mat-form-field-outline-start {
border-radius: 0.5rem 0 0 0.5rem !important;
min-width: 0.5rem !important;
}
#login-screen ::ng-deep .mat-form-field-outline-end {
border-radius: 0 0.5rem 0.5rem 0 !important;
}
#login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
background-color: #e0e9f8;
border-radius: 0.5rem;
}
#login-screen .align-middle {
width: 100%;
text-align: center;
}
#login-screen .title {
color: #fff;
font-weight: bold;
@ -71,21 +60,17 @@
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen .input-field {
width: 100%;
padding-bottom: 1%;
}
#login-screen .error {
color: #fff;
font-size: 1rem;
}
.bottom-20 {
padding-bottom: 10%;
}
.icon-bottom {
width: 30%;
height: 30%;
@ -94,27 +79,25 @@
margin: auto;
padding: 30% 5%;
}
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
color: red!important;
color: red !important;
}
::ng-deep input.ng-invalid.ng-touched {
.page-container {height: 100%;
border: none !important;
}
::ng-deep input.ng-invalid.ng-touched .page-container {
height: 100%;
display: flex;
flex-direction: column;
background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
}
#login-screen {
::ng-deep input.ng-invalid.ng-touched #login-screen {
background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
}
#login-screen .content {
::ng-deep input.ng-invalid.ng-touched #login-screen .content {
padding: 5%;
}
#login-screen .icon {
::ng-deep input.ng-invalid.ng-touched #login-screen .icon {
width: 70%;
height: 70%;
align-items: center;
@ -122,49 +105,41 @@
margin: auto;
padding: 30% 5%;
}
#login-screen button {
::ng-deep input.ng-invalid.ng-touched #login-screen button {
border-radius: 10px;
font-size: 0.938rem;
width: 100%;
background: #22138b 0 0 no-repeat padding-box !important;
margin: 2%;
}
#login-screen .flex-row {
::ng-deep input.ng-invalid.ng-touched #login-screen .flex-row {
flex-direction: row;
display: flex;
width: 100%;
}
#login-screen .font-body-medium {
::ng-deep input.ng-invalid.ng-touched #login-screen .font-body-medium {
font-size: 1.25rem;
line-height: 1.125rem;
letter-spacing: 1px;
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen ::ng-deep .mat-form-field-outline-start {
::ng-deep input.ng-invalid.ng-touched #login-screen ::ng-deep .mat-form-field-outline-start {
border-radius: 0.5rem 0 0 0.5rem !important;
min-width: 0.5rem !important;
}
#login-screen ::ng-deep .mat-form-field-outline-end {
::ng-deep input.ng-invalid.ng-touched #login-screen ::ng-deep .mat-form-field-outline-end {
border-radius: 0 0.5rem 0.5rem 0 !important;
}
#login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
::ng-deep input.ng-invalid.ng-touched #login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
background-color: #e0e9f8;
border-radius: 0.5rem;
}
#login-screen .align-middle {
::ng-deep input.ng-invalid.ng-touched #login-screen .align-middle {
width: 100%;
text-align: center;
}
#login-screen .title {
::ng-deep input.ng-invalid.ng-touched #login-screen .title {
color: #fff;
font-weight: bold;
font-size: 1.563rem;
@ -172,22 +147,18 @@
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen .input-field {
::ng-deep input.ng-invalid.ng-touched #login-screen .input-field {
width: 100%;
padding-bottom: 1%;
}
#login-screen .error {
::ng-deep input.ng-invalid.ng-touched #login-screen .error {
color: #fff;
font-size: 1rem;
}
.bottom-20 {
::ng-deep input.ng-invalid.ng-touched .bottom-20 {
padding-bottom: 10%;
}
.icon-bottom {
::ng-deep input.ng-invalid.ng-touched .icon-bottom {
width: 30%;
height: 30%;
align-items: center;
@ -195,31 +166,25 @@
margin: auto;
padding: 30% 5%;
}
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
::ng-deep input.ng-invalid.ng-touched ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
color: red !important;
}
::ng-deep input.ng-invalid.ng-touched {
::ng-deep input.ng-invalid.ng-touched ::ng-deep input.ng-invalid.ng-touched {
border: none !important;
}
border: none!important;.page-container {
::ng-deep input.ng-invalid.ng-touched .page-container {
height: 100%;
display: flex;
flex-direction: column;
background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
}
#login-screen {
::ng-deep input.ng-invalid.ng-touched #login-screen {
background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
}
#login-screen .content {
::ng-deep input.ng-invalid.ng-touched #login-screen .content {
padding: 5%;
}
#login-screen .icon {
::ng-deep input.ng-invalid.ng-touched #login-screen .icon {
width: 70%;
height: 70%;
align-items: center;
@ -227,49 +192,41 @@ border: none!important;.page-container {
margin: auto;
padding: 30% 5%;
}
#login-screen button {
::ng-deep input.ng-invalid.ng-touched #login-screen button {
border-radius: 10px;
font-size: 0.938rem;
width: 100%;
background: #22138b 0 0 no-repeat padding-box !important;
margin: 2%;
}
#login-screen .flex-row {
::ng-deep input.ng-invalid.ng-touched #login-screen .flex-row {
flex-direction: row;
display: flex;
width: 100%;
}
#login-screen .font-body-medium {
::ng-deep input.ng-invalid.ng-touched #login-screen .font-body-medium {
font-size: 1.25rem;
line-height: 1.125rem;
letter-spacing: 1px;
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen ::ng-deep .mat-form-field-outline-start {
::ng-deep input.ng-invalid.ng-touched #login-screen ::ng-deep .mat-form-field-outline-start {
border-radius: 0.5rem 0 0 0.5rem !important;
min-width: 0.5rem !important;
}
#login-screen ::ng-deep .mat-form-field-outline-end {
::ng-deep input.ng-invalid.ng-touched #login-screen ::ng-deep .mat-form-field-outline-end {
border-radius: 0 0.5rem 0.5rem 0 !important;
}
#login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
::ng-deep input.ng-invalid.ng-touched #login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
background-color: #e0e9f8;
border-radius: 0.5rem;
}
#login-screen .align-middle {
::ng-deep input.ng-invalid.ng-touched #login-screen .align-middle {
width: 100%;
text-align: center;
}
#login-screen .title {
::ng-deep input.ng-invalid.ng-touched #login-screen .title {
color: #fff;
font-weight: bold;
font-size: 1.563rem;
@ -277,22 +234,18 @@ border: none!important;.page-container {
font-family: "Raleway VariableFont";
text-transform: uppercase;
}
#login-screen .input-field {
::ng-deep input.ng-invalid.ng-touched #login-screen .input-field {
width: 100%;
padding-bottom: 1%;
}
#login-screen .error {
::ng-deep input.ng-invalid.ng-touched #login-screen .error {
color: #fff;
font-size: 1rem;
}
.bottom-20 {
::ng-deep input.ng-invalid.ng-touched .bottom-20 {
padding-bottom: 10%;
}
.icon-bottom {
::ng-deep input.ng-invalid.ng-touched .icon-bottom {
width: 30%;
height: 30%;
align-items: center;
@ -300,11 +253,9 @@ border: none!important;.page-container {
margin: auto;
padding: 30% 5%;
}
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
::ng-deep input.ng-invalid.ng-touched ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
color: red !important;
}
::ng-deep input.ng-invalid.ng-touched {
::ng-deep input.ng-invalid.ng-touched ::ng-deep input.ng-invalid.ng-touched {
border: none !important;
}}
}
Write Preview
Loading…
Cancel
Save