123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929 |
- .clearfix() {
- &:before,
- &:after {
- content: " ";
- display: table;
- }
- &:after {
- clear: both;
- }
- }
- .tab-focus() {
-
- outline: thin dotted;
-
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
- }
- .center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- .size(@width; @height) {
- width: @width;
- height: @height;
- }
- .square(@size) {
- .size(@size; @size);
- }
- .placeholder(@color: @input-color-placeholder) {
- &::-moz-placeholder { color: @color;
- opacity: 1; }
- &:-ms-input-placeholder { color: @color; }
- &::-webkit-input-placeholder { color: @color; }
- }
- .text-overflow() {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .hide-text() {
- font: ~"0/0" a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
- }
- .text-hide() {
- .hide-text();
- }
- .border-top-radius(@radius) {
- border-top-right-radius: @radius;
- border-top-left-radius: @radius;
- }
- .border-right-radius(@radius) {
- border-bottom-right-radius: @radius;
- border-top-right-radius: @radius;
- }
- .border-bottom-radius(@radius) {
- border-bottom-right-radius: @radius;
- border-bottom-left-radius: @radius;
- }
- .border-left-radius(@radius) {
- border-bottom-left-radius: @radius;
- border-top-left-radius: @radius;
- }
- .box-shadow(@shadow) {
- -webkit-box-shadow: @shadow;
- box-shadow: @shadow;
- }
- .transition(@transition) {
- -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;
- }
- .transition-duration(@transition-duration) {
- -webkit-transition-duration: @transition-duration;
- transition-duration: @transition-duration;
- }
- .transition-transform(@transition) {
- -webkit-transition: -webkit-transform @transition;
- -moz-transition: -moz-transform @transition;
- -o-transition: -o-transform @transition;
- transition: transform @transition;
- }
- .rotate(@degrees) {
- -webkit-transform: rotate(@degrees);
- -ms-transform: rotate(@degrees);
- transform: rotate(@degrees);
- }
- .scale(@ratio; @ratio-y...) {
- -webkit-transform: scale(@ratio, @ratio-y);
- -ms-transform: scale(@ratio, @ratio-y);
- transform: scale(@ratio, @ratio-y);
- }
- .translate(@x; @y) {
- -webkit-transform: translate(@x, @y);
- -ms-transform: translate(@x, @y);
- transform: translate(@x, @y);
- }
- .skew(@x; @y) {
- -webkit-transform: skew(@x, @y);
- -ms-transform: skewX(@x) skewY(@y);
- transform: skew(@x, @y);
- }
- .translate3d(@x; @y; @z) {
- -webkit-transform: translate3d(@x, @y, @z);
- transform: translate3d(@x, @y, @z);
- }
- .rotateX(@degrees) {
- -webkit-transform: rotateX(@degrees);
- -ms-transform: rotateX(@degrees);
- transform: rotateX(@degrees);
- }
- .rotateY(@degrees) {
- -webkit-transform: rotateY(@degrees);
- -ms-transform: rotateY(@degrees);
- 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;
- -ms-transform-origin: @origin;
- transform-origin: @origin;
- }
- .animation(@animation) {
- -webkit-animation: @animation;
- animation: @animation;
- }
- .animation-name(@name) {
- -webkit-animation-name: @name;
- animation-name: @name;
- }
- .animation-duration(@duration) {
- -webkit-animation-duration: @duration;
- animation-duration: @duration;
- }
- .animation-timing-function(@timing-function) {
- -webkit-animation-timing-function: @timing-function;
- animation-timing-function: @timing-function;
- }
- .animation-delay(@delay) {
- -webkit-animation-delay: @delay;
- animation-delay: @delay;
- }
- .animation-iteration-count(@iteration-count) {
- -webkit-animation-iteration-count: @iteration-count;
- animation-iteration-count: @iteration-count;
- }
- .animation-direction(@direction) {
- -webkit-animation-direction: @direction;
- animation-direction: @direction;
- }
- .backface-visibility(@visibility){
- -webkit-backface-visibility: @visibility;
- -moz-backface-visibility: @visibility;
- backface-visibility: @visibility;
- }
- .box-sizing(@boxmodel) {
- -webkit-box-sizing: @boxmodel;
- -moz-box-sizing: @boxmodel;
- box-sizing: @boxmodel;
- }
- .user-select(@select) {
- -webkit-user-select: @select;
- -moz-user-select: @select;
- -ms-user-select: @select;
- user-select: @select;
- }
- .resizable(@direction) {
- resize: @direction;
- overflow: auto;
- }
- .content-columns(@column-count; @column-gap: @grid-gutter-width) {
- -webkit-column-count: @column-count;
- -moz-column-count: @column-count;
- column-count: @column-count;
- -webkit-column-gap: @column-gap;
- -moz-column-gap: @column-gap;
- column-gap: @column-gap;
- }
- .hyphens(@mode: auto) {
- word-wrap: break-word;
- -webkit-hyphens: @mode;
- -moz-hyphens: @mode;
- -ms-hyphens: @mode;
- -o-hyphens: @mode;
- hyphens: @mode;
- }
- .opacity(@opacity) {
- opacity: @opacity;
-
- @opacity-ie: (@opacity * 100);
- filter: ~"alpha(opacity=@{opacity-ie})";
- }
- #gradient {
-
-
-
-
- .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
- background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent));
- background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
- background-repeat: repeat-x;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color)));
- }
-
-
-
-
- .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
- background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
- background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
- background-repeat: repeat-x;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color)));
- }
- .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
- background-repeat: repeat-x;
- background-image: -webkit-linear-gradient(@deg, @start-color, @end-color);
- background-image: linear-gradient(@deg, @start-color, @end-color);
- }
- .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
- background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
- background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
- background-repeat: no-repeat;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color)));
- }
- .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
- background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
- background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
- background-repeat: no-repeat;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color)));
- }
- .radial(@inner-color: #555; @outer-color: #333) {
- background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
- background-image: radial-gradient(circle, @inner-color, @outer-color);
- background-repeat: no-repeat;
- }
- .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
- background-image: -webkit-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);
- }
- }
- .reset-filter() {
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
- }
- .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
- background-image: url("@{file-1x}");
- @media
- only screen and (-webkit-min-device-pixel-ratio: 2),
- only screen and ( min--moz-device-pixel-ratio: 2),
- only screen and ( -o-min-device-pixel-ratio: 2/1),
- only screen and ( min-device-pixel-ratio: 2),
- only screen and ( min-resolution: 192dpi),
- only screen and ( min-resolution: 2dppx) {
- background-image: url("@{file-2x}");
- background-size: @width-1x @height-1x;
- }
- }
- .img-responsive(@display: block) {
- display: @display;
- max-width: 100%;
- height: auto;
- }
- .nav-divider(@color: #e5e5e5) {
- height: 1px;
- margin: ((@line-height-computed / 2) - 1) 0;
- overflow: hidden;
- background-color: @color;
- }
- .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;
- }
- }
- & > .panel-footer {
- + .panel-collapse .panel-body {
- border-bottom-color: @border;
- }
- }
- }
- .alert-variant(@background; @border; @text-color) {
- background-color: @background;
- border-color: @border;
- color: @text-color;
- hr {
- border-top-color: darken(@border, 5%);
- }
- .alert-link {
- color: darken(@text-color, 10%);
- }
- }
- .table-row-variant(@state; @background) {
-
-
- .table > thead > tr,
- .table > tbody > tr,
- .table > tfoot > tr {
- > td.@{state},
- > th.@{state},
- &.@{state} > td,
- &.@{state} > th {
- background-color: @background;
- }
- }
-
-
- .table-hover > tbody > tr {
- > td.@{state}:hover,
- > th.@{state}:hover,
- &.@{state}:hover > td,
- &.@{state}:hover > th {
- background-color: darken(@background, 5%);
- }
- }
- }
- .list-group-item-variant(@state; @background; @color) {
- .list-group-item-@{state} {
- color: @color;
- background-color: @background;
- a& {
- color: @color;
- .list-group-item-heading { color: inherit; }
- &:hover,
- &:focus {
- color: @color;
- background-color: darken(@background, 5%);
- }
- &.active,
- &.active:hover,
- &.active:focus {
- color: #fff;
- background-color: @color;
- border-color: @color;
- }
- }
- }
- }
- .button-variant(@color; @background; @border) {
- color: @color;
- background-color: @background;
- border-color: @border;
- &:hover,
- &:focus,
- &:active,
- &.active,
- .open .dropdown-toggle& {
- color: @color;
- background-color: darken(@background, 8%);
- border-color: darken(@border, 12%);
- }
- &:active,
- &.active,
- .open .dropdown-toggle& {
- background-image: none;
- }
- &.disabled,
- &[disabled],
- fieldset[disabled] & {
- &,
- &:hover,
- &:focus,
- &:active,
- &.active {
- background-color: @background;
- border-color: @border;
- }
- }
- .badge {
- color: @background;
- background-color: @color;
- }
- }
- .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
- padding: @padding-vertical @padding-horizontal;
- font-size: @font-size;
- line-height: @line-height;
- border-radius: @border-radius;
- }
- .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
- > li {
- > a,
- > span {
- padding: @padding-vertical @padding-horizontal;
- font-size: @font-size;
- }
- &:first-child {
- > a,
- > span {
- .border-left-radius(@border-radius);
- }
- }
- &:last-child {
- > a,
- > span {
- .border-right-radius(@border-radius);
- }
- }
- }
- }
- .label-variant(@color) {
- background-color: @color;
- &[href] {
- &:hover,
- &:focus {
- background-color: darken(@color, 10%);
- }
- }
- }
- .bg-variant(@color) {
- background-color: @color;
- a&:hover {
- background-color: darken(@color, 10%);
- }
- }
- .text-emphasis-variant(@color) {
- color: @color;
- a&:hover {
- color: darken(@color, 10%);
- }
- }
- .navbar-vertical-align(@element-height) {
- margin-top: ((@navbar-height - @element-height) / 2);
- margin-bottom: ((@navbar-height - @element-height) / 2);
- }
- .progress-bar-variant(@color) {
- background-color: @color;
- .progress-striped & {
- #gradient > .striped();
- }
- }
- .responsive-visibility() {
- display: block !important;
- table& { display: table; }
- tr& { display: table-row !important; }
- th&,
- td& { display: table-cell !important; }
- }
- .responsive-invisibility() {
- display: none !important;
- }
- .container-fixed() {
- margin-right: auto;
- margin-left: auto;
- padding-left: (@grid-gutter-width / 2);
- padding-right: (@grid-gutter-width / 2);
- &:extend(.clearfix all);
- }
- .make-row(@gutter: @grid-gutter-width) {
- margin-left: (@gutter / -2);
- margin-right: (@gutter / -2);
- &:extend(.clearfix all);
- }
- .make-xs-column(@columns; @gutter: @grid-gutter-width) {
- position: relative;
- float: left;
- width: percentage((@columns / @grid-columns));
- min-height: 1px;
- padding-left: (@gutter / 2);
- padding-right: (@gutter / 2);
- }
- .make-xs-column-offset(@columns) {
- @media (min-width: @screen-xs-min) {
- margin-left: percentage((@columns / @grid-columns));
- }
- }
- .make-xs-column-push(@columns) {
- @media (min-width: @screen-xs-min) {
- left: percentage((@columns / @grid-columns));
- }
- }
- .make-xs-column-pull(@columns) {
- @media (min-width: @screen-xs-min) {
- right: percentage((@columns / @grid-columns));
- }
- }
- .make-sm-column(@columns; @gutter: @grid-gutter-width) {
- position: relative;
- min-height: 1px;
- padding-left: (@gutter / 2);
- padding-right: (@gutter / 2);
- @media (min-width: @screen-sm-min) {
- float: left;
- width: percentage((@columns / @grid-columns));
- }
- }
- .make-sm-column-offset(@columns) {
- @media (min-width: @screen-sm-min) {
- margin-left: percentage((@columns / @grid-columns));
- }
- }
- .make-sm-column-push(@columns) {
- @media (min-width: @screen-sm-min) {
- left: percentage((@columns / @grid-columns));
- }
- }
- .make-sm-column-pull(@columns) {
- @media (min-width: @screen-sm-min) {
- right: percentage((@columns / @grid-columns));
- }
- }
- .make-md-column(@columns; @gutter: @grid-gutter-width) {
- position: relative;
- min-height: 1px;
- padding-left: (@gutter / 2);
- padding-right: (@gutter / 2);
- @media (min-width: @screen-md-min) {
- float: left;
- width: percentage((@columns / @grid-columns));
- }
- }
- .make-md-column-offset(@columns) {
- @media (min-width: @screen-md-min) {
- margin-left: percentage((@columns / @grid-columns));
- }
- }
- .make-md-column-push(@columns) {
- @media (min-width: @screen-md-min) {
- left: percentage((@columns / @grid-columns));
- }
- }
- .make-md-column-pull(@columns) {
- @media (min-width: @screen-md-min) {
- right: percentage((@columns / @grid-columns));
- }
- }
- .make-lg-column(@columns; @gutter: @grid-gutter-width) {
- position: relative;
- min-height: 1px;
- padding-left: (@gutter / 2);
- padding-right: (@gutter / 2);
- @media (min-width: @screen-lg-min) {
- float: left;
- width: percentage((@columns / @grid-columns));
- }
- }
- .make-lg-column-offset(@columns) {
- @media (min-width: @screen-lg-min) {
- margin-left: percentage((@columns / @grid-columns));
- }
- }
- .make-lg-column-push(@columns) {
- @media (min-width: @screen-lg-min) {
- left: percentage((@columns / @grid-columns));
- }
- }
- .make-lg-column-pull(@columns) {
- @media (min-width: @screen-lg-min) {
- right: percentage((@columns / @grid-columns));
- }
- }
- .make-grid-columns() {
-
- .col(@index) when (@index = 1) {
- @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
- .col((@index + 1), @item);
- }
- .col(@index, @list) when (@index =< @grid-columns) {
- @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) {
- @{list} {
- position: relative;
-
- min-height: 1px;
-
- padding-left: (@grid-gutter-width / 2);
- padding-right: (@grid-gutter-width / 2);
- }
- }
- .col(1);
- }
- .float-grid-columns(@class) {
- .col(@index) when (@index = 1) {
- @item: ~".col-@{class}-@{index}";
- .col((@index + 1), @item);
- }
- .col(@index, @list) when (@index =< @grid-columns) {
- @item: ~".col-@{class}-@{index}";
- .col((@index + 1), ~"@{list}, @{item}");
- }
- .col(@index, @list) when (@index > @grid-columns) {
- @{list} {
- float: left;
- }
- }
- .col(1);
- }
- .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
- .col-@{class}-@{index} {
- width: percentage((@index / @grid-columns));
- }
- }
- .calc-grid-column(@index, @class, @type) when (@type = push) {
- .col-@{class}-push-@{index} {
- left: percentage((@index / @grid-columns));
- }
- }
- .calc-grid-column(@index, @class, @type) when (@type = pull) {
- .col-@{class}-pull-@{index} {
- right: percentage((@index / @grid-columns));
- }
- }
- .calc-grid-column(@index, @class, @type) when (@type = offset) {
- .col-@{class}-offset-@{index} {
- margin-left: percentage((@index / @grid-columns));
- }
- }
- .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
- .calc-grid-column(@index, @class, @type);
-
- .loop-grid-columns((@index - 1), @class, @type);
- }
- .make-grid(@class) {
- .float-grid-columns(@class);
- .loop-grid-columns(@grid-columns, @class, width);
- .loop-grid-columns(@grid-columns, @class, pull);
- .loop-grid-columns(@grid-columns, @class, push);
- .loop-grid-columns(@grid-columns, @class, offset);
- }
- .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
-
- .help-block,
- .control-label,
- .radio,
- .checkbox,
- .radio-inline,
- .checkbox-inline {
- color: @text-color;
- }
-
- .form-control {
- border-color: @border-color;
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
- &:focus {
- border-color: darken(@border-color, 10%);
- @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
- .box-shadow(@shadow);
- }
- }
-
- .input-group-addon {
- color: @text-color;
- border-color: @border-color;
- background-color: @background-color;
- }
-
- .form-control-feedback {
- color: @text-color;
- }
- }
- .form-control-focus(@color: @input-border-focus) {
- @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
- &:focus {
- border-color: @color;
- outline: 0;
- .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
- }
- }
- .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
- height: @input-height;
- padding: @padding-vertical @padding-horizontal;
- font-size: @font-size;
- line-height: @line-height;
- border-radius: @border-radius;
- select& {
- height: @input-height;
- line-height: @input-height;
- }
- textarea&,
- select[multiple]& {
- height: auto;
- }
- }
|