mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-20 20:31:26 +02:00
Merge branch 'v4' of https://github.com/twbs/derpstrap into v4
This commit is contained in:
Mark Otto
@@ -12,17 +12,6 @@
|
||||
border: 1px solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
|
||||
// Headings for larger alerts
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
// Specified for the h4 to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
// Improve alignment and spacing of inner content
|
||||
> p,
|
||||
> ul {
|
||||
@@ -33,6 +22,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
margin-top: 0;
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
@@ -540,14 +540,14 @@ input[type="checkbox"] {
|
||||
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
|
||||
// inputs and labels within a `.form-group`.
|
||||
.form-group-lg {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include media-sm {
|
||||
.control-label {
|
||||
padding-top: $padding-lg-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group-sm {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include media-sm {
|
||||
.control-label {
|
||||
padding-top: ($padding-sm-vertical + .1);
|
||||
}
|
||||
|
||||
@@ -10,14 +10,11 @@
|
||||
.container {
|
||||
@include make-container();
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
max-width: $container-sm;
|
||||
}
|
||||
@media (min-width: $screen-md-min) {
|
||||
max-width: $container-md;
|
||||
}
|
||||
@media (min-width: $screen-lg-min) {
|
||||
max-width: $container-lg;
|
||||
// For each breakpoint, define the maximum width of the container in a media query
|
||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||
@include media-breakpoint-min($breakpoint) {
|
||||
max-width: $container-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,47 +44,3 @@
|
||||
|
||||
@include make-grid-columns();
|
||||
|
||||
|
||||
// Extra small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for extra small devices like
|
||||
// smartphones.
|
||||
|
||||
@include make-grid(xs);
|
||||
|
||||
|
||||
// Small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
||||
// to tablets.
|
||||
|
||||
@include media-sm {
|
||||
@include make-grid(sm);
|
||||
}
|
||||
|
||||
|
||||
// Medium grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
|
||||
@include media-md {
|
||||
@include make-grid(md);
|
||||
}
|
||||
|
||||
|
||||
// Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
@include media-lg {
|
||||
@include make-grid(lg);
|
||||
}
|
||||
|
||||
|
||||
// Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
@include media-lg {
|
||||
@include make-grid(xl);
|
||||
}
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
}
|
||||
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/media-queries";
|
||||
@import "mixins/hide-text";
|
||||
@import "mixins/image";
|
||||
@@ -57,3 +58,4 @@
|
||||
// @import "mixins/navbar-align";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/pulls";
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include media-sm {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
width: $modal-md;
|
||||
@@ -140,6 +140,6 @@
|
||||
.modal-sm { width: $modal-sm; }
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
@include media-md {
|
||||
.modal-lg { width: $modal-lg; }
|
||||
}
|
||||
|
||||
@@ -199,10 +199,10 @@
|
||||
|
||||
@include media-sm {
|
||||
.navbar-left {
|
||||
@extend .pull-left;
|
||||
@include pull-left();
|
||||
}
|
||||
.navbar-right {
|
||||
@extend .pull-right;
|
||||
@include pull-right();
|
||||
margin-right: -$navbar-padding-horizontal;
|
||||
|
||||
~ .navbar-right {
|
||||
|
||||
@@ -24,14 +24,14 @@
|
||||
border: 1px solid $popover-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
&.top { margin-top: -$popover-arrow-width; }
|
||||
&.right { margin-left: $popover-arrow-width; }
|
||||
&.bottom { margin-top: $popover-arrow-width; }
|
||||
&.left { margin-left: -$popover-arrow-width; }
|
||||
}
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
.popover-top { margin-top: -$popover-arrow-width; }
|
||||
.popover-right { margin-left: $popover-arrow-width; }
|
||||
.popover-bottom { margin-top: $popover-arrow-width; }
|
||||
.popover-left { margin-left: -$popover-arrow-width; }
|
||||
|
||||
.popover-title {
|
||||
padding: 8px 14px;
|
||||
margin: 0; // reset heading margin
|
||||
@@ -47,9 +47,9 @@
|
||||
|
||||
// Arrows
|
||||
//
|
||||
// .arrow is outer, .arrow:after is inner
|
||||
// .popover-arrow is outer, .popover-arrow:after is inner
|
||||
|
||||
.popover > .arrow {
|
||||
.popover-arrow {
|
||||
&,
|
||||
&:after {
|
||||
position: absolute;
|
||||
@@ -60,70 +60,68 @@
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
.popover > .arrow {
|
||||
.popover-arrow {
|
||||
border-width: $popover-arrow-outer-width;
|
||||
}
|
||||
.popover > .arrow:after {
|
||||
.popover-arrow:after {
|
||||
content: "";
|
||||
border-width: $popover-arrow-width;
|
||||
}
|
||||
|
||||
.popover {
|
||||
&.top > .arrow {
|
||||
bottom: -$popover-arrow-outer-width;
|
||||
left: 50%;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-top-color: $popover-arrow-outer-color;
|
||||
.popover-top > .popover-arrow {
|
||||
bottom: -$popover-arrow-outer-width;
|
||||
left: 50%;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-top-color: $popover-arrow-outer-color;
|
||||
border-bottom-width: 0;
|
||||
&:after {
|
||||
bottom: 1px;
|
||||
margin-left: -$popover-arrow-width;
|
||||
content: "";
|
||||
border-top-color: $popover-arrow-color;
|
||||
border-bottom-width: 0;
|
||||
&:after {
|
||||
bottom: 1px;
|
||||
margin-left: -$popover-arrow-width;
|
||||
content: "";
|
||||
border-top-color: $popover-arrow-color;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
&.right > .arrow {
|
||||
top: 50%;
|
||||
left: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-right-color: $popover-arrow-outer-color;
|
||||
border-left-width: 0;
|
||||
&:after {
|
||||
bottom: -$popover-arrow-width;
|
||||
left: 1px;
|
||||
content: "";
|
||||
border-right-color: $popover-arrow-color;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
&.bottom > .arrow {
|
||||
top: -$popover-arrow-outer-width;
|
||||
left: 50%;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: $popover-arrow-outer-color;
|
||||
&:after {
|
||||
top: 1px;
|
||||
margin-left: -$popover-arrow-width;
|
||||
content: "";
|
||||
border-top-width: 0;
|
||||
border-bottom-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.left > .arrow {
|
||||
top: 50%;
|
||||
right: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-right-width: 0;
|
||||
border-left-color: $popover-arrow-outer-color;
|
||||
&:after {
|
||||
right: 1px;
|
||||
bottom: -$popover-arrow-width;
|
||||
content: "";
|
||||
border-right-width: 0;
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popover-right > .popover-arrow {
|
||||
top: 50%;
|
||||
left: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-right-color: $popover-arrow-outer-color;
|
||||
border-left-width: 0;
|
||||
&:after {
|
||||
bottom: -$popover-arrow-width;
|
||||
left: 1px;
|
||||
content: "";
|
||||
border-right-color: $popover-arrow-color;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
.popover-bottom > .popover-arrow {
|
||||
top: -$popover-arrow-outer-width;
|
||||
left: 50%;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: $popover-arrow-outer-color;
|
||||
&:after {
|
||||
top: 1px;
|
||||
margin-left: -$popover-arrow-width;
|
||||
content: "";
|
||||
border-top-width: 0;
|
||||
border-bottom-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-left > .popover-arrow {
|
||||
top: 50%;
|
||||
right: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-right-width: 0;
|
||||
border-left-color: $popover-arrow-outer-color;
|
||||
&:after {
|
||||
right: 1px;
|
||||
bottom: -$popover-arrow-width;
|
||||
content: "";
|
||||
border-right-width: 0;
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,26 +17,23 @@
|
||||
opacity: 0;
|
||||
|
||||
&.in { opacity: $tooltip-opacity; }
|
||||
}
|
||||
|
||||
&.top {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&.left {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: -3px;
|
||||
}
|
||||
.tooltip-top {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.tooltip-right {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.tooltip-bottom {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.tooltip-left {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
@@ -58,62 +55,31 @@
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
|
||||
.tooltip {
|
||||
&.top .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.top-left .tooltip-arrow {
|
||||
right: $tooltip-arrow-width;
|
||||
bottom: 0;
|
||||
margin-bottom: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.top-right .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: $tooltip-arrow-width;
|
||||
margin-bottom: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.right .tooltip-arrow {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.left .tooltip-arrow {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.bottom .tooltip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.bottom-left .tooltip-arrow {
|
||||
top: 0;
|
||||
right: $tooltip-arrow-width;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
&.bottom-right .tooltip-arrow {
|
||||
top: 0;
|
||||
left: $tooltip-arrow-width;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
.tooltip-top .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
.tooltip-right .tooltip-arrow {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
}
|
||||
.tooltip-left .tooltip-arrow {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
}
|
||||
.tooltip-bottom .tooltip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
|
||||
@@ -116,7 +116,7 @@ ol {
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
@extend list-unstyled();
|
||||
@extend .list-unstyled;
|
||||
margin-left: -5px;
|
||||
|
||||
> li {
|
||||
|
||||
@@ -10,11 +10,12 @@
|
||||
.center-block {
|
||||
@include center-block();
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
@include pull-right();
|
||||
}
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
@include pull-left();
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -272,29 +272,22 @@ $zindex-modal: 1040 !default;
|
||||
//
|
||||
//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
|
||||
|
||||
// Extra large screen / wide desktop
|
||||
$screen-xl-min: 75em !default;
|
||||
|
||||
// Large screen / desktop
|
||||
$screen-lg-max: ($screen-xl-min - .1) !default;
|
||||
$screen-lg-min: 62em !default;
|
||||
|
||||
// Medium screen / tablet
|
||||
$screen-md-max: ($screen-lg-min - .1) !default;
|
||||
$screen-md-min: 48em !default;
|
||||
|
||||
// Small screen / phone
|
||||
$screen-sm-max: ($screen-md-min - .1) !default;
|
||||
$screen-sm-min: 34em !default;
|
||||
|
||||
// Extra small screen / phone
|
||||
$screen-xs-max: ($screen-sm-min - .1) !default;
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
$grid-breakpoints: (xs sm md lg xl);
|
||||
$grid-breakpoints: (
|
||||
// Extra small screen / phone
|
||||
xs: 0,
|
||||
// Small screen / phone
|
||||
sm: 34em,
|
||||
// Medium screen / tablet
|
||||
md: 48em,
|
||||
// Large screen / desktop
|
||||
lg: 62em,
|
||||
// Extra large screen / wide desktop
|
||||
xl: 75em
|
||||
) !default;
|
||||
|
||||
//** Number of columns in the grid.
|
||||
$grid-columns: 12 !default;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@@ -305,17 +298,12 @@ $grid-gutter-width: 1.5rem !default;
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
//** For `$screen-xs-min` and up.
|
||||
$container-sm: 34em !default; // 480
|
||||
|
||||
//** For `$screen-sm-min` and up.
|
||||
$container-md: 45rem !default; // 720
|
||||
|
||||
//** For `$screen-md-min` and up.
|
||||
$container-lg: 60rem !default; // 960
|
||||
|
||||
//** For `$screen-lg-min` and up.
|
||||
$container-xl: 72.25rem !default; // 1140
|
||||
$container-max-widths: (
|
||||
sm: 34rem, // 480
|
||||
md: 45rem, // 720
|
||||
lg: 60rem, // 960
|
||||
xl: 72.25rem // 1140
|
||||
) !default;
|
||||
|
||||
|
||||
//== Navbar
|
||||
|
||||
85
scss/mixins/_breakpoints.scss
Normal file
85
scss/mixins/_breakpoints.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 34rem, md: 45rem)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
|
||||
// 34rem
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem))
|
||||
// 44.9rem
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 0.1, null);
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
@mixin media-breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
@mixin media-breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
// Nested media query combination does not work in libsass yet
|
||||
// https://github.com/sass/libsass/issues/185
|
||||
// Work around until the issue is resolved:
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $min and $max {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
// One of min or max is a no-op, so this branch is not affected by libsass#185
|
||||
@include media-breakpoint-min($name, $breakpoints) {
|
||||
@include media-breakpoint-max($name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,69 +3,40 @@
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
// Common properties for all breakpoints
|
||||
@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
|
||||
@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: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
@for $i from 1 through $columns {
|
||||
@each $breakpoint in $breakpoints {
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
@for $i from 1 through $columns {
|
||||
.col-#{$breakpoint}-#{$i} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breakpoint-specific properties
|
||||
@mixin make-grid($breakpoint, $columns: $grid-columns) {
|
||||
// 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} {
|
||||
@extend %grid-column-float-#{$breakpoint};
|
||||
@include grid-column-width($i, $columns);
|
||||
}
|
||||
}
|
||||
@each $modifier in (pull, push, offset) {
|
||||
@for $i from 0 through $columns {
|
||||
.col-#{$breakpoint}-#{$modifier}-#{$i} {
|
||||
@include grid-column-modifier($modifier, $i, $columns)
|
||||
@include media-breakpoint-min($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} {
|
||||
@extend %grid-column-float-#{$breakpoint};
|
||||
@include make-col-span($i, $columns);
|
||||
}
|
||||
}
|
||||
@each $modifier in (pull, push, offset) {
|
||||
@for $i from 0 through $columns {
|
||||
.col-#{$breakpoint}-#{$modifier}-#{$i} {
|
||||
@include make-col-modifier($modifier, $i, $columns)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-column-width($index, $columns) {
|
||||
width: percentage($index / $columns);
|
||||
}
|
||||
|
||||
@mixin grid-column-push($index, $columns) {
|
||||
left: if($index > 0, percentage($index / $columns), auto);
|
||||
}
|
||||
|
||||
@mixin grid-column-pull($index, $columns) {
|
||||
right: if($index > 0, percentage($index / $columns), auto);
|
||||
}
|
||||
|
||||
@mixin grid-column-offset($index, $columns) {
|
||||
margin-left: percentage($index / $columns);
|
||||
}
|
||||
|
||||
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
|
||||
@mixin grid-column-modifier($type, $index, $columns) {
|
||||
@if $type == push {
|
||||
@include grid-column-push($index, $columns);
|
||||
} @else if $type == pull {
|
||||
@include grid-column-pull($index, $columns);
|
||||
} @else if $type == offset {
|
||||
@include grid-column-offset($index, $columns);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,18 +24,29 @@
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
|
||||
@mixin make-col-span($columns) {
|
||||
width: percentage(($columns / $grid-columns));
|
||||
@mixin make-col-span($size, $columns: $grid-columns) {
|
||||
width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
@mixin make-col-offset($columns) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
margin-left: percentage($size / $columns);
|
||||
}
|
||||
|
||||
@mixin make-col-push($columns) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
@mixin make-col-push($size, $columns: $grid-columns) {
|
||||
left: if($size > 0, percentage($size / $columns), auto);
|
||||
}
|
||||
|
||||
@mixin make-col-pull($columns) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
@mixin make-col-pull($size, $columns: $grid-columns) {
|
||||
right: if($size > 0, percentage($size / $columns), auto);
|
||||
}
|
||||
|
||||
@mixin make-col-modifier($type, $size, $columns) {
|
||||
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
|
||||
@if $type == push {
|
||||
@include make-col-push($size, $columns);
|
||||
} @else if $type == pull {
|
||||
@include make-col-pull($size, $columns);
|
||||
} @else if $type == offset {
|
||||
@include make-col-offset($size, $columns);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
// Media query mixins
|
||||
// Media query mixins for default breakpoints
|
||||
|
||||
@mixin media-xs() {
|
||||
@media (max-width: $screen-xs-max) { @content }
|
||||
@include media-breakpoint-max(xs) { @content }
|
||||
}
|
||||
|
||||
@mixin media-sm() {
|
||||
@media (min-width: $screen-sm-min) { @content }
|
||||
@include media-breakpoint-min(sm) { @content }
|
||||
}
|
||||
|
||||
@mixin media-sm-max() {
|
||||
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @content }
|
||||
@include media-breakpoint-only(sm) { @content }
|
||||
}
|
||||
|
||||
@mixin media-md() {
|
||||
@media (min-width: $screen-md-min) { @content }
|
||||
@include media-breakpoint-min(md) { @content }
|
||||
}
|
||||
|
||||
@mixin media-md-max() {
|
||||
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @content }
|
||||
@include media-breakpoint-only(md) { @content }
|
||||
}
|
||||
|
||||
@mixin media-lg() {
|
||||
@media (min-width: $screen-lg-min) { @content }
|
||||
@include media-breakpoint-min(lg) { @content }
|
||||
}
|
||||
|
||||
6
scss/mixins/_pulls.scss
Normal file
6
scss/mixins/_pulls.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@mixin pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
@mixin pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
Reference in New Issue
Block a user