platform/core/common/styles/_buttonToggles.scss

/*
 * 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.
 */

@mixin fds-button-toggles-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);

    body[fds] .expansion-panel-filter-toggle-group {
        box-shadow: none !important;
        border: none;
        border-radius: 0;
    }

    body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle {
        height: 75px;
        width: 125px;
        border: 1px solid $grey4;
    }

    body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-label-content {
        height: 100%;
        width: 100%;
        padding: 0;
        line-height: 63px;
        text-align: center;
    }

    body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked {
        background-color: $accentColor;
        color: white;
    }

    body[fds] .expansion-panel-filter-toggle-group .mat-display-1 {
        color: $accentColor;
        margin: 0;
    }

    body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked .mat-display-1 {
        color: white;
    }

    body[fds] .expansion-panel-filter-toggle-group div {
        line-height: normal;
    }

    body[fds] .mat-button-toggle-checked .mat-button-toggle-focus-overlay {
        border-bottom: none;
    }

    body[fds] .tab-toggle-group {
        box-shadow: none !important;
        border: none;
        border-radius: 0;
    }

    body[fds] .tab-toggle-group .mat-button-toggle-label-content {
        border-bottom: 2px solid $grey5;
        text-transform: uppercase;
    }

    body[fds] .tab-toggle-group .mat-button-toggle-checked {
        background: transparent;
    }

    body[fds] .on-off-toggle-group .mat-button-toggle-label-content {
        height: 100%;
        width: 100%;
        padding: 0;
        line-height: 20px;
        text-align: center;
    }

    body[fds] .tab-toggle-group .mat-button-toggle-checked .mat-button-toggle-label-content {
        border-bottom: 2px solid $accentColor;
        background: transparent;
    }

    body[fds] .on-off-toggle-group {
        box-shadow: none !important;
    }

    body[fds] .on-off-toggle-group .mat-button-toggle {
        height: 20px;
        width: 35px;
        border: 1px solid $grey4;
    }

    body[fds] .on-off-toggle-group .mat-button-toggle-checked {
        background-color: $accentColor;
        color: white;
        border: 1px solid $accentColor;
    }

    body[fds] .off-toggle.mat-button-toggle-checked {
        background-color: $grey4;
        color: $grey1;
        border: 1px solid $grey4;
    }

    body[fds] .tab-toggle-group > .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
        color: rgba(0, 0, 0, 0.54);
    }

    body[fds] .tab-toggle-group > .mat-button-toggle-appearance-standard {
        color: rgba(0, 0, 0, 0.38);
        background: transparent;
        border-left: 0;
    }

    body[fds] .tab-toggle-group > .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
        line-height: 38px;
    }
}