arcHIVE-tech/arc-hive-wordpress-theme
arcHIVE-tech
/
arc-hive-wordpress-theme
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

resources submenus and tags adjustments

This commit is contained in:
jorge 2022-04-24 03:36:25 +02:00
parent d36c307f52
commit 647ffc36d4
18 changed files with 295 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/assets/css/editor.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/scss/_settings.scss vendored
View File

@ -181,6 +181,7 @@ $paragraph-text-rendering: optimizeLegibility;
$enable-code-inline: true; $enable-code-inline: true;
$anchor-color: $primary-color; $anchor-color: $primary-color;
$anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%); $anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%);
$anchor-color-alt: scale-color($anchor-color, $lightness: 50%);
$anchor-text-decoration: none; $anchor-text-decoration: none;
$anchor-text-decoration-hover: none; $anchor-text-decoration-hover: none;
$hr-width: $global-width; $hr-width: $global-width;

8
dist/assets/scss/app.scss vendored
View File

@ -25,8 +25,8 @@
//@include foundation-switch; //@include foundation-switch;
@include foundation-table; @include foundation-table;
// Basic components // Basic components
@include foundation-badge; // @include foundation-badge;
@include foundation-breadcrumbs; // @include foundation-breadcrumbs;
@include foundation-callout; @include foundation-callout;
@include foundation-card; @include foundation-card;
@include foundation-dropdown; @include foundation-dropdown;
@ -69,7 +69,7 @@
// global project styles // global project styles
@import "global/wp-overrides"; //errors @import "global/wp-overrides"; //errors
@import "global/wp-admin"; //errors @import "global/wp-admin"; //errors
@import "global/typography"; @import "global/typography";
@import "global/gutenberg"; @import "global/gutenberg";
@import "global/colors"; @import "global/colors";
@ -112,4 +112,4 @@
// gulp.task('icons', function() { // gulp.task('icons', function() {
// return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*') // return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
// .pipe(gulp.dest(dist+'/assets/webfonts/')); // .pipe(gulp.dest(dist+'/assets/webfonts/'));
// }); // });

2
dist/assets/scss/components/_buttons.scss vendored
View File

@ -1,5 +1,5 @@
button,.button { button,.button {
min-width: 20rem; // min-width: 20rem;
} }
.hero { .hero {
button,.button { button,.button {

56
dist/assets/scss/editor.scss vendored
View File

@ -4,38 +4,38 @@
/** === Includes === */ /** === Includes === */
@charset 'utf-8'; // @charset 'utf-8';
//
@import 'settings'; // @import 'settings';
@import 'foundation'; // @import 'foundation';
//
@include foundation-typography; // @include foundation-typography;
@include foundation-button; // @include foundation-button;
@include foundation-table; // @include foundation-table;
/** === Content Width === */ /** === Content Width === */
.wp-block { .wp-block {
width: calc(100vw - (2 * 10)); // width: calc(100vw - (2 * 10));
@each $breakpoint, $size in $grid-margin-gutters { // @each $breakpoint, $size in $grid-margin-gutters {
//
@include breakpoint($breakpoint) { // @include breakpoint($breakpoint) {
width: calc(100vw - ($size)); // width: calc(100vw - ($size));
} // }
//
} // }
} }
/** === Base Typography === */ /** === Base Typography === */
body { body {
font-size: $global-font-size; // font-size: $global-font-size;
font-family: $body-font-family; // font-family: $body-font-family;
color: $body-font-color; // color: $body-font-color;
} }
/** === Post Title === */ /** === Post Title === */
.editor-post-title__block .editor-post-title__input{ .editor-post-title__block .editor-post-title__input{
@extend h1; // @extend h1;
} }
/** === Button === */ /** === Button === */
@ -43,17 +43,17 @@ body {
// add general foundation button styling to button in editor // add general foundation button styling to button in editor
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -61,26 +61,26 @@ body {
&.is-style-outline:hover, &.is-style-outline:hover,
&.is-style-outline:focus, &.is-style-outline:focus,
&.is-style-outline:active { &.is-style-outline:active {
background: transparent; // background: transparent;
} }
} }
/** === File === */ /** === File === */
.wp-block-file__button{ .wp-block-file__button{
@include button(); // @include button();
} }
/** === Pullquote === */ /** === Pullquote === */
.wp-block-paragraph.has-background{ .wp-block-paragraph.has-background{
padding: rem-calc(20px 30px); // padding: rem-calc(20px 30px);
} }
/** === Table === */ /** === Table === */
.wp-block-table td{ .wp-block-table td{
border: none; // border: none;
} }
/** === Latest Posts grid view === */ /** === Latest Posts grid view === */
.wp-block-latest-posts.is-grid{ .wp-block-latest-posts.is-grid{
list-style: none; // list-style: none;
} }

18
dist/assets/scss/global/_gutenberg.scss vendored
View File

@ -6,11 +6,11 @@ Frontend styles for gutenberg blocks
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
.has-#{$color}-background-color { .has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
.has-#{$color}-color { .has-#{$color}-color {
color: $code; // color: $code;
} }
} }
@ -19,27 +19,27 @@ Frontend styles for gutenberg blocks
// add general foundation button styling // add general foundation button styling
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
&.has-#{$color}-background-color { &.has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
&.has-#{$color}-color { &.has-#{$color}-color {
color: $code; // color: $code;
} }
} }
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -56,10 +56,10 @@ Frontend styles for gutenberg blocks
/** === File === */ /** === File === */
.wp-block-file .wp-block-file__button{ .wp-block-file .wp-block-file__button{
@include button(); // @include button();
} }
/** === Image === */ /** === Image === */
.wp-block-image { .wp-block-image {
margin: 0; // margin: 0;
} }

27
dist/assets/scss/global/_typography.scss vendored
View File

@ -14,31 +14,8 @@
@mixin font-worksans-medium { @mixin font-worksans-medium {
font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-weight: normal;
} }
@mixin font-worksans-mediumitalic { @mixin font-worksans-mediumitalic {
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-weight: normal;
} }
//
// mods on fonts and typography
// not in foundation variables
// -----------------------------
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6,
//button,.button,
//header nav,
//.hero .claim
//{
// font-variant:all-small-caps;
//}
//
//
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
// a {
// color: $black;
// }
//}

69
dist/assets/scss/modules/_content.scss vendored
View File

@ -360,75 +360,6 @@ main {
width: auto; width: auto;
overflow: visible; overflow: visible;
} }
.widget_tag_cloud {
position: relative;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: rgba(255,255,255,0.1);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
} }
&.top.secondary { &.top.secondary {
align-content: center; align-content: center;

109
dist/assets/scss/modules/_navigation.scss vendored
View File

@ -1,4 +1,4 @@
.widget_nav_menu { .widget_nav_menu {
.menu-resources-menu-container { .menu-resources-menu-container {
position: relative; position: relative;
} }
@ -13,15 +13,24 @@
color: $black; color: $black;
justify-content: left !important; justify-content: left !important;
} }
.is-active > a {
background: unset;
color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
}
width:auto; width:auto;
li.menu-item-has-children { li.menu-item-has-children {
> a { > a {
&:after { &:after {
content:'+'; display:block;
margin-left:auto; width:0;
padding-left: $global-padding/2; height:0;
display: inline-block; border:inset 6px;
color: scale-color($anchor-color, $lightness: 85%); content:'';
border-bottom-width:0;
border-top-style:solid;
border-color: $anchor-color-alt transparent transparent transparent;
margin-top: 0px;
margin-left: 5px;
} }
} }
ul.sub-menu { ul.sub-menu {
@ -32,14 +41,24 @@
top:0; top:0;
margin:0; margin:0;
padding:0; padding:0;
width: 100%; width: auto;
visibility:hidden; visibility:hidden;
opacity:0; opacity:0;
transition: transform 0.5s; transition: transform 0.5s;
transform: translateY(-$global-padding); transform: translateY(-$global-padding);
li.menu-item-has-children {
> a {
&:after {
border-bottom-width: 6px;
border-right-width: 0;
border-right-style:solid;
border-color: transparent transparent transparent $anchor-color-alt;
margin-left: 10px;
}
}
}
} }
&:hover { &:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
> a { > a {
color: scale-color($anchor-color, $lightness: 50%); color: scale-color($anchor-color, $lightness: 50%);
&:after { &:after {
@ -51,6 +70,9 @@
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: translateY(0px); transform: translateY(0px);
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
}
ul.sub-menu { ul.sub-menu {
top: 0%; top: 0%;
left: 100%; left: 100%;
@ -60,6 +82,77 @@
} }
} }
} }
.widget_tag_cloud {
position: relative;
overflow: visible;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: scale-color($tags-background-color, $alpha: -100%);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
text-align: center;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block !important;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
@include breakpoint(small){ @include breakpoint(small){
} }
@include breakpoint(medium){ @include breakpoint(medium){

1
src/assets/scss/_settings.scss
View File

@ -181,6 +181,7 @@ $paragraph-text-rendering: optimizeLegibility;
$enable-code-inline: true; $enable-code-inline: true;
$anchor-color: $primary-color; $anchor-color: $primary-color;
$anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%); $anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%);
$anchor-color-alt: scale-color($anchor-color, $lightness: 50%);
$anchor-text-decoration: none; $anchor-text-decoration: none;
$anchor-text-decoration-hover: none; $anchor-text-decoration-hover: none;
$hr-width: $global-width; $hr-width: $global-width;

8
src/assets/scss/app.scss
View File

@ -25,8 +25,8 @@
//@include foundation-switch; //@include foundation-switch;
@include foundation-table; @include foundation-table;
// Basic components // Basic components
@include foundation-badge; // @include foundation-badge;
@include foundation-breadcrumbs; // @include foundation-breadcrumbs;
@include foundation-callout; @include foundation-callout;
@include foundation-card; @include foundation-card;
@include foundation-dropdown; @include foundation-dropdown;
@ -69,7 +69,7 @@
// global project styles // global project styles
@import "global/wp-overrides"; //errors @import "global/wp-overrides"; //errors
@import "global/wp-admin"; //errors @import "global/wp-admin"; //errors
@import "global/typography"; @import "global/typography";
@import "global/gutenberg"; @import "global/gutenberg";
@import "global/colors"; @import "global/colors";
@ -112,4 +112,4 @@
// gulp.task('icons', function() { // gulp.task('icons', function() {
// return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*') // return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
// .pipe(gulp.dest(dist+'/assets/webfonts/')); // .pipe(gulp.dest(dist+'/assets/webfonts/'));
// }); // });

2
src/assets/scss/components/_buttons.scss
View File

@ -1,5 +1,5 @@
button,.button { button,.button {
min-width: 20rem; // min-width: 20rem;
} }
.hero { .hero {
button,.button { button,.button {

56
src/assets/scss/editor.scss
View File

@ -4,38 +4,38 @@
/** === Includes === */ /** === Includes === */
@charset 'utf-8'; // @charset 'utf-8';
//
@import 'settings'; // @import 'settings';
@import 'foundation'; // @import 'foundation';
//
@include foundation-typography; // @include foundation-typography;
@include foundation-button; // @include foundation-button;
@include foundation-table; // @include foundation-table;
/** === Content Width === */ /** === Content Width === */
.wp-block { .wp-block {
width: calc(100vw - (2 * 10)); // width: calc(100vw - (2 * 10));
@each $breakpoint, $size in $grid-margin-gutters { // @each $breakpoint, $size in $grid-margin-gutters {
//
@include breakpoint($breakpoint) { // @include breakpoint($breakpoint) {
width: calc(100vw - ($size)); // width: calc(100vw - ($size));
} // }
//
} // }
} }
/** === Base Typography === */ /** === Base Typography === */
body { body {
font-size: $global-font-size; // font-size: $global-font-size;
font-family: $body-font-family; // font-family: $body-font-family;
color: $body-font-color; // color: $body-font-color;
} }
/** === Post Title === */ /** === Post Title === */
.editor-post-title__block .editor-post-title__input{ .editor-post-title__block .editor-post-title__input{
@extend h1; // @extend h1;
} }
/** === Button === */ /** === Button === */
@ -43,17 +43,17 @@ body {
// add general foundation button styling to button in editor // add general foundation button styling to button in editor
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -61,26 +61,26 @@ body {
&.is-style-outline:hover, &.is-style-outline:hover,
&.is-style-outline:focus, &.is-style-outline:focus,
&.is-style-outline:active { &.is-style-outline:active {
background: transparent; // background: transparent;
} }
} }
/** === File === */ /** === File === */
.wp-block-file__button{ .wp-block-file__button{
@include button(); // @include button();
} }
/** === Pullquote === */ /** === Pullquote === */
.wp-block-paragraph.has-background{ .wp-block-paragraph.has-background{
padding: rem-calc(20px 30px); // padding: rem-calc(20px 30px);
} }
/** === Table === */ /** === Table === */
.wp-block-table td{ .wp-block-table td{
border: none; // border: none;
} }
/** === Latest Posts grid view === */ /** === Latest Posts grid view === */
.wp-block-latest-posts.is-grid{ .wp-block-latest-posts.is-grid{
list-style: none; // list-style: none;
} }

18
src/assets/scss/global/_gutenberg.scss
View File

@ -6,11 +6,11 @@ Frontend styles for gutenberg blocks
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
.has-#{$color}-background-color { .has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
.has-#{$color}-color { .has-#{$color}-color {
color: $code; // color: $code;
} }
} }
@ -19,27 +19,27 @@ Frontend styles for gutenberg blocks
// add general foundation button styling // add general foundation button styling
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
&.has-#{$color}-background-color { &.has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
&.has-#{$color}-color { &.has-#{$color}-color {
color: $code; // color: $code;
} }
} }
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -56,10 +56,10 @@ Frontend styles for gutenberg blocks
/** === File === */ /** === File === */
.wp-block-file .wp-block-file__button{ .wp-block-file .wp-block-file__button{
@include button(); // @include button();
} }
/** === Image === */ /** === Image === */
.wp-block-image { .wp-block-image {
margin: 0; // margin: 0;
} }

27
src/assets/scss/global/_typography.scss
View File

@ -14,31 +14,8 @@
@mixin font-worksans-medium { @mixin font-worksans-medium {
font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-weight: normal;
} }
@mixin font-worksans-mediumitalic { @mixin font-worksans-mediumitalic {
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-weight: normal;
} }
//
// mods on fonts and typography
// not in foundation variables
// -----------------------------
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6,
//button,.button,
//header nav,
//.hero .claim
//{
// font-variant:all-small-caps;
//}
//
//
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
// a {
// color: $black;
// }
//}

69
src/assets/scss/modules/_content.scss
View File

@ -360,75 +360,6 @@ main {
width: auto; width: auto;
overflow: visible; overflow: visible;
} }
.widget_tag_cloud {
position: relative;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: rgba(255,255,255,0.1);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
} }
&.top.secondary { &.top.secondary {
align-content: center; align-content: center;

109
src/assets/scss/modules/_navigation.scss
View File

@ -1,4 +1,4 @@
.widget_nav_menu { .widget_nav_menu {
.menu-resources-menu-container { .menu-resources-menu-container {
position: relative; position: relative;
} }
@ -13,15 +13,24 @@
color: $black; color: $black;
justify-content: left !important; justify-content: left !important;
} }
.is-active > a {
background: unset;
color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
}
width:auto; width:auto;
li.menu-item-has-children { li.menu-item-has-children {
> a { > a {
&:after { &:after {
content:'+'; display:block;
margin-left:auto; width:0;
padding-left: $global-padding/2; height:0;
display: inline-block; border:inset 6px;
color: scale-color($anchor-color, $lightness: 85%); content:'';
border-bottom-width:0;
border-top-style:solid;
border-color: $anchor-color-alt transparent transparent transparent;
margin-top: 0px;
margin-left: 5px;
} }
} }
ul.sub-menu { ul.sub-menu {
@ -32,14 +41,24 @@
top:0; top:0;
margin:0; margin:0;
padding:0; padding:0;
width: 100%; width: auto;
visibility:hidden; visibility:hidden;
opacity:0; opacity:0;
transition: transform 0.5s; transition: transform 0.5s;
transform: translateY(-$global-padding); transform: translateY(-$global-padding);
li.menu-item-has-children {
> a {
&:after {
border-bottom-width: 6px;
border-right-width: 0;
border-right-style:solid;
border-color: transparent transparent transparent $anchor-color-alt;
margin-left: 10px;
}
}
}
} }
&:hover { &:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
> a { > a {
color: scale-color($anchor-color, $lightness: 50%); color: scale-color($anchor-color, $lightness: 50%);
&:after { &:after {
@ -51,6 +70,9 @@
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: translateY(0px); transform: translateY(0px);
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
}
ul.sub-menu { ul.sub-menu {
top: 0%; top: 0%;
left: 100%; left: 100%;
@ -60,6 +82,77 @@
} }
} }
} }
.widget_tag_cloud {
position: relative;
overflow: visible;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: scale-color($tags-background-color, $alpha: -100%);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
text-align: center;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block !important;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
@include breakpoint(small){ @include breakpoint(small){
} }
@include breakpoint(medium){ @include breakpoint(medium){