UCI

Switch group: Default 

<ul class="switch-group">
    <li class="switch-group__item">
        <div class="switch-wrapper">
            <input class="switch
" id="switch1" type="radio" title="Switch 1" name="Switch group" value="1">
            <label class="switch-label" for="switch1">
                <div class="text-label-m">1</div>
            </label>
        </div>
    </li>
    <li class="switch-group__item">
        <div class="switch-wrapper">
            <input class="switch
" id="switch2" type="radio" title="Switch 2" name="Switch group" value="2">
            <label class="switch-label" for="switch2">
                <div class="text-label-m">2</div>
            </label>
        </div>
    </li>
    <li class="switch-group__item">
        <div class="switch-wrapper">
            <input class="switch
" id="switch3" type="radio" title="Switch 3" name="Switch group" value="3">
            <label class="switch-label" for="switch3">
                <div class="text-label-m">3</div>
            </label>
        </div>
    </li>
    <li class="switch-group__item">
        <div class="switch-wrapper">
            <input class="switch
" id="switch4" type="radio" title="Switch 4" name="Switch group" value="4">
            <label class="switch-label" for="switch4">
                <div class="text-label-m">4</div>
            </label>
        </div>
    </li>
</ul>
 
<ul class="switch-group">
    {{#each this.switch-group}}
        <li class="switch-group__item">
            <div class="switch-wrapper">
                <input
                    class="switch
                    {{#if this.checked}}
                         checked
                    {{/if}}
                    {{#if this.disabled}}
                         disabled
                    {{/if}}"
                    id="{{ this.id }}"
                    type="radio"
                    title="{{ this.title }}"
                    name="{{ this.name }}"
                    value="{{ this.label.text }}"
                    {{#if this.additionalAttributes}}
                        {{{ this.additionalAttributes }}}
                    {{/if}}
                    {{#if this.disabled}}
                         disabled
                    {{/if}}
                >
                <label
                    class="switch-label"
                    for="{{ this.id }}"
                >
                    {{> @text-label-m this.label}}
                </label>
            </div>
        </li>
    {{/each}}
</ul>
 
{
  "switch-group": [
    {
      "id": "switch1",
      "title": "Switch 1",
      "name": "Switch group",
      "label": {
        "text": "1"
      }
    },
    {
      "id": "switch2",
      "title": "Switch 2",
      "name": "Switch group",
      "label": {
        "text": "2"
      }
    },
    {
      "id": "switch3",
      "title": "Switch 3",
      "name": "Switch group",
      "label": {
        "text": "3"
      }
    },
    {
      "id": "switch4",
      "title": "Switch 4",
      "name": "Switch group",
      "label": {
        "text": "4"
      }
    }
  ]
}
  • Content: 
    .switch-group{
    display: flex;
    .switch {
        position: absolute;
        opacity: 0;
        left: -9999px;
    
        &:hover,
        &:focus {
            + .switch-label {
                border-color: var(--color-secondary);
            }
        }
    
        &.checked, &:checked {
            + .switch-label {
                border-color: var(--color-accent-dark);
                background-color: var(--color-accent-dark);
    
                &:hover,
                &:focus {
                    opacity: 0.6;
                }
    
                .text-label-m {
                    color: var(--color-text-light);
                }
            }
    
            &:hover,
            &:focus {
                + .switch-label {
                    opacity: 1;
                }
            }
        }
    
        &-group {
            display: flex;
        }
    
        &-wrapper {
            position: relative;
            display: flex;
            min-height: 25px;
        }
    
        &-label {
            padding: 9px;
            min-width: 62px;
            border: 1px solid var(--color-secondary-light);
            text-align: center;
            transition: all 0.3s;
    
            @media (--viewport-sm-min) {
                min-width: 45px;
            }
    
            &:hover,
            &:focus {
                border-color: var(--color-secondary);
            }
        }
    
        &.disabled, &:disabled{
            + .switch-label {
                border-color:var(--color-border-disable);
                background-color: var(--color-background-disabled);
                cursor: unset;
                .text-label-m {
                    color: var(--color-text-disabled);
                }
            }
            &:hover,
            &:focus {
                + .switch-label {
                    border-color:var(--color-border-disable);
                }
            } 
        }
    
        &.checked.disabled, &:checked.disabled {
            + .switch-label {
                border-color: var(--color-border-disable);
                background-color: var(--color-background-cta-primary-disabled);
    
            }
        }
    }
}
  • URL: /components/raw/switch-group/switch-group.css
  • Filesystem Path: src/02-molecules/switch-group/switch-group.css
  • Size: 2.2 KB

No notes defined.