summaryrefslogblamecommitdiffstats
path: root/src/objects/_field-label.scss
blob: 564ab2b9d04b5186ff6ca4294839fd16536fee42 (plain) (tree)
1
2
3
4
5
6
7
8
9
                 
                        
                          
                     
 
                                
 
               
                                                                
 
                                        
                                    
                                         
                                                                 
                                    
                                                             
    
                                               
                                                               

             
                                      


                              
                                   
                                      

                                                                
         
                                       
                                                         

             
                                                
                                                       

             
                                                           

                                  
                                        
                                      
                                                   



                                          
                                              


                                  
                                            



                                
@use 'sass:meta';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;

@forward 'field-label.vars';
@use 'field-label.vars' as vars;

@mixin styles {
    @include materialize-at-root(meta.module-variables('vars'));

    @include bem.object('field-label') {
        @include bem.elem('label') {
            display:            block;
            flex:               0 0 auto;
            padding-inline-end: props.get(vars.$spacing-i);
            font-size:          props.get(vars.$label-font-size);
            font-weight:        400;
            line-height:        1.3;
            color:              props.get(vars.$label-color);
    
            @include bem.next-elem('content') {
                margin-block-start: props.get(vars.$spacing-b);
            }
        }
    
        @include bem.elem('content') {
            display: block;
            flex:    1 1 auto;
        }
    
        @include bem.elem('hint') {
            display:            block;
            margin-block-start: props.get(vars.$spacing-b);
            font-size:          props.get(vars.$hint-font-size);
            color:              props.get(vars.$hint-color);
        }
    
        @include bem.is('invalid') {
            @include bem.elem('hint') {
                color: props.get(vars.$error-hint-color);
            }
        }
    
        @include bem.is('disabled') {
            @include bem.elem('label', 'hint') {
                color: props.get(vars.$disabled-color);
            }
        }
    
        @include bem.modifier('align-start', 'align-end') {
            display:     flex;
            align-items: baseline;
    
            @include bem.elem('label') {
                display: inline-block;
    
                @include bem.next-elem('content') {
                    margin-block-start: 0;
                }
            }
        }
    
        @include bem.modifier('align-start') {
            @include bem.elem('label') {
                text-align: start;
            }
        }
    
        @include bem.modifier('align-end') {
            @include bem.elem('label') {
                text-align: end;
            }
        }
    }
}