bootstrap 4.0.0.alpha3 → 4.0.0.alpha3.1

data/assets/stylesheets/bootstrap/_carousel.scss

@@ -102,12 +102,12 @@
 
   // Set gradients for backgrounds
   &.left {
-    @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
+    @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
   }
   &.right {
     right: 0;
     left: auto;
-    @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
+    @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
   }
 
   // Hover/focus state
@@ -125,19 +125,19 @@
     top: 50%;
     z-index: 5;
     display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-top: -10px;
+    width: $carousel-icon-width;
+    height: $carousel-icon-width;
+    margin-top: -($carousel-icon-width / 2);
     font-family: serif;
     line-height: 1;
   }
   .icon-prev {
     left: 50%;
-    margin-left: -10px;
+    margin-left: -($carousel-icon-width / 2);
   }
   .icon-next {
     right: 50%;
-    margin-right: -10px;
+    margin-right: -($carousel-icon-width / 2);
   }
 
   .icon-prev {
@@ -163,16 +163,16 @@
   bottom: 10px;
   left: 50%;
   z-index: 15;
-  width: 60%;
+  width: $carousel-indicators-width;
   padding-left: 0;
-  margin-left: -30%;
+  margin-left: -($carousel-indicators-width / 2);
   text-align: center;
   list-style: none;
 
   li {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: $carousel-indicator-size;
+    height: $carousel-indicator-size;
     margin: 1px;
     text-indent: -999px;
     cursor: pointer;
@@ -183,11 +183,12 @@
     // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
     background-color: rgba(0,0,0,0); // IE9
     border: 1px solid $carousel-indicator-border-color;
-    border-radius: 10px;
+    border-radius: $carousel-indicator-size;
   }
+
   .active {
-    width: 12px;
-    height: 12px;
+    width: $carousel-indicator-active-size;
+    height: $carousel-indicator-active-size;
     margin: 0;
     background-color: $carousel-indicator-active-bg;
   }
@@ -200,9 +201,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: 15%;
+  right: ((100% - $carousel-caption-width) / 2);
   bottom: 20px;
-  left: 15%;
+  left: ((100% - $carousel-caption-width) / 2);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
@@ -225,23 +226,23 @@
   .carousel-control {
     .icon-prev,
     .icon-next {
-      width: 30px;
-      height: 30px;
-      margin-top: -15px;
-      font-size: 30px;
+      width: $carousel-control-sm-up-size;
+      height: $carousel-control-sm-up-size;
+      margin-top: -($carousel-control-sm-up-size / 2);
+      font-size: $carousel-control-sm-up-size;
     }
     .icon-prev {
-      margin-left: -15px;
+      margin-left: -($carousel-control-sm-up-size / 2);
     }
     .icon-next {
-      margin-right: -15px;
+      margin-right: -($carousel-control-sm-up-size / 2);
     }
   }
 
   // Show and left align the captions
   .carousel-caption {
-    right: 20%;
-    left: 20%;
+    right: ((100% - $carousel-caption-sm-up-width) / 2);
+    left: ((100% - $carousel-caption-sm-up-width) / 2);
     padding-bottom: 30px;
   }
 

data/assets/stylesheets/bootstrap/_close.scss

@@ -19,6 +19,8 @@
 // iOS requires the button element instead of an anchor tag.
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// scss-lint:disable QualifyingElement
 button.close {
   padding: 0;
   cursor: pointer;
@@ -26,3 +28,4 @@ button.close {
   border: 0;
   -webkit-appearance: none;
 }
+// scss-lint:enable QualifyingElement

data/assets/stylesheets/bootstrap/_code.scss

@@ -8,8 +8,8 @@ samp {
 
 // Inline code
 code {
-  padding: .2rem .4rem;
-  font-size: 90%;
+  padding: $code-padding-y $code-padding-x;
+  font-size: $code-font-size;
   color: $code-color;
   background-color: $code-bg;
   @include border-radius($border-radius);
@@ -17,12 +17,12 @@ code {
 
 // User input typically entered via keyboard
 kbd {
-  padding: .2rem .4rem;
-  font-size: 90%;
+  padding: $code-padding-y $code-padding-x;
+  font-size: $code-font-size;
   color: $kbd-color;
   background-color: $kbd-bg;
   @include border-radius($border-radius-sm);
-  @include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
+  @include box-shadow($kbd-box-shadow);
 
   kbd {
     padding: 0;
@@ -37,8 +37,7 @@ pre {
   display: block;
   margin-top: 0;
   margin-bottom: 1rem;
-  font-size: 90%;
-  line-height: $line-height;
+  font-size: $code-font-size;
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags

data/assets/stylesheets/bootstrap/_custom-forms.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable PropertyCount
+
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // http://useiconic.com/open
@@ -7,38 +9,49 @@
 //
 // Base class takes care of all the key behavioral aspects.
 
-.c-input {
+.custom-control {
   position: relative;
   display: inline;
-  padding-left: 1.5rem;
-  color: #555;
+  padding-left: $custom-control-gutter;
   cursor: pointer;
 
-  > input {
-    position: absolute;
-    z-index: -1; // Put the input behind the label so it doesn't overlay text
-    opacity: 0;
+  + .custom-control {
+    margin-left: $custom-control-spacer-x;
+  }
+}
 
-    &:checked ~ .c-indicator {
-      color: #fff;
-      background-color: #0074d9;
-      @include box-shadow(none);
-    }
+.custom-control-input {
+  position: absolute;
+  z-index: -1; // Put the input behind the label so it doesn't overlay text
+  opacity: 0;
 
-    &:focus ~ .c-indicator {
-      // the mixin is not used here to make sure there is feedback
-      box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
-    }
+  &:checked ~ .custom-control-indicator {
+    color: $custom-control-checked-indicator-color;
+    background-color: $custom-control-checked-indicator-bg;
+    @include box-shadow($custom-control-checked-indicator-box-shadow);
+  }
 
-    &:active ~ .c-indicator {
-      color: #fff;
-      background-color: #84c6ff;
-      @include box-shadow(none);
-    }
+  &:focus ~ .custom-control-indicator {
+    // the mixin is not used here to make sure there is feedback
+    box-shadow: $custom-control-focus-indicator-box-shadow;
+  }
+
+  &:active ~ .custom-control-indicator {
+    color: $custom-control-active-indicator-color;
+    background-color: $custom-control-active-indicator-bg;
+    @include box-shadow($custom-control-active-indicator-box-shadow);
   }
 
-  + .c-input {
-    margin-left: 1rem;
+  &:disabled {
+    ~ .custom-control-indicator {
+      cursor: $custom-control-disabled-cursor;
+      background-color: $custom-control-disabled-indicator-bg;
+    }
+
+    ~ .custom-control-description {
+      color: $custom-control-disabled-description-color;
+      cursor: $custom-control-disabled-cursor;
+    }
   }
 }
 
@@ -46,42 +59,39 @@
 //
 // Generates a shadow element to create our makeshift checkbox/radio background.
 
-.c-indicator {
+.custom-control-indicator {
   position: absolute;
-  top: 0;
+  top: .0625rem;
   left: 0;
   display: block;
-  width: 1rem;
-  height: 1rem;
-  font-size: 65%;
-  line-height: 1rem;
-  color: #eee;
-  text-align: center;
+  width: $custom-control-indicator-size;
+  height: $custom-control-indicator-size;
+  pointer-events: none;
   user-select: none;
-  background-color: #eee;
+  background-color: $custom-control-indicator-bg;
   background-repeat: no-repeat;
   background-position: center center;
-  background-size: 50% 50%;
-  @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
+  background-size: $custom-control-indicator-bg-size;
+  @include box-shadow($custom-control-indicator-box-shadow);
 }
 
 // Checkboxes
 //
 // Tweak just a few things for checkboxes.
 
-.c-checkbox {
-  .c-indicator {
-    border-radius: .25rem;
+.custom-checkbox {
+  .custom-control-indicator {
+    @include border-radius($custom-checkbox-radius);
   }
 
-  input:checked ~ .c-indicator {
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
+  .custom-control-input:checked ~ .custom-control-indicator {
+    background-image: $custom-checkbox-checked-icon;
   }
 
-  input:indeterminate ~ .c-indicator {
-    background-color: #0074d9;
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
-    @include box-shadow(none);
+  .custom-control-input:indeterminate ~ .custom-control-indicator {
+    background-color: $custom-checkbox-indeterminate-bg;
+    background-image: $custom-checkbox-indeterminate-icon;
+    @include box-shadow($custom-checkbox-indeterminate-box-shadow);
   }
 }
 
@@ -89,13 +99,13 @@
 //
 // Tweak just a few things for radios.
 
-.c-radio {
-  .c-indicator {
-    border-radius: 50%;
+.custom-radio {
+  .custom-control-indicator {
+    border-radius: $custom-radio-radius;
   }
 
-  input:checked ~ .c-indicator {
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
+  .custom-control-input:checked ~ .custom-control-indicator {
+    background-image: $custom-radio-checked-icon;
   }
 }
 
@@ -105,17 +115,17 @@
 // By default radios and checkboxes are `inline-block` with no additional spacing
 // set. Use these optional classes to tweak the layout.
 
-.c-inputs-stacked {
-  .c-input {
+.custom-controls-stacked {
+  .custom-control {
     display: inline;
 
     &::after {
       display: block;
-      margin-bottom: .25rem;
+      margin-bottom: $custom-control-spacer-y;
       content: "";
     }
 
-    + .c-input {
+    + .custom-control {
       margin-left: 0;
     }
   }
@@ -129,25 +139,42 @@
 //
 // Includes IE9-specific hacks (noted by ` \9`).
 
-.c-select {
+.custom-select {
   display: inline-block;
   max-width: 100%;
-  padding: .375rem 1.75rem .375rem .75rem;
-  padding-right: .75rem \9;
-  color: $input-color;
+  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+  padding-right: $custom-select-padding-x \9;
+  color: $custom-select-color;
   vertical-align: middle;
-  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
+  background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
   background-image: none \9;
-  background-size: 8px 10px;
-  border: $input-btn-border-width solid $input-border-color;
+  background-size: $custom-select-bg-size;
+  border: $custom-select-border-width solid $custom-select-border-color;
+  @include border-radius($custom-select-border-radius);
   // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
   -webkit-appearance: none;
 
   &:focus {
-    border-color: #51a7e8;
+    border-color: $custom-select-focus-border-color;
     outline: none;
-    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5));
+    @include box-shadow($custom-select-focus-box-shadow);
+
+    &::-ms-value {
+      // For visual consistency with other platforms/browsers,
+      // supress the default white text on blue background highlight given to
+      // the selected option text when the (still closed) <select> receives focus
+      // in IE and (under certain conditions) Edge.
+      // See https://github.com/twbs/bootstrap/issues/19398.
+      color: $input-color;
+      background-color: $input-bg;
+    }
+  }
+
+  &:disabled {
+    color: $custom-select-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: $custom-select-disabled-bg;
   }
 
   // Hides the default caret in IE11
@@ -156,15 +183,15 @@
   }
 }
 
-.c-select-sm {
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 12px;
+.custom-select-sm {
+  padding-top: $custom-select-padding-y;
+  padding-bottom: $custom-select-padding-y;
+  font-size: $custom-select-sm-font-size;
 
-  &:not([multiple]) {
-    height: 26px;
-    min-height: 26px;
-  }
+  // &:not([multiple]) {
+  //   height: 26px;
+  //   min-height: 26px;
+  // }
 }
 
 
@@ -172,55 +199,67 @@
 //
 // Custom file input.
 
-.file {
+.custom-file {
   position: relative;
   display: inline-block;
-  height: 2.5rem;
+  max-width: 100%;
+  height: $custom-file-height;
   cursor: pointer;
 }
-.file input {
-  min-width: 14rem;
+
+.custom-file-input {
+  min-width: $custom-file-width;
+  max-width: 100%;
   margin: 0;
   filter: alpha(opacity = 0);
   opacity: 0;
+
+  &:focus ~ .custom-file-control {
+    @include box-shadow($custom-file-focus-box-shadow);
+  }
 }
-.file-custom {
+
+.custom-file-control {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 5;
-  height: 2.5rem;
-  padding: .5rem 1rem;
-  line-height: 1.5;
-  color: #555;
+  height: $custom-file-height;
+  padding: $custom-file-padding-x $custom-file-padding-y;
+  line-height: $custom-file-line-height;
+  color: $custom-file-color;
   user-select: none;
-  background-color: #fff;
-  border: $input-btn-border-width solid #ddd;
-  border-radius: .25rem;
-  @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
-}
-.file-custom::after {
-  content: "Choose file...";
-}
-.file-custom::before {
-  position: absolute;
-  top: -.075rem;
-  right: -.075rem;
-  bottom: -.075rem;
-  z-index: 6;
-  display: block;
-  height: 2.5rem;
-  padding: .5rem 1rem;
-  line-height: 1.5;
-  color: #555;
-  content: "Browse";
-  background-color: #eee;
-  border: $input-btn-border-width solid #ddd;
-  border-radius: 0 .25rem .25rem 0;
-}
+  background-color: $custom-file-bg;
+  border: $custom-file-border-width solid $custom-file-border-color;
+  @include border-radius($custom-file-border-radius);
+  @include box-shadow($custom-file-box-shadow);
+
+  @each $lang, $text in map-get($custom-file-text, placeholder) {
+    &:lang(#{$lang})::after {
+      content: $text;
+    }
+  }
 
-// Focus state
-.file input:focus ~ .file-custom {
-  @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
+  &::before {
+    position: absolute;
+    top: -$custom-file-border-width;
+    right: -$custom-file-border-width;
+    bottom: -$custom-file-border-width;
+    z-index: 6;
+    display: block;
+    height: $custom-file-height;
+    padding: $custom-file-padding-x $custom-file-padding-y;
+    line-height: $custom-file-line-height;
+    color: $custom-file-button-color;
+    background-color: $custom-file-button-bg;
+    border: $custom-file-border-width solid $custom-file-border-color;
+    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+  }
+
+  @each $lang, $text in map-get($custom-file-text, button-label) {
+    &:lang(#{$lang})::before {
+      content: $text;
+    }
+  }
 }