From 93c1e370fa40fde73e34e53285afed2a2cc4a0db Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Mon, 6 Feb 2023 21:25:43 +0530 Subject: [PATCH] replacing with built-in css --- src/index2.html | 159 +++++----- src/index3.html | 64 ++-- src/pages/examples/login.html | 2 - src/pages/examples/register.html | 2 - src/pages/forms/general.html | 2 - src/pages/layout/unfixed-sidebar.html | 2 - src/pages/tables/simple.html | 2 - src/pages/widgets/cards.html | 2 - src/pages/widgets/info-box.html | 2 - src/pages/widgets/small-box.html | 2 - src/partials/dashboard/_sidenav.html | 38 ++- src/partials/dashboard/_topbar.html | 34 +- src/scss/_cards.scss | 39 +-- src/scss/_layout-fixed.scss | 5 - src/scss/_miscellaneous.scss | 441 -------------------------- src/scss/_root.scss | 13 - src/scss/_users-list.scss | 45 --- src/scss/_variables.scss | 8 - src/scss/parts/_extra-components.scss | 1 - 19 files changed, 164 insertions(+), 699 deletions(-) delete mode 100644 src/scss/_users-list.scss diff --git a/src/index2.html b/src/index2.html index aaf446a02..645d5e3e4 100644 --- a/src/index2.html +++ b/src/index2.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": ".", @@ -192,40 +190,41 @@
-
-
- 17% -
$35,210.43
- TOTAL REVENUE +
+
+ 17% +
$35,210.43
+ TOTAL REVENUE
- + +
+ + +
+
+ 0% +
$10,390.90
+ TOTAL COST +
+
-
-
- 0% -
$10,390.90
- TOTAL COST +
+
+ 20% +
$24,813.53
+ TOTAL PROFIT
- +
-
-
- 20% -
$24,813.53
- TOTAL PROFIT +
+
+ 18% +
1200
+ GOAL COMPLETIONS
- -
- -
-
- 18% -
1200
- GOAL COMPLETIONS -
- +
@@ -466,48 +465,48 @@
- +
+
+ User Image + Alexander Pierce +
Today
+
+
+ User Image + Norman +
Yesterday
+
+
+ User Image + Jane +
12 Jan
+
+
+ User Image + John +
12 Jan
+
+
+ User Image + Alexander +
13 Jan
+
+
+ User Image + Sarah +
14 Jan
+
+
+ User Image + Nora +
15 Jan
+
+
+ User Image + Nadia +
15 Jan
+
+
@@ -689,12 +688,12 @@
    -
  • Chrome
    • -
  • IE
    • -
  • FireFox
    • -
  • Safari
    • -
  • Opera
    • -
  • Navigator
    • +
  • Chrome
    • +
  • IE
    • +
  • FireFox
    • +
  • Safari
    • +
  • Opera
    • +
  • Navigator
