src/scss/bootstrap-4.0.0-alpha.6/docs/assets/scss/_responsive-tests.scss

   1 // scss-lint:disable ImportantRule
   2
   3 //
   4 // Responsive tests
   5 //
   6
   7 // Responsive (scrollable) doc tables
   8 .table-responsive .highlight pre {
   9   white-space: normal;
  10 }
  11
  12 // Utility classes table
  13 .bd-table th small,
  14 .responsive-utilities th small {
  15   display: block;
  16   font-weight: normal;
  17   color: #999;
  18 }
  19 .responsive-utilities tbody th {
  20   font-weight: normal;
  21 }
  22 .responsive-utilities td {
  23   text-align: center;
  24 }
  25 .responsive-utilities .is-visible {
  26   color: #468847;
  27   background-color: #dff0d8 !important;
  28 }
  29 .responsive-utilities .is-hidden {
  30   color: #ccc;
  31   background-color: #f9f9f9 !important;
  32 }
  33
  34 // Responsive tests
  35 .responsive-utilities-test {
  36   margin-top: .25rem;
  37 }
  38 .responsive-utilities-test .col-6 {
  39   margin-top: .5rem;
  40   margin-bottom: .5rem;
  41 }
  42 .responsive-utilities-test span {
  43   display: block;
  44   padding: 1rem .5rem;
  45   font-size: 1rem;
  46   font-weight: bold;
  47   line-height: 1.1;
  48   text-align: center;
  49   border-radius: .25rem;
  50 }
  51 .visible-on,
  52 .hidden-on {
  53   .col-6 {
  54     > .not-visible {
  55       color: #999;
  56       border: 1px solid #ddd;
  57     }
  58   }
  59 }
  60 .visible-on,
  61 .hidden-on {
  62   .col-6 {
  63     .visible {
  64       color: #468847;
  65       background-color: #dff0d8;
  66       border: 1px solid #d6e9c6;
  67     }
  68   }
  69 }
  70
  71 @include media-breakpoint-only(xs) {
  72   .hidden-xs-only {
  73     display: none !important;
  74   }
  75 }
  76 @include media-breakpoint-only(sm) {
  77   .hidden-sm-only {
  78     display: none !important;
  79   }
  80 }
  81 @include media-breakpoint-only(md) {
  82   .hidden-md-only {
  83     display: none !important;
  84   }
  85 }
  86 @include media-breakpoint-only(lg) {
  87   .hidden-lg-only {
  88     display: none !important;
  89   }
  90 }
  91 @include media-breakpoint-only(xl) {
  92   .hidden-xl-only {
  93     display: none !important;
  94   }
  95 }