pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

Converting application less to sass.

Browse source
This commit is contained in:
Henrik Hautakoski 2018-08-19 00:26:22 +02:00
parent b30be955ca
commit fec6b6caa5
26 changed files with 1140 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/assets/sass/layout/_footer.scss Normal file
View file

@ -0,0 +1,40 @@
.footer {
@extend .container;
display: flex;
align-items: center;
min-height: $footer-height;
a {
color: $footer-link-color;
font-weight: 700;
&:hover,
&:active {
color: $footer-link-hover-color;
}
}
&-left,
&-right {
@include make-xs-column(5);
}
&-middle {
@include make-xs-column(2);
}
&-right {
text-align: right;
}
// Top button
&-button-top {
@extend .center-block;
@extend .button;
@extend .button-round;
@include button-variant($footer-link-color, white, white);
font-size: 1.5em;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}
}

26
app/assets/sass/layout/_masthead.scss Normal file
View file

@ -0,0 +1,26 @@
.masthead {
@extend .container;
display: block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
h1, p {
color: $text-light-color;
text-shadow: $header-text-shadow;
}
h1 {
font-size: 48px;
}
p {
font-size: 22px;
}
.masthead-get-started-button {
margin-top: 2em;
@include button-outline-variant(black, white);
}
}

157
app/assets/sass/layout/_navigation.scss Normal file
View file

@ -0,0 +1,157 @@
// ----------------------------------
// Navigation
// ----------------------------------
.navigation {
// General styling (for all viewport widths)
@extend .clearfix;
@extend .container;
min-height: $navbar-height;
color: $navbar-link-color;
text-shadow: $navbar-link-text-shadow;
font-size: $font-size-navigation;
// Links inside navigation.
a {
color: $navbar-link-color;
&:hover,
&:active {
color: $navbar-link-hover-color;
text-decoration: none;
}
}
// Menu button
// -------------------
.menu-button {
@extend .button;
@include button-variant(white, #242424);
margin-top: 8px;
font-size: 24px;
// Hide for larger view-ports.
@media (min-width: $navbar-breakpoint-min) {
display: none !important;
}
}
// Menu
// -------------------
&-menu ul {
@extend .nav;
> li {
// Inline list for larger viewports.
@media (min-width: $navbar-breakpoint-min) {
display: inline-block;
a {
display: block;
@include navbar-vertical-align($line-height-computed + ($navbar-link-vertical-spacing * 2));
padding: $navbar-link-vertical-spacing 10px $navbar-link-vertical-spacing;
line-height: $line-height-computed;
margin-left: ($navbar-link-spacing / 2);
margin-right: ($navbar-link-spacing / 2);
&:hover {
color: $navbar-link-hover-color;
box-shadow: 0 (-$navbar-link-underline-height)
0 ($navbar-link-hover-underline) inset;
}
}
&.active a {
color: $navbar-link-active-color;
box-shadow: 0 (-$navbar-link-underline-height)
0 ($navbar-link-active-underline) inset;
}
}
}
// Only for small viewports.
@media (max-width: $navbar-breakpoint-min) {
margin: 1em 0;
> li {
a {
display: block;
padding: .5em 1em;
background: $navbar-background;
&:hover {
background: darken($navbar-background, 10%);
}
}
&:not(:last-child) {
margin-bottom: 1px;
}
}
}
}
// Always show menu for larger viewport.
@media (min-width: $navbar-breakpoint-min) {
&-menu.collapse {
display: block;
}
}
// User Menu
// -------------------
&-user-menu {
@extend .nav, .pull-right;
margin-top: 10px;
&-login {
padding-top: .3em;
padding-bottom: .3em;
}
&-dropdown {
position: relative;
&-button {
display: inline-block;
padding: .3em .8em;
background: $usermenu-button-bg;
border-radius: $border-radius-base;
&:hover {
background: $usermenu-button-hover-bg;
}
}
&-list {
@extend .dropdown-menu;
@extend .dropdown-menu-right;
vertical-align: middle;
> li > a {
display: flex;
align-items: center;
}
.icon {
font-size: 1.5em;
margin-right: .4em;
}
text-shadow: none;
@include box-shadow($dropdown-shadow);
}
&.open &-list {
display: inline-block;
}
}
}
}

43
app/assets/sass/layout/_sections.scss Normal file
View file

@ -0,0 +1,43 @@
// ----------------------------------
// Head section
// ----------------------------------
.head-section {
background-color: $brand-color;
background-image: url(#{$image-path}/header-pattern.jpg);
margin-bottom: 60px;
.top-section {
background-color: $navbar-background;
}
}
// ----------------------------------
// Content section
// ----------------------------------
.content-section {
@extend .container;
margin-bottom: $footer-height;
}
// ----------------------------------
// Footer section
// ----------------------------------
.footer-section {
position: absolute;
bottom: 0;
width: 100%;
color: $footer-text-color;
border-top: 1px solid #bcbcbc;
background-color: $footer-border-color;
background-image: url(#{$image-path}/footer-pattern.jpg);
}