Skip to content

GitLab

Commit b34f5619 authored by Konstantinos Platis's avatar Konstantinos Platis
Browse files

Aligned spacings between custom blocks/view-blocks and added shadow around all blocks except menus

parent ec341687
Hide whitespace changes
Inline Side-by-side
.idea/.gitignore 0 → 100644
View file @ b34f5619
# Ignoring .idea files
.idea/*
# Default ignored files
/workspace.xml
\ No newline at end of file
CHANGELOG.md
View file @ b34f5619
......@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fixed broken view filters after update 2.6.0
- Fixed overflow of underline menu items in Firefox
- Fixed collapsible dropdown menus having gap between 2nd and 3rd level
- Aligned spacings menus/view blocks/custom blocks when placed on sidebar regions
- Added box-shadow for view blocks/custom blocks when placed on sidebar regions
## [2.6.3] - 10/03/2020
......
cernclean.libraries.yml
View file @ b34f5619
......@@ -9,6 +9,7 @@ global-styling:
css/fields.css: {}
css/forms.css: {}
css/views.css: {}
css/blocks.css: {}
js:
js/cernclean.js: {}
dependencies:
......
css/blocks.css 0 → 100644
View file @ b34f5619
/**
* Styles of blocks in CERN Theme
*
* Includes styles of custom blocks / menu blocks / view blocks
*/
.sidebar-left, .sidebar-right {
margin: 30px 0 0; }
.sidebar-left .region-left h2, .sidebar-left .region-right h2, .sidebar-right .region-left h2, .sidebar-right .region-right h2 {
margin-bottom: 20px;
font-size: 28px; }
.sidebar-left .region-left > section .field, .sidebar-left .region-left section.block.block-block-content .field, .sidebar-left .region-right > section .field, .sidebar-left .region-right section.block.block-block-content .field, .sidebar-right .region-left > section .field, .sidebar-right .region-left section.block.block-block-content .field, .sidebar-right .region-right > section .field, .sidebar-right .region-right section.block.block-block-content .field {
padding: 15px 30px;
box-shadow: 0 0 2px 1px lightgrey;
margin-bottom: 20px; }
.sidebar-left .region-left .block .form-group .view h1, .sidebar-left .region-right .block .form-group .view h1, .sidebar-right .region-left .block .form-group .view h1, .sidebar-right .region-right .block .form-group .view h1 {
display: none; }
.sidebar-left .region-left .block .form-group .view .view-content, .sidebar-left .region-right .block .form-group .view .view-content, .sidebar-right .region-left .block .form-group .view .view-content, .sidebar-right .region-right .block .form-group .view .view-content {
padding: 15px 30px;
box-shadow: 0 0 2px 1px lightgrey;
margin-bottom: 20px; }
.sidebar-left .region-left .block .form-group .view .view-content .views-field, .sidebar-left .region-right .block .form-group .view .view-content .views-field, .sidebar-right .region-left .block .form-group .view .view-content .views-field, .sidebar-right .region-right .block .form-group .view .view-content .views-field {
margin: 10px 0; }
.sidebar-left .region-left > nav, .sidebar-left .region-right > nav, .sidebar-right .region-left > nav, .sidebar-right .region-right > nav {
padding: 0; }
.sidebar-left .region-left > nav nav.navbar, .sidebar-left .region-right > nav nav.navbar, .sidebar-right .region-left > nav nav.navbar, .sidebar-right .region-right > nav nav.navbar {
margin-bottom: 30px;
padding: 0; }
.sidebar-left .region-left > nav nav.navbar.navbar.main-menu > .container-fluid > .navbar-header, .sidebar-left .region-right > nav nav.navbar.navbar.main-menu > .container-fluid > .navbar-header, .sidebar-right .region-left > nav nav.navbar.navbar.main-menu > .container-fluid > .navbar-header, .sidebar-right .region-right > nav nav.navbar.navbar.main-menu > .container-fluid > .navbar-header {
display: none; }
.sidebar-left .region-left > nav nav.navbar.navbar.main-menu > .container-fluid > .collapse, .sidebar-left .region-right > nav nav.navbar.navbar.main-menu > .container-fluid > .collapse, .sidebar-right .region-left > nav nav.navbar.navbar.main-menu > .container-fluid > .collapse, .sidebar-right .region-right > nav nav.navbar.navbar.main-menu > .container-fluid > .collapse {
display: block; }
.sidebar-left .region-left > nav nav.navbar.main-menu, .sidebar-left .region-right > nav nav.navbar.main-menu, .sidebar-right .region-left > nav nav.navbar.main-menu, .sidebar-right .region-right > nav nav.navbar.main-menu {
background-color: transparent;
border-color: transparent; }
.sidebar-left .region-left > nav nav.navbar.main-menu ul.navbar-nav, .sidebar-left .region-right > nav nav.navbar.main-menu ul.navbar-nav, .sidebar-right .region-left > nav nav.navbar.main-menu ul.navbar-nav, .sidebar-right .region-right > nav nav.navbar.main-menu ul.navbar-nav {
float: none;
padding: 15px; }
.sidebar-left .region-left > nav nav.navbar.main-menu ul.navbar-nav > li > a, .sidebar-left .region-right > nav nav.navbar.main-menu ul.navbar-nav > li > a, .sidebar-right .region-left > nav nav.navbar.main-menu ul.navbar-nav > li > a, .sidebar-right .region-right > nav nav.navbar.main-menu ul.navbar-nav > li > a {
line-height: inherit; }
.sidebar-left .region-left > nav nav.navbar.main-menu ul.dropdown-menu, .sidebar-left .region-right > nav nav.navbar.main-menu ul.dropdown-menu, .sidebar-right .region-left > nav nav.navbar.main-menu ul.dropdown-menu, .sidebar-right .region-right > nav nav.navbar.main-menu ul.dropdown-menu {
display: block; }
.sidebar-left .region-left > nav nav.navbar.main-menu ul .caret, .sidebar-left .region-right > nav nav.navbar.main-menu ul .caret, .sidebar-right .region-left > nav nav.navbar.main-menu ul .caret, .sidebar-right .region-right > nav nav.navbar.main-menu ul .caret {
display: none; }
.sidebar-left .region-left > nav nav.navbar.main-menu ul a, .sidebar-left .region-right > nav nav.navbar.main-menu ul a, .sidebar-right .region-left > nav nav.navbar.main-menu ul a, .sidebar-right .region-right > nav nav.navbar.main-menu ul a {
white-space: normal; }
.sidebar-left .region-left > nav nav.navbar > h2, .sidebar-left .region-right > nav nav.navbar > h2, .sidebar-right .region-left > nav nav.navbar > h2, .sidebar-right .region-right > nav nav.navbar > h2 {
margin-bottom: 30px; }
.sidebar-left .region-left > nav nav.navbar > ul, .sidebar-left .region-right > nav nav.navbar > ul, .sidebar-right .region-left > nav nav.navbar > ul, .sidebar-right .region-right > nav nav.navbar > ul {
padding: 15px; }
.sidebar-left .region-left > nav nav.navbar > ul.dropdown-menu, .sidebar-left .region-right > nav nav.navbar > ul.dropdown-menu, .sidebar-right .region-left > nav nav.navbar > ul.dropdown-menu, .sidebar-right .region-right > nav nav.navbar > ul.dropdown-menu {
padding: 0; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links), .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links), .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links), .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) {
list-style: none;
margin: 0; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li {
font-size: 16px;
font-size: 1.6rem;
font-family: 'opensans-regular';
margin: 0 0 10px;
float: unset; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a {
display: inline-block;
padding: 5px 0 8px 20px;
position: relative; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a .caret, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a .caret, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a .caret, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a .caret {
display: none; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a:focus, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a:focus, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a:focus, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a:focus {
text-decoration: none; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a:after, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a:after, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a:after, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a:after {
-webkit-transition: all 0.6s ease-in-out 0s;
-khtml-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
background: transparent;
border-bottom: 2px solid;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
left: 0;
margin: 0 0 0 20px;
max-width: calc(100% - 20px); }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a.is-active, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a.is-active, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a.is-active, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a.is-active {
background: none; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover:before, .sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a.is-active:before, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover:before, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a.is-active:before, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover:before, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a.is-active:before, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover:before, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a.is-active:before {
left: -4px; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover:after, .sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li a.is-active:after, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover:after, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li a.is-active:after, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a:hover:after, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li a.is-active:after, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a:hover:after, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li a.is-active:after {
width: 100%; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul {
display: block;
margin: 5px 0 0; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li {
font-size: 16px;
font-size: 1.6rem;
font-family: 'sourcesans-light';
margin: 0;
padding: 5px 0px 5px 20px; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a {
display: inline-block;
padding: 5px 0 8px 20px;
position: relative; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:before, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:before, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:before, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:before {
-webkit-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-khtml-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-moz-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-ms-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-o-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
font-size: 36px;
font-size: 3.6rem;
content: '\j';
float: left;
font-family: 'cern-icons';
display: block;
top: -10px;
left: -12px;
position: absolute;
transform: rotate(0deg); }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:after, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:after, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:after, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:after {
-webkit-transition: all 0.6s ease-in-out 0s;
-khtml-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
background: transparent;
border-bottom: 2px solid;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
bottom: 3px;
left: 0;
margin: 0 0 0 20px;
max-width: calc(100% - 20px); }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:hover, .sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:hover, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:hover, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:hover, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active {
background: none; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:before, .sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:before, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:before, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:before, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:before, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:before, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:before, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:before {
left: -4px; }
.sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:after, .sidebar-left .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:after, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:after, .sidebar-left .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:after, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:after, .sidebar-right .region-left > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:after, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a:hover:after, .sidebar-right .region-right > nav nav.navbar ul:not(.contextual-links) li ul li a.is-active:after {
width: 100%; }
/*# sourceMappingURL=blocks.css.map */
css/layout.css
View file @ b34f5619
.wrapper-center {
padding: 0 3%; }
.sidebar-left,
.sidebar-right {
margin: 30px 0 0; }
.sidebar-left h2,
.sidebar-right h2 {
font-size: 28px; }
.sidebar-left nav,
.sidebar-right nav {
margin-bottom: 30px;
padding: 15px;
margin-bottom: 30px;
padding: 0; }
.sidebar-left nav.navbar.main-menu > .container-fluid > .navbar-header,
.sidebar-right nav.navbar.main-menu > .container-fluid > .navbar-header {
display: none; }
.sidebar-left nav.navbar.main-menu > .container-fluid > .collapse,
.sidebar-right nav.navbar.main-menu > .container-fluid > .collapse {
display: block; }
.sidebar-left nav.main-menu,
.sidebar-right nav.main-menu {
background-color: transparent;
border-color: transparent; }
.sidebar-left nav.main-menu ul.navbar-nav,
.sidebar-right nav.main-menu ul.navbar-nav {
float: none;
padding: 15px; }
.sidebar-left nav.main-menu ul.navbar-nav > li > a,
.sidebar-right nav.main-menu ul.navbar-nav > li > a {
line-height: inherit; }
.sidebar-left nav.main-menu ul.dropdown-menu,
.sidebar-right nav.main-menu ul.dropdown-menu {
display: block; }
.sidebar-left nav.main-menu ul .caret,
.sidebar-right nav.main-menu ul .caret {
display: none; }
.sidebar-left nav.main-menu ul a,
.sidebar-right nav.main-menu ul a {
white-space: normal; }
.sidebar-left nav > h2,
.sidebar-right nav > h2 {
margin-bottom: 30px; }
.sidebar-left nav > ul,
.sidebar-right nav > ul {
padding: 15px; }
.sidebar-left nav > ul.dropdown-menu,
.sidebar-right nav > ul.dropdown-menu {
padding: 0; }
.sidebar-left nav ul:not(.contextual-links),
.sidebar-right nav ul:not(.contextual-links) {
list-style: none;
margin: 0; }
.sidebar-left nav ul:not(.contextual-links) li,
.sidebar-right nav ul:not(.contextual-links) li {
font-size: 16px;
font-size: 1.6rem;
font-family: 'opensans-regular';
margin: 0 0 10px;
float: unset; }
.sidebar-left nav ul:not(.contextual-links) li a,
.sidebar-right nav ul:not(.contextual-links) li a {
display: inline-block;
padding: 5px 0 8px 20px;
position: relative; }
.sidebar-left nav ul:not(.contextual-links) li a .caret,
.sidebar-right nav ul:not(.contextual-links) li a .caret {
display: none; }
.sidebar-left nav ul:not(.contextual-links) li a:hover, .sidebar-left nav ul:not(.contextual-links) li a:focus,
.sidebar-right nav ul:not(.contextual-links) li a:hover,
.sidebar-right nav ul:not(.contextual-links) li a:focus {
text-decoration: none; }
.sidebar-left nav ul:not(.contextual-links) li a:after,
.sidebar-right nav ul:not(.contextual-links) li a:after {
-webkit-transition: all 0.6s ease-in-out 0s;
-khtml-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
background: transparent;
border-bottom: 2px solid;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
left: 0;
margin: 0 0 0 20px;
max-width: calc(100% - 20px); }
.sidebar-left nav ul:not(.contextual-links) li a:hover, .sidebar-left nav ul:not(.contextual-links) li a.is-active,
.sidebar-right nav ul:not(.contextual-links) li a:hover,
.sidebar-right nav ul:not(.contextual-links) li a.is-active {
background: none; }
.sidebar-left nav ul:not(.contextual-links) li a:hover:before, .sidebar-left nav ul:not(.contextual-links) li a.is-active:before,
.sidebar-right nav ul:not(.contextual-links) li a:hover:before,
.sidebar-right nav ul:not(.contextual-links) li a.is-active:before {
left: -4px; }
.sidebar-left nav ul:not(.contextual-links) li a:hover:after, .sidebar-left nav ul:not(.contextual-links) li a.is-active:after,
.sidebar-right nav ul:not(.contextual-links) li a:hover:after,
.sidebar-right nav ul:not(.contextual-links) li a.is-active:after {
width: 100%; }
.sidebar-left nav ul:not(.contextual-links) li ul,
.sidebar-right nav ul:not(.contextual-links) li ul {
display: block;
margin: 5px 0 0; }
.sidebar-left nav ul:not(.contextual-links) li ul li,
.sidebar-right nav ul:not(.contextual-links) li ul li {
font-size: 16px;
font-size: 1.6rem;
font-family: 'sourcesans-light';
margin: 0;
padding: 5px 0px 5px 20px; }
.sidebar-left nav ul:not(.contextual-links) li ul li a,
.sidebar-right nav ul:not(.contextual-links) li ul li a {
display: inline-block;
padding: 5px 0 8px 20px;
position: relative; }
.sidebar-left nav ul:not(.contextual-links) li ul li a:before,
.sidebar-right nav ul:not(.contextual-links) li ul li a:before {
-webkit-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-khtml-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-moz-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-ms-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
-o-transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
transition: color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
font-size: 36px;
font-size: 3.6rem;
content: '\j';
float: left;
font-family: 'cern-icons';
display: block;
top: -10px;
left: -12px;
position: absolute;
transform: rotate(0deg); }
.sidebar-left nav ul:not(.contextual-links) li ul li a:after,
.sidebar-right nav ul:not(.contextual-links) li ul li a:after {
-webkit-transition: all 0.6s ease-in-out 0s;
-khtml-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
background: transparent;
border-bottom: 2px solid;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
bottom: 3px;
left: 0;
margin: 0 0 0 20px;
max-width: calc(100% - 20px); }
.sidebar-left nav ul:not(.contextual-links) li ul li a:hover, .sidebar-left nav ul:not(.contextual-links) li ul li a.is-active,
.sidebar-right nav ul:not(.contextual-links) li ul li a:hover,
.sidebar-right nav ul:not(.contextual-links) li ul li a.is-active {
background: none; }
.sidebar-left nav ul:not(.contextual-links) li ul li a:hover:before, .sidebar-left nav ul:not(.contextual-links) li ul li a.is-active:before,
.sidebar-right nav ul:not(.contextual-links) li ul li a:hover:before,
.sidebar-right nav ul:not(.contextual-links) li ul li a.is-active:before {
left: -4px; }
.sidebar-left nav ul:not(.contextual-links) li ul li a:hover:after, .sidebar-left nav ul:not(.contextual-links) li ul li a.is-active:after,
.sidebar-right nav ul:not(.contextual-links) li ul li a:hover:after,
.sidebar-right nav ul:not(.contextual-links) li ul li a.is-active:after {
width: 100%; }
.page-node-type-landing-page .wrapper-center {
padding: 0; }
.page-node-type-landing-page .wrapper-center.col-md-9, .page-node-type-landing-page .wrapper-center.col-md-6 {
......
sass/blocks.scss 0 → 100644
View file @ b34f5619
/**
* Styles of blocks in CERN Theme
*
* Includes styles of custom blocks / menu blocks / view blocks
*/
@import 'variables.scss';
$box-shadow: 0 0 2px 1px lightgrey;
$block-view-padding: 15px 30px;
.sidebar-left, .sidebar-right{
margin: 30px 0 0;
.region-left, .region-right{
h2{
margin-bottom: 20px;
font-size: 28px;
}
// Custom Blocks
&>section, section.block.block-block-content{
.field{
padding: $block-view-padding;
box-shadow: $box-shadow;
margin-bottom: 20px;
}
}
// View Blocks
.block{
.form-group {
.view {
h1 {
display: none; // hide the view title
}
.view-content {
padding: $block-view-padding;
box-shadow: $box-shadow;
margin-bottom: 20px;
.views-field{
margin: 10px 0;
}
}
}
}
}
// menu blocks under sidebars
&>nav{
padding: 0;
nav.navbar {
margin-bottom: 30px;
padding: 0;
&.navbar.main-menu{
&>.container-fluid{
// fixes issue of main menu when placed on sidebars
&>.navbar-header{
display: none;
}
// fixes issue of main menu when placed on sidebars
&>.collapse{
display: block;
}
}
}
&.main-menu{
background-color: transparent;
border-color: transparent;
ul{
&.navbar-nav{
float: none;
padding: 15px;
>li{
> a{
line-height: inherit;
}
}
}
&.dropdown-menu{
display: block;
}
.caret{
display: none;
}
a{
white-space: normal;
}
}
}
&>h2{
margin-bottom: 30px;
}
&>ul{
padding: 15px;
&.dropdown-menu{
padding: 0;
}
}
ul:not(.contextual-links) {
list-style: none;
margin: 0;
//padding: 15px;
li {
@include font-size(1.6);
font-family: 'opensans-regular';
margin: 0 0 10px;
float: unset;
a {
display: inline-block;
padding: 5px 0 8px 20px;
position: relative;
.caret{
display: none;
}
&:hover,
&:focus {
text-decoration: none;
}
&:after {
-webkit-transition: all 0.6s ease-in-out 0s;
-khtml-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
background: transparent;
border-bottom: 2px solid;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
left: 0;
margin: 0 0 0 20px;
max-width: calc(100% - 20px);
}
&:hover,
&.is-active {
background: none;
&:before {
left: -4px;
}
&:after {
width: 100%;
}
}
}
ul {
display: block;
margin: 5px 0 0;
li {
@include font-size(1.6);
font-family: 'sourcesans-light';
margin: 0;
padding: 5px 0px 5px 20px;
a {
display: inline-block;
padding: 5px 0 8px 20px;
position: relative;
&:before {
@include transition(color 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s);
@include font-size(3.6);
content: '\j';
float: left;
font-family: 'cern-icons';
display: block;
top: -10px;
left: -12px;
position: absolute;
transform: rotate(0deg);
}
&:after {
@include transition(all 0.6s ease-in-out 0s);
background: transparent;
border-bottom: 2px solid;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
bottom: 3px;
left: 0;
margin: 0 0 0 20px;
max-width: calc(100% - 20px);
}
&:hover,
&.is-active {
background: none;
&:before {
left: -4px;
}
&:after {
width: 100%;
}
}
}
}
}
}