Last active
August 29, 2015 14:12
-
-
Save bassjobsen/2b556de8d235c6331a52 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // less/grid.less - less/variables.less - less/mixins/grid-framework.less | |
| // | |
| // for Media queries breakpoints | |
| // Ex > @media @xs {...} | |
| // ============================================================================================================= | |
| // @screen-lg-min: 1200px; | |
| // @screen-md-max: (@screen-lg-min - 1); // 1199 | |
| // @screen-sm-max: (@screen-md-min - 1); // 991 | |
| // @screen-xs-max: (@screen-sm-min - 1); // 767 | |
| @screen-xxs-max: (@screen-xs-min - 1); // 479 | |
| @container-xxs: (431px + @grid-gutter-width); | |
| @xxs: ~'(max-width: @{screen-xxs-max})'; // less than 479 | |
| @xs: ~'(min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})'; // 480 to 767 | |
| @sm: ~'(min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})'; // 768 to 991 | |
| @md: ~'(min-width: @{screen-md-min}) and (max-width: @{screen-md-max})'; // 992 to 1199 | |
| @lg: ~'(min-width: @{screen-lg-min})'; // 1200 and up | |
| // ============================================================================================================= | |
| .container { | |
| .container-fixed(); | |
| @media @xxs { | |
| width: @container-xxs; | |
| } | |
| } | |
| .make-grid-columns() { | |
| .col(@index) { | |
| @item: ~".col-xxs-@{index}, .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-xxs-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |
| .col((@index + 1), ~"@{list}, @{item}"); | |
| } | |
| } | |
| // for text-hide | |
| //============================================================================= | |
| .image-replace(@url, @width, @height ) { | |
| display: block; | |
| width: @width; | |
| height: @height; | |
| background: url(@url) no-repeat left top; | |
| .text-hide(); | |
| } | |
| // for text-hide with retina image | |
| // EX > .img-replacement-retina ("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); | |
| //============================================================================= | |
| .image-replace-retina(@url, @width, @height) { | |
| .text-hide(); | |
| .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; | |
| } | |
| } | |
| } | |
| // Misc | |
| //============================================================================= | |
| .sr-skip { | |
| .sr-only(); | |
| .sr-only-focusable(); | |
| } | |
| .divider-vertical(@h:100, @opa:1, @mar:15) { | |
| height: unit(@h/16,rem); | |
| border-left: 1px solid gray; | |
| float: left; | |
| opacity: @opa; | |
| margin: 0 unit(@mar/16,rem); | |
| } | |
| .no-border { | |
| border: none !important; | |
| border-radius: 0 !important; | |
| } | |
| .no-shadow { | |
| box-shadow: none !important; | |
| } | |
| // Display | |
| //============================================================================= | |
| .dis-table { | |
| display:table; | |
| } | |
| .dis-cell { | |
| display: table-cell; | |
| } | |
| .dis-row { | |
| display: table-row; | |
| } | |
| .inline { | |
| display: inline; | |
| } | |
| .inline-block { | |
| display: inline-block; | |
| } | |
| // Modal Fades | |
| //============================================================================= | |
| .modal { | |
| &.fade-left { | |
| left: -25%; | |
| transition: opacity 0.3s linear, left 0.3s ease-out; | |
| &.in-left { | |
| left: 50%; | |
| } | |
| } | |
| } | |
| .modal { | |
| &.fade-right { | |
| left: 200%; | |
| transition: opacity 0.3s linear, left 0.3s ease-out; | |
| &.in-right { | |
| left: 50%; | |
| } | |
| } | |
| } | |
| .modal { | |
| &.fade-bottom { | |
| top: 200%; | |
| transition: opacity 0.3s linear, top 0.3s ease-out; | |
| &.in-bottom { | |
| top: 50%; | |
| } | |
| } | |
| } | |
| // padding & margin reset ,padding is for (cont & col), margin is for (row) | |
| //============================================================================= | |
| .no-padding { | |
| padding-right: 0 !important; | |
| padding-left: 0 !important; | |
| } | |
| .no-padding-v { | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .no-margin { | |
| margin-right: 0 !important; | |
| margin-left: 0 !important; | |
| } | |
| .no-margin-v { | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; | |
| } | |
| //======================================== | |
| .no-margin-right { | |
| margin-right: 0 !important; | |
| } | |
| .no-margin-left { | |
| margin-left: 0 !important; | |
| } | |
| .no-margin-top { | |
| margin-top: 0 !important; | |
| } | |
| .no-margin-bottom { | |
| margin-bottom: 0 !important; | |
| } | |
| .no-padding-right { | |
| padding-right: 0 !important; | |
| } | |
| .no-padding-left { | |
| padding-left: 0 !important; | |
| } | |
| .no-padding-top { | |
| padding-top: 0 !important; | |
| } | |
| .no-padding-bottom { | |
| padding-bottom: 0 !important; | |
| } | |
| // (http://zerosixthree.se/) | |
| // add (align-main) to the parent element & v-/c-align to childs | |
| //============================================================================= | |
| .align-main { | |
| transform-style: preserve-3d; | |
| } | |
| .v-align { | |
| position: relative; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .c-align { | |
| position: relative; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%,-50%); | |
| } | |
| // position absolute H&V center align ,you have to give a width & height or padding ,its important to have a size or it will be 100% | |
| // both works but its better to use the 2nd | |
| //============================================================================= | |
| .align-p(@w, @h) { | |
| width: -(unit((@w/2)/16,rem)); | |
| height: -(unit((@h/2)/16,rem)); | |
| margin: auto; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| .align-p2(@w, @h) { | |
| width: unit(@w/16,rem); | |
| height: unit(@h/16,rem); | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -(unit((@w/2)/16,rem)); | |
| margin-top: -(unit((@h/2)/16,rem)); | |
| } | |
| // margin options | |
| //============================================================================= | |
| .space-auto { | |
| margin: 0 auto; | |
| } | |
| .space-top-10 { | |
| margin-top: unit(10/16,rem); | |
| } | |
| .space-top-15 { | |
| margin-top: unit(15/16,rem); | |
| } | |
| .space-top-20 { | |
| margin-top: unit(20/16,rem); | |
| } | |
| .space-top-25 { | |
| margin-top: unit(25/16,rem); | |
| } | |
| .space-top-30 { | |
| margin-top: unit(30/16,rem); | |
| } | |
| .space-top-35 { | |
| margin-top: unit(35/16,rem); | |
| } | |
| .space-top-40 { | |
| margin-top: unit(40/16,rem); | |
| } | |
| .space-top-45 { | |
| margin-top: unit(45/16,rem); | |
| } | |
| .space-top-50 { | |
| margin-top: unit(50/16,rem); | |
| } | |
| .space-top-60 { | |
| margin-top: unit(60/16,rem); | |
| } | |
| .space-top-70 { | |
| margin-top: unit(70/16,rem); | |
| } | |
| .space-top-80 { | |
| margin-top: unit(80/16,rem); | |
| } | |
| .space-top-90 { | |
| margin-top: unit(90/16,rem); | |
| } | |
| .space-top-100 { | |
| margin-top: unit(100/16,rem); | |
| } | |
| //======================================== | |
| .space-bottom-10 { | |
| margin-bottom: unit(10/16,rem); | |
| } | |
| .space-bottom-15 { | |
| margin-bottom: unit(15/16,rem); | |
| } | |
| .space-bottom-20 { | |
| margin-bottom: unit(20/16,rem); | |
| } | |
| .space-bottom-25 { | |
| margin-bottom: unit(25/16,rem); | |
| } | |
| .space-bottom-30 { | |
| margin-bottom: unit(30/16,rem); | |
| } | |
| .space-bottom-35 { | |
| margin-bottom: unit(35/16,rem); | |
| } | |
| .space-bottom-40 { | |
| margin-bottom: unit(40/16,rem); | |
| } | |
| .space-bottom-45 { | |
| margin-bottom: unit(45/16,rem); | |
| } | |
| .space-bottom-50 { | |
| margin-bottom: unit(50/16,rem); | |
| } | |
| .space-bottom-60 { | |
| margin-bottom: unit(60/16,rem); | |
| } | |
| .space-bottom-70 { | |
| margin-bottom: unit(70/16,rem); | |
| } | |
| .space-bottom-80 { | |
| margin-bottom: unit(80/16,rem); | |
| } | |
| .space-bottom-90 { | |
| margin-bottom: unit(90/16,rem); | |
| } | |
| .space-bottom-100 { | |
| margin-bottom: unit(100/16,rem); | |
| } | |
| //======================================== | |
| .space-right-10 { | |
| margin-right: unit(10/16,rem); | |
| } | |
| .space-right-15 { | |
| margin-right: unit(15/16,rem); | |
| } | |
| .space-right-20 { | |
| margin-right: unit(20/16,rem); | |
| } | |
| .space-right-25 { | |
| margin-right: unit(25/16,rem); | |
| } | |
| .space-right-30 { | |
| margin-right: unit(30/16,rem); | |
| } | |
| .space-right-35 { | |
| margin-right: unit(35/16,rem); | |
| } | |
| .space-right-40 { | |
| margin-right: unit(40/16,rem); | |
| } | |
| .space-right-45 { | |
| margin-right: unit(45/16,rem); | |
| } | |
| .space-right-50 { | |
| margin-right: unit(50/16,rem); | |
| } | |
| .space-right-60 { | |
| margin-right: unit(60/16,rem); | |
| } | |
| .space-right-70 { | |
| margin-right: unit(70/16,rem); | |
| } | |
| .space-right-80 { | |
| margin-right: unit(80/16,rem); | |
| } | |
| .space-right-90 { | |
| margin-right: unit(90/16,rem); | |
| } | |
| .space-right-100 { | |
| margin-right: unit(100/16,rem); | |
| } | |
| //======================================== | |
| .space-left-10 { | |
| margin-left: unit(10/16,rem); | |
| } | |
| .space-left-15 { | |
| margin-left: unit(15/16,rem); | |
| } | |
| .space-left-20 { | |
| margin-left: unit(20/16,rem); | |
| } | |
| .space-left-25 { | |
| margin-left: unit(25/16,rem); | |
| } | |
| .space-left-30 { | |
| margin-left: unit(30/16,rem); | |
| } | |
| .space-left-35 { | |
| margin-left: unit(35/16,rem); | |
| } | |
| .space-left-40 { | |
| margin-left: unit(40/16,rem); | |
| } | |
| .space-left-45 { | |
| margin-left: unit(45/16,rem); | |
| } | |
| .space-left-50 { | |
| margin-left: unit(50/16,rem); | |
| } | |
| .space-left-60 { | |
| margin-left: unit(60/16,rem); | |
| } | |
| .space-left-70 { | |
| margin-left: unit(70/16,rem); | |
| } | |
| .space-left-80 { | |
| margin-left: unit(80/16,rem); | |
| } | |
| .space-left-90 { | |
| margin-left: unit(90/16,rem); | |
| } | |
| .space-left-100 { | |
| margin-left: unit(100/16,rem); | |
| } | |
| // padding options | |
| //============================================================================= | |
| .gap-top-10 { | |
| padding-top: unit(10/16,rem); | |
| } | |
| .gap-top-15 { | |
| padding-top: unit(15/16,rem); | |
| } | |
| .gap-top-20 { | |
| padding-top: unit(20/16,rem); | |
| } | |
| .gap-top-25 { | |
| padding-top: unit(25/16,rem); | |
| } | |
| .gap-top-30 { | |
| padding-top: unit(30/16,rem); | |
| } | |
| .gap-top-35 { | |
| padding-top: unit(35/16,rem); | |
| } | |
| .gap-top-40 { | |
| padding-top: unit(40/16,rem); | |
| } | |
| .gap-top-45 { | |
| padding-top: unit(45/16,rem); | |
| } | |
| .gap-top-50 { | |
| padding-top: unit(50/16,rem); | |
| } | |
| .gap-top-60 { | |
| padding-top: unit(60/16,rem); | |
| } | |
| .gap-top-70 { | |
| padding-top: unit(70/16,rem); | |
| } | |
| .gap-top-80 { | |
| padding-top: unit(80/16,rem); | |
| } | |
| .gap-top-90 { | |
| padding-top: unit(90/16,rem); | |
| } | |
| .gap-top-100 { | |
| padding-top: unit(100/16,rem); | |
| } | |
| //======================================== | |
| .gap-bottom-10 { | |
| padding-bottom: unit(10/16,rem); | |
| } | |
| .gap-bottom-15 { | |
| padding-bottom: unit(15/16,rem); | |
| } | |
| .gap-bottom-20 { | |
| padding-bottom: unit(20/16,rem); | |
| } | |
| .gap-bottom-25 { | |
| padding-bottom: unit(25/16,rem); | |
| } | |
| .gap-bottom-30 { | |
| padding-bottom: unit(30/16,rem); | |
| } | |
| .gap-bottom-35 { | |
| padding-bottom: unit(35/16,rem); | |
| } | |
| .gap-bottom-40 { | |
| padding-bottom: unit(40/16,rem); | |
| } | |
| .gap-bottom-45 { | |
| padding-bottom: unit(45/16,rem); | |
| } | |
| .gap-bottom-50 { | |
| padding-bottom: unit(50/16,rem); | |
| } | |
| .gap-bottom-60 { | |
| padding-bottom: unit(60/16,rem); | |
| } | |
| .gap-bottom-70 { | |
| padding-bottom: unit(70/16,rem); | |
| } | |
| .gap-bottom-80 { | |
| padding-bottom: unit(80/16,rem); | |
| } | |
| .gap-bottom-90 { | |
| padding-bottom: unit(90/16,rem); | |
| } | |
| .gap-bottom-100 { | |
| padding-bottom: unit(100/16,rem); | |
| } | |
| //======================================== | |
| .gap-right-10 { | |
| padding-right: unit(10/16,rem); | |
| } | |
| .gap-right-15 { | |
| padding-right: unit(15/16,rem); | |
| } | |
| .gap-right-20 { | |
| padding-right: unit(20/16,rem); | |
| } | |
| .gap-right-25 { | |
| padding-right: unit(25/16,rem); | |
| } | |
| .gap-right-30 { | |
| padding-right: unit(30/16,rem); | |
| } | |
| .gap-right-35 { | |
| padding-right: unit(35/16,rem); | |
| } | |
| .gap-right-40 { | |
| padding-right: unit(40/16,rem); | |
| } | |
| .gap-right-45 { | |
| padding-right: unit(45/16,rem); | |
| } | |
| .gap-right-50 { | |
| padding-right: unit(50/16,rem); | |
| } | |
| .gap-right-60 { | |
| padding-right: unit(60/16,rem); | |
| } | |
| .gap-right-70 { | |
| padding-right: unit(70/16,rem); | |
| } | |
| .gap-right-80 { | |
| padding-right: unit(80/16,rem); | |
| } | |
| .gap-right-90 { | |
| padding-right: unit(90/16,rem); | |
| } | |
| .gap-right-100 { | |
| padding-right: unit(100/16,rem); | |
| } | |
| //======================================== | |
| .gap-left-10 { | |
| padding-left: unit(10/16,rem); | |
| } | |
| .gap-left-15 { | |
| padding-left: unit(15/16,rem); | |
| } | |
| .gap-left-20 { | |
| padding-left: unit(20/16,rem); | |
| } | |
| .gap-left-25 { | |
| padding-left: unit(25/16,rem); | |
| } | |
| .gap-left-30 { | |
| padding-left: unit(30/16,rem); | |
| } | |
| .gap-left-35 { | |
| padding-left: unit(35/16,rem); | |
| } | |
| .gap-left-40 { | |
| padding-left: unit(40/16,rem); | |
| } | |
| .gap-left-45 { | |
| padding-left: unit(45/16,rem); | |
| } | |
| .gap-left-50 { | |
| padding-left: unit(50/16,rem); | |
| } | |
| .gap-left-60 { | |
| padding-left: unit(60/16,rem); | |
| } | |
| .gap-left-70 { | |
| padding-left: unit(70/16,rem); | |
| } | |
| .gap-left-80 { | |
| padding-left: unit(80/16,rem); | |
| } | |
| .gap-left-90 { | |
| padding-left: unit(90/16,rem); | |
| } | |
| .gap-left-100 { | |
| padding-left: unit(100/16,rem); | |
| } | |
| // col-?-?.5 \\ we cant use (.) so we use (-) instead | |
| // the columns should clear-fix automatically now, so no need for the clear-fix div | |
| //============================================================================= | |
| @media @lg | |
| { | |
| // ============ clear fix =============== | |
| .col-md-1:nth-child(12n+1), | |
| .col-md-2:nth-child(6n+1), | |
| .col-md-3:nth-child(4n+1), | |
| .col-md-4:nth-child(3n+1), | |
| .col-md-6:nth-child(2n+1), | |
| .col-sm-1:nth-child(12n+1), | |
| .col-sm-2:nth-child(6n+1), | |
| .col-sm-3:nth-child(4n+1), | |
| .col-sm-4:nth-child(3n+1), | |
| .col-sm-6:nth-child(2n+1), | |
| .col-xs-1:nth-child(12n+1), | |
| .col-xs-2:nth-child(6n+1), | |
| .col-xs-3:nth-child(4n+1), | |
| .col-xs-4:nth-child(3n+1), | |
| .col-xs-6:nth-child(2n+1), | |
| .col-xxs-1:nth-child(12n+1), | |
| .col-xxs-2:nth-child(6n+1), | |
| .col-xxs-3:nth-child(4n+1), | |
| .col-xxs-4:nth-child(3n+1), | |
| .col-xxs-6:nth-child(2n+1) { | |
| clear: none; | |
| } | |
| .col-lg-1:nth-child(12n+1), | |
| .col-lg-2:nth-child(6n+1), | |
| .col-lg-3:nth-child(4n+1), | |
| .col-lg-4:nth-child(3n+1), | |
| .col-lg-6:nth-child(2n+1){ | |
| clear: left; | |
| } | |
| //================================================================= | |
| .col-lg-0-5, | |
| .col-lg-1-5, | |
| .col-lg-2-5, | |
| .col-lg-3-5, | |
| .col-lg-4-5, | |
| .col-lg-5-5, | |
| .col-lg-6-5, | |
| .col-lg-7-5, | |
| .col-lg-8-5 { | |
| float: left; | |
| position: relative; | |
| min-height: 1px; | |
| padding-right: unit(15/16,rem); | |
| padding-left: unit(15/16,rem); | |
| } | |
| .col-lg-0-5 { | |
| width: percentage((0.5 / 12)); | |
| } | |
| .col-lg-offset-0-5 { | |
| margin-left: percentage((0.5 / 12)); | |
| } | |
| .col-lg-pull-0-5 { | |
| right: percentage((0.5 / 12)); | |
| } | |
| .col-lg-push-0-5 { | |
| left: percentage((0.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-1-5 { | |
| width: percentage((1.5 / 12)); | |
| } | |
| .col-lg-pull-1-5 { | |
| right: percentage((1.5 / 12)); | |
| } | |
| .col-lg-push-1-5 { | |
| left: percentage((1.5 / 12)); | |
| } | |
| .col-lg-offset-1-5 { | |
| margin-left: percentage((1.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-2-5 { | |
| width: percentage((2.5 / 12)); | |
| } | |
| .col-lg-pull-2-5 { | |
| right: percentage((2.5 / 12)); | |
| } | |
| .col-lg-push-2-5 { | |
| left: percentage((2.5 / 12)); | |
| } | |
| .col-lg-offset-2-5 { | |
| margin-left: percentage((2.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-3-5 { | |
| width: percentage((3.5 / 12)); | |
| } | |
| .col-lg-pull-3-5 { | |
| right: percentage((3.5 / 12)); | |
| } | |
| .col-lg-push-3-5 { | |
| left: percentage((3.5 / 12)); | |
| } | |
| .col-lg-offset-3-5 { | |
| margin-left: percentage((3.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-4-5 { | |
| width: percentage((4.5 / 12)); | |
| } | |
| .col-lg-pull-4-5 { | |
| right: percentage((4.5 / 12)); | |
| } | |
| .col-lg-push-4-5 { | |
| left: percentage((4.5 / 12)); | |
| } | |
| .col-lg-offset-4-5 { | |
| margin-left: percentage((4.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-5-5 { | |
| width: percentage((5.5 / 12)); | |
| } | |
| .col-lg-pull-5-5 { | |
| right: percentage((5.5 / 12)); | |
| } | |
| .col-lg-push-5-5 { | |
| left: percentage((5.5 / 12)); | |
| } | |
| .col-lg-offset-5-5 { | |
| margin-left: percentage((5.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-6-5 { | |
| width: percentage((6.5 / 12)); | |
| } | |
| .col-lg-pull-6-5 { | |
| right: percentage((6.5 / 12)); | |
| } | |
| .col-lg-push-6-5 { | |
| left: percentage((6.5 / 12)); | |
| } | |
| .col-lg-offset-6-5 { | |
| margin-left: percentage((6.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-7-5 { | |
| width: percentage((7.5 / 12)); | |
| } | |
| .col-lg-pull-7-5 { | |
| right: percentage((7.5 / 12)); | |
| } | |
| .col-lg-push-7-5 { | |
| left: percentage((7.5 / 12)); | |
| } | |
| .col-lg-offset-7-5 { | |
| margin-left: percentage((7.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-lg-8-5 { | |
| width: percentage((8.5 / 12)); | |
| } | |
| .col-lg-pull-8-5 { | |
| right: percentage((8.5 / 12)); | |
| } | |
| .col-lg-push-8-5 { | |
| left: percentage((8.5 / 12)); | |
| } | |
| .col-lg-offset-8-5 { | |
| margin-left: percentage((8.5 / 12)); | |
| } | |
| } | |
| //================================================================= | |
| //================================================================= | |
| @media @md | |
| { | |
| // ============ clear fix =============== | |
| .col-lg-1:nth-child(12n+1), | |
| .col-lg-2:nth-child(6n+1), | |
| .col-lg-3:nth-child(4n+1), | |
| .col-lg-4:nth-child(3n+1), | |
| .col-lg-6:nth-child(2n+1), | |
| .col-sm-1:nth-child(12n+1), | |
| .col-sm-2:nth-child(6n+1), | |
| .col-sm-3:nth-child(4n+1), | |
| .col-sm-4:nth-child(3n+1), | |
| .col-sm-6:nth-child(2n+1), | |
| .col-xs-1:nth-child(12n+1), | |
| .col-xs-2:nth-child(6n+1), | |
| .col-xs-3:nth-child(4n+1), | |
| .col-xs-4:nth-child(3n+1), | |
| .col-xs-6:nth-child(2n+1), | |
| .col-xxs-1:nth-child(12n+1), | |
| .col-xxs-2:nth-child(6n+1), | |
| .col-xxs-3:nth-child(4n+1), | |
| .col-xxs-4:nth-child(3n+1), | |
| .col-xxs-6:nth-child(2n+1) { | |
| clear: none; | |
| } | |
| .col-md-1:nth-child(12n+1), | |
| .col-md-2:nth-child(6n+1), | |
| .col-md-3:nth-child(4n+1), | |
| .col-md-4:nth-child(3n+1), | |
| .col-md-6:nth-child(2n+1){ | |
| clear: left; | |
| } | |
| //================================================================= | |
| .col-md-0-5, | |
| .col-md-1-5, | |
| .col-md-2-5, | |
| .col-md-3-5, | |
| .col-md-4-5, | |
| .col-md-5-5, | |
| .col-md-6-5, | |
| .col-md-7-5, | |
| .col-md-8-5 { | |
| float: left; | |
| position: relative; | |
| min-height: 1px; | |
| padding-right: unit(15/16,rem); | |
| padding-left: unit(15/16,rem); | |
| } | |
| .col-md-0-5 { | |
| width: percentage((0.5 / 12)); | |
| } | |
| .col-md-offset-0-5 { | |
| margin-left: percentage((0.5 / 12)); | |
| } | |
| .col-md-pull-0-5 { | |
| right: percentage((0.5 / 12)); | |
| } | |
| .col-md-push-0-5 { | |
| left: percentage((0.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-1-5 { | |
| width: percentage((1.5 / 12)); | |
| } | |
| .col-md-pull-1-5 { | |
| right: percentage((1.5 / 12)); | |
| } | |
| .col-md-push-1-5 { | |
| left: percentage((1.5 / 12)); | |
| } | |
| .col-md-offset-1-5 { | |
| margin-left: percentage((1.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-2-5 { | |
| width: percentage((2.5 / 12)); | |
| } | |
| .col-md-pull-2-5 { | |
| right: percentage((2.5 / 12)); | |
| } | |
| .col-md-push-2-5 { | |
| left: percentage((2.5 / 12)); | |
| } | |
| .col-md-offset-2-5 { | |
| margin-left: percentage((2.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-3-5 { | |
| width: percentage((3.5 / 12)); | |
| } | |
| .col-md-pull-3-5 { | |
| right: percentage((3.5 / 12)); | |
| } | |
| .col-md-push-3-5 { | |
| left: percentage((3.5 / 12)); | |
| } | |
| .col-md-offset-3-5 { | |
| margin-left: percentage((3.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-4-5 { | |
| width: percentage((4.5 / 12)); | |
| } | |
| .col-md-pull-4-5 { | |
| right: percentage((4.5 / 12)); | |
| } | |
| .col-md-push-4-5 { | |
| left: percentage((4.5 / 12)); | |
| } | |
| .col-md-offset-4-5 { | |
| margin-left: percentage((4.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-5-5 { | |
| width: percentage((5.5 / 12)); | |
| } | |
| .col-md-pull-5-5 { | |
| right: percentage((5.5 / 12)); | |
| } | |
| .col-md-push-5-5 { | |
| left: percentage((5.5 / 12)); | |
| } | |
| .col-md-offset-5-5 { | |
| margin-left: percentage((5.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-6-5 { | |
| width: percentage((6.5 / 12)); | |
| } | |
| .col-md-pull-6-5 { | |
| right: percentage((6.5 / 12)); | |
| } | |
| .col-md-push-6-5 { | |
| left: percentage((6.5 / 12)); | |
| } | |
| .col-md-offset-6-5 { | |
| margin-left: percentage((6.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-7-5 { | |
| width: percentage((7.5 / 12)); | |
| } | |
| .col-md-pull-7-5 { | |
| right: percentage((7.5 / 12)); | |
| } | |
| .col-md-push-7-5 { | |
| left: percentage((7.5 / 12)); | |
| } | |
| .col-md-offset-7-5 { | |
| margin-left: percentage((7.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-md-8-5 { | |
| width: percentage((8.5 / 12)); | |
| } | |
| .col-md-pull-8-5 { | |
| right: percentage((8.5 / 12)); | |
| } | |
| .col-md-push-8-5 { | |
| left: percentage((8.5 / 12)); | |
| } | |
| .col-md-offset-8-5 { | |
| margin-left: percentage((8.5 / 12)); | |
| } | |
| } | |
| //================================================================= | |
| //================================================================= | |
| @media @sm | |
| { | |
| // ============ clear fix =============== | |
| .col-lg-1:nth-child(12n+1), | |
| .col-lg-2:nth-child(6n+1), | |
| .col-lg-3:nth-child(4n+1), | |
| .col-lg-4:nth-child(3n+1), | |
| .col-lg-6:nth-child(2n+1), | |
| .col-md-1:nth-child(12n+1), | |
| .col-md-2:nth-child(6n+1), | |
| .col-md-3:nth-child(4n+1), | |
| .col-md-4:nth-child(3n+1), | |
| .col-md-6:nth-child(2n+1), | |
| .col-xs-1:nth-child(12n+1), | |
| .col-xs-2:nth-child(6n+1), | |
| .col-xs-3:nth-child(4n+1), | |
| .col-xs-4:nth-child(3n+1), | |
| .col-xs-6:nth-child(2n+1), | |
| .col-xxs-1:nth-child(12n+1), | |
| .col-xxs-2:nth-child(6n+1), | |
| .col-xxs-3:nth-child(4n+1), | |
| .col-xxs-4:nth-child(3n+1), | |
| .col-xxs-6:nth-child(2n+1) { | |
| clear: none; | |
| } | |
| .col-sm-1:nth-child(12n+1), | |
| .col-sm-2:nth-child(6n+1), | |
| .col-sm-3:nth-child(4n+1), | |
| .col-sm-4:nth-child(3n+1), | |
| .col-sm-6:nth-child(2n+1){ | |
| clear: left; | |
| } | |
| //================================================================= | |
| .col-sm-0-5, | |
| .col-sm-1-5, | |
| .col-sm-2-5, | |
| .col-sm-3-5, | |
| .col-sm-4-5, | |
| .col-sm-5-5, | |
| .col-sm-6-5, | |
| .col-sm-7-5, | |
| .col-sm-8-5 { | |
| float: left; | |
| position: relative; | |
| min-height: 1px; | |
| padding-right: unit(15/16,rem); | |
| padding-left: unit(15/16,rem); | |
| } | |
| .col-sm-0-5 { | |
| width: percentage((0.5 / 12)); | |
| } | |
| .col-sm-offset-0-5 { | |
| margin-left: percentage((0.5 / 12)); | |
| } | |
| .col-sm-pull-0-5 { | |
| right: percentage((0.5 / 12)); | |
| } | |
| .col-sm-push-0-5 { | |
| left: percentage((0.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-1-5 { | |
| width: percentage((1.5 / 12)); | |
| } | |
| .col-sm-pull-1-5 { | |
| right: percentage((1.5 / 12)); | |
| } | |
| .col-sm-push-1-5 { | |
| left: percentage((1.5 / 12)); | |
| } | |
| .col-sm-offset-1-5 { | |
| margin-left: percentage((1.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-2-5 { | |
| width: percentage((2.5 / 12)); | |
| } | |
| .col-sm-pull-2-5 { | |
| right: percentage((2.5 / 12)); | |
| } | |
| .col-sm-push-2-5 { | |
| left: percentage((2.5 / 12)); | |
| } | |
| .col-sm-offset-2-5 { | |
| margin-left: percentage((2.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-3-5 { | |
| width: percentage((3.5 / 12)); | |
| } | |
| .col-sm-pull-3-5 { | |
| right: percentage((3.5 / 12)); | |
| } | |
| .col-sm-push-3-5 { | |
| left: percentage((3.5 / 12)); | |
| } | |
| .col-sm-offset-3-5 { | |
| margin-left: percentage((3.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-4-5 { | |
| width: percentage((4.5 / 12)); | |
| } | |
| .col-sm-pull-4-5 { | |
| right: percentage((4.5 / 12)); | |
| } | |
| .col-sm-push-4-5 { | |
| left: percentage((4.5 / 12)); | |
| } | |
| .col-sm-offset-4-5 { | |
| margin-left: percentage((4.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-5-5 { | |
| width: percentage((5.5 / 12)); | |
| } | |
| .col-sm-pull-5-5 { | |
| right: percentage((5.5 / 12)); | |
| } | |
| .col-sm-push-5-5 { | |
| left: percentage((5.5 / 12)); | |
| } | |
| .col-sm-offset-5-5 { | |
| margin-left: percentage((5.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-6-5 { | |
| width: percentage((6.5 / 12)); | |
| } | |
| .col-sm-pull-6-5 { | |
| right: percentage((6.5 / 12)); | |
| } | |
| .col-sm-push-6-5 { | |
| left: percentage((6.5 / 12)); | |
| } | |
| .col-sm-offset-6-5 { | |
| margin-left: percentage((6.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-7-5 { | |
| width: percentage((7.5 / 12)); | |
| } | |
| .col-sm-pull-7-5 { | |
| right: percentage((7.5 / 12)); | |
| } | |
| .col-sm-push-7-5 { | |
| left: percentage((7.5 / 12)); | |
| } | |
| .col-sm-offset-7-5 { | |
| margin-left: percentage((7.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-sm-8-5 { | |
| width: percentage((8.5 / 12)); | |
| } | |
| .col-sm-pull-8-5 { | |
| right: percentage((8.5 / 12)); | |
| } | |
| .col-sm-push-8-5 { | |
| left: percentage((8.5 / 12)); | |
| } | |
| .col-sm-offset-8-5 { | |
| margin-left: percentage((8.5 / 12)); | |
| } | |
| } | |
| //================================================================= | |
| //================================================================= | |
| @media @xs | |
| { | |
| // ============ clear fix =============== | |
| .col-lg-1:nth-child(12n+1), | |
| .col-lg-2:nth-child(6n+1), | |
| .col-lg-3:nth-child(4n+1), | |
| .col-lg-4:nth-child(3n+1), | |
| .col-lg-6:nth-child(2n+1), | |
| .col-md-1:nth-child(12n+1), | |
| .col-md-2:nth-child(6n+1), | |
| .col-md-3:nth-child(4n+1), | |
| .col-md-4:nth-child(3n+1), | |
| .col-md-6:nth-child(2n+1), | |
| .col-sm-1:nth-child(12n+1), | |
| .col-sm-2:nth-child(6n+1), | |
| .col-sm-3:nth-child(4n+1), | |
| .col-sm-4:nth-child(3n+1), | |
| .col-sm-6:nth-child(2n+1), | |
| .col-xxs-1:nth-child(12n+1), | |
| .col-xxs-2:nth-child(6n+1), | |
| .col-xxs-3:nth-child(4n+1), | |
| .col-xxs-4:nth-child(3n+1), | |
| .col-xxs-6:nth-child(2n+1) { | |
| clear: none; | |
| } | |
| .col-xs-1:nth-child(12n+1), | |
| .col-xs-2:nth-child(6n+1), | |
| .col-xs-3:nth-child(4n+1), | |
| .col-xs-4:nth-child(3n+1), | |
| .col-xs-6:nth-child(2n+1){ | |
| clear: left; | |
| } | |
| //================================================================= | |
| .col-xs-0-5, | |
| .col-xs-1-5, | |
| .col-xs-2-5, | |
| .col-xs-3-5, | |
| .col-xs-4-5, | |
| .col-xs-5-5, | |
| .col-xs-6-5, | |
| .col-xs-7-5, | |
| .col-xs-8-5 { | |
| float: left; | |
| position: relative; | |
| min-height: 1px; | |
| padding-right: unit(15/16,rem); | |
| padding-left: unit(15/16,rem); | |
| } | |
| .col-xs-0-5 { | |
| width: percentage((0.5 / 12)); | |
| } | |
| .col-xs-offset-0-5 { | |
| margin-left: percentage((0.5 / 12)); | |
| } | |
| .col-xs-pull-0-5 { | |
| right: percentage((0.5 / 12)); | |
| } | |
| .col-xs-push-0-5 { | |
| left: percentage((0.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-1-5 { | |
| width: percentage((1.5 / 12)); | |
| } | |
| .col-xs-pull-1-5 { | |
| right: percentage((1.5 / 12)); | |
| } | |
| .col-xs-push-1-5 { | |
| left: percentage((1.5 / 12)); | |
| } | |
| .col-xs-offset-1-5 { | |
| margin-left: percentage((1.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-2-5 { | |
| width: percentage((2.5 / 12)); | |
| } | |
| .col-xs-pull-2-5 { | |
| right: percentage((2.5 / 12)); | |
| } | |
| .col-xs-push-2-5 { | |
| left: percentage((2.5 / 12)); | |
| } | |
| .col-xs-offset-2-5 { | |
| margin-left: percentage((2.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-3-5 { | |
| width: percentage((3.5 / 12)); | |
| } | |
| .col-xs-pull-3-5 { | |
| right: percentage((3.5 / 12)); | |
| } | |
| .col-xs-push-3-5 { | |
| left: percentage((3.5 / 12)); | |
| } | |
| .col-xs-offset-3-5 { | |
| margin-left: percentage((3.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-4-5 { | |
| width: percentage((4.5 / 12)); | |
| } | |
| .col-xs-pull-4-5 { | |
| right: percentage((4.5 / 12)); | |
| } | |
| .col-xs-push-4-5 { | |
| left: percentage((4.5 / 12)); | |
| } | |
| .col-xs-offset-4-5 { | |
| margin-left: percentage((4.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-5-5 { | |
| width: percentage((5.5 / 12)); | |
| } | |
| .col-xs-pull-5-5 { | |
| right: percentage((5.5 / 12)); | |
| } | |
| .col-xs-push-5-5 { | |
| left: percentage((5.5 / 12)); | |
| } | |
| .col-xs-offset-5-5 { | |
| margin-left: percentage((5.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-6-5 { | |
| width: percentage((6.5 / 12)); | |
| } | |
| .col-xs-pull-6-5 { | |
| right: percentage((6.5 / 12)); | |
| } | |
| .col-xs-push-6-5 { | |
| left: percentage((6.5 / 12)); | |
| } | |
| .col-xs-offset-6-5 { | |
| margin-left: percentage((6.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-7-5 { | |
| width: percentage((7.5 / 12)); | |
| } | |
| .col-xs-pull-7-5 { | |
| right: percentage((7.5 / 12)); | |
| } | |
| .col-xs-push-7-5 { | |
| left: percentage((7.5 / 12)); | |
| } | |
| .col-xs-offset-7-5 { | |
| margin-left: percentage((7.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xs-8-5 { | |
| width: percentage((8.5 / 12)); | |
| } | |
| .col-xs-pull-8-5 { | |
| right: percentage((8.5 / 12)); | |
| } | |
| .col-xs-push-8-5 { | |
| left: percentage((8.5 / 12)); | |
| } | |
| .col-xs-offset-8-5 { | |
| margin-left: percentage((8.5 / 12)); | |
| } | |
| } | |
| //================================================================= | |
| //================================================================= | |
| @media @xxs | |
| { | |
| // ============ clear fix =============== | |
| .col-lg-1:nth-child(12n+1), | |
| .col-lg-2:nth-child(6n+1), | |
| .col-lg-3:nth-child(4n+1), | |
| .col-lg-4:nth-child(3n+1), | |
| .col-lg-6:nth-child(2n+1), | |
| .col-md-1:nth-child(12n+1), | |
| .col-md-2:nth-child(6n+1), | |
| .col-md-3:nth-child(4n+1), | |
| .col-md-4:nth-child(3n+1), | |
| .col-md-6:nth-child(2n+1), | |
| .col-sm-1:nth-child(12n+1), | |
| .col-sm-2:nth-child(6n+1), | |
| .col-sm-3:nth-child(4n+1), | |
| .col-sm-4:nth-child(3n+1), | |
| .col-sm-6:nth-child(2n+1), | |
| .col-xs-1:nth-child(12n+1), | |
| .col-xs-2:nth-child(6n+1), | |
| .col-xs-3:nth-child(4n+1), | |
| .col-xs-4:nth-child(3n+1), | |
| .col-xs-6:nth-child(2n+1) { | |
| clear: none; | |
| } | |
| .col-xxs-1:nth-child(12n+1), | |
| .col-xxs-2:nth-child(6n+1), | |
| .col-xxs-3:nth-child(4n+1), | |
| .col-xxs-4:nth-child(3n+1), | |
| .col-xxs-6:nth-child(2n+1){ | |
| clear: left; | |
| } | |
| //================================================================= | |
| .col-xxs-0-5, | |
| .col-xxs-1, | |
| .col-xxs-1-5, | |
| .col-xxs-2, | |
| .col-xxs-2-5, | |
| .col-xxs-3, | |
| .col-xxs-3-5, | |
| .col-xxs-4, | |
| .col-xxs-4-5, | |
| .col-xxs-5, | |
| .col-xxs-5-5, | |
| .col-xxs-6, | |
| .col-xxs-6-5, | |
| .col-xxs-7, | |
| .col-xxs-7-5, | |
| .col-xxs-8, | |
| .col-xxs-8-5, | |
| .col-xxs-9, | |
| .col-xxs-10, | |
| .col-xxs-11, | |
| .col-xxs-12 { | |
| float: left; | |
| position: relative; | |
| min-height: 1px; | |
| padding-right: unit(15/16,rem); | |
| padding-left: unit(15/16,rem); | |
| } | |
| //================================================================= | |
| .col-xxs-pull-0 { | |
| right: auto; | |
| } | |
| .col-xxs-push-0 { | |
| left: auto; | |
| } | |
| .col-xxs-offset-0 { | |
| margin-left: 0; | |
| } | |
| //================================================================= | |
| .col-xxs-0-5 { | |
| width: percentage((0.5 / 12)); | |
| } | |
| .col-xxs-offset-0-5 { | |
| margin-left: percentage((0.5 / 12)); | |
| } | |
| .col-xxs-pull-0-5 { | |
| right: percentage((0.5 / 12)); | |
| } | |
| .col-xxs-push-0-5 { | |
| left: percentage((0.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-1 { | |
| width: percentage((1 / 12)); | |
| } | |
| .col-xxs-push-1 { | |
| left: percentage((1 / 12)); | |
| } | |
| .col-xxs-pull-1 { | |
| right: percentage((1 / 12)); | |
| } | |
| .col-xxs-offset-1 { | |
| margin-left: percentage((1 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-1-5 { | |
| width: percentage((1.5 / 12)); | |
| } | |
| .col-xxs-pull-1-5 { | |
| right: percentage((1.5 / 12)); | |
| } | |
| .col-xxs-push-1-5 { | |
| left: percentage((1.5 / 12)); | |
| } | |
| .col-xxs-offset-1-5 { | |
| margin-left: percentage((1.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-2 { | |
| width: percentage((2 / 12)); | |
| } | |
| .col-xxs-pull-2 { | |
| right: percentage((2 / 12)); | |
| } | |
| .col-xxs-push-2 { | |
| left: percentage((2 / 12)); | |
| } | |
| .col-xxs-offset-2 { | |
| margin-left: percentage((2 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-2-5 { | |
| width: percentage((2.5 / 12)); | |
| } | |
| .col-xxs-pull-2-5 { | |
| right: percentage((2.5 / 12)); | |
| } | |
| .col-xxs-push-2-5 { | |
| left: percentage((2.5 / 12)); | |
| } | |
| .col-xxs-offset-2-5 { | |
| margin-left: percentage((2.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-3 { | |
| width: percentage((3 / 12)); | |
| } | |
| .col-xxs-pull-3 { | |
| right: percentage((3 / 12)); | |
| } | |
| .col-xxs-push-3 { | |
| left: percentage((3 / 12)); | |
| } | |
| .col-xxs-offset-3 { | |
| margin-left: percentage((3 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-3-5 { | |
| width: percentage((3.5 / 12)); | |
| } | |
| .col-xxs-pull-3-5 { | |
| right: percentage((3.5 / 12)); | |
| } | |
| .col-xxs-push-3-5 { | |
| left: percentage((3.5 / 12)); | |
| } | |
| .col-xxs-offset-3-5 { | |
| margin-left: percentage((3.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-4 { | |
| width: percentage((4 / 12)); | |
| } | |
| .col-xxs-pull-4 { | |
| right: percentage((4 / 12)); | |
| } | |
| .col-xxs-push-4 { | |
| left: percentage((4 / 12)); | |
| } | |
| .col-xxs-offset-4 { | |
| margin-left: percentage((4 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-4-5 { | |
| width: percentage((4.5 / 12)); | |
| } | |
| .col-xxs-pull-4-5 { | |
| right: percentage((4.5 / 12)); | |
| } | |
| .col-xxs-push-4-5 { | |
| left: percentage((4.5 / 12)); | |
| } | |
| .col-xxs-offset-4-5 { | |
| margin-left: percentage((4.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-5 { | |
| width: percentage((5 / 12)); | |
| } | |
| .col-xxs-pull-5 { | |
| right: percentage((5 / 12)); | |
| } | |
| .col-xxs-push-5 { | |
| left: percentage((5 / 12)); | |
| } | |
| .col-xxs-offset-5 { | |
| margin-left: percentage((5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-5-5 { | |
| width: percentage((5.5 / 12)); | |
| } | |
| .col-xxs-pull-5-5 { | |
| right: percentage((5.5 / 12)); | |
| } | |
| .col-xxs-push-5-5 { | |
| left: percentage((5.5 / 12)); | |
| } | |
| .col-xxs-offset-5-5 { | |
| margin-left: percentage((5.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-6 { | |
| width: percentage((6 / 12)); | |
| } | |
| .col-xxs-pull-6 { | |
| right: percentage((6 / 12)); | |
| } | |
| .col-xxs-push-6 { | |
| left: percentage((6 / 12)); | |
| } | |
| .col-xxs-offset-6 { | |
| margin-left: percentage((6 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-6-5 { | |
| width: percentage((6.5 / 12)); | |
| } | |
| .col-xxs-pull-6-5 { | |
| right: percentage((6.5 / 12)); | |
| } | |
| .col-xxs-push-6-5 { | |
| left: percentage((6.5 / 12)); | |
| } | |
| .col-xxs-offset-6-5 { | |
| margin-left: percentage((6.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-7 { | |
| width: percentage((7 / 12)); | |
| } | |
| .col-xxs-pull-7 { | |
| right: percentage((7 / 12)); | |
| } | |
| .col-xxs-push-7 { | |
| left: percentage((7 / 12)); | |
| } | |
| .col-xxs-offset-7 { | |
| margin-left: percentage((7 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-7-5 { | |
| width: percentage((7.5 / 12)); | |
| } | |
| .col-xxs-pull-7-5 { | |
| right: percentage((7.5 / 12)); | |
| } | |
| .col-xxs-push-7-5 { | |
| left: percentage((7.5 / 12)); | |
| } | |
| .col-xxs-offset-7-5 { | |
| margin-left: percentage((7.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-8 { | |
| width: percentage((8 / 12)); | |
| } | |
| .col-xxs-pull-8 { | |
| right: percentage((8 / 12)); | |
| } | |
| .col-xxs-push-8 { | |
| left: percentage((8 / 12)); | |
| } | |
| .col-xxs-offset-8 { | |
| margin-left: percentage((8 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-8-5 { | |
| width: percentage((8.5 / 12)); | |
| } | |
| .col-xxs-pull-8-5 { | |
| right: percentage((8.5 / 12)); | |
| } | |
| .col-xxs-push-8-5 { | |
| left: percentage((8.5 / 12)); | |
| } | |
| .col-xxs-offset-8-5 { | |
| margin-left: percentage((8.5 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-9 { | |
| width: percentage((9 / 12)); | |
| } | |
| .col-xxs-pull-9 { | |
| right: percentage((9 / 12)); | |
| } | |
| .col-xxs-push-9 { | |
| left: percentage((9 / 12)); | |
| } | |
| .col-xxs-offset-9 { | |
| margin-left: percentage((9 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-10 { | |
| width: percentage((10 / 12)); | |
| } | |
| .col-xxs-pull-10 { | |
| right: percentage((10 / 12)); | |
| } | |
| .col-xxs-push-10 { | |
| left: percentage((10 / 12)); | |
| } | |
| .col-xxs-offset-10 { | |
| margin-left: percentage((10 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-11 { | |
| width: percentage((11 / 12)); | |
| } | |
| .col-xxs-pull-11 { | |
| right: percentage((11 / 12)); | |
| } | |
| .col-xxs-push-11 { | |
| left: percentage((11 / 12)); | |
| } | |
| .col-xxs-offset-11 { | |
| margin-left: percentage((11 / 12)); | |
| } | |
| //================================================================= | |
| .col-xxs-12 { | |
| width: percentage((12 / 12)); | |
| } | |
| .col-xxs-pull-12 { | |
| right: percentage((12 / 12)); | |
| } | |
| .col-xxs-push-12 { | |
| left: percentage((12 / 12)); | |
| } | |
| .col-xxs-offset-12 { | |
| margin-left: percentage((12 / 12)); | |
| } | |
| } | |
| // visible & hidden | |
| // dont use the .visible-? ,instead use the .visible-?-? | |
| //============================================================================= | |
| // for xs | |
| .visible-xs { | |
| @media @xs { | |
| .responsive-visibility(); | |
| } | |
| } | |
| .visible-xs-block { | |
| @media @xs { | |
| display: block !important; | |
| } | |
| } | |
| .visible-xs-inline { | |
| @media @xs { | |
| display: inline !important; | |
| } | |
| } | |
| .visible-xs-inline-block { | |
| @media @xs { | |
| display: inline-block !important; | |
| } | |
| } | |
| .hidden-xs { | |
| @media @xs { | |
| .responsive-invisibility(); | |
| } | |
| } | |
| // for xxs | |
| .visible-xxs { | |
| @media @xxs { | |
| .responsive-visibility(); | |
| } | |
| } | |
| .visible-xxs-block { | |
| @media @xxs { | |
| display: block !important; | |
| } | |
| } | |
| .visible-xxs-inline { | |
| @media @xxs { | |
| display: inline !important; | |
| } | |
| } | |
| .visible-xxs-inline-block { | |
| @media @xxs { | |
| display: inline-block !important; | |
| } | |
| } | |
| .hidden-xxs { | |
| @media @xxs { | |
| .responsive-invisibility(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment