HOME

5h-3LL 1.0
DIR: /srv/http/adent.cz/tisic.cz.test2/scss/partials/~elements
/srv/http/adent.cz/tisic.cz.test2/scss/partials/~elements/
Current File : /srv/http/adent.cz/tisic.cz.test2/scss/partials/~elements/_forms.scss
/** 
 *  @styles adc-typo-spz-forms adc-Typo
 *
 * @description
 * SPZ - CSS pro prvky formulářů
 *
 **/

 @use "sass:math" ; 
 @use "sass:map" ; 
 @use "sass:list" ; 
 @use "../adc-config" as cfg ; // načte konfiguraci CSS
 @use "../../mixins/~core/" as mix ; // načte mixins/core/_index.scss


// 
// PARAMETRY NASTAVENÍ
// ===================
// 

// - společná nastavení
$-checkbox-width: 1.75rem ;
$-border-radius: 0 ;
// - konkrétní nastavení pro jednotlivé prvky - nastavují se skoro jako CSS (jen použij místo {} => () a místo , => ; )¨
// - pokud řádek zakomentuju, do CSS se nevloží
$-forms: (
  form: (
    padding: .5rem .25rem ,
    border: 0 ,
    border-radius: $-border-radius ,

    background-color: transparent ,
    color: inherit ,

    font-family: inherit ,
    font-size: small ,
    font-weight: normal ,
  ) ,
  fieldset: (
    border: 1px solid map-get( cfg.$colors, main-darker ) ,
    border-radius: $-border-radius ,
    
    // background-color: transparent ,
    // color: inherit ,
    ) ,
  legend: (
    padding: .25rem 1rem ,
    border-radius: $-border-radius ,
    
    // background-color: transparent ,

    // font-family: inherit ,
    font-size: 1.25rem ,
    font-weight: bold ,
  ) ,
  // ještě menší wrapper pro jednu/několik málo položek formuláře
  div-wrapper: (
    margin: .75rem .5rem ,
    padding: .5em 1em ,
    // border: 1px solid lighten( map-get( cfg.$colors, main-lighter ), 28% ) ,
    // border-radius: $-border-radius ,

    // background-color: lighten( map-get( cfg.$colors, main-lighter ), 32% ) ,
    // color: inherit ,    

    align-items: center ,
  ) ,
  label: (
    display: block ,
    // vyřešení kolize s Bootstrap _reset (nezobrazuje se nám jinak horní orámování fieldsetu...)
    width: auto ,

    font-size: small ,
  ) ,
  element: (
    width: 100% ,
    margin: 0 ,
    border: 1px solid map-get( cfg.$colors, main3 ) ,
    border-radius: $-border-radius ,
    outline: none ,
    
    background-color: #fff ,

    font-size: 1rem ,
    padding: .5rem ,
  ) ,
  element-active: (
    border: 1px solid map-get( cfg.$colors, main ) ,
    // outline: 0 ,

    // background-color: #fff ,
  ) ,
  element-required: (
    border: 2px solid lighten( map-get( cfg.$colors, main-lighter ), 20% ) ,
    background-color: #f5fff5 ,
  ) ,
  element-required-active: (
    border: 2px solid map-get( cfg.$colors, main ) ,
  ) ,
  element-disabled: (
    background-color: #eee ,
    border: 1px solid #ddd ,
  ) ,
  element-checkbox: (
    color: map-get( cfg.$colors, main ) ,
  ) ,
  element-button: (
    // border: 1px solid lighten( map-get( cfg.$colors, main-lighter ), 10% ) ,
    border: 0 ,

    background-color: map-get( cfg.$colors, main ) ,
    color: white ,
  ) ,
  element-button-file: (
    border: 1px solid map-get( cfg.$colors, main) ,
    
    background-color: white ,
    color: map-get( cfg.$colors, main) ,
  ) ,
) ;


//
// VLASTNÍ NASTAVENÍ
// =================
//

form,
form * {
  box-sizing: border-box ;
}

form {
  @include mix.print-cfg( map-get( $-forms, form ) ) ;
  
  // seskupovací div
  & > div,
  & > fieldset > div {
    @include mix.print-cfg( map-get( $-forms, div-wrapper ) ) ;

    & > * {
      @media only screen and (max-width: #{ map-get( cfg.$breakpoints, m ) - .5px}) {
        margin-bottom: map-get( cfg.$layout, strips-vertical, bottom ) ;
      }
    }
  }
}

fieldset {
  @include mix.print-cfg( map-get( $-forms, fieldset ) ) ;
  margin-bottom: map-get( cfg.$layout, strips-vertical, bottom ) ;
  
  legend {
    @include mix.print-cfg( map-get( $-forms, legend ) ) ;
  }
}

label {
  @include mix.print-cfg( map-get( $-forms, label ) ) ;

  // speciální zobrazování "zatržítek"
  &.adc-form-label-checkbox {
    display: flex;
    width: 100%;
    align-items: center;
    align-content: center;

    input[type=checkbox],
    input[type=radio] {
      margin-right: .5rem;
    }
  }
}

//
// PRVKY FORMULÁŘE
//

// "Vynulovat design" checkboxu
input[type=checkbox],
input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  //cursor: pointer;
}

// Obecná nastavení prvků
input,
select,
textarea {
  @include mix.print-cfg( map-get( $-forms, element ) ) ;

  &:focus,
  &:active {
    @include mix.print-cfg( map-get( $-forms, element-active ) ) ;
  }
  
  &:required {
    @include mix.print-cfg( map-get( $-forms, element-required ) ) ;
    
    &:focus,
    &:active {
      @include mix.print-cfg( map-get( $-forms, element-required-active ) ) ;
    }
  }
  
  &:disabled {
    @include mix.print-cfg( map-get( $-forms, element-disabled ) ) ;
  }
}

