taipy/frontend/taipy-gui/public/stylekit/controls/toggle.css

/*
 * Copyright 2021-2024 Avaiga Private Limited
 *
 * Licensed 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.
 */

/**************************************************************

                   TAIPY TOGGLE

***************************************************************/

/*************************************************
              OVERRIDES / NORMALIZATION
**************************************************/

.taipy-toggle {
    display: inline-flex;
    z-index: 10;
    min-height: 48px;
    align-items: center;
    gap: 0.3em;
}

.taipy-toggle .MuiToggleButtonGroup-root[aria-label='Theme mode'] {
    background-color: var(--color-background);
}

/*************************************************
              MODIFIER CLASSES
**************************************************/
.taipy-toggle {
    margin: 4px 0;
}

/* relative : Reset the theme toggle position to fit page flow */
.taipy-toggle.relative {
    position: relative;
    top: auto;
    left: auto;
}

/* nolabel : remove toggle label */
.taipy-toggle.nolabel .MuiTypography-root {
    display: none;
}

.taipy-toggle.toggle-navbar .MuiButtonBase-root {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid;
    border-color: var(--color-contrast);
    color: var(--color-contrast);
    background-color: transparent;
}
.taipy-toggle.toggle-navbar .MuiButtonBase-root.Mui-selected {
    border-color: var(--color-primary);
    border-bottom: 2px solid;
    color: var(--color-primary);
}