0ct0pu5/min
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #21 from owenversteeg/sass_parody_and_size_updates_pt1

Browse source 
Sass & Less updates
This commit is contained in:
Scott O'Hara 2014-02-23 18:52:20 -05:00
commit 2556d3af6c
17 changed files with 214 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,3 +1,5 @@
/sass/.DS_Store
/.sass-cache
/sass/.sass-cache/

37
less/buttons.less
View file

@ -1,32 +1,21 @@
.btn {
background: #fff;
color: #fff;
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
font-size: 2.5em;
padding: 15px 40px 16px;
text-decoration: none;
margin: .3em .2em 0 0;
cursor: pointer;
border: 0;
outline: 0; /* when the button is focused, don't show an outline */
background: #999;
border-radius: 10px; /* rounded corners */
border: 0;
color: #fff;
cursor: pointer;
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
font-size: 2.5em;
margin: .2em .3em .2em 0;
padding: 15px 40px 16px;
}
.btn:hover {
background: #eee;
background: #888;
}
.btn:active,.btn:focus {
background: #ddd;
}
.btn:not([class*='btn-']) {
color: #000;
border: 2px solid;
padding: 13px 38px 14px; /* This way we don't change the button size, as there's no border on other buttons */
&.small-btn {
padding: 8px 14px 9px; /* This padding is 2px smaller than the normal small-btn padding to account for the border */
}
background: #777;
}
.btn-a {
@ -60,8 +49,8 @@
}
}
.small-btn {
padding: 10px 15px 11px;
font-size: .9em;
.btn-sm {
border-radius: 4px; /* rounded corners */
font-size: .9em;
padding: 10px 15px 11px;
}

14
less/general.less
View file

@ -1,18 +1,18 @@
body, textarea {
font-family: Arial, sans-serif;
font: 16px Arial, sans-serif; /* Arial is used so that the navbar looks nice on iOS. */
margin: 0;
font-size: 16px;
}
.smooth {
transition: all .2s;
}
@media (max-width:870px) {
.row column {
width: 100%;
margin: 1% auto;
}
.btn, .nav a {
text-decoration: none;
}
.btn, .nav {
outline: 0; /* when the button or navbar is focused, don't show an outline */
}
.container {

16
less/grid.less
View file

@ -1,12 +1,14 @@
/* Grid system responsive code is in general.less */
/* 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%. */
/*
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 {
line-height: 2em;
margin-top: 2%;
overflow: auto;
overflow: auto; /* required - without this, the page layout is screwed up */
}
column {
float: left;
margin: auto 1%;
@ -50,3 +52,11 @@ column {
.c1 {
width: 6.33%;
}
/* For smaller screens, change all columns to 100% width */
@media (max-width:870px) {
.row column {
margin: 1% auto;
width: 100%;
}
}

3
less/icons.less
View file

@ -1,4 +1,3 @@
ico {
font-size: 2.04em;
font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif; /* This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu. */
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. */
}

15
less/inputs.less
View file

@ -1,8 +1,13 @@
textarea, input, .addon-front {
border: 1px solid #ccc;
font-size: .8em;
}
textarea, input {
outline: 0;
padding: 6px;
&:focus {
border: 1px solid #5ab;
border-color: #5ab;
}
}
@ -11,12 +16,6 @@ textarea, input[type='text'] {
}
.addon-front {
padding: 6px 11px 6px 10px;
margin-right: -2px;
padding: 6px 11px;
border-right: 0;
}
textarea, input, .addon-front {
border: 1px solid #ccc;
font-size: .8em;
}

61
less/navbar.less
View file

@ -1,93 +1,70 @@
nav {
.nav, .nav-link:hover, .nav .pagename {
background: #000;
color: #fff;
}
.navbar {
color: #fff;
.nav {
height: 1.5em;
padding: .7em 0 .95em;
outline: 0;
/* Uncomment for animations
max-height: 1.5em;
*/
}
.navbar a {
text-decoration: none;
}
.navbar-link {
.nav a {
padding-right: 1em;
color: #aaa;
top: -1px;
position: relative;
font-size: 14px;
&:hover {
color: #fff;
}
position: relative;
}
button.btn.close.small-btn {
.btn.btn-close {
background: #000;
visibility: hidden;
float: right;
margin-right: 4px;
margin-top: -51px;
margin-top: -54px;
font-size: 25px;
color: #fff;
border: 0;
}
.current {
color: #fff; /* make current page white */
color: #fff; /* make current page link white */
}
.pagename {
color: #fff;
.nav .pagename {
font-size: 22px;
top: 1px;
position: relative;
}
.navbar input, .navbar .btn {
margin-top: -20px;
/* This ensures that any buttons and inputs in the navbar will not mess up its vertical alignment */
}
/* Necessary for animations
.navbar {
max-height: 1.5em;
}
*/
@media (max-width:500px) {
button.btn.close.small-btn {
.btn.btn-close {
visibility: visible;
}
.navbar {
.nav {
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
overflow: hidden;
}
.pagename {
margin-top: -11px;
}
.navbar:focus {
.nav:focus {
/* Necesary for animations
max-height: 500px;
height: 100%;
*/
height: auto;
}
.navbar:before {
.nav div:before {
content: '_';
font-weight: bold;
border-bottom: 10px double;
line-height: 0;
float: right;
font-size: 32px;
margin-top: -10px;
top: 1px;
position: relative;
background: #000;
height: 21px;
font: bold 32px/0 sans-serif; /* bold, 32px sans-serif text with a line-height of zero */
}
.navbar a {
.nav a {
padding: .5em 0;
width: 50%;
display: block;

32
sass/_button.scss
View file

@ -15,36 +15,26 @@
}
@if $import-buttons == true {
//-------------------------------------------------------------------
// Button Styles & Classes
//-------------------------------------------------------------------
// Set Generic <button> and .btn styling.
// use .btn on any element to give it the styling of a button
.btn {
@include btn-style(#fff, #eee, #ddd);
border-radius: 10px; /* rounded corners */
@extend %no-underline;
@extend outline-0;
@include btn-style(#999, #888, #777);
border: 0;
border-radius: 10px; // rounded corners
color: #fff;
cursor: pointer;
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
display: inline-block; // Enables non-inline-block elements like <a>s to be buttons
font-size: 2.5em;
margin: .3em .7em;
outline: 0; /* when the button is focused, don't show an outline */
margin: .2em .3em .2em 0;
padding: 15px 40px 16px;
text-decoration: none;
// to make sure buttons are visible when not paired with a coloring
// class, we give the <button> and .btn a dark border and text color
&:not([class*='btn-']) {
box-shadow: 0 0 0 2px inset;
color: #000;
// We use box shadow here because then we can
// apply a border without changing the element height
}
}
@ -65,10 +55,10 @@
// Add this class to a <button> or element with a .btn class
// to create a smaller sized button.
.btn-small {
border-radius: 7px; /* rounded corners */
font-size: 1em;
padding: 7px 19px 8px;
.btn-sm {
border-radius: 4px; /* rounded corners */
font-size: .9em;
padding: 10px 15px 11px;
}

59
sass/_general.scss
View file

@ -2,51 +2,36 @@
// General Min Styling
//-------------------------------------------------------------------
body {
font: 16px sans-serif;
body, textarea {
font: 16px Arial, sans-serif;
margin: 0;
// Arial is used so the nav bar looks nice in iOS
}
// apply a smooth transition effect to an element's state change
.smooth {
transition: all .2s;
}
hr {
margin: 2.5em auto;
.container {
margin: auto;
width: 1270px;
&.mediumwidth {
margin: 2.5em auto;
}
}
.mediumwidth {
margin-bottom: .3em;
margin-left: 30%;
margin-top: .3em;
width: 40%;
}
@media (max-width:870px) {
.mediumwidth {
margin-left: 15%;
width: 70%;
}
.row [class*='c']{
display: block;
margin: 1% auto;
width: 100%;
}
.row:last-child column {
margin-bottom: 2.5em;
}
}
@media (max-width:520px) {
.mediumwidth {
margin-left: 0;
width: 100%;
}
hr.mediumwidth {
@media(max-width:1310px) {
margin: 0 20px;
width: auto;
}
}
// 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
}
%no-underline {
text-decoration: none;
}

21
sass/_grid.scss
View file

@ -2,12 +2,16 @@
//-------------------------------------------------------------------
// Grid system responsive code is in _general.scss
// A hack (for old IEs) for the grid system is located in _iehacks.scss
//
//
// 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 {
line-height: 2em;
margin-top: 2%;
overflow: auto;
overflow: auto; // needed for proper formed layout
}
column {
@ -15,6 +19,11 @@ column {
margin: auto 1%;
}
// IE Grid Fix
.ie column {
margin: auto .7%;
}
.c12 {
width: 98%;
}
@ -52,6 +61,14 @@ column {
width: 6.33%;
}
@media (max-width:870px) {
.row column {
margin: 1% auto;
width: 100%;
}
}
//-------------------------------------------------------------------
// End @if
}

3
sass/_headings.scss
View file

@ -3,8 +3,7 @@
// Headings
//-------------------------------------------------------------------
/* Make the default heading style larger */
// Set style for <h1>
// Set style for <h1> -- larger than 'normal'
h1 {
font-size: 4em;
}

7
sass/_icons.scss
View file

@ -1,11 +1,12 @@
@if $import-icons == true{
@if $import-icons == true {
//-------------------------------------------------------------------
// Icons
//-------------------------------------------------------------------
ico {
font-size: 2.04em;
font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif; /* This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu. */
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.
}

19
sass/_iehacks.scss
View file

@ -1,24 +1,9 @@
@if $import-ie-hacks == true{
@if $import-ie-hacks == true {
//-------------------------------------------------------------------
// Internet Explorer Hacks
//-------------------------------------------------------------------
// IE Medium Width
.ie .mediumwidth {
margin-left: 0;
width: 70%;
hr {
margin: 100px auto;
padding-left: 200px;
}
}
// IE Grid System
.ie column {
margin: auto .7%;
}
// no hacks (outside of the ie grid hack found in the grid.scss file)
//-------------------------------------------------------------------
// End @if

8
sass/_inputs.scss
View file

@ -12,12 +12,11 @@
textarea, input {
@extend %global-inputs;
font-family: sans-serif;
outline: none;
outline: 0;
padding: 6px;
&:focus {
border: 1px solid #5ab;
border-color: #5ab;
}
}
@ -30,8 +29,7 @@ textarea, input[type='text'] {
.addon-front {
@extend %global-inputs;
border-right: 0;
margin-right: -2px;
padding: 6px 11px 6px 10px;
padding: 6px 11px;
}

101
sass/_navbar.scss
View file

@ -1,55 +1,96 @@
@if $import-navbar == true{
@if $import-navbar == true {
//-------------------------------------------------------------------
// Navigation Bar
//-------------------------------------------------------------------
.navbar {
// CSS reused in multiple selectors
%nav-global {
background: #000;
color: #fff;
}
.nav {
@extend %nav-global;
height: 1.5em;
padding: 1em 0 .6em;
text-align: left;
width: 100%;
padding: .7em 0 .95em;
// max-height: 1.5em; // needed for animations, uncomment to use
a {
text-decoration: none;
@extend %no-underline;
@extend %nav-global;
color: #aaa;
font-size: 14px;
padding-right: 1em;
position: relative;
top: -1px;
}
input, button, .btn {
margin-top: -20px;
// This ensures that any buttons and inputs in the
// navbar will not mess up its vertical alignment
.pagename {
@extend %nav-global;
font-size: 22px;
top: 1px;
}
// Update styling of .navbar for small screens
@media(max-width:500px) {
height: 7.5em;
.current {
@extend %nav-global;
}
}
.btn.btn-close {
@extend %nav-global;
float: right;
font-size: 25px;
margin-top: -54px;
visibility: hidden;
}
// Update styling of .nav for small screens
@media (max-width:500px) {
.btn.btn-close {
visibility: visible;
}
.nav {
overflow: hidden;
// transition: max-height .5s ease-in-out, height .5s ease-in-out;
&:focus {
/* Necesary for animations
max-height: 500px;
height: 100%;
*/
height: auto;
}
& div:before {
background: #000;
border-top: 3px solid;
border-bottom: 10px double;
content: '';
float: right;
height: 4px;
position: relative;
right: 3px;
top: 14px;
width: 20px;
}
a {
display: block;
text-align: center;
padding: .5em 0;
width: 50%;
}
}
}
.pagename {
color: #fff;
padding: 0 1em 0 2em;
font-weight: bold;
}
.navbar-link {
color: #aaa;
padding: .5em;
&:hover {
color: #fff;
.pagename {
margin-top: -11px;
}
}
//-------------------------------------------------------------------
// End @if
}

16
sass/_table.scss
View file

@ -8,19 +8,21 @@ table {
width: 100%;
}
tbody tr:nth-child(2n-1) {
background: #ccc; /* Shade every other table row */
background: #ccc; // Shade every other table row
// We use tbody to ensure that we don't shade the heading
// this preserves the order of the shading
}
.table {
th, td {
line-height: 1.4em;
padding: .5em;
text-align: left;
}
th, td {
padding: .5em;
text-align: left;
}
//-------------------------------------------------------------------
// End @if
}

20
sass/min-master.scss
View file

@ -5,6 +5,7 @@
@import 'general.scss';
// ------------------------------------------------------------------
// Customize Optional Components
//
@ -28,19 +29,18 @@ $import-icons: true!default;
$import-grid: true!default;
$import-ie-hacks: true!default;
$import-ie-hacks: false!default;
// ------------------------------------------------------------------
// Import Components based on above customization
// ------------------------------------------------------------------
@import 'button.scss';
@import 'grid.scss';
@import 'headings.scss';
@import 'icons.scss';
@import 'inputs.scss';
@import 'messages.scss';
@import 'navbar.scss';
@import 'table.scss';
@import 'iehacks.scss';
@import 'button';
@import 'grid';
@import 'headings';
@import 'icons';
@import 'inputs';
@import 'navbar';
@import 'table';
@import 'iehacks';