1
0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00

Change comments syntax #25, Change imports syntax

This commit is contained in:
Antoine Boulanger
2015-06-04 15:57:36 -04:00
parent 1fab32203f
commit 9a8e7479c2
15 changed files with 131 additions and 207 deletions

View File

@@ -1,31 +1,3 @@
/* ==========================================================================
Main
========================================================================== */
/* ==========================================================================
Imports
========================================================================== */
/* ==========================================================================
Settings
========================================================================== */
/* Typography
========================================================================== */
/* Colors
========================================================================== */
/* Container
========================================================================== */
/* Spacings
========================================================================== */
/* Screen widths
========================================================================== */
/* Transitions
========================================================================== */
/* ==========================================================================
Tools
========================================================================== */
/* Functions
========================================================================== */
/* Mixins
========================================================================== */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
@@ -380,9 +352,6 @@ td,
th {
padding: 0; }
/* ==========================================================================
Generic Resets
========================================================================== */
html {
box-sizing: border-box; }
@@ -402,9 +371,6 @@ button {
outline: none;
background-color: none; }
/* ==========================================================================
Form Resets
========================================================================== */
input, select, textarea {
display: block;
width: 100%;
@@ -423,19 +389,11 @@ fieldset {
padding: 0;
border: 0; }
/* ==========================================================================
Fonts
========================================================================== */
/* ==========================================================================
Base
========================================================================== */
html {
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
color: #222222;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
color: #222222; }
::-moz-selection {
background: #3297fd;
@@ -461,9 +419,6 @@ a {
a:hover {
color: #13097c; }
/* ==========================================================================
Headings
========================================================================== */
h1, .h1, .alpha {
font-size: 32px;
line-height: 1.2;
@@ -494,9 +449,6 @@ h6, .h6, .zeta {
line-height: 1.2;
margin-top: 0; }
/* ==========================================================================
Container
========================================================================== */
.container {
position: relative;
max-width: none0;
@@ -504,25 +456,15 @@ h6, .h6, .zeta {
padding-right: 0;
padding-left: 0; }
/* ==========================================================================
Grid
========================================================================== */
.grid {
margin-left: -20px;
letter-spacing: normal;
font-size: 0; }
/* ==========================================================================
Form Styles
========================================================================== */
/* Label
========================================================================== */
.label, .checkbox-label, .radio-label {
display: block;
margin-bottom: 0.25em; }
/* Input
========================================================================== */
.input, .checkbox-label:before, .radio-label:before, .checkbox-label:after, .radio-label:after, .select, .textarea {
padding: 10px;
border-width: 1px;
@@ -540,8 +482,6 @@ h6, .h6, .zeta {
.input::placeholder, .select::placeholder, .textarea::placeholder {
color: gray; }
/* Checkbox
========================================================================== */
.checkbox, .radio {
position: absolute;
width: auto;
@@ -575,8 +515,6 @@ h6, .h6, .zeta {
background-repeat: no-repeat;
opacity: 0; }
/* Radio
========================================================================== */
.radio-label:before, .radio-label:after {
border-radius: 50%; }
@@ -584,8 +522,6 @@ h6, .h6, .zeta {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
background-size: 8px; }
/* Select
========================================================================== */
.select {
position: relative;
z-index: 1;
@@ -611,15 +547,10 @@ h6, .h6, .zeta {
content: "";
pointer-events: none; }
/* Textarea
========================================================================== */
.textarea {
min-height: 100px;
resize: vertical; }
/* ==========================================================================
Helpers
========================================================================== */
.vertical-center {
height: 100%;
text-align: center; }
@@ -682,9 +613,6 @@ h6, .h6, .zeta {
display: table;
clear: both; }
/* ==========================================================================
Trumps
========================================================================== */
.left {
float: left !important; }
@@ -700,8 +628,6 @@ h6, .h6, .zeta {
.align-center {
text-align: center !important; }
/* States
========================================================================== */
.is-visible {
visibility: visible !important;
opacity: 1 !important; }

View File

@@ -1,48 +1,46 @@
/* ==========================================================================
Imports
========================================================================== */
// ==========================================================================
// Imports
// ==========================================================================
@import
/* Settings
========================================================================== */
"settings/settings"
// Settings
// ==========================================================================
@import "settings/settings";
/* Tools
========================================================================== */
, "tools/tools"
/* Generic
========================================================================== */
, "generic/normalize"
, "generic/generic"
, "generic/form"
// Tools
// ==========================================================================
@import "tools/tools";
/* Base
========================================================================== */
, "base/fonts"
, "base/base"
, "base/headings"
// Generic
// ==========================================================================
@import "generic/normalize";
@import "generic/generic";
@import "generic/form";
/* Objects
========================================================================== */
, "objects/container"
, "objects/grid"
, "objects/form"
// Base
// ==========================================================================
@import "base/fonts";
@import "base/base";
@import "base/headings";
/* Vendors
========================================================================== */
// , "vendors/slick"
// Objects
// ==========================================================================
@import "objects/container";
@import "objects/grid";
@import "objects/form";
/* Components
========================================================================== */
// , "components/main-nav"
// Vendors
// ==========================================================================
// @import "vendors/slick";
/* Templates
========================================================================== */
// , "templates/home"
// Components
// ==========================================================================
// @import "components/main-nav";
/* Trumps
========================================================================== */
, "trumps/helpers"
, "trumps/trumps"
;
// Templates
// ==========================================================================
// @import "templates/home";
// Trumps
// ==========================================================================
@import "trumps/helpers";
@import "trumps/trumps";

View File

@@ -1,6 +1,6 @@
/* ==========================================================================
Base
========================================================================== */
// ==========================================================================
// Base
// ==========================================================================
html {
font-family: $font-family;
font-size: $font-size;

View File

@@ -1,3 +1,3 @@
/* ==========================================================================
Fonts
========================================================================== */
// ==========================================================================
// Fonts
// ==========================================================================

View File

@@ -1,6 +1,6 @@
/* ==========================================================================
Headings
========================================================================== */
// ==========================================================================
// Headings
// ==========================================================================
h1, .h1, .alpha {
font-size: $heading1;
line-height: $heading-line-height;

View File

@@ -1,6 +1,6 @@
/* ==========================================================================
Form Resets
========================================================================== */
// ==========================================================================
// Form resets
// ==========================================================================
input, select, textarea {
display: block;
width: 100%;

View File

@@ -1,6 +1,6 @@
/* ==========================================================================
Generic Resets
========================================================================== */
// ==========================================================================
// Generic resets
// ==========================================================================
html {
box-sizing: border-box;
}

View File

@@ -1,6 +1,4 @@
/* ==========================================================================
Main
========================================================================== */
$jacket: vanilla;
// ==========================================================================
// Main
// ==========================================================================
@import "_imports.scss";

View File

@@ -1,6 +1,6 @@
/* ==========================================================================
Container
========================================================================== */
// ==========================================================================
// Container
// ==========================================================================
.container {
position: relative;

View File

@@ -1,16 +1,16 @@
/* ==========================================================================
Form Styles
========================================================================== */
/* Label
========================================================================== */
// ==========================================================================
// Form styles
// ==========================================================================
// Label
// ==========================================================================
.label {
display: block;
margin-bottom: 0.25em;
}
/* Input
========================================================================== */
// Input
// ==========================================================================
.input {
padding: 10px;
border-width: 1px;
@@ -27,8 +27,8 @@
}
}
/* Checkbox
========================================================================== */
// Checkbox
// ==========================================================================
.checkbox {
position: absolute;
width: auto;
@@ -84,8 +84,8 @@
}
}
/* Radio
========================================================================== */
// Radio
// ==========================================================================
.radio {
@extend .checkbox;
}
@@ -103,8 +103,8 @@
}
}
/* Select
========================================================================== */
// Select
// ==========================================================================
.select {
@extend .input;
@@ -138,8 +138,8 @@
}
}
/* Textarea
========================================================================== */
// Textarea
// ==========================================================================
.textarea {
@extend .input;

View File

@@ -1,13 +1,13 @@
/* ==========================================================================
Grid
========================================================================== */
// ==========================================================================
// Grid
// ==========================================================================
@mixin grid {
margin-left: -$gutter;
letter-spacing: normal;
font-size: 0;
}
.grid {
@include grid;
@include grid;
}
@mixin grid__item {

View File

@@ -1,9 +1,10 @@
/* ==========================================================================
Settings
========================================================================== */
// ==========================================================================
// Settings
// ==========================================================================
// Typography
// ==========================================================================
/* Typography
========================================================================== */
// Base
$font-size: 16px;
$line-height: 1.4;
@@ -23,8 +24,9 @@ $normal: 400;
$medium: 500;
$bold: 700;
/* Colors
========================================================================== */
// Colors
// ==========================================================================
// Generic
$black: #000000;
$white: #ffffff;
@@ -33,18 +35,18 @@ $selection: #3297fd;
$link: #1a0dab;
$link-hover: darken(#1a0dab, 10%);
/* Container
========================================================================== */
// Container
// ==========================================================================
$max-width: none;
$padding: 0;
/* Spacings
========================================================================== */
// Spacings
// ==========================================================================
$gutter: 20px;
$margin: 40px;
/* Screen widths
========================================================================== */
// Screen widths
// ==========================================================================
$from-tiny: 414px;
$to-tiny: $from-tiny - 1;
$from-small: 768px;
@@ -56,7 +58,7 @@ $to-large: $from-large - 1;
$from-huge: 1680px;
$to-huge: $from-huge - 1;
/* Transitions
========================================================================== */
// Transitions
// ==========================================================================
$speed: 0.3s;
$easing: linear;

View File

@@ -1,9 +1,9 @@
/* ==========================================================================
Tools
========================================================================== */
// ==========================================================================
// Tools
// ==========================================================================
/* Functions
========================================================================== */
// Functions
// ==========================================================================
@function em($px, $base: $font-size) {
@return ($px / $base) * 1em;
}
@@ -16,12 +16,12 @@
@return $fraction * 100%;
}
/* Mixins
========================================================================== */
// Mixins
// ==========================================================================
// Micro clearfix, as per {@link css-101.org/articles/clearfix/latest-new-clearfix-so-far.php CSS Mojo}
//
// @see inuitcss/generic.clearfix
@mixin clearfix {
&:after {
content : "";

View File

@@ -1,6 +1,6 @@
/* ==========================================================================
Helpers
========================================================================== */
// ==========================================================================
// Helpers
// ==========================================================================
.vertical-center {
height: 100%;
@@ -28,8 +28,8 @@
*/
.hidden {
display: none !important;
visibility: hidden;
display: none !important;
visibility: hidden;
}
/*
@@ -38,14 +38,14 @@
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
@@ -56,12 +56,12 @@
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
@@ -69,7 +69,7 @@
*/
.invisible {
visibility: hidden;
visibility: hidden;
}
/**

View File

@@ -1,6 +1,6 @@
/* ==========================================================================
Trumps
========================================================================== */
// ==========================================================================
// Trumps
// ==========================================================================
.left {
float: left !important;
}
@@ -21,8 +21,8 @@
text-align: center !important;
}
/* States
========================================================================== */
// States
// ==========================================================================
.is-visible {
visibility: visible !important;
@@ -33,4 +33,4 @@
visibility: hidden !important;
opacity: 0 !important;
}
}