@@ -707,7 +706,7 @@
  • United States of America - + 12% @@ -715,7 +714,7 @@
  • India - + 4% @@ -723,7 +722,7 @@
  • China - + 0% diff --git a/src/index3.html b/src/index3.html index 73ce2c516..4547115f0 100644 --- a/src/index3.html +++ b/src/index3.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": ".", @@ -51,14 +49,14 @@

    - 820 + 820 Visitors Over Time

    - + 12.5% - Since last week + Since last week

    @@ -69,11 +67,11 @@
    - This Week + This Week - Last Week + Last Week
    @@ -105,77 +103,77 @@ - Product 1 + Product 1 Some Product $13 USD - + 12% 12,000 Sold - + - Product 1 + Product 1 Another Product $29 USD - + 0.5% 123,234 Sold - + - Product 1 + Product 1 Amazing Product $1,230 USD - + 3% 198 Sold - + - Product 1 + Product 1 Perfect Item NEW $199 USD - + 63% 87 Sold - + @@ -198,14 +196,14 @@

    - $18,230.00 + $18,230.00 Sales Over Time

    - + 33.1% - Since last month + Since last month

    @@ -216,11 +214,11 @@
    - This year + This year - Last year + Last year
    @@ -241,38 +239,38 @@
    • -

    +

    - 12% + 12% - CONVERSION RATE + CONVERSION RATE

    -

    +

    - 0.8% + 0.8% - SALES RATE + SALES RATE

    -

    +

    - 1% + 1% - REGISTRATION RATE + REGISTRATION RATE

    diff --git a/src/pages/examples/login.html b/src/pages/examples/login.html index 3e7a84382..8a877e1de 100644 --- a/src/pages/examples/login.html +++ b/src/pages/examples/login.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { diff --git a/src/pages/examples/register.html b/src/pages/examples/register.html index 4c95803f7..3add9e0ce 100644 --- a/src/pages/examples/register.html +++ b/src/pages/examples/register.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { diff --git a/src/pages/forms/general.html b/src/pages/forms/general.html index 42ea025c5..59338c527 100644 --- a/src/pages/forms/general.html +++ b/src/pages/forms/general.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": "../..", diff --git a/src/pages/layout/unfixed-sidebar.html b/src/pages/layout/unfixed-sidebar.html index 326e84d7a..460711ae4 100644 --- a/src/pages/layout/unfixed-sidebar.html +++ b/src/pages/layout/unfixed-sidebar.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": "../..", diff --git a/src/pages/tables/simple.html b/src/pages/tables/simple.html index dcbaa1e27..0fd444915 100644 --- a/src/pages/tables/simple.html +++ b/src/pages/tables/simple.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": "../..", diff --git a/src/pages/widgets/cards.html b/src/pages/widgets/cards.html index 878cbb201..e430795f5 100644 --- a/src/pages/widgets/cards.html +++ b/src/pages/widgets/cards.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": "../..", diff --git a/src/pages/widgets/info-box.html b/src/pages/widgets/info-box.html index f5fac5f98..9dcae8fe7 100644 --- a/src/pages/widgets/info-box.html +++ b/src/pages/widgets/info-box.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": "../..", diff --git a/src/pages/widgets/small-box.html b/src/pages/widgets/small-box.html index 45af56ab4..a72ccb8c4 100644 --- a/src/pages/widgets/small-box.html +++ b/src/pages/widgets/small-box.html @@ -1,7 +1,5 @@ - - @@include('./_head.html', { "path": "../..", diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html index 01f1bf5f9..32fe10c29 100644 --- a/src/partials/dashboard/_sidenav.html +++ b/src/partials/dashboard/_sidenav.html @@ -5,7 +5,7 @@ AdminLTE Logo AdminLTE 4 - +
    @@ -17,7 +17,7 @@

    Dashboard - +

      @@ -46,7 +46,7 @@

      Widgets - +

        @@ -77,7 +77,7 @@

        Layout Options 6 - +

      • @@ -100,7 +112,7 @@

        UI Elements - +

          @@ -117,7 +129,7 @@

          Forms - +

            @@ -134,7 +146,7 @@

            Tables - +

              @@ -152,7 +164,7 @@

              Login & Register - +

                @@ -182,7 +194,7 @@

                Level 1 - +

                  @@ -197,7 +209,7 @@

                  Level 2 - +

                    @@ -238,19 +250,19 @@
                  • LABELS
                  • - +

                    Important
                  • - +

                    Warning
                  • - +

                    Informational
                    • diff --git a/src/partials/dashboard/_topbar.html b/src/partials/dashboard/_topbar.html index dff816531..5202931b5 100644 --- a/src/partials/dashboard/_topbar.html +++ b/src/partials/dashboard/_topbar.html @@ -34,15 +34,15 @@
                    - User Avatar + User Avatar

                    Brad Diesel - +

                    Call me whenever you can...

                    -

                    4 Hours Ago

                    +

                    4 Hours Ago

                    @@ -52,15 +52,15 @@
                    - User Avatar + User Avatar

                    John Pierce - +

                    I got your message bro

                    -

                    4 Hours Ago

                    +

                    4 Hours Ago

                    @@ -70,15 +70,15 @@
                    - User Avatar + User Avatar

                    Nora Silvester - +

                    The subject goes here

                    -

                    4 Hours Ago

                    +

                    4 Hours Ago

                    @@ -98,17 +98,17 @@
                    4 new messages - 3 mins + 3 mins
                    8 friend requests - 12 hours + 12 hours
                    3 new reports - 2 days + 2 days
                    See All Notifications @@ -116,13 +116,13 @@
                  • - User Image + User Image Alexander Pierce
                    • - User Image + User Image

                      Alexander Pierce - Web Developer @@ -160,21 +160,21 @@

                      • diff --git a/src/scss/_cards.scss b/src/scss/_cards.scss index 86ed8e337..ff1bec662 100644 --- a/src/scss/_cards.scss +++ b/src/scss/_cards.scss @@ -9,24 +9,9 @@ &:not(.card-outline) { > .card-header { + color: var(--#{$lte-prefix}card-variant-color); background-color: var(--#{$lte-prefix}card-variant-bg); - &, - a { - color: var(--#{$lte-prefix}card-variant-color); - } - - a { - &:hover { - border-top: 3px solid $nav-tabs-border-color; - } - - &.active { - color: color-contrast($white); - border-top: 3px solid var(--#{$lte-prefix}card-variant-bg); - } - } - .btn-tool { color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .8); @@ -212,17 +197,6 @@ } -@each $name, $color in $theme-colors { - @debug($name); - .card-#{$name}, - .card.bg-#{$name}, - .card.text-bg-#{$name} { - --#{$lte-prefix}card-variant-bg: #{$color}; - --#{$lte-prefix}card-variant-color: #{color-contrast($color)}; - --#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))}; - } -} - // Maximized Card Body Scroll fix html.maximized-card { overflow: hidden; @@ -287,3 +261,14 @@ html.maximized-card { margin: -$card-spacer-y 0; font-size: $font-size-sm; } + +@each $name, $color in $theme-colors { + .card-#{$name}, + .card.bg-#{$name}, + .card.text-bg-#{$name} { + --#{$lte-prefix}card-variant-bg: #{$color}; + --#{$lte-prefix}card-variant-color: #{color-contrast($color)}; + --#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($color)}; + --#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))}; + } +} diff --git a/src/scss/_layout-fixed.scss b/src/scss/_layout-fixed.scss index 861158a7a..1643dae46 100644 --- a/src/scss/_layout-fixed.scss +++ b/src/scss/_layout-fixed.scss @@ -35,9 +35,4 @@ } } } - - // .layout-fixed.fs-7 .wrapper .sidebar { - // // stylelint-disable-next-line - // height: calc(100vh - (#{$lte-main-header-height-sm-inner} + #{$lte-main-header-bottom-border-width})); - // } } diff --git a/src/scss/_miscellaneous.scss b/src/scss/_miscellaneous.scss index 4e7c69023..e04ec2879 100644 --- a/src/scss/_miscellaneous.scss +++ b/src/scss/_miscellaneous.scss @@ -2,173 +2,6 @@ // Misc: Miscellaneous // -.border-transparent { - border-color: transparent !important; -} - -// Description Blocks -.description-block { - display: block; - margin: 10px 0; - text-align: center; - - &.margin-bottom { - margin-bottom: 25px; - } - - > .description-header { - padding: 0; - margin: 0; - font-size: 16px; - font-weight: 600; - } - - > .description-text { - text-transform: uppercase; - } - - // Description Block Extension - .description-icon { - font-size: 16px; - } -} - -// List utility classes -.list-group-unbordered { - > .list-group-item { - padding-right: 0; - padding-left: 0; - border-right: 0; - border-left: 0; - @include border-radius(0); - } -} - -.list-header { - padding: 10px 4px; - font-size: 15px; - font-weight: 700; - color: $gray-600; -} - -.list-seperator { - height: 1px; - margin: 15px 0 9px; - background-color: $card-border-color; -} - -.list-link { - > a { - padding: 4px; - color: $gray-600; - - &:hover { - color: $gray-900; - } - } -} - -// User block -.user-block { - float: left; - - img { - float: left; - width: 40px; - height: 40px; - } - - .username, - .description, - .comment { - display: block; - margin-left: 50px; - } - - .username { - margin-top: -1px; - font-size: 16px; - font-weight: 600; - } - - .description { - margin-top: -3px; - font-size: 13px; - color: $gray-600; - } - - &.user-block-sm { - img { - width: $lte-img-size-sm; - height: $lte-img-size-sm; - } - - .username, - .description, - .comment { - margin-left: 40px; - } - - .username { - font-size: 14px; - } - } -} - -// Image sizes -.img-sm, -.img-md, -.img-lg { - float: left; -} - -.img-sm { - width: $lte-img-size-sm; - height: $lte-img-size-sm; - - + .img-push { - margin-left: $lte-img-size-sm + $lte-img-size-push; - } -} - -.img-md { - width: $lte-img-size-md; - height: $lte-img-size-md; - - + .img-push { - margin-left: $lte-img-size-md + $lte-img-size-push; - } -} - -.img-lg { - width: $lte-img-size-lg; - height: $lte-img-size-lg; - - + .img-push { - margin-left: $lte-img-size-lg + $lte-img-size-push; - } -} - -// Image bordered -.img-bordered { - padding: 3px; - border: 3px solid $gray-500; -} - -.img-bordered-sm { - padding: 2px; - border: 2px solid $gray-500; -} - -// Rounded and Circle Images -.img-rounded { - @include border-radius($border-radius); -} - -.img-circle { - @include border-radius(50%); -} - // Image sizes .img-size-64, .img-size-50, @@ -187,277 +20,3 @@ .img-size-32 { width: 32px; } - -// Block sizes -.size-32, -.size-40, -.size-50 { - display: block; - text-align: center; -} - -.size-32 { - width: 32px; - height: 32px; - line-height: 32px; -} - -.size-40 { - width: 40px; - height: 40px; - line-height: 40px; -} - -.size-50 { - width: 50px; - height: 50px; - line-height: 50px; -} - -// General attachemnt block -.attachment-block { - padding: 5px; - margin-bottom: 10px; - background-color: $gray-100; - border: 1px solid $card-border-color; - - .attachment-img { - float: left; - max-width: 100px; - height: auto; - max-height: 100px; - } - - .attachment-pushed { - margin-left: 110px; - } - - .attachment-heading { - margin: 0; - } - - .attachment-text { - color: $gray-700; - } -} - -// Overlays for Card, InfoBox & SmallBox -.card, -.overlay-wrapper, -.info-box, -.small-box { - // Box overlay for LOADING STATE effect - > .overlay, - > .loading-img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .overlay { - @include border-radius($border-radius); - z-index: 50; - display: flex; - align-items: center; - justify-content: center; - background-color: rgba($white, .7); - - > i, - > svg, - > img, - > object, - > iframe { - color: $gray-800; - } - - &.dark { - background-color: rgba($black, .5); - - > i, - > svg, - > img, - > object, - > iframe { - color: $gray-400; - } - } - } -} - -.tab-pane { - // Box overlay for LOADING STATE effect on Tab Panels - > .overlay-wrapper { - position: relative; - > .overlay { - 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; - @include border-top-start-radius(0); - @include border-top-end-radius(0); - &.dark { - color: $white; - } - } - } -} - -// Ribbon -.ribbon-wrapper { - position: absolute; - top: -2px; - right: -2px; - z-index: 10; - width: $lte-ribbon-wrapper-size; - height: $lte-ribbon-wrapper-size; - overflow: hidden; - - &.ribbon-lg { - width: $lte-ribbon-lg-wrapper-size; - height: $lte-ribbon-lg-wrapper-size; - - .ribbon { - top: $lte-ribbon-lg-top; - right: $lte-ribbon-lg-right; - width: $lte-ribbon-lg-width; - } - } - - &.ribbon-xl { - width: $lte-ribbon-xl-wrapper-size; - height: $lte-ribbon-xl-wrapper-size; - - .ribbon { - top: $lte-ribbon-xl-top; - right: $lte-ribbon-xl-right; - width: $lte-ribbon-xl-width; - } - } - - .ribbon { - 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; - text-align: center; - text-shadow: 0 -1px 0 rgba($black, .4); - text-transform: uppercase; - box-shadow: 0 0 $lte-ribbon-border-size rgba($black, .3); - transform: rotate(45deg); - - &::before, - &::after { - position: absolute; - bottom: -$lte-ribbon-border-size; - content: ""; - 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 { - left: 0; - } - - &::after { - right: 0; - } - } -} - -// Scroll To Top -.back-to-top { - position: fixed; - right: 1.25rem; - bottom: 1.25rem; - z-index: $lte-zindex-control-sidebar + 1; - - &:focus { - box-shadow: none; - } -} - -// Pre -pre { - padding: .75rem; -} - -// Blockquotes styles -blockquote { - padding: .5em .7rem; - margin: 1.5em .7rem; - background-color: $white; - border-left: .7rem solid $primary; - - .box & { - background-color: $gray-200; - } - - p:last-child { - margin-bottom: 0; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: 1.25rem; - font-weight: 600; - color: $primary; - } - - @each $color, $value in $theme-colors { - &.quote-#{$color} { - border-color: $value; - - h1, - h2, - h3, - h4, - h5, - h6 { - color: $value; - } - } - } - - @each $color, $value in $colors { - &.quote-#{$color} { - border-color: $value; - - h1, - h2, - h3, - h4, - h5, - h6 { - color: $value; - } - } - } -} - - -// Tab Custom Content - -.tab-custom-content { - padding-top: .5rem; - margin-top: .5rem; - border-top: $nav-tabs-border-width solid $nav-tabs-border-color; -} - -.nav + .tab-custom-content { - padding-bottom: .5rem; - margin-top: 0; - margin-bottom: .5rem; - border-top: none; - border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; -} diff --git a/src/scss/_root.scss b/src/scss/_root.scss index 5cdcb3f8e..2633fbd21 100644 --- a/src/scss/_root.scss +++ b/src/scss/_root.scss @@ -1,18 +1,5 @@ :root, [data-bs-theme="light"] { - // Content Wrapper - --#{$lte-prefix}main-color: #{$lte-main-color}; - --#{$lte-prefix}main-bg: #{$lte-main-bg}; - // Sidebar --#{$lte-prefix}sidebar-width: #{$lte-sidebar-width}; } - -@if $enable-dark-mode { - @include color-mode(dark, true) { - color-scheme: dark; - // Body Color - --#{$lte-prefix}main-color: #{$lte-main-color-dark}; - --#{$lte-prefix}main-bg: #{$lte-main-bg-dark}; - } -} diff --git a/src/scss/_users-list.scss b/src/scss/_users-list.scss deleted file mode 100644 index eb0f91e47..000000000 --- a/src/scss/_users-list.scss +++ /dev/null @@ -1,45 +0,0 @@ -// -// Component: Users List -// - -.users-list { - @include list-unstyled(); - - > li { - float: left; - width: 25%; - padding: 10px; - text-align: center; - - img { - @include border-radius(50%); - max-width: 100%; - height: auto; - } - - > a:hover { - &, - .users-list-name { - color: var(--#{$prefix}body-color); - } - } - } -} - -.users-list-name, -.users-list-date { - display: block; -} - -.users-list-name { - overflow: hidden; - font-size: $font-size-sm; - color: var(--#{$prefix}secondary-color); - text-overflow: ellipsis; - white-space: nowrap; -} - -.users-list-date { - font-size: 12px; - color: var(--#{$prefix}tertiary-color); -} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 0fc1d3bdc..e7ac6f324 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -89,14 +89,6 @@ $lte-nav-link-sm-height: ($font-size-sm * $line-height-sm + $lte-n $lte-main-header-height-sm-inner: ($lte-nav-link-sm-height + ($lte-main-header-link-padding-y * 2)) !default; $lte-main-header-height-sm: add($lte-main-header-height-sm-inner, $lte-main-header-bottom-border-width) !default; -// HEADER SKINS -// -------------------------------------------------------- - -$lte-header-light-bg: var(--#{$prefix}body-bg) !default; -$lte-header-light-color: var(--#{$prefix}body-color) !default; -$lte-header-mobile-light-bg: $lte-header-light-bg !default; -$lte-header-mobile-light-color: $lte-header-light-color !default; - // Content padding $lte-content-padding-y: 0 !default; $lte-content-padding-x: .5rem !default; diff --git a/src/scss/parts/_extra-components.scss b/src/scss/parts/_extra-components.scss index af17b7d36..dce453381 100644 --- a/src/scss/parts/_extra-components.scss +++ b/src/scss/parts/_extra-components.scss @@ -7,4 +7,3 @@ @import "../timeline"; @import "../products"; @import "../direct-chat"; -@import "../users-list";