created and styled resources menus and tags
This commit is contained in:
parent
55ad44c7cc
commit
1c91a61880
File diff suppressed because one or more lines are too long
|
|
@ -336,43 +336,61 @@ main {
|
|||
justify-content: center;
|
||||
.widget_nav_menu,.widget_tag_cloud {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
visibility:hidden;
|
||||
opacity:0;
|
||||
transition: transform 0.5s;
|
||||
transform: translateY(-$global-padding);
|
||||
padding: $global-padding*3;
|
||||
height:0;
|
||||
width:50vw;
|
||||
// max-width: 20rem;
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: scale-color($anchor-color, $lightness: 90%);
|
||||
background-color: $tags-background-color;
|
||||
padding:$global-padding/4 $global-padding/2;
|
||||
&:before {
|
||||
content: '#';
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
color: $anchor-color;
|
||||
}
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
a{
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,95 +1,101 @@
|
|||
|
||||
@include breakpoint(small){
|
||||
.widget_nav_menu {
|
||||
.menu-resources-menu-container {
|
||||
position: relative;
|
||||
}
|
||||
ul.menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li.menu-item-has-children {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
li {
|
||||
position: relative;
|
||||
&:hover,&:focus-within {
|
||||
> ul.sub-menu {
|
||||
}
|
||||
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;
|
||||
position: absolute;
|
||||
margin-left: 0;
|
||||
background-color: $white;
|
||||
color: scale-color($anchor-color, $lightness: 85%);
|
||||
}
|
||||
}
|
||||
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;
|
||||
background-color: scale-color($anchor-color, $lightness: 98%);
|
||||
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;
|
||||
left:0%;
|
||||
top:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
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){
|
||||
.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){
|
||||
}
|
||||
|
|
|
|||
|
|
@ -336,43 +336,61 @@ main {
|
|||
justify-content: center;
|
||||
.widget_nav_menu,.widget_tag_cloud {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
visibility:hidden;
|
||||
opacity:0;
|
||||
transition: transform 0.5s;
|
||||
transform: translateY(-$global-padding);
|
||||
padding: $global-padding*3;
|
||||
height:0;
|
||||
width:50vw;
|
||||
// max-width: 20rem;
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: scale-color($anchor-color, $lightness: 90%);
|
||||
background-color: $tags-background-color;
|
||||
padding:$global-padding/4 $global-padding/2;
|
||||
&:before {
|
||||
content: '#';
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
color: $anchor-color;
|
||||
}
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
a{
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,95 +1,101 @@
|
|||
|
||||
@include breakpoint(small){
|
||||
.widget_nav_menu {
|
||||
.menu-resources-menu-container {
|
||||
position: relative;
|
||||
}
|
||||
ul.menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li.menu-item-has-children {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
li {
|
||||
position: relative;
|
||||
&:hover,&:focus-within {
|
||||
> ul.sub-menu {
|
||||
}
|
||||
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;
|
||||
position: absolute;
|
||||
margin-left: 0;
|
||||
background-color: $white;
|
||||
color: scale-color($anchor-color, $lightness: 85%);
|
||||
}
|
||||
}
|
||||
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;
|
||||
background-color: scale-color($anchor-color, $lightness: 98%);
|
||||
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;
|
||||
left:0%;
|
||||
top:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
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){
|
||||
.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){
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue