Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions axis/buttons.styl
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
// ex. highlight: .7

-highlight($strength = .3)
box-shadow(s("inset 0 1px 0 %s", rgba(255,255,255,$strength)))
box-shadow: s("inset 0 1px 0 %s", rgba(255,255,255,$strength))

// Function: parse
// Used internally for setting button sizes.
Expand Down Expand Up @@ -142,7 +142,7 @@ glossy-button($color = $default-color, $size = "medium", $text-color = null, $sh
text-shadow: 1px 1px 1px $hover-color

&:active
box-shadow(s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6)))
box-shadow: s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6))
text-shadow: $down-shadow
border-color: darken($color, 18%)

Expand Down
5 changes: 2 additions & 3 deletions axis/forms.styl
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

-focus-glow($color = $default-color)
&:focus
box-shadow(0 0 5px rgba($color,.7))
box-shadow: 0 0 5px rgba($color,.7)
border: 1px solid desaturate($color, 35%)
outline: none

Expand All @@ -22,7 +22,7 @@
// ex. input: #D45D86 400px

input($color = $aqua, $width = 250px)
box-shadow(inset 0 1px 1px rgba(#000, 0.1))
box-shadow: inset 0 1px 1px rgba(#000, 0.1)
-webkit-font-smoothing: antialiased
font-size: unit($font-size, 'px')
font-family: $font-stack
Expand All @@ -35,7 +35,6 @@ input($color = $aqua, $width = 250px)
width: $width
text-shadow: 0 0 1px rgba(#fff, .1)
transition()
pie()
if color
-focus-glow($color)
else
Expand Down
10 changes: 2 additions & 8 deletions axis/gradients.styl
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,7 @@ gradient($color1, $color2 = null, $strength = 10%)
$start = $color2 ? $color1 : lighten($color1, $strength)
$end = $color2 ? $color2 : darken($color1, $strength)
background: $start
background: $end linear-gradient(top, $start, $end) repeat-x
if $pie-enabled
-pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
pie()
background: $end linear-gradient(180deg, $start, $end) repeat-x

// Mixin: Image Gradient
//
Expand All @@ -45,7 +42,4 @@ image-gradient($color1, $color2 = null, $image-path = 'noise.png', $strength = 1
$start = $color2 ? $color1 : lighten($color1, $strength)
$end = $color2 ? $color2 : darken($color1, $strength)
background: $start
background: url($img-path $image-path) repeat, $end linear-gradient(top, $start, $end) repeat-x
if $pie-enabled
-pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
pie()
background: url($img-path $image-path) repeat, $end linear-gradient(180deg, $start, $end) repeat-x
1 change: 0 additions & 1 deletion axis/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

@import 'settings'
@import 'reset'
@import 'vendor'
@import 'utilities'
@import 'gradients'
@import 'images'
Expand Down
83 changes: 59 additions & 24 deletions axis/layout.styl
Original file line number Diff line number Diff line change
@@ -1,7 +1,55 @@
// Alias: group
// Clearfix with a better name. Excellent for wrangling floats.
// Mixin: group
// Clearfix with a better name. Excellent for wrangling floats. Taken from
// http://www.cssmojo.com/latest_new_clearfix_so_far/
// Does not support IE 6 and 7 because you should not support them either.

group()
&:after
content: ""
display: table
clear: both

// Alias: clearfix
// Group with a worse name. If you need really can't break the habit.
clearfix = group

// Function: pos
// Backs position helpers, found below
-pos(type, args)
i = 0
position: unquote(type)
for j in (1..4)
if length(args) > i
{args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
i += 1

// Mixin: Positions
// Syntax shortcuts for absolute, relative, and fixed positioning. Ported
// from nib: https://github.com/tj/nib/blob/master/lib/nib/positions.styl

fixed()
-pos('fixed', arguments)

absolute()
-pos('absolute', arguments)

relative()
-pos('relative', arguments)

// Mixin: Size
// Shortcut for setting width and height quickly. If passed one value, sets this
// value as both width and height.
//
// ex. size: 10px 30px
// ex. size: 10px

group = clearfix
size()
if length(arguments) == 1
width: arguments[0]
height: arguments[0]
else
width: arguments[0]
height: arguments[1]

// Mixin: Columns
//
Expand Down Expand Up @@ -30,19 +78,6 @@ columns($count = 3, $gap = 30px, $width = null, $rule = null)
avoid-column-break()
column-break-inside: avoid

// Alias: Inline Block
// Cross browser inline block display. Saves many IE headaches.

inline-block()
display: inline-block

if support-for-ie
display: -moz-inline-stack
vertical-align: baseline
zoom: 1
*display: inline
*vertical-align: auto

// Mixin: Vertically Align
// Cross browser vertical align. Works down to IE9.
//
Expand Down Expand Up @@ -73,24 +108,24 @@ vertically-align($reset = null)
// direct children. The first one will float to the left, the second one will be
// to the right of the first, and third will go farthest right.
//
// ex. media()
// ex. media: 15px
// ex. media: 15px 10px
// ex. media-object()
// ex. media-object: 15px
// ex. media-object: 15px 10px

media($margin = 10px)
media-object($margin = 10px)

$left-margin = $margin
$right-margin = $margin

if length($arguments) > 1
$left-margin = $arguments[0]
$right-margin = $arguments[1]
if length(arguments) > 1
$left-margin = arguments[0]
$right-margin = arguments[1]

overflow: hidden
zoom: 1

& > *
inline-block()
display: inline-block
overflow: hidden
& > *:first-child
float: left
Expand Down
83 changes: 80 additions & 3 deletions axis/reset.styl
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,86 @@
// Reset
// -----

// global-reset delegated to nib

$support-for-ie ?= true
// Global Reset
// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
// ported from Nib

global-reset()
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
reset-box-model()
reset-font()
body
reset-body()
ol, ul
list-style: none
table
reset-table()
caption, th, td
reset-table-cell()
a img
border: none

nested-reset()
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
pre, a, abbr, acronym, address, code, del, dfn, em, img,
dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, caption, tbody, tfoot, thead, tr
reset-box-model()
reset-font()
table
reset-table()
caption, th, td
reset-table-cell()
a img
border: none

reset-box-model()
margin: 0
padding: 0
border: 0
outline: 0

reset-font()
font-weight: inherit
font-style: inherit
font-family: inherit
font-size: 100%
vertical-align: baseline

reset-body()
line-height: 1
color: black
background: white

reset-table()
border-collapse: separate
border-spacing: 0
vertical-align: middle

reset-table-cell()
text-align: left
font-weight: normal
vertical-align: middle

reset-html5()
article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav,
section, summary, main
reset-box-model()
display: block
audio, canvas, video
display inline-block
*display inline
*zoom 1
audio:not([controls]),[hidden]
display none

// Mixin: Normalize CSS
// Based on v3.0.1 https://github.com/necolas/normalize.css
Expand Down
51 changes: 18 additions & 33 deletions axis/settings.styl
Original file line number Diff line number Diff line change
Expand Up @@ -34,48 +34,33 @@ $silver = #DDDDDD
$gray = #AAAAAA
$black = #222222

//Use as default HTML colors
navy = $navy
blue = $blue
aqua = $aqua
teal = $teal
olive = $olive
green = $green
lime = $lime
yellow = $yellow
orange = $orange
red = $red
maroon = $maroon
// Use as default HTML colors
navy = $navy
blue = $blue
aqua = $aqua
teal = $teal
olive = $olive
green = $green
lime = $lime
yellow = $yellow
orange = $orange
red = $red
maroon = $maroon
fuchsia = $fuchsia
purple = $purple
white = $white
silver = $silver
gray = $gray
black = $black
purple = $purple
white = $white
silver = $silver
gray = $gray
black = $black

// Default color
$default-color = $blue

// Text highlight color
$highlight-color = $blue

// Custom image base path for roots mixins
// Custom image base path for axis mixins
$img-path = ''

// Support for old IE
support-for-ie = $support-for-ie // Needed until we port/drop nib
$support-for-ie = false

// Ligatures
$ligatures = false

// Vertical rhythm
$base-line-height = 24px
$default-rhythm-border-style = solid
$relative-font-sizing = true
$round-to-nearest-half-line = false
$min-line-padding = 2px

// Progressive IE (http://css3pie.com/)
$pie-enabled = false
$pie-path = '/pie.htc'
27 changes: 26 additions & 1 deletion axis/typography.styl
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,20 @@ font-face($name, $folder, $weight = 'normal', $style = 'normal')
font-weight: unquote($weight)
font-style: unquote($style)


// Mixin: Ellipsis
// Truncate text to the width of its container...
// ex: ellipsis()
// ex: ellipsis: 300px

ellipsis($width = 100%)
white-space: nowrap
display: inline-block
max-width: 100%
overflow: hidden
text-overflow: ellipsis
word-wrap: normal

// Function: Line Height
//
// If there is a font-size set on the parent element, adjusts the line height to
Expand All @@ -56,7 +70,7 @@ font-face($name, $folder, $weight = 'normal', $style = 'normal')
if @font-size
line-height: 1.6em
else
line-height: unit(font-size*1.6, 'px')
line-height: unit($font-size*1.6, 'px')
line-height: 1.6rem

// Mixin: Text Margin
Expand Down Expand Up @@ -381,6 +395,17 @@ hyphenation()
-webkit-hyphenate-after: 3
hyphenate-lines: 3

// Mixin: Shadow Stroke
//
// Creates a text outline using text-shadow. Ported from nib.
// Takes a color.
//
// ex: shadow-stroke()
// ex: sahdow-stroke(red)

shadow-stroke($color = $blue)
text-shadow: -1px -1px 0 $color, 1px -1px 0 $color, -1px 1px 0 $color, 1px 1px 0 $color

// Additive Mixin: Base
//
// WARNING: Creates classes in your css and styles them - not to be used inside
Expand Down
Loading