|
diff --git a/.ruby-version b/.ruby-version |
|
index 77fee73..c82eec7 100644 |
|
--- a/.ruby-version |
|
+++ b/.ruby-version |
|
@@ -1 +1 @@ |
|
-1.9.3 |
|
+1.9.3-p448 |
|
diff --git a/sass/abstractions/_toolkit.scss b/sass/abstractions/_toolkit.scss |
|
new file mode 100644 |
|
index 0000000..ea0535d |
|
--- /dev/null |
|
+++ b/sass/abstractions/_toolkit.scss |
|
@@ -0,0 +1,133 @@ |
|
+@mixin retina-image($image, $width, $height) { |
|
+ @media (-webkit-min-device-pixel-ratio: 1.5), |
|
+ (min--moz-device-pixel-ratio: 1.5), |
|
+ (-o-min-device-pixel-ratio: 3/2), |
|
+ (min-device-pixel-ratio: 1.5), |
|
+ (min-resolution: 144dpi) { |
|
+ background-image: url($image); |
|
+ background-size: $width $height; |
|
+ } |
|
+} |
|
+ |
|
+@mixin clearfix { |
|
+ &:after { |
|
+ content: ""; |
|
+ display: table; |
|
+ clear: both; |
|
+ } |
|
+} |
|
+ |
|
+.clearfix { |
|
+ @include clearfix; |
|
+} |
|
+ |
|
+@mixin no-clearfix { |
|
+ &:after { |
|
+ content: none; |
|
+ display: inline; |
|
+ clear: none; |
|
+ } |
|
+} |
|
+ |
|
+@mixin rgba($color, $value) { |
|
+ background-color: $color; |
|
+ background-color: rgba($color, $value); |
|
+} |
|
+ |
|
+@mixin visually-hidden { |
|
+ border: 0; |
|
+ clip: rect(0 0 0 0); |
|
+ height: 1px; |
|
+ margin: -1px; |
|
+ overflow: hidden; |
|
+ padding: 0; |
|
+ position: absolute; |
|
+ width: 1px; |
|
+} |
|
+ |
|
+@mixin undo-visually-hidden { |
|
+ border: inherit; |
|
+ clip: inherit; |
|
+ height: inherit; |
|
+ margin: inherit; |
|
+ overflow: inherit; |
|
+ padding: inherit; |
|
+ position: inherit; |
|
+ width: inherit; |
|
+} |
|
+ |
|
+.visually-hidden, |
|
+.element-invisible { |
|
+ @include visually-hidden; |
|
+} |
|
+ |
|
+@mixin item-list { |
|
+ list-style: none; |
|
+ padding: 0; |
|
+ margin: 0; |
|
+} |
|
+ |
|
+@mixin image-replace { |
|
+ text-indent: 100%; |
|
+ white-space: nowrap; |
|
+ overflow: hidden; |
|
+ word-wrap: normal; |
|
+} |
|
+ |
|
+@mixin image-replace-link { |
|
+ @include image-replace; |
|
+ display: block; |
|
+ border-bottom: none; |
|
+} |
|
+ |
|
+@mixin image-replace-undo { |
|
+ text-indent: 0; |
|
+ white-space: normal; |
|
+ overflow: auto; |
|
+ word-wrap: normal; |
|
+} |
|
+ |
|
+ |
|
+@mixin image-replace-link-undo { |
|
+ @include image-replace-undo; |
|
+// display: inline; |
|
+ height: auto; |
|
+ width: auto; |
|
+} |
|
+ |
|
+@mixin item-list-menu { |
|
+ padding: 0; |
|
+ margin: 0; |
|
+ |
|
+ li { |
|
+ @include item-list; |
|
+ @include clearfix; |
|
+ } |
|
+} |
|
+ |
|
+@mixin placeholder($color: $white) { |
|
+ &::-webkit-input-placeholder { |
|
+ color: $color; |
|
+ } |
|
+ |
|
+ &:-moz-placeholder { |
|
+ color: $color; |
|
+ } |
|
+ |
|
+ &::-moz-placeholder { |
|
+ color: $color; |
|
+ } |
|
+ |
|
+ &:-ms-input-placeholder { |
|
+ color: $color; |
|
+ } |
|
+} |
|
+ |
|
+@mixin fix-image-line-height { |
|
+ display: block; |
|
+ line-height: 1px; |
|
+} |
|
+ |
|
+.strike-through { |
|
+ text-decoration: line-through; |
|
+} |
|
diff --git a/sass/abstractions/_typography.scss b/sass/abstractions/_typography.scss |
|
new file mode 100644 |
|
index 0000000..9a899a9 |
|
--- /dev/null |
|
+++ b/sass/abstractions/_typography.scss |
|
@@ -0,0 +1,16 @@ |
|
+@function emify($target, $context) { |
|
+ @if $target == 0 { @return 0 } |
|
+ @return $target / $context + 0em; |
|
+} |
|
+ |
|
+// Make px to ems using base-font-size |
|
+// echo as: font-size: em-font(#px); |
|
+@function em-font($target, $context: $base-font-size) { |
|
+ @return emify($target, $context); |
|
+} |
|
+ |
|
+// Make px to ems using base-line-height |
|
+// echo as: font-size: em-base(#px); |
|
+@function em-base($target, $context: $base-line-height) { |
|
+ @return emify($target, $context); |
|
+} |
|
diff --git a/sass/base/_forms.scss b/sass/base/_forms.scss |
|
index e69de29..05d7d74 100644 |
|
--- a/sass/base/_forms.scss |
|
+++ b/sass/base/_forms.scss |
|
@@ -0,0 +1,70 @@ |
|
+label, |
|
+select { |
|
+ display: block; |
|
+} |
|
+ |
|
+label { |
|
+ cursor: pointer; |
|
+} |
|
+ |
|
+input[type="search"] { |
|
+ -webkit-box-sizing: content-box; |
|
+ -moz-box-sizing: content-box; |
|
+ -webkit-appearance: textfield; |
|
+ box-sizing: content-box; |
|
+} |
|
+ |
|
+input[type="search"]::-webkit-search-decoration, |
|
+input[type="search"]::-webkit-search-cancel-button { |
|
+ -webkit-appearance: none; |
|
+} |
|
+ |
|
+textarea { |
|
+ overflow: auto; |
|
+ vertical-align: top; |
|
+} |
|
+ |
|
+textarea, |
|
+input[type="text"], |
|
+input[type="password"], |
|
+input[type="datetime"], |
|
+input[type="datetime-local"], |
|
+input[type="date"], |
|
+input[type="month"], |
|
+input[type="time"], |
|
+input[type="week"], |
|
+input[type="number"], |
|
+input[type="email"], |
|
+input[type="url"], |
|
+input[type="search"], |
|
+input[type="tel"] {} |
|
+ |
|
+textarea {} |
|
+ |
|
+input[type="image"], |
|
+input[type="submit"], |
|
+input[type="reset"], |
|
+input[type="button"], |
|
+input[type="radio"], |
|
+input[type="checkbox"] { |
|
+ width: auto; |
|
+} |
|
+ |
|
+select, |
|
+input[type="file"] { |
|
+ // In IE7, the height of the select element cannot be changed by height, only font-size. |
|
+ *margin-top: 4px; |
|
+ width: 100%; |
|
+} |
|
+ |
|
+input[type="file"] { |
|
+ @include breakpoint($narrow) { |
|
+ width: auto; |
|
+ } |
|
+} |
|
+ |
|
+input[type="submit"] { |
|
+ @include button; |
|
+} |
|
+ |
|
+fieldset {} |
|
diff --git a/sass/base/_lists.scss b/sass/base/_lists.scss |
|
index e69de29..2c9bf79 100644 |
|
--- a/sass/base/_lists.scss |
|
+++ b/sass/base/_lists.scss |
|
@@ -0,0 +1,4 @@ |
|
+ul, |
|
+ol { |
|
+ padding-left: 20px; |
|
+} |
|
diff --git a/sass/base/_tables.scss b/sass/base/_tables.scss |
|
index e69de29..1922e7f 100644 |
|
--- a/sass/base/_tables.scss |
|
+++ b/sass/base/_tables.scss |
|
@@ -0,0 +1,3 @@ |
|
+table { |
|
+ width: 100%; |
|
+} |
|
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss |
|
index e69de29..25d88c8 100644 |
|
--- a/sass/base/_typography.scss |
|
+++ b/sass/base/_typography.scss |
|
@@ -0,0 +1,32 @@ |
|
+body { |
|
+ // @include base-text; |
|
+} |
|
+ |
|
+h1 {} |
|
+ |
|
+h2 {} |
|
+ |
|
+h3 {} |
|
+ |
|
+h4 {} |
|
+ |
|
+h5, |
|
+h6 {} |
|
+ |
|
+p {} |
|
+ |
|
+a { |
|
+ // @include link-colors($caribbean-blue, $nectarine, $taro, $caribbean-blue, $nectarine); |
|
+ |
|
+ &.active-trail, |
|
+ &.active {} |
|
+} |
|
+ |
|
+blockquote {} |
|
+ |
|
+em {} |
|
+ |
|
+strong {} |
|
+ |
|
+em strong, |
|
+strong em {} |
|
diff --git a/sass/components/README.md b/sass/components/README.md |
|
deleted file mode 100644 |
|
index c60898c..0000000 |
|
--- a/sass/components/README.md |
|
+++ /dev/null |
|
@@ -1,40 +0,0 @@ |
|
-# Components |
|
-This directory should contain full components (modules in SMACSS), their |
|
-sub-components and modifiers. |
|
- |
|
-Components are discrete parts of your page that should sit within the regions |
|
-of your layouts. You should try to abstract your components as much as possible |
|
-to promote reuse throughout the theme. Components should be flexible enough to |
|
-respond to any width and should never rely on context |
|
-(e.g. .sidebar-first .component) for styling. This allows modules to be placed |
|
-throughout the theme with no risk of them breaking. |
|
- |
|
-If you find you need to change the look of a component depending on it's context |
|
-you should avoid using context based classes at all costs. Instead it is better |
|
-to add another "modifier" class to the component to alter the styling. Again, |
|
-this promotes reuse. |
|
- |
|
-Sub-components are the individual parts that make up a component. As a general |
|
-rule, adding a class to target a sub-component is a much better option than |
|
-using descendant selectors or element selectors. In many cases sub-components |
|
-can be made more reusable by making them components in their own right, so they |
|
-can then be used within other components. |
|
- |
|
-Almost everything that doesn't belong in base should be made a component. |
|
- |
|
-## Some common examples throughout Drupal |
|
- |
|
-* Blocks |
|
-* Content Types |
|
- For example, you may have a generic node component that contains |
|
- sub-components for the submitted by line and links. Specific components can |
|
- then be created for each content type to style the specifics of each. Finally, |
|
- by using entity view modes you can easily apply modifications based on the |
|
- .node-[view-mode] classes. |
|
-* Forms |
|
- For instance the log in form. |
|
-* Views |
|
- Each views output style could be made into a component, the content of each |
|
- row should be provided by a view mode styled by it's component CSS. Exposed |
|
- filter forms, views pagers and other views elements are also good candidates |
|
- for components. |
|
diff --git a/sass/components/_navigation.scss b/sass/components/_navigation.scss |
|
deleted file mode 100644 |
|
index e69de29..0000000 |
|
diff --git a/sass/components/_search.scss b/sass/components/_search.scss |
|
deleted file mode 100644 |
|
index e69de29..0000000 |
|
diff --git a/sass/components/general/README.md b/sass/components/general/README.md |
|
new file mode 100644 |
|
index 0000000..c60898c |
|
--- /dev/null |
|
+++ b/sass/components/general/README.md |
|
@@ -0,0 +1,40 @@ |
|
+# Components |
|
+This directory should contain full components (modules in SMACSS), their |
|
+sub-components and modifiers. |
|
+ |
|
+Components are discrete parts of your page that should sit within the regions |
|
+of your layouts. You should try to abstract your components as much as possible |
|
+to promote reuse throughout the theme. Components should be flexible enough to |
|
+respond to any width and should never rely on context |
|
+(e.g. .sidebar-first .component) for styling. This allows modules to be placed |
|
+throughout the theme with no risk of them breaking. |
|
+ |
|
+If you find you need to change the look of a component depending on it's context |
|
+you should avoid using context based classes at all costs. Instead it is better |
|
+to add another "modifier" class to the component to alter the styling. Again, |
|
+this promotes reuse. |
|
+ |
|
+Sub-components are the individual parts that make up a component. As a general |
|
+rule, adding a class to target a sub-component is a much better option than |
|
+using descendant selectors or element selectors. In many cases sub-components |
|
+can be made more reusable by making them components in their own right, so they |
|
+can then be used within other components. |
|
+ |
|
+Almost everything that doesn't belong in base should be made a component. |
|
+ |
|
+## Some common examples throughout Drupal |
|
+ |
|
+* Blocks |
|
+* Content Types |
|
+ For example, you may have a generic node component that contains |
|
+ sub-components for the submitted by line and links. Specific components can |
|
+ then be created for each content type to style the specifics of each. Finally, |
|
+ by using entity view modes you can easily apply modifications based on the |
|
+ .node-[view-mode] classes. |
|
+* Forms |
|
+ For instance the log in form. |
|
+* Views |
|
+ Each views output style could be made into a component, the content of each |
|
+ row should be provided by a view mode styled by it's component CSS. Exposed |
|
+ filter forms, views pagers and other views elements are also good candidates |
|
+ for components. |
|
diff --git a/sass/components/specific/README.md b/sass/components/specific/README.md |
|
new file mode 100644 |
|
index 0000000..c60898c |
|
--- /dev/null |
|
+++ b/sass/components/specific/README.md |
|
@@ -0,0 +1,40 @@ |
|
+# Components |
|
+This directory should contain full components (modules in SMACSS), their |
|
+sub-components and modifiers. |
|
+ |
|
+Components are discrete parts of your page that should sit within the regions |
|
+of your layouts. You should try to abstract your components as much as possible |
|
+to promote reuse throughout the theme. Components should be flexible enough to |
|
+respond to any width and should never rely on context |
|
+(e.g. .sidebar-first .component) for styling. This allows modules to be placed |
|
+throughout the theme with no risk of them breaking. |
|
+ |
|
+If you find you need to change the look of a component depending on it's context |
|
+you should avoid using context based classes at all costs. Instead it is better |
|
+to add another "modifier" class to the component to alter the styling. Again, |
|
+this promotes reuse. |
|
+ |
|
+Sub-components are the individual parts that make up a component. As a general |
|
+rule, adding a class to target a sub-component is a much better option than |
|
+using descendant selectors or element selectors. In many cases sub-components |
|
+can be made more reusable by making them components in their own right, so they |
|
+can then be used within other components. |
|
+ |
|
+Almost everything that doesn't belong in base should be made a component. |
|
+ |
|
+## Some common examples throughout Drupal |
|
+ |
|
+* Blocks |
|
+* Content Types |
|
+ For example, you may have a generic node component that contains |
|
+ sub-components for the submitted by line and links. Specific components can |
|
+ then be created for each content type to style the specifics of each. Finally, |
|
+ by using entity view modes you can easily apply modifications based on the |
|
+ .node-[view-mode] classes. |
|
+* Forms |
|
+ For instance the log in form. |
|
+* Views |
|
+ Each views output style could be made into a component, the content of each |
|
+ row should be provided by a view mode styled by it's component CSS. Exposed |
|
+ filter forms, views pagers and other views elements are also good candidates |
|
+ for components. |
|
diff --git a/sass/ie/_ie9.scss b/sass/ie/_ie9.scss |
|
new file mode 100644 |
|
index 0000000..ddb01cb |
|
--- /dev/null |
|
+++ b/sass/ie/_ie9.scss |
|
@@ -0,0 +1,2 @@ |
|
+@import "../variables/**/*"; |
|
+@import "../abstractions/**/*"; |
|
diff --git a/sass/layout/_1_sticky_footer.scss b/sass/layout/_1_sticky_footer.scss |
|
new file mode 100644 |
|
index 0000000..29de5ce |
|
--- /dev/null |
|
+++ b/sass/layout/_1_sticky_footer.scss |
|
@@ -0,0 +1,19 @@ |
|
+// html, body { |
|
+// height: 100%; |
|
+// } |
|
+ |
|
+// .l-page { |
|
+// min-height: 100%; |
|
+// position: relative; |
|
+// } |
|
+ |
|
+// .l-main { |
|
+// min-height: 100%; |
|
+// padding-bottom: 100px; |
|
+// } |
|
+ |
|
+// .l-footer { |
|
+// position: absolute; |
|
+// bottom: 0; |
|
+// width: 100%; |
|
+// } |
|
diff --git a/sass/layout/_2_layout.scss b/sass/layout/_2_layout.scss |
|
new file mode 100644 |
|
index 0000000..875dfff |
|
--- /dev/null |
|
+++ b/sass/layout/_2_layout.scss |
|
@@ -0,0 +1,19 @@ |
|
+// .l-page { |
|
+// // Define these elements as the grid containers. |
|
+// @include container; |
|
+ |
|
+// @include breakpoint($narrow) { |
|
+// $container-width: $narrow-width; |
|
+// @include set-container-width; |
|
+// } |
|
+ |
|
+// @include breakpoint($normal) { |
|
+// $container-width: $normal-width; |
|
+// @include set-container-width; |
|
+// } |
|
+ |
|
+// @include breakpoint($wide) { |
|
+// $container-width: $wide-width; |
|
+// @include set-container-width; |
|
+// } |
|
+// } |
|
diff --git a/sass/re-theme.no-query.scss b/sass/re-theme.no-query.scss |
|
index 11e7540..34a182e 100644 |
|
--- a/sass/re-theme.no-query.scss |
|
+++ b/sass/re-theme.no-query.scss |
|
@@ -1,5 +1,16 @@ |
|
$breakpoint-no-queries: true; |
|
$breakpoint-no-query-fallbacks: true; |
|
|
|
-// Re-render everything from styles.scss but without media queries. |
|
-@import "re-theme.styles"; |
|
+.lt-ie9 { |
|
+ // Prevent IE from rendering faux-bold and faux-italic. |
|
+ * { |
|
+ font-weight: normal !important; |
|
+ font-style: normal !important; |
|
+ } |
|
+ |
|
+ @import "ie/ie9"; |
|
+ |
|
+ // Re-render everything from styles.scss but without media queries. |
|
+ @import "re-theme.styles"; |
|
+} |
|
+ |
|
diff --git a/sass/re-theme.styles.scss b/sass/re-theme.styles.scss |
|
index 9a9155d..2aece2e 100644 |
|
--- a/sass/re-theme.styles.scss |
|
+++ b/sass/re-theme.styles.scss |
|
@@ -3,6 +3,7 @@ |
|
@import "breakpoint"; |
|
@import "singularitygs"; |
|
@import "toolkit-no-css"; |
|
+@import "susy"; |
|
|
|
// Import variables, abstractions, base styles and components using globbing. |
|
// |
|
@@ -18,5 +19,7 @@ |
|
// dependencies shouldn't be a problem. |
|
@import "variables/**/*"; |
|
@import "abstractions/**/*"; |
|
+@import "vendor/**/*"; |
|
+@import "layout/**/*"; |
|
@import "base/**/*"; |
|
@import "components/**/*"; |
|
diff --git a/sass/variables/_sprites.scss b/sass/variables/_sprites.scss |
|
new file mode 100644 |
|
index 0000000..7dfd040 |
|
--- /dev/null |
|
+++ b/sass/variables/_sprites.scss |
|
@@ -0,0 +1,2 @@ |
|
+// $sprites: sprite-map("image-replacement/*.png", $spacing: 80px); |
|
+// $sprites2x: sprite-map("image-replacement-2x/*.png", $spacing: 80px); |
|
diff --git a/sass/variables/_typography.scss b/sass/variables/_typography.scss |
|
index e69de29..955a52c 100644 |
|
--- a/sass/variables/_typography.scss |
|
+++ b/sass/variables/_typography.scss |
|
@@ -0,0 +1,5 @@ |
|
+$base-font-size: 15; |
|
+$base-line-height: 20; |
|
+ |
|
+$regular: 400; |
|
+$bold: 700; |
|
diff --git a/sass/vendor/_retina_sprites.scss b/sass/vendor/_retina_sprites.scss |
|
new file mode 100644 |
|
index 0000000..54830ac |
|
--- /dev/null |
|
+++ b/sass/vendor/_retina_sprites.scss |
|
@@ -0,0 +1,81 @@ |
|
+@mixin retina-sprite($name, $hover: false, $active: false, $disabled: false) { |
|
+ @include _retina-sprite($name, $sprites, $sprites2x, $hover, $active, $disabled); |
|
+} |
|
+ |
|
+// The general purpose retina sprite mixin. |
|
+ // |
|
+ // @include retina-sprite(name, $spritemap1, $spritemap2) |
|
+ // @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0]) |
|
+ // |
|
+ // If `dimensions` is true, then width/height will also be set. |
|
+ // |
|
+ // if `pad` is non-zero, then that's how much padding the element will have (requires |
|
+ // $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger. |
|
+ // |
|
+@mixin _retina-sprite($name, $sprites, $sprites2x, $hover, $active, $disabled, $dimensions: true, $pad: 0) { |
|
+ @if $dimensions == true { |
|
+ @include sprite-dimensions($sprites, $name); |
|
+ } |
|
+ background-image: sprite-url($sprites); |
|
+ background-position: sprite-position($sprites, $name, -$pad, -$pad); |
|
+ background-repeat: no-repeat; |
|
+ |
|
+ @if $hover == true { |
|
+ $name_hover: $name + _hover; |
|
+ &:hover, |
|
+ &:focus { |
|
+ background-position: sprite-position($sprites, $name_hover, -$pad, -$pad); |
|
+ } |
|
+ } |
|
+ @if $active == true { |
|
+ $name_active: $name + _active; |
|
+ &:active { |
|
+ background-position: sprite-position($sprites, $name_active, -$pad, -$pad); |
|
+ } |
|
+ } |
|
+ @if $disabled == true { |
|
+ $name_disabled: $name + _disabled; |
|
+ &.disabled { |
|
+ background-position: sprite-position($sprites, $name_disabled, -$pad, -$pad); |
|
+ } |
|
+ } |
|
+ |
|
+ @if $pad > 0 { |
|
+ padding: $pad; |
|
+ } |
|
+ |
|
+ @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { |
|
+ & { |
|
+ $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2); |
|
+ background-image: sprite-url($sprites2x); |
|
+ background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; |
|
+ @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto); |
|
+ // sprite-path() returns the path of the generated sprite sheet, which |
|
+ // image-width() calculates the width of. the ceil() is in place in case |
|
+ // you have sprites that have an odd-number of pixels in width |
|
+ |
|
+ @if $hover == true { |
|
+ $name_hover: $name + _hover; // create myButton_hover and assign it |
|
+ &:hover, |
|
+ &:focus { |
|
+ $pos: sprite-position($sprites2x, $name_hover, -$pad * 2, -$pad * 2); |
|
+ background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; |
|
+ } |
|
+ } |
|
+ @if $active == true { |
|
+ $name_active: $name + _active; // create myButton_active and assign it |
|
+ &:active { |
|
+ $pos: sprite-position($sprites2x, $name_active, -$pad * 2, -$pad * 2); |
|
+ background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; |
|
+ } |
|
+ } |
|
+ @if $disabled == true { |
|
+ $name_disabled: $name + _disabled; // create myButton_disabled and assign it |
|
+ &.disabled { |
|
+ $pos: sprite-position($sprites2x, $name_disabled, -$pad * 2, -$pad * 2); |
|
+ background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; |
|
+ } |
|
+ } |
|
+ } |
|
+ } |
|
+} |
Remove from re-theme.normalize.scss: