NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Mischa Spelt
2020-01-04 20:41:09 +01:00
commit 150d0179fc
1328 changed files with 186900 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

676
colormag/SCSS/header/_header.scss Normal file
View File

@@ -0,0 +1,676 @@
#masthead {
.main-small-navigation {
ul {
&.menu-scrollbar {
overflow-y: scroll;
}
}
li {
&:hover,
&.current-page-ancestor,
&.current-menu-ancestor,
&.current-page-item,
&.current-menu-item {
> a {
color: $white;
background-color: $primary;
}
}
}
}
/*--------------------------------------------------------------
Clean Layout
--------------------------------------------------------------*/
&.colormag-header-clean {
.date-in-header {
padding-right: 20px;
}
.news-bar {
padding: 8px 0;
}
.breaking-news {
float: left;
.breaking-news-latest {
background: $news-background;
padding: 0 10px;
display: inline-block;
vertical-align: top;
color:$white;
font-weight: 400;
}
.newsticker {
padding-left: 10px;
text-align: left;
position: relative;
a {
color: $color_gray_four;
&:hover {
color: $primary;
}
}
}
}
.social-links {
i.fa {
color: $social-icon-color;
transition: color 0.35s;
font-size: 16px;
padding: 0 6px;
}
li {
&:hover {
i.fa {
color: $primary;
}
}
}
}
#header-text-nav-wrap {
padding: 30px 0;
}
.home-icon {
.fa {
font-size: 21px;
}
}
#site-navigation {
box-shadow: 0 0 0 rgba(0, 0, 0, 0 ) inset;
position: relative;
background-color:transparent;
border-top: 0 solid transparent;
z-index: 999;
.inner-wrap {
background-color: $news-background;
}
.fa.search-top {
padding: 20px;
line-height: 26px;
position: relative;
float: right;
right: 0;
}
.random-post {
position: relative;
float: right;
}
.search-form-top {
top: 100%;
}
.menu-toggle {
line-height: 26px;
&::before {
padding: 20px;
}
}
}
.main-navigation {
a {
font-weight: 500;
padding: 20px;
line-height: 26px;
}
ul {
li {
ul {
top: 100%;
li {
a {
width: auto;
padding: 10px 15px;
}
ul {
top: 0;
}
}
}
&.focus > ul {
display: block;
visibility: visible;
opacity: 1;
}
}
}
}
.main-small-navigation {
.menu-primary-container,
.nav-menu,
.menu {
padding-top: 0;
padding-top: 0;
position: absolute;
top: 100%;
width: 100%;
}
.random-post {
line-height: 26px;
a {
padding: 20px;
}
}
}
}
/*--------------------------------------------------------------
classic Layout
--------------------------------------------------------------*/
&.colormag-header-classic {
.date-in-header {
padding-right: 20px;
}
.news-bar {
padding: 8px 0;
}
.breaking-news {
float: left;
.breaking-news-latest {
background: $news-background;
padding: 0 10px;
color:$white;
font-weight: 400;
display: inline-block;
vertical-align: top;
}
.newsticker {
padding-left: 10px;
position: relative;
text-align: left;
a {
color: $color_gray_four;
&:hover {
color: $primary;
}
}
}
}
.social-links {
i.fa {
color: $social-icon-color;
transition: color 0.35s;
font-size: 16px;
padding: 0 6px;
}
li {
&:hover {
i.fa {
color: $primary;
}
}
}
}
#header-text-nav-wrap {
padding: 30px 0 20px;
#header-right-section {
display: none;
}
#header-left-section {
float: none;
text-align: center;
#header-logo-image,
#header-text {
float: none;
padding-right: 0;
}
}
}
#site-navigation {
box-shadow: 0 0 0 rgba(0, 0, 0, 0 ) inset;
position: relative;
background-color:transparent;
border-top: 0 solid transparent;
z-index: 999;
.inner-wrap {
background-color: transparent;
}
.fa.search-top {
color: $menu-link-color;
float: right;
font-size: 16px;
padding: 15px;
&:hover {
background: transparent;
color: $primary;
}
}
.menu-toggle {
line-height: 26px;
border: 1px solid $menu-link-color;
&::before {
padding: 20px;
color: $menu-link-color;;
}
&:hover {
border-color: $primary;
&::before {
color: $white;
}
}
}
}
.main-navigation {
a {
font-weight: 700;
padding: 10px 15px;
line-height: 26px;
color: $menu-link-color;
&::after {
color: inherit;
}
&:hover {
background-color: transparent;
}
}
ul {
li a {
background-color: transparent;
}
> li {
float: none;
display: inline-block;
vertical-align: top;
> a {
border-bottom: 2px solid transparent;
transition: border 0.5s ease;
}
&:hover,
&.current-menu-item,
&.current-menu-ancestor {
> a {
background-color: transparent;
border-bottom: 2px solid $primary;
}
}
}
li.focus {
>a {
border-color: $primary;
}
> ul {
opacity: 1;
visibility: visible;
}
}
ul.sub-menu {
top: 100%;
background-color: $color_gray_ten;
transition: all 0.3s ease;
display: block;
opacity: 0;
visibility: hidden;
border: 1px solid $color_gray_eight;
li {
border-bottom:1px solid $color_gray_eight;
display: block;
a {
width: auto;
padding: 10px 15px;
transition: all 0.5s ease;
border-bottom: none transparent;
}
&:hover,
&.current-menu-ancestor,
&.current-menu-item,
&.focus {
border-color: $primary;
background-color: transparent;
> a {
color: $white;
background-color: $primary;
}
}
&:last-child {
border-bottom: none transparent;
}
ul {
top: 0;
}
}
}
li.menu-item-has-children {
&:hover {
> ul.sub-menu {
opacity: 1;
visibility: visible;
}
}
}
}
.random-post {
a {
font-size: 14px;
padding: 10px 15px;
color: $menu-link-color;
&:hover {
background: transparent;
.fa-random {
color: $primary;
}
}
.fa-random {
color: $menu-link-color;
}
}
}
.home-icon {
background: none;
a {
padding: 10px 15px;
&:hover {
.fa {
color: $primary;
}
}
}
.fa {
color: $menu-link-color;
}
}
}
.main-small-navigation {
.menu-primary-container,
.nav-menu {
padding-top: 0;
padding-top: 0;
position: absolute;
top: 100%;
width: 100%;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.2);
}
.random-post {
bottom: 0;
a {
font-size: 14px;
padding: 12px 15px;
color: $menu-link-color;
.fa-random {
color: $menu-link-color;
}
&:hover {
background: transparent;
.fa-random {
color: $primary;
}
}
}
}
.menu-toggle {
background-color: $primary;
border-color: $primary;
&::before {
color: $white;
}
}
}
.is-sticky {
#site-navigation {
background-color: $white;
box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
}
}
}
}
@media screen and (max-width: 768px) {
.better-responsive-menu{
.main-small-navigation .menu-primary-container {
padding-bottom: 20px;
}
}
#masthead {
.main-small-navigation {
li {
&:hover,
&.current-page-ancestor,
&.current-menu-ancestor,
&.current-page-item,
&.current-menu-item {
> .sub-toggle {
background-color: $white;
i {
color: $primary;
}
}
}
}
}
&.colormag-header-clean {
#menu-primary {
background-color: #ffffff;
}
.date-in-header,
.social-links {
float: none;
text-align: center;
}
.breaking-news {
width: 100%;
float: none;
margin-bottom: 5px;
text-align: center;
}
#header-text-nav-wrap {
padding: 0 0 20px;
}
#header-left-section,
#header-logo-image {
margin-bottom: 0;
}
#site-navigation {
.random-post {
a {
padding: 20px;
}
}
.menu-toggle::before,
.fa.search-top {
padding: 20px;
}
}
.main-small-navigation {
.home-icon {
a {
padding: 20px;
}
}
.menu-toggle {
background-color: $primary;
}
.random-post {
a {
padding: 15px;
}
}
}
}
&.colormag-header-classic {
#menu-primary {
background-color: #ffffff;
}
.date-in-header,
.breaking-news,
.social-links {
width: 100%;
float: none;
text-align: center;
}
#header-text-nav-wrap {
padding: 0;
}
#header-left-section,
#header-logo-image {
margin-bottom: 0;
}
.main-small-navigation {
.menu-toggle {
background-color: $primary;
border-color: $primary;
}
.random-post {
a {
padding: 15px;
}
}
}
#site-navigation {
.random-post {
a {
padding: 15px;
}
}
.menu-toggle::before,
.fa.search-top {
padding: 15px;
line-height: 26px;
}
.home-icon {
a {
padding: 15px;
line-height: 26px;
}
}
}
}
}
.breaking-news {
height: auto;
}
}
@media screen and (max-width: 480px) {
.better-responsive-menu {
.main-small-navigation .menu-primary-container {
padding-bottom: 15px;
}
}
#masthead {
&.colormag-header-classic,
&.colormag-header-clean {
.date-in-header {
display: none;
}
.breaking-news {
.breaking-news-latest {
padding: 0 5px;
}
.newsticker {
padding-left: 0;
}
}
}
}
}