diary-website

Website for diary
git clone https://git.in0rdr.ch/diary-website.git
Log | Files | Refs | Pull requests | README | LICENSE

_forms.scss (1515B)

      1 fieldset {
      2   background-color: $secondary-background-color;
      3   border: $base-border;
      4   margin: 0 0 $small-spacing;
      5   padding: $base-spacing;
      6 }
      7 
      8 input,
      9 label,
     10 select {
     11   display: block;
     12   font-family: $base-font-family;
     13   font-size: $base-font-size;
     14 }
     15 
     16 label {
     17   font-weight: 600;
     18   margin-bottom: $small-spacing / 2;
     19 
     20   &.required::after {
     21     content: "*";
     22   }
     23 
     24   abbr {
     25     display: none;
     26   }
     27 }
     28 
     29 #{$all-text-inputs},
     30 select[multiple=multiple] {
     31   background-color: $base-background-color;
     32   border: $base-border;
     33   border-radius: $base-border-radius;
     34   box-shadow: $form-box-shadow;
     35   box-sizing: border-box;
     36   font-family: $base-font-family;
     37   font-size: $base-font-size;
     38   margin-bottom: $small-spacing;
     39   padding: $base-spacing / 3;
     40   transition: border-color $base-duration $base-timing;
     41   width: 100%;
     42 
     43   &:hover {
     44     border-color: shade($base-border-color, 20%);
     45   }
     46 
     47   &:focus {
     48     border-color: $action-color;
     49     box-shadow: $form-box-shadow-focus;
     50     outline: none;
     51   }
     52 
     53   &:disabled {
     54     background-color: shade($base-background-color, 5%);
     55     cursor: not-allowed;
     56 
     57     &:hover {
     58       border: $base-border;
     59     }
     60   }
     61 }
     62 
     63 textarea {
     64   resize: vertical;
     65 }
     66 
     67 input[type="search"] {
     68   appearance: none;
     69 }
     70 
     71 input[type="checkbox"],
     72 input[type="radio"] {
     73   display: inline;
     74   margin-right: $small-spacing / 2;
     75 
     76   + label {
     77     display: inline-block;
     78   }
     79 }
     80 
     81 input[type="file"] {
     82   margin-bottom: $small-spacing;
     83   width: 100%;
     84 }
     85 
     86 select {
     87   margin-bottom: $base-spacing;
     88   max-width: 100%;
     89   width: auto;
     90 }