Skip to content

Commit

Permalink
reorganize variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@danalvrz
danalvrz committed Oct 31, 2024
1 parent 77aa16b commit bf7d5a3
Show file tree
Hide file tree
Showing 6 changed files with 248 additions and 154 deletions.
197 changes: 122 additions & 75 deletions packages/volto-light-theme/src/theme/_bgcolor-blocks-layout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.blocks-group-wrapper {
background: var(--theme-color);
color: var(--theme-foreground-color);
@include color-block-change-vertical-spacing();

&:first-child {
Expand All @@ -22,8 +23,9 @@
color: var(--theme-foreground-color);
}

a:not(.item):not(:has(> .teaser-item), :has(> .listing-body)) {
a:not(.item):not(:has(> .teaser-item), :has(> .listing-body), :has(> .card-container)) {
text-decoration: underline;
color: var(--link-foreground-color, --theme-foreground-color)
}

&:first-child:has(> .documentFirstHeading) {
Expand Down Expand Up @@ -73,32 +75,8 @@
}
}

// Slider
#page-document .blocks-group-wrapper.grey:has(.block.slider:first-child) {
padding-top: 0;
padding-bottom: 0px; // Adjust for the padding from the slider itself
}

#page-document .blocks-group-wrapper.grey .block.slider,
.block-editor-slider.has--backgroundColor--grey {
.slider-dot:not(.slider-dot--selected)::after {
background: $white;
}
}

// Edit mode adjustments
.block-editor-gridBlock.has--backgroundColor--grey .block h2.headline {
padding-top: $spacing-xlarge;
}

// Color map
@mixin use-theme-colors() {
// Requires setting the following variables:
// --theme-color: #fff;
// --theme-high-contrast-color: #ecebeb;
// --theme-foreground-color: #000;
// --theme-low-contrast-foreground-color: #555555;

// Page title
h1.documentFirstHeading {
color: var(--theme-foreground-color);
Expand Down Expand Up @@ -140,7 +118,7 @@
// Teaser
&.teaser {
.teaser-item {
border-color: var(--theme-foreground-color);
border-bottom-color: var(--theme-foreground-color) !important;
}

h2,
Expand Down Expand Up @@ -183,7 +161,7 @@
}

.listing-item {
border-color: var(--theme-foreground-color);
border-bottom-color: var(--theme-foreground-color) !important;

a > .listing-body {
h3,
Expand Down Expand Up @@ -357,6 +335,18 @@

// Slider
&.slider {
// To use accent color for flag
// .teaser-item .teaser-item-title {
// background: var(--accent-color, rgba(0, 0, 0, 0.75));

// .title,
// p,
// button,
// h2 {
// color: var(--accent-foreground-color) !important;
// }
// }

.slider-dots {
.slider-dot {
&::after {
Expand Down Expand Up @@ -802,7 +792,8 @@
}
}
// Inherit colors from parent Accordion
.blocks-group-wrapper.default {
.blocks-group-wrapper,
.block {
--theme-high-contrast-color: inherit !important;
--theme-color: inherit !important;
--theme-high-contrast-color: inherit !important;
Expand Down Expand Up @@ -847,16 +838,6 @@
& [data-slate-placeholder='true'] {
color: var(--theme-low-contrast-foreground-color) !important;
}

.ui.basic.button.delete-button {
&:hover {
background: $white !important;
}
}

.renderer-wrapper.empty p {
color: black !important;
}
}

.block-editor-slateTable {
Expand Down Expand Up @@ -945,76 +926,142 @@
}
}

// Navigation
nav.navigation {
button.item {
color: var(--primary-color, $black);
}
.submenu-wrapper {
.submenu.active {
background: var(--accent-color, $lightgrey);

.submenu-inner {
a,
h2 {
color: var(--accent-foreground-color, $black);
// Header
header.header-wrapper {
background: var(--primary-color);
.header {
.tools-wrapper {
.tools {
a {
color: var(--primary-foreground-color);
}
}
}

a span {
&:hover {
border-color: var(--accent-foreground-color, $black);
}
}
// Navigation
nav.navigation {
button.item {
color: var(--primary-foreground-color);

// To use accent color nav items states
// &:hover,
// &:focus,
// &:active {
// color: var(--accent-color);
// }
}
.submenu-wrapper {
.submenu.active {
background: var(--accent-color);

.submenu-inner {
a,
h2 {
color: var(--accent-foreground-color);
}

a span {
&:hover {
border-color: var(--accent-foreground-color);
}
}

.subitem-wrapper {
border-color: var(--accent-foreground-color);
}

button.close {
background: none;
outline: 1px solid var(--accent-color);

.subitem-wrapper {
border-color: var(--accent-foreground-color, $black);
&:hover,
&:focus {
outline-color: var(--accent-foreground-color);
}

svg path {
fill: var(--accent-foreground-color);
}
}
}
}
}
}

button.close {
background: none;
outline: 1px solid var(--accent-color, $lightgrey);
// Search
.search-bar {
background-color: var(--secondary-color);

&:hover,
&:focus {
outline-color: var(--accent-foreground-color, $black);
.searchbox {
border-bottom-color: var(--secondary-foreground-color) !important;
input {
background-color: var(--secondary-color);
color: var(--secondary-foreground-color);
&::placeholder {
color: var(--secondary-foreground-color);
}
}

& > button {
svg path {
fill: var(--accent-foreground-color, $black);
fill: var(--secondary-foreground-color);
}
}
}
}

.search {
.search-button {
svg path {
fill: var(--primary-foreground-color);
}
}
}
}
}

// Breadcrumbs
#main > .breadcrumbs {
background: var(--accent-color);

.section.active {
color: var(--accent-foreground-color);
}

a.section {
color: var(--link-foreground-color, --secondary-foreground-color);
}

a.home {
svg {
fill: var(--link-foreground-color, --secondary-foreground-color) !important;
}
}
}

// Footer
#footer .footer {
background: var(--primary-color, $lightgrey);
background: var(--secondary-color);

.footer-message {
color: var(--primary-foreground-color, $black);
color: var(--secondary-foreground-color);

a {
color: var(--primary-foreground-color, $black);
color: var(--link-foreground-color, --secondary-foreground-color) !important;
}
}

a.item,
.footer-branding {
color: var(--primary-foreground-color, $black);
color: var(--link-foreground-color, --secondary-foreground-color) !important;
}
li.item {
border-color: var(--primary-foreground-color, $black);
color: var(--link-foreground-color, --secondary-foreground-color) !important;
border-right-color: var(--link-foreground-color, --secondary-foreground-color) !important;
}
}
}

body {
@include use-theme-colors();
@property --theme-color {
inherits: true;
initial-value: $white;
syntax: '<color>';
}
}
13 changes: 1 addition & 12 deletions packages/volto-light-theme/src/theme/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,15 +131,14 @@
width: 100%;
height: 90px;
padding-top: 2rem;
background-color: $lightgrey;
transition:
top 500ms ease-in-out,
height 600ms ease-in-out;
transition-property: top, height;

&.active {
top: 0;
height: 190px;
height: 188px;

@media only screen and (max-width: $largest-mobile-screen) {
height: calc(100vh - 130px);
Expand Down Expand Up @@ -179,16 +178,13 @@
width: 70%;
padding-left: 0;
margin-right: 1rem;
background-color: $lightgrey;
color: $black;
font-size: 1.5rem;

@media only screen and (min-width: $tablet-breakpoint) and (max-width: 788px) {
margin-left: 1.5rem;
}

&::placeholder {
color: $black;
opacity: 0.5;
}
}
Expand Down Expand Up @@ -412,17 +408,11 @@ body.has-toolbar.has-sidebar {
.item {
position: relative;
color: $black;
color: var(--primary-color, $black);
font-size: 18px;
font-weight: 600;
line-height: 24px;
text-transform: initial;

&.active,
&:hover {
color: var(--accent-color, $black);
}

&.active::before,
&:hover::before {
position: absolute;
Expand Down Expand Up @@ -523,7 +513,6 @@ body.has-toolbar.has-sidebar {
li {
padding: 0;
padding-bottom: 10px;
color: $white;

a {
padding-bottom: 0;
Expand Down
Loading

0 comments on commit bf7d5a3

Please sign in to comment.