smartschool-platform/frontend/pc-web/app/view/auth/Login.scss

$auth-color: white;
$auth-background-color: #123d40;
$auth-background-image: url(get-resource-path('images/auth-background.jpg'));
$create-account-background-color: dynamic(#a1a1a2);
$dialog-trigger-color: dynamic(#e5e5e5);

$social-weixin-btn-background: dynamic(#00d500);

.auth-login {
    @include background-size(cover);
    background-image: $auth-background-image;
    background-position: center;

    > .x-body-el {
        background-color: rgba(black, 0.25);
    }

    .auth-dialog-login {
        border-radius: 4px;

        .auth-title {
            text-align: center;
            img {
              height: 40px;
            }
        }
    }
}

//UI Styles for buttons
@include extjs-button-small-ui(
  $ui: 'soft-blue',
  $background-color: $color-soft-blue,
  $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-large-ui(
  $ui: 'soft-blue',
  $line-height: 34px,
  $background-color: $color-soft-blue,
  $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'soft-blue',
  $background-color: $color-soft-blue,
  $border-color: darken($color-soft-blue, 5%)
);

@include extjs-button-small-ui(
  $ui: 'soft-cyan',
  $background-color: $color-soft-cyan,
  $border-color: darken($color-soft-cyan, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'soft-cyan',
  $background-color: $color-soft-cyan,
  $border-color: darken($color-soft-cyan, 5%)
);

@include extjs-button-small-ui(
  $ui: 'soft-green',
  $background-color: $color-soft-green,
  $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-large-ui(
  $ui: 'soft-green',
  $line-height: 34px,
  $background-color: $color-soft-green,
  $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'soft-green',
  $background-color: $color-soft-green,
  $border-color:darken($color-soft-green, 5%)
);

@include extjs-button-small-ui(
  $ui: 'soft-red',
  $background-color: $color-soft-red,
  $border-color:darken($color-soft-red, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'soft-red',
  $background-color: $color-soft-red,
  $border-color:darken($color-soft-red, 5%)
);

@include extjs-button-small-ui(
  $ui: 'soft-purple',
  $background-color: $color-soft-purple,
  $border-color:darken($color-soft-purple, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'soft-purple',
  $background-color: $color-soft-purple,
  $border-color:darken($color-soft-purple, 5%)
);

@include extjs-button-small-ui(
  $ui: 'gray',
  $background-color: $color-gray,
  $border-color:darken($color-gray, 5%)
);
@include extjs-button-large-ui(
  $ui: 'gray',
  $line-height: 34px,
  $background-color: $color-gray,
  $border-color:darken($color-gray, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'gray',
  $background-color: $color-gray,
  $border-color:darken($color-gray, 5%)
);

@include extjs-button-small-ui(
  $ui: 'green',
  $background-color: $color-green,
  $border-color:darken($color-green, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'green',
  $background-color: $color-green,
  $border-color:darken($color-green, 5%)
);

@include extjs-button-small-ui(
  $ui: 'blue',
  $background-color: $color-blue,
  $border-color:darken($color-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
  $ui: 'blue',
  $background-color: $color-blue,
  $border-color:darken($color-blue, 5%)
);

@include extjs-button-small-ui(
  $ui: 'header',
  $color: #999,
  $glyph-color: #919191,
  $background-color: transparent,
  $border-width: 0
);