sync

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

diff --git a/MDB Free/sass/mdb/free/_global.scss b/MDB Free/sass/mdb/free/_global.scss
new file mode 100644 (file)
index 0000000..e74c590
--- /dev/null
+++ b/MDB Free/sass/mdb/free/_global.scss
@@ -0,0 +1,409 @@
+// GLOBAL STYLES\r
+// Z-levels\r
+.z-depth-0 {\r
+    box-shadow: none !important;\r
+}\r
+\r
+.z-depth-1 {\r
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\r
+}\r
+\r
+.z-depth-1-half {\r
+    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);\r
+}\r
+\r
+.z-depth-2 {\r
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\r
+}\r
+\r
+.z-depth-3 {\r
+    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);\r
+}\r
+\r
+.z-depth-4 {\r
+    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);\r
+}\r
+\r
+.z-depth-5 {\r
+    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);\r
+}\r
+\r
+.hoverable {\r
+    transition: box-shadow .55s;\r
+    box-shadow: 0;\r
+}\r
+\r
+.hoverable:hover {\r
+    transition: box-shadow .45s;\r
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\r
+}\r
+\r
+// Normalize\r
+a {\r
+    color: $link-color;\r
+    text-decoration: none;\r
+    cursor: pointer;\r
+    // Gets rid of tap active state\r
+    -webkit-tap-highlight-color: transparent;\r
+    &:hover,\r
+    &:focus {\r
+        text-decoration: none;\r
+    }\r
+}\r
+\r
+.jumbotron,\r
+.card,\r
+.badge,\r
+.alert,\r
+.nav .nav-link,\r
+.navbar-toggler,\r
+.navbar,\r
+.breadcrumb,\r
+.page-item:last-child .page-link,\r
+.page-item:first-child .page-link,\r
+.pagination-lg .page-item:last-child .page-link,\r
+.pagination-lg .page-item:first-child .page-link,\r
+.pagination-sm .page-item:first-child .page-link,\r
+.pagination-sm .page-item:last-child .page-link,\r
+.list-group .list-group-item,\r
+.tooltip-inner,\r
+.popover,\r
+.dropdown-menu,\r
+.input-group-addon,\r
+.file-custom,\r
+.card .card-header,\r
+.nav-tabs,\r
+img {\r
+    @include border-radius(2px);\r
+}\r
+\r
+.jumbotron,\r
+.card,\r
+.list-group,\r
+.popover,\r
+.navbar,\r
+.dropdown-menu,\r
+.badge,\r
+.chip {\r
+    @extend .z-depth-1;\r
+}\r
+\r
+.popover,\r
+.input-group-addon,\r
+.dropdown-menu,\r
+.pagination .page-item .page-link {\r
+    border: 0;\r
+}\r
+\r
+// Circle pagination\r
+.pagination .active .page-link {\r
+    border-radius: 2px;\r
+    transition: all 0.2s linear;\r
+    @extend.z-depth-1;\r
+}\r
+\r
+.pagination .page-link {\r
+    transition: all 0.3s linear;\r
+    &:hover {\r
+        transition: all 0.3s linear;\r
+    }\r
+    &:focus {\r
+        background-color: transparent;\r
+    }\r
+}\r
+\r
+.pagination {\r
+    &.pg-blue {\r
+        .active .page-link {\r
+            background-color: $primary-color;\r
+        }\r
+    }\r
+    &.pg-red {\r
+        .active .page-link {\r
+            background-color: $danger-color;\r
+        }\r
+    }\r
+    &.pg-teal {\r
+        .active .page-link {\r
+            background-color: $default-color;\r
+        }\r
+    }\r
+    &.pg-darkgrey {\r
+        .active .page-link {\r
+            background-color: $special-color;\r
+        }\r
+    }\r
+    &.pg-dark {\r
+        .active .page-link {\r
+            background-color: $elegant-color;\r
+        }\r
+    }\r
+    &.pg-bluegrey {\r
+        .active .page-link {\r
+            background-color: #3F729B;\r
+        }\r
+    }\r
+    &.pg-amber {\r
+        .active .page-link {\r
+            background-color: #ff6f00;\r
+        }\r
+    }\r
+    &.pg-purple {\r
+        .active .page-link {\r
+            background-color: #5e35b1;\r
+        }\r
+    }\r
+}\r
+\r
+.pager {\r
+    a,\r
+    .disabled>a {\r
+        color: #fff;\r
+    }\r
+    &.pg-blue {\r
+        li a {\r
+            background-color: $primary-color;\r
+            &:focus {\r
+                background-color: $primary-color;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: $primary-color;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+    &.pg-red {\r
+        li a {\r
+            background-color: $danger-color;\r
+            &:focus {\r
+                background-color: $danger-color;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: $danger-color;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+    &.pg-teal {\r
+        li a {\r
+            background-color: $default-color;\r
+            &:focus {\r
+                background-color: $default-color;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: $default-color;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+    &.pg-darkgrey {\r
+        li a {\r
+            background-color: $special-color;\r
+            &:focus {\r
+                background-color: $special-color;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: $special-color;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+    &.pg-dark {\r
+        li a {\r
+            background-color: $elegant-color;\r
+            &:focus {\r
+                background-color: $elegant-color;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: $elegant-color;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+    &.pg-bluegrey {\r
+        li a {\r
+            background-color: #3F729B;\r
+            &:focus {\r
+                background-color: #3F729B;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: #3F729B;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+    &.pg-amber {\r
+        li a {\r
+            background-color: #ff6f00;\r
+            &:focus {\r
+                background-color: #ff6f00;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: #ff6f00;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+    &.pg-purple {\r
+        li a {\r
+            background-color: #5e35b1;\r
+            &:focus {\r
+                background-color: #5e35b1;\r
+                color: #fff;\r
+            }\r
+            &:hover {\r
+                background-color: #5e35b1;\r
+                color: #fff;\r
+            }\r
+        }\r
+    }\r
+}\r
+\r
+.pager .disabled>a,\r
+.pager .disabled>a:focus,\r
+.pager .disabled>a:hover {\r
+    background-color: inerhit!important;\r
+}\r
+\r
+// Modal footer buttons fix\r
+.modal-footer .btn+ .btn {\r
+    margin-bottom: 6px;\r
+}\r
+\r
+// Shifting bacground fix\r
+body.modal-open {\r
+    overflow: inherit;\r
+    padding-right: 0 !important;\r
+}\r
+\r
+body {\r
+    overflow: auto !important;\r
+}\r
+\r
+// Card columns fix - cut edges of the cards\r
+.card-columns .card {\r
+    margin: 2px;\r
+}\r
+\r
+// Parallax\r
+.parallax {\r
+    background-repeat: no-repeat;\r
+    background-size: cover;\r
+    background-attachment: fixed;\r
+    position: relative;\r
+    padding-top: 3em;\r
+    padding-bottom: 3em;\r
+}\r
+\r
+// Scrollspy free\r
+.nav-pills {\r
+    &.horizontal-spy {\r
+        .nav-item {\r
+            .active {\r
+                border-bottom: 2px solid $mdb-color;\r
+                border-left: none;\r
+            }\r
+            &:hover {\r
+                background-color: transparent;\r
+                color: $mdb-color;\r
+                font-weight: 500;\r
+                border-left: none;\r
+            }\r
+        }\r
+    }\r
+}\r
+\r
+//Nav normalize\r
+.nav-pills .nav-item.open .nav-link,\r
+.nav-pills .nav-item.open .nav-link:focus,\r
+.nav-pills .nav-item.open .nav-link:hover,\r
+.nav-pills .nav-link.active,\r
+.nav-pills .nav-link.active:focus,\r
+.nav-pills .nav-link.active:hover {\r
+    background-color: transparent;\r
+    color: #000;\r
+}\r
+\r
+//Disabled cursor\r
+.disabled {\r
+    cursor: not-allowed!important;\r
+}\r
+\r
+//Video responsive\r
+.video-fluid {\r
+    height: auto;\r
+    width: 100%;\r
+}\r
+\r
+.video-full {\r
+    position: fixed;\r
+    top: 50%;\r
+    left: 50%;\r
+    min-width: 100%;\r
+    min-height: 100%;\r
+    width: auto;\r
+    height: auto;\r
+    z-index: -100;\r
+    -ms-transform: translateX(-50%) translateY(-50%);\r
+    -moz-transform: translateX(-50%) translateY(-50%);\r
+    -webkit-transform: translateX(-50%) translateY(-50%);\r
+    transform: translateX(-50%) translateY(-50%);\r
+    background-size: cover;\r
+}\r
+\r
+//Media improvement\r
+.media {\r
+    .media-left {\r
+        padding:0 10px 10px 0;\r
+        img {\r
+            @extend .z-depth-1-half;\r
+        }\r
+    }\r
+}\r
+\r
+.card-block {\r
+    h5 {\r
+        margin-bottom: 1rem;\r
+        font-size: 1rem;\r
+        font-weight: 400;\r
+    }\r
+    h3 {\r
+        margin-bottom: 1rem;\r
+        font-weight: 400;\r
+    }\r
+    p {\r
+        margin-bottom: 1rem;\r
+    }\r
+}\r
+\r
+.tooltip {\r
+    .tooltip-inner {\r
+        padding: 0.4rem 0.8rem;\r
+        @extend .z-depth-1-half;\r
+    }\r
+}\r
+\r
+// Make sections full width\r
+section {\r
+    flex: 0 0 100%;\r
+}\r
+\r
+.breadcrumb .breadcrumb-item.active {\r
+    color: #818a91;\r
+}\r
+\r
+.dropdown-menu .dropdown-item:active {\r
+    background:#f7f7f9;\r
+}\r
+\r
+.dropdown-menu {\r
+    transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);\r
+    \r
+}
\ No newline at end of file