Skip to content
Snippets Groups Projects
Commit 004749f7 authored by Olimpia Magliulo's avatar Olimpia Magliulo
Browse files

Merge side-menu.css inside default.css 

- Base.twig updated
parent 9ff8ebc1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
templates/base.twig
+ 2
− 4
View file @ 004749f7
......@@ -5,11 +5,9 @@
<meta name="viewport" content="initial-scale=1.0">
<title>{{ pagetitle }}</title>
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/pure-min.css">
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/src/side-menu.css">
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/selectize.default.css" />
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/selectize.default.css">
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/src/default.css">
<link rel="icon" type="image/icon" href="/{{ baseurlpath }}resources/icons/favicon.ico">
{% if jquery and jquery.css %}
<link rel="stylesheet" media="screen" type="text/css" href="/{{ baseurlpath }}resources/uitheme1.8/jquery-ui.css" />
......
www/assets/css/src/default.css
+ 159
− 0
View file @ 004749f7
......@@ -131,6 +131,165 @@ a.pure-button-red {
overflow: hidden;
}
/* ***********************************************************
SLIDING SIDE-MENU FOR SMALL SCREENS
************************************************************ */
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
#foot,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout.active #menu {
right: 11em;
width: 11em;
}
#layout.active .menu-link {
right: 11em;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-right: -11em; /* "#menu" width */
width: 11em;
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #E8410C;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #ffffff;
border: none;
padding: 0.6em 0em 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #db0100;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #db0100;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #ffa86f;
color: black;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: relative;
display: block; /* show this only on small screens */
top: 0;
right: 0; /* "#menu width" */
background: transparent;
z-index: 10;
height: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-decoration: none;
}
.menu-link span:hover,
.menu-link span:focus {
color: rgba(1,1,1,0.8);
}
.menu-link span {
position: relative;
display: block;
color: #FFFFFF;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: transparent;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
@media screen and (max-width: 63.9375em) {
#layout.active {
position: relative;
right: 11em;
/* moves to right as many ems as the one used by the menu */
}
#menuLink.menu-link.active {
position: fixed;
right: 13em;
}
#foot.active {
margin-right: 11em;
}
}
/* ***********************************************************
HEADER
************************************************************ */
......
www/assets/css/src/side-menu.css deleted 100644 → 0
+ 0
− 160
View file @ 9ff8ebc1
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
#foot,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout.active #menu {
right: 11em;
width: 11em;
}
#layout.active .menu-link {
right: 11em;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-right: -11em; /* "#menu" width */
width: 11em;
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #E8410C;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #ffffff;
border: none;
padding: 0.6em 0em 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #db0100;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #db0100;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #ffa86f;
color: black;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: relative;
display: block; /* show this only on small screens */
top: 0;
right: 0; /* "#menu width" */
background: transparent;
z-index: 10;
height: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
text-decoration: none;
}
.menu-link span:hover,
.menu-link span:focus {
color: rgba(1,1,1,0.8);
}
.menu-link span {
position: relative;
display: block;
color: #FFFFFF;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: transparent;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
@media screen and (max-width: 63.9375em) {
#layout.active {
position: relative;
right: 11em;
/* moves to right as many ems as the one used by the menu */
}
#menuLink.menu-link.active {
position: fixed;
right: 13em;
}
#foot.active {
margin-right: 11em;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment