sapl/static/styles/app.scss

@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-top: 20px;
    border-bottom: 20px solid $primary-color;
    background-color: #ffffff;
    }

    .masthead__logo {
    display: inline-block;
    vertical-align: middle;
    }

        .masthead__logo a {
        display: block;
        }

        .masthead__logo img {
        width: auto;
        height: 95px;
        }

    .masthead__heading {
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
    }

        .masthead__heading h1 {
        color: #333333;
        text-shadow: 1px 1px 3px #dadada;
        font-size: 150%;
        }

        .masthead__heading h2 {
        padding-left: 2px;
        color: #444444;
        text-shadow: 1px 1px 3px #dadada;
        font-weight: normal;
        font-size: 100%;
        }

.content {
position: relative;
display: table-cell;
overflow: hidden;
height: 100%;
text-align: left;
font-size: 100%;
}

    .content > .container {
    height: 100%;
    background-color: #ffffff;
    }

    .content a:hover {
    color: #444444;
    }
/* 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%;
    }

}