static/scss/bootstrap-4.0.0-alpha.6/scss/_custom-forms.scss

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