Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

glyph improvements, doc updates, test updates #28

Merged
merged 2 commits into from Aug 27, 2013
Merged

glyph improvements, doc updates, test updates #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b823ce
some glyph improvements, fixing test cases
eoneill Aug 27, 2013
90263a7
fixing some doc typos
eoneill Aug 27, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/archetype/sass_extensions/monkey_patches/handle_include_loop.rb
View file
Open in desktop
@@ -1,3 +1,4 @@
# :stopdoc:
# monkey patch Sass to exclude special mixins from it's include loop logic
module Sass
module Tree
Expand Down
3 changes: 3 additions & 0 deletions stylesheets/archetype/_base.scss
View file
Open in desktop
Expand Up @@ -38,6 +38,9 @@ $RESET_INIT: false !default;
// the font-face mixin will likely change in a future version, keep an eye on this
// https://github.com/chriseppstein/compass/issues/867
@include font-face($CONFIG_GLYPHS_NAME, $CONFIG_GLYPHS_FILES, $CONFIG_GLYPHS_EOT, $CONFIG_GLYPHS_WEIGHT, $CONFIG_GLYPHS_STYLE);
// output a second @font-face set with a versioned family name
// this will help avoid collisions when multi-app CSS is loaded on a single page
@include font-face('#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', $CONFIG_GLYPHS_FILES, $CONFIG_GLYPHS_EOT, $CONFIG_GLYPHS_WEIGHT, $CONFIG_GLYPHS_STYLE);
}

// auto invoke base reset
Expand Down
1 change: 1 addition & 0 deletions stylesheets/archetype/_config.scss
View file
Open in desktop
Expand Up @@ -59,6 +59,7 @@ $CONFIG_KEYFRAME_LOADERS: archetype-loader !default;

// glyphs
$CONFIG_GLYPHS_NAME: FontAwesome !default; // name for the font-face
$CONFIG_GLYPHS_VERSION: '0.0.1' !default; // the glyph library version number
$CONFIG_GLYPHS_SVG_ID: $CONFIG_GLYPHS_NAME !default;
$CONFIG_GLYPHS_BASE_PATH: 'vendor/archetype/fontawesome-webfont' !default; // generic path to all glpyh fonts (sans extensions)
$CONFIG_GLYPHS_EOT: '#{$CONFIG_GLYPHS_BASE_PATH}.eot' !default;
Expand Down
28 changes: 24 additions & 4 deletions stylesheets/archetype/_hacks.scss
View file
Open in desktop
Expand Up @@ -38,20 +38,36 @@
// @param $styles {String} the styles to apply to the pseudo-element
// @param $content {String} the content to insert into the element (similar to css `content` attribute)
// @param $name {String} the name of the element
// @content
@mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
@include ie-pseudo($styles, $content, before, $name);
@if archetype-version('Sass >= 3.2') {
@include ie-pseudo($styles, $content, before, $name) {
@content;
}
}
@else {
@include ie-pseudo($styles, $content, before, $name);
}
}

// proxy for ie-pseudo
// @mixin ie-pseudo-after
// @param $styles {String} the styles to apply to the pseudo-element
// @param $content {String} the content to insert into the element (similar to css `content` attribute)
// @param $name {String} the name of the element
// @content
@mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
@include ie-pseudo($styles, $content, after, $name);
@if archetype-version('Sass >= 3.2') {
@include ie-pseudo($styles, $content, after, $name) {
@content;
}
}
@else {
@include ie-pseudo($styles, $content, after, $name);
}
}

// this creates a one-type executing expression that inserts an element relative to `this` element.
// this creates a one-time executing expression that inserts an element relative to `this` element.
// this allows some level of support for :before/:after in IE6/7
// inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
// @mixin ie-pseudo
Expand All @@ -60,6 +76,7 @@
// @param $placement {String} [before|after] simulate :before or :after behavior
// @param $name {String} the name of the element
// @param $uid {String} a custom, unique identifier for the generate element
// @content
@mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '', $uid: false) {
$archetype-pseudo-selector: false;
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
Expand All @@ -77,7 +94,10 @@
@if not $CONFIG_GENERATED_TAG_INLINE {
// output it on the generated selector
#{$archetype-pseudo-selector} {
@include to-styles(-style-string-to-list($styles));
@include to-styles(-style-string-to-list(unquote($styles)));
@if archetype-version('Sass >= 3.2') {
@content;
}
}
}
}
Expand Down
10 changes: 8 additions & 2 deletions stylesheets/archetype/_ui.scss
View file
Open in desktop
Expand Up @@ -170,6 +170,7 @@
// @param $placement {String} where to place the icon [before|after|inline]
// @param $ie-styles {String} styles to apply to IE6/7 (this is needed because the faux :before isn't extendable)
// @param $ie-uid {String} a custom, unique identifier for the generate IE6/7 element
// @content
@mixin glyph-icon($icon, $size: default, $color: inherit, $placement: before, $ie-styles: false, $ie-uid: false) {
$archetype-glyph-selector: false;
$char-mapping: nil;
Expand All @@ -195,7 +196,7 @@
}
$selector: if(index(before after, $placement), '&:#{$placement}', '&');
#{$selector} {
font-family: '#{$CONFIG_GLYPHS_NAME}';
font-family: '#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';
font-weight: $CONFIG_GLYPHS_WEIGHT;
font-style: $CONFIG_GLYPHS_STYLE;
text-decoration: inherit;
Expand All @@ -209,7 +210,7 @@
$archetype-glyph-selector: $selector;
@if($selector != '&' and $ie-styles != nil) {
// support for IE6/7
$styles: "font-family:'#{$CONFIG_GLYPHS_NAME}';font-weight:#{$CONFIG_GLYPHS_WEIGHT};font-style:#{$CONFIG_GLYPHS_STYLE};text-decoration:inherit;";
$styles: "font-family:'#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';font-weight:#{$CONFIG_GLYPHS_WEIGHT};font-style:#{$CONFIG_GLYPHS_STYLE};text-decoration:inherit;";
@if($size != nil) {
$styles: $styles + "font-size:#{$size};"
}
Expand All @@ -224,6 +225,11 @@
$archetype-glyph-selector: '#{$selector}, #{$archetype-pseudo-selector}';
}
}
@if archetype-version('Sass >= 3.2') {
#{$archetype-glyph-selector} {
@content;
}
}
}
}

Expand Down
2 changes: 2 additions & 0 deletions stylesheets/archetype/util/_targeting.scss
View file
Open in desktop
Expand Up @@ -86,6 +86,7 @@
// @param $value {*} the CSS value
// @param $merge {Bool} should the class name be merged e.g. `.ie8.example` vs `.ie8 .example`
// @param $inline {Bool} if set to false, don't use inline hacks even if available
// @content
// @usage:
// =target-browser(ie 8, border, 10px);
// =target-browser(ie lte 7, padding, 0);
Expand Down Expand Up @@ -178,6 +179,7 @@
// @param $property {String} the CSS property
// @param $value {*} the CSS value
// @param $merge {Bool} should the class name be merged e.g. `.os-win.example` vs `.os-win .example`
// @content
@mixin target-os($os: (), $property: nil, $value: nil, $merge: false) {
$os: -compass-list($os);
$using: if($merge, '&', ' &');
Expand Down
64 changes: 32 additions & 32 deletions test/fixtures/stylesheets/archetype/expected/styleguide/alerts.css
View file
Open in desktop
Expand Up @@ -16,10 +16,10 @@
line-height: 20px;
position: relative;
padding: 10px 20px 10px 50px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
}
.alert.error:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -49,10 +49,10 @@
width: 11px;
height: 11px;
text-indent: 12px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
}
.alert.error .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -92,10 +92,10 @@
line-height: 20px;
position: relative;
padding: 10px 20px 10px 50px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
}
.alert.success:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -125,10 +125,10 @@
width: 11px;
height: 11px;
text-indent: 12px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
}
.alert.success .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -168,10 +168,10 @@
line-height: 20px;
position: relative;
padding: 10px 20px 10px 50px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
}
.alert.notice:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -201,10 +201,10 @@
width: 11px;
height: 11px;
text-indent: 12px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
}
.alert.notice .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -244,10 +244,10 @@
line-height: 20px;
position: relative;
padding: 10px 20px 10px 50px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;",this.insertBefore(this.el));
}
.alert.yield:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -277,10 +277,10 @@
width: 11px;
height: 11px;
text-indent: 12px;
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:11px;color:inherit;text-decoration:none;",this.insertBefore(this.el));
}
.alert.yield .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -323,7 +323,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.error:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -333,7 +333,7 @@
content: "\f057";
}
.alert.error #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -364,7 +364,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.error .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -374,7 +374,7 @@
content: "\f00d";
}
.alert.error .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -416,7 +416,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.success:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -426,7 +426,7 @@
content: "\f058";
}
.alert.success #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -457,7 +457,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.success .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -467,7 +467,7 @@
content: "\f00d";
}
.alert.success .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -509,7 +509,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.notice:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -519,7 +519,7 @@
content: "\f05a";
}
.alert.notice #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -550,7 +550,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.notice .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -560,7 +560,7 @@
content: "\f00d";
}
.alert.notice .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -602,7 +602,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.yield:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -612,7 +612,7 @@
content: "\f071";
}
.alert.yield #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down Expand Up @@ -643,7 +643,7 @@
*zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
}
.alert.yield .dismiss:before {
font-family: "FontAwesome";
font-family: "FontAwesome-0.0.1", "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand All @@ -653,7 +653,7 @@
content: "\f00d";
}
.alert.yield .dismiss #ie-pseudo-archetype-uid-RANDOM_UID {
"font-family: 'FontAwesome';
font-family: 'FontAwesome-0.0.1', 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
Expand Down