Skip to content
GitLab
Commit 1db3586d authored by Mark Otto's avatar Mark Otto
Browse files

Merge branch 'v4-dev' into v4-navbars

parents d11c9334 4699fd4b
Hide whitespace changes
Inline Side-by-side
Showing
with 72 additions and 32 deletions
+72 -32
scss/_dropdown.scss
+ 1
- 0
View file @ 1db3586d
...@@ -141,6 +141,7 @@ ...@@ -141,6 +141,7 @@
.dropdown-header { .dropdown-header {
display: block; display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x; padding: $dropdown-padding-y $dropdown-item-padding-x;
margin-bottom: 0; // for use with heading elements
font-size: $font-size-sm; font-size: $font-size-sm;
color: $dropdown-header-color; color: $dropdown-header-color;
white-space: nowrap; // as with > li > a white-space: nowrap; // as with > li > a
......
scss/_forms.scss
+ 10
- 1
View file @ 1db3586d
...@@ -18,8 +18,16 @@ ...@@ -18,8 +18,16 @@
background-image: none; background-image: none;
background-clip: padding-box; background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color; border: $input-btn-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius); @if $enable-rounded {
// Manually use the if/else instead of the mixin to account for iOS override
border-radius: $input-border-radius;
} @else {
// Otherwise undo the iOS default
border-radius: 0;
}
@include box-shadow($input-box-shadow); @include box-shadow($input-box-shadow);
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
...@@ -239,6 +247,7 @@ select.form-control-lg { ...@@ -239,6 +247,7 @@ select.form-control-lg {
} }
&.disabled { &.disabled {
color: $text-muted;
cursor: $cursor-disabled; cursor: $cursor-disabled;
} }
} }
......
scss/_reboot.scss
+ 0
- 2
View file @ 1db3586d
...@@ -318,8 +318,6 @@ textarea { ...@@ -318,8 +318,6 @@ textarea {
// properly inherited. However, `line-height` isn't addressed there. Using this // properly inherited. However, `line-height` isn't addressed there. Using this
// ensures we don't need to unnecessarily redeclare the global font stack. // ensures we don't need to unnecessarily redeclare the global font stack.
line-height: inherit; line-height: inherit;
// iOS adds rounded borders by default
border-radius: 0;
} }
input[type="radio"], input[type="radio"],
......
scss/_variables.scss
+ 29
- 15
View file @ 1db3586d
...@@ -150,9 +150,15 @@ $container-max-widths: ( ...@@ -150,9 +150,15 @@ $container-max-widths: (
// //
// Set the number of columns and specify the width of the gutters. // Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width: 30px !default; $grid-gutter-width-base: 30px !default;
$grid-gutter-widths: (
xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
) !default;
// Typography // Typography
// //
...@@ -375,13 +381,15 @@ $custom-control-active-indicator-bg: #84c6ff !default; ...@@ -375,13 +381,15 @@ $custom-control-active-indicator-bg: #84c6ff !default;
$custom-control-active-indicator-box-shadow: none !default; $custom-control-active-indicator-box-shadow: none !default;
$custom-checkbox-radius: $border-radius !default; $custom-checkbox-radius: $border-radius !default;
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; $custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
$custom-checkbox-indeterminate-bg: #0074d9 !default; $custom-checkbox-indeterminate-bg: #0074d9 !default;
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default; $custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default;
$custom-checkbox-indeterminate-box-shadow: none !default; $custom-checkbox-indeterminate-box-shadow: none !default;
$custom-radio-radius: 50% !default; $custom-radio-radius: 50% !default;
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default; $custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default;
$custom-select-padding-x: .75rem !default; $custom-select-padding-x: .75rem !default;
$custom-select-padding-y: .375rem !default; $custom-select-padding-y: .375rem !default;
...@@ -391,7 +399,8 @@ $custom-select-disabled-color: $gray-light !default; ...@@ -391,7 +399,8 @@ $custom-select-disabled-color: $gray-light !default;
$custom-select-bg: #fff !default; $custom-select-bg: #fff !default;
$custom-select-disabled-bg: $gray-lighter !default; $custom-select-disabled-bg: $gray-lighter !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; $custom-select-indicator-color: #333 !default;
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
$custom-select-border-width: $input-btn-border-width !default; $custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default; $custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default; $custom-select-border-radius: $border-radius !default;
...@@ -428,23 +437,28 @@ $custom-file-text: ( ...@@ -428,23 +437,28 @@ $custom-file-text: (
// Form validation icons // Form validation icons
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; $form-icon-success-color: $brand-success !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='$form-icon-success-color' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
$form-icon-warning-color: $brand-warning !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger-color: $brand-danger !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
// Dropdowns // Dropdowns
// //
// Dropdown menu container and contents. // Dropdown menu container and contents.
$dropdown-min-width: 160px !default; $dropdown-min-width: 10rem !default;
$dropdown-padding-y: 5px !default; $dropdown-padding-y: .5rem !default;
$dropdown-margin-top: 2px !default; $dropdown-margin-top: .125rem !default;
$dropdown-bg: #fff !default; $dropdown-bg: #fff !default;
$dropdown-border-color: rgba(0,0,0,.15) !default; $dropdown-border-color: rgba(0,0,0,.15) !default;
$dropdown-border-width: $border-width !default; $dropdown-border-width: $border-width !default;
$dropdown-divider-bg: #e5e5e5 !default; $dropdown-divider-bg: #e5e5e5 !default;
$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; $dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default;
$dropdown-link-color: $gray-dark !default; $dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default; $dropdown-link-hover-color: darken($gray-dark, 5%) !default;
...@@ -455,7 +469,7 @@ $dropdown-link-active-bg: $component-active-bg !default; ...@@ -455,7 +469,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default; $dropdown-link-disabled-color: $gray-light !default;
$dropdown-item-padding-x: 20px !default; $dropdown-item-padding-x: 1.5rem !default;
$dropdown-header-color: $gray-light !default; $dropdown-header-color: $gray-light !default;
......
scss/mixins/_grid-framework.scss
+ 3
- 7
View file @ 1db3586d
...@@ -3,20 +3,18 @@ ...@@ -3,20 +3,18 @@
// Used only by Bootstrap to generate the correct number of grid classes given // Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`. // any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints // Common properties for all breakpoints
%grid-column { %grid-column {
position: relative; position: relative;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
@if $enable-flex { @if $enable-flex {
width: 100%; width: 100%;
} }
@include make-gutters($gutters);
} }
$breakpoint-counter: 0; $breakpoint-counter: 0;
...@@ -38,8 +36,6 @@ ...@@ -38,8 +36,6 @@
flex-grow: 1; flex-grow: 1;
max-width: 100%; max-width: 100%;
min-height: 1px; min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
} }
} }
......
scss/mixins/_grid.scss
+ 29
- 7
View file @ 1db3586d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// //
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) { @mixin make-container($gutter: $grid-gutter-width-base) {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: ($gutter / 2); padding-left: ($gutter / 2);
...@@ -22,22 +22,36 @@ ...@@ -22,22 +22,36 @@
} }
} }
@mixin make-row($gutter: $grid-gutter-width) { @mixin make-gutters($gutters: $grid-gutter-widths) {
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@mixin make-row($gutters: $grid-gutter-widths) {
@if $enable-flex { @if $enable-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} @else { } @else {
@include clearfix(); @include clearfix();
} }
margin-left: ($gutter / -2);
margin-right: ($gutter / -2); @each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
} }
@mixin make-col-ready($gutter: $grid-gutter-width) { @mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative; position: relative;
min-height: 1px; // Prevent collapsing min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
// Prevent columns from becoming too narrow when at smaller grid tiers by // Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values // always setting `width: 100%;`. This works because we use `flex` values
...@@ -45,6 +59,14 @@ ...@@ -45,6 +59,14 @@
@if $enable-flex { @if $enable-flex {
width: 100%; width: 100%;
} }
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
} }
@mixin make-col($size, $columns: $grid-columns) { @mixin make-col($size, $columns: $grid-columns) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment