Convert examples to scss.
This commit is contained in:
Chris Eppstein
parent
385ae3db82
commit
2eda8a6822
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-ie
|
||||
3
examples/blueprint_default/src/ie.scss
Normal file
3
examples/blueprint_default/src/ie.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-ie;
|
||||
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-print
|
||||
3
examples/blueprint_default/src/print.scss
Normal file
3
examples/blueprint_default/src/print.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-print;
|
||||
@ -1,8 +1,9 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint/scaffolding.sass
|
||||
@import compass/reset.sass
|
||||
@import "blueprint";
|
||||
@import "blueprint/scaffolding";
|
||||
@import "compass/reset";
|
||||
|
||||
@include blueprint;
|
||||
|
||||
+blueprint
|
||||
// Remove the scaffolding when you're ready to start doing visual design.
|
||||
// Or leave it in if you're happy with how blueprint looks out-of-the-box
|
||||
+blueprint-scaffolding
|
||||
@include blueprint-scaffolding;
|
||||
@ -1,49 +0,0 @@
|
||||
@import compass/utilities/general/float.sass
|
||||
@import blueprint/buttons.sass
|
||||
|
||||
//
|
||||
Use the following HTML code to place the buttons on your site:
|
||||
|
||||
<button type="submit" class="button positive">
|
||||
<img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
|
||||
</button>
|
||||
|
||||
<a class="button" href="/password/reset/">
|
||||
<img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
|
||||
</a>
|
||||
|
||||
<a href="#" class="button negative">
|
||||
<img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
|
||||
</a>
|
||||
|
||||
a.button
|
||||
// you can pass "left" or "right" to +anchor-button to float it in that direction
|
||||
// or you can pass no argument to leave it inline-block (cross browser safe!) within
|
||||
// the flow of your page.
|
||||
+anchor-button("left")
|
||||
// All the button color mixins take 4 optional arguments:
|
||||
// font color, background color, border color, border highlight color
|
||||
// the first three default to constants set in blueprint/buttons.sass
|
||||
// the last one defaults to a shade lighter than the border color.
|
||||
+button-colors
|
||||
+button-hover-colors
|
||||
+button-active-colors
|
||||
|
||||
button
|
||||
// The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
|
||||
+button-button("left")
|
||||
+button-colors
|
||||
+button-hover-colors
|
||||
+button-active-colors
|
||||
|
||||
// We can change the colors for buttons of certain classes, etc.
|
||||
a.positive, button.positive
|
||||
:color #529214
|
||||
+button-hover-colors(#529214, #E6EFC2, #C6D880)
|
||||
+button-active-colors(#FFF, #529214, #529214)
|
||||
|
||||
a.negative, button.negative
|
||||
:color #D12F19
|
||||
+button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
|
||||
+button-active-colors(#FFF, #D12F19, #D12F19)
|
||||
|
||||
47
examples/blueprint_plugins/src/buttons.scss
Normal file
47
examples/blueprint_plugins/src/buttons.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@import "compass/utilities/general/float";
|
||||
@import "blueprint/buttons";
|
||||
|
||||
// Use the following HTML code to place the buttons on your site:
|
||||
//
|
||||
// <button type="submit" class="button positive">
|
||||
// <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
|
||||
// </button>
|
||||
//
|
||||
// <a class="button" href="/password/reset/">
|
||||
// <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
|
||||
// </a>
|
||||
//
|
||||
// <a href="#" class="button negative">
|
||||
// <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
|
||||
// </a>
|
||||
|
||||
a.button {
|
||||
// you can pass "left" or "right" to +anchor-button to float it in that direction
|
||||
// or you can pass no argument to leave it inline-block (cross browser safe!) within
|
||||
// the flow of your page.
|
||||
@include anchor-button(left);
|
||||
// All the button color mixins take 4 optional arguments:
|
||||
// font color, background color, border color, border highlight color
|
||||
// the first three default to constants set in blueprint/buttons
|
||||
// the last one defaults to a shade lighter than the border color.
|
||||
@include button-colors;
|
||||
@include button-hover-colors;
|
||||
@include button-active-colors; }
|
||||
|
||||
button {
|
||||
// The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
|
||||
@include button-button(left);
|
||||
@include button-colors;
|
||||
@include button-hover-colors;
|
||||
@include button-active-colors; }
|
||||
|
||||
// We can change the colors for buttons of certain classes, etc.
|
||||
a.positive, button.positive {
|
||||
color: #529214;
|
||||
@include button-hover-colors(#529214, #e6efc2, #c6d880);
|
||||
@include button-active-colors(white, #529214, #529214); }
|
||||
|
||||
a.negative, button.negative {
|
||||
color: #d12f19;
|
||||
@include button-hover-colors(#d12f19, #fbe3e4, #fbc2c4);
|
||||
@include button-active-colors(white, #d12f19, #d12f19); }
|
||||
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-ie
|
||||
3
examples/blueprint_plugins/src/ie.scss
Normal file
3
examples/blueprint_plugins/src/ie.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-ie;
|
||||
@ -1,13 +1,13 @@
|
||||
@import blueprint/link_icons.sass
|
||||
@import "blueprint/link-icons";
|
||||
|
||||
// This turns link icons on for all links. You can change the scoping selector from
|
||||
// body to something more specific if you prefer.
|
||||
body
|
||||
+link-icons
|
||||
body {
|
||||
@include link-icons;
|
||||
// Use this class if a link gets an icon when it shouldn't.
|
||||
a.noicon
|
||||
+no-link-icon
|
||||
a.noicon {
|
||||
@include no-link-icon; }
|
||||
// Not all links have a url structure that can be detected,
|
||||
// So you can set them explicitly yourself like so:
|
||||
a#this-is-a-pdf-link
|
||||
+link-icon("pdf.png")
|
||||
a#this-is-a-pdf-link {
|
||||
@include link-icon(unquote("pdf.png")); } }
|
||||
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-print
|
||||
3
examples/blueprint_plugins/src/print.scss
Normal file
3
examples/blueprint_plugins/src/print.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-print;
|
||||
@ -1,13 +0,0 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint/fancy_type.sass
|
||||
@import blueprint/scaffolding.sass
|
||||
@import blueprint/rtl.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
|
||||
+blueprint
|
||||
+rtl-typography
|
||||
+fancy-type
|
||||
// Remove the scaffolding when you're ready to start doing visual design.
|
||||
// Or leave it in if you're happy with how blueprint looks out-of-the-box
|
||||
+blueprint-scaffolding
|
||||
15
examples/blueprint_plugins/src/rtl_screen.scss
Normal file
15
examples/blueprint_plugins/src/rtl_screen.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@import "blueprint";
|
||||
@import "blueprint/fancy-type";
|
||||
@import "blueprint/scaffolding";
|
||||
@import "blueprint/rtl";
|
||||
@import "compass/reset";
|
||||
|
||||
@include blueprint;
|
||||
|
||||
@include rtl-typography;
|
||||
|
||||
@include fancy-type;
|
||||
|
||||
// Remove the scaffolding when you're ready to start doing visual design.
|
||||
// Or leave it in if you're happy with how blueprint looks out-of-the-box
|
||||
@include blueprint-scaffolding;
|
||||
@ -1,11 +0,0 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint/fancy_type.sass
|
||||
@import blueprint/scaffolding.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
|
||||
+blueprint
|
||||
+fancy-type
|
||||
// Remove the scaffolding when you're ready to start doing visual design.
|
||||
// Or leave it in if you're happy with how blueprint looks out-of-the-box
|
||||
+blueprint-scaffolding
|
||||
12
examples/blueprint_plugins/src/screen.scss
Normal file
12
examples/blueprint_plugins/src/screen.scss
Normal file
@ -0,0 +1,12 @@
|
||||
@import "blueprint";
|
||||
@import "blueprint/fancy-type";
|
||||
@import "blueprint/scaffolding";
|
||||
@import "compass/reset";
|
||||
|
||||
@include blueprint;
|
||||
|
||||
@include fancy-type;
|
||||
|
||||
// Remove the scaffolding when you're ready to start doing visual design.
|
||||
// Or leave it in if you're happy with how blueprint looks out-of-the-box
|
||||
@include blueprint-scaffolding;
|
||||
@ -1,4 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
body.bp
|
||||
+blueprint-ie(true)
|
||||
4
examples/blueprint_scoped/src/ie.scss
Normal file
4
examples/blueprint_scoped/src/ie.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import "blueprint";
|
||||
|
||||
body.bp {
|
||||
@include blueprint-ie(true); }
|
||||
@ -1,4 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
body.bp
|
||||
+blueprint-print(true)
|
||||
4
examples/blueprint_scoped/src/print.scss
Normal file
4
examples/blueprint_scoped/src/print.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import "blueprint";
|
||||
|
||||
body.bp {
|
||||
@include blueprint-print(true); }
|
||||
@ -1,5 +0,0 @@
|
||||
@import blueprint.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
body.bp
|
||||
+blueprint(true)
|
||||
5
examples/blueprint_scoped/src/screen.scss
Normal file
5
examples/blueprint_scoped/src/screen.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import "blueprint";
|
||||
@import "compass/reset";
|
||||
|
||||
body.bp {
|
||||
@include blueprint(true); }
|
||||
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-ie
|
||||
3
examples/blueprint_scoped_form/src/ie.scss
Normal file
3
examples/blueprint_scoped_form/src/ie.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-ie;
|
||||
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-print
|
||||
3
examples/blueprint_scoped_form/src/print.scss
Normal file
3
examples/blueprint_scoped_form/src/print.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-print;
|
||||
@ -1,10 +0,0 @@
|
||||
@import blueprint.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
+blueprint-grid
|
||||
+blueprint-typography
|
||||
+blueprint-utilities
|
||||
+blueprint-debug
|
||||
+blueprint-interaction
|
||||
form.blueprint
|
||||
+blueprint-form
|
||||
15
examples/blueprint_scoped_form/src/screen.scss
Normal file
15
examples/blueprint_scoped_form/src/screen.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@import "blueprint";
|
||||
@import "compass/reset";
|
||||
|
||||
@include blueprint-grid;
|
||||
|
||||
@include blueprint-typography;
|
||||
|
||||
@include blueprint-utilities;
|
||||
|
||||
@include blueprint-debug;
|
||||
|
||||
@include blueprint-interaction;
|
||||
|
||||
form.blueprint {
|
||||
@include blueprint-form; }
|
||||
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-ie
|
||||
3
examples/blueprint_semantic/src/ie.scss
Normal file
3
examples/blueprint_semantic/src/ie.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-ie;
|
||||
@ -1,69 +0,0 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint/fancy_type.sass
|
||||
@import blueprint/scaffolding.sass
|
||||
@import blueprint/liquid.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
.container
|
||||
+container
|
||||
|
||||
body.blueprint
|
||||
+blueprint-typography(true)
|
||||
+blueprint-scaffolding-body
|
||||
hr
|
||||
+colruler
|
||||
hr.space
|
||||
+colspacer
|
||||
img#w3c
|
||||
:margin-top 0
|
||||
:padding-top 0
|
||||
|
||||
body#index
|
||||
#page-header
|
||||
+span(6)
|
||||
#files-header
|
||||
+span(8)
|
||||
#description-header
|
||||
+span(10)
|
||||
#info
|
||||
+box
|
||||
ul
|
||||
:margin-bottom 0
|
||||
:padding-bottom 0
|
||||
|
||||
body#sample
|
||||
+fancy-paragraphs
|
||||
h2
|
||||
+alt
|
||||
#first-box
|
||||
+column(7)
|
||||
+colborder
|
||||
#another-box
|
||||
+column(8)
|
||||
+colborder
|
||||
#aligned-box
|
||||
+column(7, true)
|
||||
#main
|
||||
+column(15)
|
||||
+prepend(1)
|
||||
+colborder
|
||||
img#test
|
||||
+pull(1)
|
||||
:margin-top 0
|
||||
:padding-top 0
|
||||
em.caps
|
||||
+reset-font
|
||||
+caps
|
||||
#nested-1
|
||||
+column(7)
|
||||
+colborder
|
||||
#nested-2
|
||||
+column(7, true)
|
||||
#sidebar
|
||||
+column(7, true)
|
||||
h3
|
||||
em
|
||||
+reset-font
|
||||
+alt
|
||||
#parting-thought
|
||||
+alt
|
||||
69
examples/blueprint_semantic/src/liquid.scss
Normal file
69
examples/blueprint_semantic/src/liquid.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@import "blueprint";
|
||||
@import "blueprint/fancy-type";
|
||||
@import "blueprint/scaffolding";
|
||||
@import "blueprint/liquid";
|
||||
@import "compass/reset";
|
||||
|
||||
.container {
|
||||
@include container; }
|
||||
|
||||
body.blueprint {
|
||||
@include blueprint-typography(true);
|
||||
@include blueprint-scaffolding-body;
|
||||
hr {
|
||||
@include colruler; }
|
||||
hr.space {
|
||||
@include colspacer; }
|
||||
img#w3c {
|
||||
margin-top: 0;
|
||||
padding-top: 0; } }
|
||||
|
||||
body#index {
|
||||
#page-header {
|
||||
@include span(6); }
|
||||
#files-header {
|
||||
@include span(8); }
|
||||
#description-header {
|
||||
@include span(10); }
|
||||
#info {
|
||||
@include box;
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0; } } }
|
||||
|
||||
body#sample {
|
||||
@include fancy-paragraphs;
|
||||
h2 {
|
||||
@include alt; }
|
||||
#first-box {
|
||||
@include column(7);
|
||||
@include colborder; }
|
||||
#another-box {
|
||||
@include column(8);
|
||||
@include colborder; }
|
||||
#aligned-box {
|
||||
@include column(7, true); }
|
||||
#main {
|
||||
@include column(15);
|
||||
@include prepend(1);
|
||||
@include colborder;
|
||||
img#test {
|
||||
@include pull(1);
|
||||
margin-top: 0;
|
||||
padding-top: 0; }
|
||||
em.caps {
|
||||
@include reset-font;
|
||||
@include caps; }
|
||||
#nested-1 {
|
||||
@include column(7);
|
||||
@include colborder; }
|
||||
#nested-2 {
|
||||
@include column(7, true); } }
|
||||
#sidebar {
|
||||
@include column(7, true);
|
||||
h3 {
|
||||
em {
|
||||
@include reset-font;
|
||||
@include alt; } } }
|
||||
#parting-thought {
|
||||
@include alt; } }
|
||||
@ -1,3 +0,0 @@
|
||||
@import blueprint.sass
|
||||
|
||||
+blueprint-print
|
||||
3
examples/blueprint_semantic/src/print.scss
Normal file
3
examples/blueprint_semantic/src/print.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "blueprint";
|
||||
|
||||
@include blueprint-print;
|
||||
@ -1,70 +0,0 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint/fancy_type.sass
|
||||
@import blueprint/scaffolding.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
body.blueprint
|
||||
+blueprint-typography(true)
|
||||
+blueprint-scaffolding-body
|
||||
.container
|
||||
+container
|
||||
.showgrid
|
||||
:background= inline_image("grid.png")
|
||||
hr
|
||||
+colruler
|
||||
hr.space
|
||||
+colspacer
|
||||
|
||||
img#w3c
|
||||
:margin-top 0
|
||||
:padding-top 0
|
||||
|
||||
body#index
|
||||
#page-header
|
||||
+span(6)
|
||||
#files-header
|
||||
+span(8)
|
||||
#description-header
|
||||
+span(10)
|
||||
#info
|
||||
+box
|
||||
ul
|
||||
:margin-bottom 0
|
||||
:padding-bottom 0
|
||||
|
||||
body#sample
|
||||
+fancy-paragraphs
|
||||
h2
|
||||
+alt
|
||||
#first-box
|
||||
+column(7)
|
||||
+colborder
|
||||
#another-box
|
||||
+column(8)
|
||||
+colborder
|
||||
#aligned-box
|
||||
+column(7, true)
|
||||
#main
|
||||
+column(15)
|
||||
+prepend(1)
|
||||
+colborder
|
||||
img#test
|
||||
+pull(1)
|
||||
:margin-top 0
|
||||
:padding-top 0
|
||||
em.caps
|
||||
+reset-font
|
||||
+caps
|
||||
#nested-1
|
||||
+column(7)
|
||||
+colborder
|
||||
#nested-2
|
||||
+column(7, true)
|
||||
#sidebar
|
||||
+column(7, true)
|
||||
h3
|
||||
em
|
||||
+reset-font
|
||||
+alt
|
||||
#parting-thought
|
||||
+alt
|
||||
69
examples/blueprint_semantic/src/screen.scss
Normal file
69
examples/blueprint_semantic/src/screen.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@import "blueprint";
|
||||
@import "blueprint/fancy-type";
|
||||
@import "blueprint/scaffolding";
|
||||
@import "compass/reset";
|
||||
|
||||
body.blueprint {
|
||||
@include blueprint-typography(true);
|
||||
@include blueprint-scaffolding-body;
|
||||
.container {
|
||||
@include container; }
|
||||
.showgrid {
|
||||
background: inline_image(unquote("grid.png")); }
|
||||
hr {
|
||||
@include colruler; }
|
||||
hr.space {
|
||||
@include colspacer; }
|
||||
img#w3c {
|
||||
margin-top: 0;
|
||||
padding-top: 0; } }
|
||||
|
||||
body#index {
|
||||
#page-header {
|
||||
@include span(6); }
|
||||
#files-header {
|
||||
@include span(8); }
|
||||
#description-header {
|
||||
@include span(10); }
|
||||
#info {
|
||||
@include box;
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0; } } }
|
||||
|
||||
body#sample {
|
||||
@include fancy-paragraphs;
|
||||
h2 {
|
||||
@include alt; }
|
||||
#first-box {
|
||||
@include column(7);
|
||||
@include colborder; }
|
||||
#another-box {
|
||||
@include column(8);
|
||||
@include colborder; }
|
||||
#aligned-box {
|
||||
@include column(7, true); }
|
||||
#main {
|
||||
@include column(15);
|
||||
@include prepend(1);
|
||||
@include colborder;
|
||||
img#test {
|
||||
@include pull(1);
|
||||
margin-top: 0;
|
||||
padding-top: 0; }
|
||||
em.caps {
|
||||
@include reset-font;
|
||||
@include caps; }
|
||||
#nested-1 {
|
||||
@include column(7);
|
||||
@include colborder; }
|
||||
#nested-2 {
|
||||
@include column(7, true); } }
|
||||
#sidebar {
|
||||
@include column(7, true);
|
||||
h3 {
|
||||
em {
|
||||
@include reset-font;
|
||||
@include alt; } } }
|
||||
#parting-thought {
|
||||
@include alt; } }
|
||||
@ -1,47 +0,0 @@
|
||||
=compass(!s)
|
||||
:position relative
|
||||
:width= 4 * !s
|
||||
:height= 4 * !s
|
||||
:font-size 24px
|
||||
:font-family "Academy Engraved LET", "Papyrus"
|
||||
.n, .s, .e, .w
|
||||
:position absolute
|
||||
:width= !s
|
||||
:height= !s
|
||||
:text-align center
|
||||
:vertical-align middle
|
||||
.w
|
||||
:left 0px
|
||||
.n.w, .s.w
|
||||
:left= 0.5 * !s
|
||||
.n, .s
|
||||
:left= 1.5 * !s
|
||||
.n.e, .s.e
|
||||
:left= 2.5 * !s
|
||||
.e
|
||||
:left= 3 * !s
|
||||
.n
|
||||
:top 0px
|
||||
.n.w, .n.e
|
||||
:top= 0.5 * !s
|
||||
.w, .e
|
||||
:top= 1.5 * !s
|
||||
.s.w, .s.e
|
||||
:top= 2.5 * !s
|
||||
.s
|
||||
:top= 3 * !s
|
||||
|
||||
.compass
|
||||
:margin 1em auto
|
||||
+compass(4em)
|
||||
.n, .s, .e, .w
|
||||
p
|
||||
:margin
|
||||
:top 1.5em
|
||||
:bottom 1.5em
|
||||
.n.w, .s.w, .n.e, .s.e
|
||||
p
|
||||
:margin
|
||||
:top 1em
|
||||
:bottom 1em
|
||||
|
||||
46
examples/compass/src/compass.scss
Normal file
46
examples/compass/src/compass.scss
Normal file
@ -0,0 +1,46 @@
|
||||
@mixin compass($s) {
|
||||
position: relative;
|
||||
width: 4 * $s;
|
||||
height: 4 * $s;
|
||||
font-size: 24px;
|
||||
font-family: "Academy Engraved LET", "Papyrus";
|
||||
.n, .s, .e, .w {
|
||||
position: absolute;
|
||||
width: $s;
|
||||
height: $s;
|
||||
text-align: center;
|
||||
vertical-align: middle; }
|
||||
.w {
|
||||
left: 0px; }
|
||||
.n.w, .s.w {
|
||||
left: 0.5 * $s; }
|
||||
.n, .s {
|
||||
left: 1.5 * $s; }
|
||||
.n.e, .s.e {
|
||||
left: 2.5 * $s; }
|
||||
.e {
|
||||
left: 3 * $s; }
|
||||
.n {
|
||||
top: 0px; }
|
||||
.n.w, .n.e {
|
||||
top: 0.5 * $s; }
|
||||
.w, .e {
|
||||
top: 1.5 * $s; }
|
||||
.s.w, .s.e {
|
||||
top: 2.5 * $s; }
|
||||
.s {
|
||||
top: 3 * $s; } }
|
||||
|
||||
.compass {
|
||||
margin: 1em auto;
|
||||
@include compass(4em);
|
||||
.n, .s, .e, .w {
|
||||
p {
|
||||
margin: {
|
||||
top: 1.5em;
|
||||
bottom: 1.5em; }; } }
|
||||
.n.w, .s.w, .n.e, .s.e {
|
||||
p {
|
||||
margin: {
|
||||
top: 1em;
|
||||
bottom: 1em; }; } } }
|
||||
@ -1,11 +0,0 @@
|
||||
@import compass/reset.sass
|
||||
@import compass/layout.sass
|
||||
|
||||
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
|
||||
|
||||
#header
|
||||
:background #999
|
||||
:height 72px
|
||||
|
||||
#footer
|
||||
:background #ccc
|
||||
11
examples/compass/src/sticky_footer.scss
Normal file
11
examples/compass/src/sticky_footer.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "compass/reset";
|
||||
@import "compass/layout";
|
||||
|
||||
@include sticky-footer(72px, unquote("#layout"), unquote("#layout_footer"), unquote("#footer"));
|
||||
|
||||
#header {
|
||||
background: #999999;
|
||||
height: 72px; }
|
||||
|
||||
#footer {
|
||||
background: #cccccc; }
|
||||
@ -1,108 +0,0 @@
|
||||
@import compass/reset.sass
|
||||
@import compass/utilities.sass
|
||||
@import yui/modules/base.sass
|
||||
@import blueprint/grid.sass
|
||||
@import blueprint/scaffolding.sass
|
||||
@import compass/utilities/text/ellipsis.sass
|
||||
|
||||
html
|
||||
+yui-base
|
||||
|
||||
h2
|
||||
:margin-top 0
|
||||
:border-bottom 2px solid #777
|
||||
|
||||
#utilities
|
||||
+container
|
||||
|
||||
.example
|
||||
:border 2px solid #ccc
|
||||
:padding 4px
|
||||
|
||||
#links
|
||||
+column(8)
|
||||
|
||||
.hover a
|
||||
+hover-link
|
||||
.colored a
|
||||
+link-colors(#C00, #C0C, #700, #707, #777)
|
||||
.unstyled
|
||||
:color #333
|
||||
a
|
||||
+unstyled-link
|
||||
.mixin
|
||||
:font-family monospace
|
||||
:border
|
||||
:width 1px
|
||||
:style solid
|
||||
:border-color #ccc
|
||||
:border-color -moz-use-text-color
|
||||
:padding 2px
|
||||
:line-height 22px
|
||||
:white-space nowrap
|
||||
|
||||
#tag-cloud
|
||||
+column(8)
|
||||
ol
|
||||
:margin 0
|
||||
+inline-list
|
||||
+tag-cloud(1em)
|
||||
li
|
||||
+no-bullets
|
||||
|
||||
#lists
|
||||
+column(8, true)
|
||||
ul.inline
|
||||
+inline-list
|
||||
ul.comma-delimited
|
||||
+comma-delimited-list
|
||||
ol.pretty
|
||||
+pretty-bullets("blue_arrow.gif", 5px, 7px, 18px)
|
||||
|
||||
#tables
|
||||
+column(16)
|
||||
table.alternating
|
||||
:width 100%
|
||||
+alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
|
||||
+table-scaffolding
|
||||
+outer-table-borders(2px, #151A99)
|
||||
+inner-table-borders(1px, #151A99)
|
||||
|
||||
#ellipsis
|
||||
+column(8, true)
|
||||
td
|
||||
width: 50%
|
||||
+ellipsis
|
||||
|
||||
#floats
|
||||
+column(16)
|
||||
.clearfix-example
|
||||
:background #ddd
|
||||
:border 2px solid black
|
||||
:text-align center
|
||||
+clearfix
|
||||
.float-left-example, .float-right-example
|
||||
:border 1px solid black
|
||||
:padding 10px
|
||||
:margin 0 20px
|
||||
:width 25%
|
||||
:background #F9E5A7
|
||||
.float-left-example
|
||||
+float-left
|
||||
.float-right-example
|
||||
+float-right
|
||||
.pie-clearfix-example
|
||||
:background #ddd
|
||||
:border 2px solid black
|
||||
:text-align center
|
||||
:position relative
|
||||
+pie-clearfix
|
||||
.positioned-example
|
||||
:display block
|
||||
:position absolute
|
||||
:left -10px
|
||||
:top -10px
|
||||
:font-size 10px
|
||||
:width 10em
|
||||
:background #ccf
|
||||
:border 1px solid black
|
||||
108
examples/compass/src/utilities.scss
Normal file
108
examples/compass/src/utilities.scss
Normal file
@ -0,0 +1,108 @@
|
||||
@import "compass/reset";
|
||||
@import "compass/utilities";
|
||||
@import "yui/modules/base";
|
||||
@import "blueprint/grid";
|
||||
@import "blueprint/scaffolding";
|
||||
@import "compass/utilities/text/ellipsis";
|
||||
|
||||
html {
|
||||
@include yui-base; }
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
border-bottom: 2px solid #777777; }
|
||||
|
||||
#utilities {
|
||||
@include container; }
|
||||
|
||||
.example {
|
||||
border: 2px solid #cccccc;
|
||||
padding: 4px; }
|
||||
|
||||
#links {
|
||||
@include column(8);
|
||||
.hover a {
|
||||
@include hover-link; }
|
||||
.colored a {
|
||||
@include link-colors(#cc0000, #cc00cc, #770000, #770077, #777777); }
|
||||
.unstyled {
|
||||
color: #333333;
|
||||
a {
|
||||
@include unstyled-link; } } }
|
||||
|
||||
.mixin {
|
||||
font-family: monospace;
|
||||
border: {
|
||||
width: 1px;
|
||||
style: solid; };
|
||||
border-color: #cccccc;
|
||||
border-color: -moz-use-text-color;
|
||||
padding: 2px;
|
||||
line-height: 22px;
|
||||
white-space: nowrap; }
|
||||
|
||||
#tag-cloud {
|
||||
@include column(8);
|
||||
ol {
|
||||
margin: 0;
|
||||
@include inline-list;
|
||||
@include tag-cloud(1em);
|
||||
li {
|
||||
@include no-bullets; } } }
|
||||
|
||||
#lists {
|
||||
@include column(8, true);
|
||||
ul.inline {
|
||||
@include inline-list; }
|
||||
ul.comma-delimited {
|
||||
@include comma-delimited-list; }
|
||||
ol.pretty {
|
||||
@include pretty-bullets(unquote("blue_arrow.gif"), 5px, 7px, 18px); } }
|
||||
|
||||
#tables {
|
||||
@include column(16);
|
||||
table.alternating {
|
||||
width: 100%;
|
||||
@include alternating-rows-and-columns(#f9e5a7, #cefbb3, #222222);
|
||||
@include table-scaffolding;
|
||||
@include outer-table-borders(2px, #151a99);
|
||||
@include inner-table-borders(1px, #151a99); } }
|
||||
|
||||
#ellipsis {
|
||||
@include column(8, true);
|
||||
td {
|
||||
width: 50%;
|
||||
@include ellipsis; } }
|
||||
|
||||
#floats {
|
||||
@include column(16);
|
||||
.clearfix-example {
|
||||
background: #dddddd;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
@include clearfix; }
|
||||
.float-left-example, .float-right-example {
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
margin: 0 20px;
|
||||
width: 25%;
|
||||
background: #f9e5a7; }
|
||||
.float-left-example {
|
||||
@include float-left; }
|
||||
.float-right-example {
|
||||
@include float-right; }
|
||||
.pie-clearfix-example {
|
||||
background: #dddddd;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
@include pie-clearfix;
|
||||
.positioned-example {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -10px;
|
||||
font-size: 10px;
|
||||
width: 10em;
|
||||
background: #ccccff;
|
||||
border: 1px solid black; } } }
|
||||
@ -1,14 +0,0 @@
|
||||
@import compass/utilities.sass
|
||||
@import compass/css3.sass
|
||||
|
||||
=container
|
||||
+clearfix
|
||||
overflow: auto
|
||||
|
||||
=row
|
||||
+clearfix
|
||||
|
||||
=column
|
||||
float: left
|
||||
+box-sizing("border-box")
|
||||
|
||||
13
examples/css3/src/_base.scss
Normal file
13
examples/css3/src/_base.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "compass/utilities";
|
||||
@import "compass/css3";
|
||||
|
||||
@mixin container {
|
||||
@include clearfix;
|
||||
overflow: auto; }
|
||||
|
||||
@mixin row {
|
||||
@include clearfix; }
|
||||
|
||||
@mixin column {
|
||||
float: left;
|
||||
@include box-sizing(border-box); }
|
||||
@ -1,7 +0,0 @@
|
||||
@import compass/css3.sass
|
||||
|
||||
+font-face("Angelina", font_files("angelina.ttf", "truetype"))
|
||||
h1
|
||||
font-family: "Angelina"
|
||||
font-size: 5em
|
||||
|
||||
7
examples/css3/src/fancy-fonts.scss
Normal file
7
examples/css3/src/fancy-fonts.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import "compass/css3";
|
||||
|
||||
@include font-face(Angelina, font_files(unquote("angelina.ttf"), truetype));
|
||||
|
||||
h1 {
|
||||
font-family: "Angelina";
|
||||
font-size: 5em; }
|
||||
@ -1,69 +0,0 @@
|
||||
@import compass/css3.sass
|
||||
|
||||
#gradient
|
||||
width: 200px
|
||||
height: 100px
|
||||
border: 1px solid #777
|
||||
|
||||
thead th
|
||||
min-height: 50px
|
||||
min-width: 100px
|
||||
+text-shadow(#fff)
|
||||
th.linear
|
||||
+linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
|
||||
th.radial
|
||||
+radial-gradient(color_stops(#fff, #f00 20px, #ff0 30px, #0f0 40px))
|
||||
tr.default
|
||||
td.linear
|
||||
+linear-gradient(color_stops(#c00, #00c))
|
||||
td.radial
|
||||
+radial-gradient(color_stops(#c00, #00c))
|
||||
td.linear-code:before
|
||||
content: "+linear-gradient(color_stops(#c00, #00c))"
|
||||
td.radial-code:before
|
||||
content: "+radial-gradient(color_stops(#c00, #00c))"
|
||||
tr.top-left
|
||||
td.linear
|
||||
+linear-gradient(color_stops(#c00, #00c), "top left")
|
||||
td.radial
|
||||
+radial-gradient(color_stops(#c00, #00c), "top left")
|
||||
td.linear-code:before
|
||||
content: "+linear-gradient(color_stops(#c00, #00c), \"top left\")"
|
||||
td.radial-code:before
|
||||
content: "+radial-gradient(color_stops(#c00, #00c), \"top left\")"
|
||||
tr.bottom-right
|
||||
td.linear
|
||||
+linear-gradient(color_stops(#c00, #00c), "bottom right")
|
||||
td.radial
|
||||
+radial-gradient(color_stops(#c00, #00c), "bottom right")
|
||||
td.linear-code:before
|
||||
content: "+linear-gradient(color_stops(#c00, #00c), \"bottom right\")"
|
||||
td.radial-code:before
|
||||
content: "+radial-gradient(color_stops(#c00, #00c), \"bottom right\")"
|
||||
tr.three-color
|
||||
td.linear
|
||||
+linear-gradient(color_stops(#c00, #fff, #00c))
|
||||
td.radial
|
||||
+radial-gradient(color_stops(#c00, #fff, #00c 50px))
|
||||
td.linear-code:before
|
||||
content: "+linear-gradient(color_stops(#c00, #fff, #00c))"
|
||||
td.radial-code:before
|
||||
content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"
|
||||
tr.four-color
|
||||
td.linear
|
||||
+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))
|
||||
td.radial
|
||||
+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))
|
||||
td.linear-code:before
|
||||
content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"
|
||||
td.radial-code:before
|
||||
content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"
|
||||
tr.filled-in
|
||||
td.linear
|
||||
+linear-gradient(color_stops(#c00 33%, #00c 66%))
|
||||
td.radial
|
||||
+radial-gradient(color_stops(#c00 25px, #00c 75px))
|
||||
td.linear-code:before
|
||||
content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"
|
||||
td.radial-code:before
|
||||
content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"
|
||||
77
examples/css3/src/gradients.scss
Normal file
77
examples/css3/src/gradients.scss
Normal file
@ -0,0 +1,77 @@
|
||||
@import "compass/css3";
|
||||
|
||||
#gradient {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border: 1px solid #777777; }
|
||||
|
||||
thead th {
|
||||
min-height: 50px;
|
||||
min-width: 100px;
|
||||
@include text-shadow(white); }
|
||||
|
||||
th.linear {
|
||||
@include linear-gradient(color_stops(white, red 50%, yellow 75%, lime)); }
|
||||
|
||||
th.radial {
|
||||
@include radial-gradient(color_stops(white, red 20px, yellow 30px, lime 40px)); }
|
||||
|
||||
tr.default {
|
||||
td.linear {
|
||||
@include linear-gradient(color_stops(#cc0000, #0000cc)); }
|
||||
td.radial {
|
||||
@include radial-gradient(color_stops(#cc0000, #0000cc)); }
|
||||
td.linear-code:before {
|
||||
content: "+linear-gradient(color_stops(#c00, #00c))"; }
|
||||
td.radial-code:before {
|
||||
content: "+radial-gradient(color_stops(#c00, #00c))"; } }
|
||||
|
||||
tr.top-left {
|
||||
td.linear {
|
||||
@include linear-gradient(color_stops(#cc0000, #0000cc), unquote("top left")); }
|
||||
td.radial {
|
||||
@include radial-gradient(color_stops(#cc0000, #0000cc), unquote("top left")); }
|
||||
td.linear-code:before {
|
||||
content: '+linear-gradient(color_stops(#c00, #00c), "top left")'; }
|
||||
td.radial-code:before {
|
||||
content: '+radial-gradient(color_stops(#c00, #00c), "top left")'; } }
|
||||
|
||||
tr.bottom-right {
|
||||
td.linear {
|
||||
@include linear-gradient(color_stops(#cc0000, #0000cc), unquote("bottom right")); }
|
||||
td.radial {
|
||||
@include radial-gradient(color_stops(#cc0000, #0000cc), unquote("bottom right")); }
|
||||
td.linear-code:before {
|
||||
content: '+linear-gradient(color_stops(#c00, #00c), "bottom right")'; }
|
||||
td.radial-code:before {
|
||||
content: '+radial-gradient(color_stops(#c00, #00c), "bottom right")'; } }
|
||||
|
||||
tr.three-color {
|
||||
td.linear {
|
||||
@include linear-gradient(color_stops(#cc0000, white, #0000cc)); }
|
||||
td.radial {
|
||||
@include radial-gradient(color_stops(#cc0000, white, #0000cc 50px)); }
|
||||
td.linear-code:before {
|
||||
content: "+linear-gradient(color_stops(#c00, #fff, #00c))"; }
|
||||
td.radial-code:before {
|
||||
content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"; } }
|
||||
|
||||
tr.four-color {
|
||||
td.linear {
|
||||
@include linear-gradient(color_stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); }
|
||||
td.radial {
|
||||
@include radial-gradient(color_stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); }
|
||||
td.linear-code:before {
|
||||
content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"; }
|
||||
td.radial-code:before {
|
||||
content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } }
|
||||
|
||||
tr.filled-in {
|
||||
td.linear {
|
||||
@include linear-gradient(color_stops(#cc0000 33%, #0000cc 66%)); }
|
||||
td.radial {
|
||||
@include radial-gradient(color_stops(#cc0000 25px, #0000cc 75px)); }
|
||||
td.linear-code:before {
|
||||
content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"; }
|
||||
td.radial-code:before {
|
||||
content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"; } }
|
||||
@ -1,108 +0,0 @@
|
||||
@import blueprint/reset.sass
|
||||
@import base.sass
|
||||
|
||||
!border_color = #aaa
|
||||
|
||||
#container
|
||||
+container
|
||||
|
||||
!min_width = 340px
|
||||
.examples
|
||||
margin-bottom: 1em
|
||||
+row
|
||||
min-width= !min_width * 3 + 20px * 2 + 20px
|
||||
|
||||
h1
|
||||
text-align: center
|
||||
|
||||
.example, .gutter
|
||||
min-height: 21em
|
||||
|
||||
.example
|
||||
+column
|
||||
width: 30%
|
||||
min-width= !min_width
|
||||
border: 4px solid #{!border_color}
|
||||
+border-radius(0.667em)
|
||||
+box-shadow(darken(!border_color, 40), 5px, 5px, 2px)
|
||||
margin-bottom: 1em
|
||||
h2
|
||||
font-family: Angelina
|
||||
margin: 0.5em 0 1em
|
||||
text-align: center
|
||||
|
||||
.gutter
|
||||
display: block
|
||||
float: left
|
||||
width: 2.5%
|
||||
min-width: 20px
|
||||
content: " "
|
||||
|
||||
.example
|
||||
+linear-gradient(color_stops(#fff, #ccc))
|
||||
pre
|
||||
padding: 1em
|
||||
margin: 1em
|
||||
color: white
|
||||
text-shadow: 1px 1px 2px #000
|
||||
font-weight: bold
|
||||
#background-clip
|
||||
pre
|
||||
background: transparent #{image_url("fresh-peas.jpg")} no-repeat
|
||||
border: 1em solid rgba(255,0,0,.25)
|
||||
.padding-box
|
||||
+background-clip("padding-box")
|
||||
+background-origin("padding-box")
|
||||
.border-box
|
||||
+background-clip("border-box")
|
||||
+background-origin("border-box")
|
||||
|
||||
#background-size
|
||||
pre
|
||||
background: transparent #{image_url("fresh-peas.jpg")} no-repeat
|
||||
border: 1em solid #{mix(red, white, .5)}
|
||||
border: 1em solid rgba(255,0,0,.25)
|
||||
.top-left
|
||||
+background-size(50% 50%)
|
||||
.centered
|
||||
+background-size(50% 50%)
|
||||
background-position: center center
|
||||
|
||||
#gradients
|
||||
.horizontal
|
||||
+linear-gradient(color_stops(#d92626, #2626d9), "left")
|
||||
.vertical
|
||||
+linear-gradient(color_stops(#d92626, #2626d9))
|
||||
.diagonal
|
||||
+linear-gradient(color_stops(#d92626, #2626d9), "right top")
|
||||
.radial
|
||||
/* +radial-gradient(color_stops(#d92626 0, #2626d9 1))
|
||||
+radial-gradient(color_stops(#d92626 10px, #2626d9 150px))
|
||||
// +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
|
||||
// background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
|
||||
// background-color: #2626d9
|
||||
.radial-1
|
||||
// A default radial gradient:
|
||||
/* +radial-gradient(color_stops(#ddd, #aaa))
|
||||
+radial-gradient(color_stops(#ddd, #aaa))
|
||||
.radial-2
|
||||
// A centered gradient
|
||||
/* +radial-gradient(color_stops(#ddd, #aaa))
|
||||
+radial-gradient(color_stops(#ddd, #aaa))
|
||||
.radial-3
|
||||
// A centered radial gradient at the top
|
||||
/* +radial-gradient(color_stops(#ddd, #aaa), "top center")
|
||||
+radial-gradient(color_stops(#ddd, #aaa), "top center")
|
||||
.radial-4
|
||||
// A centered radial gradient with fixed color stops
|
||||
/* +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
|
||||
+radial-gradient(color_stops(#ddd 20px, #aaa 50px))
|
||||
.radial-5
|
||||
// A centered gradient with several color stops
|
||||
/* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00))
|
||||
+radial-gradient(color_stops(#ddd 20px, #aaa 50%, #c00 200px))
|
||||
.radial-6
|
||||
// A centered gradient with color stops
|
||||
/* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c))
|
||||
+radial-gradient(color_stops(#0c0 0px, #ddd 20px, #aaa 50px, #00c 100px))
|
||||
|
||||
110
examples/css3/src/main.scss
Normal file
110
examples/css3/src/main.scss
Normal file
@ -0,0 +1,110 @@
|
||||
@import "blueprint/reset";
|
||||
@import "base";
|
||||
|
||||
$border_color: #aaaaaa;
|
||||
|
||||
#container {
|
||||
@include container; }
|
||||
|
||||
$min_width: 340px;
|
||||
|
||||
.examples {
|
||||
margin-bottom: 1em;
|
||||
@include row;
|
||||
min-width: $min_width * 3 + 20px * 2 + 20px; }
|
||||
|
||||
h1 {
|
||||
text-align: center; }
|
||||
|
||||
.example, .gutter {
|
||||
min-height: 21em; }
|
||||
|
||||
.example {
|
||||
@include column;
|
||||
width: 30%;
|
||||
min-width: $min_width;
|
||||
border: 4px solid #{$border_color};
|
||||
@include border-radius(0.667em);
|
||||
@include box-shadow(darken($border_color, 40), 5px, 5px, 2px);
|
||||
margin-bottom: 1em;
|
||||
h2 {
|
||||
font-family: Angelina;
|
||||
margin: 0.5em 0 1em;
|
||||
text-align: center; } }
|
||||
|
||||
.gutter {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 2.5%;
|
||||
min-width: 20px;
|
||||
content: " "; }
|
||||
|
||||
.example {
|
||||
@include linear-gradient(color_stops(white, #cccccc));
|
||||
pre {
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
color: white;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
font-weight: bold; } }
|
||||
|
||||
#background-clip {
|
||||
pre {
|
||||
background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
|
||||
border: 1em solid rgba(255, 0, 0, 0.25); }
|
||||
.padding-box {
|
||||
@include background-clip(padding-box);
|
||||
@include background-origin(padding-box); }
|
||||
.border-box {
|
||||
@include background-clip(border-box);
|
||||
@include background-origin(border-box); } }
|
||||
|
||||
#background-size {
|
||||
pre {
|
||||
background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
|
||||
border: 1em solid #{mix(red, white, 0.5)};
|
||||
border: 1em solid rgba(255, 0, 0, 0.25); }
|
||||
.top-left {
|
||||
@include background-size(50% 50%); }
|
||||
.centered {
|
||||
@include background-size(50% 50%);
|
||||
background-position: center center; } }
|
||||
|
||||
#gradients {
|
||||
.horizontal {
|
||||
@include linear-gradient(color_stops(#d92626, #2626d9), left); }
|
||||
.vertical {
|
||||
@include linear-gradient(color_stops(#d92626, #2626d9)); }
|
||||
.diagonal {
|
||||
@include linear-gradient(color_stops(#d92626, #2626d9), unquote("right top")); }
|
||||
.radial {
|
||||
/* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
|
||||
@include radial-gradient(color_stops(#d92626 10px, #2626d9 150px));
|
||||
// +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
|
||||
// background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
|
||||
// background-color: #2626d9
|
||||
}
|
||||
.radial-1 {
|
||||
// A default radial gradient:
|
||||
/* +radial-gradient(color_stops(#ddd, #aaa)) */
|
||||
@include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
|
||||
.radial-2 {
|
||||
// A centered gradient
|
||||
/* +radial-gradient(color_stops(#ddd, #aaa)) */
|
||||
@include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
|
||||
.radial-3 {
|
||||
// A centered radial gradient at the top
|
||||
/* +radial-gradient(color_stops(#ddd, #aaa), "top center") */
|
||||
@include radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")); }
|
||||
.radial-4 {
|
||||
// A centered radial gradient with fixed color stops
|
||||
/* +radial-gradient(color_stops(#ddd 20px, #aaa 50px)) */
|
||||
@include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)); }
|
||||
.radial-5 {
|
||||
// A centered gradient with several color stops
|
||||
/* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00)) */
|
||||
@include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
|
||||
.radial-6 {
|
||||
// A centered gradient with color stops
|
||||
/* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c)) */
|
||||
@include radial-gradient(color_stops(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }
|
||||
@ -1,6 +0,0 @@
|
||||
/*
|
||||
Welcome to Compass. Use this file to write IE specific override styles.
|
||||
Import this file using the following HTML or equivalent:
|
||||
<!--[if IE]>
|
||||
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
<![endif]-->
|
||||
5
examples/logo/src/ie.scss
Normal file
5
examples/logo/src/ie.scss
Normal file
@ -0,0 +1,5 @@
|
||||
/* Welcome to Compass. Use this file to write IE specific override styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <!--[if IE]>
|
||||
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
* <![endif]--> */
|
||||
@ -1,6 +0,0 @@
|
||||
/*
|
||||
Welcome to Compass. Use this file to define print styles.
|
||||
Import this file using the following HTML or equivalent:
|
||||
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
|
||||
|
||||
|
||||
3
examples/logo/src/print.scss
Normal file
3
examples/logo/src/print.scss
Normal file
@ -0,0 +1,3 @@
|
||||
/* Welcome to Compass. Use this file to define print styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
|
||||
@ -1,29 +0,0 @@
|
||||
/*
|
||||
Welcome to Compass.
|
||||
In this file you should write your main styles. (or centralize your imports)
|
||||
Import this file using the following HTML or equivalent:
|
||||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
|
||||
@import compass/reset.sass
|
||||
@import compass/misc.sass
|
||||
|
||||
#logo-large,
|
||||
#logo-medium,
|
||||
#logo,
|
||||
#logo-small
|
||||
:text-align center
|
||||
:margin
|
||||
:bottom 40px
|
||||
|
||||
#logo-large
|
||||
+unobtrusive-logo(3em)
|
||||
:margin-top 20px
|
||||
|
||||
#logo-medium
|
||||
+unobtrusive-logo(2em)
|
||||
|
||||
#logo
|
||||
+unobtrusive-logo
|
||||
|
||||
#logo-small
|
||||
+unobtrusive-logo(0.5em)
|
||||
28
examples/logo/src/screen.scss
Normal file
28
examples/logo/src/screen.scss
Normal file
@ -0,0 +1,28 @@
|
||||
/* Welcome to Compass.
|
||||
* In this file you should write your main styles. (or centralize your imports)
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
|
||||
|
||||
@import "compass/reset";
|
||||
@import "compass/misc";
|
||||
|
||||
#logo-large,
|
||||
#logo-medium,
|
||||
#logo,
|
||||
#logo-small {
|
||||
text-align: center;
|
||||
margin: {
|
||||
bottom: 40px; }; }
|
||||
|
||||
#logo-large {
|
||||
@include unobtrusive-logo(3em);
|
||||
margin-top: 20px; }
|
||||
|
||||
#logo-medium {
|
||||
@include unobtrusive-logo(2em); }
|
||||
|
||||
#logo {
|
||||
@include unobtrusive-logo; }
|
||||
|
||||
#logo-small {
|
||||
@include unobtrusive-logo(0.5em); }
|
||||
@ -7,3 +7,4 @@ images_dir = "images"
|
||||
output_style = :compact
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
sass_options = {:quiet => true}
|
||||
@ -1,16 +0,0 @@
|
||||
/*
|
||||
960 Grid System ~ Core CSS.
|
||||
Learn more ~ http://960.gs/
|
||||
|
||||
Licensed under GPL and MIT.
|
||||
|
||||
@import compass/utilities/general/reset.sass
|
||||
@import 960/grid.sass
|
||||
|
||||
+global-reset
|
||||
|
||||
.container_12
|
||||
+grid-system(12)
|
||||
|
||||
.container_16
|
||||
+grid-system(16)
|
||||
15
examples/ninesixty/src/grid.scss
Normal file
15
examples/ninesixty/src/grid.scss
Normal file
@ -0,0 +1,15 @@
|
||||
/* 960 Grid System ~ Core CSS.
|
||||
* Learn more ~ http://960.gs/
|
||||
*
|
||||
* Licensed under GPL and MIT. */
|
||||
|
||||
@import "compass/utilities/general/reset";
|
||||
@import "960/grid";
|
||||
|
||||
@include global-reset;
|
||||
|
||||
.container_12 {
|
||||
@include grid-system(12); }
|
||||
|
||||
.container_16 {
|
||||
@include grid-system(16); }
|
||||
@ -1,10 +0,0 @@
|
||||
/*
|
||||
960 Grid System ~ Text CSS.
|
||||
Learn more ~ http://960.gs/
|
||||
|
||||
Licensed under GPL and MIT.
|
||||
|
||||
|
||||
@import 960/text.sass
|
||||
|
||||
+text
|
||||
8
examples/ninesixty/src/text.scss
Normal file
8
examples/ninesixty/src/text.scss
Normal file
@ -0,0 +1,8 @@
|
||||
/* 960 Grid System ~ Text CSS.
|
||||
* Learn more ~ http://960.gs/
|
||||
*
|
||||
* Licensed under GPL and MIT. */
|
||||
|
||||
@import "960/text";
|
||||
|
||||
@include text;
|
||||
@ -7,3 +7,4 @@ images_dir = "images"
|
||||
output_style = :compact
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
sass_options = {:quiet => true}
|
||||
@ -7,19 +7,21 @@
|
||||
// GRID
|
||||
// Set these values as needed for your grid layout.
|
||||
// - defaults are shown.
|
||||
!grid_unit = "em"
|
||||
!total_cols = 12
|
||||
!col_width = 4
|
||||
!gutter_width = 1
|
||||
!side_gutter_width = !gutter_width
|
||||
$grid_unit: em;
|
||||
|
||||
$total_cols: 12;
|
||||
|
||||
$col_width: 4;
|
||||
|
||||
$gutter_width: 1;
|
||||
|
||||
$side_gutter_width: $gutter_width;
|
||||
|
||||
// OMEGA_FLOAT
|
||||
// By default, +omega elements are floated right.
|
||||
// You can override that globally here:
|
||||
// !omega_float = "right"
|
||||
|
||||
|
||||
// HACKS
|
||||
// Are you using hacks or conditional comments? Susy makes both possible.
|
||||
// Leave this as 'true' to use hacks, set it as false for conditional comments.
|
||||
@ -27,36 +29,33 @@
|
||||
// several other mixins.
|
||||
// !hacks = true
|
||||
|
||||
|
||||
// FONT-SIZE
|
||||
// Override these values as needed (defaults are shown)
|
||||
// - You set the font and line heights in pixels.
|
||||
// - Susy will do the math and give you !base_font_size and !base_line_height
|
||||
// variables, set flexibly against the common browser default of 16px
|
||||
!base_font_size_px = 16
|
||||
!base_line_height_px = 24
|
||||
$base_font_size_px: 16;
|
||||
|
||||
$base_line_height_px: 24;
|
||||
|
||||
// SUSY
|
||||
// Don't move this @import above the GRID and FONT-SIZE overrides.
|
||||
@import susy/susy.sass
|
||||
|
||||
@import "susy/susy";
|
||||
|
||||
// COLORS
|
||||
// Set any colors you will need later.
|
||||
!main = #194C66
|
||||
!alt = #CC6633
|
||||
$main: #194c66;
|
||||
|
||||
$alt: #cc6633;
|
||||
|
||||
// FONTS
|
||||
// Give yourself some font stacks to work with.
|
||||
=sans-family
|
||||
font-family: Helvetica, Arial, sans-serif
|
||||
|
||||
=serif-family
|
||||
font-family: Baskerville, Palatino, serif
|
||||
@mixin sans-family {
|
||||
font-family: Helvetica, Arial, sans-serif; }
|
||||
|
||||
@mixin serif-family {
|
||||
font-family: Baskerville, Palatino, serif; }
|
||||
|
||||
// OTHER MIXINS
|
||||
// Mixins set here will be available in defaults, screen, print and IE
|
||||
// Or anywhere you import either base.sass or defaults.sass
|
||||
// Or anywhere you import either base or defaults
|
||||
@ -1,148 +0,0 @@
|
||||
//** DEFAULT STYLES **//
|
||||
// Don't forget to set your default styles.
|
||||
|
||||
|
||||
// Get all the details and mixins from base.sass
|
||||
@import base.sass
|
||||
// Reset browser defaults, and prepare block-level HTML5 elements
|
||||
@import susy/reset.sass
|
||||
@import compass/css3.sass
|
||||
|
||||
|
||||
/* @group defaults */
|
||||
|
||||
body
|
||||
+sans-family
|
||||
color= !main
|
||||
|
||||
/* @group links */
|
||||
|
||||
\:focus
|
||||
outline= 1px "dotted" !alt
|
||||
|
||||
a
|
||||
&:link, &:visited
|
||||
color= !alt
|
||||
&:focus, &:hover, &:active
|
||||
color= !alt - #222
|
||||
text-decoration: none
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group headers */
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-weight: bold
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group forms */
|
||||
|
||||
form *:focus
|
||||
outline: none
|
||||
|
||||
fieldset
|
||||
margin= !base_line_height 0
|
||||
|
||||
legend
|
||||
font-weight: bold
|
||||
font-variant: small-caps
|
||||
|
||||
label
|
||||
display: block
|
||||
margin-top= !base_line_height
|
||||
|
||||
legend + label
|
||||
margin-top: 0
|
||||
|
||||
textarea, input[type="text"]
|
||||
+box-sizing("border-box")
|
||||
width: 100%
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group tables */
|
||||
|
||||
/* tables still need 'cellspacing="0"' in the markup */
|
||||
|
||||
table
|
||||
:width 100%
|
||||
:border= 1/16 + "em solid" !main + #333
|
||||
:left none
|
||||
:right none
|
||||
:padding= 7/16 + "em 0"
|
||||
:margin= 8/16 + "em 0"
|
||||
|
||||
th
|
||||
:font-weight bold
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group block tags */
|
||||
|
||||
p
|
||||
:margin= !base_line_height 0
|
||||
|
||||
=list-default(!ol = false)
|
||||
:margin= !base_line_height
|
||||
@if !ol
|
||||
:list-style decimal
|
||||
@else
|
||||
:list-style disc
|
||||
|
||||
=no-style-list
|
||||
+no-bullets
|
||||
:margin 0
|
||||
:padding 0
|
||||
|
||||
ol
|
||||
+list-default("ol")
|
||||
|
||||
ul
|
||||
+list-default
|
||||
|
||||
blockquote
|
||||
:margin= !base_line_height
|
||||
+serif-family
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group inline tags */
|
||||
|
||||
cite
|
||||
:font-style italic
|
||||
|
||||
em
|
||||
:font-style italic
|
||||
|
||||
strong
|
||||
:font-weight bold
|
||||
|
||||
ins
|
||||
:text-decoration underline
|
||||
|
||||
del
|
||||
:text-decoration line-through
|
||||
|
||||
q
|
||||
:font-style italic
|
||||
em
|
||||
:font-style normal
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group replaced tags */
|
||||
|
||||
img
|
||||
:vertical-align bottom
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @end */
|
||||
140
examples/susy/src/_defaults.scss
Normal file
140
examples/susy/src/_defaults.scss
Normal file
@ -0,0 +1,140 @@
|
||||
//** DEFAULT STYLES **//
|
||||
// Don't forget to set your default styles.
|
||||
|
||||
// Get all the details and mixins from base
|
||||
@import "base";
|
||||
|
||||
// Reset browser defaults, and prepare block-level HTML5 elements
|
||||
@import "susy/reset";
|
||||
@import "compass/css3";
|
||||
|
||||
/* @group defaults */
|
||||
|
||||
body {
|
||||
@include sans-family;
|
||||
color: $main; }
|
||||
|
||||
/* @group links */
|
||||
|
||||
:focus {
|
||||
outline: 1px dotted $alt; }
|
||||
|
||||
a {
|
||||
&:link, &:visited {
|
||||
color: $alt; }
|
||||
&:focus, &:hover, &:active {
|
||||
color: $alt - #222222;
|
||||
text-decoration: none; } }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group headers */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold; }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group forms */
|
||||
|
||||
form *:focus {
|
||||
outline: none; }
|
||||
|
||||
fieldset {
|
||||
margin: $base_line_height 0; }
|
||||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
font-variant: small-caps; }
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-top: $base_line_height; }
|
||||
|
||||
legend + label {
|
||||
margin-top: 0; }
|
||||
|
||||
textarea, input[type="text"] {
|
||||
@include box-sizing(border-box);
|
||||
width: 100%; }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group tables */
|
||||
|
||||
/* tables still need 'cellspacing="0"' in the markup */
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: 1 / 16 + unquote("em solid") $main + #333333 {
|
||||
left: none;
|
||||
right: none; };
|
||||
padding: 7 / 16 + unquote("em 0");
|
||||
margin: 8 / 16 + unquote("em 0"); }
|
||||
|
||||
th {
|
||||
font-weight: bold; }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group block tags */
|
||||
|
||||
p {
|
||||
margin: $base_line_height 0; }
|
||||
|
||||
@mixin list-default($ol: false) {
|
||||
margin: $base_line_height;
|
||||
@if $ol {
|
||||
list-style: decimal; }
|
||||
@else {
|
||||
list-style: disc; } }
|
||||
|
||||
@mixin no-style-list {
|
||||
@include no-bullets;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
ol {
|
||||
@include list-default(ol); }
|
||||
|
||||
ul {
|
||||
@include list-default; }
|
||||
|
||||
blockquote {
|
||||
margin: $base_line_height;
|
||||
@include serif-family; }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group inline tags */
|
||||
|
||||
cite {
|
||||
font-style: italic; }
|
||||
|
||||
em {
|
||||
font-style: italic; }
|
||||
|
||||
strong {
|
||||
font-weight: bold; }
|
||||
|
||||
ins {
|
||||
text-decoration: underline; }
|
||||
|
||||
del {
|
||||
text-decoration: line-through; }
|
||||
|
||||
q {
|
||||
font-style: italic;
|
||||
em {
|
||||
font-style: normal; } }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group replaced tags */
|
||||
|
||||
img {
|
||||
vertical-align: bottom; }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @end */
|
||||
@ -1,114 +0,0 @@
|
||||
/*
|
||||
Welcome to Susy. Use this file to define screen styles.
|
||||
Import this file using the following HTML or equivalent:
|
||||
<link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
|
||||
@import defaults.sass
|
||||
|
||||
|
||||
/* @group STRUCTURE */
|
||||
|
||||
#skip-links
|
||||
ul
|
||||
+no-style-list
|
||||
a
|
||||
+skip-link
|
||||
width: 100%
|
||||
|
||||
body
|
||||
+susy
|
||||
|
||||
#page
|
||||
position: relative
|
||||
+container
|
||||
background: rgba(0,0,0,.10)
|
||||
|
||||
h1, h2
|
||||
+serif-family
|
||||
text-transform: uppercase
|
||||
text-align: center
|
||||
background: rgba(0,0,0,.15)
|
||||
letter-spacing= 1/14 + "em"
|
||||
|
||||
h1 + p, h2 + p, p:first-child
|
||||
margin-top: 0
|
||||
|
||||
header[role="banner"], #site-nav
|
||||
+full
|
||||
h1
|
||||
font-size: 1.5em
|
||||
line-height: 2em
|
||||
|
||||
#site-nav
|
||||
text-align: center
|
||||
padding: 1.5em
|
||||
ul
|
||||
+inline-block-list(.5em)
|
||||
|
||||
#content
|
||||
> aside
|
||||
+columns(2)
|
||||
&:first-child
|
||||
+alpha
|
||||
& + aside
|
||||
+omega
|
||||
section[role="main"]
|
||||
+columns(6)
|
||||
> section
|
||||
+full(6)
|
||||
.major
|
||||
article
|
||||
+columns(3,6)
|
||||
& + article
|
||||
+omega(6)
|
||||
.minor
|
||||
aside
|
||||
+columns(2,6)
|
||||
article
|
||||
+columns(4,6)
|
||||
+omega(6)
|
||||
header, .body
|
||||
+columns(2,4)
|
||||
.body
|
||||
+omega(4)
|
||||
footer
|
||||
+full(4)
|
||||
|
||||
footer[role="contentinfo"]
|
||||
+full
|
||||
border-top= 1/14 + "em dotted"
|
||||
padding-top= 13/14 + "em"
|
||||
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group COMPONENTS by type */
|
||||
|
||||
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group OVERRIDES by content */
|
||||
|
||||
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group OVERRIDES by page */
|
||||
|
||||
|
||||
|
||||
/* @end */
|
||||
|
||||
|
||||
/* @group DEBUG */
|
||||
|
||||
// Uncomment, adjust and use for debugging
|
||||
// #page
|
||||
// +show-grid("your-grid-image.png")
|
||||
|
||||
/* @end */
|
||||
100
examples/susy/src/screen.scss
Normal file
100
examples/susy/src/screen.scss
Normal file
@ -0,0 +1,100 @@
|
||||
/* Welcome to Susy. Use this file to define screen styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
|
||||
|
||||
@import "defaults";
|
||||
|
||||
/* @group STRUCTURE */
|
||||
|
||||
#skip-links {
|
||||
ul {
|
||||
@include no-style-list; }
|
||||
a {
|
||||
@include skip-link;
|
||||
width: 100%; } }
|
||||
|
||||
body {
|
||||
@include susy; }
|
||||
|
||||
#page {
|
||||
position: relative;
|
||||
@include container;
|
||||
background: rgba(0, 0, 0, 0.1); }
|
||||
|
||||
h1, h2 {
|
||||
@include serif-family;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
letter-spacing: 1 / 14 + em; }
|
||||
|
||||
h1 + p, h2 + p, p:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
header[role="banner"], #site-nav {
|
||||
@include full;
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
line-height: 2em; } }
|
||||
|
||||
#site-nav {
|
||||
text-align: center;
|
||||
padding: 1.5em;
|
||||
ul {
|
||||
@include inline-block-list(0.5em); } }
|
||||
|
||||
#content {
|
||||
> aside {
|
||||
@include columns(2);
|
||||
&:first-child {
|
||||
@include alpha; }
|
||||
& + aside {
|
||||
@include omega; } }
|
||||
section[role="main"] {
|
||||
@include columns(6);
|
||||
> section {
|
||||
@include full(6); }
|
||||
.major {
|
||||
article {
|
||||
@include columns(3, 6);
|
||||
& + article {
|
||||
@include omega(6); } } }
|
||||
.minor {
|
||||
aside {
|
||||
@include columns(2, 6); }
|
||||
article {
|
||||
@include columns(4, 6);
|
||||
@include omega(6);
|
||||
header, .body {
|
||||
@include columns(2, 4); }
|
||||
.body {
|
||||
@include omega(4); }
|
||||
footer {
|
||||
@include full(4); } } } } }
|
||||
|
||||
footer[role="contentinfo"] {
|
||||
@include full;
|
||||
border-top: 1 / 14 + unquote("em dotted");
|
||||
padding-top: 13 / 14 + em; }
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group COMPONENTS by type */
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group OVERRIDES by content */
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group OVERRIDES by page */
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group DEBUG */
|
||||
|
||||
// Uncomment, adjust and use for debugging
|
||||
// #page
|
||||
// +show-grid("your-grid-image.png")
|
||||
|
||||
/* @end */
|
||||
1
examples/yui/config.rb
Normal file
1
examples/yui/config.rb
Normal file
@ -0,0 +1 @@
|
||||
sass_options = {:quiet => true}
|
||||
@ -1,13 +0,0 @@
|
||||
@import yui.sass
|
||||
@import compass/reset.sass
|
||||
|
||||
+yui
|
||||
|
||||
.bigger
|
||||
+font-size(16px)
|
||||
|
||||
.biggest
|
||||
+font-size(18px)
|
||||
|
||||
.bigger .biggest
|
||||
+font-size(18px, 16px)
|
||||
13
examples/yui/src/screen.scss
Normal file
13
examples/yui/src/screen.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "yui";
|
||||
@import "compass/reset";
|
||||
|
||||
@include yui;
|
||||
|
||||
.bigger {
|
||||
@include font-size(16px); }
|
||||
|
||||
.biggest {
|
||||
@include font-size(18px); }
|
||||
|
||||
.bigger .biggest {
|
||||
@include font-size(18px, 16px); }
|
||||
Loading…
Reference in New Issue
Block a user