mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)
* remove default-class mixin and use regular import * cleanup colors * remove variables file, fix bugs in animations * proper ordering of imports, core css vars * cleanup snackbar and material themes * tags component * login component styles * app login * toolbar component styles * breadcrumb styles * dropdown breadcrumb * app layout component * demo shell: files component * aspect list styles * content metadata styles * node selector * name location cell * node share dialog * content type dialog * folder dialog * document list * datatable theme * pagination theme * viewer theme * viewer theme * user-info theme * container widget * dynamic table theme * form widgets * form theme * form renderer * sidebar menu * header theme * info drawer theme * comment list * commens and layout container * sidenav layout * empty content * error content * clipboard theme * search input * tooltip card and notification history * card view theme * remove unused keys * add permission dialog * search and permission dialogs * version comparison and column themes * upload drag area and cleanup references * remove the need for content styles * insight components * cleanup insights theme * process components * process components * process cloud themes * cleanup unsed imports * cleanup mixins * update build scripts * test fixes * remove fdescribe * css fixes * update unit tests
This commit is contained in:
Denys Vuika
GitHub
274
lib/core/login/components/login.component.scss
Normal file
274
lib/core/login/components/login.component.scss
Normal file
@@ -0,0 +1,274 @@
|
||||
@import '../../styles/mixins';
|
||||
|
||||
.adf-login {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.adf-login-content {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100%;
|
||||
min-width: 320px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
& {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-ie11FixerParent {
|
||||
margin-top: 16px;
|
||||
min-width: 320px;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// IE11 vertical centering
|
||||
.adf-ie11FixerChild {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adf-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.adf-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.adf-icon-inline {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 31%;
|
||||
left: 82%;
|
||||
width: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-login-card-wide {
|
||||
border-radius: 8px;
|
||||
background-color: var(--theme-dialog-bg-color);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 450px;
|
||||
min-width: 320px;
|
||||
padding: 21px 64px 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 482px) {
|
||||
.adf-login-card-wide {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-error-container {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.adf-error-message {
|
||||
display: flex;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
color: var(--theme-warn-color);
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.adf-error-message .adf-error-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mat-card-header-text {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.adf-img-logo {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo img {
|
||||
max-height: 58px;
|
||||
}
|
||||
|
||||
.adf-login-button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
line-height: 38px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.adf-login-button-label {
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking {
|
||||
background-color: #e0f7fa;
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking .adf-login-button-label {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome {
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome .adf-welcome-icon {
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
|
||||
.adf-interactive-login-label {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
box-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adf-login-spinner-container {
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.adf-login-checking-spinner > svg > circle {
|
||||
stroke-width: 16% !important;
|
||||
|
||||
}
|
||||
|
||||
.adf-login-controls {
|
||||
padding: 0 0 26px;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login-action {
|
||||
margin-top: 20px;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: space-between;
|
||||
-moz-box-pack: space-between;
|
||||
box-pack: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adf-login-action-left a, .adf-login-action-right a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.adf-is-active {
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.adf-copyright {
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
font-size: 12px;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.mat-form-field .adf-login-password-icon.mat-icon {
|
||||
color: var(--theme-text-fg-color);
|
||||
}
|
||||
|
||||
.adf-login__field .mat-form-field-wrapper {
|
||||
margin: 1em 0 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.adf-login__field input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px var(--theme-dialog-bg-color) inset;
|
||||
-webkit-text-fill-color: var(--theme-text-fg-color) !important;
|
||||
}
|
||||
|
||||
.adf-login-validation {
|
||||
background-color: transparent;
|
||||
color: var(--theme-warn-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.adf-login-error {
|
||||
color: var(--theme-warn-color);
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login__remember-me {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.adf-login__remember-me .mat-checkbox-label {
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
.adf-login__field {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.adf-login-remember-me {
|
||||
color: var(--theme-text-fg-color) !important;
|
||||
}
|
||||
|
||||
.adf-login-action-container {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 23px;
|
||||
}
|
||||
}
|
||||
@@ -53,10 +53,9 @@ interface ValidationMessage {
|
||||
@Component({
|
||||
selector: 'adf-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: {
|
||||
class: 'adf-login'
|
||||
}
|
||||
host: { class: 'adf-login' }
|
||||
})
|
||||
export class LoginComponent implements OnInit, OnDestroy {
|
||||
isPasswordShow: boolean = false;
|
||||
|
||||
@@ -1,281 +0,0 @@
|
||||
@mixin adf-login-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$text-color-primary: mat-color($foreground, text);
|
||||
|
||||
.adf-login {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.adf-login-content {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100%;
|
||||
min-width: 320px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
& {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-ie11FixerParent {
|
||||
margin-top: 16px;
|
||||
min-width: 320px;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// IE11 vertical centering
|
||||
.adf-ie11FixerChild {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adf-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.adf-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.adf-icon-inline {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 31%;
|
||||
left: 82%;
|
||||
width: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-login-card-wide {
|
||||
border-radius: 8px;
|
||||
background-color: mat-color($background, dialog);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 450px;
|
||||
min-width: 320px;
|
||||
padding: 21px 64px 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 482px) {
|
||||
.adf-login-card-wide {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-error-container {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.adf-error-message {
|
||||
display: flex;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
color: mat-color($warn);
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.adf-error-message .adf-error-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mat-card-header-text {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.adf-img-logo {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo img {
|
||||
max-height: 58px;
|
||||
}
|
||||
|
||||
.adf-login-button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
line-height: 38px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.adf-login-button-label {
|
||||
color: mat-contrast($accent, default);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking {
|
||||
background-color: #e0f7fa;
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking .adf-login-button-label {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome {
|
||||
background-color: mat-color($primary);
|
||||
color: mat-contrast($primary, default);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome .adf-welcome-icon {
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
|
||||
.adf-interactive-login-label {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
box-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adf-login-spinner-container {
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.adf-login-checking-spinner > svg > circle {
|
||||
stroke-width: 16% !important;
|
||||
|
||||
}
|
||||
|
||||
.adf-login-controls {
|
||||
padding: 0 0 26px;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login-action {
|
||||
margin-top: 20px;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: space-between;
|
||||
-moz-box-pack: space-between;
|
||||
box-pack: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adf-login-action-left a, .adf-login-action-right a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.adf-is-active {
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-copyright {
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
font-size: 12px;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.mat-form-field .adf-login-password-icon.mat-icon {
|
||||
color: $text-color-primary;
|
||||
}
|
||||
|
||||
.adf-login__field .mat-form-field-wrapper {
|
||||
margin: 1em 0 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.adf-login__field input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px mat-color($background, dialog) inset;
|
||||
-webkit-text-fill-color: $text-color-primary !important;
|
||||
}
|
||||
|
||||
.adf-login-validation {
|
||||
background-color: transparent;
|
||||
color: mat-color($warn);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.adf-login-error {
|
||||
color: mat-color($warn);
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login__remember-me {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.adf-login__remember-me .mat-checkbox-label {
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
.adf-login__field {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.adf-login-remember-me {
|
||||
color: $text-color-primary !important;
|
||||
}
|
||||
|
||||
.adf-login-action-container {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user