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 "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%; |
|||
} |
|||
|
|||
} |
|||
@import "bootstrap"; |
|||
|
|||
Loading…
Reference in new issue