Commit e727973d authored by Mark Otto's avatar Mark Otto

Merge pull request #12204 from twbs/fix-8869

replace .visible-{size} with .visible-{size}-{display}
parents 309ef72e a7b0fa7e
...@@ -7230,6 +7230,21 @@ button.close { ...@@ -7230,6 +7230,21 @@ button.close {
display: none !important; display: none !important;
} }
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.visible-xs { .visible-xs {
display: block !important; display: block !important;
...@@ -7249,6 +7264,24 @@ button.close { ...@@ -7249,6 +7264,24 @@ button.close {
} }
} }
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991px) {
.visible-sm { .visible-sm {
display: block !important; display: block !important;
...@@ -7268,6 +7301,24 @@ button.close { ...@@ -7268,6 +7301,24 @@ button.close {
} }
} }
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) { @media (min-width: 992px) and (max-width: 1199px) {
.visible-md { .visible-md {
display: block !important; display: block !important;
...@@ -7287,6 +7338,24 @@ button.close { ...@@ -7287,6 +7338,24 @@ button.close {
} }
} }
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.visible-lg { .visible-lg {
display: block !important; display: block !important;
...@@ -7306,6 +7375,24 @@ button.close { ...@@ -7306,6 +7375,24 @@ button.close {
} }
} }
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (max-width: 767px) { @media (max-width: 767px) {
.hidden-xs { .hidden-xs {
display: none !important; display: none !important;
...@@ -7353,6 +7440,36 @@ button.close { ...@@ -7353,6 +7440,36 @@ button.close {
} }
} }
.visible-print-block {
display: none !important;
}
@media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
@media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
@media print { @media print {
.hidden-print { .hidden-print {
display: none !important; display: none !important;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff was suppressed by a .gitattributes entry.
...@@ -5869,6 +5869,20 @@ button.close { ...@@ -5869,6 +5869,20 @@ button.close {
.visible-lg { .visible-lg {
display: none !important; display: none !important;
} }
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.visible-xs { .visible-xs {
display: block !important; display: block !important;
...@@ -5884,6 +5898,21 @@ button.close { ...@@ -5884,6 +5898,21 @@ button.close {
display: table-cell !important; display: table-cell !important;
} }
} }
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991px) {
.visible-sm { .visible-sm {
display: block !important; display: block !important;
...@@ -5899,6 +5928,21 @@ button.close { ...@@ -5899,6 +5928,21 @@ button.close {
display: table-cell !important; display: table-cell !important;
} }
} }
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) { @media (min-width: 992px) and (max-width: 1199px) {
.visible-md { .visible-md {
display: block !important; display: block !important;
...@@ -5914,6 +5958,21 @@ button.close { ...@@ -5914,6 +5958,21 @@ button.close {
display: table-cell !important; display: table-cell !important;
} }
} }
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.visible-lg { .visible-lg {
display: block !important; display: block !important;
...@@ -5929,6 +5988,21 @@ button.close { ...@@ -5929,6 +5988,21 @@ button.close {
display: table-cell !important; display: table-cell !important;
} }
} }
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (max-width: 767px) { @media (max-width: 767px) {
.hidden-xs { .hidden-xs {
display: none !important; display: none !important;
...@@ -5967,6 +6041,30 @@ button.close { ...@@ -5967,6 +6041,30 @@ button.close {
display: table-cell !important; display: table-cell !important;
} }
} }
.visible-print-block {
display: none !important;
}
@media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
@media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
@media print { @media print {
.hidden-print { .hidden-print {
display: none !important; display: none !important;
......
This diff was suppressed by a .gitattributes entry.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/body{position:relative}.table code{font-size:13px;font-weight:400}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:40px;padding-bottom:40px;margin-top:100px;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}}.bs-docs-social{margin-bottom:20px;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:5px 8px;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}.bs-docs-masthead,.bs-docs-header{position:relative;padding:30px 15px;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding-top:80px;padding-bottom:80px}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:20px!important;margin:30px -30px -31px!important;overflow:hidden;font-size:13px!important;line-height:16px!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-width:1px!important;border-radius:4px}.bs-docs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;width:330px!important;padding:15px!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#428bca;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-sm-3{padding-right:1px;padding-left:1px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#999}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:hover,.bs-docs-sidebar .nav .nav>li>a:focus{padding-left:29px}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{padding-left:28px;font-weight:500}.back-to-top{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover{color:#563d7c;text-decoration:none}@media (min-width:768px){.back-to-top{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix-bottom .bs-docs-sidenav,.bs-docs-sidebar.affix .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix-bottom,.bs-docs-sidebar.affix{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border-left:3px solid #eee}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{background-color:#fff;border-radius:3px}.bs-callout-danger{background-color:#fdf7f7;border-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{background-color:#fcf8f2;border-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{background-color:#f4f8fa;border-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#428bca}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;background-color:#fafafa;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}}.bs-example .container{width:auto}.bs-example>p:last-child,.bs-example>ul:last-child,.bs-example>ol:last-child,.bs-example>blockquote:last-child,.bs-example>.form-control:last-child,.bs-example>.table:last-child,.bs-example>.navbar:last-child,.bs-example>.jumbotron:last-child,.bs-example>.alert:last-child,.bs-example>.panel:last-child,.bs-example>.list-group:last-child,.bs-example>.well:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}.bs-navbar-top-example{border-radius:0 0 4px 4px}.bs-navbar-bottom-example{border-radius:4px 4px 0 0}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs,.visible-on .col-xs-6 .visible-sm,.visible-on .col-xs-6 .visible-md,.visible-on .col-xs-6 .visible-lg,.hidden-on .col-xs-6 .visible-xs,.hidden-on .col-xs-6 .visible-sm,.hidden-on .col-xs-6 .visible-md,.hidden-on .col-xs-6 .visible-lg{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customizer-input{float:left;width:33.333333%;padding-right:15px;padding-left:15px}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:144px;height:144px}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999} */body{position:relative}.table code{font-size:13px;font-weight:400}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;font-weight:500;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-docs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-docs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#fff;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#563d7c}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#463265;background-color:#f9f9f9}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#563d7c}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#f9f9f9;border-color:#f9f9f9}.bs-docs-footer{padding-top:40px;padding-bottom:40px;margin-top:100px;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}}.bs-docs-social{margin-bottom:20px;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:5px 8px;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}.bs-docs-masthead,.bs-docs-header{position:relative;padding:30px 15px;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);background-repeat:repeat-x}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 30px}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-docs-masthead .version{margin-top:-15px;margin-bottom:30px;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding-top:80px;padding-bottom:80px}.bs-docs-masthead h1{font-size:60px}.bs-docs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:30px}}.bs-docs-header{margin-bottom:40px;font-size:20px}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-docs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:20px!important;margin:30px -30px -31px!important;overflow:hidden;font-size:13px!important;line-height:16px!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-width:1px!important;border-radius:4px}.bs-docs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;width:330px!important;padding:15px!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:40px;padding-bottom:40px;font-size:16px;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:5px;font-size:30px;font-weight:400;color:#333}.half-rule{width:100px;margin:40px auto}.bs-docs-featurette h3{margin-bottom:5px;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-docs-featurette-img:hover{color:#428bca;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:15px}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-sm-3{padding-right:1px;padding-left:1px}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-docs-featurette{padding-top:100px;padding-bottom:100px}.bs-docs-featurette-title{font-size:40px}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-sidebar.affix{position:static}@media (min-width:768px){.bs-docs-sidebar{padding-left:20px}}.bs-docs-sidenav{margin-top:20px;margin-bottom:20px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#999}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>li>a:hover,.bs-docs-sidebar .nav .nav>li>a:focus{padding-left:29px}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{padding-left:28px;font-weight:500}.back-to-top{display:none;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:hover{color:#563d7c;text-decoration:none}@media (min-width:768px){.back-to-top{display:block}}@media (min-width:992px){.bs-docs-sidebar .nav>.active>ul{display:block}.bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom{width:213px}.bs-docs-sidebar.affix{position:fixed;top:20px}.bs-docs-sidebar.affix-bottom{position:absolute}.bs-docs-sidebar.affix-bottom .bs-docs-sidenav,.bs-docs-sidebar.affix .bs-docs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-docs-sidebar.affix-bottom,.bs-docs-sidebar.affix{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{padding-top:20px;margin-top:0}.bs-callout{padding:20px;margin:20px 0;border-left:3px solid #eee}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{background-color:#fff;border-radius:3px}.bs-callout-danger{background-color:#fdf7f7;border-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{background-color:#fcf8f2;border-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{background-color:#f4f8fa;border-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.color-swatches .gray-darker{background-color:#222}.color-swatches .gray-dark{background-color:#333}.color-swatches .gray{background-color:#555}.color-swatches .gray-light{background-color:#999}.color-swatches .gray-lighter{background-color:#eee}.color-swatches .brand-primary{background-color:#428bca}.color-swatches .brand-success{background-color:#5cb85c}.color-swatches .brand-warning{background-color:#f0ad4e}.color-swatches .brand-danger{background-color:#d9534f}.color-swatches .brand-info{background-color:#5bc0de}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#c7bfd3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:32px;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:20px;margin-top:6px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.show-grid{margin-bottom:15px}.show-grid [class^=col-]{padding-top:10px;padding-bottom:10px;background-color:#eee;background-color:rgba(86,61,124,.15);border:1px solid #ddd;border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;background-color:#fafafa;border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.05)}.bs-example:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:1px;content:"Example"}.bs-example+.highlight{margin:-15px -15px 15px;border-width:0 0 1px;border-radius:0}@media (min-width:768px){.bs-example{margin-right:0;margin-left:0;background-color:#fff;border-color:#ddd;border-width:1px;border-radius:4px 4px 0 0;-webkit-box-shadow:none;box-shadow:none}.bs-example+.highlight{margin-top:-16px;margin-right:0;margin-left:0;border-width:1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}}.bs-example .container{width:auto}.bs-example>p:last-child,.bs-example>ul:last-child,.bs-example>ol:last-child,.bs-example>blockquote:last-child,.bs-example>.form-control:last-child,.bs-example>.table:last-child,.bs-example>.navbar:last-child,.bs-example>.jumbotron:last-child,.bs-example>.alert:last-child,.bs-example>.panel:last-child,.bs-example>.list-group:last-child,.bs-example>.well:last-child,.bs-example>.progress:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0}.bs-example>p>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:15px 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:10px}.bs-example-form .input-group{margin-bottom:10px}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example:after{top:auto;bottom:15px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}.bs-navbar-top-example{border-radius:0 0 4px 4px}.bs-navbar-bottom-example{border-radius:4px 4px 0 0}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.highlight{padding:9px 14px;margin-bottom:14px;background-color:#f7f7f9;border:1px solid #e1e1e8;border-radius:4px}.highlight pre{padding:0;margin-top:0;margin-bottom:0;white-space:nowrap;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#333}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:5px}.responsive-utilities-test .col-xs-6{margin-bottom:10px}.responsive-utilities-test span{display:block;padding:15px 10px;font-size:14px;font-weight:700;line-height:1.1;text-align:center;border-radius:4px}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -10px 20px;overflow:hidden}.bs-glyphicons-list{padding-left:0;list-style:none}.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-right:0;margin-left:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{padding-top:30px;margin-top:0;margin-bottom:5px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:5px;font-size:12px}#less-section label{font-weight:400}.bs-customizer-input{float:left;width:33.333333%;padding-right:15px;padding-left:15px}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-4px;font-size:24px}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:5px}.bs-customizer-alert pre{margin:10px 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.bs-brand-item{padding:60px 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:144px;height:144px}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}.bs-brand-item .glyphicon{width:30px;height:30px;margin:10px auto -10px;line-height:30px;color:#fff;border-radius:50%}.bs-brand-item .glyphicon-ok{background-color:#5cb85c}.bs-brand-item .glyphicon-remove{background-color:#d9534f}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:60px}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}
\ No newline at end of file \ No newline at end of file
...@@ -1195,14 +1195,14 @@ h1[id] { ...@@ -1195,14 +1195,14 @@ h1[id] {
color: #999; color: #999;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.visible-on .col-xs-6 .visible-xs, .visible-on .col-xs-6 .visible-xs-block,
.visible-on .col-xs-6 .visible-sm, .visible-on .col-xs-6 .visible-sm-block,
.visible-on .col-xs-6 .visible-md, .visible-on .col-xs-6 .visible-md-block,
.visible-on .col-xs-6 .visible-lg, .visible-on .col-xs-6 .visible-lg-block,
.hidden-on .col-xs-6 .visible-xs, .hidden-on .col-xs-6 .visible-xs-block,
.hidden-on .col-xs-6 .visible-sm, .hidden-on .col-xs-6 .visible-sm-block,
.hidden-on .col-xs-6 .visible-md, .hidden-on .col-xs-6 .visible-md-block,
.hidden-on .col-xs-6 .visible-lg { .hidden-on .col-xs-6 .visible-lg-block {
color: #468847; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;
border: 1px solid #d6e9c6; border: 1px solid #d6e9c6;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -302,7 +302,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e ...@@ -302,7 +302,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height --> <!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div> </div>
</div> </div>
...@@ -315,7 +315,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e ...@@ -315,7 +315,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height --> <!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -332,7 +332,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e ...@@ -332,7 +332,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport --> <!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
...@@ -344,7 +344,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e ...@@ -344,7 +344,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport --> <!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
...@@ -2652,7 +2652,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2652,7 +2652,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="responsive-utilities" class="page-header">Responsive utilities</h1> <h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p> <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p> <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
<h2 id="responsive-utilities-classes">Available classes</h2> <h2 id="responsive-utilities-classes">Available classes</h2>
...@@ -2682,28 +2682,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2682,28 +2682,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th><code>.visible-xs</code></th> <th><code>.visible-xs-*</code></th>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
</tr> </tr>
<tr> <tr>
<th><code>.visible-sm</code></th> <th><code>.visible-sm-*</code></th>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
</tr> </tr>
<tr> <tr>
<th><code>.visible-md</code></th> <th><code>.visible-md-*</code></th>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
</tr> </tr>
<tr> <tr>
<th><code>.visible-lg</code></th> <th><code>.visible-lg-*</code></th>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
...@@ -2743,6 +2743,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2743,6 +2743,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table> </table>
</div> </div>
<p>As of v3.2, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Group of classes</th>
<th>CSS <code>display</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.visible-*-block</code></td>
<td><code>display: block;</code></td>
</tr>
<tr>
<td><code>.visible-*-inline</code></td>
<td><code>display: inline;</code></td>
</tr>
<tr>
<td><code>.visible-*-inline-block</code></td>
<td><code>display: inline-block;</code></td>
</tr>
</tbody>
</table>
</div>
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
<p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
<h2 id="responsive-utilities-print">Print classes</h2> <h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p> <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
...@@ -2750,14 +2777,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2750,14 +2777,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<table class="table table-bordered table-striped responsive-utilities"> <table class="table table-bordered table-striped responsive-utilities">
<thead> <thead>
<tr> <tr>
<th>Class</th> <th>Classes</th>
<th>Browser</th> <th>Browser</th>
<th>Print</th> <th>Print</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th><code>.visible-print</code></th> <th>
<code>.visible-print-block</code><br>
<code>.visible-print-inline</code><br>
<code>.visible-print-inline-block</code>
</th>
<td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td> <td class="is-visible">Visible</td>
</tr> </tr>
...@@ -2769,6 +2800,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2769,6 +2800,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</div> </div>
<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.1.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
<h2 id="responsive-utilities-tests">Test cases</h2> <h2 id="responsive-utilities-tests">Test cases</h2>
...@@ -2779,48 +2811,48 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2779,48 +2811,48 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="row responsive-utilities-test visible-on"> <div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span> <span class="hidden-xs">Extra small</span>
<span class="visible-xs">&#10004; Visible on x-small</span> <span class="visible-xs-block">&#10004; Visible on x-small</span>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-sm">Small</span> <span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Visible on small</span> <span class="visible-sm-block">&#10004; Visible on small</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-md">Medium</span> <span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Visible on medium</span> <span class="visible-md-block">&#10004; Visible on medium</span>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-lg">Large</span> <span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Visible on large</span> <span class="visible-lg-block">&#10004; Visible on large</span>
</div> </div>
</div> </div>
<div class="row responsive-utilities-test visible-on"> <div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span> <span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span> <span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-md hidden-lg">Medium and large</span> <span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-lg">&#10004; Visible on medium and large</span> <span class="visible-md-block visible-lg-block">&#10004; Visible on medium and large</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-md">Extra small and medium</span> <span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span> <span class="visible-xs-block visible-md-block">&#10004; Visible on x-small and medium</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-lg">Small and large</span> <span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-lg">&#10004; Visible on small and large</span> <span class="visible-sm-block visible-lg-block">&#10004; Visible on small and large</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-lg">Extra small and large</span> <span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span> <span class="visible-xs-block visible-lg-block">&#10004; Visible on x-small and large</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-md">Small and medium</span> <span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Visible on small and medium</span> <span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
</div> </div>
</div> </div>
...@@ -2829,48 +2861,48 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2829,48 +2861,48 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="row responsive-utilities-test hidden-on"> <div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span> <span class="hidden-xs">Extra small</span>
<span class="visible-xs">&#10004; Hidden on x-small</span> <span class="visible-xs-block">&#10004; Hidden on x-small</span>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-sm">Small</span> <span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Hidden on small</span> <span class="visible-sm-block">&#10004; Hidden on small</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-md">Medium</span> <span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Hidden on medium</span> <span class="visible-md-block">&#10004; Hidden on medium</span>
</div> </div>
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-lg">Large</span> <span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Hidden on large</span> <span class="visible-lg-block">&#10004; Hidden on large</span>
</div> </div>
</div> </div>
<div class="row responsive-utilities-test hidden-on"> <div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span> <span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-sm">&#10004; Hidden on x-small and small</span> <span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-md hidden-lg">Medium and large</span> <span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-lg">&#10004; Hidden on medium and large</span> <span class="visible-md-block visible-lg-block">&#10004; Hidden on medium and large</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-md">Extra small and medium</span> <span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-md">&#10004; Hidden on x-small and medium</span> <span class="visible-xs-block visible-md-block">&#10004; Hidden on x-small and medium</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-lg">Small and large</span> <span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-lg">&#10004; Hidden on small and large</span> <span class="visible-sm-block visible-lg-block">&#10004; Hidden on small and large</span>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-lg">Extra small and large</span> <span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-lg">&#10004; Hidden on x-small and large</span> <span class="visible-xs-block visible-lg-block">&#10004; Hidden on x-small and large</span>
</div> </div>
<div class="col-xs-6 col-sm-6"> <div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-md">Small and medium</span> <span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Hidden on small and medium</span> <span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
</div> </div>
</div> </div>
</div> </div>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -774,6 +774,7 @@ ...@@ -774,6 +774,7 @@
// Responsive utilities // Responsive utilities
// //
// More easily include all the states for responsive-utilities.less. // More easily include all the states for responsive-utilities.less.
// Note: Deprecated .responsive-visibility() as of v3.2.0
.responsive-visibility() { .responsive-visibility() {
display: block !important; display: block !important;
table& { display: table; } table& { display: table; }
...@@ -782,6 +783,7 @@ ...@@ -782,6 +783,7 @@
td& { display: table-cell !important; } td& { display: table-cell !important; }
} }
// Note: Deprecated .responsive-invisibility() as of v3.2.0
.responsive-invisibility() { .responsive-invisibility() {
display: none !important; display: none !important;
} }
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
// Visibility utilities // Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs, .visible-xs,
.visible-sm, .visible-sm,
.visible-md, .visible-md,
...@@ -30,26 +31,104 @@ ...@@ -30,26 +31,104 @@
.responsive-invisibility(); .responsive-invisibility();
} }
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
.visible-xs { .visible-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.visible-xs-block {
@media (max-width: @screen-xs-max) {
display: block !important;
}
}
.visible-xs-inline {
@media (max-width: @screen-xs-max) {
display: inline !important;
}
}
.visible-xs-inline-block {
@media (max-width: @screen-xs-max) {
display: inline-block !important;
}
}
.visible-sm { .visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.visible-sm-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: block !important;
}
}
.visible-sm-inline {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline !important;
}
}
.visible-sm-inline-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline-block !important;
}
}
.visible-md { .visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.visible-md-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: block !important;
}
}
.visible-md-inline {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline !important;
}
}
.visible-md-inline-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline-block !important;
}
}
.visible-lg { .visible-lg {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.visible-lg-block {
@media (min-width: @screen-lg-min) {
display: block !important;
}
}
.visible-lg-inline {
@media (min-width: @screen-lg-min) {
display: inline !important;
}
}
.visible-lg-inline-block {
@media (min-width: @screen-lg-min) {
display: inline-block !important;
}
}
.hidden-xs { .hidden-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
...@@ -77,6 +156,7 @@ ...@@ -77,6 +156,7 @@
// //
// Media queries are placed on the inside to be mixin-friendly. // Media queries are placed on the inside to be mixin-friendly.
// Note: Deprecated .visible-print as of v3.2.0
.visible-print { .visible-print {
.responsive-invisibility(); .responsive-invisibility();
...@@ -84,6 +164,27 @@ ...@@ -84,6 +164,27 @@
.responsive-visibility(); .responsive-visibility();
} }
} }
.visible-print-block {
display: none !important;
@media print {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
@media print {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
@media print {
display: inline-block !important;
}
}
.hidden-print { .hidden-print {
@media print { @media print {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment