Choice Chip: Default

No notes defined.

<button type="button" class="sds-btn -btnBase -btnBaseSecondary sds-choiceChip">

    <span class="sds-btn__text">10:00</span>

</button>
{% include "@button" %}
  • Content:
    .#{$namespace}choiceChip {
    
      /* Save root element context for easy access if nesting is needed */
    
      $self: &;
    
    
      /* variables specific to current element */
    
      $element-specific-variables: "";
    
    
      /* properties of current element  + media queries */
      width: map-deep-get($token-spacer-unit-map, "64");
      justify-content: center;
    
      /* 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 */
    
      // choiceChip__childElement
      &__childElement {
    
        // follows same logic as parent
    
      }
    
    
      /* modifiers */
    
      // choiceChip -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/choice-chip/_choice-chip.scss
  • Filesystem Path: components/base-components/atoms/choice-chip/_choice-chip.scss
  • Size: 1.1 KB