Merge pull request #29 from owenversteeg/sass_less_parody
update styling to match less version
This commit is contained in:
Owen Versteeg
commit
34214475bb
10 changed files with 121 additions and 106 deletions
|
|
@ -27,19 +27,5 @@ $c-grey-light: #eee;
|
|||
$c-white: #fff;
|
||||
|
||||
|
||||
// Button Colors
|
||||
$a--bg: #0ae;
|
||||
$a--hover: #09d;
|
||||
$a--active: #08b;
|
||||
|
||||
$b--bg: #3c5;
|
||||
$b--hover: #2b4;
|
||||
$b--active: #2a4;
|
||||
|
||||
$c--bg: #d33;
|
||||
$c--hover: #c22;
|
||||
$c--active: #b22;
|
||||
|
||||
|
||||
// Inputs
|
||||
$c-focus: #5ab;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,27 @@
|
|||
//-------------------------------------------------------------------
|
||||
// Button Colors
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
$a--bg: #0ae;
|
||||
$a--hover: #09d;
|
||||
$a--active: #08b;
|
||||
|
||||
$b--bg: #3c5;
|
||||
$b--hover: #2b4;
|
||||
$b--active: #2a4;
|
||||
|
||||
$c--bg: #d33;
|
||||
$c--hover: #c22;
|
||||
$c--active: #b22;
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// Mixin to set btn background for inactive, active & hover states
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
// set default variables to be base button colors.
|
||||
@mixin btn-style($bg: $c-off-black, $bg-hover: $c-darker, $bg-active: $c-dark) {
|
||||
@mixin btn-style ($bg: $c-off-black,
|
||||
$bg-hover: $c-darker,
|
||||
$bg-active: $c-dark) {
|
||||
background: $bg;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -25,51 +43,43 @@
|
|||
// Set Generic <button> and .btn styling.
|
||||
// use .btn on any element to give it the styling of a button
|
||||
.btn {
|
||||
@extend %txt-large;
|
||||
@extend %no-underline;
|
||||
@extend %outline-0;
|
||||
@include btn-style;
|
||||
border: 0;
|
||||
border-radius: 10px; // rounded corners
|
||||
border-radius: 6px; // rounded corners
|
||||
color: $c-white;
|
||||
cursor: pointer;
|
||||
display: inline-block; // Enables non-inline-block elements like <a>s to be buttons
|
||||
font-size: 2.5em;
|
||||
margin: .2em .3em .2em 0;
|
||||
padding: 15px 40px 16px;
|
||||
padding: 12px 30px 14px;
|
||||
}
|
||||
|
||||
|
||||
// *** NOTE ***
|
||||
// The following requires Sass 3.3+ to compile properly.
|
||||
// As the & appends the following partial selector to the
|
||||
// main .btn selector, and creates a new class.
|
||||
//
|
||||
// e.g. &-a{} will compile to .btn-a{}
|
||||
// Set colors for your buttons, see the button mixin at the top of this
|
||||
// file to see how the hex colors are allocated
|
||||
.btn-a {
|
||||
@include btn-style($a--bg, $a--hover, $a--active);
|
||||
}
|
||||
|
||||
.btn-b {
|
||||
@include btn-style($b--bg, $b--hover, $b--active);
|
||||
}
|
||||
|
||||
.btn-c {
|
||||
@include btn-style($c--bg, $c--hover, $c--active);
|
||||
}
|
||||
|
||||
|
||||
// Set colors for your buttons, see the button mixin at the top of this
|
||||
// file to see how the hex colors are allocated
|
||||
&-a {
|
||||
@include btn-style($a--bg, $a--hover, $a--active);
|
||||
}
|
||||
|
||||
&-b {
|
||||
@include btn-style($b--bg, $b--hover, $b--active);
|
||||
}
|
||||
|
||||
&-c {
|
||||
@include btn-style($c--bg, $c--hover, $c--active);
|
||||
}
|
||||
// Add this class to a <button> or element with a .btn class
|
||||
// to create a smaller sized button.
|
||||
.btn-sm {
|
||||
@extend %shared-font-size;
|
||||
border-radius: 4px; /* rounded corners */
|
||||
padding: 10px 15px 11px;
|
||||
}
|
||||
|
||||
|
||||
// Add this class to a <button> or element with a .btn class
|
||||
// to create a smaller sized button.
|
||||
&-sm {
|
||||
border-radius: 4px; /* rounded corners */
|
||||
font-size: .9em;
|
||||
padding: 10px 15px 11px;
|
||||
}
|
||||
|
||||
} // end .btn
|
||||
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -3,11 +3,15 @@
|
|||
//-------------------------------------------------------------------
|
||||
|
||||
body,
|
||||
textarea {
|
||||
textarea, input {
|
||||
font: 16px sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
// apply a smooth transition effect to an element's state change
|
||||
.smooth {
|
||||
|
|
@ -24,14 +28,17 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// shared styling between btn and links in nav bars
|
||||
%outline-0 {
|
||||
outline: 0;
|
||||
// when button or nav bar is focused don't show an outline
|
||||
}
|
||||
|
||||
// this extends into both nav a and .btn
|
||||
%no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// shared large text size
|
||||
%txt-large {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
// shared smaller text size
|
||||
%shared-font-size {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
@if $import-grid == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Grid system responsive code is in _general.scss
|
||||
// A hack (for old IEs) for the grid system is located in _iehacks.scss
|
||||
//
|
||||
// Since every column has 2% padding (1% on each side) its width is
|
||||
// (((its number/12) * 100)-2) percent (truncated, to avoid spillage.)
|
||||
// Thus, c12 has width 98%.
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
.row {
|
||||
|
|
@ -13,6 +16,10 @@
|
|||
float: left;
|
||||
}
|
||||
|
||||
.c12, .table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
$grid-list: (
|
||||
c1 8.33%,
|
||||
c2 16.66%,
|
||||
|
|
@ -25,7 +32,6 @@ $grid-list: (
|
|||
c9 75%,
|
||||
c10 83.33%,
|
||||
c11 91.66%,
|
||||
c12 100%
|
||||
);
|
||||
|
||||
@each $value in $grid-list {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ h1 {
|
|||
|
||||
// Sets style for <h2>
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
@extend %txt-large;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
//-------------------------------------------------------------------
|
||||
|
||||
.ico {
|
||||
font: 2.04em Arial Unicode MS, Lucida Sans Unicode;
|
||||
// This combo of Unicode fonts means Min's icons support
|
||||
// OSX 10.5+, Windows 98+, and Ubuntu.
|
||||
font: 33px Arial Unicode MS, Lucida Sans Unicode;
|
||||
// This combo of Unicode fonts means Min's icons
|
||||
// support OSX 10.5+, Windows 98+, and Ubuntu.
|
||||
|
||||
// We don't use ems because 33px is a great size
|
||||
// cross-browser and OS for nice icons */
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,18 +3,19 @@
|
|||
// Inputs
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
// Styles to extend to all inputs
|
||||
%global-inputs {
|
||||
font-size: .8em;
|
||||
label > * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@extend %global-inputs;
|
||||
-webkit-appearance: none; // make iOS inputs pretty
|
||||
@extend %shared-font-size;
|
||||
border: 1px solid $c-grey;
|
||||
outline: 0;
|
||||
padding: 6px;
|
||||
padding: 8px;
|
||||
|
||||
&:focus {
|
||||
border-color: $c-focus;
|
||||
|
|
@ -23,14 +24,15 @@ input, textarea {
|
|||
|
||||
|
||||
input[type='text'], textarea {
|
||||
-webkit-appearance: none; // make iOS inputs pretty
|
||||
width: 13em;
|
||||
}
|
||||
|
||||
|
||||
.addon-front {
|
||||
@extend %global-inputs;
|
||||
@extend %shared-font-size;
|
||||
box-shadow: 0 0 0 1px $c-grey;
|
||||
padding: 6px 11px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -13,22 +13,28 @@
|
|||
|
||||
.nav {
|
||||
@extend %nav-global;
|
||||
height: 1.5em;
|
||||
padding: .7em 0 .95em;
|
||||
// max-height: 1.5em; // needed for animations, uncomment to use
|
||||
// TODO: migrate to ems
|
||||
// (currently we don't use them because of iOS compatibility problems
|
||||
// -- has to do with unicode icon for close) */
|
||||
height: 24px;
|
||||
padding: 11px 0 15px;
|
||||
// Uncomment for animations
|
||||
// max-height: 1.5em;
|
||||
|
||||
a {
|
||||
@extend %shared-font-size;
|
||||
@extend %no-underline;
|
||||
@extend %nav-global;
|
||||
color: $c-grey-dark;
|
||||
font-size: 14px;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
&:hover {
|
||||
@extend %nav-global;
|
||||
}
|
||||
}
|
||||
|
||||
.pagename {
|
||||
@extend %nav-global;
|
||||
font-size: 22px;
|
||||
top: 1px;
|
||||
}
|
||||
|
|
@ -39,7 +45,7 @@
|
|||
}
|
||||
|
||||
.btn.btn-close {
|
||||
@extend %nav-global;
|
||||
background: $c-black;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin-top: -54px;
|
||||
|
|
@ -49,7 +55,7 @@
|
|||
|
||||
|
||||
// Update styling of .nav for small screens
|
||||
@media (max-width:500px) {
|
||||
@media(max-width:500px) {
|
||||
.btn.btn-close {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,26 +3,22 @@
|
|||
// Tables
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
table {
|
||||
.table {
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
|
||||
th, td {
|
||||
padding: .5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody>*:nth-child(2n-1) {
|
||||
background: $c-grey; // Shade every other table row
|
||||
// We use tbody to ensure that we don't shade the heading
|
||||
// this preserves the order of the shading
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
tbody tr:nth-child(2n-1) {
|
||||
background: $c-grey; // Shade every other table row
|
||||
// We use tbody to ensure that we don't shade the heading
|
||||
// this preserves the order of the shading
|
||||
}
|
||||
|
||||
|
||||
th, td {
|
||||
padding: .5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@
|
|||
// Core Styles of Min
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
@import '__var-lib.scss';
|
||||
|
||||
@import 'general.scss';
|
||||
@import '__var-lib.scss',
|
||||
'general.scss';
|
||||
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
|
@ -37,11 +36,11 @@ $import-ie-hacks: false!default;
|
|||
// Import Components based on above customization
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
@import 'button';
|
||||
@import 'grid';
|
||||
@import 'headings';
|
||||
@import 'icons';
|
||||
@import 'inputs';
|
||||
@import 'navbar';
|
||||
@import 'table';
|
||||
@import 'iehacks';
|
||||
@import 'button',
|
||||
'grid',
|
||||
'headings',
|
||||
'icons',
|
||||
'inputs',
|
||||
'navbar',
|
||||
'table',
|
||||
'iehacks';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue