Reorganized a bunch of things; normalized comments across all files; added a message system (_message.scss)
This commit is contained in:
Hugo Giraudel
parent
b0993aecee
commit
25cc20892d
|
|
@ -1,6 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==forms */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Forms *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* Thanks to HTML5boilerplate
|
||||
|
|
@ -38,6 +38,9 @@ textarea {
|
|||
@include inline-block();
|
||||
}
|
||||
|
||||
/**
|
||||
* Alternative classes
|
||||
*/
|
||||
.btn.alternate {}
|
||||
.btn.highlight {}
|
||||
.login {}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==grids */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Grids *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* Equal grids with 2% gutter
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==helpers */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Helpers *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* .{SIZE}-hidden and .{SIZE}-visible helpers
|
||||
|
|
@ -65,3 +65,22 @@ $breakpoints: large, small, tiny;
|
|||
hyphens: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Skip links
|
||||
*/
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: #000;
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==icons */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Icons *
|
||||
\*----------------------------*/
|
||||
|
||||
.icon {
|
||||
@include inline-block();
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
/* HasLayout for IE6/IE7 */
|
||||
/*----------------------------*\
|
||||
* IE Fix *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* HasLayout for IE6/IE7
|
||||
*/
|
||||
@if $legacy-support-for-ie {
|
||||
.row, .col {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/* Warning: .col needs a width on IE6/IE7 */
|
||||
/**
|
||||
* Warning: .col needs a width on IE6/IE7
|
||||
*/
|
||||
.col {
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==layouts */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Layout *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* Switching box-model for all elements
|
||||
|
|
@ -176,10 +176,10 @@ img.right { margin-bottom: 5px; }
|
|||
.w300p { width: 300px; }
|
||||
.w400p { width: 400px; }
|
||||
.w500p { width: 500px; }
|
||||
.w600p { width: 600px; @extend %width-helper; }
|
||||
.w700p { width: 700px; @extend %width-helper; }
|
||||
.w800p { width: 800px; @extend %width-helper; }
|
||||
.w960p { width: 960px; @extend %width-helper; }
|
||||
.w600p { width: 600px; @extend %width-helper; }
|
||||
.w700p { width: 700px; @extend %width-helper; }
|
||||
.w800p { width: 800px; @extend %width-helper; }
|
||||
.w960p { width: 960px; @extend %width-helper; }
|
||||
.mw960p { max-width: 960px; }
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/*----------------------------*\
|
||||
* Messages *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* Shared classes between all types of messages
|
||||
*/
|
||||
%message {
|
||||
padding: .5em;
|
||||
border-radius: .1em;
|
||||
border: 1px solid;
|
||||
text-shadow: 0 1px 0 rgba(white, .2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Color scheming based on a single color
|
||||
*/
|
||||
@mixin message-scheme($color) {
|
||||
color: $color;
|
||||
background: lighten($color, 38%);
|
||||
border-color: lighten(adjust-hue($color, -10), 20%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Message types
|
||||
*/
|
||||
.message-error {
|
||||
@extend %message;
|
||||
@include message-scheme(#b94a48);
|
||||
}
|
||||
|
||||
.message-ok {
|
||||
@extend %message;
|
||||
@include message-scheme(#468847);
|
||||
}
|
||||
|
||||
.message-warning {
|
||||
@extend %message;
|
||||
@include message-scheme(#c09853);
|
||||
}
|
||||
|
||||
.message-info {
|
||||
@extend %message;
|
||||
@include message-scheme(#3a87ad);
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
/* ----------------------------- */
|
||||
/* ==mixins */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Mixins *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* Mixin to handle media queries breakpoints
|
||||
* Mixin to handle media queries and retina
|
||||
*/
|
||||
@mixin mq($keyword) {
|
||||
@if $keyword == large {
|
||||
|
|
@ -59,6 +59,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mixin to prefix properties
|
||||
*/
|
||||
@mixin prefix($property, $value) {
|
||||
$vendors: "-webkit-", "-moz-", "-ms-", "-o-", "";
|
||||
@each $v in $vendors {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==print */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Print stylesheet *
|
||||
\*----------------------------*/
|
||||
|
||||
@media print {
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
/* ----------------------------- */
|
||||
/* ==reset */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Soft reset *
|
||||
\*----------------------------*/
|
||||
|
||||
/**
|
||||
* Soft reset
|
||||
*/
|
||||
html, body,
|
||||
textarea,
|
||||
figure, label {
|
||||
|
|
@ -20,8 +17,7 @@ ul, ol {
|
|||
}
|
||||
}
|
||||
|
||||
code, pre,
|
||||
samp, kbd {
|
||||
code, pre, samp, kbd {
|
||||
white-space: pre-wrap;
|
||||
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
|
||||
line-height: 1em;
|
||||
|
|
@ -55,8 +51,7 @@ mark {
|
|||
background: #ff0;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
sup, sub {
|
||||
vertical-align: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -69,10 +64,6 @@ sub {
|
|||
top: .5ex;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Avoid top margins on first content element
|
||||
*/
|
||||
|
|
@ -124,6 +115,17 @@ img {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide script and style tags in case of table mode
|
||||
*/
|
||||
body > script,
|
||||
body > style {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Force word wrapping on small screens
|
||||
*/
|
||||
@include mq(small) {
|
||||
div, textarea,
|
||||
table, td, th,
|
||||
|
|
@ -135,31 +137,4 @@ img {
|
|||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide script and style tags in case of table mode
|
||||
*/
|
||||
body > script,
|
||||
body > style {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* skip-links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: #000;
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,14 +26,6 @@
|
|||
zoom: 1.0;
|
||||
}
|
||||
|
||||
@include mq(medium) {
|
||||
/* Big resources like background-images, font-faces, etc. */
|
||||
}
|
||||
|
||||
@include mq(retina) {
|
||||
/* Retina-specific stuff here */
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==Responsive large / small / tiny */
|
||||
/* ---------------------------------- */
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/* ----------------------------- */
|
||||
/* ==tables */
|
||||
/* ----------------------------- */
|
||||
/*----------------------------*\
|
||||
* Tables *
|
||||
\*----------------------------*/
|
||||
|
||||
$border: 1px solid #ccc;
|
||||
$border: 1px solid #ccc; // Default border style for all tables
|
||||
|
||||
table,
|
||||
.table {
|
||||
|
|
@ -19,6 +19,7 @@ table,
|
|||
table {
|
||||
width: 100%;
|
||||
border: $border;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
&#recaptcha_table {
|
||||
table-layout: auto; /* 1 */
|
||||
|
|
@ -35,9 +36,12 @@ caption {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove thead on tiny screens
|
||||
*/
|
||||
thead {
|
||||
@include mq(tiny) {
|
||||
display: none;
|
||||
display: none; /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,17 +7,19 @@
|
|||
* 2. Orientation iOS font-size fix
|
||||
*/
|
||||
html {
|
||||
font-size: 62.5%; /* 1 */
|
||||
font: 62.5%/1.5 "Century Gothic", helvetica, arial, sans-serif; /* 1 */
|
||||
color: #000;
|
||||
|
||||
@media (orientation: landscape) and (max-device-width: 768px) {
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Put the base font-size at 14px (1.4rem)
|
||||
*/
|
||||
body {
|
||||
color: #000;
|
||||
font-family: "Century Gothic", helvetica, arial, sans-serif;
|
||||
@include rem(14);
|
||||
line-height: 1.5;
|
||||
@include rem(14); /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
/*
|
||||
* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
|
||||
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||
*/
|
||||
/**
|
||||
* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
|
||||
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||
*
|
||||
* Sass version maintained by @HugoGiraudel
|
||||
* Please report any bug or suggestion
|
||||
*/
|
||||
|
||||
/**
|
||||
* Enable support for old browsers
|
||||
|
|
@ -14,14 +17,15 @@ $legacy-support-for-mozilla: true; /* 2 */
|
|||
/**
|
||||
* Import modules of your choice
|
||||
*/
|
||||
@import "mixins";
|
||||
@import "helpers";
|
||||
@import "forms";
|
||||
@import "icons";
|
||||
@import "print";
|
||||
@import "tables";
|
||||
@import "grids";
|
||||
@import "layout";
|
||||
@import "typography";
|
||||
@import "iefix";
|
||||
@import "reset";
|
||||
@import "mixins"; // Sass only
|
||||
@import "reset"; // Home made reset
|
||||
@import "helpers"; // A couple of helper classes and Sass placeholders
|
||||
@import "layout"; // Everything to layout your pages
|
||||
@import "grids"; // Small grid system
|
||||
@import "typography"; // Typography baseline and vertical rythm
|
||||
@import "tables"; // Tables
|
||||
@import "forms"; // Forms
|
||||
@import "icons"; // Icons (unicode based) and bullets
|
||||
@import "messages"; // Message system
|
||||
@import "iefix"; // Some IE fixes
|
||||
@import "print"; // Print stylesheet
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user