1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00

Merge branch 'v4-dev' into v4-split-buttons

This commit is contained in:
Mark Otto
2016-02-06 20:33:26 -08:00
124 changed files with 3985 additions and 2858 deletions

View File

@@ -1,4 +1,16 @@
scss_files: "scss/*.scss"
# Default application configuration that all configurations inherit from.
scss_files:
- "**/*.scss"
- "docs/assets/scss/**/*.scss"
plugin_directories: ['.scss-linters']
# List of gem names to load custom linters from (make sure they are already
# installed)
plugin_gems: []
# Default severity of all linters.
severity: warning
linters:
BangFormat:
@@ -6,8 +18,16 @@ linters:
space_before_bang: true
space_after_bang: false
BemDepth:
enabled: false
max_elements: 1
BorderZero:
enabled: true
convention: zero # or `none`
ChainedClasses:
enabled: false
ColorKeyword:
enabled: true
@@ -17,7 +37,10 @@ linters:
Comment:
enabled: true
exclude: ['_normalize.scss', 'bootstrap.scss']
exclude:
- _normalize.scss
- bootstrap.scss
style: silent
DebugStatement:
enabled: true
@@ -25,9 +48,11 @@ linters:
DeclarationOrder:
enabled: false
DisableLinterReason:
enabled: false
DuplicateProperty:
enabled: true
exclude: ['mixins/_tab-focus.scss', '_reboot.scss']
ElsePlacement:
enabled: true
@@ -40,6 +65,9 @@ linters:
EmptyRule:
enabled: true
ExtendDirective:
enabled: false
FinalNewline:
enabled: true
present: true
@@ -59,7 +87,7 @@ linters:
enabled: true
ImportantRule:
enabled: false
enabled: true
ImportPath:
enabled: true
@@ -68,11 +96,12 @@ linters:
Indentation:
enabled: true
allow_non_nested_indentation: false
character: space # or 'tab'
width: 2
LeadingZero:
enabled: false
enabled: true
style: exclude_zero # or 'include_zero'
MergeableSelector:
@@ -82,326 +111,350 @@ linters:
NameFormat:
enabled: true
allow_leading_underscore: true
convention: hyphenated_lowercase # or 'BEM', or a regex pattern
convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
NestingDepth:
enabled: false
enabled: true
max_depth: 4
ignore_parent_selectors: false
PlaceholderInExtend:
enabled: false
PropertyCount:
enabled: false
include_nested: false
max_properties: 10
PropertySortOrder:
enabled: true
ignore_unspecified: false
severity: warning
exclude: ['_normalize.scss']
order: [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"display",
"float",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"flex",
"flex-direction",
"flex-flow",
"flex-order",
"flex-pack",
"flex-align",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"overflow",
"overflow-x",
"overflow-y",
"-webkit-overflow-scrolling",
"-ms-overflow-x",
"-ms-overflow-y",
"-ms-overflow-style",
"clip",
"clear",
"font",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"line-height",
"color",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-decoration",
"text-indent",
"text-justify",
"text-outline",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"text-transform",
"text-wrap",
"-webkit-text-size-adjust",
"-ms-text-size-adjust",
"letter-spacing",
"-ms-word-break",
"word-break",
"word-spacing",
"-ms-word-wrap",
"word-wrap",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"white-space",
"vertical-align",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"pointer-events",
"-ms-touch-action",
"touch-action",
"cursor",
"visibility",
"zoom",
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"-o-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"background",
"background-color",
"background-image",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"filter:progid:DXImageTransform.Microsoft.gradient",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"filter",
"background-repeat",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size",
"border",
"border-color",
"border-style",
"border-width",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"opacity",
"-ms-interpolation-mode",
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction"
]
min_properties: 2
separate_groups: false
order:
- position
- top
- right
- bottom
- left
- z-index
- -webkit-box-sizing
- -moz-box-sizing
- box-sizing
- display
- flex
- flex-align
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-order
- flex-pack
- float
- width
- min-width
- max-width
- height
- min-height
- max-height
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- overflow
- overflow-x
- overflow-y
- -webkit-overflow-scrolling
- -ms-overflow-x
- -ms-overflow-y
- -ms-overflow-style
- clip
- clear
- font
- font-family
- font-size
- font-style
- font-weight
- font-variant
- font-size-adjust
- font-stretch
- font-effect
- font-emphasize
- font-emphasize-position
- font-emphasize-style
- font-smooth
- -webkit-hyphens
- -moz-hyphens
- hyphens
- line-height
- color
- text-align
- -webkit-text-align-last
- -moz-text-align-last
- -ms-text-align-last
- text-align-last
- text-emphasis
- text-emphasis-color
- text-emphasis-style
- text-emphasis-position
- text-decoration
- text-indent
- text-justify
- text-outline
- -ms-text-overflow
- text-overflow
- text-overflow-ellipsis
- text-overflow-mode
- text-shadow
- text-transform
- text-wrap
- -webkit-text-size-adjust
- -ms-text-size-adjust
- letter-spacing
- -ms-word-break
- word-break
- word-spacing
- -ms-word-wrap
- word-wrap
- -moz-tab-size
- -o-tab-size
- tab-size
- white-space
- vertical-align
- list-style
- list-style-position
- list-style-type
- list-style-image
- pointer-events
- -ms-touch-action
- touch-action
- cursor
- visibility
- zoom
- table-layout
- empty-cells
- caption-side
- border-spacing
- border-collapse
- content
- quotes
- counter-reset
- counter-increment
- resize
- -webkit-user-select
- -moz-user-select
- -ms-user-select
- -o-user-select
- user-select
- nav-index
- nav-up
- nav-right
- nav-down
- nav-left
- background
- background-color
- background-image
- -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient
- filter:progid:DXImageTransform.Microsoft.gradient
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
- filter
- background-repeat
- background-attachment
- background-position
- background-position-x
- background-position-y
- -webkit-background-clip
- -moz-background-clip
- background-clip
- background-origin
- -webkit-background-size
- -moz-background-size
- -o-background-size
- background-size
- border
- border-color
- border-style
- border-width
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- -webkit-border-image
- -moz-border-image
- -o-border-image
- border-image
- -webkit-border-image-source
- -moz-border-image-source
- -o-border-image-source
- border-image-source
- -webkit-border-image-slice
- -moz-border-image-slice
- -o-border-image-slice
- border-image-slice
- -webkit-border-image-width
- -moz-border-image-width
- -o-border-image-width
- border-image-width
- -webkit-border-image-outset
- -moz-border-image-outset
- -o-border-image-outset
- border-image-outset
- -webkit-border-image-repeat
- -moz-border-image-repeat
- -o-border-image-repeat
- border-image-repeat
- outline
- outline-width
- outline-style
- outline-color
- outline-offset
- -webkit-box-shadow
- -moz-box-shadow
- box-shadow
- filter:progid:DXImageTransform.Microsoft.Alpha(Opacity
- -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha
- opacity
- -ms-interpolation-mode
- -webkit-transition
- -moz-transition
- -ms-transition
- -o-transition
- transition
- -webkit-transition-delay
- -moz-transition-delay
- -ms-transition-delay
- -o-transition-delay
- transition-delay
- -webkit-transition-timing-function
- -moz-transition-timing-function
- -ms-transition-timing-function
- -o-transition-timing-function
- transition-timing-function
- -webkit-transition-duration
- -moz-transition-duration
- -ms-transition-duration
- -o-transition-duration
- transition-duration
- -webkit-transition-property
- -moz-transition-property
- -ms-transition-property
- -o-transition-property
- transition-property
- -webkit-transform
- -moz-transform
- -ms-transform
- -o-transform
- transform
- -webkit-transform-origin
- -moz-transform-origin
- -ms-transform-origin
- -o-transform-origin
- transform-origin
- -webkit-animation
- -moz-animation
- -ms-animation
- -o-animation
- animation
- -webkit-animation-name
- -moz-animation-name
- -ms-animation-name
- -o-animation-name
- animation-name
- -webkit-animation-duration
- -moz-animation-duration
- -ms-animation-duration
- -o-animation-duration
- animation-duration
- -webkit-animation-play-state
- -moz-animation-play-state
- -ms-animation-play-state
- -o-animation-play-state
- animation-play-state
- -webkit-animation-timing-function
- -moz-animation-timing-function
- -ms-animation-timing-function
- -o-animation-timing-function
- animation-timing-function
- -webkit-animation-delay
- -moz-animation-delay
- -ms-animation-delay
- -o-animation-delay
- animation-delay
- -webkit-animation-iteration-count
- -moz-animation-iteration-count
- -ms-animation-iteration-count
- -o-animation-iteration-count
- animation-iteration-count
- -webkit-animation-direction
- -moz-animation-direction
- -ms-animation-direction
- -o-animation-direction
PropertySpelling:
enabled: true
extra_properties: []
disabled_properties: []
PropertyUnits:
enabled: true
global: [
'ch', 'em', 'ex', 'rem', # Font-relative lengths
'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
'deg', 'grad', 'rad', 'turn', # Angle
'ms', 's', # Duration
'Hz', 'kHz', # Frequency
'dpi', 'dpcm', 'dppx', # Resolution
'%'] # Other
properties: {}
PseudoElement:
enabled: true
QualifyingElement:
enabled: false
enabled: true
allow_element_with_attribute: false
allow_element_with_class: false
allow_element_with_id: false
SelectorDepth:
enabled: false
enabled: true
max_depth: 4
SelectorFormat:
enabled: true
convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
enabled: false
convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
Shorthand:
enabled: true
allowed_shorthands: [1, 2, 3]
SingleLinePerProperty:
enabled: true
enabled: false
allow_single_line_rule_sets: true
SingleLinePerSelector:
@@ -409,6 +462,7 @@ linters:
SpaceAfterComma:
enabled: false
style: one_space # or 'no_space', or 'at_least_one_space'
SpaceAfterPropertyColon:
enabled: true
@@ -417,10 +471,17 @@ linters:
SpaceAfterPropertyName:
enabled: true
SpaceAfterVariableName:
enabled: true
SpaceAroundOperator:
enabled: true
style: one_space # or 'at_least_one_space', or 'no_space'
SpaceBeforeBrace:
enabled: true
style: space
allow_single_line_padding: true
style: space # or 'new_line'
allow_single_line_padding: false
SpaceBetweenParens:
enabled: true
@@ -428,14 +489,20 @@ linters:
StringQuotes:
enabled: true
style: double_quotes
style: double_quotes # or double_quotes
TrailingSemicolon:
enabled: true
TrailingWhitespace:
enabled: true
TrailingZero:
enabled: false
TransitionAll:
enabled: false
UnnecessaryMantissa:
enabled: true
@@ -448,11 +515,17 @@ linters:
UrlQuotes:
enabled: true
VendorPrefixes:
VariableForProperty:
enabled: false
properties: []
VendorPrefix:
enabled: true
identifier_list: base
include: []
exclude: ['_normalize.scss']
additional_identifiers: []
excluded_identifiers: []
exclude:
- _normalize.scss
ZeroUnit:
enabled: true

View File

@@ -7,15 +7,6 @@
margin-bottom: $spacer-y;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Headings for larger alerts
@@ -35,7 +26,7 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: ($alert-padding + 20);
padding-right: ($alert-padding + 20px);
// Adjust close link position
.close {

View File

@@ -10,13 +10,28 @@
.breadcrumb-item {
float: left;
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}";
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}

View File

@@ -1,3 +1,5 @@
// scss-lint:disable QualifyingElement
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
@@ -121,7 +123,7 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
@include box-shadow($btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@@ -183,11 +185,9 @@
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: $btn-border-radius;
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: $btn-border-radius;
@include border-top-radius(0);
}
}

View File

@@ -1,3 +1,5 @@
// scss-lint:disable QualifyingElement
//
// Base styles
//
@@ -11,7 +13,7 @@
cursor: pointer;
user-select: none;
border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
@include transition(all .2s ease-in-out);
&,
@@ -34,7 +36,7 @@
&.active {
background-image: none;
outline: 0;
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
@include box-shadow($btn-active-box-shadow);
}
&.disabled,

View File

@@ -7,8 +7,10 @@
display: block;
margin-bottom: $card-spacer-y;
background-color: $card-bg;
border: $card-border-width solid $card-border-color;
// border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
// Doesn't use mixin so that cards always have a "border"
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
}
.card-block {
@@ -72,7 +74,9 @@
@include clearfix;
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
// border-bottom: $card-border-width solid $card-border-color;
// Doesn't use mixin so that cards always have a "border"
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
&:first-child {
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
@@ -83,7 +87,9 @@
@include clearfix;
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
// border-top: $card-border-width solid $card-border-color;
// Doesn't use mixin so that cards always have a "border"
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
&:last-child {
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
@@ -91,6 +97,27 @@
}
//
// Header navs
//
.card-header-tabs {
margin-right: -($card-spacer-x / 2);
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x / 2);
border-bottom: 0;
.nav-item {
margin-bottom: 0;
}
}
.card-header-pills {
margin-right: -($card-spacer-x / 2);
margin-left: -($card-spacer-x / 2);
}
//
// Background variations
//

View File

@@ -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

View File

@@ -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

View File

@@ -22,7 +22,7 @@ kbd {
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;
@@ -38,7 +38,6 @@ pre {
margin-top: 0;
margin-bottom: 1rem;
font-size: 90%;
line-height: $line-height;
color: $pre-color;
// Account for some code outputs that place code tags in pre tags

View File

@@ -12,11 +12,10 @@
.custom-control {
position: relative;
display: inline;
padding-left: 1.5rem;
color: #555;
padding-left: $custom-control-gutter;
+ .custom-control {
margin-left: 1rem;
margin-left: $custom-control-spacer-x;
}
}
@@ -26,31 +25,31 @@
opacity: 0;
&:checked ~ .custom-control-indicator {
color: #fff;
background-color: #0074d9;
@include box-shadow(none);
color: $custom-control-checked-indicator-color;
background-color: $custom-control-checked-indicator-bg;
@include box-shadow($custom-control-checked-indicator-box-shadow);
}
&:focus ~ .custom-control-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;
box-shadow: $custom-control-focus-indicator-box-shadow;
}
&:active ~ .custom-control-indicator {
color: #fff;
background-color: #84c6ff;
@include box-shadow(none);
color: $custom-control-active-indicator-color;
background-color: $custom-control-active-indicator-bg;
@include box-shadow($custom-control-active-indicator-box-shadow);
}
&:disabled {
~ .custom-control-indicator {
cursor: not-allowed;
background-color: $custom-form-bg-color-disabled;
cursor: $custom-control-disabled-cursor;
background-color: $custom-control-disabled-indicator-bg;
}
~ .custom-control-description {
color: $custom-form-description-color-disabled;
cursor: not-allowed;
color: $custom-control-disabled-description-color;
cursor: $custom-control-disabled-cursor;
}
}
}
@@ -64,18 +63,15 @@
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: $custom-form-bg-color;
background-color: $custom-control-indicator-bg;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
@include box-shadow(inset 0 .25rem .25rem rgba(0,0,0,.1));
background-size: $custom-control-indicator-bg-size;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Checkboxes
@@ -84,17 +80,17 @@
.custom-checkbox {
.custom-control-indicator {
border-radius: .25rem;
@include border-radius($custom-checkbox-radius);
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
background-image: $custom-checkbox-checked-icon;
}
.custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: #0074d9;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
@include box-shadow(none);
background-color: $custom-checkbox-indeterminate-bg;
background-image: $custom-checkbox-indeterminate-icon;
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
}
}
@@ -104,11 +100,11 @@
.custom-radio {
.custom-control-indicator {
border-radius: 50%;
border-radius: $custom-radio-radius;
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
background-image: $custom-radio-checked-icon;
}
}
@@ -124,7 +120,7 @@
&::after {
display: block;
margin-bottom: .25rem;
margin-bottom: $custom-control-spacer-y;
content: "";
}
@@ -145,23 +141,23 @@
.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;
@include border-radius($border-radius);
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);
}
// Hides the default caret in IE11
@@ -171,14 +167,14 @@
}
.custom-select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px;
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;
// }
}
@@ -190,19 +186,19 @@
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
height: $custom-file-height;
cursor: pointer;
}
.custom-file-input {
min-width: 14rem;
min-width: $custom-file-width;
max-width: 100%;
margin: 0;
filter: alpha(opacity = 0);
opacity: 0;
&:focus ~ .custom-file-control {
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
@include box-shadow($custom-file-focus-box-shadow);
}
}
@@ -212,34 +208,34 @@
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));
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);
&::after {
content: "Choose file...";
content: $custom-file-placeholder;
}
&::before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
top: -$custom-file-border-width;
right: -$custom-file-border-width;
bottom: -$custom-file-border-width;
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;
height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: $custom-file-button-label;
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);
}
}

4
scss/_custom.scss Normal file
View File

@@ -0,0 +1,4 @@
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

View File

@@ -52,7 +52,7 @@
background-clip: padding-box;
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($border-radius);
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
@include box-shadow($dropdown-box-shadow);
}
// Dividers (basically an `<hr>`) within the dropdown
@@ -69,7 +69,6 @@
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height;
color: $dropdown-link-color;
text-align: inherit; // For `<button>`s
white-space: nowrap; // prevent links from randomly breaking onto new lines
@@ -132,12 +131,7 @@
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
right: auto;
left: 0;
@@ -146,9 +140,8 @@
// Dropdown section headers
.dropdown-header {
display: block;
padding: 3px 20px;
padding: 5px 20px;
font-size: $font-size-sm;
line-height: $line-height;
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
@@ -160,7 +153,7 @@
right: 0;
bottom: 0;
left: 0;
z-index: ($zindex-dropdown - 10);
z-index: $zindex-dropdown-backdrop;
}
// Right aligned dropdowns

View File

@@ -1,3 +1,5 @@
// scss-lint:disable QualifyingElement
//
// Textual form controls
//
@@ -9,7 +11,6 @@
// height: $input-height;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $line-height;
color: $input-color;
background-color: $input-bg;
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
@@ -20,14 +21,6 @@
@include box-shadow($input-box-shadow);
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
// Make inputs at least the height of their button counterpart (base line-height + padding + border).
// Only apply the height to textual inputs and some selects.
// &:not(textarea),
// &:not(select[size]),
// &:not(select[multiple]) {
// height: $input-height;
// }
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
@@ -61,6 +54,11 @@
}
}
select.form-control {
&:not([size], [multiple]) {
height: $input-height;
}
}
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
@@ -90,26 +88,25 @@
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
// Note that as of 8.3, iOS doesn't support `week`.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: $input-height;
}
_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: $input-height;
}
&.input-sm,
.input-group-sm &.form-control {
line-height: $input-height-sm;
}
&.input-sm,
.input-group-sm &.form-control {
line-height: $input-height-sm;
}
&.input-lg,
.input-group-lg &.form-control {
line-height: $input-height-lg;
}
&.input-lg,
.input-group-lg &.form-control {
line-height: $input-height-lg;
}
}
@@ -263,7 +260,7 @@ input[type="checkbox"] {
padding-right: ($input-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height * .25);
background-size: ($input-height * .65) ($input-height * .65);
background-size: ($input-height * .5) ($input-height * .50);
}
// Form validation states
@@ -271,7 +268,7 @@ input[type="checkbox"] {
@include form-control-validation($brand-success);
.form-control-success {
background-image: url($form-icon-success);
background-image: $form-icon-success;
}
}
@@ -279,7 +276,7 @@ input[type="checkbox"] {
@include form-control-validation($brand-warning);
.form-control-warning {
background-image: url($form-icon-warning);
background-image: $form-icon-warning;
}
}
@@ -287,7 +284,7 @@ input[type="checkbox"] {
@include form-control-validation($brand-danger);
.form-control-danger {
background-image: url($form-icon-danger);
background-image: $form-icon-danger;
}
}

View File

@@ -30,7 +30,6 @@
}
}
// Columns
//
// Common styles for small and large grid columns
@@ -38,40 +37,3 @@
@if $enable-grid-classes {
@include make-grid-columns();
}
// Flex variation
//
// Custom styles for additional flex alignment options.
@if $enable-flex and $enable-grid-classes {
// Flex column reordering
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.col-#{$breakpoint}-first { order: -1; }
.col-#{$breakpoint}-last { order: 1; }
}
}
// Alignment for every column in row
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.row-#{$breakpoint}-top { align-items: flex-start; }
.row-#{$breakpoint}-center { align-items: center; }
.row-#{$breakpoint}-bottom { align-items: flex-end; }
}
}
// Alignment per column
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.col-#{$breakpoint}-top { align-self: flex-start; }
.col-#{$breakpoint}-center { align-self: center; }
.col-#{$breakpoint}-bottom { align-self: flex-end; }
}
}
}

View File

@@ -17,12 +17,11 @@
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
line-height: $line-height;
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
border-radius: $thumbnail-border-radius;
transition: all .2s ease-in-out;
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid(inline-block);

View File

@@ -85,6 +85,7 @@
.input-group-addon {
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base;
font-weight: normal;
line-height: 1.5;
@@ -106,11 +107,13 @@
@include border-radius($border-radius-lg);
}
// scss-lint:disable QualifyingElement
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
// scss-lint:enable QualifyingElement
}

View File

@@ -27,6 +27,7 @@
top: -1px;
}
// scss-lint:disable QualifyingElement
// Add hover effects, but only for links
a.label {
@include hover-focus {
@@ -35,6 +36,7 @@ a.label {
cursor: pointer;
}
}
// scss-lint:enable QualifyingElement
// Pill labels
//

View File

@@ -22,61 +22,15 @@
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
// Round the first and last items
&:first-child {
@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius);
}
}
.list-group-flush {
.list-group-item {
border-width: $list-group-border-width 0;
border-radius: 0;
}
&:first-child {
.list-group-item:first-child {
border-top: 0;
}
}
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
}
}
}
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
a.list-group-item,
button.list-group-item {
width: 100%;
color: $list-group-link-color;
text-align: inherit;
.list-group-item-heading {
color: $list-group-link-heading-color;
}
// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
}
.list-group-item {
// Disabled state
&.disabled {
@include plain-hover-focus {
color: $list-group-disabled-color;
@@ -93,11 +47,11 @@ button.list-group-item {
}
}
// Active class on item itself, not parent
&.active {
@include plain-hover-focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
text-decoration: none; // Repeat here because it inherits global a:hover otherwise
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
@@ -114,6 +68,35 @@ button.list-group-item {
}
}
.list-group-flush {
.list-group-item {
border-radius: 0;
}
}
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: $list-group-link-color;
text-align: inherit; // For `<button>`s (anchors inherit)
.list-group-item-heading {
color: $list-group-link-heading-color;
}
// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
}
// Contextual variants
//

View File

@@ -14,7 +14,7 @@
}
} @else {
.media {
margin-top: 15px;
margin-top: $media-margin-top;
&:first-child {
margin-top: 0;
@@ -61,11 +61,11 @@
//
.media-right {
padding-left: 10px;
padding-left: $media-alignment-padding-x;
}
.media-left {
padding-right: 10px;
padding-right: $media-alignment-padding-x;
}
@@ -75,7 +75,7 @@
.media-heading {
margin-top: 0;
margin-bottom: 5px;
margin-bottom: $media-heading-margin-bottom;
}

View File

@@ -48,7 +48,6 @@
// // Layout
@import "mixins/clearfix";
@import "mixins/center-block";
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";

View File

@@ -49,8 +49,8 @@
background-color: $modal-content-bg;
background-clip: padding-box;
border: 1px solid $modal-content-border-color;
border-radius: $border-radius-lg;
@include box-shadow(0 3px 9px rgba(0,0,0,.5));
@include border-radius($border-radius-lg);
@include box-shadow($modal-content-xs-box-shadow);
// Remove focus outline from opened modal
outline: 0;
}
@@ -130,17 +130,17 @@
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: $modal-md;
max-width: $modal-md;
margin: 30px auto;
}
.modal-content {
@include box-shadow(0 5px 15px rgba(0,0,0,.5));
@include box-shadow($modal-content-sm-up-box-shadow);
}
// Modal sizes
.modal-sm { width: $modal-sm; }
.modal-sm { max-width: $modal-sm; }
}
@include media-breakpoint-up(md) {
.modal-lg { width: $modal-lg; }
@include media-breakpoint-up(lg) {
.modal-lg { max-width: $modal-lg; }
}

View File

@@ -117,6 +117,7 @@
}
}
// scss-lint:disable ImportantRule
// Custom override for
.navbar-toggleable {
&-xs {
@@ -135,6 +136,7 @@
}
}
}
// scss-lint:enable ImportantRule
// Navigation

View File

@@ -1,4 +1,4 @@
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
//
// 1. Set default font family to sans-serif.
@@ -37,7 +37,6 @@ figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
@@ -353,13 +352,11 @@ input[type="number"]::-webkit-outer-spin-button {
}
//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
// Address `appearance` set to `searchfield` in Safari and Chrome.
//
input[type="search"] {
-webkit-appearance: textfield; // 1
box-sizing: content-box; //2
-webkit-appearance: textfield;
}
//

View File

@@ -47,7 +47,6 @@
float: left; // Collapse white-space
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -1px;
line-height: $line-height;
color: $pagination-color;
text-decoration: none;
background-color: $pagination-bg;

View File

@@ -10,11 +10,13 @@
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: $popover-bg;
background-clip: padding-box;
border: $popover-border-width solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
@include box-shadow($popover-box-shadow);
// Popover directions
@@ -103,7 +105,7 @@
// Offset the popover to account for the popover arrow
.popover-title {
padding: 8px 14px;
padding: $popover-title-padding-y $popover-title-padding-x;
margin: 0; // reset heading margin
font-size: $font-size-base;
background-color: $popover-title-bg;
@@ -113,7 +115,7 @@
}
.popover-content {
padding: 9px 14px;
padding: $popover-content-padding-y $popover-content-padding-x;
}

View File

@@ -1,15 +1,24 @@
// scss-lint:disable ImportantRule, QualifyingElement
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request: h5bp.com/r
// Inlined to avoid the additional HTTP request:
// http://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================
@media print {
*,
*::before,
*::after {
*::after,
*::first-letter,
*::first-line {
// Bootstrap specific; comment out `color` and `background`
//color: #000 !important; // Black prints faster:
// http://www.sanbeiji.com/archives/953
text-shadow: none !important;
//background: transparent !important;
box-shadow: none !important;
}
@@ -18,18 +27,39 @@
text-decoration: underline;
}
// Bootstrap specific; comment the following selector out
//a[href]::after {
// content: " (" attr(href) ")";
//}
abbr[title]::after {
content: " (" attr(title) ")";
}
// Bootstrap specific; comment the following selector out
//
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
//
//a[href^="#"]::after,
//a[href^="javascript:"]::after {
// content: "";
//}
pre,
blockquote {
border: $border-width solid #999;
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px
page-break-inside: avoid;
}
//
// Printing Tables:
// http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead {
display: table-header-group; // h5bp.com/t
display: table-header-group;
}
tr,
@@ -37,10 +67,6 @@
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {

View File

@@ -3,8 +3,8 @@
//
@keyframes progress-bar-stripes {
from { background-position: $spacer-y 0; }
to { background-position: 0 0; }
from { background-position: $spacer-y 0; }
to { background-position: 0 0; }
}
@@ -37,35 +37,31 @@
}
.progress[value]::-moz-progress-bar {
background-color: $progress-bar-color;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
@include border-left-radius($border-radius);
}
.progress[value]::-webkit-progress-value {
background-color: $progress-bar-color;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
@include border-left-radius($border-radius);
}
// Tweaks for full progress bar
.progress[value="100"]::-moz-progress-bar {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
@include border-right-radius($border-radius);
}
.progress[value="100"]::-webkit-progress-value {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
@include border-right-radius($border-radius);
}
// Unfilled portion of the bar
.progress[value]::-webkit-progress-bar {
background-color: $progress-bg;
@include border-radius($border-radius);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
@include box-shadow($progress-box-shadow);
}
base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
.progress[value] {
background-color: $progress-bg;
@include border-radius($border-radius);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
@include box-shadow($progress-box-shadow);
}
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@@ -73,19 +69,17 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
.progress {
background-color: $progress-bg;
@include border-radius($border-radius);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
@include box-shadow($progress-box-shadow);
}
.progress-bar {
display: inline-block;
height: $spacer-y;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: $progress-bar-color;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
@include border-left-radius($border-radius);
}
.progress[width="100%"] {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
@include border-right-radius($border-radius);
}
}

View File

@@ -1,3 +1,5 @@
// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
// Reboot
//
// Global resets to common HTML elements and more for easier usage by Bootstrap.
@@ -44,14 +46,8 @@ html {
//
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
// `.class-name { @import "bootstrap"; }`).
//
// Includes future-proofed vendor prefixes as well.
@at-root {
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@viewport { width: device-width; }
@-ms-viewport { width: device-width; }
}
@@ -77,7 +73,7 @@ body {
// Make the `body` use the `font-size-root`
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height;
line-height: $line-height-base;
// Go easy on the eyes and use something other than `#000` for text
color: $body-color;
// By default, `<body>` has no `background-color` so we set one as a best practice.
@@ -331,8 +327,6 @@ legend {
}
input[type="search"] {
// Undo Normalize's default here to match our global overrides.
box-sizing: inherit;
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see

View File

@@ -10,7 +10,6 @@
th,
td {
padding: $table-cell-padding;
line-height: $line-height;
vertical-align: top;
border-top: $table-border-width solid $table-border-color;
}
@@ -109,7 +108,7 @@
.table-responsive {
display: block;
width: 100%;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
overflow-x: auto;
// TODO: find out if we need this still.
@@ -172,15 +171,14 @@
tbody,
tfoot {
&:last-child {
tr:last-child {
th,
td {
border-bottom: $table-border-width solid $table-border-color;
}
tr:last-child th,
tr:last-child td {
border-bottom: $table-border-width solid $table-border-color;
}
}
}
// scss-lint:disable ImportantRule
tr {
float: left;
@@ -190,4 +188,5 @@
border: $table-border-width solid $table-border-color;
}
}
// scss-lint:enable ImportantRule
}

View File

@@ -7,6 +7,8 @@
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
&.in { opacity: $tooltip-opacity; }
@@ -14,7 +16,7 @@
&.tooltip-top,
&.bs-tether-element-attached-bottom {
padding: $tooltip-arrow-width 0;
margin-top: -3px;
margin-top: -$tooltip-margin;
.tooltip-arrow {
bottom: 0;
@@ -27,7 +29,7 @@
&.tooltip-right,
&.bs-tether-element-attached-left {
padding: 0 $tooltip-arrow-width;
margin-left: 3px;
margin-left: $tooltip-margin;
.tooltip-arrow {
top: 50%;
@@ -40,7 +42,7 @@
&.tooltip-bottom,
&.bs-tether-element-attached-top {
padding: $tooltip-arrow-width 0;
margin-top: 3px;
margin-top: $tooltip-margin;
.tooltip-arrow {
top: 0;
@@ -53,7 +55,7 @@
&.tooltip-left,
&.bs-tether-element-attached-right {
padding: 0 $tooltip-arrow-width;
margin-left: -3px;
margin-left: -$tooltip-margin;
.tooltip-arrow {
top: 50%;
@@ -68,7 +70,7 @@
// Wrapper for the tooltip content
.tooltip-inner {
max-width: $tooltip-max-width;
padding: 3px 8px;
padding: $tooltip-padding-y $tooltip-padding-x;
color: $tooltip-color;
text-align: center;
background-color: $tooltip-bg;

View File

@@ -11,22 +11,12 @@ h1, h2, h3, h4, h5, h6,
color: $headings-color;
}
h1 { font-size: $font-size-h1; }
h2 { font-size: $font-size-h2; }
h3 { font-size: $font-size-h3; }
h4 { font-size: $font-size-h4; }
h5 { font-size: $font-size-h5; }
h6 { font-size: $font-size-h6; }
// These declarations are kept separate from and placed after
// the previous tag-based declarations so that the classes beat the tags in
// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
.h1 { font-size: $font-size-h1; }
.h2 { font-size: $font-size-h2; }
.h3 { font-size: $font-size-h3; }
.h4 { font-size: $font-size-h4; }
.h5 { font-size: $font-size-h5; }
.h6 { font-size: $font-size-h6; }
h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }
.lead {
font-size: $lead-font-size;
@@ -117,13 +107,12 @@ mark,
padding: ($spacer / 2) $spacer;
margin-bottom: $spacer;
font-size: $blockquote-font-size;
border-left: .25rem solid $blockquote-border-color;
border-left: $blockquote-border-width solid $blockquote-border-color;
}
.blockquote-footer {
display: block;
font-size: 80%; // back to default font-size
line-height: $line-height;
color: $blockquote-small-color;
&::before {
@@ -136,7 +125,7 @@ mark,
padding-right: $spacer;
padding-left: 0;
text-align: right;
border-right: .25rem solid $blockquote-border-color;
border-right: $blockquote-border-width solid $blockquote-border-color;
border-left: 0;
}
@@ -148,3 +137,14 @@ mark,
content: "\00A0 \2014"; // nbsp, em dash
}
}
@if not $enable-flex {
// Clean up some horizontal `<dl>`s built with grids
// scss-lint:disable QualifyingElement
dl.row {
> dd + dt {
clear: left;
}
}
// scss-lint:enable QualifyingElement
}

View File

@@ -1,8 +1,8 @@
@import "utilities/background";
@import "utilities/center-block";
@import "utilities/clearfix";
@import "utilities/pulls";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";
@import "utilities/flex";

View File

@@ -130,16 +130,16 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.875rem !default; // 30px
$grid-gutter-width: 30px !default;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
@@ -150,6 +150,8 @@ $font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$line-height-base: 1.5 !default;
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
@@ -167,8 +169,6 @@ $display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$line-height: 1.5 !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
@@ -185,12 +185,14 @@ $abbr-border-color: $gray-light !default;
$blockquote-small-color: $gray-light !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
$blockquote-border-width: .25rem !default;
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
$nested-kbd-font-weight: bold !default;
$list-inline-padding: 5px !default;
@@ -237,6 +239,8 @@ $table-border-color: $gray-lighter !default;
$btn-padding-x: 1rem !default;
$btn-padding-y: .375rem !default;
$btn-font-weight: normal !default;
$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
@@ -314,7 +318,7 @@ $input-padding-y-sm: .275rem !default;
$input-padding-x-lg: 1.25rem !default;
$input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
@@ -325,15 +329,78 @@ $input-group-addon-border-color: $input-border-color !default;
$cursor-disabled: not-allowed !default;
$custom-form-bg-color: #ddd !default;
$custom-form-bg-color-disabled: #eee !default;
$custom-form-description-color-disabled: #767676 !default;
$custom-control-gutter: 1.5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-spacer-y: .25rem !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: #ddd !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default;
$custom-control-disabled-cursor: $cursor-disabled !default;
$custom-control-disabled-indicator-bg: #eee !default;
$custom-control-disabled-description-color: #767676 !default;
$custom-control-checked-indicator-color: #fff !default;
$custom-control-checked-indicator-bg: #0074d9 !default;
$custom-control-checked-indicator-box-shadow: none !default;
$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
$custom-control-active-indicator-color: #fff !default;
$custom-control-active-indicator-bg: #84c6ff !default;
$custom-control-active-indicator-box-shadow: none !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-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-box-shadow: none !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-select-padding-x: .75rem !default;
$custom-select-padding-y: .375rem !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-color: $input-color !default;
$custom-select-bg: #fff !default;
$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-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: #51a7e8 !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
$custom-select-sm-padding-y: .2rem !default;
$custom-select-sm-font-size: 75% !default;
$custom-file-height: 2.5rem !default;
$custom-file-width: 14rem !default;
$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
$custom-file-padding-x: .5rem !default;
$custom-file-padding-y: 1rem !default;
$custom-file-line-height: 1.5 !default;
$custom-file-color: #555 !default;
$custom-file-bg: #fff !default;
$custom-file-border-width: $border-width !default;
$custom-file-border-color: #ddd !default;
$custom-file-border-radius: $border-radius !default;
$custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
$custom-file-placeholder: "Choose file..." !default;
$custom-file-button-label: "Browse" !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: #eee !default;
// Form validation icons
$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;
$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=" !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='%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-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-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;
// Dropdowns
@@ -344,6 +411,7 @@ $dropdown-bg: #fff !default;
$dropdown-border-color: rgba(0,0,0,.15) !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: #e5e5e5 !default;
$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default;
$dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
@@ -362,6 +430,7 @@ $dropdown-header-color: $gray-light !default;
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
@@ -473,7 +542,7 @@ $card-spacer-x: 1.25rem !default;
$card-spacer-y: .75rem !default;
$card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: #e5e5e5 !default;
$card-border-color: rgba(0,0,0,.125) !default;
$card-border-radius-inner: $card-border-radius !default;
$card-cap-bg: #f5f5f5 !default;
$card-bg: #fff !default;
@@ -489,6 +558,9 @@ $tooltip-max-width: 200px !default;
$tooltip-color: #fff !default;
$tooltip-bg: #000 !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: 3px !default;
$tooltip-padding-x: 8px !default;
$tooltip-margin: 3px !default;
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
@@ -500,14 +572,20 @@ $popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba(0,0,0,.2) !default;
$popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default;
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;
$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;
$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
// Labels
@@ -530,10 +608,12 @@ $label-font-weight: bold !default;
$modal-inner-padding: 15px !default;
$modal-title-padding: 15px !default;
$modal-title-line-height: $line-height !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: #fff !default;
$modal-content-border-color: rgba(0,0,0,.2) !default;
$modal-content-bg: #fff !default;
$modal-content-border-color: rgba(0,0,0,.2) !default;
$modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default;
$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default;
$modal-backdrop-bg: #000 !default;
$modal-backdrop-opacity: .5 !default;
@@ -576,6 +656,7 @@ $alert-danger-border: $state-danger-border !default;
$progress-bg: #eee !default;
$progress-bar-color: #0074d9 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
$progress-bar-bg: $brand-primary !default;
$progress-bar-success-bg: $brand-success !default;
@@ -613,6 +694,7 @@ $thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: #ddd !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default;
// Breadcrumbs
@@ -627,6 +709,13 @@ $breadcrumb-active-color: $gray-light !default;
$breadcrumb-divider: "/" !default;
// Media objects
$media-margin-top: 15px !default;
$media-heading-margin-bottom: 5px !default;
$media-alignment-padding-x: 10px !default;
// Carousel
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;

View File

@@ -52,6 +52,7 @@ $grid-gutter-width: 1.875rem !default; // 30px
// Grid mixins
//
@import "custom";
@import "variables";
@import "mixins/clearfix";

View File

@@ -2,6 +2,7 @@
//
// Includes only Normalize and our custom Reboot reset.
@import "custom";
@import "variables";
@import "mixins/hover";
@import "mixins/tab-focus";

1
scss/bootstrap.scss vendored
View File

@@ -6,6 +6,7 @@
// Core variables and mixins
@import "functions";
@import "custom";
@import "variables";
@import "mixins";

View File

@@ -10,7 +10,7 @@
color: $color;
background-color: $background;
border-color: $border;
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
@include box-shadow($btn-box-shadow);
@include hover {
color: $color;
@@ -33,7 +33,7 @@
border-color: $active-border;
// Remove the gradient for the pressed/active state
background-image: none;
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
@include box-shadow($btn-active-box-shadow);
&:hover,
&:focus,
@@ -95,6 +95,5 @@
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
}

View File

@@ -1,7 +0,0 @@
// Center-align a block level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}

View File

@@ -68,10 +68,10 @@
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
#{$parent} {
height: $input-height;
padding: $padding-vertical $padding-horizontal;
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);

View File

@@ -4,7 +4,7 @@
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9.
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9
@@ -14,7 +14,7 @@
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9.
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9
@@ -24,12 +24,12 @@
background-repeat: repeat-x;
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback
}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback

View File

@@ -4,47 +4,40 @@
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
$breakpoint-counter: 0;
@each $breakpoint in map-keys($breakpoints) {
$breakpoint-counter: ($breakpoint-counter + 1);
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
@include media-breakpoint-up($breakpoint) {
// Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} {
float: left;
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@if not $enable-flex {
@extend %grid-column-float-#{$breakpoint};
}
@include make-col-span($i, $columns);
@include media-breakpoint-up($breakpoint, $breakpoints) {
@if $enable-flex {
.col-#{$breakpoint} {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns);
}
}
@each $modifier in (pull, push) {
@for $i from 0 through $columns {
.col-#{$breakpoint}-#{$modifier}-#{$i} {
.#{$modifier}-#{$breakpoint}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0
.col-#{$breakpoint}-offset-#{$i} {
.offset-#{$breakpoint}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
}

View File

@@ -14,9 +14,9 @@
// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths) {
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint) {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
@@ -33,17 +33,12 @@
margin-right: ($gutter / -2);
}
@mixin make-col($gutter: $grid-gutter-width) {
@mixin make-col($size, $columns: $grid-columns) {
position: relative;
@if not $enable-flex {
float: left;
}
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
@mixin make-col-span($size, $columns: $grid-columns) {
@if $enable-flex {
flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
@@ -51,6 +46,7 @@
// do not appear to require this.
max-width: percentage($size / $columns);
} @else {
float: left;
width: percentage($size / $columns);
}
}

View File

@@ -1,10 +1,9 @@
// Pagination
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
.page-link {
padding: $padding-vertical $padding-horizontal;
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
}
.page-item {

View File

@@ -1,11 +1,11 @@
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size.
// We deliberately do NOT reset font-size or word-wrap.
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: $line-height;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
@@ -14,5 +14,4 @@
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
}

View File

@@ -1,3 +0,0 @@
.center-block {
@include center-block();
}

36
scss/utilities/_flex.scss Normal file
View File

@@ -0,0 +1,36 @@
// Flex variation
//
// Custom styles for additional flex alignment options.
@if $enable-flex and $enable-grid-classes {
@each $breakpoint in map-keys($grid-breakpoints) {
// Flex column reordering
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
}
// Alignment for every item
@include media-breakpoint-up($breakpoint) {
.flex-items-#{$breakpoint}-top { align-items: flex-start; }
.flex-items-#{$breakpoint}-middle { align-items: center; }
.flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
}
// Alignment per item
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-top { align-self: flex-start; }
.flex-#{$breakpoint}-middle { align-self: center; }
.flex-#{$breakpoint}-bottom { align-self: flex-end; }
}
// Horizontal alignment of item
@include media-breakpoint-up($breakpoint) {
.flex-items-#{$breakpoint}-left { justify-content: flex-start; }
.flex-items-#{$breakpoint}-center { justify-content: center; }
.flex-items-#{$breakpoint}-right { justify-content: flex-end; }
.flex-items-#{$breakpoint}-around { justify-content: space-around; }
.flex-items-#{$breakpoint}-between { justify-content: space-between; }
}
}
}

View File

@@ -32,9 +32,7 @@
// Contextual colors
.text-muted {
color: $text-muted;
}
@include text-emphasis-variant('.text-muted', $text-muted);
@include text-emphasis-variant('.text-primary', $brand-primary);

View File

@@ -1,3 +1,5 @@
// scss-lint:disable ImportantRule
//
// Visibility utilities
//