git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/_helpers.scss

   1 // HELPERS\r
   2 // Center text on mobile\r
   3 .center-on-small-only {\r
   4     @media #{$medium-and-down} {\r
   5         text-align: center;\r
   6         .img-fluid {\r
   7             display: inline;\r
   8         }\r
   9     }\r
  10 }\r
  11 \r
  12 .flex-center {\r
  13     display: flex;\r
  14     justify-content: center;\r
  15     align-items: center;\r
  16     height: 100%;\r
  17     p {\r
  18         margin: 0;\r
  19     }\r
  20     ul {\r
  21         text-align: center;\r
  22         li {\r
  23             margin-bottom: 1rem;\r
  24         }\r
  25     }\r
  26 }\r
  27 \r
  28 .vertical-center {\r
  29     position: relative;\r
  30     top: 50%;\r
  31     -webkit-transform: translateY(-50%);\r
  32     -o-transform: translateY(-50%);\r
  33     transform: translateY(-50%);\r
  34 }\r
  35 \r
  36 .img-fluid {\r
  37     display: block;\r
  38     max-width: 100%;\r
  39     height: auto;\r
  40 }\r
  41 \r
  42 .inline-ul>li {\r
  43     display: inline;\r
  44 }\r
  45 \r
  46 .list-inline-div>div {\r
  47     display: inline-block;\r
  48 }\r
  49 \r
  50 // Dividers light and dark variations\r
  51 .hr-light {\r
  52     background-color: #fff;\r
  53     height: 0.5px;\r
  54 }\r
  55 \r
  56 .hr-dark {\r
  57     background-color: #666;\r
  58     height: 0.5px;\r
  59 }\r
  60 \r
  61 // Divider with title\r
  62 .divider-new {\r
  63     display: flex;\r
  64     flex-direction: row;\r
  65     justify-content: center;\r
  66     align-items: center;\r
  67     font-weight: 300;\r
  68     margin-top: 45px;\r
  69     margin-bottom: 45px;\r
  70     h2 {\r
  71         margin-top: 5px;\r
  72     }\r
  73     &:before {\r
  74         content: '';\r
  75         height: 1.5px;\r
  76         background: #666;\r
  77         flex: 1;\r
  78         margin: 0 .45em 0 0;\r
  79     }\r
  80     &:after {\r
  81         content: '';\r
  82         height: 1.5px;\r
  83         background: #666;\r
  84         flex: 1;\r
  85         margin: 0 0 0 .45em;\r
  86     }\r
  87 }\r
  88 \r
  89 // Divider for mobile\r
  90 @media (min-width: 992px) {\r
  91     .hr-mobile {\r
  92         display: none !important;\r
  93     }\r
  94 }\r
  95 \r
  96 // Section title\r
  97 .section-title {\r
  98     text-transform: uppercase;\r
  99     margin-top: 0;\r
 100     margin-bottom: 3rem;\r
 101     padding: 0.7rem;\r
 102     small {\r
 103         text-transform: none;\r
 104         padding-left: 7px;\r
 105         margin-left: 10px;\r
 106     }\r
 107 }\r
 108 \r
 109 .st-indigo {\r
 110     border-left: 4px solid blue;\r
 111     small {\r
 112         border-left: 2px solid blue;\r
 113     }\r
 114 }\r
 115 \r
 116 .st-red {\r
 117     border-left: 4px solid red;\r
 118     small {\r
 119         border-left: 2px solid red;\r
 120     }\r
 121 }\r
 122 \r
 123 .st-teal {\r
 124     border-left: 4px solid #009688;\r
 125     small {\r
 126         border-left: 2px solid #009688;\r
 127     }\r
 128 }\r
 129 \r
 130 .st-orange {\r
 131     border-left: 4px solid #ff6f00;\r
 132     small {\r
 133         border-left: 2px solid #ff6f00;\r
 134     }\r
 135 }\r
 136 \r
 137 .st-blue {\r
 138     border-left: 4px solid #2196f3;\r
 139     small {\r
 140         border-left: 2px solid #2196f3;\r
 141     }\r
 142 }\r
 143 \r
 144 .st-mdb {\r
 145     border-left: 4px solid $mdb-color;\r
 146     small {\r
 147         border-left: 2px solid $mdb-color;\r
 148     }\r
 149 }\r
 150 \r
 151 .divider-short {\r
 152     max-width: 50px;\r
 153     border-color: $primary-color;\r
 154     border-width: 3px;\r
 155 }\r
 156 \r
 157 // Blockquote contextual \r
 158 .blockquote {\r
 159     .bq-title {\r
 160         font-weight: 400;\r
 161         font-size: 1.5rem;\r
 162         margin-bottom: 0;\r
 163     }\r
 164     p {\r
 165         font-size: 1.1rem;\r
 166     }\r
 167 }\r
 168 \r
 169 .bq-primary {\r
 170     border-left: 3px solid $primary-color;\r
 171     .bq-title {\r
 172         color: $primary-color;\r
 173     }\r
 174 }\r
 175 \r
 176 .bq-warning {\r
 177     border-left: 3px solid $warning-color;\r
 178     .bq-title {\r
 179         color: $warning-color;\r
 180     }\r
 181 }\r
 182 \r
 183 .bq-danger {\r
 184     border-left: 3px solid $danger-color;\r
 185     .bq-title {\r
 186         color: $danger-color;\r
 187     }\r
 188 }\r
 189 \r
 190 .bq-success {\r
 191     border-left: 3px solid $success-color;\r
 192     .bq-title {\r
 193         color: $success-color;\r
 194     }\r
 195 }\r
 196 \r
 197 @each $prop,\r
 198 $abbrev in (margin: m, padding: p) {\r
 199     @each $size,\r
 200     $lengths in $spacers {\r
 201         $length-x: map-get($lengths, x);\r
 202         $length-y: map-get($lengths, y);\r
 203         .#{$abbrev}t-#{$size} {\r
 204             #{$prop}-top: $length-y !important;\r
 205         }\r
 206         .#{$abbrev}b-#{$size} {\r
 207             #{$prop}-bottom: $length-y !important;\r
 208         }\r
 209         .#{$abbrev}y-#{$size} {\r
 210             #{$prop}-top: $length-y !important;\r
 211             #{$prop}-bottom: $length-y !important;\r
 212         }\r
 213     }\r
 214 }\r
 215 \r
 216 \r
 217 .mb-r {\r
 218     @media (max-width: 992px) {\r
 219         margin-bottom: 2rem!important;\r
 220     }\r
 221     @media (min-width: 992px) {\r
 222         margin-bottom: 3rem!important;\r
 223     }\r
 224 }\r
 225 \r
 226 .mb-m {\r
 227     margin-bottom: 1rem;\r
 228     @media (min-width: 62em) {\r
 229         margin-bottom: 0;\r
 230     }\r
 231 }\r
 232 \r
 233 .no-height {\r
 234     height: 0;\r
 235 }\r
 236 \r
 237 .sharp-corners {\r
 238     border-radius: 0;\r
 239 }