Skip to content

Instantly share code, notes, and snippets.

@kijtra
Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kijtra/8984167c7b4f23e54e25 to your computer and use it in GitHub Desktop.
Save kijtra/8984167c7b4f23e54e25 to your computer and use it in GitHub Desktop.
#CSS Bootstrap Helper Extends
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.text-bold{font-weight:bold}.text-unbold{font-weight:normal}.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-size-base{font-size:14px}.font-size-small{font-size:12px}.font-size-large{font-size:18px}.font-size-h1{font-size:36px}.font-size-h2{font-size:30px}.font-size-h3{font-size:24px}.font-size-h4{font-size:18px}.font-size-h5{font-size:14px}.font-size-h6{font-size:12px}.line-height-base{line-height:1.42857143}.line-height-computed{line-height:20px}.pull-none{display:block;float:none !important}.border-radius-none{border-radius:0}.margin-v-xs{margin-top:6px;margin-bottom:6px}.margin-v-sm{margin-top:12px;margin-bottom:12px}.margin-v-md{margin-top:16px;margin-bottom:16px}.margin-v-lg{margin-top:20px;margin-bottom:20px}.margin-v-auto{margin-top:auto;margin-bottom:auto}.margin-v-none{margin-top:0;margin-bottom:0}.margin-h-xs{margin-left:6px;margin-right:6px}.margin-h-sm{margin-left:12px;margin-right:12px}.margin-h-md{margin-left:16px;margin-right:16px}.margin-h-lg{margin-left:20px;margin-right:20px}.margin-h-auto{margin-left:auto;margin-right:auto}.margin-h-none{margin-left:0;margin-right:0}.margin-top-xs{margin-top:6px}.margin-top-sm{margin-top:12px}.margin-top-md{margin-top:16px}.margin-top-lg{margin-top:20px}.margin-top-auto{margin-top:auto}.margin-top-none{margin-top:0}.margin-right-xs{margin-right:6px}.margin-right-sm{margin-right:12px}.margin-right-md{margin-right:16px}.margin-right-lg{margin-right:20px}.margin-right-auto{margin-right:auto}.margin-right-none{margin-right:0}.margin-bottom-xs{margin-bottom:6px}.margin-bottom-sm{margin-bottom:12px}.margin-bottom-md{margin-bottom:16px}.margin-bottom-lg{margin-bottom:20px}.margin-bottom-auto{margin-bottom:auto}.margin-bottom-none{margin-bottom:0}.margin-left-xs{margin-left:6px}.margin-left-sm{margin-left:12px}.margin-left-md{margin-left:16px}.margin-left-lg{margin-left:20px}.margin-left-auto{margin-left:auto}.margin-left-none{margin-left:0}.padding-v-xs{padding-top:6px;padding-bottom:6px}.padding-v-sm{padding-top:12px;padding-bottom:12px}.padding-v-md{padding-top:16px;padding-bottom:16px}.padding-v-lg{padding-top:20px;padding-bottom:20px}.padding-v-auto{padding-top:auto;padding-bottom:auto}.padding-v-none{padding-top:0;padding-bottom:0}.padding-h-xs{padding-left:6px;padding-right:6px}.padding-h-sm{padding-left:12px;padding-right:12px}.padding-h-md{padding-left:16px;padding-right:16px}.padding-h-lg{padding-left:20px;padding-right:20px}.padding-h-auto{padding-left:auto;padding-right:auto}.padding-h-none{padding-left:0;padding-right:0}.padding-top-xs{padding-top:6px}.padding-top-sm{padding-top:12px}.padding-top-md{padding-top:16px}.padding-top-lg{padding-top:20px}.padding-top-auto{padding-top:auto}.padding-top-none{padding-top:0}.padding-right-xs{padding-right:6px}.padding-right-sm{padding-right:12px}.padding-right-md{padding-right:16px}.padding-right-lg{padding-right:20px}.padding-right-auto{padding-right:auto}.padding-right-none{padding-right:0}.padding-bottom-xs{padding-bottom:6px}.padding-bottom-sm{padding-bottom:12px}.padding-bottom-md{padding-bottom:16px}.padding-bottom-lg{padding-bottom:20px}.padding-bottom-auto{padding-bottom:auto}.padding-bottom-none{padding-bottom:0}.padding-left-xs{padding-left:6px}.padding-left-sm{padding-left:12px}.padding-left-md{padding-left:16px}.padding-left-lg{padding-left:20px}.padding-left-auto{padding-left:auto}.padding-left-none{padding-left:0}@media (max-width:767px){.text-center-xs{text-align:center}.text-left-xs{text-align:left}.text-right-xs{text-align:right}.text-bold-xs{font-weight:bold}.text-unbold-xs{font-weight:normal}.text-hide-xs{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-overflow-xs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-lowercase-xs{text-transform:lowercase}.text-uppercase-xs{text-transform:uppercase}.text-capitalize-xs{text-transform:capitalize}.text-muted-xs{color:#777}.text-primary-xs{color:#337ab7}a.text-primary-xs:hover{color:#286090}.text-success-xs{color:#3c763d}a.text-success-xs:hover{color:#2b542c}.text-info-xs{color:#31708f}a.text-info-xs:hover{color:#245269}.text-warning-xs{color:#8a6d3b}a.text-warning-xs:hover{color:#66512c}.text-danger-xs{color:#a94442}a.text-danger-xs:hover{color:#843534}.font-size-base-xs{font-size:14px}.font-size-small-xs{font-size:12px}.font-size-large-xs{font-size:18px}.font-size-h1-xs{font-size:36px}.font-size-h2-xs{font-size:30px}.font-size-h3-xs{font-size:24px}.font-size-h4-xs{font-size:18px}.font-size-h5-xs{font-size:14px}.font-size-h6-xs{font-size:12px}.line-height-base-xs{line-height:1.42857143}.line-height-computed-xs{line-height:20px}.bg-primary-xs{background-color:#337ab7;color:#fff}a.bg-primary-xs:hover{background-color:#286090}.bg-success-xs{background-color:#dff0d8}a.bg-success-xs:hover{background-color:#c1e2b3}.bg-info-xs{background-color:#d9edf7}a.bg-info-xs:hover{background-color:#afd9ee}.bg-warning-xs{background-color:#fcf8e3}a.bg-warning-xs:hover{background-color:#f7ecb5}.bg-danger-xs{background-color:#f2dede}a.bg-danger-xs:hover{background-color:#e4b9b9}.pull-left-xs{float:left !important}.pull-right-xs{float:right !important}.pull-none-xs{display:block;float:none !important}.center-block-xs{display:block;margin-left:auto;margin-right:auto}}@media (min-width:768px){.text-center-sm{text-align:center}.text-left-sm{text-align:left}.text-right-sm{text-align:right}.text-bold-sm{font-weight:bold}.text-unbold-sm{font-weight:normal}.text-hide-sm{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-overflow-sm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-lowercase-sm{text-transform:lowercase}.text-uppercase-sm{text-transform:uppercase}.text-capitalize-sm{text-transform:capitalize}.text-muted-sm{color:#777}.text-primary-sm{color:#337ab7}a.text-primary-sm:hover{color:#286090}.text-success-sm{color:#3c763d}a.text-success-sm:hover{color:#2b542c}.text-info-sm{color:#31708f}a.text-info-sm:hover{color:#245269}.text-warning-sm{color:#8a6d3b}a.text-warning-sm:hover{color:#66512c}.text-danger-sm{color:#a94442}a.text-danger-sm:hover{color:#843534}.font-size-base-sm{font-size:14px}.font-size-small-sm{font-size:12px}.font-size-large-sm{font-size:18px}.font-size-h1-sm{font-size:36px}.font-size-h2-sm{font-size:30px}.font-size-h3-sm{font-size:24px}.font-size-h4-sm{font-size:18px}.font-size-h5-sm{font-size:14px}.font-size-h6-sm{font-size:12px}.line-height-base-sm{line-height:1.42857143}.line-height-computed-sm{line-height:20px}.bg-primary-sm{background-color:#337ab7;color:#fff}a.bg-primary-sm:hover{background-color:#286090}.bg-success-sm{background-color:#dff0d8}a.bg-success-sm:hover{background-color:#c1e2b3}.bg-info-sm{background-color:#d9edf7}a.bg-info-sm:hover{background-color:#afd9ee}.bg-warning-sm{background-color:#fcf8e3}a.bg-warning-sm:hover{background-color:#f7ecb5}.bg-danger-sm{background-color:#f2dede}a.bg-danger-sm:hover{background-color:#e4b9b9}.pull-left-sm{float:left !important}.pull-right-sm{float:right !important}.pull-none-sm{display:block;float:none !important}.center-block-sm{display:block;margin-left:auto;margin-right:auto}}@media (min-width:992px){.text-center-md{text-align:center}.text-left-md{text-align:left}.text-right-md{text-align:right}.text-bold-md{font-weight:bold}.text-unbold-md{font-weight:normal}.text-hide-md{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-overflow-md{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-lowercase-md{text-transform:lowercase}.text-uppercase-md{text-transform:uppercase}.text-capitalize-md{text-transform:capitalize}.text-muted-md{color:#777}.text-primary-md{color:#337ab7}a.text-primary-md:hover{color:#286090}.text-success-md{color:#3c763d}a.text-success-md:hover{color:#2b542c}.text-info-md{color:#31708f}a.text-info-md:hover{color:#245269}.text-warning-md{color:#8a6d3b}a.text-warning-md:hover{color:#66512c}.text-danger-md{color:#a94442}a.text-danger-md:hover{color:#843534}.font-size-base-md{font-size:14px}.font-size-small-md{font-size:12px}.font-size-large-md{font-size:18px}.font-size-h1-md{font-size:36px}.font-size-h2-md{font-size:30px}.font-size-h3-md{font-size:24px}.font-size-h4-md{font-size:18px}.font-size-h5-md{font-size:14px}.font-size-h6-md{font-size:12px}.line-height-base-md{line-height:1.42857143}.line-height-computed-md{line-height:20px}.bg-primary-md{background-color:#337ab7;color:#fff}a.bg-primary-md:hover{background-color:#286090}.bg-success-md{background-color:#dff0d8}a.bg-success-md:hover{background-color:#c1e2b3}.bg-info-md{background-color:#d9edf7}a.bg-info-md:hover{background-color:#afd9ee}.bg-warning-md{background-color:#fcf8e3}a.bg-warning-md:hover{background-color:#f7ecb5}.bg-danger-md{background-color:#f2dede}a.bg-danger-md:hover{background-color:#e4b9b9}.pull-left-md{float:left !important}.pull-right-md{float:right !important}.pull-none-md{display:block;float:none !important}.center-block-md{display:block;margin-left:auto;margin-right:auto}}@media (min-width:1200px){.text-center-lg{text-align:center}.text-left-lg{text-align:left}.text-right-lg{text-align:right}.text-bold-lg{font-weight:bold}.text-unbold-lg{font-weight:normal}.text-hide-lg{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-overflow-lg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-lowercase-lg{text-transform:lowercase}.text-uppercase-lg{text-transform:uppercase}.text-capitalize-lg{text-transform:capitalize}.text-muted-lg{color:#777}.text-primary-lg{color:#337ab7}a.text-primary-lg:hover{color:#286090}.text-success-lg{color:#3c763d}a.text-success-lg:hover{color:#2b542c}.text-info-lg{color:#31708f}a.text-info-lg:hover{color:#245269}.text-warning-lg{color:#8a6d3b}a.text-warning-lg:hover{color:#66512c}.text-danger-lg{color:#a94442}a.text-danger-lg:hover{color:#843534}.font-size-base-lg{font-size:14px}.font-size-small-lg{font-size:12px}.font-size-large-lg{font-size:18px}.font-size-h1-lg{font-size:36px}.font-size-h2-lg{font-size:30px}.font-size-h3-lg{font-size:24px}.font-size-h4-lg{font-size:18px}.font-size-h5-lg{font-size:14px}.font-size-h6-lg{font-size:12px}.line-height-base-lg{line-height:1.42857143}.line-height-computed-lg{line-height:20px}.bg-primary-lg{background-color:#337ab7;color:#fff}a.bg-primary-lg:hover{background-color:#286090}.bg-success-lg{background-color:#dff0d8}a.bg-success-lg:hover{background-color:#c1e2b3}.bg-info-lg{background-color:#d9edf7}a.bg-info-lg:hover{background-color:#afd9ee}.bg-warning-lg{background-color:#fcf8e3}a.bg-warning-lg:hover{background-color:#f7ecb5}.bg-danger-lg{background-color:#f2dede}a.bg-danger-lg:hover{background-color:#e4b9b9}.pull-left-lg{float:left !important}.pull-right-lg{float:right !important}.pull-none-lg{display:block;float:none !important}.center-block-lg{display:block;margin-left:auto;margin-right:auto}}
// Text Helpers
.text-bold { font-weight: bold; }
.text-unbold { font-weight: normal; }
.text-overflow { .text-overflow(); }
.font-size-base { font-size: @font-size-base; }
.font-size-small { font-size: @font-size-small; }
.font-size-large { font-size: @font-size-large; }
.font-size-h1 { font-size: @font-size-h1; }
.font-size-h2 { font-size: @font-size-h2; }
.font-size-h3 { font-size: @font-size-h3; }
.font-size-h4 { font-size: @font-size-h4; }
.font-size-h5 { font-size: @font-size-h5; }
.font-size-h6 { font-size: @font-size-h6; }
.line-height-base { line-height: @line-height-base; }
.line-height-computed { line-height: @line-height-computed; }
// Box Helpers
.pull-none {
display: block;
float: none !important;
}
.border-radius-none { border-radius: 0; }
.border-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
// Margin and Padding helpers
@margin-xs:6px;
@margin-sm:12px;
@margin-md:16px;
@margin-lg:20px;
.margin-v-xs { margin-top: @margin-xs; margin-bottom: @margin-xs; }
.margin-v-sm { margin-top: @margin-sm; margin-bottom: @margin-sm; }
.margin-v-md { margin-top: @margin-md; margin-bottom: @margin-md; }
.margin-v-lg { margin-top: @margin-lg; margin-bottom: @margin-lg; }
.margin-v-auto { margin-top: auto; margin-bottom: auto; }
.margin-v-none { margin-top: 0; margin-bottom: 0; }
.margin-h-xs { margin-left: @margin-xs; margin-right: @margin-xs; }
.margin-h-sm { margin-left: @margin-sm; margin-right: @margin-sm; }
.margin-h-md { margin-left: @margin-md; margin-right: @margin-md; }
.margin-h-lg { margin-left: @margin-lg; margin-right: @margin-lg; }
.margin-h-auto { margin-left: auto; margin-right: auto; }
.margin-h-none { margin-left: 0; margin-right: 0; }
.margin-top-xs { margin-top: @margin-xs; }
.margin-top-sm { margin-top: @margin-sm; }
.margin-top-md { margin-top: @margin-md; }
.margin-top-lg { margin-top: @margin-lg; }
.margin-top-auto { margin-top: auto; }
.margin-top-none { margin-top: 0; }
.margin-right-xs { margin-right: @margin-xs; }
.margin-right-sm { margin-right: @margin-sm; }
.margin-right-md { margin-right: @margin-md; }
.margin-right-lg { margin-right: @margin-lg; }
.margin-right-auto { margin-right: auto; }
.margin-right-none { margin-right: 0; }
.margin-bottom-xs { margin-bottom: @margin-xs; }
.margin-bottom-sm { margin-bottom: @margin-sm; }
.margin-bottom-md { margin-bottom: @margin-md; }
.margin-bottom-lg { margin-bottom: @margin-lg; }
.margin-bottom-auto { margin-bottom: auto; }
.margin-bottom-none { margin-bottom: 0; }
.margin-left-xs { margin-left: @margin-xs; }
.margin-left-sm { margin-left: @margin-sm; }
.margin-left-md { margin-left: @margin-md; }
.margin-left-lg { margin-left: @margin-lg; }
.margin-left-auto { margin-left: auto; }
.margin-left-none { margin-left: 0; }
.padding-v-xs { padding-top: @margin-xs; padding-bottom: @margin-xs; }
.padding-v-sm { padding-top: @margin-sm; padding-bottom: @margin-sm; }
.padding-v-md { padding-top: @margin-md; padding-bottom: @margin-md; }
.padding-v-lg { padding-top: @margin-lg; padding-bottom: @margin-lg; }
.padding-v-auto { padding-top: auto; padding-bottom: auto; }
.padding-v-none { padding-top: 0; padding-bottom: 0; }
.padding-h-xs { padding-left: @margin-xs; padding-right: @margin-xs; }
.padding-h-sm { padding-left: @margin-sm; padding-right: @margin-sm; }
.padding-h-md { padding-left: @margin-md; padding-right: @margin-md; }
.padding-h-lg { padding-left: @margin-lg; padding-right: @margin-lg; }
.padding-h-auto { padding-left: auto; padding-right: auto; }
.padding-h-none { padding-left: 0; padding-right: 0; }
.padding-top-xs { padding-top: @margin-xs; }
.padding-top-sm { padding-top: @margin-sm; }
.padding-top-md { padding-top: @margin-md; }
.padding-top-lg { padding-top: @margin-lg; }
.padding-top-auto { padding-top: auto; }
.padding-top-none { padding-top: 0; }
.padding-right-xs { padding-right: @margin-xs; }
.padding-right-sm { padding-right: @margin-sm; }
.padding-right-md { padding-right: @margin-md; }
.padding-right-lg { padding-right: @margin-lg; }
.padding-right-auto { padding-right: auto; }
.padding-right-none { padding-right: 0; }
.padding-bottom-xs { padding-bottom: @margin-xs; }
.padding-bottom-sm { padding-bottom: @margin-sm; }
.padding-bottom-md { padding-bottom: @margin-md; }
.padding-bottom-lg { padding-bottom: @margin-lg; }
.padding-bottom-auto { padding-bottom: auto; }
.padding-bottom-none { padding-bottom: 0; }
.padding-left-xs { padding-left: @margin-xs; }
.padding-left-sm { padding-left: @margin-sm; }
.padding-left-md { padding-left: @margin-md; }
.padding-left-lg { padding-left: @margin-lg; }
.padding-left-auto { padding-left: auto; }
.padding-left-none { padding-left: 0; }
// Responsive helpers
.responsive-extends(@size) {
.text-center-@{size} { text-align: center; }
.text-left-@{size} { text-align: left; }
.text-right-@{size} { text-align: right; }
.text-bold-@{size} { font-weight: bold; }
.text-unbold-@{size} { font-weight: normal; }
.text-hide-@{size} { .text-hide(); }
.text-overflow-@{size} { .text-overflow(); }
.text-lowercase-@{size} { text-transform: lowercase; }
.text-uppercase-@{size} { text-transform: uppercase; }
.text-capitalize-@{size} { text-transform: capitalize; }
// Contextual colors
.text-muted-@{size} { color: @text-muted; }
.text-primary-@{size} { .text-emphasis-variant(@brand-primary); }
.text-success-@{size} { .text-emphasis-variant(@state-success-text); }
.text-info-@{size} { .text-emphasis-variant(@state-info-text); }
.text-warning-@{size} { .text-emphasis-variant(@state-warning-text); }
.text-danger-@{size} { .text-emphasis-variant(@state-danger-text); }
.font-size-base-@{size} { font-size: @font-size-base; }
.font-size-small-@{size} { font-size: @font-size-small; }
.font-size-large-@{size} { font-size: @font-size-large; }
.font-size-h1-@{size} { font-size: @font-size-h1; }
.font-size-h2-@{size} { font-size: @font-size-h2; }
.font-size-h3-@{size} { font-size: @font-size-h3; }
.font-size-h4-@{size} { font-size: @font-size-h4; }
.font-size-h5-@{size} { font-size: @font-size-h5; }
.font-size-h6-@{size} { font-size: @font-size-h6; }
.line-height-base-@{size} { line-height: @line-height-base; }
.line-height-computed-@{size} { line-height: @line-height-computed; }
.bg-primary-@{size} { .bg-variant(@brand-primary); color: #fff; }
.bg-success-@{size} { .bg-variant(@state-success-bg); }
.bg-info-@{size} { .bg-variant(@state-info-bg); }
.bg-warning-@{size} { .bg-variant(@state-warning-bg); }
.bg-danger-@{size} { .bg-variant(@state-danger-bg); }
.pull-left-@{size} { float: left !important; }
.pull-right-@{size} { float: right !important; }
.pull-none-@{size} { display: block; float: none !important; }
.center-block-@{size} { .center-block(); }
}
@media (max-width: @screen-xs-max) {
.responsive-extends(xs);
}
@media (min-width: @screen-sm-min) {
.responsive-extends(sm);
}
@media (min-width: @screen-md-min) {
.responsive-extends(md);
}
@media (min-width: @screen-lg-min) {
.responsive-extends(lg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment