| /* |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| /* Buttons */ |
| |
| @mixin fds-buttons-theme($theme) { |
| $primaryColor: map-get(map-get($theme, primary), 500); |
| $primaryColorHover: map-get(map-get($theme, primary), 100); |
| $accentColor: map-get(map-get($theme, accent), 500); |
| $accentColorHover: map-get(map-get($theme, accent), 100); |
| $buttonFontColor: #fff; |
| $buttonFontColorDisabled: #d1e8d1; |
| $buttonBgColorPrimary: $primaryColor; |
| $buttonBgColorPrimaryHover: $primaryColorHover; |
| $buttonBgColorPrimaryDisabled: $primaryColor; |
| $buttonBgColorPrimarySelected: $primaryColor; |
| $buttonBgColorSecondary: #fff; |
| $buttonBgColorSecondaryHover: $primaryColorHover; |
| $buttonBgColorSecondarySelected: #fff; |
| $buttonBgColorRegular: #fff; |
| $buttonBgColorRegularHover: #808793; |
| $buttonBgColorRegularDisabled: #808793; |
| $buttonBgColorRegularSelected: #fff; |
| $buttonBorderColorSecondary: $primaryColor; |
| $buttonBorderColorSecondaryHover: $buttonBgColorSecondaryHover; |
| $buttonBorderColorSecondaryDisabled: $buttonBgColorSecondaryHover; |
| $buttonBorderColorSecondarySelected: $primaryColor; |
| $buttonBorderColorRegular: #cfd3d7; |
| $buttonBorderColorRegularHover: $buttonBgColorRegularHover; |
| $buttonBorderColorRegularDisabled: $buttonBgColorRegularHover; |
| $buttonBorderColorRegularSelected: #cfd3d7; |
| $buttonFontPrimaryColor: $buttonFontColor; |
| $buttonFontPrimaryColorHover: $buttonFontColor; |
| $buttonFontPrimaryColorDisabled: $buttonFontColorDisabled; |
| $buttonFontPrimaryColorSelected: $buttonFontColor; |
| $buttonFontSecondaryColor: $primaryColorHover; |
| $buttonFontSecondaryColorHover: $buttonFontColor; |
| $buttonFontSecondaryColorDisabled: $buttonFontColorDisabled; |
| $buttonFontSecondaryColorSelected: $primaryColorHover; |
| $buttonFontRegularColor: $descriptionTextColor; |
| $buttonFontRegularColorHover: $buttonFontColor; |
| $buttonFontRegularColorDisabled: $buttonFontColorDisabled; |
| $buttonFontRegularColorSelected: $bodyTextColor; |
| $buttonFontWarnColor: $buttonFontColor; |
| $buttonFontWarnColorHover: $buttonFontColor; |
| $buttonFontWarnColorDisabled: $buttonFontColorDisabled; |
| $buttonFontWarnColorSelected: $buttonFontColor; |
| $buttonFontCriticalColor: $buttonFontColor; |
| $buttonFontCriticalColorHover: $buttonFontColor; |
| $buttonFontCriticalColorDisabled: $buttonFontColorDisabled; |
| $buttonFontCriticalColorSelected: $buttonFontColor; |
| |
| body[fds] .mat-raised-button { |
| height: 34px; |
| font-family: $fontPrimary; |
| font-weight: lighter; |
| font-size: 14px; |
| text-transform: uppercase; |
| line-height: normal; |
| box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12); |
| border-radius: 2px; |
| } |
| |
| body[fds] .mat-button { |
| height: 34px; |
| font-family: $fontPrimary; |
| font-weight: lighter; |
| font-size: 14px; |
| text-transform: uppercase; |
| line-height: normal; |
| border-radius: 2px; |
| } |
| |
| body[fds] .mat-button-toggle-button { |
| height: 100%; |
| } |
| |
| body[fds] .mat-raised-button.cdk-focused:focus { |
| box-shadow: 0 0 2px 0 rgba(19, 145, 193, 1); |
| } |
| |
| body[fds] .mat-raised-button[disabled] { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
| |
| body[fds] .mat-button-toggle-disabled .mat-button-toggle-label-content { |
| cursor: not-allowed; |
| } |
| |
| body[fds] .mat-button-focus-overlay { |
| background-color: transparent; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-primary { |
| border: 1px solid $buttonBgColorPrimary; |
| background-color: $buttonBgColorPrimary; |
| color: $buttonFontPrimaryColor; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-primary:hover { |
| background-color: $buttonBgColorPrimaryHover; |
| color: $buttonFontPrimaryColorHover; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-primary.mat-button-focus { |
| color: $buttonFontPrimaryColorSelected; |
| background-color: $buttonBgColorPrimarySelected; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-primary[disabled] { |
| color: $buttonFontPrimaryColorDisabled; |
| background-color: $buttonBgColorPrimaryDisabled; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-secondary { |
| color: $buttonFontSecondaryColor; |
| border: 1px solid $buttonBorderColorSecondary; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-secondary:hover:not([disabled]) { |
| color: $buttonFontSecondaryColorHover; |
| background-color: $buttonBgColorSecondaryHover; |
| border: 1px solid $buttonBorderColorSecondaryHover; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-secondary.mat-button-focus { |
| color: $buttonFontSecondaryColorSelected; |
| background-color: $buttonBgColorSecondarySelected; |
| border: 1px solid $buttonBorderColorSecondarySelected; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-secondary[disabled] { |
| color: $buttonFontPrimaryColorDisabled; |
| background-color: $buttonBgColorPrimaryDisabled; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-regular { |
| color: $buttonFontRegularColor; |
| background-color: $buttonBgColorRegular; |
| border: 1px solid $buttonBorderColorRegular; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-regular:hover { |
| color: $buttonFontRegularColorHover; |
| background-color: $buttonBgColorRegularHover; |
| border: 1px solid $buttonBorderColorRegularHover; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-regular.mat-button-focus { |
| color: $buttonFontRegularColorSelected; |
| background-color: $buttonBgColorRegularSelected; |
| border: 1px solid $buttonBorderColorRegularSelected; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-regular[disabled] { |
| color: $buttonFontRegularColorDisabled; |
| background-color: $buttonBgColorRegularDisabled; |
| border: 1px solid $buttonBorderColorRegularDisabled; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-warn { |
| border: 1px solid $warnColor; |
| background-color: $warnColor; |
| color: $buttonFontWarnColor; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-warn:hover { |
| color: $buttonFontWarnColorHover; |
| background-color: $red2; |
| border: 1px solid $warnColor; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-warn.mat-button-focus { |
| color: $buttonFontWarnColorSelected; |
| background-color: $warnColor; |
| border: 1px solid $buttonBorderColorRegularSelected; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-warn[disabled] { |
| color: $buttonFontWarnColorDisabled; |
| background-color: $warnColor; |
| border: 1px solid $warnColor; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-critical { |
| color: $buttonFontCriticalColor; |
| background-color: $orange1; |
| border: 1px solid $orange1; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-critical:hover { |
| color: $buttonFontCriticalColorHover; |
| background-color: $orange2; |
| border: 1px solid $orange2; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-critical.mat-button-focus { |
| color: $buttonFontCriticalColorSelected; |
| background-color: $orange2; |
| border: 1px solid $buttonBorderColorRegularSelected; |
| } |
| |
| body[fds] .mat-raised-button.mat-fds-critical[disabled] { |
| color: $buttonFontCriticalColorDisabled; |
| background-color: $orange1; |
| border: 1px solid $orange1; |
| } |
| |
| .fds-primary-dropdown-button-menu .cdk-focused { |
| color: $buttonFontPrimaryColorSelected; |
| background-color: $buttonBgColorPrimarySelected; |
| } |
| } |