// Speciální nastavení prvků

// - option
option {
  // "vynulovat vzhled podle prohlížeče" - no zatím to nejde... :(
  -webkit-appearance: none;
  appearance: none;
  
  background-color: map-get( $-forms, element, background-color ) ;
  font-family: map-get( $-forms, form, font-family ) ;
  font-size: map-get( $-forms, element, font-size ) ;
}

// - checkbox
input[type=checkbox] {
  width: $-checkbox-width ;
  height: $-checkbox-width ;
  
  &:checked {
    position: relative;

    &::before {
      $width-correction: 0.9; // pomocná proměnná pro zmenšení zatržítka
      
      content:"";
      
      position: absolute;
      top: 0.07 * $-checkbox-width;
      left: 1px;
      
      width: $-checkbox-width * $width-correction;
      height: math.div( $-checkbox-width, 2 ) * $width-correction;
      border-left: 2px solid map-get( $-forms, element-checkbox, color ) ;
      border-bottom: 2px solid map-get( $-forms, element-checkbox, color ) ;
      transform: rotate(-45deg);
    }
  }  
}

// - radio
input[type=radio] {
  display: inline-flex ;
  justify-content: center ;
  align-items: center ;
  
  width: $-checkbox-width;
  height: $-checkbox-width;
  border-radius: math.div( $-checkbox-width, 2 );

  &:checked {
    position: relative;

    &::before {
      // pomocná proměnná pro zmenšení zatržítka
      $width-correction: 0.6; 
      // pomocná proměnná pro nastavení pozice zatržítka
      // $top-left-position: math.div( $-checkbox-width * (1-$width-correction), 2 );

      content: "";

      position: absolute;

      // top: calc( #{ $top-left-position } - 1px );
      // left: calc( #{ $top-left-position } - 1px );

      
      background-color: map-get( $-forms, element-checkbox, color ) ;
      
      width: $-checkbox-width * $width-correction;
      height: $-checkbox-width * $width-correction;
      border-radius: 50%;
      
    }
  }
}

// - input[type="file"]
input[type="file"]::file-selector-button {
  display: inline-block;
  width: auto;
  border: 1px solid map-get( cfg.$colors, main ) ;
  background-color: map-get( cfg.$colors, main ) ;
  color: white ;
}

// - potvrzovací tlačítko
input[type=submit] {
  @include mix.print-cfg( map-get( $-forms, element-button ) ) ;
}

//
// DIVy PRO FORMÁTOVÁNÍ FORMULÁŘŮ
//

// Pro automaticky generované formuláře - 1 řádek = 1 položka
.adc-form-auto {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  row-gap: .25rem;
  column-gap: .75rem;

  // Chrome-hack (zobrazuje to špatně, špatně pracuje s legend - jinak než FF a Edge...)
  legend {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  
  label:first-of-type {
    grid-column-start: 1;
    grid-row-start: 1;
  }
  // / Chrome-hack

  align-items: center;
  & .adc-form-textarea {
    align-self: flex-start;
    padding-top: .25rem;
  }
  
  // nadpisy
  &>*:nth-child(2n) {
    font-size: small;
    text-align: right;
  }

}

// Pro více labelů v jednom divu horizontálně
.adc-label-set-h {
  display: flex;
  
  label + label {
    margin-left: 1rem;
  }
}
// Pro více labelů v jednom divu vertikálně
.adc-label-set-v {
  label + label {
    margin-top: 1rem;
  }
}

// Pro vlastní design formulářů

// - divy pro zobrazení více (2 až 5) položek (labelů) v jednom řádku
@for $i from 2 through 5 {
  .adc-form-col#{$i} {
    // class pro 4 check- nebo radio-buttony v jednom řádku
    &.adc-form-centered-vertical >* {
      display: flex;
      align-items: center;
      align-content: center;

      input[type=radio] {
        margin-right: .5rem;
      }
    }
    
    @include mix.responsive( m ) {
      display: grid;
      grid-template-columns: repeat(#{$i},1fr);
      grid-template-rows: auto;    
      column-gap: 1rem;
    }
  }
}

// - class pro různou šířku submitů (1/2 až 1/5 šířky)
@for $i from 2 through 5 {
  .adc-form-submit#{$i} {
    $fraction: math.div(100,$i);

    @include mix.responsive( m ) {
      width: #{ $fraction + '%'};
      margin-left: #{math.div( 100 - $fraction,2 ) + '%'};
      margin-right: #{math.div( 100 - $fraction,2 ) + '%'};
    }
  }
}

// - divy pro potvrzení /souhlasy všelijakých podmínek
.adc-form-confirmation {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: auto;
  column-gap: 1rem;
  row-gap: .5rem;
  align-items: start;
  
  padding-top: map-get( cfg.$layout, strips-vertical, top ) ;

  // schovat label pro obrazovku, ale ať zůstane pro čtečky
  label {
    // margin-top: map-get( cfg.$layout, strips-vertical, bottom ) ;

    span {
      display: none;
    }
  }
}

.inline-form {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 1rem;

  width: auto;
 
  white-space: nowrap;

  & > * {
    margin-bottom: 0;
  }

  label.button-file {
    display: inline-block;
  }

  & > input[type="submit"] {
    width: 33%;
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .adc-display-from-m {
    display: none;
    @include mix.responsive( m ) {
      display: initial;
    }
  }
}