_check-box.scss

text/plain • 1.16 kiB
ASCII text
        
            1
            /* Check Boxes */
        
            2
            
        
            3
            @use "../../../../theme";
        
            4
            @use "../../../../theme-color";
        
            5
            @use "../../../../st-theme";
        
            6
            
        
            7
            .check-box {
        
            8
              StBoxLayout {
        
            9
                spacing: 8px;
        
            10
              }
        
            11
            
        
            12
              StBin {
        
            13
                transition-duration: st-theme.$duration;
        
            14
                width: 24px;
        
            15
                height: 24px;
        
            16
                padding: (theme.$medium-size - 24px) / 2;
        
            17
                border-radius: theme.$medium-size / 2;
        
            18
              }
        
            19
            
        
            20
              StBin,
        
            21
              &:focus StBin {
        
            22
                background-image: url("assets/checkbox-off.svg");
        
            23
              }
        
            24
            
        
            25
              &:focus StBin {
        
            26
                background-color: theme-color.focus-overlay(theme-color.$on-surface);
        
            27
              }
        
            28
            
        
            29
              &:hover StBin {
        
            30
                background-color: theme-color.hover-overlay(theme-color.$on-surface);
        
            31
              }
        
            32
            
        
            33
              &:active StBin {
        
            34
                transition-duration: st-theme.$duration-ripple;
        
            35
                background-color: theme-color.pressed-overlay(theme-color.$on-surface);
        
            36
              }
        
            37
            
        
            38
              &:checked StBin,
        
            39
              &:checked:focus StBin {
        
            40
                background-image: url("assets/checkbox.svg");
        
            41
              }
        
            42
            
        
            43
              &:checked:focus StBin {
        
            44
                background-color: theme-color.focus-overlay(theme-color.$primary);
        
            45
              }
        
            46
            
        
            47
              &:checked:hover StBin {
        
            48
                background-color: theme-color.hover-overlay(theme-color.$primary);
        
            49
              }
        
            50
            
        
            51
              &:checked:active StBin {
        
            52
                background-color: theme-color.pressed-overlay(theme-color.$primary);
        
            53
              }
        
            54
            }
        
            55