diff --git a/index.html b/index.html index 8fab44b2..bcbb096d 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -11,8 +12,10 @@ - - + + + @@ -21,43 +24,44 @@ +
- +
Only now, you can get all premium features & more with the best discounts of the year.
-​ + ​

All offers are LIMITED!

- Check insane offers -
-

Publish your project with a single command.

-

Use MDB GO for a free hosting & deployment - tool

+ Check insane offers +
+

Publish your project with a single command.

+

Use MDB GO for a free + hosting & deployment + tool

- + - - - - + + + + + + - + + \ No newline at end of file diff --git a/scss/addons/_datatables.scss b/scss/addons/_datatables.scss index 8ed1c085..d535e4d3 100644 --- a/scss/addons/_datatables.scss +++ b/scss/addons/_datatables.scss @@ -16,7 +16,8 @@ div.dataTables_wrapper div { &.dataTables_length { - select, input { + select, + input { width: auto; } &.d-flex.flex-row { @@ -25,7 +26,8 @@ div.dataTables_wrapper div { margin-right: 1rem; } .select-wrapper.mdb-select { - span, .select-dropdown { + span, + .select-dropdown { margin-top: 1rem; } } @@ -34,8 +36,8 @@ div.dataTables_wrapper div { &.dataTables_length, &.dataTables_filter { label { - padding-top: .5rem; - padding-bottom: .5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; font-weight: 400; text-align: left; } @@ -47,7 +49,7 @@ div.dataTables_wrapper div { } input { display: inline-block; - margin-left: .5rem; + margin-left: 0.5rem; } text-align: right; } @@ -80,7 +82,10 @@ div.dataTables_wrapper div { @media (max-width: 767px) { div.dataTables_wrapper div { - .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate ul.pagination { + .dataTables_length, + .dataTables_filter, + .dataTables_info, + .dataTables_paginate ul.pagination { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; @@ -91,7 +96,7 @@ div.dataTables_wrapper div { } .bs-select select { - display: inline-block !important; + display: inline-block; } table.dataTable thead { @@ -99,11 +104,14 @@ table.dataTable thead { > tr > { th, td { - &.sorting_asc, &.sorting_desc, &.sorting { + &.sorting_asc, + &.sorting_desc, + &.sorting { padding-right: 30px; } } - th:active, td:active { + th:active, + td:active { outline: none; } } @@ -114,31 +122,42 @@ table.dataTable thead { .sorting_desc_disabled { position: relative; cursor: pointer; - &:before, &:after { + &:before, + &:after { position: absolute; - bottom: .9em; + bottom: 0.9em; display: block; - opacity: .3; + opacity: 0.3; } } - .sorting:before, .sorting_asc:before, .sorting_desc:before, .sorting_asc_disabled:before, .sorting_desc_disabled:before { + .sorting:before, + .sorting_asc:before, + .sorting_desc:before, + .sorting_asc_disabled:before, + .sorting_desc_disabled:before { right: 1em; font-family: "Font Awesome\ 5 Free", sans-serif; font-size: 1rem; font-weight: 900; content: "\f0de"; } - .sorting:after, .sorting_asc:after, .sorting_desc:after, .sorting_asc_disabled:after, .sorting_desc_disabled:after { + .sorting:after, + .sorting_asc:after, + .sorting_desc:after, + .sorting_asc_disabled:after, + .sorting_desc_disabled:after { right: 16px; font-family: "Font Awesome\ 5 Free", sans-serif; font-size: 1rem; font-weight: 900; content: "\f0dd"; } - .sorting_asc:before, .sorting_desc:after { + .sorting_asc:before, + .sorting_desc:after { opacity: 1; } - .sorting_asc_disabled:before, .sorting_desc_disabled:after { + .sorting_asc_disabled:before, + .sorting_desc_disabled:after { opacity: 0; } } diff --git a/scss/addons/_datatables2.scss b/scss/addons/_datatables2.scss index ca238e6a..39a9ceeb 100644 --- a/scss/addons/_datatables2.scss +++ b/scss/addons/_datatables2.scss @@ -16,7 +16,8 @@ div.dataTables_wrapper div { &.dataTables_length { - select, input { + select, + input { width: auto; } &.d-flex.flex-row { @@ -25,7 +26,8 @@ div.dataTables_wrapper div { margin-right: 1rem; } .select-wrapper.mdb-select { - span, .select-dropdown { + span, + .select-dropdown { margin-top: 1rem; } } @@ -34,8 +36,8 @@ div.dataTables_wrapper div { &.dataTables_length, &.dataTables_filter { label { - padding-top: .5rem; - padding-bottom: .5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; font-weight: 400; text-align: left; } @@ -47,7 +49,7 @@ div.dataTables_wrapper div { } input { display: inline-block; - margin-left: .5rem; + margin-left: 0.5rem; } text-align: right; } @@ -68,13 +70,12 @@ div.dataTables_wrapper div { .page-item { &.active { .page-link { - background-color: #7e7e7e; &:focus { background-color: #7e7e7e; } } - } + } .page-link:focus { -webkit-box-shadow: none; box-shadow: none; @@ -86,7 +87,10 @@ div.dataTables_wrapper div { @media (max-width: 767px) { div.dataTables_wrapper div { - .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate ul.pagination { + .dataTables_length, + .dataTables_filter, + .dataTables_info, + .dataTables_paginate ul.pagination { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; @@ -97,7 +101,7 @@ div.dataTables_wrapper div { } .bs-select select { - display: inline-block !important; + display: inline-block; } table.dataTable thead { @@ -109,15 +113,18 @@ table.dataTable thead { > tr > { th, td { - &.sorting_asc, &.sorting_desc, &.sorting { + &.sorting_asc, + &.sorting_desc, + &.sorting { padding-right: 30px; } } - th:active, td:active { + th:active, + td:active { outline: none; } } - + .sorting, .sorting_asc, .sorting_desc, @@ -125,7 +132,8 @@ table.dataTable thead { .sorting_desc_disabled { position: relative; cursor: pointer; - &:before, &:after { + &:before, + &:after { position: absolute; bottom: 1rem; display: block; @@ -137,43 +145,55 @@ table.dataTable thead { opacity: 0.6; } } - .sorting:before, .sorting_asc:before, .sorting_desc:before, .sorting_asc_disabled:before, .sorting_desc_disabled:before { + .sorting:before, + .sorting_asc:before, + .sorting_desc:before, + .sorting_asc_disabled:before, + .sorting_desc_disabled:before { left: 0.4rem; font-family: "Font Awesome\ 5 Free", sans-serif; font-size: 1rem; font-weight: 900; content: "\f062"; } - .sorting:after, .sorting_asc:after, .sorting_desc:after, .sorting_asc_disabled:after, .sorting_desc_disabled:after { + .sorting:after, + .sorting_asc:after, + .sorting_desc:after, + .sorting_asc_disabled:after, + .sorting_desc_disabled:after { left: 0.4rem; font-family: "Font Awesome\ 5 Free", sans-serif; font-size: 1rem; font-weight: 900; content: "\f063"; } - .sorting_asc:before, .sorting_desc:after { + .sorting_asc:before, + .sorting_desc:after { opacity: 1; } - .sorting_asc_disabled:before, .sorting_desc_disabled:after { + .sorting_asc_disabled:before, + .sorting_desc_disabled:after { opacity: 0; } } .dataTables_scrollHead { - .dataTables_scrollHeadInner, .dataTables_scrollHeadInner table { - padding-right: 0 !important; - margin-right: 0 !important; - width: 100% !important; + .dataTables_scrollHeadInner, + .dataTables_scrollHeadInner table { + padding-right: 0; + margin-right: 0; + width: 100%; } .dataTables_scrollHeadInner table { - margin-bottom: 0 !important; + margin-bottom: 0; } } .dataTables_scrollFoot { - .dataTables_scrollFootInner, .dataTables_scrollFootInner table { - padding-right: 0 !important; - margin-right: 0 !important; - width: 100% !important; + .dataTables_scrollFootInner, + .dataTables_scrollFootInner table { + padding-right: 0; + margin-right: 0; + width: 100%; } } diff --git a/scss/core/_global.scss b/scss/core/_global.scss index c7c07f61..8d55f6e6 100644 --- a/scss/core/_global.scss +++ b/scss/core/_global.scss @@ -4,28 +4,27 @@ @each $color_type, $color_value in $color { @if $color_type == "base" { .#{$color_name} { - background-color: $color_value !important; + background-color: $color_value; } .#{$color_name}-text { - color: $color-value !important; + color: $color-value; } .rgba-#{$color_name}-slight, .rgba-#{$color_name}-slight:after { - background-color: rgba($color_value, .1); + background-color: rgba($color_value, 0.1); } .rgba-#{$color_name}-light, .rgba-#{$color_name}-light:after { - background-color: rgba($color_value, .3); + background-color: rgba($color_value, 0.3); } .rgba-#{$color_name}-strong, .rgba-#{$color_name}-strong:after { - background-color: rgba($color_value, .7); + background-color: rgba($color_value, 0.7); } - } - @else { + } @else { @if $enable_full_palette { .#{$color_name}.#{$color_type} { - background-color: $color_value !important; + background-color: $color_value; } } } @@ -42,7 +41,7 @@ // Material colors palette @each $color_name, $color in $material-colors { .#{$color_name} { - background-color: $color !important; + background-color: $color; } } @@ -55,10 +54,10 @@ } .dark-grey-text { - color: #4f4f4f !important; + color: #4f4f4f; &:hover, &:focus { - color: #4f4f4f !important; + color: #4f4f4f; } } @@ -74,31 +73,31 @@ // Shadows .z-depth-0 { - box-shadow: none !important; + box-shadow: none; } .z-depth-1 { - box-shadow: $z-depth-1 !important; + box-shadow: $z-depth-1; } .z-depth-1-half { - box-shadow: $z-depth-1-half !important; + box-shadow: $z-depth-1-half; } .z-depth-2 { - box-shadow: $z-depth-2 !important; + box-shadow: $z-depth-2; } .z-depth-3 { - box-shadow: $z-depth-3 !important; + box-shadow: $z-depth-3; } .z-depth-4 { - box-shadow: $z-depth-4 !important; + box-shadow: $z-depth-4; } .z-depth-5 { - box-shadow: $z-depth-5 !important; + box-shadow: $z-depth-5; } // Disabled cursor .disabled, :disabled { - pointer-events: none !important; + pointer-events: none; } // Links @@ -120,7 +119,9 @@ a { } } -a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { +a:not([href]):not([tabindex]), +a:not([href]):not([tabindex]):focus, +a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; } @@ -133,7 +134,12 @@ a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href] justify-content: center; margin-top: $divider-margin-y; margin-bottom: $divider-margin-y; - > h1, h2, h3, h4, h5, h6 { + > h1, + h2, + h3, + h4, + h5, + h6 { margin-bottom: 0; } &:before, diff --git a/scss/core/_helpers.scss b/scss/core/_helpers.scss index 3d2c03ef..30d12746 100644 --- a/scss/core/_helpers.scss +++ b/scss/core/_helpers.scss @@ -37,8 +37,6 @@ border-top: 1px solid $hr-dark; } - - // Responsive width .w-responsive { width: 75%; @@ -63,12 +61,11 @@ box-shadow: $z-depth-1; } -@each $name, - $color in $basic-mdb-colors { +@each $name, $color in $basic-mdb-colors { @include bg-variant(".bg-#{$name}", $color); .border-#{$name} { - border-color: $color !important; + border-color: $color; } } @@ -83,7 +80,7 @@ } .mml-1 { - margin-left: - .25rem !important; + margin-left: -0.25rem; } .flex-1 { diff --git a/scss/core/_mixins.scss b/scss/core/_mixins.scss index 90ae7b18..3a697e10 100644 --- a/scss/core/_mixins.scss +++ b/scss/core/_mixins.scss @@ -1,8 +1,16 @@ // Mixins // Bootstrap Mixins -@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if( + $n < length($breakpoint-names), + nth($breakpoint-names, $n + 1), + null + ); } @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { @@ -12,7 +20,7 @@ @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); + @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. @@ -24,9 +32,7 @@ @media (min-width: $min) { @content; } - } - - @else { + } @else { @content; } } @@ -40,16 +46,18 @@ @media (max-width: $max) { @content; } - } - - @else { + } @else { @content; } } // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints -@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { +@mixin media-breakpoint-between( + $lower, + $upper, + $breakpoints: $grid-breakpoints +) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); @@ -57,15 +65,11 @@ @media (min-width: $min) and (max-width: $max) { @content; } - } - - @else if $max==null { + } @else if $max==null { @include media-breakpoint-up($lower, $breakpoints) { @content; } - } - - @else if $min==null { + } @else if $min==null { @include media-breakpoint-down($upper, $breakpoints) { @content; } @@ -83,15 +87,11 @@ @media (min-width: $min) and (max-width: $max) { @content; } - } - - @else if $max==null { + } @else if $max==null { @include media-breakpoint-up($name, $breakpoints) { @content; } - } - - @else if $min==null { + } @else if $min==null { @include media-breakpoint-down($name, $breakpoints) { @content; } @@ -99,11 +99,13 @@ } @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { - @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}"); + @return if(breakpoint-min($name, $breakpoints) ==null, "", "-#{$name}"); } @mixin hover { - &:hover { @content; } + &:hover { + @content; + } } @mixin hover-focus { @@ -116,13 +118,13 @@ // Background color @mixin bg-variant($parent, $color) { #{$parent} { - background-color: $color !important; + background-color: $color; } a#{$parent}, button#{$parent} { @include hover-focus { - background-color: darken($color, 10%) !important; + background-color: darken($color, 10%); } } } @@ -130,12 +132,12 @@ // Typography @mixin text-emphasis-variant($parent, $color) { #{$parent} { - color: $color !important; + color: $color; } a#{$parent} { @include hover-focus { - color: darken($color, 10%) !important; + color: darken($color, 10%); } } } @@ -160,10 +162,11 @@ } // For each breakpoint, define the maximum width of the container in a media query -@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { - - @each $breakpoint, - $container-max-width in $max-widths { +@mixin make-container-max-widths( + $max-widths: $container-max-widths, + $breakpoints: $grid-breakpoints +) { + @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: $container-max-width; } @@ -210,15 +213,15 @@ } @mixin float-left { - float: left !important; + float: left; } @mixin float-right { - float: right !important; + float: right; } @mixin float-none { - float: none !important; + float: none; } // CSS image replacement @@ -258,7 +261,6 @@ // Credit: HTML5 Boilerplate @mixin sr-only-focusable { - &:active, &:focus { position: static; @@ -271,7 +273,7 @@ } @mixin invisible($visibility) { - visibility: $visibility !important; + visibility: $visibility; } // MDB Mixins @@ -287,18 +289,16 @@ @function set-notification-text-color($color) { @if (lightness($color) > 80) { @return $black-base; // Lighter backgorund, return dark color - } - - @else { + } @else { @return $white-base; // Darker background, return light color } } // Make button -@mixin make-button ($name, $color) { +@mixin make-button($name, $color) { .btn-#{$name} { color: set-notification-text-color($color); - background-color: $color !important; + background-color: $color; &:hover { color: set-notification-text-color($color); @@ -317,18 +317,18 @@ } &.dropdown-toggle { - background-color: $color !important; + background-color: $color; &:hover, &:focus { - background-color: lighten($color, 5%) !important; + background-color: lighten($color, 5%); } } &:not([disabled]):not(.disabled):active, &:not([disabled]):not(.disabled).active, .show > &.dropdown-toggle { - background-color: darken($color, 20%) !important; + background-color: darken($color, 20%); box-shadow: $z-depth-1-half; } @@ -340,7 +340,7 @@ } .#{$name}-ic { - color: $color !important; + color: $color; &:hover, &:focus { @@ -367,27 +367,27 @@ } // Make outline button -@mixin make-outline-button ($name, $color) { +@mixin make-outline-button($name, $color) { .btn-outline-#{$name} { - color: $color !important; - background-color: transparent !important; - border: 2px solid $color !important; + color: $color; + background-color: transparent; + border: 2px solid $color; &:hover, &:focus, &:active, &:active:focus, &.active { - color: $color !important; - background-color: transparent !important; - border-color: $color !important; + color: $color; + background-color: transparent; + border-color: $color; } &:not([disabled]):not(.disabled):active, &:not([disabled]):not(.disabled).active, .show > &.dropdown-toggle { - background-color: transparent !important; - border-color: $color !important; + background-color: transparent; + border-color: $color; box-shadow: $z-depth-1-half; } @@ -402,16 +402,24 @@ // Make gradient @mixin make-gradient($name, $value) { .#{$name}-gradient { - background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important; + background: linear-gradient( + 40deg, + map-get($value, start), + map-get($value, end) + ); } } -$opacity: .9 !default; +$opacity: 0.9 !default; // Make gradient @mixin make-gradient-rgba($name, $value) { .#{$name}-gradient-rgba { - background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important; + background: linear-gradient( + 40deg, + map-get($value, start), + map-get($value, end) + ); } } @@ -420,13 +428,16 @@ $opacity: .9 !default; .btn { &.#{$name}-gradient { color: $white-base; - transition: .5s ease; + transition: 0.5s ease; &:hover, &:focus, &:active, &:active:focus &.active { - background: linear-gradient(lighten(map-get($value, start), 5%), lighten(map-get($value, end), 5%)); + background: linear-gradient( + lighten(map-get($value, start), 5%), + lighten(map-get($value, end), 5%) + ); } } } @@ -440,13 +451,22 @@ $opacity: .9 !default; @mixin make-badge($name, $color) { .badge-#{$name} { - color: set-notification-text-color($color) !important; - background-color: $color !important; + color: set-notification-text-color($color); + background-color: $color; } } // Make input -@mixin make-input($margin-bottom, $label-font-size, $label-active-font-size, $top, $prefix-font-size, $margin-left, $width, $margin-left-2) { +@mixin make-input( + $margin-bottom, + $label-font-size, + $label-active-font-size, + $top, + $prefix-font-size, + $margin-left, + $width, + $margin-left-2 +) { .validate { margin-bottom: $margin-bottom; } @@ -602,7 +622,12 @@ $opacity: .9 !default; } // Make border-radius scrollspy 4rows -@mixin scrollspy-border-radius-4rows($top-left, $top-right, $bottom-right, $bottom-left) { +@mixin scrollspy-border-radius-4rows( + $top-left, + $top-right, + $bottom-right, + $bottom-left +) { border-radius: $top-left $top-right $bottom-right $bottom-left; } diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss index a994d52a..7c6047ca 100644 --- a/scss/core/_typography.scss +++ b/scss/core/_typography.scss @@ -6,16 +6,21 @@ body { font-weight: $font-weight-light; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-weight: $font-weight-light; } // Blockquote .blockquote { padding: $blockquote-padding-y $blockquote-padding-x; - border-left: .25rem solid #eceeef; + border-left: 0.25rem solid #eceeef; &.text-right { - border-right: .25rem solid #eceeef; + border-right: 0.25rem solid #eceeef; border-left: none; } .bq-title { @@ -31,9 +36,9 @@ h1, h2, h3, h4, h5, h6 { @each $name, $color in $basic { .bq-#{$name} { - border-left: 3px solid $color !important; + border-left: 3px solid $color; .bq-title { - color: $color !important; + color: $color; } } } @@ -60,4 +65,4 @@ h1, h2, h3, h4, h5, h6 { strong { font-weight: 500; -} \ No newline at end of file +} diff --git a/scss/core/_waves.scss b/scss/core/_waves.scss index 1ca6c2dc..1c80e2cb 100644 --- a/scss/core/_waves.scss +++ b/scss/core/_waves.scss @@ -6,14 +6,14 @@ * Released under the MIT license * https://github.com/fians/Waves/blob/master/LICENSE */ -@mixin waves-transition($transition){ +@mixin waves-transition($transition) { -webkit-transition: $transition; -moz-transition: $transition; -o-transition: $transition; transition: $transition; } -@mixin waves-transform($string){ +@mixin waves-transform($string) { -webkit-transform: $string; -moz-transform: $string; -ms-transform: $string; @@ -21,7 +21,7 @@ transform: $string; } -@mixin waves-box-shadow($shadow){ +@mixin waves-box-shadow($shadow) { -webkit-box-shadow: $shadow; box-shadow: $shadow; } @@ -37,14 +37,15 @@ -webkit-tap-highlight-color: transparent; .waves-ripple { - $gradient: rgba(0, 0, 0, .2) 0,rgba(0, 0, 0, .3) 40%,rgba(0, 0, 0, .4) 50%,rgba(0, 0, 0, .5) 60%,rgba(255, 255, 255, 0) 70%; + $gradient: rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, + rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%; position: absolute; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; pointer-events: none; - background: rgba(0, 0, 0, .2); + background: rgba(0, 0, 0, 0.2); background: radial-gradient($gradient); border-radius: 50%; opacity: 0; @@ -52,27 +53,29 @@ -moz-transition-property: -moz-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; - @include waves-transition(all .5s ease-out); - @include waves-transform(scale(0) translate(0,0)); + @include waves-transition(all 0.5s ease-out); + @include waves-transform(scale(0) translate(0, 0)); } &.waves-light .waves-ripple { - $gradient: rgba(255, 255, 255, .2) 0,rgba(255, 255, 255, .3) 40%,rgba(255, 255, 255, .4) 50%,rgba(255, 255, 255, .5) 60%,rgba(255, 255, 255, 0) 70%; - background: rgba(255, 255, 255, .4); + $gradient: rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, + rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, + rgba(255, 255, 255, 0) 70%; + background: rgba(255, 255, 255, 0.4); background: radial-gradient($gradient); } &.waves-classic .waves-ripple { - background: rgba(0, 0, 0, .2); + background: rgba(0, 0, 0, 0.2); } &.waves-classic.waves-light .waves-ripple { - background: rgba(255, 255, 255, .4); + background: rgba(255, 255, 255, 0.4); } } .waves-notransition { - @include waves-transition(none #{"!important"}); + @include waves-transition(none #{" "}); } .waves-button, @@ -100,12 +103,12 @@ } .waves-button { - padding: .85em 1.1em; - border-radius: .2em; + padding: 0.85em 1.1em; + border-radius: 0.2em; } .waves-button-input { - padding: .85em 1.1em; + padding: 0.85em 1.1em; margin: 0; } @@ -113,7 +116,7 @@ position: relative; display: inline-block; vertical-align: middle; - border-radius: .2em; + border-radius: 0.2em; &.waves-button { padding: 0; @@ -137,11 +140,11 @@ .waves-float { -webkit-mask-image: none; - @include waves-box-shadow(0 1px 1.5px 1px rgba(0, 0, 0, .12)); + @include waves-box-shadow(0 1px 1.5px 1px rgba(0, 0, 0, 0.12)); @include waves-transition(all 300ms); &:active { - @include waves-box-shadow(0 8px 20px 1px rgba(0, 0, 0, .3)); + @include waves-box-shadow(0 8px 20px 1px rgba(0, 0, 0, 0.3)); } } diff --git a/scss/core/bootstrap/_rfs.scss b/scss/core/bootstrap/_rfs.scss index 497e07ed..d2fa63b3 100644 --- a/scss/core/bootstrap/_rfs.scss +++ b/scss/core/bootstrap/_rfs.scss @@ -44,9 +44,9 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size); // Remove px-unit from $rfs-base-font-size for calculations @if $rfs-base-font-size-unit == "px" { $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1); -} -@else if $rfs-base-font-size-unit == "rem" { - $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); +} @else if $rfs-base-font-size-unit == "rem" { + $rfs-base-font-size: $rfs-base-font-size / + ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); } // Cache $rfs-breakpoint unit to prevent multiple calls @@ -55,8 +55,12 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Remove unit from $rfs-breakpoint for calculations @if $rfs-breakpoint-unit-cache == "px" { $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); -} -@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" { +} @else if + $rfs-breakpoint-unit-cache == + "rem" or + $rfs-breakpoint-unit-cache == + "em" +{ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); } @@ -65,14 +69,23 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Cache $fs unit $fs-unit: if(type-of($fs) == "number", unit($fs), false); - // Add !important suffix if needed - $rfs-suffix: if($important, " !important", ""); + // Add suffix if needed + $rfs-suffix: if($important, " ", ""); // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 { + @if not + $fs-unit or + $fs-unit != + "" and + $fs-unit != + "px" and + $fs-unit != + "rem" or + $fs == + 0 + { font-size: #{$fs}#{$rfs-suffix}; - } - @else { + } @else { // Variables for storing static and fluid rescaling $rfs-static: null; $rfs-fluid: null; @@ -80,19 +93,16 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Remove px-unit from $fs for calculations @if $fs-unit == "px" { $fs: $fs / ($fs * 0 + 1); - } - @else if $fs-unit == "rem" { + } @else if $fs-unit == "rem" { $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); } // Set default font-size @if $rfs-font-size-unit == rem { $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; - } - @else if $rfs-font-size-unit == px { + } @else if $rfs-font-size-unit == px { $rfs-static: #{$fs}px#{$rfs-suffix}; - } - @else { + } @else { @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."; } @@ -110,7 +120,11 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Base font-size formatting // No need to check if the unit is valid, because we did that before - $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px); + $min-width: if( + $rfs-font-size-unit == rem, + #{$fs-min / $rfs-rem-value}rem, + #{$fs-min}px + ); // If two-dimensional, use smallest of screen width and height $variable-unit: if($rfs-two-dimensional, vmin, vw); @@ -126,18 +140,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); @if $rfs-fluid == null { // Only render static font-size if no fluid font-size is available font-size: $rfs-static; - } - @else { + } @else { $mq-value: null; // RFS breakpoint formatting @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem { $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}; - } - @else if $rfs-breakpoint-unit == px { + } @else if $rfs-breakpoint-unit == px { $mq-value: #{$rfs-breakpoint}px; - } - @else { + } @else { @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; } @@ -149,8 +160,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); &.disable-responsive-font-size { font-size: $rfs-static; } - } - @else { + } @else { font-size: $rfs-static; } @@ -161,8 +171,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); &.enable-responsive-font-size { font-size: $rfs-fluid; } - } - @else { + } @else { font-size: $rfs-fluid; } @@ -171,16 +180,14 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); min-width: 0vw; } } - } - @else { + } @else { @media (max-width: #{$mq-value}) { @if $rfs-class == "enable" { .enable-responsive-font-size &, &.enable-responsive-font-size { font-size: $rfs-fluid; } - } - @else { + } @else { font-size: $rfs-fluid; } diff --git a/scss/free/_animations-basic.scss b/scss/free/_animations-basic.scss index 80c48133..cf557fb5 100644 --- a/scss/free/_animations-basic.scss +++ b/scss/free/_animations-basic.scss @@ -42,8 +42,8 @@ @media (prefers-reduced-motion) { .animated { - transition: none !important; - animation: unset !important; + transition: none; + animation: unset; } } @@ -93,7 +93,6 @@ animation-name: fadeInLeft; } - @keyframes fadeInRight { from { opacity: 0; @@ -110,7 +109,6 @@ animation-name: fadeInRight; } - @keyframes fadeInUp { from { opacity: 0; @@ -127,7 +125,6 @@ animation-name: fadeInUp; } - @keyframes fadeOut { from { opacity: 1; @@ -142,7 +139,6 @@ animation-name: fadeOut; } - @keyframes fadeOutDown { from { opacity: 1; @@ -158,7 +154,6 @@ animation-name: fadeOutDown; } - @keyframes fadeOutLeft { from { opacity: 1; @@ -174,7 +169,6 @@ animation-name: fadeOutLeft; } - @keyframes fadeOutRight { from { opacity: 1; @@ -190,7 +184,6 @@ animation-name: fadeOutRight; } - @keyframes fadeOutUp { from { opacity: 1; diff --git a/scss/free/_badges.scss b/scss/free/_badges.scss index f4948bd0..b9e7d195 100644 --- a/scss/free/_badges.scss +++ b/scss/free/_badges.scss @@ -1,6 +1,6 @@ // Badges .badge { - color: $white !important; + color: $white; border-radius: $border-radius-base; box-shadow: $z-depth-1; } @@ -12,4 +12,3 @@ @each $name, $color in $basic-mdb-colors { @include make-badge($name, $color); } - diff --git a/scss/free/_forms.scss b/scss/free/_forms.scss index 3c4f6869..0468a8cf 100644 --- a/scss/free/_forms.scss +++ b/scss/free/_forms.scss @@ -1,7 +1,6 @@ // Forms basic // Input + label wrapper styles .md-form { - // Text inputs input:not([type]), input[type="text"]:not(.browser-default), @@ -18,7 +17,6 @@ input[type="phone"]:not(.browser-default), input[type="search-md"], textarea.md-textarea { - // General Styles box-sizing: content-box; background-color: transparent; @@ -113,9 +111,10 @@ transform-origin: 0 0; } - > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label, + > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + + label, > input[type="time"]:not(.browser-default) + label { - font-size: .8rem; + font-size: 0.8rem; transform: translateY(-25px); transform-origin: 0 0; } @@ -124,32 +123,32 @@ input[type="text"] { &:valid { + label { - color: $input-success-color !important; + color: $input-success-color; } } &:invalid { + label { - color: $input-error-color !important; + color: $input-error-color; } } } .form-control { &:valid:focus { - box-shadow: 0 1px 0 0 $input-success-color !important; + box-shadow: 0 1px 0 0 $input-success-color; } &:valid { - border-color: $input-success-color !important; + border-color: $input-success-color; } &:invalid:focus { - box-shadow: 0 1px 0 0 $input-error-color !important; + box-shadow: 0 1px 0 0 $input-error-color; } &:invalid { - border-color: $input-error-color !important; + border-color: $input-error-color; } } } @@ -157,7 +156,8 @@ // Input with label .form-control { height: auto; - padding: $input-form-control-padding-top 0 $input-form-control-padding-bottom 0; + padding: $input-form-control-padding-top 0 + $input-form-control-padding-bottom 0; margin: 0 0 $input-form-control-margin-bottom 0; background-color: transparent; border-radius: 0; @@ -176,8 +176,8 @@ border-color: $input-success-color; &:focus { - border-color: $input-success-color !important; - box-shadow: 0 1px 0 0 $input-success-color !important; + border-color: $input-success-color; + box-shadow: 0 1px 0 0 $input-success-color; } } @@ -185,18 +185,27 @@ border-color: $input-error-color; &:focus { - border-color: $input-error-color !important; - box-shadow: 0 1px 0 0 $input-error-color !important; + border-color: $input-error-color; + box-shadow: 0 1px 0 0 $input-error-color; } } &.is-valid, &.is-invalid { - background-position: center right !important; + background-position: center right; } } - @include make-input($input-validate-mb, $input-label-font-size, $input-label-active-font-size, $input-prefix-top, $input-prefix-font-size, $input-prefix-margin-left, $input-prefix-width, $input-form-text-ml); + @include make-input( + $input-validate-mb, + $input-label-font-size, + $input-label-active-font-size, + $input-prefix-top, + $input-prefix-font-size, + $input-prefix-margin-left, + $input-prefix-width, + $input-form-text-ml + ); position: relative; margin-top: $input-md-form-margin-top; margin-bottom: $input-md-form-margin-bottom; @@ -208,12 +217,12 @@ font-size: 1rem; color: $input-label-color; cursor: text; - transition: transform .2s ease-out, color .2s ease-out; + transition: transform 0.2s ease-out, color 0.2s ease-out; transform: translateY(12px); transform-origin: 0% 100%; &.active { - transform: translateY(-14px) scale(.8); + transform: translateY(-14px) scale(0.8); } } @@ -227,11 +236,29 @@ } &.form-lg { - @include make-input($input-validate-mb-lg, $input-label-font-size-lg, $input-label-active-font-size-lg, $input-prefix-top-lg, $input-prefix-font-size-lg, $input-prefix-margin-left-lg, $input-prefix-width-lg, $input-form-text-ml-lg); + @include make-input( + $input-validate-mb-lg, + $input-label-font-size-lg, + $input-label-active-font-size-lg, + $input-prefix-top-lg, + $input-prefix-font-size-lg, + $input-prefix-margin-left-lg, + $input-prefix-width-lg, + $input-form-text-ml-lg + ); } &.form-sm { - @include make-input($input-validate-mb-sm, $input-label-font-size-sm, $input-label-active-font-size-sm, $input-prefix-top-sm, $input-prefix-font-size-sm, $input-prefix-margin-left-sm, $input-prefix-width-sm, $input-form-text-ml-sm); + @include make-input( + $input-validate-mb-sm, + $input-label-font-size-sm, + $input-label-active-font-size-sm, + $input-prefix-top-sm, + $input-prefix-font-size-sm, + $input-prefix-margin-left-sm, + $input-prefix-width-sm, + $input-form-text-ml-sm + ); } // Textarea @@ -286,7 +313,7 @@ border-radius: 4px; outline: none; box-shadow: none; - transition: all .3s; + transition: all 0.3s; // Focused input style &:focus:not([readonly]) { @@ -344,7 +371,8 @@ } } - > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label, + > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + + label, > input[type="time"]:not(.browser-default) + label { left: 8px; padding-right: 5px; @@ -352,13 +380,14 @@ font-size: 1rem; font-weight: 500; background: #fff; - transform: translateY(-9px) scale(.8); + transform: translateY(-9px) scale(0.8); transform-origin: 0 0; } - > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label.active, + > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + + label.active, > input[type="time"]:not(.browser-default) + label.active { - transform: translateY(-9px) scale(.8); + transform: translateY(-9px) scale(0.8); transform-origin: 0 0; } @@ -384,7 +413,7 @@ } .form-control { - padding: .375rem .75rem; + padding: 0.375rem 0.75rem; } label { @@ -395,7 +424,7 @@ font-size: 1rem; color: #757575; cursor: text; - transition: transform .2s ease-out, color .2s ease-out; + transition: transform 0.2s ease-out, color 0.2s ease-out; transform: translateY(9px); transform-origin: 0% 100%; @@ -405,14 +434,14 @@ padding-left: 5px; font-weight: 500; background: #fff; - transform: translateY(-13px) scale(.8); + transform: translateY(-13px) scale(0.8); } } &.form-lg { .form-control { &.form-control-lg { - padding: .5rem .725rem; + padding: 0.5rem 0.725rem; } } @@ -422,12 +451,12 @@ &.active { font-size: 1.1rem; - transform: translateY(-14px) scale(.8); + transform: translateY(-14px) scale(0.8); } } .prefix { - top: .65rem; + top: 0.65rem; font-size: 25px; ~ input, @@ -449,22 +478,22 @@ &.form-sm { .form-control { &.form-control-sm { - padding: .25rem .625rem; + padding: 0.25rem 0.625rem; } } label { - font-size: .8rem; + font-size: 0.8rem; transform: translateY(8px); &.active { - font-size: .85rem; - transform: translateY(-12px) scale(.8); + font-size: 0.85rem; + transform: translateY(-12px) scale(0.8); } } .prefix { - top: .5rem; + top: 0.5rem; font-size: 15px; ~ input, @@ -485,9 +514,9 @@ .prefix { position: absolute; - top: .6rem; + top: 0.6rem; font-size: 20px; - transition: color .2s; + transition: color 0.2s; &:focus { color: #4285f4; @@ -509,12 +538,11 @@ } .character-counter { - margin-top: -.5rem; + margin-top: -0.5rem; } } &.md-bg { - input[type="text"], input[type="password"], input[type="email"], @@ -535,13 +563,18 @@ box-sizing: border-box; padding: 10px 5px; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, $input-md-focus-color, $input-md-focus-color), linear-gradient(to bottom, $input-border-color, $input-border-color); + background-image: linear-gradient( + to bottom, + $input-md-focus-color, + $input-md-focus-color + ), + linear-gradient(to bottom, $input-border-color, $input-border-color); background-position: 50% 100%, 50% 100%; background-size: 0 2px, 100% 1px; border: 0; - border-top-left-radius: .3rem; - border-top-right-radius: .3rem; - transition: background-size .3s cubic-bezier(.64, .09, .08, 1); + border-top-left-radius: 0.3rem; + border-top-right-radius: 0.3rem; + transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); &:focus { background-color: #dcdcdc; @@ -554,50 +587,49 @@ transform-origin: 0 0; } - > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label, + > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + + label, > input[type="time"]:not(.browser-default) + label { - font-size: .8rem; + font-size: 0.8rem; transform: translateY(-12px); transform-origin: 0 0; } .form-control { - padding: 1.1rem .7rem .4rem !important; + padding: 1.1rem 0.7rem 0.4rem; } label { top: 0; - padding-left: .7rem; + padding-left: 0.7rem; font-size: 1rem; - transition: transform .2s ease-out, color .2s ease-out; + transition: transform 0.2s ease-out, color 0.2s ease-out; transform: translateY(13px); transform-origin: 0% 100%; &.active { - padding-left: .75rem; + padding-left: 0.75rem; font-weight: 500; - transform: translateY(-3px) scale(.8); + transform: translateY(-3px) scale(0.8); } } &.form-lg { - label { transform: translateY(16px); &.active { - transform: translateY(-4px) scale(.8); + transform: translateY(-4px) scale(0.8); } } } &.form-sm { - label { transform: translateY(11px); &.active { - transform: translateY(-2px) scale(.8); + transform: translateY(-2px) scale(0.8); } } } @@ -615,12 +647,11 @@ } .needs-validation .md-form label { - left: .3rem; + left: 0.3rem; } // Custom file input browser support -@each $lang, - $text in $custom-mdb-file-text { +@each $lang, $text in $custom-mdb-file-text { .custom-file-input { &:lang(#{$lang}) { & ~ .custom-file-label { @@ -641,7 +672,7 @@ } .form-control { - box-sizing: border-box !important; + box-sizing: border-box; } .form-control.valid + label, @@ -654,7 +685,7 @@ top: 50%; transform: translateY(-50%); transition: $input-prefix-transition; - color: rgba(0,0,0,.87); + color: rgba(0, 0, 0, 0.87); pointer-events: none; &.active { @@ -674,24 +705,22 @@ } .form-control { - padding-left: 2.7rem !important; + padding-left: 2.7rem; } } &.input-with-post-icon { - .input-prefix { right: 16px; left: initial; } .form-control { - padding-right: 2.7rem !important; + padding-right: 2.7rem; } } &.input-with-post-icon.input-with-pre-icon { - .input-prefix { right: 16px; left: initial; @@ -703,9 +732,8 @@ } .form-control { - padding-left: 2.5rem !important; - padding-right: 2.5rem !important; + padding-left: 2.5rem; + padding-right: 2.5rem; } } - } diff --git a/scss/free/_modals.scss b/scss/free/_modals.scss index 295fa97b..31439685 100644 --- a/scss/free/_modals.scss +++ b/scss/free/_modals.scss @@ -2,14 +2,14 @@ // Styles for body body { &.modal-open { - padding-right: 0 !important; + padding-right: 0; overflow: auto; .fixed-top { - padding-right: 1rem !important; + padding-right: 1rem; } .fixed-bottom { - padding-right: 0 !important; + padding-right: 0; } } &.scrollable { @@ -41,7 +41,8 @@ body { // Cascading header .modal-header { padding: $cascading-modal-padding; - margin: $cascading-modal-margin-top $cascading-modal-margin-right $cascading-modal-margin-bottom $cascading-modal-margin-left; + margin: $cascading-modal-margin-top $cascading-modal-margin-right + $cascading-modal-margin-bottom $cascading-modal-margin-left; text-align: center; border: none; border-radius: $border-radius-base; @@ -53,7 +54,9 @@ body { width: 100%; margin-bottom: 0; font-size: $cascading-modal-font-size; - .fas, .fab, .far { + .fas, + .fab, + .far { margin-right: $cascading-modal-fa-margin-right; } } @@ -68,7 +71,8 @@ body { .modal-c-tabs { .md-tabs { display: flex; - margin: $cascading-modal-tabs-margin-top $cascading-modal-tabs-margin-x 0 $cascading-modal-tabs-margin-x; + margin: $cascading-modal-tabs-margin-top $cascading-modal-tabs-margin-x + 0 $cascading-modal-tabs-margin-x; box-shadow: $z-depth-1; li { flex: 1; @@ -110,7 +114,8 @@ body { margin-top: $modal-avatar-margin-top; .modal-header { @extend .img-fluid; - margin: $modal-avatar-header-margin-top 0 $modal-avatar-header-margin-bottom; + margin: $modal-avatar-header-margin-top 0 + $modal-avatar-header-margin-bottom; box-shadow: none; img { width: $modal-avatar-img-width; @@ -141,11 +146,13 @@ body { color: $grey-darken-2; } @each $name, $color in $basic { - &.modal-#{$name} { + &.modal-#{$name} { .modal-header { background-color: $color; } - .fas, .fab, .far { + .fas, + .fab, + .far { color: $color; } .badge { @@ -175,7 +182,7 @@ body { &.modal-scrolling { height: min-content; } - padding-right: 0 !important; + padding-right: 0; .modal-dialog { @media (min-width: 768px) { &.modal-top { @@ -247,8 +254,8 @@ body { .modal-frame { position: absolute; width: 100%; - max-width: 100% !important; - margin: 0 !important; + max-width: 100%; + margin: 0; &.modal-bottom { bottom: 0; } diff --git a/scss/free/_navbars.scss b/scss/free/_navbars.scss index c939a550..0a054568 100644 --- a/scss/free/_navbars.scss +++ b/scss/free/_navbars.scss @@ -5,7 +5,8 @@ form { .md-form { input { - margin: 0 $navbar-form-input-mr $navbar-form-input-mb $navbar-form-input-ml; + margin: 0 $navbar-form-input-mr $navbar-form-input-mb + $navbar-form-input-ml; } } } @@ -48,7 +49,9 @@ pointer-events: none; } } - .fas, .fab, .far { + .fas, + .fab, + .far { padding-right: $navbar-flex-icons-padding-lg; padding-left: $navbar-flex-icons-padding-lg; } @@ -59,7 +62,7 @@ } } .dropdown-menu { - position: absolute !important; + position: absolute; margin-top: 0; a { padding: $navbar-dropdown-menu-padding; @@ -79,10 +82,22 @@ } } &.navbar-light { - @include make-navbar($navbar-light-disabled-color, $navbar-light-toggler-icon, $black, $navbar-light-hover-color, $navbar-light-bg-active-color); + @include make-navbar( + $navbar-light-disabled-color, + $navbar-light-toggler-icon, + $black, + $navbar-light-hover-color, + $navbar-light-bg-active-color + ); } &.navbar-dark { - @include make-navbar($navbar-dark-disabled-color, $navbar-dark-toggler-icon, $white, $navbar-dark-hover-color, $navbar-dark-bg-active-color); + @include make-navbar( + $navbar-dark-disabled-color, + $navbar-dark-toggler-icon, + $white, + $navbar-dark-hover-color, + $navbar-dark-bg-active-color + ); } &.scrolling-navbar { @media (min-width: $small-screen) { diff --git a/scss/free/_steppers.scss b/scss/free/_steppers.scss index 6f2efc15..1a0dc627 100644 --- a/scss/free/_steppers.scss +++ b/scss/free/_steppers.scss @@ -48,7 +48,7 @@ ul.stepper { &.warning { a { .circle { - // background-color: #ff3547 !important; + // background-color: #ff3547 ; @extend .danger-color !optional; } } @@ -94,7 +94,7 @@ ul.stepper { } &:hover { - background-color: rgba(0, 0, 0, .06); + background-color: rgba(0, 0, 0, 0.06); } } @@ -125,7 +125,7 @@ ul.stepper { } > li:not(:last-of-type) { - margin-bottom: 0 !important; + margin-bottom: 0; } }