mirror of https://github.com/interlegis/sapl.git
Marcio Mazza
9 years ago
4 changed files with 7 additions and 1926 deletions
File diff suppressed because it is too large
@ -1,432 +1 @@ |
|||||
@import "settings"; |
@import "bootstrap"; |
||||
@import "normalize"; |
|
||||
@import "foundation"; |
|
||||
|
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); |
|
||||
|
|
||||
$top-bar-dropdown-radius: $global-radius; |
|
||||
|
|
||||
// Foundation Restyling |
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - |
|
||||
|
|
||||
// Moving the mobile menu icon to the right |
|
||||
.title-area.left { |
|
||||
.toggle-topbar { |
|
||||
right: initial; |
|
||||
} |
|
||||
// Making sure dropdowns on mobile are not rendered on top of the top bar. |
|
||||
@media #{$small-only} { |
|
||||
~ .top-bar-section { |
|
||||
.has-dropdown.moved > .dropdown, |
|
||||
.dropdown { |
|
||||
top: $topbar-height; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// Restyles to foundation top bar menu, in order to behave aesthetically different |
|
||||
/* |
|
||||
XXX |
|
||||
Is there a better way to implement these styles using best practices without the |
|
||||
need to override this much of foundation? Or at least avoid too much nesting and |
|
||||
specificity (better use of BEM and ITCSS)? |
|
||||
*/ |
|
||||
|
|
||||
.nav { |
|
||||
@media #{$topbar-media-query} { |
|
||||
.has-dropdown { |
|
||||
// Default values for dropdowns, while also being hidden. |
|
||||
.dropdown { |
|
||||
// Border-radius for the first and last dropdown items. We don't style the parent dropdown, as the items overflows it. |
|
||||
@include radius(rem-calc($top-bar-dropdown-radius)); |
|
||||
// Second child here actually targets the first item, since Foundation JS injects a hidden li before it for a mobile back button. |
|
||||
> li:nth-child(2), > li:nth-child(2) > a { |
|
||||
@include side-radius(top, rem-calc($top-bar-dropdown-radius)); |
|
||||
} |
|
||||
> li:last-child, li:last-child > a { |
|
||||
@include side-radius(bottom, rem-calc($top-bar-dropdown-radius)); |
|
||||
} |
|
||||
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.19), |
|
||||
0 2px 6px rgba(0, 0, 0, 0.23); |
|
||||
// For the transition effect. |
|
||||
opacity: 0; |
|
||||
// Show the dropdown accurately while it animates. |
|
||||
width: auto; |
|
||||
// This will allow the triangle pip to be visible above the dropdown. |
|
||||
overflow: visible; |
|
||||
// This ensures we won't accidentally trigger the dropdown if we hover on it, while the animation to default values is run. |
|
||||
pointer-events: none; |
|
||||
transform: translateY(rem-calc(25px)); |
|
||||
// This transition is actually for when we hover-out of the dropdown. |
|
||||
transition: transform 0.1s linear, |
|
||||
opacity 0.1s linear, |
|
||||
clip 0s 0.3s; |
|
||||
// The triangle pip |
|
||||
&::before { |
|
||||
@include css-triangle(rem-calc(6px), $topbar-dropdown-bg, bottom); |
|
||||
position: absolute; |
|
||||
top: rem-calc(-12px); |
|
||||
left: rem-calc(15px); |
|
||||
} |
|
||||
// This bridges the gap between the top bar and a dropdown. |
|
||||
&::after { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
z-index: -1; |
|
||||
left: 0; |
|
||||
top: rem-calc(-25px); |
|
||||
height: rem-calc(25px); |
|
||||
width: 100%; |
|
||||
// This transition is for hover-on. |
|
||||
transition: all 0.3s cubic-bezier(0.55,0,0.1,1); |
|
||||
} |
|
||||
} |
|
||||
// When hovering |
|
||||
&.hover, &.not-click:hover { |
|
||||
> .dropdown { |
|
||||
opacity: 1; |
|
||||
// Here we override the default clip value ("auto") for an arbitrary large size that fits any dropdown, |
|
||||
// as this now makes it possible to apply a transition effect for it. |
|
||||
clip: rect(-100px, 2000px, 2000px, -100px); |
|
||||
transform: translateY(rem-calc(10px)); |
|
||||
// Reverting back our pointer-events. |
|
||||
pointer-events: auto; |
|
||||
// Animating with a beautiful cubic-bezier curve, or Google's "Swift out" easing :) |
|
||||
transition: transform 0.3s cubic-bezier(0.55,0,0.1,1), |
|
||||
opacity 0.3s cubic-bezier(0.55,0,0.1,1), |
|
||||
// Here we make sure the clipping is set before any other transition. |
|
||||
clip 0s 0s; |
|
||||
// Don't forget to properly animate our bridge, so it keeps only between our gap. |
|
||||
&::after { |
|
||||
top: rem-calc(-10px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
// Our app |
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - |
|
||||
|
|
||||
@-webkit-keyframes fadeIn { |
|
||||
0% {opacity: 0;} |
|
||||
100% {opacity: 1;} |
|
||||
} |
|
||||
@keyframes fadeIn { |
|
||||
0% {opacity: 0;} |
|
||||
100% {opacity: 1;} |
|
||||
} |
|
||||
|
|
||||
html, body { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
h1, h2, h3, h4, h5, h6, form, dl, dt, dd, p, div, img, a { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
border: none; |
|
||||
} |
|
||||
|
|
||||
a { |
|
||||
background-color: transparent; |
|
||||
color: $primary-color; |
|
||||
text-decoration: none; |
|
||||
transition: 0.2s; |
|
||||
} |
|
||||
|
|
||||
h1 { |
|
||||
color: $primary-color; |
|
||||
font-size: 120%; |
|
||||
} |
|
||||
|
|
||||
h2 { |
|
||||
color: $primary-color; |
|
||||
font-size: 110%; |
|
||||
} |
|
||||
|
|
||||
h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover { |
|
||||
color: $primary-color; |
|
||||
} |
|
||||
|
|
||||
.fadein { |
|
||||
-webkit-animation: fadeIn 0.25s ease-in-out; |
|
||||
-moz-animation: fadeIn 0.25s ease-in-out; |
|
||||
-o-animation: fadeIn 0.25s ease-in-out; |
|
||||
} |
|
||||
|
|
||||
.container { |
|
||||
position: relative; |
|
||||
margin: 0 auto; |
|
||||
padding: 20px; |
|
||||
max-width: 960px; |
|
||||
} |
|
||||
|
|
||||
.page { |
|
||||
position: relative; |
|
||||
display: table; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background-color: #fafafa; |
|
||||
color: #444444; |
|
||||
} |
|
||||
|
|
||||
.page__row { |
|
||||
display: table-row; |
|
||||
box-sizing: content-box; |
|
||||
} |
|
||||
|
|
||||
/* XXX find a better way to fix main layout box-sizing */ |
|
||||
.page__row > .container > *{ |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.navigation { |
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23); |
|
||||
} |
|
||||
|
|
||||
.navigation > .container { |
|
||||
padding: 0px; |
|
||||
max-width: 960px; |
|
||||
} |
|
||||
|
|
||||
.icon-bar { |
|
||||
vertical-align: top; |
|
||||
} |
|
||||
|
|
||||
.masthead .container { |
|
||||
padding: 10px 0; |
|
||||
background-color: #e3e3e3; |
|
||||
} |
|
||||
|
|
||||
.masthead > .container { |
|
||||
padding: 0px; |
|
||||
max-width: none; |
|
||||
border-bottom: 1px solid $primary-color; |
|
||||
} |
|
||||
|
|
||||
.masthead__logo { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
|
|
||||
.masthead__logo a { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
.masthead__logo img { |
|
||||
width: auto; |
|
||||
height: 85px; |
|
||||
} |
|
||||
|
|
||||
.masthead__heading { |
|
||||
display: inline-block; |
|
||||
margin-left: 10px; |
|
||||
margin-top:10px; |
|
||||
vertical-align: top; |
|
||||
} |
|
||||
|
|
||||
.masthead__heading h1 { |
|
||||
color: #333333; |
|
||||
text-shadow: 1px 1px 3px #dadada; |
|
||||
font-size: 130%; |
|
||||
} |
|
||||
|
|
||||
.masthead__heading h2 { |
|
||||
padding-left: 2px; |
|
||||
color: #444444; |
|
||||
text-shadow: 1px 1px 3px #dadada; |
|
||||
font-weight: normal; |
|
||||
font-size: 90%; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.masthead .sub-nav { |
|
||||
display: block; |
|
||||
overflow: visible; |
|
||||
padding-top: 0.25rem; |
|
||||
width: auto; |
|
||||
position: absolute; |
|
||||
bottom: -1px; |
|
||||
margin: 0; |
|
||||
right: 0.5em; |
|
||||
|
|
||||
|
|
||||
dd { |
|
||||
margin: 0; |
|
||||
border: 1px solid transparent; |
|
||||
border-bottom: 1px solid $primary-color; |
|
||||
border-top: 2px solid transparent; |
|
||||
border-radius: 5px 5px 0px 0px; |
|
||||
transition: all 0.5s cubic-bezier(0.55,0,0.1,1); |
|
||||
|
|
||||
ul { |
|
||||
margin-right: -3px; |
|
||||
&::after, &::before { |
|
||||
border: 0px; |
|
||||
} |
|
||||
li { |
|
||||
margin: 0; |
|
||||
display: block; |
|
||||
padding: 0.3rem; |
|
||||
color: #555555; |
|
||||
width: 100%; |
|
||||
a { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
&:hover, &.active { |
|
||||
background: #eee; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
a { |
|
||||
color: #18577A; |
|
||||
background-color: transparent; |
|
||||
display: inline-block; |
|
||||
padding: 2px 6px 0; |
|
||||
position: relative; |
|
||||
font-size: 90%; |
|
||||
&:hover { |
|
||||
color: #444; |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&:hover, &.active { |
|
||||
background: #fff; |
|
||||
border: 1px solid $primary-color; |
|
||||
border-bottom: 1px solid #fff; |
|
||||
border-top: 2px solid $primary-color; |
|
||||
transition: all 0.5s cubic-bezier(0.55,0,0.1,1); |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
position: relative; |
|
||||
display: table-cell; |
|
||||
overflow: hidden; |
|
||||
height: 100%; |
|
||||
text-align: left; |
|
||||
font-size: 100%; |
|
||||
} |
|
||||
|
|
||||
.content > .container { |
|
||||
height: 100%; |
|
||||
background-color: #ffffff; |
|
||||
} |
|
||||
/* Layout */ |
|
||||
|
|
||||
.footer { |
|
||||
width: 100%; |
|
||||
background-color: $secondary-color; |
|
||||
color: #ffffff; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.footer__block { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
margin: 5px 0; |
|
||||
padding: 0 20px; |
|
||||
vertical-align: middle; |
|
||||
font-size: 70%; |
|
||||
} |
|
||||
|
|
||||
.footer__block a { |
|
||||
color: rgb(255, 255, 255); |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.footer__block a:hover { |
|
||||
text-decoration: underline; |
|
||||
} |
|
||||
|
|
||||
.footer__block small { |
|
||||
font-size: 100%; |
|
||||
} |
|
||||
|
|
||||
.footer__logo { |
|
||||
display: block; |
|
||||
font-size: 0; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.footer__logo > img { |
|
||||
height: 32px; |
|
||||
} |
|
||||
|
|
||||
.footer__block--about { |
|
||||
padding-left: 0; |
|
||||
max-width: 195px; |
|
||||
} |
|
||||
|
|
||||
.footer__block--license { |
|
||||
max-width: 285px; |
|
||||
} |
|
||||
|
|
||||
.footer__block--parliament-info { |
|
||||
border: 0; |
|
||||
padding-right: 0; |
|
||||
max-width: 385px; |
|
||||
} |
|
||||
|
|
||||
.footer__block--parliament-info > abbr { |
|
||||
border: 0; |
|
||||
font-size: inherit; |
|
||||
cursor: inherit; |
|
||||
color: inherit; |
|
||||
} |
|
||||
|
|
||||
.footer__block--separator::after { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
margin: auto; |
|
||||
height: 50px; |
|
||||
width: 1px; |
|
||||
background-color: white; |
|
||||
} |
|
||||
|
|
||||
@media (max-width: 480px) { |
|
||||
|
|
||||
.masthead { |
|
||||
text-align: center |
|
||||
} |
|
||||
|
|
||||
.masthead__logo { |
|
||||
display: block; |
|
||||
margin: 10px; |
|
||||
} |
|
||||
|
|
||||
.masthead__heading { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
|
|
||||
.masthead__logo > img{ |
|
||||
height: 80px; |
|
||||
} |
|
||||
|
|
||||
.masthead__heading h1 { |
|
||||
font-size: 90%; |
|
||||
} |
|
||||
|
|
||||
.masthead__heading h2 { |
|
||||
font-size: 70%; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|||||
Loading…
Reference in new issue