portal-FE-common/src/styles/bootstrap/_custom-forms.scss

   1 // Embedded icons from Open Iconic.
   2 // Released under MIT and copyright 2014 Waybury.
   3 // https://useiconic.com/open
   4
   5
   6 // Checkboxes and radios
   7 //
   8 // Base class takes care of all the key behavioral aspects.
   9
  10 .custom-control {
  11   position: relative;
  12   display: block;
  13   min-height: (1rem * $line-height-base);
  14   padding-left: $custom-control-gutter;
  15 }
  16
  17 .custom-control-inline {
  18   display: inline-flex;
  19   margin-right: $custom-control-spacer-x;
  20 }
  21
  22 .custom-control-input {
  23   position: absolute;
  24   z-index: -1; // Put the input behind the label so it doesn't overlay text
  25   opacity: 0;
  26
  27   &:checked ~ .custom-control-label::before {
  28     color: $custom-control-indicator-checked-color;
  29     @include gradient-bg($custom-control-indicator-checked-bg);
  30     @include box-shadow($custom-control-indicator-checked-box-shadow);
  31   }
  32
  33   &:focus ~ .custom-control-label::before {
  34     // the mixin is not used here to make sure there is feedback
  35     box-shadow: $custom-control-indicator-focus-box-shadow;
  36   }
  37
  38   &:active ~ .custom-control-label::before {
  39     color: $custom-control-indicator-active-color;
  40     background-color: $custom-control-indicator-active-bg;
  41     @include box-shadow($custom-control-indicator-active-box-shadow);
  42   }
  43
  44   &:disabled {
  45     ~ .custom-control-label {
  46       color: $custom-control-label-disabled-color;
  47
  48       &::before {
  49         background-color: $custom-control-indicator-disabled-bg;
  50       }
  51     }
  52   }
  53 }
  54
  55 // Custom control indicators
  56 //
  57 // Build the custom controls out of psuedo-elements.
  58
  59 .custom-control-label {
  60   margin-bottom: 0;
  61
  62   // Background-color and (when enabled) gradient
  63   &::before {
  64     position: absolute;
  65     top: (($line-height-base - $custom-control-indicator-size) / 2);
  66     left: 0;
  67     display: block;
  68     width: $custom-control-indicator-size;
  69     height: $custom-control-indicator-size;
  70     pointer-events: none;
  71     content: "";
  72     user-select: none;
  73     background-color: $custom-control-indicator-bg;
  74     @include box-shadow($custom-control-indicator-box-shadow);
  75   }
  76
  77   // Foreground (icon)
  78   &::after {
  79     position: absolute;
  80     top: (($line-height-base - $custom-control-indicator-size) / 2);
  81     left: 0;
  82     display: block;
  83     width: $custom-control-indicator-size;
  84     height: $custom-control-indicator-size;
  85     content: "";
  86     background-repeat: no-repeat;
  87     background-position: center center;
  88     background-size: $custom-control-indicator-bg-size;
  89   }
  90 }
  91
  92
  93 // Checkboxes
  94 //
  95 // Tweak just a few things for checkboxes.
  96
  97 .custom-checkbox {
  98   .custom-control-label::before {
  99     @include border-radius($custom-checkbox-indicator-border-radius);
 100   }
 101
 102   .custom-control-input:checked ~ .custom-control-label {
 103     &::before {
 104       @include gradient-bg($custom-control-indicator-checked-bg);
 105     }
 106     &::after {
 107       background-image: $custom-checkbox-indicator-icon-checked;
 108     }
 109   }
 110
 111   .custom-control-input:indeterminate ~ .custom-control-label {
 112     &::before {
 113       @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
 114       @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
 115     }
 116     &::after {
 117       background-image: $custom-checkbox-indicator-icon-indeterminate;
 118     }
 119   }
 120 }
 121
 122 // Radios
 123 //
 124 // Tweak just a few things for radios.
 125
 126 .custom-radio {
 127   .custom-control-label::before {
 128     border-radius: $custom-radio-indicator-border-radius;
 129   }
 130
 131   .custom-control-input:checked ~ .custom-control-label {
 132     &::before {
 133       @include gradient-bg($custom-control-indicator-checked-bg);
 134     }
 135     &::after {
 136       background-image: $custom-radio-indicator-icon-checked;
 137     }
 138   }
 139 }
 140
 141
 142 // Select
 143 //
 144 // Replaces the browser default select with a custom one, mostly pulled from
 145 // http://primercss.io.
 146 //
 147
 148 .custom-select {
 149   display: inline-block;
 150   width: 100%;
 151   height: $input-height;
 152   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
 153   line-height: $custom-select-line-height;
 154   color: $custom-select-color;
 155   vertical-align: middle;
 156   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
 157   background-size: $custom-select-bg-size;
 158   border: $custom-select-border-width solid $custom-select-border-color;
 159   @if $enable-rounded {
 160     border-radius: $custom-select-border-radius;
 161   } @else {
 162     border-radius: 0;
 163   }
 164   appearance: none;
 165
 166   &:focus {
 167     border-color: $custom-select-focus-border-color;
 168     outline: 0;
 169     box-shadow: $custom-select-focus-box-shadow;
 170
 171     &::-ms-value {
 172       // For visual consistency with other platforms/browsers,
 173       // suppress the default white text on blue background highlight given to
 174       // the selected option text when the (still closed) <select> receives focus
 175       // in IE and (under certain conditions) Edge.
 176       // See https://github.com/twbs/bootstrap/issues/19398.
 177       color: $input-color;
 178       background-color: $input-bg;
 179     }
 180   }
 181
 182   &[multiple],
 183   &[size]:not([size="1"]) {
 184     height: auto;
 185     padding-right: $custom-select-padding-x;
 186     background-image: none;
 187   }
 188
 189   &:disabled {
 190     color: $custom-select-disabled-color;
 191     background-color: $custom-select-disabled-bg;
 192   }
 193
 194   // Hides the default caret in IE11
 195   &::-ms-expand {
 196     opacity: 0;
 197   }
 198 }
 199
 200 .custom-select-sm {
 201   height: $custom-select-height-sm;
 202   padding-top: $custom-select-padding-y;
 203   padding-bottom: $custom-select-padding-y;
 204   font-size: $custom-select-font-size-sm;
 205 }
 206
 207 .custom-select-lg {
 208   height: $custom-select-height-lg;
 209   padding-top: $custom-select-padding-y;
 210   padding-bottom: $custom-select-padding-y;
 211   font-size: $custom-select-font-size-lg;
 212 }
 213
 214
 215 // File
 216 //
 217 // Custom file input.
 218
 219 .custom-file {
 220   position: relative;
 221   display: inline-block;
 222   width: 100%;
 223   height: $custom-file-height;
 224   margin-bottom: 0;
 225 }
 226
 227 .custom-file-input {
 228   position: relative;
 229   z-index: 2;
 230   width: 100%;
 231   height: $custom-file-height;
 232   margin: 0;
 233   opacity: 0;
 234
 235   &:focus ~ .custom-file-control {
 236     border-color: $custom-file-focus-border-color;
 237     box-shadow: $custom-file-focus-box-shadow;
 238
 239     &::before {
 240       border-color: $custom-file-focus-border-color;
 241     }
 242   }
 243
 244   @each $lang, $value in $custom-file-text {
 245     &:lang(#{$lang}) ~ .custom-file-label::after {
 246       content: $value;
 247     }
 248   }
 249 }
 250
 251 .custom-file-label {
 252   position: absolute;
 253   top: 0;
 254   right: 0;
 255   left: 0;
 256   z-index: 1;
 257   height: $custom-file-height;
 258   padding: $custom-file-padding-y $custom-file-padding-x;
 259   line-height: $custom-file-line-height;
 260   color: $custom-file-color;
 261   background-color: $custom-file-bg;
 262   border: $custom-file-border-width solid $custom-file-border-color;
 263   @include border-radius($custom-file-border-radius);
 264   @include box-shadow($custom-file-box-shadow);
 265
 266   &::after {
 267     position: absolute;
 268     top: 0;
 269     right: 0;
 270     bottom: 0;
 271     z-index: 3;
 272     display: block;
 273     height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
 274     padding: $custom-file-padding-y $custom-file-padding-x;
 275     line-height: $custom-file-line-height;
 276     color: $custom-file-button-color;
 277     content: "Browse";
 278     @include gradient-bg($custom-file-button-bg);
 279     border-left: $custom-file-border-width solid $custom-file-border-color;
 280     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
 281   }
 282 }