Switch Mode

No notes defined.

<!-- Default -->
<div class="sds-switchMode">
    <input class="sds-switchMode__input" type="radio" name="toggle" id="toggle-dark" value="dark">
    <label for="toggle-dark" class="sds-switchMode__label">
        <span>Dark</span>
    </label>
    <input class="sds-switchMode__input" type="radio" name="toggle" id="toggle-auto" value="auto">
    <label class="sds-switchMode__label" for="toggle-auto">
        <span>Auto</span>
    </label>
    <input class="sds-switchMode__input" type="radio" name="toggle" id="toggle-light" value="light">
    <label class="sds-switchMode__label" for="toggle-light">
        <span>Light</span>
    </label>
    <span class="sds-switchMode__bg"></span>
</div>

<!--  -->
<div class="sds-switchMode">
    <input class="sds-switchMode__input" type="radio" name="toggle" id="toggle-dark" value="dark">
    <label for="toggle-dark" class="sds-switchMode__label">
        <span>Dark</span>
    </label>
    <input class="sds-switchMode__input" type="radio" name="toggle" id="toggle-auto" value="auto">
    <label class="sds-switchMode__label" for="toggle-auto">
        <span>Auto</span>
    </label>
    <input class="sds-switchMode__input" type="radio" name="toggle" id="toggle-light" value="light">
    <label class="sds-switchMode__label" for="toggle-light">
        <span>Light</span>
    </label>
    <span class="sds-switchMode__bg"></span>
</div>

<div class="{{ namespace }}switchMode{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <input class="{{ namespace }}switchMode__input" type="radio" name="toggle" id="toggle-dark" value="dark">
    <label for="toggle-dark" class="{{ namespace }}switchMode__label">
        <span>Dark</span>
    </label>
    <input class="{{ namespace }}switchMode__input" type="radio" name="toggle" id="toggle-auto" value="auto">
    <label class="{{ namespace }}switchMode__label" for="toggle-auto">
        <span>Auto</span>
    </label>
    <input class="{{ namespace }}switchMode__input" type="radio" name="toggle" id="toggle-light" value="light">
    <label class="{{ namespace }}switchMode__label" for="toggle-light">
        <span>Light</span>
    </label>
    <span class="{{ namespace }}switchMode__bg"></span>
</div>
  • Handle: @spk-switch-mode
  • Preview:
  • Filesystem Path: components/spuerkeess-site/molecules/switch-mode/switch-mode.njk
  • Referenced by (1): @footer
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}switchMode {
    
      /* Save root element context for easy access if nesting is needed */
    
      $self: &;
    
    
      /* properties of current element  + media queries */
      position: relative;
      display: inline-flex;
      align-items: center;
      @include custom-prop-fallback("background-color", "sys-color-background-primary-120");
      padding: map-deep-get($token-spacer-inset-map, "xs");
      border-radius: map-deep-get($token-spacer-unit-map, "40");
    
      /* Pseudo Elements */
    
      &::before {
      }
    
      &::after {
      }
    
      /*
      Include elements that are linked to the current element but have to reside at the root level of the stylesheet
      (e.g: keyframes)
      */
      @at-root {
      }
    
    
      /* children - write selector in full in comments in order to facilitate search */
    
      // switchTheme__childElement
      &__label {
    
        padding: map-deep-get($token-spacer-inset-map, "sm") map-deep-get($token-spacer-inset-map, "md");
        @include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
        flex: 1 1 0;
        z-index: map-deep-get($token-z-index-map, "low");
        font-weight: map-deep-get($token-font-weight-map, "bold");
        font-size: map-deep-get($token-font-size-map, "body", "xs");
        line-height: map-deep-get($token-font-line-height-map, "l");
        border-radius: map-deep-get($token-spacer-unit-map, "40");
        cursor: pointer;
    
      }
    
      &__input {
    
        overflow: hidden;
        position: absolute;
        opacity: 0;
    
        &[value="dark"]:checked ~ span {
    
          left: map-deep-get($token-spacer-unit-map, "4");
    
        }
    
        &[value="auto"]:checked ~ span {
    
          left: 65px;
    
        }
        &[value="light"]:checked ~ span {
    
          left: 127px;
    
        }
    
      }
    
      &__bg {
    
        width: 61px;
        height: map-deep-get($token-spacer-unit-map, "32");
        border-radius: map-deep-get($token-spacer-unit-map, "40");
        @include custom-prop-fallback("background-color", "sys-color-background-primary-80");
        position: absolute;
        left: 65px;
        top: map-deep-get($token-spacer-unit-map, "4");
        z-index: map-deep-get($token-z-index-map, "zero");
        transition: all .3s ease-out;
    
      }
    
    
      /* modifiers */
    
      // switchTheme -altStyle
      &.-altStyle {
    
        // follows same logic as base element
    
      }
    
      /* random parent element */
      /*
      *
      *   Syntax : .randomParentElt & {}
      *
      */
    
      /* Pseudo Classes */
    
      &:hover {
        @media (hover: hover) {
    
        }
      }
    
      &:focus {
      }
    
      &:active {
      }
    
      &:focus,
      &:active {
      }
    
    }
  • URL: /components/raw/spk-switch-mode/_switch-mode.scss
  • Filesystem Path: components/spuerkeess-site/molecules/switch-mode/_switch-mode.scss
  • Size: 2.5 KB