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 {
			.dropdown {
				// Border-radius for the dropdowns
				@include radius(rem-calc($top-bar-dropdown-radius));
				> 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));
				}
				
				// Default values while dropdown is hidden

				// For transition effect
				opacity: 0; 



				// This allows the triangle pip to stay above the dropdown
				overflow: visible; 
				box-shadow: 0 10px 18px rgba(0, 0, 0, 0.19),
							0 2px 6px rgba(0, 0, 0, 0.23);

				pointer-events: none; // Making sure when its animating back do default states, it wont  
				transform: translateY(rem-calc(25px));
				transition: transform 0.1s linear,
							opacity 0.1s linear,
							clip 0s 0.3s;
				&::before {
					@include css-triangle(rem-calc(6px), $topbar-dropdown-bg, bottom);
					position: absolute;
					top: rem-calc(-12px);
					left: rem-calc(15px);
				}

				&::after {
					content: "";
					position: absolute;
					z-index: -1;
					left: 0;
					top: rem-calc(-25px);		
					height: rem-calc(25px);
					width: 100%;
					transition: all 0.3s cubic-bezier(0.55,0,0.1,1);
				}
			}

			&.hover, &.not-click:hover {
				> .dropdown {
					opacity: 1;
					clip: rect(-100px, 2000px, 2000px, -100px);
					transform: translateY(rem-calc(10px));
					pointer-events: auto;
					transition: transform 0.3s cubic-bezier(0.55,0,0.1,1),
								opacity 0.3s cubic-bezier(0.55,0,0.1,1), clip 0s 0s;
					&::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%;
    }

}