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;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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){
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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){
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue