X-Git-Url: http://git.roojs.org/?p=bootswatch;a=blobdiff_plain;f=bower_components%2Fbootstrap%2Fless%2Fmixins.less;h=4718cb2c0c3d8e79330b5e2d5414b3a5cf18749e;hp=3f230205b663ba2220f2a6b7c3ecf031fbb3d64d;hb=48c64127b37be4a692a70cb7b38ed9744163582b;hpb=620e501c3d804b1dc2c7d796d7ae378db5e1a040 diff --git a/bower_components/bootstrap/less/mixins.less b/bower_components/bootstrap/less/mixins.less index 3f23020..4718cb2 100755 --- a/bower_components/bootstrap/less/mixins.less +++ b/bower_components/bootstrap/less/mixins.less @@ -27,11 +27,11 @@ } } -// Webkit-style focus +// WebKit-style focus .tab-focus() { // Default outline: thin dotted #333; - // Webkit + // WebKit outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } @@ -69,7 +69,15 @@ } // CSS image replacement +// +// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for +// mixins being reused as classes with the same name, this doesn't hold up. As +// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note +// that we cannot chain the mixins together in Less, so they are repeated. +// // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 + +// Deprecated as of v3.0.1 (will be removed in v4) .hide-text() { font: ~"0/0" a; color: transparent; @@ -77,6 +85,14 @@ background-color: transparent; border: 0; } +// New mixin to use as of v3.0.1 +.text-hide() { + font: ~"0/0" a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} @@ -112,6 +128,10 @@ -webkit-transition: @transition; transition: @transition; } +.transition-property(@transition-property) { + -webkit-transition-property: @transition-property; + transition-property: @transition-property; +} .transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; transition-delay: @transition-delay; @@ -153,10 +173,41 @@ transform: translate3d(@x, @y, @z); } +.rotateX(@degrees) { + -webkit-transform: rotateX(@degrees); + -ms-transform: rotateX(@degrees); // IE9+ + transform: rotateX(@degrees); +} +.rotateY(@degrees) { + -webkit-transform: rotateY(@degrees); + -ms-transform: rotateY(@degrees); // IE9+ + transform: rotateY(@degrees); +} +.perspective(@perspective) { + -webkit-perspective: @perspective; + -moz-perspective: @perspective; + perspective: @perspective; +} +.perspective-origin(@perspective) { + -webkit-perspective-origin: @perspective; + -moz-perspective-origin: @perspective; + perspective-origin: @perspective; +} +.transform-origin(@origin) { + -webkit-transform-origin: @origin; + -moz-transform-origin: @origin; + transform-origin: @origin; +} + +// Animations +.animation(@animation) { + -webkit-animation: @animation; + animation: @animation; +} + // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden` -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples .backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; -moz-backface-visibility: @visibility; @@ -240,7 +291,7 @@ // Color stops are not available in IE9 and below. .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+ + background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-repeat: repeat-x; @@ -276,11 +327,11 @@ background-image: radial-gradient(circle, @inner-color, @outer-color); background-repeat: no-repeat; } - .striped(@color: #555; @angle: 45deg) { - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); } } @@ -342,13 +393,18 @@ // ------------------------- .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { border-color: @border; + & > .panel-heading { color: @heading-text-color; background-color: @heading-bg-color; border-color: @heading-border; + + .panel-collapse .panel-body { border-top-color: @border; } + & > .dropdown .caret { + border-color: @heading-text-color transparent; + } } & > .panel-footer { + .panel-collapse .panel-body { @@ -363,6 +419,7 @@ background-color: @background; border-color: @border; color: @text-color; + hr { border-top-color: darken(@border, 5%); } @@ -384,7 +441,6 @@ &.@{state} > td, &.@{state} > th { background-color: @background; - border-color: @border; } } @@ -393,9 +449,9 @@ .table-hover > tbody > tr { > td.@{state}:hover, > th.@{state}:hover, - &.@{state}:hover > td { + &.@{state}:hover > td, + &.@{state}:hover > th { background-color: darken(@background, 5%); - border-color: darken(@border, 5%); } } } @@ -432,7 +488,7 @@ &:active, &.active { background-color: @background; - border-color: @border + border-color: @border; } } } @@ -496,7 +552,7 @@ .progress-bar-variant(@color) { background-color: @color; .progress-striped & { - #gradient > .striped(@color); + #gradient > .striped(); } } @@ -511,12 +567,13 @@ } .responsive-invisibility() { - display: none !important; - tr& { display: none !important; } + &, + tr&, th&, td& { display: none !important; } } + // Grid System // ----------- @@ -558,7 +615,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-sm) { + @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -566,17 +623,17 @@ // Generate the small column offsets .make-sm-column-offset(@columns) { - @media (min-width: @screen-sm) { + @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { - @media (min-width: @screen-sm) { + @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { - @media (min-width: @screen-sm) { + @media (min-width: @screen-sm-min) { right: percentage((@columns / @grid-columns)); } } @@ -591,15 +648,15 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-md) { + @media (min-width: @screen-md-min) { float: left; width: percentage((@columns / @grid-columns)); } } -// Generate the large column offsets +// Generate the medium column offsets .make-md-column-offset(@columns) { - @media (min-width: @screen-md) { + @media (min-width: @screen-md-min) { margin-left: percentage((@columns / @grid-columns)); } } @@ -609,7 +666,7 @@ } } .make-md-column-pull(@columns) { - @media (min-width: @screen-md) { + @media (min-width: @screen-md-min) { right: percentage((@columns / @grid-columns)); } } @@ -624,7 +681,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-lg) { + @media (min-width: @screen-lg-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -632,22 +689,96 @@ // Generate the large column offsets .make-lg-column-offset(@columns) { - @media (min-width: @screen-lg) { + @media (min-width: @screen-lg-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { - @media (min-width: @screen-lg) { + @media (min-width: @screen-lg-min) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { - @media (min-width: @screen-lg) { + @media (min-width: @screen-lg-min) { right: percentage((@columns / @grid-columns)); } } +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `@grid-columns`. + +.make-grid-columns() { + // Common styles for all sizes of grid columns, widths 1-12 + .col(@index) when (@index = 1) { // initial + @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + .col(@index + 1, @item); + } + .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo + @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + .col(@index + 1, ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { // terminal + @{list} { + 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); + } + } + .col(1); // kickstart it +} + +.make-grid-columns-float(@class) { + .col(@index) when (@index = 1) { // initial + @item: ~".col-@{class}-@{index}"; + .col(@index + 1, @item); + } + .col(@index, @list) when (@index < @grid-columns) { // general + @item: ~".col-@{class}-@{index}"; + .col(@index + 1, ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index = @grid-columns) { // terminal + @{list} { + float: left; + } + } + .col(1); // kickstart it +} + +.calc-grid(@index, @class, @type) when (@type = width) { + .col-@{class}-@{index} { + width: percentage((@index / @grid-columns)); + } +} +.calc-grid(@index, @class, @type) when (@type = push) { + .col-@{class}-push-@{index} { + left: percentage((@index / @grid-columns)); + } +} +.calc-grid(@index, @class, @type) when (@type = pull) { + .col-@{class}-pull-@{index} { + right: percentage((@index / @grid-columns)); + } +} +.calc-grid(@index, @class, @type) when (@type = offset) { + .col-@{class}-offset-@{index} { + margin-left: percentage((@index / @grid-columns)); + } +} + +// Basic looping in LESS +.make-grid(@index, @class, @type) when (@index > 0) { + .calc-grid(@index, @class, @type); + // next iteration + .make-grid(@index - 1, @class, @type); +} + + // Form validation states // // Used in forms.less to generate the form validation CSS for warnings, errors, @@ -656,7 +787,11 @@ .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { // Color the label and help text .help-block, - .control-label { + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline { color: @text-color; } // Set the border and box shadow on specific inputs to match