Skip to content

Commit

Permalink
Update SCSS use CSS variables.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ve3
ve3 committed Mar 9, 2022
1 parent 03b38d8 commit e408731
Show file tree
Hide file tree
Showing 41 changed files with 461 additions and 323 deletions.
33 changes: 19 additions & 14 deletions assets/scss/rdta/_alert-box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,49 @@
@use 'sass:math';


.rd-alertbox {
--alertbox-z-index: #{$z-index-alertboxfixed};// this variable is from global-common/_common-variables.scss.
}


.rd-alertbox {
background-color: #fff;
border-left-color: $border-color;
border-left-color: var(--block-border-color);
border-left-width: 5px;
border-left-style: solid;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
color: $font-color;
color: inherit;
font-size: 0.85em;
margin-bottom: $block-element-margin-bottom;
margin-bottom: var(--block-element-margin-vertical);
padding: 0.625em;
position: relative;
width: 100%;
&.alert-danger {
border-left-color: $danger-color;
a {
color: $danger-color;
@include link-actions-color($danger-color);
@include link-actions-color($danger-color, --text-danger-color);
}
}
&.alert-info {
border-left-color: $info-color;
a {
color: $info-color;
@include link-actions-color($info-color);
@include link-actions-color($info-color, --text-info-color);
}
}
&.alert-success {
border-left-color: $success-color;
a {
color: $success-color;
@include link-actions-color($success-color);
@include link-actions-color($success-color, --text-success-color);
}
}
&.alert-warning {
border-left-color: $warning-color;
a {
color: $warning-color;
@include link-actions-color($warning-color);
@include link-actions-color($warning-color, --text-warning-color);
}
}
// .rd-alertbox.fixed-xxx
Expand All @@ -56,7 +61,7 @@
&.fixed-top {
top: 0;
@media (min-width: $minimum-sidebar-breakpoint) {
min-height: math.div($mobile-screen-navbar-height, 2);// add min-height to match navbar.
min-height: calc(var(--navbar-height_mobilescreen) / 2);// add min-height to match navbar. it must be on top and above navbar.
}
}
&.fixed-bottom,
Expand All @@ -65,25 +70,25 @@
right: 0;
}
&.float-bottom {
bottom: $block-element-margin-sides;
bottom: 0.625rem;
margin-bottom: 0;
}
&.float-top {
top: $block-element-margin-sides;
top: 0.625rem;
}
&.float-bottom,
&.float-top {
display: inline-block;
left: $block-element-margin-sides;
margin-right: $block-element-margin-sides;
left: 0.625rem;
margin-right: var(--block-element-margin-horizontal);
width: auto;
}
&.fixed-bottom,
&.fixed-top,
&.float-bottom,
&.float-top {
position: fixed;
z-index: $z-index-alertboxfixed;
z-index: var(--alertbox-z-index);
@each $colorName, $colorValue, $bgColorValue in ("danger", $danger-color, $danger-background-color),
("info", $info-color, $info-background-color),
("success", $success-color, $success-background-color),
Expand Down Expand Up @@ -126,7 +131,7 @@
&:focus,
&:hover {
box-shadow: none;
color: $font-color;
color: inherit;
opacity: 0.8;
top: 0.1rem;
}
Expand Down
10 changes: 5 additions & 5 deletions assets/scss/rdta/_breadcrumb.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@


.rd-breadcrumb {
background-color: $background-color;
background-color: var(--block-background-color);
color: #777;
display: flex;
font-size: 0.750em;
list-style: none;
margin: 0 0 0.625rem 0;
padding: 0.500rem $block-element-margin-sides;
margin: 0 0 var(--content-block-element-margin-vertical) 0;
padding: 0.500rem var(--block-element-padding-horizontal);

li {
margin-right: 0.625rem;
margin-right: var(--block-element-margin-horizontal);
// .rd-breadcrumb li::after
&::after {
content: '/';
margin-left: 0.625rem;
margin-left: var(--block-element-margin-horizontal);
}
// .rd-breadcrumb li:last-child
&:last-child {
Expand Down
36 changes: 18 additions & 18 deletions assets/scss/rdta/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ a.rd-button,
}
&[disabled],
&.disabled {
background-color: $danger-disabled-color;
border-color: darken($danger-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($danger-disabled-color, 5);
background-color: var(--background-danger-disabled-color);
border-color: darken($danger-disabled-background-color, 7);
box-shadow: 0 $button-3d-height 0 darken($danger-disabled-background-color, 5);
}
}
&.info {
Expand All @@ -47,9 +47,9 @@ a.rd-button,
}
&[disabled],
&.disabled {
background-color: $info-disabled-color;
border-color: darken($info-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($info-disabled-color, 5);
background-color: var(--background-info-disabled-color);
border-color: darken($info-disabled-background-color, 7);
box-shadow: 0 $button-3d-height 0 darken($info-disabled-background-color, 5);
}
}
&.primary {
Expand All @@ -62,9 +62,9 @@ a.rd-button,
}
&[disabled],
&.disabled {
background-color: $primary-disabled-color;
border-color: darken($primary-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($primary-disabled-color, 5);
background-color: var(--background-primary-disabled-color);
border-color: darken($primary-background-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($primary-background-disabled-color, 5);
}
}
&.success {
Expand All @@ -77,9 +77,9 @@ a.rd-button,
}
&[disabled],
&.disabled {
background-color: $success-disabled-color;
border-color: darken($success-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($success-disabled-color, 5);
background-color: var(--background-success-disabled-color);
border-color: darken($success-background-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($success-background-disabled-color, 5);
}
}
&.warning {
Expand All @@ -92,21 +92,21 @@ a.rd-button,
}
&[disabled],
&.disabled {
background-color: $warning-disabled-color;
border-color: darken($warning-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($warning-disabled-color, 5);
background-color: var(--background-warning-disabled-color);
border-color: darken($warning-background-disabled-color, 7);
box-shadow: 0 $button-3d-height 0 darken($warning-background-disabled-color, 5);
}
}

// sizes (padding is no need due to its unit is em so font size changed it gonna be changed.)
&.large {
font-size: $form-large-font-size;
font-size: var(--form-large-font-size);
}
&.small {
font-size: $form-small-font-size;
font-size: var(--form-small-font-size);
}
&.tiny {
font-size: $form-tiny-font-size;
font-size: var(--form-tiny-font-size);
}
}

Expand Down
63 changes: 63 additions & 0 deletions assets/scss/rdta/_css-variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
CSS 3 variables
These variables will be work with components and parts of RDTA.
*/


:root {
// scss variables below are from from global-common/_common-variables.scss

--background-primary-disabled-color: #{$primary-background-disabled-color};
--background-primary-hover-color: #{$primary-background-hover-color};
--background-danger-disabled-color: #{$danger-disabled-background-color};
--background-danger-hover-color: #{$danger-background-hover-color};
--background-info-disabled-color: #{$info-disabled-background-color};
--background-info-hover-color: #{$info-background-hover-color};
--background-success-disabled-color: #{$success-background-disabled-color};
--background-success-hover-color: #{$success-background-hover-color};
--background-warning-disabled-color: #{$warning-background-disabled-color};
--background-warning-hover-color: #{$warning-background-hover-color};

--block-element-margin-horizontal: #{$block-element-margin-horizontal};
--block-element-margin-vertical: #{$block-element-margin-vertical};
--block-element-padding-horizontal: #{$block-element-padding-horizontal};
--block-element-padding-vertical: #{$block-element-padding-vertical};

// navbar height based on mobile screen.
// this variable must be here because it will be use in many classes, not just .rd-navbar.
--navbar-height_mobilescreen: #{$navbar-height_mobilescreen};

// these variables must be here because it will be use in many classes, not just .rd-sidebar[xxx].
--sidebar-expanded-width: #{$sidebar-expanded-width};
--sidebar-collapsed-width: #{$sidebar-collapsed-width};
--sidebar-transition-seconds: #{$sidebar-transition-seconds};

--text-danger-color: #{$danger-color};
--text-disabled-color: #{$text-disabled-color};
--text-info-color: #{$info-color};
--text-primary-color: #{$primary-color};
--text-success-color: #{$success-color};
--text-warning-color: #{$warning-color};
--text-white-color: #{$white-color};
}


.rd-button,
.rd-form {
--form-large-font-size: #{$form-large-font-size};
--form-small-font-size: #{$form-small-font-size};
--form-tiny-font-size: #{$form-tiny-font-size};
}


.rd-navbar,
.rd-sidebar,
.rd-sidebar-back {
--navbar-height: #{$navbar-height};
--navbar-z-index: #{$z-index-navbar};

--navbarsidebar-background-color: #{$navbarsidebar-background-color};

--sidebar-z-index: #{$z-index-sidebar};
}
18 changes: 9 additions & 9 deletions assets/scss/rdta/_data-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
td,
th {
a {
color: $link-color;
color: var(--text-link-color);
}
}
}
Expand Down Expand Up @@ -110,39 +110,39 @@
background-color: $danger-background-color;
// .rd-datatable .table-cell-danger:hover
&:hover {
background-color: $danger-hover-background-color;
background-color: var(--background-danger-hover-color);
}
}
.table-cell-info,
.table-row-info {
background-color: $info-background-color;
// .rd-datatable .table-cell-info:hover
&:hover {
background-color: $info-hover-background-color;
background-color: var(--background-info-hover-color);
}
}
.table-cell-primary,
.table-row-primary {
background-color: $primary-background-color;
// .rd-datatable .table-cell-primary:hover
&:hover {
background-color: $primary-hover-background-color;
background-color: var(--background-primary-hover-color);
}
}
.table-cell-success,
.table-row-success {
background-color: $success-background-color;
// .rd-datatable .table-cell-success:hover
&:hover {
background-color: $success-hover-background-color;
background-color: var(--background-success-hover-color);
}
}
.table-cell-warning,
.table-row-warning {
background-color: $warning-background-color;
// .rd-datatable .table-cell-warning:hover
&:hover {
background-color: $warning-hover-background-color;
background-color: var(--background-warning-hover-color);
}
}

Expand Down Expand Up @@ -174,21 +174,21 @@
thead {
// .rd-datatable.responsive thead tr
tr {
border-bottom: 2px solid $border-color;
border-bottom: 2px solid var(--block-border-color);
}
}

// .rd-datatable.responsive tfoot
tfoot {
// .rd-datatable.responsive tfoot tr
tr {
border-top: 2px solid $border-color;
border-top: 2px solid var(--block-border-color);
}
}

// .rd-datatable.responsive tr
tr {
border-top: 1px solid $border-color;
border-top: 1px solid var(--block-border-color);

// .rd-datatable.responsive tr:hover
&:hover {
Expand Down
12 changes: 6 additions & 6 deletions assets/scss/rdta/_dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// .rd-dropdown (should be <ul class="rd-dropdown">)
.rd-dropdown {
background-color: #FFF;
border: 1px solid $border-color;
border: 1px solid var(--block-border-color);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
font-size: 0.875em;
list-style: none;
Expand All @@ -26,9 +26,9 @@
}
// .rd-dropdown li.divider
&.divider {
border-bottom: 1px solid $border-color;
margin-bottom: 0.625rem;
margin-top: 0.625rem;
border-bottom: 1px solid var(--block-border-color);
margin-bottom: var(--content-block-element-margin-vertical);
margin-top: var(--content-block-element-margin-vertical);
// .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list li.divider a
a {
display: none;
Expand All @@ -44,9 +44,9 @@
input[type="reset"],
input[type="submit"] {
background-color: transparent;
color: $font-color;
color: inherit;
display: block;
padding: 0.313rem 0.625rem;// padding for dropdown item should be rem to prevent too much space when user use bigger font size.?
padding: 0.313rem var(--block-element-padding-horizontal);// padding for dropdown item should be rem to prevent too much space when user use bigger font size.?
width: 100%;
}

Expand Down
Loading

0 comments on commit e408731

Please sign in to comment.