Merged v3 into master
This commit is contained in:
Pedro Reis
commit
20d55874a9
69 changed files with 1305 additions and 593 deletions
BIN
assets/icons/error.png
Executable file
BIN
assets/icons/error.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
assets/icons/success.png
Executable file
BIN
assets/icons/success.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
assets/images/logo.png
Executable file
BIN
assets/images/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
36
assets/images/logo.svg
Executable file
36
assets/images/logo.svg
Executable file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 250 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<g transform="matrix(0.118406,0,0,0.118406,0,0)">
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M2158.04,447.724L2250.15,367.986L2203.59,367.986L2129.55,431.386L2129.55,285.212L2096.71,285.212L2096.71,535.168L2129.55,535.168L2129.55,463.59L2215.64,535.168L2263.55,535.168L2158.04,447.724Z" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M862.415,381.306C874.099,381.306 885.098,384.059 892.656,392.657L806.031,447.643C801.906,411.562 824.94,381.306 862.415,381.306M863.435,504.357C842.81,504.357 826.658,493.71 815.66,476.182L938.03,398.155C919.13,367.21 897.126,350.371 860.004,350.371C813.598,350.371 773.038,390.587 773.038,438.015C773.038,493.359 809.466,535.309 865.495,535.309C892.656,535.309 920.182,518.206 941.844,503.077L928.059,474.122C910.182,488.205 887.155,504.357 863.435,504.357" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1910.33,503.991L1850.38,503.991C1833.61,503.991 1819.43,498.032 1807.83,486.127C1796.23,474.213 1790.44,459.892 1790.44,443.158C1790.44,426.435 1796.23,412.037 1807.83,399.949C1819.43,387.871 1833.61,381.826 1850.38,381.826C1867.14,381.826 1881.33,387.871 1892.93,399.949C1904.53,412.037 1910.33,426.435 1910.33,443.158L1910.33,503.991ZM1850.26,350.521C1824.7,350.521 1802.71,359.562 1784.32,377.654C1765.91,395.747 1756.71,417.578 1756.71,443.144C1756.71,468.703 1765.91,490.462 1784.32,508.402C1802.71,526.335 1824.7,535.309 1850.26,535.309L1944.05,535.309L1944.05,443.144C1944.05,417.578 1934.81,395.747 1916.33,377.654C1897.85,359.562 1875.82,350.521 1850.26,350.521" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1991.67,378.48C1972.55,397.136 1962.97,419.761 1962.97,446.328L1962.97,535.309L1997.01,535.309L1997.01,446.328C1997.01,430.471 2007.58,389.201 2060.22,382.557L2077.79,382.557L2077.79,350.521L2060.22,350.521C2033.65,350.521 2010.8,359.84 1991.67,378.48" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1666.85,350.448C1646.46,350.448 1620.03,358.731 1607.97,376.062C1595.92,358.731 1569.49,350.448 1549.08,350.448C1512.1,350.448 1478.15,378.323 1478.15,412.28L1478.15,535.309L1511.31,535.309L1511.31,419.836C1511.31,396.807 1530.22,382.093 1549.84,382.093C1571.37,382.093 1591.4,394.167 1591.4,425.114L1591.4,535.309L1624.55,535.309L1624.55,425.114C1624.55,394.167 1644.59,382.093 1666.11,382.093C1685.74,382.093 1704.64,396.807 1704.64,419.836L1704.64,535.309L1737.79,535.309L1737.79,412.28C1737.79,378.323 1703.86,350.448 1666.85,350.448" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1035.53,350.391C991.375,350.391 958.17,382.091 958.17,429.64L958.17,535.309L991.375,535.309L991.375,429.64C991.375,401.709 1011.76,382.091 1035.53,382.091C1059.31,382.091 1079.69,401.709 1079.69,429.64L1079.69,535.309L1112.89,535.309L1112.89,429.64C1112.89,382.091 1079.69,350.391 1035.53,350.391" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1384.15,350.391C1364.9,350.391 1347.92,358.691 1337.73,370.018L1337.73,286.094L1304.53,286.094L1304.53,535.309L1337.73,535.309L1337.73,429.64C1337.73,401.709 1357.74,382.091 1381.88,382.091C1405.65,382.091 1426.04,392.658 1426.04,429.64L1426.04,535.309L1459.23,535.309L1459.23,429.64C1459.23,368.497 1426.04,350.391 1384.15,350.391" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1221.43,504.258C1191.23,504.258 1164.79,474.387 1164.79,443.145C1164.79,411.201 1187.46,381.325 1220.76,381.325C1240.33,381.325 1249.96,386.485 1264.71,397.473L1284.63,374.803C1266.44,359.005 1244.46,350.425 1220.41,350.425C1168.23,350.425 1131.81,392.991 1131.81,444.177C1131.81,495.341 1174.4,535.181 1220.41,535.181C1246.18,535.181 1268.16,523.489 1285.67,505.294L1264.36,483.653C1252.34,495.341 1240,504.258 1221.43,504.258" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M169.817,346.619C178.469,346.577 187.232,346.648 196.042,346.619C195.966,368.719 195.918,390.34 195.918,410.342C195.918,479.414 252.095,535.587 321.148,535.587C390.196,535.587 446.365,479.414 446.365,410.342C446.365,341.302 390.196,285.239 321.148,285.239C303.12,285.239 280.716,285.157 257.149,285.239C257.178,276.443 257.123,267.688 257.149,259.011C280.737,258.939 303.063,259.011 321.148,259.011C404.658,259.011 472.597,326.848 472.597,410.342C472.597,493.86 404.658,561.803 321.148,561.803C237.633,561.803 169.693,493.86 169.693,410.342C169.693,390.311 169.75,368.699 169.817,346.619M169.873,302.63L196.201,302.63L196.201,328.841L169.873,328.841L169.873,302.63ZM170.05,259.012L196.369,259.012L196.369,285.246L170.05,285.246L170.05,259.012ZM213.551,346.448L239.648,346.448C239.57,368.63 239.517,390.238 239.517,410.342C239.517,455.366 276.141,491.977 321.148,491.977C366.144,491.977 402.767,455.366 402.767,410.342C402.767,365.349 366.144,328.868 321.148,328.868C302.981,328.868 280.852,328.793 257.149,328.868L257.149,302.63C280.75,302.549 303.105,302.63 321.148,302.63C380.538,302.63 428.855,350.955 428.855,410.342C428.855,469.746 380.538,518.077 321.148,518.077C261.754,518.077 213.428,469.746 213.428,410.342C213.428,390.325 213.477,368.581 213.551,346.448M213.609,302.63L239.709,302.63L239.709,328.841L213.609,328.841L213.609,302.63ZM213.777,259.012L239.981,259.012L239.981,285.246L213.777,285.246L213.777,259.012ZM257.149,346.373C280.893,346.296 302.968,346.373 321.148,346.373C356.496,346.373 385.256,375.009 385.256,410.342C385.256,445.706 356.496,474.467 321.148,474.467C285.794,474.467 257.034,445.706 257.034,410.342C257.034,390.21 257.081,368.589 257.149,346.373M152.178,410.342C152.178,503.511 227.979,579.324 321.148,579.324C414.311,579.324 490.107,503.511 490.107,410.342C490.107,317.187 414.311,241.398 321.148,241.398C303.078,241.398 152.704,241.914 152.704,241.914C152.704,241.914 152.178,390.333 152.178,410.342" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M702.996,485.881C691.395,497.959 677.211,504.004 660.447,504.004C643.68,504.004 629.493,497.959 617.899,485.881C606.299,473.793 600.498,459.395 600.498,442.672L600.498,381.839L660.447,381.839C677.211,381.839 691.395,387.798 702.996,399.703C714.597,411.617 720.388,425.938 720.388,442.672C720.388,459.395 714.597,473.793 702.996,485.881M726.502,377.428C708.118,359.495 686.128,350.521 660.561,350.521L601.122,350.521L601.122,285.212L566.776,285.212L566.776,442.686C566.776,468.252 576.014,490.083 594.493,508.176C612.973,526.268 635.003,535.309 660.561,535.309C686.128,535.309 708.118,526.268 726.502,508.176C744.913,490.083 754.118,468.252 754.118,442.686C754.118,417.127 744.913,395.368 726.502,377.428" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
|
|
@ -1,48 +0,0 @@
|
|||
/**
|
||||
Theme Name: Barebones
|
||||
Theme URI: http://github.com/benchmarkstudios/barebones
|
||||
Author: Benchmark
|
||||
*/
|
||||
|
||||
@charset 'UTF-8';
|
||||
|
||||
// 1. Configuration
|
||||
@import
|
||||
'config/variables',
|
||||
'config/mixins';
|
||||
|
||||
// 2. Vendors
|
||||
@import
|
||||
'vendor/simple-grid/simple-grid';
|
||||
|
||||
// 3. Utilities
|
||||
@import
|
||||
'utils/reset',
|
||||
'utils/a11y',
|
||||
'utils/responsive',
|
||||
'utils/helpers';
|
||||
|
||||
// 4. Base stuff
|
||||
@import
|
||||
'base/base',
|
||||
'base/fonts',
|
||||
'base/images',
|
||||
'base/forms',
|
||||
'base/lists',
|
||||
'base/typography';
|
||||
|
||||
// 5. Layout-related sections
|
||||
@import
|
||||
'layout/main',
|
||||
'layout/header',
|
||||
'layout/footer';
|
||||
|
||||
// 6. Components
|
||||
@import
|
||||
'components/buttons',
|
||||
'components/nav',
|
||||
'components/alerts';
|
||||
|
||||
// 7. Page-specific styles
|
||||
@import
|
||||
'pages/home';
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
/**
|
||||
* Blanket input styles for normalisation
|
||||
*/
|
||||
|
||||
*:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background-color: $base-background-colour;
|
||||
border: solid 1px $base-colour;
|
||||
border-radius: 0;
|
||||
color: $base-colour;
|
||||
line-height: ($base-spacing-unit * 1.5);
|
||||
height: ($base-spacing-unit * 1.5);
|
||||
padding: 0 ($base-spacing-unit / 2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
background-color: whitesmoke;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
select {
|
||||
line-height: normal;
|
||||
padding: 0;
|
||||
padding-left: ($base-spacing-unit / 2);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: ($base-spacing-unit * 4);
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Form utility classes
|
||||
*/
|
||||
|
||||
.form--inline {
|
||||
.form__group {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox,
|
||||
.radio {
|
||||
display: block;
|
||||
padding-left: $base-spacing-unit;
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
> input {
|
||||
float: left;
|
||||
margin-left: -($base-spacing-unit);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.form__group {
|
||||
display: block;
|
||||
margin-bottom: $base-spacing-unit;
|
||||
}
|
||||
|
||||
.form__label {
|
||||
display: block;
|
||||
margin-bottom: ($base-spacing-unit / 2);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Input Group
|
||||
*
|
||||
* Allows for prepend/append of elements
|
||||
* (such as icons) on an input.
|
||||
*/
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
> input {
|
||||
padding: 0 ($base-spacing-unit * 2);
|
||||
}
|
||||
.input-group__addon {
|
||||
line-height: ($base-spacing-unit * 1.5);
|
||||
height: ($base-spacing-unit * 1.5);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: ($base-spacing-unit * 1.5);
|
||||
&:first-child {
|
||||
left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .75em;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
> li {
|
||||
display: inline-block;
|
||||
margin-right: $base-spacing-unit;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
/*
|
||||
* Media query to respond to a minimum size (mobile first)
|
||||
*/
|
||||
|
||||
@mixin resp-min($size) {
|
||||
@media screen and (min-width: $size) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Media query to respond to a maximum size
|
||||
*/
|
||||
|
||||
@mixin resp-max($size) {
|
||||
@media screen and (max-width: $size) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Output font size in px/rem
|
||||
*/
|
||||
|
||||
@mixin font-size($px) {
|
||||
font-size: $px + px;
|
||||
font-size: #{$px / 16}rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Placeholder mixin for <input>
|
||||
*/
|
||||
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after{
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after{
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Positioning
|
||||
*/
|
||||
|
||||
@mixin center($horizontal: true, $vertical: true) {
|
||||
position: absolute;
|
||||
@if ($horizontal and $vertical) {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@else if ($horizontal) {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@else if ($vertical) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.sr-only {
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
* {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: white;
|
||||
font-size: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
1
assets/sass/vendor/simple-grid
vendored
1
assets/sass/vendor/simple-grid
vendored
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 4aee2627e323b19a70045a84adafc9f4fee44a6f
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// var $ = require('jquery');
|
||||
|
||||
(function() {
|
||||
|
||||
|
||||
|
||||
})($);
|
||||
15
assets/scripts/scripts.js
Executable file
15
assets/scripts/scripts.js
Executable file
|
|
@ -0,0 +1,15 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
/**
|
||||
* Mobile navigation toggle
|
||||
* @param {mixed} event
|
||||
*/
|
||||
|
||||
const toggleMenu = (event) => {
|
||||
event.preventDefault();
|
||||
$('.js-menu-toggle, .nav--header').toggleClass('open');
|
||||
$('.header').toggleClass('menu-open');
|
||||
};
|
||||
|
||||
$('.js-menu-toggle').on('click', toggleMenu);
|
||||
|
||||
42
assets/sass/base/_base.scss → assets/styles/base/_base.scss
Normal file → Executable file
42
assets/sass/base/_base.scss → assets/styles/base/_base.scss
Normal file → Executable file
|
|
@ -1,27 +1,28 @@
|
|||
body {
|
||||
color: $base-colour;
|
||||
font-family: $base-font-family;
|
||||
@include font-size($base-font-size);
|
||||
line-height: $base-line-height;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
@include font-size($base-font-size);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
hr,
|
||||
ul,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
hr,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
address {
|
||||
dl {
|
||||
margin-bottom: $base-spacing-unit;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Basic styles for links
|
||||
*/
|
||||
|
|
@ -35,20 +36,19 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
a[href^="tel"]{
|
||||
a[href^="tel"] {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Rulers
|
||||
* Rules
|
||||
*/
|
||||
|
||||
hr {
|
||||
background-color: $base-colour;
|
||||
height: 1px;
|
||||
}
|
||||
background-color: $base-colour;
|
||||
}
|
||||
2
assets/sass/base/_fonts.scss → assets/styles/base/_fonts.scss
Normal file → Executable file
2
assets/sass/base/_fonts.scss → assets/styles/base/_fonts.scss
Normal file → Executable file
|
|
@ -1,3 +1,3 @@
|
|||
/**
|
||||
* This file contains all @font-face declarations, if any.
|
||||
*/
|
||||
*/
|
||||
76
assets/styles/base/_forms.scss
Executable file
76
assets/styles/base/_forms.scss
Executable file
|
|
@ -0,0 +1,76 @@
|
|||
*:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background-color: $base-background-colour;
|
||||
border: solid 1px $base-colour;
|
||||
border-radius: 0;
|
||||
color: $base-colour;
|
||||
line-height: $base-spacing-unit * 1.5;
|
||||
height: $base-spacing-unit * 1.5;
|
||||
padding: 0 #{$base-spacing-unit / 2};
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
padding: #{$base-spacing-unit / 4} #{$base-spacing-unit / 2};
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
background-color: whitesmoke;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
select {
|
||||
line-height: normal;
|
||||
padding: 0;
|
||||
padding-left: $base-spacing-unit / 2;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: $base-spacing-unit * 4;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Form utility classes
|
||||
*/
|
||||
|
||||
.form--inline {
|
||||
.form__group {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
.form__group {
|
||||
display: block;
|
||||
margin-bottom: $base-spacing-unit;
|
||||
.form__label {
|
||||
display: block;
|
||||
margin-bottom: ($base-spacing-unit / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
0
assets/sass/base/_images.scss → assets/styles/base/_images.scss
Normal file → Executable file
0
assets/sass/base/_images.scss → assets/styles/base/_images.scss
Normal file → Executable file
8
assets/sass/base/_lists.scss → assets/styles/base/_lists.scss
Normal file → Executable file
8
assets/sass/base/_lists.scss → assets/styles/base/_lists.scss
Normal file → Executable file
|
|
@ -1,16 +1,16 @@
|
|||
ul,
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $base-spacing-unit;
|
||||
}
|
||||
|
||||
li {
|
||||
> ul,
|
||||
> ul,
|
||||
> ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list--unstyled {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
list-style: none;
|
||||
}
|
||||
17
assets/styles/base/_typography.scss
Executable file
17
assets/styles/base/_typography.scss
Executable file
|
|
@ -0,0 +1,17 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .75em;
|
||||
}
|
||||
6
assets/sass/components/_alerts.scss → assets/styles/components/_alerts.scss
Normal file → Executable file
6
assets/sass/components/_alerts.scss → assets/styles/components/_alerts.scss
Normal file → Executable file
|
|
@ -2,25 +2,31 @@
|
|||
padding: $base-spacing-unit;
|
||||
margin-bottom: $base-spacing-unit;
|
||||
border: 1px solid transparent;
|
||||
|
||||
> p,
|
||||
> ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> p + p {
|
||||
margin-top: $base-spacing-unit;
|
||||
}
|
||||
|
||||
&.alert--success {
|
||||
color: $success-colour;
|
||||
border-color: $success-colour;
|
||||
}
|
||||
|
||||
&.alert--info {
|
||||
color: $info-colour;
|
||||
border-color: $info-colour;
|
||||
}
|
||||
|
||||
&.alert--warning {
|
||||
color: $warning-colour;
|
||||
border-color: $warning-colour;
|
||||
}
|
||||
|
||||
&.alert--danger {
|
||||
color: $danger-colour;
|
||||
border-color: $danger-colour;
|
||||
11
assets/sass/components/_buttons.scss → assets/styles/components/_buttons.scss
Normal file → Executable file
11
assets/sass/components/_buttons.scss → assets/styles/components/_buttons.scss
Normal file → Executable file
|
|
@ -3,7 +3,7 @@
|
|||
color: $base-background-colour;
|
||||
border: 1px solid transparent;
|
||||
display: inline-block;
|
||||
padding: ($base-spacing-unit / 4) $base-spacing-unit;
|
||||
padding: #{$base-spacing-unit / 4} $base-spacing-unit;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
|
@ -12,16 +12,19 @@
|
|||
user-select: none;
|
||||
width: auto;
|
||||
transition: all .5s;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $base-background-colour;
|
||||
color: $brand-colour;
|
||||
border: 1px solid $brand-colour;
|
||||
border-color: $brand-colour;
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
|
|
@ -33,16 +36,18 @@
|
|||
background-color: $base-background-colour;
|
||||
color: $brand-colour;
|
||||
border: 1px solid $brand-colour;
|
||||
|
||||
&:hover {
|
||||
background-color: $brand-colour;
|
||||
color: $base-background-colour;
|
||||
border: 1px solid transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
+ .btn--block {
|
||||
margin-top: $base-spacing-unit / 4;
|
||||
}
|
||||
107
assets/styles/components/_nav.scss
Executable file
107
assets/styles/components/_nav.scss
Executable file
|
|
@ -0,0 +1,107 @@
|
|||
/**
|
||||
* Hamburger menu
|
||||
*/
|
||||
|
||||
.nav-burger {
|
||||
position: fixed;
|
||||
top: $base-spacing-unit;
|
||||
right: $base-spacing-unit;
|
||||
z-index: 550;
|
||||
transition: all $animation-speed $animation;
|
||||
}
|
||||
|
||||
.nav-burger__line {
|
||||
width: 35px;
|
||||
height: 3px;
|
||||
background-color: $brand-colour;
|
||||
display: none;
|
||||
margin: 8px auto;
|
||||
transition: all $animation-speed $animation;
|
||||
|
||||
@include resp-max($breakpoint-md) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-burger.open & {
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: translateY(11px) rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-11px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Navs
|
||||
*/
|
||||
|
||||
.nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
margin-right: $base-spacing-unit;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav--header {
|
||||
|
||||
// mobile nav
|
||||
@include resp-max($breakpoint-md) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
transition: opacity 500ms ease;
|
||||
transition: opacity .35s ease, visibility .35s ease, width .35s ease;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
background: $base-background-colour;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.open {
|
||||
z-index: 500;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
transform: translateY(-50%);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
> li {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
assets/styles/config/_mixins.scss
Executable file
60
assets/styles/config/_mixins.scss
Executable file
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* Media query to respond to a minimum size (mobile first)
|
||||
*/
|
||||
|
||||
@mixin resp-min($size) {
|
||||
@media screen and (min-width: $size) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Media query to respond to a maximum size
|
||||
*/
|
||||
|
||||
@mixin resp-max($size) {
|
||||
@media screen and (max-width: $size) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Output font size in px/rem
|
||||
*/
|
||||
|
||||
@mixin font-size($px) {
|
||||
font-size: $px + px;
|
||||
font-size: #{$px / 16}rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Placeholder mixin for <input>
|
||||
*/
|
||||
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
@ -55,3 +55,9 @@ $grid-gutter: $base-spacing-unit;
|
|||
*/
|
||||
|
||||
$border-radius: 3px;
|
||||
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
$animation-speed: 250ms;
|
||||
$animation: ease-in-out;
|
||||
0
assets/sass/layout/_footer.scss → assets/styles/layout/_footer.scss
Normal file → Executable file
0
assets/sass/layout/_footer.scss → assets/styles/layout/_footer.scss
Normal file → Executable file
1
assets/styles/layout/_header.scss
Executable file
1
assets/styles/layout/_header.scss
Executable file
|
|
@ -0,0 +1 @@
|
|||
|
||||
0
assets/sass/layout/_main.scss → assets/styles/layout/_main.scss
Normal file → Executable file
0
assets/sass/layout/_main.scss → assets/styles/layout/_main.scss
Normal file → Executable file
0
assets/sass/pages/_home.scss → assets/styles/pages/_home.scss
Normal file → Executable file
0
assets/sass/pages/_home.scss → assets/styles/pages/_home.scss
Normal file → Executable file
34
assets/styles/styles.scss
Executable file
34
assets/styles/styles.scss
Executable file
|
|
@ -0,0 +1,34 @@
|
|||
@charset 'UTF-8';
|
||||
|
||||
// 1. Configuration
|
||||
@import 'config/variables';
|
||||
@import 'config/mixins';
|
||||
|
||||
// 2. Vendors
|
||||
@import 'vendor/simple-grid/simple-grid';
|
||||
|
||||
// 3. Utilities
|
||||
@import 'utils/reset';
|
||||
@import 'utils/responsive';
|
||||
@import 'utils/helpers';
|
||||
|
||||
// 4. Base stuff
|
||||
@import 'base/base';
|
||||
@import 'base/fonts';
|
||||
@import 'base/images';
|
||||
@import 'base/forms';
|
||||
@import 'base/lists';
|
||||
@import 'base/typography';
|
||||
|
||||
// 5. Layout-related sections
|
||||
@import 'layout/main';
|
||||
@import 'layout/header';
|
||||
@import 'layout/footer';
|
||||
|
||||
// 6 .Components
|
||||
@import 'components/buttons';
|
||||
@import 'components/nav';
|
||||
@import 'components/alerts';
|
||||
|
||||
// 7. Page-specific styles
|
||||
@import 'pages/home';
|
||||
35
assets/sass/utils/_helpers.scss → assets/styles/utils/_helpers.scss
Normal file → Executable file
35
assets/sass/utils/_helpers.scss → assets/styles/utils/_helpers.scss
Normal file → Executable file
|
|
@ -1,10 +1,11 @@
|
|||
/**
|
||||
* Clearing and floating
|
||||
*/
|
||||
* Clearing and floating
|
||||
*/
|
||||
|
||||
.alignleft,
|
||||
.float-left {
|
||||
float: left;
|
||||
|
||||
img & {
|
||||
margin-right: $base-spacing-unit;
|
||||
}
|
||||
|
|
@ -13,8 +14,9 @@
|
|||
.alignright,
|
||||
.float-right {
|
||||
float: right;
|
||||
|
||||
img & {
|
||||
margin-left : $base-spacing-unit;
|
||||
margin-left: $base-spacing-unit;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -25,20 +27,20 @@
|
|||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
img & {
|
||||
margin-bottom: $base-spacing-unit;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Text aligments
|
||||
*/
|
||||
* Text aligments
|
||||
*/
|
||||
|
||||
.align-text-left {
|
||||
text-align: left;
|
||||
|
|
@ -59,6 +61,7 @@
|
|||
|
||||
.visible-on-mobile {
|
||||
display: none !important;
|
||||
|
||||
@include resp-max($breakpoint-sm) {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -66,9 +69,11 @@
|
|||
|
||||
.visible-on-tablet {
|
||||
display: none !important;
|
||||
|
||||
@include resp-max($breakpoint-md) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@include resp-max($breakpoint-sm) {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -79,3 +84,19 @@
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Accessibility
|
||||
*/
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
44
assets/styles/utils/_reset.scss
Executable file
44
assets/styles/utils/_reset.scss
Executable file
|
|
@ -0,0 +1,44 @@
|
|||
* {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: white;
|
||||
font-size: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
4
assets/sass/utils/_responsive.scss → assets/styles/utils/_responsive.scss
Normal file → Executable file
4
assets/sass/utils/_responsive.scss → assets/styles/utils/_responsive.scss
Normal file → Executable file
|
|
@ -1,5 +1,4 @@
|
|||
@each $breakpoint in $breakpoints {
|
||||
|
||||
$key : nth($breakpoint, 1);
|
||||
$value : nth($breakpoint, 2);
|
||||
|
||||
|
|
@ -14,5 +13,4 @@
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
1
assets/styles/vendor/simple-grid/.gitattributes
vendored
Executable file
1
assets/styles/vendor/simple-grid/.gitattributes
vendored
Executable file
|
|
@ -0,0 +1 @@
|
|||
README export-ignore
|
||||
122
assets/styles/vendor/simple-grid/README.md
vendored
Executable file
122
assets/styles/vendor/simple-grid/README.md
vendored
Executable file
|
|
@ -0,0 +1,122 @@
|
|||
# Just a simple grid
|
||||
|
||||
Based on existing grid systems, such as [Twitter Bootstrap Grid System](http://getbootstrap.com/css/#grid) and [csswizardry-grids](http://csswizardry.com/csswizardry-grids/), this is a fluid, flexible and responsive grid that can be scaled up to an arbitrary size, within the `$max-width` of your main `.container`. You also can easily and infinitly nest columns and rows, so you can build out complicated layouts without creating a lot of new custom elements. This is a grid system generated by Sass and it is based on [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).
|
||||
|
||||
## Setup
|
||||
|
||||
The only thing you need to do to start building your grid is to adjust the number of `$grid-columns`, the desired `$gutter` and the main container `$max-width`.
|
||||
|
||||
## How it works
|
||||
|
||||
Grid systems, as you may know, are used for creating page layouts through a series of rows and columns that will host your content:
|
||||
|
||||
* Your `.row` element(s) must be placed within a `.container`, with a fixed `$max-width` for proper alignment. This elements will split up your page horizontally and will contain groups of `.col`.
|
||||
* Your content should be placed within the `.col` blocks, and only `.col` may be immediate children of `.row`.
|
||||
* You can nest `.row` and `.col` how many times you need, since you follow the previous standard.
|
||||
* Your `.col` width is defined by specifying the number of a single grid columns, in your total `$grid-columns`. For example, a `.col--*-4` will represent a width of 4 columns in your `$grid-columns` total.
|
||||
* To control your responsive grid, there are available three class prefixes: `.col--sm-*` for small devices, `.col-md-*` for medium devices and `.col--lg-*` for large devices. All together, in your `.col` element, it will make your grid respond to each one of your default media queries.
|
||||
* Finaly, you have the option to move columns to the right using `.col--*-offset-*` classes. These classes increase the left margin of a column by the number of columns you want. For example, `.col--*-offset-4` will push `.col-*-4` over four columns.
|
||||
|
||||
|
||||
## Markup
|
||||
|
||||
### Basic usage
|
||||
Simple column set - `<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12"></div>` - inside a `.row`.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 2</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 4</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 5</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-8 col--lg-8">
|
||||
<p>Col 7</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 8</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Offsetting columns
|
||||
Increase the left margin of a column by the number of columns you want, along with the responsive class prefixes, if you need.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 9 with offset 0</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4 col--xs-offset-4 col--sm-offset-0 col--md-offset-4 col--lg-offset-4">
|
||||
<p>Col 10 with offset 4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 11 with offset 3</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-6 col--lg-offset-6">
|
||||
<p>Col 12 with offset 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 13 with offset 3</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Nesting columns
|
||||
To nest your content, add a new `.row` inside a `.col`, and set of `.col-ld-*` columns within an existing `.col-ld-*` column. Nested rows should include a set of columns that add up to 12 or less.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 14</p>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.1</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Gutterless columns
|
||||
To remove all the gutters from your columns just add the class `.row--gutterless` to your `.row` element.
|
||||
|
||||
```html
|
||||
<div class="row row--gutterless">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 15</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 16</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Demo
|
||||
Check out the demo and play around on [Code Pen](http://codepen.io/pedroreis/pen/ituho) and/or check the compiled CSS on [SassMeister](http://sassmeister.com/gist/c6368fc9a239e1798fcd).
|
||||
35
assets/styles/vendor/simple-grid/_defaults.scss
vendored
Executable file
35
assets/styles/vendor/simple-grid/_defaults.scss
vendored
Executable file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* Space between columns
|
||||
*/
|
||||
|
||||
$grid-gutter: 20px !default;
|
||||
|
||||
|
||||
/**
|
||||
* Max width of container
|
||||
*/
|
||||
|
||||
$grid-max-width: 1200px + ($grid-gutter * 2) !default;
|
||||
|
||||
|
||||
/**
|
||||
* Number of total columns
|
||||
*/
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
|
||||
|
||||
/**
|
||||
* Breakpoints
|
||||
*/
|
||||
|
||||
$breakpoint-lg: 1200px !default;
|
||||
$breakpoint-md: 768px !default;
|
||||
$breakpoint-sm: 480px !default;
|
||||
|
||||
$breakpoints: (
|
||||
'lg' '(min-width: ' + $breakpoint-lg + ')',
|
||||
'md' '(min-width: ' + $breakpoint-md + ') and (max-width: ' + ($breakpoint-lg - 1) + ')',
|
||||
'sm' '(max-width:' + ($breakpoint-md - 1) + ')',
|
||||
'xs' '(max-width: ' + $breakpoint-sm + ')'
|
||||
) !default;
|
||||
38
assets/styles/vendor/simple-grid/_mixins.scss
vendored
Executable file
38
assets/styles/vendor/simple-grid/_mixins.scss
vendored
Executable file
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* Grid loop mixin
|
||||
*/
|
||||
|
||||
@mixin grid-loop($name){
|
||||
@for $i from 0 through $grid-columns {
|
||||
@if $i != 0 {
|
||||
.col--#{$name}-#{$i} {
|
||||
width: percentage($i/$grid-columns);
|
||||
.row--flex & {
|
||||
flex-basis: percentage($i/$grid-columns);
|
||||
max-width: percentage($i/$grid-columns);
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col--#{$name}-offset-#{$i} {
|
||||
margin-left: percentage($i/$grid-columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
58
assets/styles/vendor/simple-grid/simple-grid.scss
vendored
Executable file
58
assets/styles/vendor/simple-grid/simple-grid.scss
vendored
Executable file
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* Default variables and helper mixins
|
||||
*/
|
||||
|
||||
@import
|
||||
'defaults',
|
||||
'mixins';
|
||||
|
||||
|
||||
/**
|
||||
* Grid scaffolding
|
||||
*/
|
||||
|
||||
.container {
|
||||
@include clearfix;
|
||||
max-width: $grid-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 $grid-gutter;
|
||||
}
|
||||
|
||||
.row {
|
||||
list-style: none;
|
||||
margin-left: -$grid-gutter;
|
||||
&:not(.row--flex) {
|
||||
@include clearfix;
|
||||
}
|
||||
&.row--gutterless {
|
||||
margin-left: 0;
|
||||
}
|
||||
&.row--flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
padding-left: $grid-gutter;
|
||||
box-sizing: border-box;
|
||||
.row--gutterless & {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Columns generator
|
||||
*/
|
||||
|
||||
@each $breakpoint in $breakpoints {
|
||||
$name: nth($breakpoint, 1);
|
||||
$declaration: nth($breakpoint, 2);
|
||||
|
||||
@media only screen and #{$declaration} {
|
||||
@include grid-loop($name);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue