Converted the blueprint stylesheets to css-style properties.
This commit is contained in:
parent
e744c1e0db
commit
772a58de41
@ -30,70 +30,70 @@
|
||||
+blueprint-ie-defaults
|
||||
|
||||
=blueprint-ie-body
|
||||
:text-align center
|
||||
text-align: center
|
||||
+blueprint-ie-hacks
|
||||
|
||||
=blueprint-ie-hacks
|
||||
* html &
|
||||
legend
|
||||
:margin 0px -8px 16px 0
|
||||
:padding 0
|
||||
margin: 0px -8px 16px 0
|
||||
padding: 0
|
||||
html>&
|
||||
p code
|
||||
:*white-space normal
|
||||
*white-space: normal
|
||||
|
||||
// Fixes for Blueprint "inline" forms in IE
|
||||
=blueprint-inline-form-ie
|
||||
div, p
|
||||
:vertical-align middle
|
||||
vertical-align: middle
|
||||
label
|
||||
:position relative
|
||||
:top -0.25em
|
||||
position: relative
|
||||
top: -0.25em
|
||||
input
|
||||
&.checkbox, &.radio, &.button, button
|
||||
:margin 0.5em 0
|
||||
margin: 0.5em 0
|
||||
|
||||
=blueprint-ie-defaults
|
||||
.container
|
||||
:text-align left
|
||||
text-align: left
|
||||
ol
|
||||
:margin-left 2em
|
||||
margin-left: 2em
|
||||
sup
|
||||
:vertical-align text-top
|
||||
vertical-align: text-top
|
||||
sub
|
||||
:vertical-align text-bottom
|
||||
vertical-align: text-bottom
|
||||
hr
|
||||
:margin -8px auto 11px
|
||||
margin: -8px auto 11px
|
||||
img
|
||||
:-ms-interpolation-mode bicubic
|
||||
-ms-interpolation-mode: bicubic
|
||||
fieldset
|
||||
:padding-top 0
|
||||
padding-top: 0
|
||||
input
|
||||
&.text
|
||||
:margin 0.5em 0
|
||||
:background-color #fff
|
||||
:border 1px solid #bbb
|
||||
margin: 0.5em 0
|
||||
background-color: #fff
|
||||
border: 1px solid #bbb
|
||||
&:focus
|
||||
:border 1px solid #666
|
||||
border: 1px solid #666
|
||||
&.title
|
||||
:margin 0.5em 0
|
||||
:background-color #fff
|
||||
:border 1px solid #bbb
|
||||
margin: 0.5em 0
|
||||
background-color: #fff
|
||||
border: 1px solid #bbb
|
||||
&:focus
|
||||
:border 1px solid #666
|
||||
border: 1px solid #666
|
||||
&.checkbox
|
||||
:position relative
|
||||
:top 0.25em
|
||||
position: relative
|
||||
top: 0.25em
|
||||
&.radio
|
||||
:position relative
|
||||
:top 0.25em
|
||||
position: relative
|
||||
top: 0.25em
|
||||
&.button
|
||||
:position relative
|
||||
:top 0.25em
|
||||
position: relative
|
||||
top: 0.25em
|
||||
textarea
|
||||
:margin 0.5em 0
|
||||
margin: 0.5em 0
|
||||
select
|
||||
:margin 0.5em 0
|
||||
margin: 0.5em 0
|
||||
button
|
||||
:position relative
|
||||
:top 0.25em
|
||||
position: relative
|
||||
top: 0.25em
|
||||
|
@ -32,59 +32,59 @@
|
||||
// Feel free to mix it into anchors where you want it.
|
||||
=blueprint-show-link-urls
|
||||
&:after
|
||||
:content " (" attr(href) ")"
|
||||
:font-size 90%
|
||||
content: " (" attr(href) ")"
|
||||
font-size: 90%
|
||||
|
||||
=blueprint-print-body
|
||||
:line-height 1.5
|
||||
:font-family= !blueprint_font_family
|
||||
:color #000
|
||||
:background none
|
||||
:font-size 10pt
|
||||
line-height: 1.5
|
||||
font-family= !blueprint_font_family
|
||||
color: #000
|
||||
background: none
|
||||
font-size: 10pt
|
||||
|
||||
=blueprint-print-defaults
|
||||
.container
|
||||
:background none
|
||||
background: none
|
||||
hr
|
||||
:background #ccc
|
||||
:color #ccc
|
||||
:width 100%
|
||||
:height 2px
|
||||
:margin 2em 0
|
||||
:padding 0
|
||||
:border none
|
||||
background: #ccc
|
||||
color: #ccc
|
||||
width: 100%
|
||||
height: 2px
|
||||
margin: 2em 0
|
||||
padding: 0
|
||||
border: none
|
||||
&.space
|
||||
:background #fff
|
||||
:color #fff
|
||||
background: #fff
|
||||
color: #fff
|
||||
h1, h2, h3, h4, h5, h6
|
||||
:font-family= !blueprint_font_family
|
||||
font-family= !blueprint_font_family
|
||||
code
|
||||
:font
|
||||
:size .9em
|
||||
:family= !blueprint_fixed_font_family
|
||||
font:
|
||||
size: .9em
|
||||
family= !blueprint_fixed_font_family
|
||||
img
|
||||
+float-left
|
||||
:margin 1.5em 1.5em 1.5em 0
|
||||
margin: 1.5em 1.5em 1.5em 0
|
||||
a
|
||||
img
|
||||
:border none
|
||||
border: none
|
||||
&:link,
|
||||
&:visited
|
||||
:background transparent
|
||||
:font-weight 700
|
||||
:text-decoration underline
|
||||
background: transparent
|
||||
font-weight: 700
|
||||
text-decoration: underline
|
||||
p img.top
|
||||
:margin-top 0
|
||||
margin-top: 0
|
||||
blockquote
|
||||
:margin 1.5em
|
||||
:padding 1em
|
||||
:font-style italic
|
||||
:font-size .9em
|
||||
margin: 1.5em
|
||||
padding: 1em
|
||||
font-style: italic
|
||||
font-size: .9em
|
||||
.small
|
||||
:font-size .9em
|
||||
font-size: .9em
|
||||
.large
|
||||
:font-size 1.1em
|
||||
font-size: 1.1em
|
||||
.quiet
|
||||
:color #999
|
||||
color: #999
|
||||
.hide
|
||||
:display none
|
||||
display: none
|
||||
|
@ -24,9 +24,9 @@
|
||||
@param border_highlight_color
|
||||
The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
=button-colors(!font_color = !blueprint_button_font_color, !bg_color = !blueprint_button_background_color, !border_color = !blueprint_button_border_color, !border_highlight_color = !border_color + #101010)
|
||||
:background-color= !bg_color
|
||||
:border-color= !border_highlight_color !border_color !border_color !border_highlight_color
|
||||
:color= !font_color
|
||||
background-color= !bg_color
|
||||
border-color= !border_highlight_color !border_color !border_color !border_highlight_color
|
||||
color= !font_color
|
||||
|
||||
//**
|
||||
Sets the colors for a button in the active state
|
||||
@ -46,39 +46,39 @@
|
||||
|
||||
=button-base(!float = false)
|
||||
@if !float
|
||||
:display block
|
||||
display: block
|
||||
+float(!float)
|
||||
@else
|
||||
+inline-block
|
||||
:margin 0.7em 0.5em 0.7em 0
|
||||
:border-width 1px
|
||||
:border-style solid
|
||||
:font-family= !blueprint_button_font_family
|
||||
:font-size 100%
|
||||
:line-height 130%
|
||||
:text-decoration none
|
||||
:font-weight bold
|
||||
:cursor pointer
|
||||
margin: 0.7em 0.5em 0.7em 0
|
||||
border-width: 1px
|
||||
border-style: solid
|
||||
font-family= !blueprint_button_font_family
|
||||
font-size: 100%
|
||||
line-height: 130%
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
img
|
||||
:margin 0 3px -3px 0 !important
|
||||
:padding 0
|
||||
:border none
|
||||
:width 16px
|
||||
:height 16px
|
||||
:float none
|
||||
margin: 0 3px -3px 0 !important
|
||||
padding: 0
|
||||
border: none
|
||||
width: 16px
|
||||
height: 16px
|
||||
float: none
|
||||
|
||||
|
||||
=anchor-button(!float = false)
|
||||
+button-base(!float)
|
||||
:padding 5px 10px 5px 7px
|
||||
padding: 5px 10px 5px 7px
|
||||
|
||||
=button-button(!float = false)
|
||||
+button-base(!float)
|
||||
:width auto
|
||||
:overflow visible
|
||||
:padding 4px 10px 3px 7px
|
||||
width: auto
|
||||
overflow: visible
|
||||
padding: 4px 10px 3px 7px
|
||||
&[type]
|
||||
:padding 4px 10px 4px 7px
|
||||
:line-height 17px
|
||||
padding: 4px 10px 4px 7px
|
||||
line-height: 17px
|
||||
*:first-child+html &[type]
|
||||
:padding 4px 10px 3px 7px
|
||||
padding: 4px 10px 3px 7px
|
||||
|
@ -1,9 +1,9 @@
|
||||
=showgrid(!image = "grid.png")
|
||||
:background= image_url(!image)
|
||||
background= image_url(!image)
|
||||
|
||||
=blueprint-debug(!grid_image = "grid.png")
|
||||
// Use this class on any column or container to see the grid.
|
||||
// TODO: prefix this with the project path.
|
||||
.showgrid
|
||||
+showgrid(!grid_image)
|
||||
|
||||
|
||||
|
@ -18,11 +18,11 @@
|
||||
|
||||
// Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p
|
||||
=sibling-indentation
|
||||
:text-indent 2em
|
||||
:margin-top -1.5em
|
||||
text-indent: 2em
|
||||
margin-top: -1.5em
|
||||
/* Don't want this in forms.
|
||||
form &
|
||||
:text-indent 0
|
||||
text-indent: 0
|
||||
|
||||
//
|
||||
For great looking type, use this code instead of asdf:
|
||||
@ -30,10 +30,10 @@
|
||||
Best used on prepositions and ampersands.
|
||||
|
||||
=alt
|
||||
:color #666
|
||||
:font-family "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif
|
||||
:font-style italic
|
||||
:font-weight normal
|
||||
color: #666
|
||||
font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif
|
||||
font-style: italic
|
||||
font-weight: normal
|
||||
|
||||
//
|
||||
For great looking quote marks in titles, replace "asdf" with:
|
||||
@ -41,7 +41,7 @@
|
||||
(That is, when the title starts with a quote mark).
|
||||
(You may have to change this value depending on your font size).
|
||||
=dquo(!offset = 0.5em)
|
||||
:margin-left -!offset
|
||||
margin-left: -!offset
|
||||
|
||||
//
|
||||
Reduced size type with incremental leading
|
||||
@ -58,21 +58,21 @@
|
||||
base_font_size - The base font size in pixels. Defaults to 12px
|
||||
old_line_height - The old line height. Defaults to 1.5 times the base_font_size
|
||||
=incr(!font_size = 10px, !base_font_size = !blueprint_font_size, !old_line_height = !base_font_size * 1.5)
|
||||
:font-size= 1em * !font_size / !base_font_size
|
||||
:line-height= 1em * !old_line_height / !font_size * 4 / 5
|
||||
:margin-bottom 1.5em
|
||||
font-size= 1em * !font_size / !base_font_size
|
||||
line-height= 1em * !old_line_height / !font_size * 4 / 5
|
||||
margin-bottom: 1.5em
|
||||
|
||||
//
|
||||
Surround uppercase words and abbreviations with this class.
|
||||
Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/]
|
||||
=caps
|
||||
:font-variant small-caps
|
||||
:letter-spacing 1px
|
||||
:text-transform lowercase
|
||||
:font-size 1.2em
|
||||
:line-height 1%
|
||||
:font-weight bold
|
||||
:padding 0 2px
|
||||
font-variant: small-caps
|
||||
letter-spacing: 1px
|
||||
text-transform: lowercase
|
||||
font-size: 1.2em
|
||||
line-height: 1%
|
||||
font-weight: bold
|
||||
padding: 0 2px
|
||||
|
||||
=fancy-paragraphs
|
||||
p + p
|
||||
|
@ -2,9 +2,9 @@
|
||||
|
||||
// Mixin for producing Blueprint "inline" forms. Should be used with the blueprint-form mixin.
|
||||
=blueprint-inline-form
|
||||
:line-height 3
|
||||
line-height: 3
|
||||
p
|
||||
:margin-bottom 0
|
||||
margin-bottom: 0
|
||||
|
||||
=blueprint-form
|
||||
+blueprint-form-layout
|
||||
@ -13,43 +13,43 @@
|
||||
|
||||
=blueprint-form-layout
|
||||
label
|
||||
:font-weight bold
|
||||
font-weight: bold
|
||||
fieldset
|
||||
:padding 1.4em
|
||||
:margin 0 0 1.5em 0
|
||||
padding: 1.4em
|
||||
margin: 0 0 1.5em 0
|
||||
legend
|
||||
:font-weight bold
|
||||
:font-size 1.2em
|
||||
font-weight: bold
|
||||
font-size: 1.2em
|
||||
input
|
||||
&.text, &.title, &[type=text]
|
||||
:margin 0.5em 0
|
||||
:background-color #fff
|
||||
:padding 5px
|
||||
margin: 0.5em 0
|
||||
background-color: #fff
|
||||
padding: 5px
|
||||
&.title
|
||||
:font-size 1.5em
|
||||
font-size: 1.5em
|
||||
&[type=checkbox], &.checkbox,
|
||||
&[type=radio], &.radio
|
||||
:position relative
|
||||
:top 0.25em
|
||||
position: relative
|
||||
top: 0.25em
|
||||
textarea
|
||||
:margin 0.5em 0
|
||||
:padding 5px
|
||||
margin: 0.5em 0
|
||||
padding: 5px
|
||||
select
|
||||
:margin 0.5em 0
|
||||
margin: 0.5em 0
|
||||
|
||||
=blueprint-form-sizes(!input_width = 300px, !textarea_width = 390px, !textarea_height = 250px)
|
||||
input.text, input.title
|
||||
:width= !input_width
|
||||
width= !input_width
|
||||
textarea
|
||||
:width= !textarea_width
|
||||
:height= !textarea_height
|
||||
width= !textarea_width
|
||||
height= !textarea_height
|
||||
|
||||
=blueprint-form-borders(!unfocused_border_color = #bbb, !focus_border_color = #666, !fieldset_border_color = #ccc)
|
||||
fieldset
|
||||
:border= 1px "solid" !fieldset_border_color
|
||||
border= 1px "solid" !fieldset_border_color
|
||||
input.text, input.title,
|
||||
textarea,
|
||||
select
|
||||
:border= 1px "solid" !unfocused_border_color
|
||||
border= 1px "solid" !unfocused_border_color
|
||||
&:focus
|
||||
:border= 1px "solid" !focus_border_color
|
||||
border= 1px "solid" !focus_border_color
|
||||
|
@ -41,7 +41,7 @@
|
||||
+span(!n)
|
||||
.span-#{!blueprint_grid_columns}, div.span-#{!blueprint_grid_columns}
|
||||
+span(!blueprint_grid_columns)
|
||||
:margin 0
|
||||
margin: 0
|
||||
input, textarea, select
|
||||
@for !n from 1 through !blueprint_grid_columns
|
||||
&.span-#{!n}
|
||||
@ -76,30 +76,30 @@
|
||||
// Note: If you use this mixin without the class and want to support ie6
|
||||
// you must set text-align left on your container element in an IE stylesheet.
|
||||
=container
|
||||
:width = !blueprint_container_size
|
||||
:margin 0 auto
|
||||
width= !blueprint_container_size
|
||||
margin: 0 auto
|
||||
+clearfix
|
||||
|
||||
// The last column in a row needs this mixin or it will end up on the next row.
|
||||
// TODO add this to span mixin when we have optional arguments
|
||||
=last
|
||||
:margin-right 0
|
||||
margin-right: 0
|
||||
|
||||
=span(!n, !override = false)
|
||||
!width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1))
|
||||
@if !override
|
||||
:width = !width !important
|
||||
width= !width !important
|
||||
@else
|
||||
:width = !width
|
||||
width= !width
|
||||
|
||||
=column-base(!last = false)
|
||||
+float-left
|
||||
@if !last
|
||||
+last
|
||||
@else
|
||||
:margin-right = !blueprint_grid_margin
|
||||
margin-right= !blueprint_grid_margin
|
||||
* html &
|
||||
:overflow-x hidden
|
||||
overflow-x: hidden
|
||||
|
||||
// Use this mixins to set the width of n columns.
|
||||
=column(!n, !last = false)
|
||||
@ -109,27 +109,27 @@
|
||||
|
||||
// Mixin to a column to append n empty cols.
|
||||
=append(!n)
|
||||
:padding-right = (!blueprint_grid_outer_width) * !n
|
||||
padding-right= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// Mixin to a column to prepend n empty cols.
|
||||
=prepend(!n)
|
||||
:padding-left = (!blueprint_grid_outer_width) * !n
|
||||
padding-left= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
=append-bottom(!amount = 1.5em)
|
||||
:margin-bottom= !amount
|
||||
margin-bottom= !amount
|
||||
|
||||
=prepend-top(!amount = 1.5em)
|
||||
:margin-top= !amount
|
||||
margin-top= !amount
|
||||
|
||||
=pull-base
|
||||
+float-left
|
||||
:position relative
|
||||
position: relative
|
||||
|
||||
=pull-margins(!n, !last = false)
|
||||
@if !last
|
||||
:margin-left = (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
|
||||
margin-left= (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
|
||||
@else
|
||||
:margin-left = -!blueprint_grid_outer_width * !n
|
||||
margin-left= -!blueprint_grid_outer_width * !n
|
||||
|
||||
// mixin to a column to move it n columns to the left
|
||||
=pull(!n, !last = false)
|
||||
@ -138,10 +138,10 @@
|
||||
|
||||
=push-base
|
||||
+float-right
|
||||
:position relative
|
||||
position: relative
|
||||
|
||||
=push-margins(!n)
|
||||
:margin= 0 (-!blueprint_grid_outer_width * !n) 1.5em (!blueprint_grid_outer_width * !n)
|
||||
margin= 0 (-!blueprint_grid_outer_width * !n) 1.5em (!blueprint_grid_outer_width * !n)
|
||||
|
||||
// mixin to a column to push it n columns to the right
|
||||
=push(!n)
|
||||
@ -150,29 +150,29 @@
|
||||
|
||||
// Border on right hand side of a column.
|
||||
=border(!border_color = #eee, !border_width = 1px)
|
||||
:padding-right = !blueprint_grid_margin / 2 - !border_width
|
||||
:margin-right = !blueprint_grid_margin / 2
|
||||
:border-right #{!border_width} solid #{!border_color}
|
||||
padding-right= !blueprint_grid_margin / 2 - !border_width
|
||||
margin-right= !blueprint_grid_margin / 2
|
||||
border-right: #{!border_width} solid #{!border_color}
|
||||
|
||||
// Border with more whitespace, spans one column.
|
||||
=colborder(!border_color = #eee, !border_width = 1px)
|
||||
:padding-right= floor((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
|
||||
:margin-right= ceil((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
|
||||
:border-right #{!border_width} solid #{!border_color}
|
||||
padding-right= floor((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
|
||||
margin-right= ceil((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
|
||||
border-right: #{!border_width} solid #{!border_color}
|
||||
|
||||
// Mixin this to an hr to make a horizontal ruler across a column.
|
||||
=colruler(!border_color = #ddd)
|
||||
:background= !border_color
|
||||
:color= !border_color
|
||||
:clear both
|
||||
:float none
|
||||
:width 100%
|
||||
:height .1em
|
||||
:margin 0 0 1.45em
|
||||
:border none
|
||||
background= !border_color
|
||||
color= !border_color
|
||||
clear: both
|
||||
float: none
|
||||
width: 100%
|
||||
height: .1em
|
||||
margin: 0 0 1.45em
|
||||
border: none
|
||||
|
||||
// Mixin this to an hr to make a horizontal spacer across a column.
|
||||
=colspacer
|
||||
+colruler
|
||||
:background #fff
|
||||
:color #fff
|
||||
background: #fff
|
||||
color: #fff
|
||||
|
@ -9,7 +9,7 @@
|
||||
.success
|
||||
+success
|
||||
.hide
|
||||
:display none
|
||||
display: none
|
||||
.highlight
|
||||
+highlight
|
||||
.added
|
||||
@ -18,41 +18,41 @@
|
||||
+removed
|
||||
|
||||
=feedback-base
|
||||
:padding .8em
|
||||
:margin-bottom 1em
|
||||
:border= 2px "solid" !feedback_border_color
|
||||
padding: .8em
|
||||
margin-bottom: 1em
|
||||
border= 2px "solid" !feedback_border_color
|
||||
|
||||
=error
|
||||
+feedback-base
|
||||
:background = !error_bg_color
|
||||
:color = !error_color
|
||||
:border-color = !error_border_color
|
||||
background= !error_bg_color
|
||||
color= !error_color
|
||||
border-color= !error_border_color
|
||||
a
|
||||
:color = !error_color
|
||||
color= !error_color
|
||||
|
||||
=notice
|
||||
+feedback-base
|
||||
:background = !notice_bg_color
|
||||
:color = !notice_color
|
||||
:border-color = !notice_border_color
|
||||
background= !notice_bg_color
|
||||
color= !notice_color
|
||||
border-color= !notice_border_color
|
||||
a
|
||||
:color = !notice_color
|
||||
color= !notice_color
|
||||
|
||||
=success
|
||||
+feedback-base
|
||||
:background = !success_bg_color
|
||||
:color = !success_color
|
||||
:border-color = !success_border_color
|
||||
background= !success_bg_color
|
||||
color= !success_color
|
||||
border-color= !success_border_color
|
||||
a
|
||||
:color = !success_color
|
||||
color= !success_color
|
||||
|
||||
=highlight
|
||||
:background = !highlight_color
|
||||
background= !highlight_color
|
||||
|
||||
=added
|
||||
:background = !added_bg_color
|
||||
:color = !added_color
|
||||
background= !added_bg_color
|
||||
color= !added_color
|
||||
|
||||
=removed
|
||||
:background = !removed_bg_color
|
||||
:color = !removed_color
|
||||
background= !removed_bg_color
|
||||
color= !removed_color
|
||||
|
@ -1,18 +1,18 @@
|
||||
=no-link-icon
|
||||
:background transparent none !important
|
||||
:padding 0 !important
|
||||
:margin 0 !important
|
||||
background: transparent none !important
|
||||
padding: 0 !important
|
||||
margin: 0 !important
|
||||
|
||||
=link-icon-base
|
||||
:padding 2px 22px 2px 0
|
||||
:margin -2px 0
|
||||
:background-repeat no-repeat
|
||||
:background-position right center
|
||||
padding: 2px 22px 2px 0
|
||||
margin: -2px 0
|
||||
background-repeat: no-repeat
|
||||
background-position: right center
|
||||
|
||||
=link-icon(!name, !include_base = true)
|
||||
@if !include_base
|
||||
+link-icon-base
|
||||
:background-image= image_url("link_icons/#{!name}")
|
||||
background-image= image_url("link_icons/#{!name}")
|
||||
|
||||
=link-icons
|
||||
a[href^="http:"],
|
||||
@ -41,4 +41,4 @@
|
||||
a[href$=".rdf"]
|
||||
+link-icon("feed.png", false)
|
||||
a[href^="aim:"]
|
||||
+link-icon("im.png", false)
|
||||
+link-icon("im.png", false)
|
||||
|
@ -76,66 +76,66 @@
|
||||
+push(!n)
|
||||
|
||||
=container
|
||||
:min-width= !blueprint_liquid_container_min_width
|
||||
:width = !blueprint_liquid_container_width
|
||||
:margin 0 auto
|
||||
min-width= !blueprint_liquid_container_min_width
|
||||
width= !blueprint_liquid_container_width
|
||||
margin: 0 auto
|
||||
+clearfix
|
||||
|
||||
=span(!n, !override = false)
|
||||
!width = (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
||||
@if !override
|
||||
:width = !width !important
|
||||
width= !width !important
|
||||
@else
|
||||
:width = !width
|
||||
width= !width
|
||||
|
||||
=last
|
||||
:margin-right 0
|
||||
margin-right: 0
|
||||
|
||||
=column(!n, !last = false)
|
||||
+float-left
|
||||
:overflow hidden
|
||||
overflow: hidden
|
||||
+span(!n)
|
||||
@if !last
|
||||
+last
|
||||
@else
|
||||
:margin-right = !blueprint_liquid_grid_margin
|
||||
margin-right= !blueprint_liquid_grid_margin
|
||||
|
||||
=append(!n)
|
||||
:padding-right= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
||||
padding-right= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
||||
|
||||
=prepend(!n)
|
||||
:padding-left= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
||||
padding-left= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
||||
|
||||
=pull(!n, !last = false)
|
||||
:margin-left= (!blueprint_liquid_grid_push_pull * !n)
|
||||
margin-left= (!blueprint_liquid_grid_push_pull * !n)
|
||||
|
||||
=push(!n)
|
||||
+float-right
|
||||
:margin
|
||||
:top 0
|
||||
:left 1.5em
|
||||
:right= (!blueprint_liquid_grid_push_pull * !n)
|
||||
:bottom 0
|
||||
margin:
|
||||
top: 0
|
||||
left: 1.5em
|
||||
right= (!blueprint_liquid_grid_push_pull * !n)
|
||||
bottom: 0
|
||||
|
||||
=border
|
||||
:border-right 1px solid #eee
|
||||
border-right: 1px solid #eee
|
||||
|
||||
=colborder
|
||||
:padding-right 2%
|
||||
:margin-right 2%
|
||||
padding-right: 2%
|
||||
margin-right: 2%
|
||||
+border
|
||||
|
||||
=colruler
|
||||
:background #ddd
|
||||
:color #ddd
|
||||
:clear both
|
||||
:width 100%
|
||||
:height 0.083em
|
||||
:margin 0 0 1.583em
|
||||
:border none
|
||||
background: #ddd
|
||||
color: #ddd
|
||||
clear: both
|
||||
width: 100%
|
||||
height: 0.083em
|
||||
margin: 0 0 1.583em
|
||||
border: none
|
||||
|
||||
=colspacer
|
||||
+colruler
|
||||
:background #fff
|
||||
:color #fff
|
||||
background: #fff
|
||||
color: #fff
|
||||
|
||||
|
@ -20,37 +20,37 @@
|
||||
table
|
||||
+blueprint-reset-table
|
||||
a img
|
||||
:border none
|
||||
border: none
|
||||
|
||||
=blueprint-reset-box-model
|
||||
:margin 0
|
||||
:padding 0
|
||||
:border 0
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 0
|
||||
|
||||
=blueprint-reset
|
||||
+blueprint-reset-box-model
|
||||
:font
|
||||
:weight inherit
|
||||
:style inherit
|
||||
:size 100%
|
||||
:family inherit
|
||||
:vertical-align baseline
|
||||
font:
|
||||
weight: inherit
|
||||
style: inherit
|
||||
size: 100%
|
||||
family: inherit
|
||||
vertical-align: baseline
|
||||
|
||||
=blueprint-reset-quotation
|
||||
+blueprint-reset
|
||||
:quotes "" ""
|
||||
quotes: "" ""
|
||||
&:before,
|
||||
&:after
|
||||
:content ""
|
||||
content: ""
|
||||
|
||||
=blueprint-reset-table-cell
|
||||
+blueprint-reset
|
||||
:text-align left
|
||||
:font-weight normal
|
||||
:vertical-align middle
|
||||
text-align: left
|
||||
font-weight: normal
|
||||
vertical-align: middle
|
||||
|
||||
=blueprint-reset-table
|
||||
+blueprint-reset
|
||||
:border-collapse separate
|
||||
:border-spacing 0
|
||||
:vertical-align middle
|
||||
border-collapse: separate
|
||||
border-spacing: 0
|
||||
vertical-align: middle
|
||||
|
@ -13,62 +13,62 @@
|
||||
// Note: If you use this mixin without the class and want to support ie6
|
||||
// you must set text-align left on your container element in an IE stylesheet.
|
||||
=container
|
||||
:width = !blueprint_container_size
|
||||
:margin 0 auto
|
||||
:direction rtl
|
||||
width= !blueprint_container_size
|
||||
margin: 0 auto
|
||||
direction: rtl
|
||||
+clearfix
|
||||
|
||||
// The last column in a row needs this mixin or it will end up on the next row.
|
||||
// TODO add this to span mixin when we have optional arguments
|
||||
=last
|
||||
:margin-left 0
|
||||
margin-left: 0
|
||||
|
||||
=column-base(!last = false)
|
||||
+float-right
|
||||
@if !last
|
||||
+last
|
||||
@else
|
||||
:margin-left = !blueprint_grid_margin
|
||||
margin-left= !blueprint_grid_margin
|
||||
* html &
|
||||
:overflow-x hidden
|
||||
overflow-x: hidden
|
||||
|
||||
// Mixin to a column to append n empty cols.
|
||||
=append(!n)
|
||||
:padding-left = (!blueprint_grid_outer_width) * !n
|
||||
padding-left= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// Mixin to a column to prepend n empty cols.
|
||||
=prepend(!n)
|
||||
:padding-right = (!blueprint_grid_outer_width) * !n
|
||||
padding-right= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// mixin to a column to move it n columns to the left
|
||||
=pull(!n, !last = false)
|
||||
:position relative
|
||||
position: relative
|
||||
@if !last
|
||||
:margin-right = (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
|
||||
margin-right= (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
|
||||
@else
|
||||
:margin-right = -!blueprint_grid_outer_width * !n
|
||||
margin-right= -!blueprint_grid_outer_width * !n
|
||||
|
||||
// mixin to a column to push it n columns to the right
|
||||
=push(!n)
|
||||
+float-right
|
||||
:position relative
|
||||
:margin
|
||||
:top 0
|
||||
:left = -!blueprint_grid_outer_width * !n
|
||||
:bottom 1.5em
|
||||
:right = !blueprint_grid_outer_width * !n
|
||||
position: relative
|
||||
margin:
|
||||
top: 0
|
||||
left= -!blueprint_grid_outer_width * !n
|
||||
bottom: 1.5em
|
||||
right= !blueprint_grid_outer_width * !n
|
||||
|
||||
// Border on left hand side of a column.
|
||||
=border
|
||||
:padding-left = !blueprint_grid_margin / 2 - 1
|
||||
:margin-left = !blueprint_grid_margin / 2
|
||||
:border-left 1px solid #eee
|
||||
padding-left= !blueprint_grid_margin / 2 - 1
|
||||
margin-left= !blueprint_grid_margin / 2
|
||||
border-left: 1px solid #eee
|
||||
|
||||
// Border with more whitespace, spans one column.
|
||||
=colborder
|
||||
:padding-left= (!blueprint_grid_width - 2 * !blueprint_grid_margin - 1)/2
|
||||
:margin-left= (!blueprint_grid_width - 2 * !blueprint_grid_margin)/2
|
||||
:border-left 1px solid #eee
|
||||
padding-left= (!blueprint_grid_width - 2 * !blueprint_grid_margin - 1)/2
|
||||
margin-left= (!blueprint_grid_width - 2 * !blueprint_grid_margin)/2
|
||||
border-left: 1px solid #eee
|
||||
|
||||
// Usage examples:
|
||||
// As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
@ -85,11 +85,11 @@
|
||||
=rtl-typography(!body_selector = "body")
|
||||
@if !body_selector == true
|
||||
html &
|
||||
:font-family Arial, sans-serif
|
||||
font-family: Arial, sans-serif
|
||||
+rtl-typography-defaults
|
||||
@else
|
||||
html #{!body_selector}
|
||||
:font-family Arial, sans-serif
|
||||
font-family: Arial, sans-serif
|
||||
@if !body_selector != "body"
|
||||
@debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +rtl-typography, pass true as the first argument and mix it into #{!body_selector}."
|
||||
+rtl-typography-defaults
|
||||
@ -99,24 +99,24 @@
|
||||
|
||||
=rtl-typography-defaults
|
||||
h1, h2, h3, h4, h5, h6
|
||||
:font-family Arial, sans-serif
|
||||
font-family: Arial, sans-serif
|
||||
|
||||
pre, code, tt
|
||||
:font-family monospace
|
||||
font-family: monospace
|
||||
|
||||
p
|
||||
img.right
|
||||
+float-left
|
||||
:margin 1.5em 1.5em 1.5em 0
|
||||
:padding 0
|
||||
margin: 1.5em 1.5em 1.5em 0
|
||||
padding: 0
|
||||
img.left
|
||||
+float-right
|
||||
:margin 1.5em 0 1.5em 1.5em
|
||||
:padding 0
|
||||
margin: 1.5em 0 1.5em 1.5em
|
||||
padding: 0
|
||||
|
||||
dd, ul, ol
|
||||
:margin-left 0
|
||||
:margin-right 1.5em
|
||||
margin-left: 0
|
||||
margin-right: 1.5em
|
||||
|
||||
td, th
|
||||
:text-align right
|
||||
text-align: right
|
||||
|
@ -24,13 +24,13 @@
|
||||
// The styles this mixin provides were deprecated in Blueprint 0.9 and is no longer part of the
|
||||
// main scaffolding, but the mixin is still available if you want to use it.
|
||||
=blueprint-scaffolding-body
|
||||
:margin 1.5em 0
|
||||
margin: 1.5em 0
|
||||
|
||||
// Mixin +box to create a padded box inside a column.
|
||||
=box
|
||||
:padding 1.5em
|
||||
:margin-bottom 1.5em
|
||||
:background #E5ECF9
|
||||
padding: 1.5em
|
||||
margin-bottom: 1.5em
|
||||
background: #E5ECF9
|
||||
|
||||
=blueprint-scaffolding-defaults
|
||||
.box
|
||||
|
@ -32,128 +32,128 @@
|
||||
+blueprint-typography-defaults
|
||||
|
||||
=normal-text
|
||||
:font-family= !blueprint_font_family
|
||||
:color= !font_color
|
||||
font-family= !blueprint_font_family
|
||||
color= !font_color
|
||||
|
||||
=fixed-width-text
|
||||
:font= 1em !blueprint_fixed_font_family
|
||||
:line-height 1.5
|
||||
font= 1em !blueprint_fixed_font_family
|
||||
line-height: 1.5
|
||||
|
||||
=header-text
|
||||
:font-weight normal
|
||||
:color= !header_color
|
||||
font-weight: normal
|
||||
color= !header_color
|
||||
|
||||
=quiet
|
||||
:color= !quiet_color
|
||||
color= !quiet_color
|
||||
|
||||
=loud
|
||||
:color= !loud_color
|
||||
color= !loud_color
|
||||
|
||||
=blueprint-typography-body(!font_size = !blueprint_font_size)
|
||||
:line-height 1.5
|
||||
line-height: 1.5
|
||||
+normal-text
|
||||
:font-size= 100% * !font_size / 16px
|
||||
font-size= 100% * !font_size / 16px
|
||||
|
||||
=blueprint-typography-defaults
|
||||
h1
|
||||
+header-text
|
||||
:font-size 3em
|
||||
:line-height 1
|
||||
:margin-bottom 0.5em
|
||||
font-size: 3em
|
||||
line-height: 1
|
||||
margin-bottom: 0.5em
|
||||
img
|
||||
:margin 0
|
||||
margin: 0
|
||||
h2
|
||||
+header-text
|
||||
:font-size 2em
|
||||
:margin-bottom 0.75em
|
||||
font-size: 2em
|
||||
margin-bottom: 0.75em
|
||||
h3
|
||||
+header-text
|
||||
:font-size 1.5em
|
||||
:line-height 1
|
||||
:margin-bottom 1em
|
||||
font-size: 1.5em
|
||||
line-height: 1
|
||||
margin-bottom: 1em
|
||||
h4
|
||||
+header-text
|
||||
:font-size 1.2em
|
||||
:line-height 1.25
|
||||
:margin-bottom 1.25em
|
||||
font-size: 1.2em
|
||||
line-height: 1.25
|
||||
margin-bottom: 1.25em
|
||||
h5
|
||||
+header-text
|
||||
:font-size 1em
|
||||
:font-weight bold
|
||||
:margin-bottom 1.5em
|
||||
font-size: 1em
|
||||
font-weight: bold
|
||||
margin-bottom: 1.5em
|
||||
h6
|
||||
+header-text
|
||||
:font-size 1em
|
||||
:font-weight bold
|
||||
font-size: 1em
|
||||
font-weight: bold
|
||||
h2 img, h3 img, h4 img, h5 img, h6 img
|
||||
:margin 0
|
||||
margin: 0
|
||||
p
|
||||
:margin 0 0 1.5em
|
||||
margin: 0 0 1.5em
|
||||
img.left
|
||||
+float-left
|
||||
:margin 1.5em 1.5em 1.5em 0
|
||||
:padding 0
|
||||
margin: 1.5em 1.5em 1.5em 0
|
||||
padding: 0
|
||||
img.right
|
||||
+float-right
|
||||
:margin 1.5em 0 1.5em 1.5em
|
||||
:padding 0
|
||||
margin: 1.5em 0 1.5em 1.5em
|
||||
padding: 0
|
||||
a
|
||||
:text-decoration underline
|
||||
text-decoration: underline
|
||||
+link-colors(!link_color, !link_hover_color, !link_active_color, !link_visited_color, !link_focus_color)
|
||||
blockquote
|
||||
:margin 1.5em
|
||||
:color #666
|
||||
:font-style italic
|
||||
margin: 1.5em
|
||||
color: #666
|
||||
font-style: italic
|
||||
strong
|
||||
:font-weight bold
|
||||
font-weight: bold
|
||||
em
|
||||
:font-style italic
|
||||
font-style: italic
|
||||
dfn
|
||||
:font-style italic
|
||||
:font-weight bold
|
||||
font-style: italic
|
||||
font-weight: bold
|
||||
sup, sub
|
||||
:line-height 0
|
||||
line-height: 0
|
||||
abbr, acronym
|
||||
:border-bottom 1px dotted #666
|
||||
border-bottom: 1px dotted #666
|
||||
address
|
||||
:margin 0 0 1.5em
|
||||
:font-style italic
|
||||
margin: 0 0 1.5em
|
||||
font-style: italic
|
||||
del
|
||||
:color #666
|
||||
color: #666
|
||||
pre
|
||||
:margin 1.5em 0
|
||||
:white-space pre
|
||||
margin: 1.5em 0
|
||||
white-space: pre
|
||||
pre, code, tt
|
||||
+fixed-width-text
|
||||
li ul, li ol
|
||||
:margin 0 1.5em
|
||||
margin: 0 1.5em
|
||||
ul
|
||||
:margin 0 1.5em 1.5em 1.5em
|
||||
:list-style-type disc
|
||||
margin: 0 1.5em 1.5em 1.5em
|
||||
list-style-type: disc
|
||||
ol
|
||||
:margin 0 1.5em 1.5em 1.5em
|
||||
:list-style-type decimal
|
||||
margin: 0 1.5em 1.5em 1.5em
|
||||
list-style-type: decimal
|
||||
dl
|
||||
:margin 0 0 1.5em 0
|
||||
margin: 0 0 1.5em 0
|
||||
dt
|
||||
:font-weight bold
|
||||
font-weight: bold
|
||||
dd
|
||||
:margin-left 1.5em
|
||||
margin-left: 1.5em
|
||||
table
|
||||
:margin-bottom 1.4em
|
||||
:width 100%
|
||||
margin-bottom: 1.4em
|
||||
width: 100%
|
||||
th
|
||||
:font-weight bold
|
||||
font-weight: bold
|
||||
thead th
|
||||
:background= !blueprint_table_header_color
|
||||
background= !blueprint_table_header_color
|
||||
th, td, caption
|
||||
:padding 4px 10px 4px 5px
|
||||
padding: 4px 10px 4px 5px
|
||||
tr.even td
|
||||
:background= !blueprint_table_stripe_color
|
||||
background= !blueprint_table_stripe_color
|
||||
tfoot
|
||||
:font-style italic
|
||||
font-style: italic
|
||||
caption
|
||||
:background #eee
|
||||
background: #eee
|
||||
.quiet
|
||||
+quiet
|
||||
.loud
|
||||
|
@ -7,7 +7,7 @@
|
||||
=blueprint-utilities
|
||||
// Regular clearing apply to column that should drop below previous ones.
|
||||
.clear
|
||||
:clear both
|
||||
clear: both
|
||||
// turn off text wrapping for the element.
|
||||
.nowrap
|
||||
+nowrap
|
||||
@ -16,22 +16,22 @@
|
||||
.clearfix
|
||||
+clearfix
|
||||
.small
|
||||
:font-size .8em
|
||||
:margin-bottom 1.875em
|
||||
:line-height 1.875em
|
||||
font-size: .8em
|
||||
margin-bottom: 1.875em
|
||||
line-height: 1.875em
|
||||
.large
|
||||
:font-size 1.2em
|
||||
:line-height 2.5em
|
||||
:margin-bottom 1.25em
|
||||
font-size: 1.2em
|
||||
line-height: 2.5em
|
||||
margin-bottom: 1.25em
|
||||
.first
|
||||
:margin-left 0
|
||||
:padding-left 0
|
||||
margin-left: 0
|
||||
padding-left: 0
|
||||
.last
|
||||
:margin-right 0
|
||||
:padding-right 0
|
||||
margin-right: 0
|
||||
padding-right: 0
|
||||
.top
|
||||
:margin-top 0
|
||||
:padding-top 0
|
||||
margin-top: 0
|
||||
padding-top: 0
|
||||
.bottom
|
||||
:margin-bottom 0
|
||||
:padding-bottom 0
|
||||
margin-bottom: 0
|
||||
padding-bottom: 0
|
||||
|
@ -38,12 +38,12 @@ button
|
||||
|
||||
// We can change the colors for buttons of certain classes, etc.
|
||||
a.positive, button.positive
|
||||
:color #529214
|
||||
color: #529214
|
||||
+button-hover-colors(#529214, #E6EFC2, #C6D880)
|
||||
+button-active-colors(#FFF, #529214, #529214)
|
||||
|
||||
a.negative, button.negative
|
||||
:color #D12F19
|
||||
color: #D12F19
|
||||
+button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
|
||||
+button-active-colors(#FFF, #D12F19, #D12F19)
|
||||
|
||||
|
@ -12,5 +12,5 @@ body.bp
|
||||
// the correct behavior to your main container (but not the body tag!)
|
||||
// Example:
|
||||
// .my-container
|
||||
// :text-align left
|
||||
// text-align: left
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user