sync

[bootswatch] / MDB Free / sass / mdb / free / _helpers.scss

diff --git a/MDB Free/sass/mdb/free/_helpers.scss b/MDB Free/sass/mdb/free/_helpers.scss
new file mode 100644 (file)
index 0000000..13c693b
--- /dev/null
+++ b/MDB Free/sass/mdb/free/_helpers.scss
@@ -0,0 +1,239 @@
+// HELPERS\r
+// Center text on mobile\r
+.center-on-small-only {\r
+    @media #{$medium-and-down} {\r
+        text-align: center;\r
+        .img-fluid {\r
+            display: inline;\r
+        }\r
+    }\r
+}\r
+\r
+.flex-center {\r
+    display: flex;\r
+    justify-content: center;\r
+    align-items: center;\r
+    height: 100%;\r
+    p {\r
+        margin: 0;\r
+    }\r
+    ul {\r
+        text-align: center;\r
+        li {\r
+            margin-bottom: 1rem;\r
+        }\r
+    }\r
+}\r
+\r
+.vertical-center {\r
+    position: relative;\r
+    top: 50%;\r
+    -webkit-transform: translateY(-50%);\r
+    -o-transform: translateY(-50%);\r
+    transform: translateY(-50%);\r
+}\r
+\r
+.img-fluid {\r
+    display: block;\r
+    max-width: 100%;\r
+    height: auto;\r
+}\r
+\r
+.inline-ul>li {\r
+    display: inline;\r
+}\r
+\r
+.list-inline-div>div {\r
+    display: inline-block;\r
+}\r
+\r
+// Dividers light and dark variations\r
+.hr-light {\r
+    background-color: #fff;\r
+    height: 0.5px;\r
+}\r
+\r
+.hr-dark {\r
+    background-color: #666;\r
+    height: 0.5px;\r
+}\r
+\r
+// Divider with title\r
+.divider-new {\r
+    display: flex;\r
+    flex-direction: row;\r
+    justify-content: center;\r
+    align-items: center;\r
+    font-weight: 300;\r
+    margin-top: 45px;\r
+    margin-bottom: 45px;\r
+    h2 {\r
+        margin-top: 5px;\r
+    }\r
+    &:before {\r
+        content: '';\r
+        height: 1.5px;\r
+        background: #666;\r
+        flex: 1;\r
+        margin: 0 .45em 0 0;\r
+    }\r
+    &:after {\r
+        content: '';\r
+        height: 1.5px;\r
+        background: #666;\r
+        flex: 1;\r
+        margin: 0 0 0 .45em;\r
+    }\r
+}\r
+\r
+// Divider for mobile\r
+@media (min-width: 992px) {\r
+    .hr-mobile {\r
+        display: none !important;\r
+    }\r
+}\r
+\r
+// Section title\r
+.section-title {\r
+    text-transform: uppercase;\r
+    margin-top: 0;\r
+    margin-bottom: 3rem;\r
+    padding: 0.7rem;\r
+    small {\r
+        text-transform: none;\r
+        padding-left: 7px;\r
+        margin-left: 10px;\r
+    }\r
+}\r
+\r
+.st-indigo {\r
+    border-left: 4px solid blue;\r
+    small {\r
+        border-left: 2px solid blue;\r
+    }\r
+}\r
+\r
+.st-red {\r
+    border-left: 4px solid red;\r
+    small {\r
+        border-left: 2px solid red;\r
+    }\r
+}\r
+\r
+.st-teal {\r
+    border-left: 4px solid #009688;\r
+    small {\r
+        border-left: 2px solid #009688;\r
+    }\r
+}\r
+\r
+.st-orange {\r
+    border-left: 4px solid #ff6f00;\r
+    small {\r
+        border-left: 2px solid #ff6f00;\r
+    }\r
+}\r
+\r
+.st-blue {\r
+    border-left: 4px solid #2196f3;\r
+    small {\r
+        border-left: 2px solid #2196f3;\r
+    }\r
+}\r
+\r
+.st-mdb {\r
+    border-left: 4px solid $mdb-color;\r
+    small {\r
+        border-left: 2px solid $mdb-color;\r
+    }\r
+}\r
+\r
+.divider-short {\r
+    max-width: 50px;\r
+    border-color: $primary-color;\r
+    border-width: 3px;\r
+}\r
+\r
+// Blockquote contextual \r
+.blockquote {\r
+    .bq-title {\r
+        font-weight: 400;\r
+        font-size: 1.5rem;\r
+        margin-bottom: 0;\r
+    }\r
+    p {\r
+        font-size: 1.1rem;\r
+    }\r
+}\r
+\r
+.bq-primary {\r
+    border-left: 3px solid $primary-color;\r
+    .bq-title {\r
+        color: $primary-color;\r
+    }\r
+}\r
+\r
+.bq-warning {\r
+    border-left: 3px solid $warning-color;\r
+    .bq-title {\r
+        color: $warning-color;\r
+    }\r
+}\r
+\r
+.bq-danger {\r
+    border-left: 3px solid $danger-color;\r
+    .bq-title {\r
+        color: $danger-color;\r
+    }\r
+}\r
+\r
+.bq-success {\r
+    border-left: 3px solid $success-color;\r
+    .bq-title {\r
+        color: $success-color;\r
+    }\r
+}\r
+\r
+@each $prop,\r
+$abbrev in (margin: m, padding: p) {\r
+    @each $size,\r
+    $lengths in $spacers {\r
+        $length-x: map-get($lengths, x);\r
+        $length-y: map-get($lengths, y);\r
+        .#{$abbrev}t-#{$size} {\r
+            #{$prop}-top: $length-y !important;\r
+        }\r
+        .#{$abbrev}b-#{$size} {\r
+            #{$prop}-bottom: $length-y !important;\r
+        }\r
+        .#{$abbrev}y-#{$size} {\r
+            #{$prop}-top: $length-y !important;\r
+            #{$prop}-bottom: $length-y !important;\r
+        }\r
+    }\r
+}\r
+\r
+\r
+.mb-r {\r
+    @media (max-width: 992px) {\r
+        margin-bottom: 2rem!important;\r
+    }\r
+    @media (min-width: 992px) {\r
+        margin-bottom: 3rem!important;\r
+    }\r
+}\r
+\r
+.mb-m {\r
+    margin-bottom: 1rem;\r
+    @media (min-width: 62em) {\r
+        margin-bottom: 0;\r
+    }\r
+}\r
+\r
+.no-height {\r
+    height: 0;\r
+}\r
+\r
+.sharp-corners {\r
+    border-radius: 0;\r
+}
\ No newline at end of file