tags and menu in resources page
This commit is contained in:
parent
0040d548b5
commit
55ad44c7cc
File diff suppressed because one or more lines are too long
|
@ -72,7 +72,7 @@
|
||||||
// 1. Global
|
// 1. Global
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
$global-font-size:100%;
|
$global-font-size:100%;
|
||||||
$global-width: 100vw;
|
$global-width: 100vw;
|
||||||
$global-lineheight: 1.5;
|
$global-lineheight: 1.5;
|
||||||
|
|
||||||
|
@ -471,7 +471,7 @@ $input-line-height: $global-lineheight;
|
||||||
$input-background: scale-color($primary-color, $lightness: 95%);
|
$input-background: scale-color($primary-color, $lightness: 95%);
|
||||||
$input-background-focus: scale-color($primary-color, $lightness: 85%);
|
$input-background-focus: scale-color($primary-color, $lightness: 85%);
|
||||||
$input-background-disabled: $light-gray;
|
$input-background-disabled: $light-gray;
|
||||||
$input-border: 1px solid $medium-gray;
|
$input-border: 1px solid $input-background;
|
||||||
$input-border-focus: 1px solid $input-background-focus;
|
$input-border-focus: 1px solid $input-background-focus;
|
||||||
$input-padding: $form-spacing / 2;
|
$input-padding: $form-spacing / 2;
|
||||||
$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
|
$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
|
||||||
|
@ -908,4 +908,3 @@ $grid-padding-gutters: $grid-margin-gutters;
|
||||||
$grid-container-padding: $grid-padding-gutters;
|
$grid-container-padding: $grid-padding-gutters;
|
||||||
$grid-container-max: $global-width;
|
$grid-container-max: $global-width;
|
||||||
$xy-block-grid-max: 8;
|
$xy-block-grid-max: 8;
|
||||||
|
|
||||||
|
|
|
@ -338,19 +338,37 @@ main {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
.widget_tag_cloud {
|
.widget_tag_cloud {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
h6 {
|
h6 {
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
display: none;
|
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 {
|
&:before {
|
||||||
content: '#tags';
|
content: '#tags';
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
|
background-color: scale-color($anchor-color, $lightness: 90%);
|
||||||
|
padding:$global-padding/4 $global-padding/2;
|
||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a{
|
a{
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
@include breakpoint(small){
|
@include breakpoint(small){
|
||||||
.widget_nav_menu {
|
.widget_nav_menu {
|
||||||
ul.menu {
|
ul.menu {
|
||||||
|
@ -7,6 +8,14 @@
|
||||||
li.menu-item-has-children {
|
li.menu-item-has-children {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
&:hover,&:focus-within {
|
||||||
|
> ul.sub-menu {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 0;
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
ul.sub-menu {
|
ul.sub-menu {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -32,20 +41,55 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@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 {
|
&:hover,&:focus-within {
|
||||||
> ul.sub-menu {
|
> ul.sub-menu {
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
background-color: $white;
|
// 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(medium){
|
|
||||||
}
|
}
|
||||||
@include breakpoint(large){
|
@include breakpoint(large){
|
||||||
}
|
}
|
||||||
|
|
|
@ -72,7 +72,7 @@
|
||||||
// 1. Global
|
// 1. Global
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
$global-font-size:100%;
|
$global-font-size:100%;
|
||||||
$global-width: 100vw;
|
$global-width: 100vw;
|
||||||
$global-lineheight: 1.5;
|
$global-lineheight: 1.5;
|
||||||
|
|
||||||
|
@ -471,7 +471,7 @@ $input-line-height: $global-lineheight;
|
||||||
$input-background: scale-color($primary-color, $lightness: 95%);
|
$input-background: scale-color($primary-color, $lightness: 95%);
|
||||||
$input-background-focus: scale-color($primary-color, $lightness: 85%);
|
$input-background-focus: scale-color($primary-color, $lightness: 85%);
|
||||||
$input-background-disabled: $light-gray;
|
$input-background-disabled: $light-gray;
|
||||||
$input-border: 1px solid $medium-gray;
|
$input-border: 1px solid $input-background;
|
||||||
$input-border-focus: 1px solid $input-background-focus;
|
$input-border-focus: 1px solid $input-background-focus;
|
||||||
$input-padding: $form-spacing / 2;
|
$input-padding: $form-spacing / 2;
|
||||||
$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
|
$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
|
||||||
|
@ -908,4 +908,3 @@ $grid-padding-gutters: $grid-margin-gutters;
|
||||||
$grid-container-padding: $grid-padding-gutters;
|
$grid-container-padding: $grid-padding-gutters;
|
||||||
$grid-container-max: $global-width;
|
$grid-container-max: $global-width;
|
||||||
$xy-block-grid-max: 8;
|
$xy-block-grid-max: 8;
|
||||||
|
|
||||||
|
|
|
@ -338,19 +338,37 @@ main {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
.widget_tag_cloud {
|
.widget_tag_cloud {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
h6 {
|
h6 {
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
display: none;
|
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 {
|
&:before {
|
||||||
content: '#tags';
|
content: '#tags';
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
|
background-color: scale-color($anchor-color, $lightness: 90%);
|
||||||
|
padding:$global-padding/4 $global-padding/2;
|
||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
.tagcloud {
|
.tagcloud {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a{
|
a{
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
@include breakpoint(small){
|
@include breakpoint(small){
|
||||||
.widget_nav_menu {
|
.widget_nav_menu {
|
||||||
ul.menu {
|
ul.menu {
|
||||||
|
@ -7,6 +8,14 @@
|
||||||
li.menu-item-has-children {
|
li.menu-item-has-children {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
&:hover,&:focus-within {
|
||||||
|
> ul.sub-menu {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 0;
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
ul.sub-menu {
|
ul.sub-menu {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -32,20 +41,55 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@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 {
|
&:hover,&:focus-within {
|
||||||
> ul.sub-menu {
|
> ul.sub-menu {
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
background-color: $white;
|
// 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(medium){
|
|
||||||
}
|
}
|
||||||
@include breakpoint(large){
|
@include breakpoint(large){
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue