_check-box.scss

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