From dd4f1d7029910fe601e978f435725d32b48235c8 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Sun, 12 Dec 2021 20:20:53 +0530 Subject: [PATCH] :recycle: enable order/properties-order --- .stylelintrc | 1 - src/scss/_brand-container.scss | 16 +-- src/scss/_cards.scss | 62 ++++++------ src/scss/_colors.scss | 8 +- src/scss/_content-header.scss | 2 +- src/scss/_content-wrapper.scss | 4 +- src/scss/_direct-chat.scss | 62 ++++++------ src/scss/_dropdown.scss | 44 ++++---- src/scss/_info-box.scss | 20 ++-- src/scss/_layout-fixed.scss | 6 +- src/scss/_layout-mobile.scss | 2 +- src/scss/_main-footer.scss | 6 +- src/scss/_main-header.scss | 12 +-- src/scss/_main-sidebar.scss | 6 +- src/scss/_miscellaneous.scss | 124 +++++++++++------------ src/scss/_nav-sidebar.scss | 6 +- src/scss/_products.scss | 10 +- src/scss/_progress-bars.scss | 6 +- src/scss/_sidebar-collapse.scss | 4 +- src/scss/_sidebar-horizontal.scss | 12 +-- src/scss/_sidebar.scss | 8 +- src/scss/_small-box.scss | 32 +++--- src/scss/_table.scss | 8 +- src/scss/_users-list.scss | 10 +- src/scss/_wrapper.scss | 9 +- src/scss/dark/_cards.scss | 2 +- src/scss/dark/_content-wrapper.scss | 2 +- src/scss/dark/_direct-chat.scss | 4 +- src/scss/dark/_info-box.scss | 2 +- src/scss/dark/_products.scss | 2 +- src/scss/mixins/_animations.scss | 8 +- src/scss/mixins/_backgrounds.scss | 4 +- src/scss/mixins/_brand-variant.scss | 2 +- src/scss/mixins/_direct-chat.scss | 2 +- src/scss/mixins/_header-variant.scss | 4 +- src/scss/mixins/_nav-treeview-dark.scss | 8 +- src/scss/mixins/_nav-treeview-light.scss | 8 +- src/scss/mixins/_sidebar-color.scss | 2 +- src/scss/pages/_login_and_register.scss | 20 ++-- 39 files changed, 275 insertions(+), 275 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index e3c600dfe..17c057466 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -10,7 +10,6 @@ "darken" ], "keyframes-name-pattern": null, - "order/properties-order": null, "selector-max-class": null, "selector-max-combinators": null, "selector-max-compound-selectors": null, diff --git a/src/scss/_brand-container.scss b/src/scss/_brand-container.scss index 61377e40a..2b6229805 100644 --- a/src/scss/_brand-container.scss +++ b/src/scss/_brand-container.scss @@ -8,11 +8,11 @@ display: grid; grid-template-areas: "brand-link pushmenu"; justify-content: space-between; - font-size: $navbar-brand-font-size; - transition: width $lte-transition-speed $lte-transition-fn; padding: $lte-brand-link-padding-y $lte-sidebar-padding-x; - white-space: nowrap; overflow: hidden; + font-size: $navbar-brand-font-size; + white-space: nowrap; + transition: width $lte-transition-speed $lte-transition-fn; .brand-link { grid-area: brand-link; @@ -23,12 +23,12 @@ .brand-image { float: left; - line-height: .8; - margin-left: .8rem; - margin-right: .5rem; - margin-top: -3px; - max-height: 33px; width: auto; + max-height: 33px; + margin-top: -3px; + margin-right: .5rem; + margin-left: .8rem; + line-height: .8; } } diff --git a/src/scss/_cards.scss b/src/scss/_cards.scss index e092c1173..54a6f7555 100644 --- a/src/scss/_cards.scss +++ b/src/scss/_cards.scss @@ -27,14 +27,14 @@ } &.maximized-card { - height: 100% !important; - left: 0; - max-height: 100% !important; - max-width: 100% !important; position: fixed; top: 0; - width: 100% !important; + left: 0; z-index: $zindex-modal-backdrop; + width: 100% !important; + max-width: 100% !important; + height: 100% !important; + max-height: 100% !important; &.was-collapsed .card-body { display: block !important; @@ -64,8 +64,8 @@ .nav.flex-column { > li { - border-bottom: 1px solid $card-border-color; margin: 0; + border-bottom: 1px solid $card-border-color; &:last-of-type { border-bottom: 0; @@ -107,8 +107,8 @@ border-bottom: 0; &:first-child .nav-link { - border-left: 0; margin-left: 0; + border-left: 0; } } } @@ -148,8 +148,8 @@ .card-header { .nav-item { &:first-child .nav-link { - border-left: 0; margin-left: 0; + border-left: 0; } } @@ -211,10 +211,10 @@ html.maximized-card { // Box header .card-header { + position: relative; + padding: (($card-spacer-y * .5) * 2) $card-spacer-x; background-color: transparent; border-bottom: 1px solid $card-border-color; - padding: (($card-spacer-y * .5) * 2) $card-spacer-x; - position: relative; @if $enable-rounded { @include border-top-radius($border-radius); @@ -231,8 +231,8 @@ html.maximized-card { .input-group, .nav, .pagination { - margin-bottom: -$card-spacer-y & .4; margin-top: -$card-spacer-y & .4; + margin-bottom: -$card-spacer-y & .4; } [data-bs-toggle="tooltip"] { @@ -243,9 +243,9 @@ html.maximized-card { .card-title { float: left; + margin: 0; font-size: $lte-card-title-font-size; font-weight: $lte-card-title-font-weight; - margin: 0; } .card-text { @@ -255,11 +255,11 @@ html.maximized-card { // Box Tools Buttons .btn-tool { - background-color: transparent; - color: $gray-500; - font-size: $font-size-sm; - margin: -(($card-spacer-y * .5) * 2) 0; padding: .25rem .5rem; + margin: -(($card-spacer-y * .5) * 2) 0; + font-size: $font-size-sm; + color: $gray-500; + background-color: transparent; .btn-group.show &, &:hover { @@ -331,8 +331,8 @@ html.maximized-card { .card-comment { @include clearfix (); - border-bottom: 1px solid $gray-200; padding: 8px 0; + border-bottom: 1px solid $gray-200; &:last-of-type { border-bottom: 0; @@ -343,21 +343,21 @@ html.maximized-card { } img { - height: $lte-card-img-size; - width: $lte-card-img-size; float: left; + width: $lte-card-img-size; + height: $lte-card-img-size; } } .comment-text { - color: tint-color($gray-700, 20%); margin-left: 40px; + color: tint-color($gray-700, 20%); } .username { - color: $gray-700; display: block; font-weight: 600; + color: $gray-700; } .text-muted { @@ -371,19 +371,19 @@ html.maximized-card { // Widget: TODO LIST .todo-list { - list-style: none; + padding: 0; margin: 0; overflow: auto; - padding: 0; + list-style: none; // Todo list element > li { @include border-radius(2px); + padding: 10px; + margin-bottom: 2px; + color: $gray-700; background-color: $gray-100; border-left: 2px solid $gray-200; - color: $gray-700; - margin-bottom: 2px; - padding: 10px; &:last-of-type { margin-bottom: 0; @@ -395,21 +395,21 @@ html.maximized-card { .text { display: inline-block; - font-weight: 600; margin-left: 5px; + font-weight: 600; } // Time labels .badge { - font-size: .7rem; margin-left: 10px; + font-size: .7rem; } // Tools and options box .tools { - color: $danger; display: none; float: right; + color: $danger; // TODO: create new class for reduce files // icons @@ -418,8 +418,8 @@ html.maximized-card { > img, > object, > iframe { - cursor: pointer; margin-right: 5px; + cursor: pointer; } } @@ -455,9 +455,9 @@ html.maximized-card { } .handle { - cursor: move; display: inline-block; margin: 0 5px; + cursor: move; } } diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss index 6a5f515b2..fcb10e87c 100644 --- a/src/scss/_colors.scss +++ b/src/scss/_colors.scss @@ -13,23 +13,23 @@ } .bg-gray { - background-color: $gray-500; color: color-contrast($gray-500); + background-color: $gray-500; } .bg-gray-light { - background-color: tint-color($gray-200, 3%); color: color-contrast(tint-color($gray-200, 3%)) !important; + background-color: tint-color($gray-200, 3%); } .bg-black { - background-color: $black; color: color-contrast($black) !important; + background-color: $black; } .bg-white { - background-color: $white; color: color-contrast($white) !important; + background-color: $white; } // Backgrund Color Disabled diff --git a/src/scss/_content-header.scss b/src/scss/_content-header.scss index 3890d35c8..b0b81cca8 100644 --- a/src/scss/_content-header.scss +++ b/src/scss/_content-header.scss @@ -2,8 +2,8 @@ padding: 1rem $lte-content-padding-x; .breadcrumb { - margin-bottom: 0; padding: 0; + margin-bottom: 0; line-height: 2.5rem; } } diff --git a/src/scss/_content-wrapper.scss b/src/scss/_content-wrapper.scss index 1c665063e..4f2a7b4c0 100644 --- a/src/scss/_content-wrapper.scss +++ b/src/scss/_content-wrapper.scss @@ -1,6 +1,6 @@ .content-wrapper { grid-area: content-wrapper; - background-color: $lte-main-bg; - color: $lte-main-color; padding-bottom: 1rem; + color: $lte-main-color; + background-color: $lte-main-bg; } diff --git a/src/scss/_direct-chat.scss b/src/scss/_direct-chat.scss index a76888808..077d70aee 100644 --- a/src/scss/_direct-chat.scss +++ b/src/scss/_direct-chat.scss @@ -4,9 +4,9 @@ .direct-chat { .card-body { - overflow-x: hidden; - padding: 0; position: relative; + padding: 0; + overflow-x: hidden; } &.chat-pane-open { @@ -32,8 +32,8 @@ .direct-chat-messages { @include translate(0, 0); height: 250px; - overflow: auto; padding: 10px; + overflow: auto; } .direct-chat-msg, @@ -56,47 +56,47 @@ @include border-radius($border-radius-lg); } + position: relative; + padding: 5px 10px; + margin: 5px 0 0 50px; + color: $lte-direct-chat-default-font-color; background-color: $lte-direct-chat-default-msg-bg; border: 1px solid $lte-direct-chat-default-msg-border-color; - color: $lte-direct-chat-default-font-color; - margin: 5px 0 0 50px; - padding: 5px 10px; - position: relative; //Create the arrow &::after, &::before { - border: solid transparent; - border-right-color: $lte-direct-chat-default-msg-border-color; - content: " "; + position: absolute; + top: 15px; + right: 100%; + width: 0; height: 0; pointer-events: none; - position: absolute; - right: 100%; - top: 15px; - width: 0; + content: " "; + border: solid transparent; + border-right-color: $lte-direct-chat-default-msg-border-color; } &::after { - border-width: 5px; margin-top: -5px; + border-width: 5px; } &::before { - border-width: 6px; margin-top: -6px; + border-width: 6px; } .end & { - margin-left: 0; margin-right: 50px; + margin-left: 0; &::after, &::before { - border-left-color: $lte-direct-chat-default-msg-border-color; - border-right-color: transparent; - left: 100%; right: auto; + left: 100%; + border-right-color: transparent; + border-left-color: $lte-direct-chat-default-msg-border-color; } } } @@ -104,8 +104,8 @@ .direct-chat-img { @include border-radius(50%); float: left; - height: 40px; width: 40px; + height: 40px; .end & { float: right; @@ -114,8 +114,8 @@ .direct-chat-infos { display: block; - font-size: $font-size-sm; margin-bottom: 2px; + font-size: $font-size-sm; } .direct-chat-name { @@ -135,14 +135,14 @@ .direct-chat-contacts { @include translate(101%, 0); - background-color: $dark; - bottom: 0; - color: $white; - height: 250px; - overflow: auto; position: absolute; top: 0; + bottom: 0; width: 100%; + height: 250px; + overflow: auto; + color: $white; + background-color: $dark; } .direct-chat-contacts-light { @@ -167,9 +167,9 @@ > li { @include clearfix (); - border-bottom: 1px solid rgba($black, .2); - margin: 0; padding: 10px; + margin: 0; + border-bottom: 1px solid rgba($black, .2); &:last-of-type { border-bottom: 0; @@ -184,8 +184,8 @@ } .contacts-list-info { - color: $white; margin-left: 45px; + color: $white; } .contacts-list-name, @@ -202,8 +202,8 @@ } .contacts-list-date { - color: $gray-400; font-weight: 400; + color: $gray-400; } .contacts-list-msg { diff --git a/src/scss/_dropdown.scss b/src/scss/_dropdown.scss index 0f4e28a0f..3cb5a11a4 100644 --- a/src/scss/_dropdown.scss +++ b/src/scss/_dropdown.scss @@ -23,8 +23,8 @@ } .dropdown-item-title { - font-size: $font-size-base; margin: 0; + font-size: $font-size-base; } .dropdown-icon { @@ -35,8 +35,8 @@ // Dropdown Sizes .dropdown-menu-lg { - max-width: 300px; min-width: 280px; + max-width: 300px; padding: 0; .dropdown-divider { @@ -60,15 +60,15 @@ > a::after { @include caret-end (); float: right; - margin-left: .5rem; margin-top: .5rem; + margin-left: .5rem; } > .dropdown-menu { - left: 100%; - margin-left: 0; - margin-top: 0; top: 0; + left: 100%; + margin-top: 0; + margin-left: 0; } } @@ -87,8 +87,8 @@ // Dropdown Sizes .dropdown-menu-xl { - max-width: 420px; min-width: 360px; + max-width: 420px; padding: 0; .dropdown-divider { @@ -109,8 +109,8 @@ .dropdown-footer, .dropdown-header { display: block; - font-size: $font-size-sm; padding: .5rem $dropdown-item-padding-x; + font-size: $font-size-sm; text-align: center; } @@ -142,8 +142,8 @@ position: absolute; right: 5%; left: auto; - border: 1px solid #ddd; background-color: $white; + border: 1px solid #ddd; } } } @@ -157,8 +157,8 @@ > .dropdown-menu { @include border-top-radius(0); - padding: 0; width: 280px; + padding: 0; &, > .user-body { @@ -174,8 +174,8 @@ // User image > img { z-index: 5; - height: 90px; width: 90px; + height: 90px; border: 3px solid; border-color: transparent; border-color: rgba(255, 255, 255, .2); @@ -183,9 +183,9 @@ > p { z-index: 5; + margin-top: 10px; font-size: 17px; //text-shadow: 2px 2px 3px #333333; - margin-top: 10px; > small { display: block; @@ -197,14 +197,14 @@ // Menu Body > .user-body { @include clearfix (); - border-bottom: 1px solid $gray-700; - border-top: 1px solid $gray-300; padding: 15px; + border-top: 1px solid $gray-300; + border-bottom: 1px solid $gray-700; a { @include media-breakpoint-up(sm) { - background-color: $white !important; color: $gray-700 !important; + background-color: $white !important; } } } @@ -212,8 +212,8 @@ // Menu Footer > .user-footer { @include clearfix (); - background-color: $gray-100; padding: 10px; + background-color: $gray-100; .btn-default { color: $gray-600; @@ -230,16 +230,16 @@ .user-image { @include media-breakpoint-up(sm) { float: none; - line-height: 10px; - margin-right: .4rem; margin-top: -8px; + margin-right: .4rem; + line-height: 10px; } - border-radius: 50%; float: left; - height: $lte-sidebar-user-image-width; - // margin-right: 10px; - margin-top: -2px; width: $lte-sidebar-user-image-width; + height: $lte-sidebar-user-image-width; + margin-top: -2px; + // margin-right: 10px; + border-radius: 50%; } } diff --git a/src/scss/_info-box.scss b/src/scss/_info-box.scss index 766ada9bb..6ba115557 100644 --- a/src/scss/_info-box.scss +++ b/src/scss/_info-box.scss @@ -6,18 +6,18 @@ @include box-shadow($lte-card-shadow); @include border-radius($border-radius); - background-color: $white; + position: relative; display: flex; - margin-bottom: map-get($spacers, 3); + width: 100%; min-height: 80px; padding: .5rem; - position: relative; - width: 100%; + margin-bottom: map-get($spacers, 3); + background-color: $white; .progress { - background-color: rgba($black, .125); height: 2px; margin: 5px 0; + background-color: rgba($black, .125); .progress-bar { background-color: $white; @@ -29,12 +29,12 @@ border-radius: $border-radius; } - align-items: center; display: flex; - font-size: 1.875rem; + align-items: center; justify-content: center; - text-align: center; width: 70px; + font-size: 1.875rem; + text-align: center; > img { max-width: 100%; @@ -43,11 +43,11 @@ .info-box-content { display: flex; + flex: 1; flex-direction: column; justify-content: center; - line-height: 1.8; - flex: 1; padding: 0 10px; + line-height: 1.8; } .info-box-number { diff --git a/src/scss/_layout-fixed.scss b/src/scss/_layout-fixed.scss index 602ab8729..b7bf5beb2 100644 --- a/src/scss/_layout-fixed.scss +++ b/src/scss/_layout-fixed.scss @@ -1,11 +1,11 @@ @include media-breakpoint-up(lg) { .layout-fixed:not(.sidebar-horizontal) { .main-sidebar { - bottom: 0; - float: none; - left: 0; position: fixed; top: auto; + bottom: 0; + left: 0; + float: none; .sidebar { height: subtract(100vh, add($lte-main-header-height-inner, $lte-main-header-bottom-border-width)); diff --git a/src/scss/_layout-mobile.scss b/src/scss/_layout-mobile.scss index ee4be0dbf..1b8c9ce80 100644 --- a/src/scss/_layout-mobile.scss +++ b/src/scss/_layout-mobile.scss @@ -4,8 +4,8 @@ position: fixed; top: 0; bottom: 0; - margin-left: -#{$lte-sidebar-width}; min-height: 100vh; + margin-left: -#{$lte-sidebar-width}; .sidebar { overflow-x: hidden; diff --git a/src/scss/_main-footer.scss b/src/scss/_main-footer.scss index 82b7160c1..c4b09430f 100644 --- a/src/scss/_main-footer.scss +++ b/src/scss/_main-footer.scss @@ -4,11 +4,11 @@ .main-footer { grid-area: main-footer; + width: inherit; + padding: $lte-main-footer-padding; + color: $lte-main-footer-color; background-color: $lte-main-footer-bg; border-top: $lte-main-footer-border-top; - color: $lte-main-footer-color; - padding: $lte-main-footer-padding; - width: inherit; // .fs-7 &, // &.fs-7 { diff --git a/src/scss/_main-header.scss b/src/scss/_main-header.scss index 071ec992c..2ae0e68bd 100644 --- a/src/scss/_main-header.scss +++ b/src/scss/_main-header.scss @@ -10,24 +10,24 @@ ); .main-header { + z-index: $lte-zindex-main-header; grid-area: main-header; border-bottom: $lte-main-header-bottom-border; - z-index: $lte-zindex-main-header; .nav-link { - height: $nav-link-height; position: relative; + height: $nav-link-height; } } // Navbar badge .navbar-badge { + position: absolute; + top: 9px; + right: 5px; + padding: 2px 4px; font-size: .6rem; font-weight: 300; - padding: 2px 4px; - position: absolute; - right: 5px; - top: 9px; } .layout-navbar-fixed { diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss index d1b7d1923..30b231bca 100644 --- a/src/scss/_main-sidebar.scss +++ b/src/scss/_main-sidebar.scss @@ -41,23 +41,23 @@ // } .main-sidebar { - grid-area: main-sidebar; @include transition($lte-sidebar-transition); z-index: $lte-zindex-sidebar; + grid-area: main-sidebar; min-width: $lte-sidebar-width; max-width: $lte-sidebar-width; .nav-sidebar > .nav-item { > .nav-link.active { - background-color: var(--lte-sidebar-menu-active-bg); color: var(--lte-sidebar-menu-active-color); + background-color: var(--lte-sidebar-menu-active-bg); } } } .hold-transition { .main-sidebar { - animation: none !important; transition: none !important; + animation: none !important; } } diff --git a/src/scss/_miscellaneous.scss b/src/scss/_miscellaneous.scss index 6e61487d2..23f04310d 100644 --- a/src/scss/_miscellaneous.scss +++ b/src/scss/_miscellaneous.scss @@ -17,10 +17,10 @@ } > .description-header { + padding: 0; + margin: 0; font-size: 16px; font-weight: 600; - margin: 0; - padding: 0; } > .description-text { @@ -36,31 +36,31 @@ // List utility classes .list-group-unbordered { > .list-group-item { + padding-right: 0; + padding-left: 0; + border-right: 0; border-left: 0; border-radius: 0; - border-right: 0; - padding-left: 0; - padding-right: 0; } } .list-header { - color: $gray-600; + padding: 10px 4px; font-size: 15px; font-weight: 700; - padding: 10px 4px; + color: $gray-600; } .list-seperator { - background-color: $card-border-color; height: 1px; margin: 15px 0 9px; + background-color: $card-border-color; } .list-link { > a { - color: $gray-600; padding: 4px; + color: $gray-600; &:hover { color: $gray-900; @@ -74,8 +74,8 @@ img { float: left; - height: 40px; width: 40px; + height: 40px; } .username, @@ -86,15 +86,15 @@ } .username { + margin-top: -1px; font-size: 16px; font-weight: 600; - margin-top: -1px; } .description { - color: $gray-600; - font-size: 13px; margin-top: -3px; + font-size: 13px; + color: $gray-600; } &.user-block-sm { @@ -123,8 +123,8 @@ } .img-sm { - height: $lte-img-size-sm; width: $lte-img-size-sm; + height: $lte-img-size-sm; + .img-push { margin-left: $lte-img-size-sm + $lte-img-size-push; @@ -151,13 +151,13 @@ // Image bordered .img-bordered { - border: 3px solid $gray-500; padding: 3px; + border: 3px solid $gray-500; } .img-bordered-sm { - border: 2px solid $gray-500; padding: 2px; + border: 2px solid $gray-500; } // Rounded and Circle Images @@ -197,35 +197,35 @@ } .size-32 { + width: 32px; height: 32px; line-height: 32px; - width: 32px; } .size-40 { + width: 40px; height: 40px; line-height: 40px; - width: 40px; } .size-50 { + width: 50px; height: 50px; line-height: 50px; - width: 50px; } // General attachemnt block .attachment-block { + padding: 5px; + margin-bottom: 10px; background-color: $gray-100; border: 1px solid $card-border-color; - margin-bottom: 10px; - padding: 5px; .attachment-img { float: left; + max-width: 100px; height: auto; max-height: 100px; - max-width: 100px; } .attachment-pushed { @@ -249,20 +249,20 @@ // Box overlay for LOADING STATE effect > .overlay, > .loading-img { - height: 100%; - left: 0; position: absolute; top: 0; + left: 0; width: 100%; + height: 100%; } .overlay { @include border-radius($border-radius); - align-items: center; - background-color: rgba($white, .7); - display: flex; - justify-content: center; z-index: 50; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba($white, .7); > i, > svg, @@ -291,13 +291,13 @@ > .overlay-wrapper { position: relative; > .overlay { - border-top-left-radius: 0; - border-top-right-radius: 0; flex-direction: column; + width: add(100%, (2 * $card-spacer-x)); + height: add(100%, (2 * $card-spacer-x)); margin-top: -$card-spacer-x; margin-left: -$card-spacer-x; - height: add(100%, (2 * $card-spacer-x)); - width: add(100%, (2 * $card-spacer-x)); + border-top-left-radius: 0; + border-top-right-radius: 0; &.dark { color: $white; } @@ -307,58 +307,58 @@ // Ribbon .ribbon-wrapper { + position: absolute; + top: -2px; + right: -2px; + z-index: 10; + width: $lte-ribbon-wrapper-size; height: $lte-ribbon-wrapper-size; overflow: hidden; - position: absolute; - right: -2px; - top: -2px; - width: $lte-ribbon-wrapper-size; - z-index: 10; &.ribbon-lg { - height: $lte-ribbon-lg-wrapper-size; width: $lte-ribbon-lg-wrapper-size; + height: $lte-ribbon-lg-wrapper-size; .ribbon { - right: $lte-ribbon-lg-right; top: $lte-ribbon-lg-top; + right: $lte-ribbon-lg-right; width: $lte-ribbon-lg-width; } } &.ribbon-xl { - height: $lte-ribbon-xl-wrapper-size; width: $lte-ribbon-xl-wrapper-size; + height: $lte-ribbon-xl-wrapper-size; .ribbon { - right: $lte-ribbon-xl-right; top: $lte-ribbon-xl-top; + right: $lte-ribbon-xl-right; width: $lte-ribbon-xl-width; } } .ribbon { - box-shadow: 0 0 $lte-ribbon-border-size rgba($black, .3); + position: relative; + top: $lte-ribbon-top; + right: $lte-ribbon-right; + width: $lte-ribbon-width; + padding: $lte-ribbon-padding; font-size: $lte-ribbon-font-size; line-height: $lte-ribbon-line-height; - padding: $lte-ribbon-padding; - position: relative; - right: $lte-ribbon-right; text-align: center; text-shadow: 0 -1px 0 rgba($black, .4); text-transform: uppercase; - top: $lte-ribbon-top; + box-shadow: 0 0 $lte-ribbon-border-size rgba($black, .3); transform: rotate(45deg); - width: $lte-ribbon-width; &::before, &::after { - border-left: $lte-ribbon-border-size solid transparent; - border-right: $lte-ribbon-border-size solid transparent; - border-top: $lte-ribbon-border-size solid #9e9e9e; + position: absolute; bottom: -$lte-ribbon-border-size; content: ""; - position: absolute; + border-top: $lte-ribbon-border-size solid #9e9e9e; + border-right: $lte-ribbon-border-size solid transparent; + border-left: $lte-ribbon-border-size solid transparent; } &::before { @@ -373,9 +373,9 @@ // Scroll To Top .back-to-top { - bottom: 1.25rem; position: fixed; right: 1.25rem; + bottom: 1.25rem; z-index: $lte-zindex-control-sidebar + 1; &:focus { @@ -390,10 +390,10 @@ pre { // Blockquotes styles blockquote { + padding: .5em .7rem; + margin: 1.5em .7rem; background-color: $white; border-left: .7rem solid $primary; - margin: 1.5em .7rem; - padding: .5em .7rem; .box & { background-color: $gray-200; @@ -409,9 +409,9 @@ blockquote { h4, h5, h6 { - color: $primary; font-size: 1.25rem; font-weight: 600; + color: $primary; } @each $color, $value in $theme-colors { @@ -449,26 +449,26 @@ blockquote { // Tab Custom Content .tab-custom-content { - border-top: $nav-tabs-border-width solid $nav-tabs-border-color; - margin-top: .5rem; padding-top: .5rem; + margin-top: .5rem; + border-top: $nav-tabs-border-width solid $nav-tabs-border-color; } .nav + .tab-custom-content { - border-top: none; - border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; + padding-bottom: .5rem; margin-top: 0; margin-bottom: .5rem; - padding-bottom: .5rem; + border-top: none; + border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; } // Badge BTN Style .badge-btn { - border-radius: $lte-button-border-radius-xs; + padding: $lte-button-padding-y-xs * 2 $lte-button-padding-x-xs * 2; font-size: $lte-button-font-size-xs; font-weight: 400; - padding: $lte-button-padding-y-xs * 2 $lte-button-padding-x-xs * 2; + border-radius: $lte-button-border-radius-xs; } .badge-btn.badge-pill { diff --git a/src/scss/_nav-sidebar.scss b/src/scss/_nav-sidebar.scss index 00ef16c85..6e73e0be1 100644 --- a/src/scss/_nav-sidebar.scss +++ b/src/scss/_nav-sidebar.scss @@ -16,8 +16,8 @@ .nav-link > .end, .nav-link > p > .end { position: absolute; - right: 1rem; top: .7rem; + right: 1rem; } .nav-link { @@ -37,15 +37,15 @@ } .nav-header { - font-size: .9rem; padding: $nav-link-padding-y ($nav-link-padding-y * 1.5); + font-size: .9rem; } // Tree view menu .nav-treeview { display: none; - list-style: none; padding: 0; + list-style: none; } .menu-open { diff --git a/src/scss/_products.scss b/src/scss/_products.scss index 4b6fd5877..095c51e9b 100644 --- a/src/scss/_products.scss +++ b/src/scss/_products.scss @@ -3,9 +3,9 @@ // .products-list { - list-style: none; - margin: 0; padding: 0; + margin: 0; + list-style: none; > .item { @include clearfix (); @@ -14,8 +14,8 @@ @include border-radius($border-radius); } - background-color: $white; padding: 10px 0; + background-color: $white; } @@ -23,8 +23,8 @@ float: left; img { - height: 50px; width: 50px; + height: 50px; } } @@ -37,9 +37,9 @@ } .product-description { - color: $gray-600; display: block; overflow: hidden; + color: $gray-600; text-overflow: ellipsis; white-space: nowrap; } diff --git a/src/scss/_progress-bars.scss b/src/scss/_progress-bars.scss index 686611864..c99605da8 100644 --- a/src/scss/_progress-bars.scss +++ b/src/scss/_progress-bars.scss @@ -9,15 +9,15 @@ // Vertical bars &.vertical { + position: relative; display: inline-block; + width: 30px; height: 200px; margin-right: 10px; - position: relative; - width: 30px; > .progress-bar { - bottom: 0; position: absolute; + bottom: 0; width: 100%; } diff --git a/src/scss/_sidebar-collapse.scss b/src/scss/_sidebar-collapse.scss index 6c2287df9..93645d857 100644 --- a/src/scss/_sidebar-collapse.scss +++ b/src/scss/_sidebar-collapse.scss @@ -34,10 +34,10 @@ .nav-sidebar .nav-link p, .brand-link { margin-left: -10px; + visibility: hidden; animation-name: fadeOut; animation-duration: $lte-transition-speed; animation-fill-mode: both; - visibility: hidden; } &.sidebar-is-hover { @@ -57,10 +57,10 @@ .nav-sidebar .nav-link p, .brand-link { margin-left: 0; + visibility: visible; animation-name: fadeIn; animation-duration: $lte-transition-speed; animation-fill-mode: both; - visibility: visible; } } } diff --git a/src/scss/_sidebar-horizontal.scss b/src/scss/_sidebar-horizontal.scss index e756eef66..a316d38d8 100644 --- a/src/scss/_sidebar-horizontal.scss +++ b/src/scss/_sidebar-horizontal.scss @@ -6,17 +6,17 @@ "main-sidebar" "content-wrapper" "main-footer"; - grid-template-columns: auto; grid-template-rows: max-content max-content auto max-content; + grid-template-columns: auto; } .main-sidebar { + z-index: $lte-zindex-sidebar-horizontal; display: grid; - height: $lte-sidebar-horizontal-height; + justify-content: start; min-width: $lte-sidebar-horizontal-width; max-width: $lte-sidebar-horizontal-width; - justify-content: start; - z-index: $lte-zindex-sidebar-horizontal; + height: $lte-sidebar-horizontal-height; } .brand-container { @@ -32,9 +32,9 @@ .nav-sidebar { display: grid; - list-style-type: none; grid-auto-columns: 130px; grid-auto-flow: column; + list-style-type: none; // grid-gap: 5px; .nav-header { @@ -47,8 +47,8 @@ justify-content: center; .nav-icon { - text-align: center; padding-left: 0; + text-align: center; } p { diff --git a/src/scss/_sidebar.scss b/src/scss/_sidebar.scss index f4f69820a..d04f20bde 100644 --- a/src/scss/_sidebar.scss +++ b/src/scss/_sidebar.scss @@ -1,11 +1,11 @@ .sidebar { // min-height: 100%; - overflow-x: hidden; - overflow-y: auto; + padding-top: $lte-sidebar-padding-y; + padding-right: $lte-sidebar-padding-x; padding-bottom: $lte-sidebar-padding-y; padding-left: $lte-sidebar-padding-x; - padding-right: $lte-sidebar-padding-x; - padding-top: $lte-sidebar-padding-y; + overflow-x: hidden; + overflow-y: auto; @include scrollbar-color-gray(); @include scrollbar-width-thin(); } diff --git a/src/scss/_small-box.scss b/src/scss/_small-box.scss index ed6928c89..b3154c5ae 100644 --- a/src/scss/_small-box.scss +++ b/src/scss/_small-box.scss @@ -6,9 +6,9 @@ @include border-radius($border-radius); @include box-shadow($lte-card-shadow); + position: relative; display: block; margin-bottom: 1.25rem; - position: relative; // content wrapper > .inner { @@ -16,26 +16,26 @@ } > .small-box-footer { - background-color: rgba($black, .1); - color: rgba($white, .8); + position: relative; + z-index: 10; display: block; padding: 3px 0; - position: relative; + color: rgba($white, .8); text-align: center; text-decoration: none; - z-index: 10; + background-color: rgba($black, .1); &:hover { - background-color: rgba($black, .15); color: $white; + background-color: rgba($black, .15); } } h3 { @include font-size(2.2rem); - font-weight: 700; - margin: 0 0 10px; padding: 0; + margin: 0 0 10px; + font-weight: 700; white-space: nowrap; } @@ -79,10 +79,10 @@ font-size: 1rem; > small { - color: $gray-100; display: block; - font-size: .9rem; margin-top: 5px; + font-size: .9rem; + color: $gray-100; } } @@ -93,27 +93,27 @@ // the icon .icon { - color: rgba($black, .15); z-index: 0; + color: rgba($black, .15); > i { - font-size: 90px; position: absolute; - right: 15px; top: 15px; + right: 15px; + font-size: 90px; transition: transform $lte-transition-speed linear; &.inner-icon { - font-size: 70px; top: 20px; + font-size: 70px; } } svg { - font-size: 70px; position: absolute; - right: 15px; top: 15px; + right: 15px; + font-size: 70px; transition: transform $lte-transition-speed linear; } } diff --git a/src/scss/_table.scss b/src/scss/_table.scss index 74ea86f36..a13b0046b 100644 --- a/src/scss/_table.scss +++ b/src/scss/_table.scss @@ -10,12 +10,12 @@ // fixed table head &.table-head-fixed { thead tr:nth-child(1) th { - background-color: $white; - border-bottom: 0; - box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color; position: sticky; top: 0; z-index: 10; + background-color: $white; + border-bottom: 0; + box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color; } // TODO: add $table-dark @@ -102,8 +102,8 @@ .expandable-body { > td { - padding: 0 !important; width: 100%; + padding: 0 !important; > div, > p { diff --git a/src/scss/_users-list.scss b/src/scss/_users-list.scss index 9e9545d6c..da677130b 100644 --- a/src/scss/_users-list.scss +++ b/src/scss/_users-list.scss @@ -7,14 +7,14 @@ > li { float: left; + width: 25%; padding: 10px; text-align: center; - width: 25%; img { @include border-radius(50%); - height: auto; max-width: 100%; + height: auto; } > a:hover { @@ -32,14 +32,14 @@ } .users-list-name { - color: $gray-700; - font-size: $font-size-sm; overflow: hidden; + font-size: $font-size-sm; + color: $gray-700; text-overflow: ellipsis; white-space: nowrap; } .users-list-date { - color: shade-color($gray-500, 20%); font-size: 12px; + color: shade-color($gray-500, 20%); } diff --git a/src/scss/_wrapper.scss b/src/scss/_wrapper.scss index 8c727d6a4..42b3f2369 100644 --- a/src/scss/_wrapper.scss +++ b/src/scss/_wrapper.scss @@ -4,15 +4,16 @@ .wrapper { position: relative; - align-content: stretch; - align-items: stretch; display: grid; - grid-gap: 0; grid-template-areas: "main-sidebar main-header" "main-sidebar content-wrapper" "main-sidebar main-footer"; - grid-template-columns: auto minmax(100%, max-content); grid-template-rows: min-content 100% min-content; + grid-template-columns: auto minmax(100%, max-content); + grid-gap: 0; + align-content: stretch; + align-items: stretch; + min-height: 100vh; } diff --git a/src/scss/dark/_cards.scss b/src/scss/dark/_cards.scss index cba988628..faaf59e24 100644 --- a/src/scss/dark/_cards.scss +++ b/src/scss/dark/_cards.scss @@ -37,9 +37,9 @@ } .todo-list > li { + color: $white-alt; background-color: tint-colors($gray-900-alt, 5%); border-color: tint-colors($gray-900-alt, 7.5%); - color: $white-alt; } .todo-list { diff --git a/src/scss/dark/_content-wrapper.scss b/src/scss/dark/_content-wrapper.scss index 3d5155987..475c14988 100644 --- a/src/scss/dark/_content-wrapper.scss +++ b/src/scss/dark/_content-wrapper.scss @@ -1,4 +1,4 @@ .content-wrapper { - background-color: $lte-main-bg-alt; color: $lte-main-color-alt; + background-color: $lte-main-bg-alt; } diff --git a/src/scss/dark/_direct-chat.scss b/src/scss/dark/_direct-chat.scss index e89565e9b..f04007f2b 100644 --- a/src/scss/dark/_direct-chat.scss +++ b/src/scss/dark/_direct-chat.scss @@ -1,7 +1,7 @@ .direct-chat-text { + color: $white-alt; background-color: $gray-800-alt; border-color: tint-color($gray-800-alt, 10%); - color: $white-alt; &::after, &::before { @@ -21,8 +21,8 @@ } .direct-chat-contacts { - background-color: $gray-800-alt; color: $white-alt; + background-color: $gray-800-alt; } .direct-chat-contacts-light { diff --git a/src/scss/dark/_info-box.scss b/src/scss/dark/_info-box.scss index 9c9d93865..d48a39022 100644 --- a/src/scss/dark/_info-box.scss +++ b/src/scss/dark/_info-box.scss @@ -1,6 +1,6 @@ .info-box { - background-color: $dark-alt; color: $white-alt; + background-color: $dark-alt; @each $name, $color in $theme-colors-alt { .info-box { .bg-#{$name} { diff --git a/src/scss/dark/_products.scss b/src/scss/dark/_products.scss index bb6c4d89c..b692fb1a3 100644 --- a/src/scss/dark/_products.scss +++ b/src/scss/dark/_products.scss @@ -1,6 +1,6 @@ .products-list > .item { - background-color: $body-bg-alt; color: $body-color-alt; + background-color: $body-bg-alt; border-bottom-color: $gray-600-alt; } diff --git a/src/scss/mixins/_animations.scss b/src/scss/mixins/_animations.scss index 044e03a29..6ace4c640 100644 --- a/src/scss/mixins/_animations.scss +++ b/src/scss/mixins/_animations.scss @@ -5,19 +5,19 @@ @keyframes flipInX { 0% { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transition-timing-function: ease-in; opacity: 0; + transition-timing-function: ease-in; + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); } 40% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function: ease-in; + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); } 60% { - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } 80% { diff --git a/src/scss/mixins/_backgrounds.scss b/src/scss/mixins/_backgrounds.scss index 2e53ff576..61061db36 100644 --- a/src/scss/mixins/_backgrounds.scss +++ b/src/scss/mixins/_backgrounds.scss @@ -14,17 +14,17 @@ &.btn { &:hover { - border-color: shade-color($color, 10%); color: shade-color(color-contrast($color), 7.5%); + border-color: shade-color($color, 10%); } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, &:active, &.active { + color: color-contrast(shade-color($color, 10%)); background-color: shade-color($color, 10%) !important; border-color: shade-color($color, 12.5%); - color: color-contrast(shade-color($color, 10%)); } } } diff --git a/src/scss/mixins/_brand-variant.scss b/src/scss/mixins/_brand-variant.scss index d2ad9f1f1..0d3a4ca0e 100644 --- a/src/scss/mixins/_brand-variant.scss +++ b/src/scss/mixins/_brand-variant.scss @@ -3,7 +3,7 @@ $brand-color ) { .brand-container { - background-color: $brand-bg; color: $brand-color; + background-color: $brand-bg; } } diff --git a/src/scss/mixins/_direct-chat.scss b/src/scss/mixins/_direct-chat.scss index 57c68135a..d102b23f6 100644 --- a/src/scss/mixins/_direct-chat.scss +++ b/src/scss/mixins/_direct-chat.scss @@ -5,9 +5,9 @@ // Direct Chat Variant @mixin direct-chat-variant($bg-color, $color: $white) { .end > .direct-chat-text { + color: color-contrast($bg-color); background-color: $bg-color; border-color: $bg-color; - color: color-contrast($bg-color); &::after, &::before { diff --git a/src/scss/mixins/_header-variant.scss b/src/scss/mixins/_header-variant.scss index fda03c599..2878984e4 100644 --- a/src/scss/mixins/_header-variant.scss +++ b/src/scss/mixins/_header-variant.scss @@ -9,8 +9,8 @@ $lte-header-mobile-color ) { .main-header { - background-color: $lte-header-bg; color: $lte-header-color; + background-color: $lte-header-bg; .nav-link { color: $dark; @@ -24,8 +24,8 @@ @include media-breakpoint-down(lg) { .main-header { - background-color: $lte-header-mobile-bg; color: $lte-header-mobile-color; + background-color: $lte-header-mobile-bg; } } } diff --git a/src/scss/mixins/_nav-treeview-dark.scss b/src/scss/mixins/_nav-treeview-dark.scss index e29d48f5e..e14a44cf0 100644 --- a/src/scss/mixins/_nav-treeview-dark.scss +++ b/src/scss/mixins/_nav-treeview-dark.scss @@ -29,8 +29,8 @@ &.menu-open > .nav-link, &:hover > .nav-link, > .nav-link:focus { - background-color: $lte-sidebar-hover-bg; color: $lte-sidebar-hover-color; + background-color: $lte-sidebar-hover-bg; } > .nav-link.active { @@ -45,8 +45,8 @@ // Section Heading .nav-header { - background-color: inherit; //darken($lte-sidebar-bg, 3%); color: $lte-sidebar-header-color; + background-color: inherit; //darken($lte-sidebar-bg, 3%); } // All links within the sidebar menu @@ -69,8 +69,8 @@ &:hover, &:focus { - background-color: $lte-sidebar-submenu-hover-bg; color: $lte-sidebar-submenu-hover-color; + background-color: $lte-sidebar-submenu-hover-bg; } } @@ -78,8 +78,8 @@ &, &:hover, &:focus { - background-color: $lte-sidebar-submenu-active-bg; color: $lte-sidebar-submenu-active-color; + background-color: $lte-sidebar-submenu-active-bg; } } } diff --git a/src/scss/mixins/_nav-treeview-light.scss b/src/scss/mixins/_nav-treeview-light.scss index b84cf8c19..c30a98dc0 100644 --- a/src/scss/mixins/_nav-treeview-light.scss +++ b/src/scss/mixins/_nav-treeview-light.scss @@ -29,8 +29,8 @@ // Hover and active states &.menu-open > .nav-link, &:hover > .nav-link { - background-color: $lte-sidebar-hover-bg; color: $lte-sidebar-hover-color; + background-color: $lte-sidebar-hover-bg; } > .nav-link.active { @@ -45,8 +45,8 @@ // Section Heading .nav-header { - background-color: inherit; color: $lte-sidebar-header-color; + background-color: inherit; } // All links within the sidebar menu @@ -68,16 +68,16 @@ &:hover, &:focus { - background-color: $lte-sidebar-submenu-hover-bg; color: $lte-sidebar-submenu-hover-color; + background-color: $lte-sidebar-submenu-hover-bg; } } > .nav-link.active { &, &:hover { - background-color: $lte-sidebar-submenu-active-bg; color: $lte-sidebar-submenu-active-color; + background-color: $lte-sidebar-submenu-active-bg; } } diff --git a/src/scss/mixins/_sidebar-color.scss b/src/scss/mixins/_sidebar-color.scss index 9e755a012..1b6f4ef07 100644 --- a/src/scss/mixins/_sidebar-color.scss +++ b/src/scss/mixins/_sidebar-color.scss @@ -2,8 +2,8 @@ @mixin sidebar-color($color) { .nav-sidebar > .nav-item { > .nav-link.active { - background-color: $color; color: color-contrast($color); + background-color: $color; } } } diff --git a/src/scss/pages/_login_and_register.scss b/src/scss/pages/_login_and_register.scss index 653405158..7580de17e 100644 --- a/src/scss/pages/_login_and_register.scss +++ b/src/scss/pages/_login_and_register.scss @@ -4,9 +4,9 @@ .login-logo, .register-logo { + margin-bottom: .9rem; font-size: 2.1rem; font-weight: 300; - margin-bottom: .9rem; text-align: center; a { @@ -16,12 +16,12 @@ .login-page, .register-page { - align-items: center; - background-color: $gray-200; display: flex; flex-direction: column; - height: 100vh; + align-items: center; justify-content: center; + height: 100vh; + background-color: $gray-200; } .login-box, @@ -29,8 +29,8 @@ width: 360px; @media (max-width: map-get($grid-breakpoints, sm)) { - margin-top: .5rem; width: 90%; + margin-top: .5rem; } .card { @@ -40,10 +40,10 @@ .login-card-body, .register-card-body { + padding: 20px; + color: #666; background-color: $white; border-top: 0; - color: #666; - padding: 20px; .input-group { .form-control { @@ -81,11 +81,11 @@ } .input-group-text { + color: #777; background-color: transparent; - border-bottom-right-radius: $border-radius; border-left: 0; border-top-right-radius: $border-radius; - color: #777; + border-bottom-right-radius: $border-radius; transition: $input-transition; } } @@ -93,8 +93,8 @@ .login-box-msg, .register-box-msg { - margin: 0; padding: 0 20px 20px; + margin: 0; text-align: center; }