created and styled resources menus and tags

This commit is contained in:
jorge 2022-04-11 01:06:16 +02:00
parent 55ad44c7cc
commit 1c91a61880
5 changed files with 237 additions and 189 deletions

File diff suppressed because one or more lines are too long

View File

@ -336,43 +336,61 @@ main {
justify-content: center; justify-content: center;
.widget_nav_menu,.widget_tag_cloud { .widget_nav_menu,.widget_tag_cloud {
width: auto; width: auto;
overflow: visible;
} }
.widget_tag_cloud { .widget_tag_cloud {
position: relative; position: relative;
overflow: visible; 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 { h6 {
display:none; 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: 0;
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
} }
.tagcloud { .tagcloud {
display: none; position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s;
transform: translateY(-$global-padding);
padding: $global-padding*3; padding: $global-padding*3;
height:0;
width:50vw; width:50vw;
// max-width: 20rem;
a { a {
display: inline-block; display: inline-block;
background-color: scale-color($anchor-color, $lightness: 90%); background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2; padding:$global-padding/4 $global-padding/2;
&:before { &:before {
content: '#'; content: '#';
display: inline-block; display: inline-block;
} }
}
}
&:before {
content: '#tags';
color: $primary-color;
background-color: scale-color($anchor-color, $lightness: 90%);
padding:$global-padding/4 $global-padding/2;
}
&:hover { &:hover {
.tagcloud { color: $anchor-color;
display: inline-block;
position: absolute;
top: 0;
} }
} }
a{
display: inline;
} }
} }
} }

View File

@ -1,95 +1,101 @@
@include breakpoint(small){
.widget_nav_menu { .widget_nav_menu {
.menu-resources-menu-container {
position: relative;
}
ul.menu { ul.menu {
list-style: none; list-style: none;
text-align: left;
li {
position: relative;
}
a {
display:block;
color: $black;
justify-content: left !important;
}
width:auto;
li.menu-item-has-children {
> a {
&:after {
content:'+';
margin-left:auto;
padding-left: $global-padding/2;
display: inline-block;
color: scale-color($anchor-color, $lightness: 85%);
}
}
ul.sub-menu {
list-style: none;
background-color: scale-color($anchor-color, $lightness: 98%);
position: absolute;
left:0%;
top:0;
margin:0; margin:0;
padding:0; padding:0;
li.menu-item-has-children {
display: inline-block;
position: relative;
&:hover,&:focus-within {
> ul.sub-menu {
display: inline-block;
position: absolute;
margin-left: 0;
background-color: $white;
}
}
ul.sub-menu {
list-style: none;
display: none;
li.menu-item-has-children {
position:relative;
display: inline-block;
padding-right:100%;
> a:after {
content: ' > ';
display: inline;
position: absolute;
color: scale-color($anchor-color, $lightness: 80%);
}
&:hover,&:focus-within {
> ul.sub-menu {
display: inline-block;
position: absolute;
top: 0;
left: 50%;
margin-left: auto;
width: 100%; width: 100%;
visibility:hidden;
opacity:0;
transition: transform 0.5s;
transform: translateY(-$global-padding);
}
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
> a {
color: scale-color($anchor-color, $lightness: 50%);
&:after {
color: scale-color($anchor-color, $lightness: 50%);
}
}
> ul.sub-menu {
top:100%;
visibility: visible;
opacity: 1;
transform: translateY(0px);
ul.sub-menu {
top: 0%;
left: 100%;
} }
} }
} }
} }
} }
} }
} // .widget_tag_cloud {
// h6 {
// display:none;
// }
// .tagcloud {
// display: none;
// padding: $global-padding*3;
// width:50vw;
// // max-width: 20rem;
// a {
// display: inline-block;
// background-color: scale-color($anchor-color, $lightness: 90%);
// padding:$global-padding/4 $global-padding/2;
// &:before {
// content: '#';
// display: inline-block;
// }
// }
// }
// &:before {
// content: '#tags';
// color: $primary-color;
// background-color: scale-color($anchor-color, $lightness: 90%);
// padding:$global-padding/4 $global-padding/2;
// }
// &:hover{
// .tagcloud {
// display: inline-block;
// position: absolute;
// top: 0;
// }
// }
// }
@include breakpoint(small){
} }
@include breakpoint(medium){ @include breakpoint(medium){
.widget_nav_menu {
ul.menu {
// list-style: none;
// margin: 0;
// padding: 0;
li.menu-item-has-children {
// display: inline-block;
// position: relative;
&:hover,&:focus-within {
> ul.sub-menu {
// display: inline-block;
position: absolute;
// margin-left: 0;
// background-color: $white;
}
}
ul.sub-menu {
// list-style: none;
// display: none;
li.menu-item-has-children {
// position:relative;
// display: inline-block;
// padding-right:100%;
> a:after {
// content: ' > ';
// display: inline;
// position: absolute;
// color: scale-color($anchor-color, $lightness: 80%);
}
&:hover,&:focus-within {
> ul.sub-menu {
// display: inline-block;
position: absolute;
// top: 0;
// left: 50%;
// margin-left: auto;
// width: 100%;
}
}
}
}
}
}
}
} }
@include breakpoint(large){ @include breakpoint(large){
} }

View File

@ -336,43 +336,61 @@ main {
justify-content: center; justify-content: center;
.widget_nav_menu,.widget_tag_cloud { .widget_nav_menu,.widget_tag_cloud {
width: auto; width: auto;
overflow: visible;
} }
.widget_tag_cloud { .widget_tag_cloud {
position: relative; position: relative;
overflow: visible; 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 { h6 {
display:none; 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: 0;
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
} }
.tagcloud { .tagcloud {
display: none; position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s;
transform: translateY(-$global-padding);
padding: $global-padding*3; padding: $global-padding*3;
height:0;
width:50vw; width:50vw;
// max-width: 20rem;
a { a {
display: inline-block; display: inline-block;
background-color: scale-color($anchor-color, $lightness: 90%); background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2; padding:$global-padding/4 $global-padding/2;
&:before { &:before {
content: '#'; content: '#';
display: inline-block; display: inline-block;
} }
}
}
&:before {
content: '#tags';
color: $primary-color;
background-color: scale-color($anchor-color, $lightness: 90%);
padding:$global-padding/4 $global-padding/2;
}
&:hover { &:hover {
.tagcloud { color: $anchor-color;
display: inline-block;
position: absolute;
top: 0;
} }
} }
a{
display: inline;
} }
} }
} }

View File

@ -1,95 +1,101 @@
@include breakpoint(small){
.widget_nav_menu { .widget_nav_menu {
.menu-resources-menu-container {
position: relative;
}
ul.menu { ul.menu {
list-style: none; list-style: none;
text-align: left;
li {
position: relative;
}
a {
display:block;
color: $black;
justify-content: left !important;
}
width:auto;
li.menu-item-has-children {
> a {
&:after {
content:'+';
margin-left:auto;
padding-left: $global-padding/2;
display: inline-block;
color: scale-color($anchor-color, $lightness: 85%);
}
}
ul.sub-menu {
list-style: none;
background-color: scale-color($anchor-color, $lightness: 98%);
position: absolute;
left:0%;
top:0;
margin:0; margin:0;
padding:0; padding:0;
li.menu-item-has-children {
display: inline-block;
position: relative;
&:hover,&:focus-within {
> ul.sub-menu {
display: inline-block;
position: absolute;
margin-left: 0;
background-color: $white;
}
}
ul.sub-menu {
list-style: none;
display: none;
li.menu-item-has-children {
position:relative;
display: inline-block;
padding-right:100%;
> a:after {
content: ' > ';
display: inline;
position: absolute;
color: scale-color($anchor-color, $lightness: 80%);
}
&:hover,&:focus-within {
> ul.sub-menu {
display: inline-block;
position: absolute;
top: 0;
left: 50%;
margin-left: auto;
width: 100%; width: 100%;
visibility:hidden;
opacity:0;
transition: transform 0.5s;
transform: translateY(-$global-padding);
}
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
> a {
color: scale-color($anchor-color, $lightness: 50%);
&:after {
color: scale-color($anchor-color, $lightness: 50%);
}
}
> ul.sub-menu {
top:100%;
visibility: visible;
opacity: 1;
transform: translateY(0px);
ul.sub-menu {
top: 0%;
left: 100%;
} }
} }
} }
} }
} }
} }
} // .widget_tag_cloud {
// h6 {
// display:none;
// }
// .tagcloud {
// display: none;
// padding: $global-padding*3;
// width:50vw;
// // max-width: 20rem;
// a {
// display: inline-block;
// background-color: scale-color($anchor-color, $lightness: 90%);
// padding:$global-padding/4 $global-padding/2;
// &:before {
// content: '#';
// display: inline-block;
// }
// }
// }
// &:before {
// content: '#tags';
// color: $primary-color;
// background-color: scale-color($anchor-color, $lightness: 90%);
// padding:$global-padding/4 $global-padding/2;
// }
// &:hover{
// .tagcloud {
// display: inline-block;
// position: absolute;
// top: 0;
// }
// }
// }
@include breakpoint(small){
} }
@include breakpoint(medium){ @include breakpoint(medium){
.widget_nav_menu {
ul.menu {
// list-style: none;
// margin: 0;
// padding: 0;
li.menu-item-has-children {
// display: inline-block;
// position: relative;
&:hover,&:focus-within {
> ul.sub-menu {
// display: inline-block;
position: absolute;
// margin-left: 0;
// background-color: $white;
}
}
ul.sub-menu {
// list-style: none;
// display: none;
li.menu-item-has-children {
// position:relative;
// display: inline-block;
// padding-right:100%;
> a:after {
// content: ' > ';
// display: inline;
// position: absolute;
// color: scale-color($anchor-color, $lightness: 80%);
}
&:hover,&:focus-within {
> ul.sub-menu {
// display: inline-block;
position: absolute;
// top: 0;
// left: 50%;
// margin-left: auto;
// width: 100%;
}
}
}
}
}
}
}
} }
@include breakpoint(large){ @include breakpoint(large){
} }