From 01e5b1ce2c5be50a7704cfb4e90339976484b9b1 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Thu, 20 May 2021 05:26:31 +0530 Subject: [PATCH] added table scss --- src/index3.html | 210 ++++++++++++ src/partials/_head.html | 10 +- src/partials/dashboard/_sidenav.html | 8 + src/scss/_custom-variables.scss | 41 +++ src/scss/_miscellaneous.scss | 483 +++++++++++++++++++++++++++ src/scss/_table.scss | 125 +++++++ src/scss/_text.scss | 39 +++ src/scss/adminlte.scss | 2 +- src/scss/mixins/_miscellaneous.scss | 6 +- src/scss/parts/_components.scss | 1 + src/scss/parts/_miscellaneous.scss | 6 + 11 files changed, 922 insertions(+), 9 deletions(-) create mode 100644 src/index3.html create mode 100644 src/scss/_table.scss create mode 100644 src/scss/_text.scss create mode 100644 src/scss/parts/_miscellaneous.scss diff --git a/src/index3.html b/src/index3.html new file mode 100644 index 000000000..a247e0f07 --- /dev/null +++ b/src/index3.html @@ -0,0 +1,210 @@ + + + + + + @@include('./_head.html', { + "path": ".", + "title": "AdminLTE 4 | Dashboard 3" + }) + + + +
+ @@include('./dashboard/_topbar.html', { + "path": "." + }) + + @@include('./dashboard/_sidenav.html', { + "mainPage": "dashboard", + "page": "index3", + "path": "." + }) + +
+ @@include('./dashboard/_content-header.html', { + "header_name": "Dashboard v2" + }) +
+
+
+
+
+
+

Products

+
+ + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProductPriceSalesMore
+ Product 1 + Some Product + $13 USD + + + 12% + + 12,000 Sold + + + + +
+ Product 1 + Another Product + $29 USD + + + 0.5% + + 123,234 Sold + + + + +
+ Product 1 + Amazing Product + $1,230 USD + + + 3% + + 198 Sold + + + + +
+ Product 1 + Perfect Item + NEW + $199 USD + + + 63% + + 87 Sold + + + + +
+
+
+ +
+ +
+
+
+

Online Store Overview

+
+ + + + + + +
+
+
+
+

+ +

+

+ + 12% + + CONVERSION RATE +

+
+ +
+

+ +

+

+ + 0.8% + + SALES RATE +

+
+ +
+

+ +

+

+ + 1% + + REGISTRATION RATE +

+
+ +
+
+
+ +
+ +
+
+
+ + + @@include('./dashboard/_footer.html', { + "path": "." + }) +
+ + + @@include('./_scripts.html', { + "path": "." + }) + + diff --git a/src/partials/_head.html b/src/partials/_head.html index 735f417c2..5b170f43a 100644 --- a/src/partials/_head.html +++ b/src/partials/_head.html @@ -1,12 +1,12 @@ - + @@title - - - - + + + + diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html index 2b77982b5..899a69997 100644 --- a/src/partials/dashboard/_sidenav.html +++ b/src/partials/dashboard/_sidenav.html @@ -37,6 +37,14 @@

+
  • + + +

    + Dashboard v3 +

    +     +
  • diff --git a/src/scss/_custom-variables.scss b/src/scss/_custom-variables.scss index 8d4508bb5..34691c047 100644 --- a/src/scss/_custom-variables.scss +++ b/src/scss/_custom-variables.scss @@ -12,6 +12,11 @@ $font-size-root: 1rem !default; $transition-speed: .3s !default; $transition-fn: ease-in-out !default; +// TEXT +// -------------------------------------------------------- +$font-size-xs: ($font-size-base * .75) !default; +$font-size-xl: ($font-size-base * 2) !default; + // Sidebar // -------------------------------------------------------- $sidebar-width: 250px !default; @@ -144,6 +149,11 @@ $card-nav-link-padding-sm-y: .4rem !default; $card-nav-link-padding-sm-x: .8rem !default; $card-img-size: $img-size-sm !default; +// Tables +// -------------------------------------------------------- +$table-cell-padding-y-lg: .75rem !default; +$table-cell-padding-x-lg: .75rem !default; + // Z-INDEX // -------------------------------------------------------- $zindex-main-header: $zindex-fixed + 4 !default; @@ -161,5 +171,36 @@ $zindex-preloader: $zindex-toasts + 2 !default; $main-bg: #f4f6f9 !default; $main-color: $black !default; +// BUTTON +// -------------------------------------------------------- +$button-default-background-color: $gray-100 !default; +$button-default-color: #444 !default; +$button-default-border-color: #ddd !default; + +$button-padding-y-xs: .125rem !default; +$button-padding-x-xs: .25rem !default; +$button-line-height-xs: $line-height-sm !default; +$button-font-size-xs: ($font-size-base * .75) !default; +$button-border-radius-xs: .15rem !default; + +// RIBBON +// -------------------------------------------------------- +$ribbon-border-size: 3px !default; +$ribbon-line-height: 100% !default; +$ribbon-padding: .375rem 0 !default; +$ribbon-font-size: .8rem !default; +$ribbon-width: 90px !default; +$ribbon-wrapper-size: 70px !default; +$ribbon-top: 10px !default; +$ribbon-right: -2px !default; +$ribbon-lg-wrapper-size: 120px !default; +$ribbon-lg-width: 160px !default; +$ribbon-lg-top: 26px !default; +$ribbon-lg-right: 0 !default; +$ribbon-xl-wrapper-size: 180px !default; +$ribbon-xl-width: 240px !default; +$ribbon-xl-top: 47px !default; +$ribbon-xl-right: 4px !default; + // Dark mode $enable-dark-mode: false !default; diff --git a/src/scss/_miscellaneous.scss b/src/scss/_miscellaneous.scss index 12f5a90b5..8fd4d8e03 100644 --- a/src/scss/_miscellaneous.scss +++ b/src/scss/_miscellaneous.scss @@ -1,3 +1,486 @@ +// +// 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 { + font-size: 16px; + font-weight: 600; + margin: 0; + padding: 0; + } + + > .description-text { + text-transform: uppercase; + } + + // Description Block Extension + .description-icon { + font-size: 16px; + } +} + +// List utility classes +.list-group-unbordered { + > .list-group-item { + border-left: 0; + border-radius: 0; + border-right: 0; + padding-left: 0; + padding-right: 0; + } +} + +.list-header { + color: $gray-600; + font-size: 15px; + font-weight: 700; + padding: 10px 4px; +} + +.list-seperator { + background-color: $card-border-color; + height: 1px; + margin: 15px 0 9px; +} + +.list-link { + > a { + color: $gray-600; + padding: 4px; + + &:hover { + color: $gray-900; + } + } +} + +// User block +.user-block { + float: left; + + img { + float: left; + height: 40px; + width: 40px; + } + + .username, + .description, + .comment { + display: block; + margin-left: 50px; + } + + .username { + font-size: 16px; + font-weight: 600; + margin-top: -1px; + } + + .description { + color: $gray-600; + font-size: 13px; + margin-top: -3px; + } + + &.user-block-sm { + img { + width: $img-size-sm; + height: $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 { + height: $img-size-sm; + width: $img-size-sm; + + + .img-push { + margin-left: $img-size-sm + $img-size-push; + } +} + +.img-md { + width: $img-size-md; + height: $img-size-md; + + + .img-push { + margin-left: $img-size-md + $img-size-push; + } +} + +.img-lg { + width: $img-size-lg; + height: $img-size-lg; + + + .img-push { + margin-left: $img-size-lg + $img-size-push; + } +} + +// Image bordered +.img-bordered { + border: 3px solid $gray-500; + padding: 3px; +} + +.img-bordered-sm { + border: 2px solid $gray-500; + padding: 2px; +} + +// 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, +.img-size-32 { + height: auto; +} + +.img-size-64 { + width: 64px; +} + +.img-size-50 { + width: 50px; +} + +.img-size-32 { + width: 32px; +} + +// Block sizes +.size-32, +.size-40, +.size-50 { + display: block; + text-align: center; +} + +.size-32 { + height: 32px; + line-height: 32px; + width: 32px; +} + +.size-40 { + height: 40px; + line-height: 40px; + width: 40px; +} + +.size-50 { + height: 50px; + line-height: 50px; + width: 50px; +} + +// General attachemnt block +.attachment-block { + background-color: $gray-100; + border: 1px solid $card-border-color; + margin-bottom: 10px; + padding: 5px; + + .attachment-img { + float: left; + height: auto; + max-height: 100px; + max-width: 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 { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + + .overlay { + @include border-radius($border-radius); + align-items: center; + background-color: rgba($white, .7); + display: flex; + justify-content: center; + z-index: 50; + + > .fa, + > .fas, + > .far, + > .fab, + > .fal, + > .fad, + > .svg-inline--fa, + > .ion { + color: $gray-800; + } + + &.dark { + background-color: rgba($black, .5); + + > .fa, + > .fas, + > .far, + > .fab, + > .fal, + > .fad, + > .svg-inline--fa, + > .ion { + color: $gray-400; + } + } + } +} + +.tab-pane { + // Box overlay for LOADING STATE effect on Tab Panels + > .overlay-wrapper { + position: relative; + > .overlay { + border-top-left-radius: 0; + border-top-right-radius: 0; + flex-direction: column; + margin-top: -$card-spacer-x; + margin-left: -$card-spacer-x; + height: add(100%, (2 * $card-spacer-x)); + width: add(100%, (2 * $card-spacer-x)); + &.dark { + color: $white; + } + } + } +} + +// Ribbon +.ribbon-wrapper { + height: $ribbon-wrapper-size; + overflow: hidden; + position: absolute; + right: -2px; + top: -2px; + width: $ribbon-wrapper-size; + z-index: 10; + + &.ribbon-lg { + height: $ribbon-lg-wrapper-size; + width: $ribbon-lg-wrapper-size; + + .ribbon { + right: $ribbon-lg-right; + top: $ribbon-lg-top; + width: $ribbon-lg-width; + } + } + + &.ribbon-xl { + height: $ribbon-xl-wrapper-size; + width: $ribbon-xl-wrapper-size; + + .ribbon { + right: $ribbon-xl-right; + top: $ribbon-xl-top; + width: $ribbon-xl-width; + } + } + + .ribbon { + box-shadow: 0 0 $ribbon-border-size rgba($black, .3); + font-size: $ribbon-font-size; + line-height: $ribbon-line-height; + padding: $ribbon-padding; + position: relative; + right: $ribbon-right; + text-align: center; + text-shadow: 0 -1px 0 rgba($black, .4); + text-transform: uppercase; + top: $ribbon-top; + transform: rotate(45deg); + width: $ribbon-width; + + &::before, + &::after { + border-left: $ribbon-border-size solid transparent; + border-right: $ribbon-border-size solid transparent; + border-top: $ribbon-border-size solid #9e9e9e; + bottom: -$ribbon-border-size; + content: ""; + position: absolute; + } + + &::before { + left: 0; + } + + &::after { + right: 0; + } + } +} + +// Scroll To Top +.back-to-top { + bottom: 1.25rem; + position: fixed; + right: 1.25rem; + z-index: $zindex-control-sidebar + 1; + + &:focus { + box-shadow: none; + } +} + +// Pre +pre { + padding: .75rem; +} + +// Blockquotes styles +blockquote { + background-color: $white; + border-left: .7rem solid $primary; + margin: 1.5em .7rem; + padding: .5em .7rem; + + .box & { + background-color: $gray-200; + } + + p:last-child { + margin-bottom: 0; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $primary; + font-size: 1.25rem; + font-weight: 600; + } + + @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 { + border-top: $nav-tabs-border-width solid $nav-tabs-border-color; + margin-top: .5rem; + padding-top: .5rem; +} + +.nav + .tab-custom-content { + border-top: none; + border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; + margin-top: 0; + margin-bottom: .5rem; + padding-bottom: .5rem; +} + + +// Badge BTN Style +.badge-btn { + border-radius: $button-border-radius-xs; + font-size: $button-font-size-xs; + font-weight: 400; + padding: $button-padding-y-xs * 2 $button-padding-x-xs * 2; +} + +.badge-btn.badge-pill { + padding: .375rem .6rem; +} + .resize-animation-stopper * { animation: none !important; transition: none !important; diff --git a/src/scss/_table.scss b/src/scss/_table.scss new file mode 100644 index 000000000..5c25c3a9b --- /dev/null +++ b/src/scss/_table.scss @@ -0,0 +1,125 @@ +// +// Component: Table +// + +.table { + &:not(.table-dark) { + color: inherit; + } + + // 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; + } + + // TODO: add $table-dark + // &.table-dark { + // thead tr { + // &:nth-child(1) th { + // background-color: $table-dark-bg; + // box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color; + // } + // } + // } + } + + // no border + &.no-border { + &, + td, + th { + border: 0; + } + } + + // .text-center in tables + &.text-center { + &, + td, + th { + text-align: center; + } + } + + &.table-valign-middle { + thead > tr > th, + thead > tr > td, + tbody > tr > th, + tbody > tr > td { + vertical-align: middle; + } + } + + .card-body.p-0 & { + thead > tr > th, + thead > tr > td, + tfoot > tr > th, + tfoot > tr > td, + tbody > tr > th, + tbody > tr > td { + &:first-of-type { + padding-left: map-get($spacers, 4); + } + + &:last-of-type { + padding-right: map-get($spacers, 4); + } + } + } +} + +// Expandable Table + +.table-hover tbody tr.expandable-body:hover { + background-color: inherit !important; +} + +[data-widget="expandable-table"] { + cursor: pointer; + + i.expandable-table-caret { + transition: transform $transition-speed linear; + } + &[aria-expanded="true"] { + td i.expandable-table-caret { + // stylelint-disable selector-max-attribute + &[class*="right"] { + transform: rotate(90deg); + } + &[class*="left"] { + transform: rotate(-90deg); + } + // stylelint-enable selector-max-attribute + } + } +} + +.expandable-body { + > td { + padding: 0 !important; + width: 100%; + + > div, + > p { + padding: $table-cell-padding-y-lg; + } + } + + .table { + width: subtract(100%, $table-cell-padding-y-lg); + margin: 0 0 0 $table-cell-padding-y-lg; + + tr:first-child { + td, + th { + border-top: none; + } + } + } +} diff --git a/src/scss/_text.scss b/src/scss/_text.scss new file mode 100644 index 000000000..d16c96753 --- /dev/null +++ b/src/scss/_text.scss @@ -0,0 +1,39 @@ +// +// Component: Text +// + +// text modification +.text-bold { + &, + &.table td, + &.table th { + font-weight: 700; + } +} + +.text-xs { + font-size: $font-size-xs !important; +} + +.text-sm { + font-size: $font-size-sm !important; +} + +.text-md { + font-size: $font-size-base !important; +} + +.text-lg { + font-size: $font-size-lg !important; +} + +.text-xl { + font-size: $font-size-xl !important; +} + +// text color variations +@each $name, $color in $colors { + .text-#{$name} { + color: #{$color} !important; + } +} diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss index 6edd4acbd..aeb89a92c 100644 --- a/src/scss/adminlte.scss +++ b/src/scss/adminlte.scss @@ -29,4 +29,4 @@ @import "parts/core"; @import "parts/components"; @import "parts/extra-components"; -@import "miscellaneous"; +@import "parts/miscellaneous"; diff --git a/src/scss/mixins/_miscellaneous.scss b/src/scss/mixins/_miscellaneous.scss index 4b96dd837..722230948 100644 --- a/src/scss/mixins/_miscellaneous.scss +++ b/src/scss/mixins/_miscellaneous.scss @@ -16,9 +16,9 @@ // #{$property}: calc(#{$expression}); // } -// @mixin rotate($value) { -// transform: rotate($value); -// } +@mixin rotate($value) { + transform: rotate($value); +} // @mixin animation($animation) { // animation: $animation; diff --git a/src/scss/parts/_components.scss b/src/scss/parts/_components.scss index e4cdc8233..ff91a700f 100644 --- a/src/scss/parts/_components.scss +++ b/src/scss/parts/_components.scss @@ -3,3 +3,4 @@ // @import "../cards"; +@import "../table"; diff --git a/src/scss/parts/_miscellaneous.scss b/src/scss/parts/_miscellaneous.scss new file mode 100644 index 000000000..fdf07c624 --- /dev/null +++ b/src/scss/parts/_miscellaneous.scss @@ -0,0 +1,6 @@ +// +// Part: Miscellaneous +// + +@import "../miscellaneous"; +@import "../text";