diff --git a/Gemfile b/Gemfile index 07d37d2..c2e0cf5 100644 --- a/Gemfile +++ b/Gemfile @@ -10,5 +10,4 @@ unless ENV["CI"] gem 'sassdoc' gem 'rdoc' gem 'colorize' - gem 'fileutils' end diff --git a/VERSION.yml b/VERSION.yml deleted file mode 100644 index 3de7ba4..0000000 --- a/VERSION.yml +++ /dev/null @@ -1,6 +0,0 @@ ---- -:major: 0 -:minor: 0 -:build: 1 -:state: pre -:iteration: 3 diff --git a/archetype.gemspec b/archetype.gemspec index f6adb01..ce0f354 100644 --- a/archetype.gemspec +++ b/archetype.gemspec @@ -20,7 +20,7 @@ Gem::Specification.new do |gemspec| # Gem Files gemspec.executables = %w(archetype) - gemspec.files = %w(LICENSE README.md CHANGELOG.md VERSION.yml) + gemspec.files = %w(LICENSE README.md CHANGELOG.md) gemspec.files += Dir.glob("bin/*") gemspec.files += Dir.glob("lib/**/*") gemspec.files += Dir.glob("stylesheets/**/*") @@ -34,8 +34,8 @@ Gem::Specification.new do |gemspec| ## Gem Bookkeeping gemspec.rubygems_version = %q{1.3.6} # dependencies - gemspec.add_dependency('compass') - gemspec.add_dependency('sass') + gemspec.add_dependency('sass', '>= 3.2', '< 3.3') + gemspec.add_dependency('compass', '>= 0.12', '< 1.0') # required for OrderedHash on Ruby < 1.9 gemspec.add_dependency('hashery') end diff --git a/lib/archetype/functions/helpers.rb b/lib/archetype/functions/helpers.rb index 933bbe2..d6ffa59 100644 --- a/lib/archetype/functions/helpers.rb +++ b/lib/archetype/functions/helpers.rb @@ -60,16 +60,6 @@ def self.list_to_hash(list, depth = 0, nest = [], additives = []) list.each do |item| item = item.to_a - # if a 3rd item exists, we probably forgot a comma or parens somewhere - if previous.nil? and not item[2].nil? - msg = "you're likely missing a comma or parens in your data structure" - begin - logger.record(:warning, "#{msg}: #{item}") - rescue - logger.record(:warning, msg) - end - end - # convert the key to a string and strip off quotes key = to_str(item[0], ' ' , :quotes) # capture the value diff --git a/lib/archetype/sass_extensions/monkey_patches/handle_include_loop.rb b/lib/archetype/sass_extensions/monkey_patches/handle_include_loop.rb index f7e5017..5b66c3f 100644 --- a/lib/archetype/sass_extensions/monkey_patches/handle_include_loop.rb +++ b/lib/archetype/sass_extensions/monkey_patches/handle_include_loop.rb @@ -5,35 +5,7 @@ module Tree module Visitors class Perform def handle_include_loop!(node) - # a list of exempt mixins - exempt = %w(to-styles output-style -outputStyle) - exempts = [] - - msg = "An @include loop has been found:" - content_count = 0 - mixins = @stack.reverse.map {|s| s[:name]}.compact.select do |s| - if s == '@content' - content_count += 1 - false - elsif content_count > 0 - content_count -= 1 - false - # if the mixin is exempt, keep track of it - elsif exempt.include?(s.gsub(/_/,'-')) - exempts.push(s) - false - else - true - end - end - - return if mixins.empty? or (mixins.size <= exempts.size) - raise Sass::SyntaxError.new("#{msg} #{node.name} includes itself") if mixins.size == 1 - - msg << "\n" << Sass::Util.enum_cons(mixins.reverse + [node.name], 2).map do |m1, m2| - " #{m1} includes #{m2}" - end.join("\n") - raise Sass::SyntaxError.new(msg) + # do nothing end end end diff --git a/lib/archetype/version.rb b/lib/archetype/version.rb index f1056f7..738a60e 100644 --- a/lib/archetype/version.rb +++ b/lib/archetype/version.rb @@ -1,75 +1,3 @@ module Archetype - module Version - # - # Returns a string representing the version. - # - # The :major, :minor, and :teeny keys have their respective numbers. - # The :string key contains a human-readable string representation of the version. - # The :rev key will have the current revision hash. - # - # Method borrowed from Compass. All credit goes to Chris Eppstein and other contributors - # https://github.com/chriseppstein/compass/blob/stable/lib/compass/version.rb - # \(This method swiped from Haml and then modified, some credit goes to Nathan Weizenbaum\) - # - # *Returns*: - # - {String} the version of Archetype - # - def version - if defined?(@version) - @version - else - read_version - end - end - - protected - def scope(file) # :nodoc: - File.join(File.dirname(__FILE__), '..', '..', file) - end - - def read_version - require 'yaml' - begin - @version = YAML.load(File.read(scope('VERSION.yml'))) - @version[:teeny] = @version[:patch] - @version[:string] = "#{@version[:major]}.#{@version[:minor]}" - @version[:string] << ".#{@version[:patch]}" if @version[:patch] - @version[:string] << ".#{@version[:build]}" if @version[:build] - @version[:string] << ".#{@version[:state]}" if @version[:state] - @version[:string] << ".#{@version[:iteration]}" if @version[:iteration] - if !ENV['OFFICIAL'] && r = revision - @version[:string] << ".#{r[0..6]}" - @version[:rev] = r - end - return @version - rescue - # this is a hack, but I'm not fully understanding how to fix this correctly - # see issue #4 - # if it failed, try again, for now - return read_version - end - end - - def revision - revision_from_git - end - - def revision_from_git - if File.exists?(scope('.git/HEAD')) - Dir.chdir scope(".") do - `git rev-parse HEAD` - end - end - end - end - - extend Archetype::Version - def self.const_missing(const) - # This avoid reading from disk unless the VERSION is requested. - if const == :VERSION - version[:string] - else - super - end - end + VERSION = '0.0.1.pre.8' end \ No newline at end of file diff --git a/stylesheets/archetype/_config.scss b/stylesheets/archetype/_config.scss index 3b25a9f..2db2abf 100644 --- a/stylesheets/archetype/_config.scss +++ b/stylesheets/archetype/_config.scss @@ -326,13 +326,15 @@ $CORE_SAFE_FONTS: ( (ko_KR ('Malgun Gothic', default)), (zh_TW (SimSun, default)), (zh_CN (SimSun, default)), + (th_TH (Tahoma, default)), (ar_AE (Tahoma, Arial, 'Times New Roman', default)) )), (win, ( (default (Arial, sans-serif)), (ja_JP (メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', default)), (zh_TW (default, '微軟正黑體', 'Microsoft JhengHei', PMingLiu, '宋体', SimSun)), - (zh_CN (default, '华文细黑', 'STHeiti Light', '微软雅黑体', 'Microsoft Yahei', '新宋体', NSimSun, '宋体', SimSun)), + (zh_CN (Arial, '华文细黑', 'STHeiti Light', '微软雅黑体', 'Microsoft Yahei', '新宋体', NSimSun, '宋体', SimSun)), // Heiti/Yahei not showing up in Chrome and FF in windows. Removal of sans-serif fixes it. + (th_TH nil), (ko_KR nil), (ar_AE nil) )), @@ -341,6 +343,7 @@ $CORE_SAFE_FONTS: ( (zh_TW (default, '黑體-繁', 'Heiti TC', '儷黑Pro', 'LiHei Pro', PMingLiu, '宋体', SimSun)), (zh_CN (default, '黑体-简', 'Heiti SC', '华文细黑', 'STHeiti Light', '华文黑体', STHeiti)), (ja_JP ('Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'MS PGothic', default)), + (th_TH nil), (ko_KR nil), (ar_AE nil) )), @@ -349,6 +352,7 @@ $CORE_SAFE_FONTS: ( (zh_TW (default, PMingLiu, '宋体', SimSun)), (zh_CN (default, '新宋体', NSimSun, '宋体', SimSun)), (ja_JP nil), + (th_TH nil), (ko_KR nil), (ar_AE nil) )) diff --git a/stylesheets/archetype/_hacks.scss b/stylesheets/archetype/_hacks.scss index 1a7d0b2..14551a3 100644 --- a/stylesheets/archetype/_hacks.scss +++ b/stylesheets/archetype/_hacks.scss @@ -40,13 +40,8 @@ // @param $name {String} the name of the element // @content @mixin ie-pseudo-before($styles: false, $content: false, $name: '') { - @if archetype-version('Sass >= 3.2') { - @include ie-pseudo($styles, $content, before, $name) { - @content; - } - } - @else { - @include ie-pseudo($styles, $content, before, $name); + @include ie-pseudo($styles, $content, before, $name) { + @content; } } @@ -57,17 +52,12 @@ // @param $name {String} the name of the element // @content @mixin ie-pseudo-after($styles: false, $content: false, $name: '') { - @if archetype-version('Sass >= 3.2') { - @include ie-pseudo($styles, $content, after, $name) { - @content; - } - } - @else { - @include ie-pseudo($styles, $content, after, $name); + @include ie-pseudo($styles, $content, after, $name) { + @content; } } -// this creates a one-time executing expression that inserts an element relative to `this` element. +// this creates a one-type 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 @@ -82,14 +72,29 @@ @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { $uid: if($uid, $uid, unique('ie-pseudo-')); $archetype-pseudo-selector: '& ##{$uid}'; + $this: 't'; + $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}")')); $method: if($placement == before, insertBefore, appendChild); - $content: if($content and $content != nil, 'this.el.innerHTML="#{-ie-pseudo-content($content)}",', ''); + @if $content and $content != nil { + $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'), comma); + } @if $CONFIG_GENERATED_TAG_CSS { $styles: if($styles and $styles != nil, #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS); } - // if we're using inline styles... - $inline: if($styles and $styles != nil and $CONFIG_GENERATED_TAG_INLINE, 'this.el.style.cssText="#{$styles}",', ''); - *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("#{prefixed-tag($name)}"),this.el.id="#{$uid}",#{$content}#{$inline}this.#{$method}(this.el)); + @if $styles and $styles != nil and $styles != '' and $CONFIG_GENERATED_TAG_INLINE { + // sets the icon styles on the node + $cmd: append($cmd, unquote('#{$this}.el.style.cssText="#{$styles}"'), comma); + } + // if we're using the insertBefore method, we need to specify the node reference to the first childNode + $reference-node: if($placement == before, ',#{$this}.childNodes[0]||null', ''); + $cmd: append($cmd, unquote('#{$this}.#{$method}(#{$this}.el#{$reference-node})'), comma); + $runOnce: unquote('this.runtimeStyle.zoom="1"'); // this ensures the expression is only invoked once + + // we execute in a setTimeout to decouple from the current UI thread + // this prevents an edge case in IE crashing with an `Operation Aborted` if the node hasn't finished rendering yet + // http://www.nczonline.net/blog/2008/03/17/the-dreaded-operation-aborted-error/ + *zoom: expression(#{$runOnce},(function(#{$this}){setTimeout(function(){#{$cmd}})}(this))); + // if we're NOT using inline styles... @if not $CONFIG_GENERATED_TAG_INLINE { // output it on the generated selector @@ -113,4 +118,4 @@ @if $url { @include target-browser(ie lte 7, background, append($bg, $url)); } -} +} \ No newline at end of file diff --git a/stylesheets/archetype/_ui.scss b/stylesheets/archetype/_ui.scss index 8f33df6..5cb2fdb 100644 --- a/stylesheets/archetype/_ui.scss +++ b/stylesheets/archetype/_ui.scss @@ -71,7 +71,7 @@ // @param $color {Color} the color of the arrow @mixin triangle($direction: bottom, $width: 1em, $height: false, $color: #aaa) { $direction: rtl($direction); - // if no height was specified, assume it's identical to width + // if no height was specified, assume it's identitcal to width @if(not $height) { $height: $width; } @@ -125,7 +125,7 @@ // @param $width {String} value for the width property // @param $overflow {String} value for the overflow property @mixin unhide-element($position: static, $height:auto, $width:auto, $overflow:visible) { - position: $position; + position: $position !important; height: $height; width: $width; overflow: $overflow; @@ -192,7 +192,7 @@ } // if the size is under a given threshold, use a halfling, if available @if $icon { - $char-code: nth-cyclic(-compass-list($char-code), if(comparable($CONFIG_GLYPHS_THRESHOLD, $size) and $size <= $CONFIG_GLYPHS_THRESHOLD, 2, 1)); + $char-code: nth(-compass-list($char-code), 1); } $selector: if(index(before after, $placement), '&:#{$placement}', '&'); #{$selector} { @@ -220,15 +220,14 @@ @if($ie-styles) { $styles: $styles + $ie-styles; } + @include ie-pseudo($styles: $styles, $content: $char-code, $placement: $placement, $name: glyph, $uid: $ie-uid); @if $archetype-pseudo-selector { $archetype-glyph-selector: '#{$selector}, #{$archetype-pseudo-selector}'; } } - @if archetype-version('Sass >= 3.2') { - #{$archetype-glyph-selector} { - @content; - } + #{$archetype-glyph-selector} { + @content; } } } @@ -270,25 +269,33 @@ } } @else { - @-webkit-keyframes #{$CONFIG_KEYFRAME_LOADERS} { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(360deg); } + @if $experimental-support-for-webkit { + @-webkit-keyframes #{$CONFIG_KEYFRAME_LOADERS} { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } + } } - @-moz-keyframes #{$CONFIG_KEYFRAME_LOADERS} { - from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(360deg); } + @if $experimental-support-for-mozilla { + @-moz-keyframes #{$CONFIG_KEYFRAME_LOADERS} { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(360deg); } + } } - @-ms-keyframes #{$CONFIG_KEYFRAME_LOADERS} { - from { -ms-transform: rotate(0deg); } - to { -ms-transform: rotate(360deg); } + @if $experimental-support-for-microsoft { + @-ms-keyframes #{$CONFIG_KEYFRAME_LOADERS} { + from { -ms-transform: rotate(0deg); } + to { -ms-transform: rotate(360deg); } + } } - @-o-keyframes #{$CONFIG_KEYFRAME_LOADERS} { - from { -o-transform: rotate(0deg); } - to { -o-transform: rotate(360deg); } + @if $experimental-support-for-opera { + @-o-keyframes #{$CONFIG_KEYFRAME_LOADERS} { + from { -o-transform: rotate(0deg); } + to { -o-transform: rotate(360deg); } + } } @keyframes #{$CONFIG_KEYFRAME_LOADERS} { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } } } @@ -350,4 +357,4 @@ border: none; padding: 0; @include appearance(none); -} \ No newline at end of file +} diff --git a/stylesheets/archetype/styleguide/_helpers.scss b/stylesheets/archetype/styleguide/_helpers.scss index 196d32f..13d00e7 100644 --- a/stylesheets/archetype/styleguide/_helpers.scss +++ b/stylesheets/archetype/styleguide/_helpers.scss @@ -22,7 +22,7 @@ // @function _styleguideGetButtonPadding // @private // @param $size {String} the size of the button to calculate -// @param $narrow {Boolean} is the button narrow or not +// @param $narrow {Bool} is the button narrow or not // @return {Number} the padding on the button @function _styleguideGetButtonPadding($size: medium, $narrow: false) { @if type-of($size) != list { @@ -63,7 +63,7 @@ // helper function to get the alert icon offset // @function _styleguideGetAlertGlyphOffset // @private -// @param $type {List} the glyph data +// @param $type {List} the glpyh data // @return {List} the top and left offsets for the glyph @function _styleguideGetAlertGlyphOffset($type: $CONFIG_GLYPH_ALERT_NOTIFY) { $top: (nth-cyclic($CONFIG_DIM_ALERTS_SPACING, 1) + nth-cyclic($CONFIG_DIM_ALERTS_SPACING, 3) + nth-cyclic($CONFIG_FONT_NOTICE, 2) - nth($type, 4)) / 2; @@ -74,10 +74,13 @@ // helper function to extract the glyhp styles for an alert icon // @function _styleguideGetAlertGlyph // @private -// @param $type {List} the glyph data +// @param $type {List} the glpyh data // @return {List} the parameters needed for glyph-icon() @function _styleguideGetAlertGlyph($type: $CONFIG_GLYPH_ALERT_NOTIFY) { - @return (nth($type, 1), nth($type, 2), nth($type, 3), before, '') + $offset: _styleguideGetAlertGlyphOffset($type); + $top: nth($offset, 1); + $left: nth($offset, 2); + @return (nth($type, 1), nth($type, 2), nth($type, 3), before, 'position:absolute;line-height:1;top:#{$top};left:#{$left};') } diff --git a/stylesheets/archetype/styleguide/components/_alerts.scss b/stylesheets/archetype/styleguide/components/_alerts.scss index ddcbf8c..9f2a2c2 100644 --- a/stylesheets/archetype/styleguide/components/_alerts.scss +++ b/stylesheets/archetype/styleguide/components/_alerts.scss @@ -23,7 +23,7 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_ALERTS_ID, $STYLEGUIDE_ALERTS padding $CONFIG_DIM_ALERTS_SPACING, glyph-icon _styleguideGetAlertGlyph($CONFIG_GLYPH_ALERT_NOTIFY), (selectors, ( - ($CORE_GLYPH_SELECTOR_VAR, ( + ('&:before', ( position absolute, top nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 1), left nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 2), diff --git a/stylesheets/archetype/styleguide/components/_closes.scss b/stylesheets/archetype/styleguide/components/_closes.scss index 13a491f..791941a 100644 --- a/stylesheets/archetype/styleguide/components/_closes.scss +++ b/stylesheets/archetype/styleguide/components/_closes.scss @@ -21,9 +21,9 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_CLOSES_ID, $STYLEGUIDE_CLOSE width nth($CONFIG_GLYPH_CLOSE, 4), height nth($CONFIG_GLYPH_CLOSE, 4), text-indent (nth($CONFIG_GLYPH_CLOSE, 4) + 1px), - glyph-icon (nth($CONFIG_GLYPH_CLOSE, 1), nth($CONFIG_GLYPH_CLOSE, 2), nth($CONFIG_GLYPH_CLOSE, 3), before, 'text-decoration:none;'), + glyph-icon (nth($CONFIG_GLYPH_CLOSE, 1), nth($CONFIG_GLYPH_CLOSE, 2), nth($CONFIG_GLYPH_CLOSE, 3), before, 'text-decoration:none;vertical-align:top;line-height:1;position:absolute;top:0;right:0;'), (selectors, ( - ($CORE_GLYPH_SELECTOR_VAR, ( + ('&:before', ( vertical-align top, line-height 1, position absolute, diff --git a/stylesheets/archetype/styleguide/components/_links.scss b/stylesheets/archetype/styleguide/components/_links.scss index 7a3b49d..c38631b 100644 --- a/stylesheets/archetype/styleguide/components/_links.scss +++ b/stylesheets/archetype/styleguide/components/_links.scss @@ -56,6 +56,8 @@ $a-blackhole: styleguide-add-component($STYLEGUIDE_LINKS_ID, $STYLEGUIDE_LINKS, (states, ( (hover, ( color nth($CONFIG_COLOR_BRAND, 1), + cursor pointer, + target-browser (ie, cursor, hand), text-decoration none )), nil diff --git a/stylesheets/archetype/util/_styles.scss b/stylesheets/archetype/util/_styles.scss index 05873d0..b072a04 100644 --- a/stylesheets/archetype/util/_styles.scss +++ b/stylesheets/archetype/util/_styles.scss @@ -10,7 +10,10 @@ // @param $value {*} the CSS value to output @mixin _outputStyle($property, $value: nil) { @if($value != nil) { - @if($property == target-browser) { + @if($property == round-button-ie-support) { + @include round-button-ie-support($value) + } + @else if($property == target-browser) { @include target-browser(nth($value,1), nth($value,2), nth($value,3)); } @else if($property == font-family) { @@ -19,12 +22,21 @@ @else if($property == font-style) { @include font-style($value); } + @else if($property == hide-element) { + @include hide-element(); + } @else { @include output-style($property, $value); } } } +// Themes can override this function & custom-output-styler to add their own +// custom style includes. +@function has-custom-output-styler($property, $value, $method:pre){ + @return false; +} + // output a property or augment it to use a mixin // @mixin output-style // @param $property {String} the CSS property to output @@ -38,7 +50,7 @@ @include custom-output-styler($property, $value, $method: pre); } // border-radius - @else if($property == border-radius) { @include border-radius(rtl($value, border-radius)); } + @else if($property == border-radius) { @include border-radius(rtl($value, border-radius)); } // box-sizing @else if($property == box-sizing) { @include box-sizing($value); } // box-shadow @@ -56,7 +68,7 @@ // background-size @else if($property == background-size) { @include background-size($value); } // background-origin - @else if($property == background-origin) { @include background-origin($value); } + @else if($property == background-origin) { @include background-origin($value); } // IE filters @else if($property == ie-filter) { @include ie-filter($value); } // hide-text @@ -83,28 +95,6 @@ @else if($property == ellipsis) { @include ellipsis(); } // scale @else if($property == scale) { @include scale($value); } - // bunch of RTL support - @else if($property == margin) { @include margin($value); } - @else if($property == margin-left) { @include margin-left($value); } - @else if($property == margin-right) { @include margin-right($value); } - @else if($property == padding) { @include padding($value); } - @else if($property == padding-left) { @include padding-left($value); } - @else if($property == padding-right) { @include padding-right($value); } - @else if($property == border-width) { @include border-width($value); } - @else if($property == border-left-width) { @include border-left-width($value); } - @else if($property == border-right-width) { @include border-right-width($value); } - @else if($property == border-color) { @include border-color($value); } - @else if($property == border-left-color) { @include border-left-color($value); } - @else if($property == border-right-color) { @include border-right-color($value); } - @else if($property == border-style) { @include border-style($value); } - @else if($property == border-left-style) { @include border-left-style($value); } - @else if($property == border-right-style) { @include border-right-style($value); } - @else if($property == clear) { @include clear($value); } - @else if($property == float) { @include float($value); } - @else if($property == text-align) { @include text-align($value); } - @else if($property == background-position) { @include background-position($value); } - @else if($property == left) { @include left($value); } - @else if($property == right) { @include right($value); } @else if($property == glyph-icon) { @include glyph-icon(nth($value, 1), nth($value, 2), nth($value, 3), nth($value, 4), nth($value, 5)); } @else if($property == extend) { @extend #{$value}; } // animations @@ -113,10 +103,18 @@ @include animation($value); } @else { - -webkit-animation: $value; - -moz-animation: $value; - -ms-animation: $value; - -o-animation: $value; + @if $experimental-support-for-webkit { + -webkit-animation: $value; + } + @if $experimental-support-for-mozilla { + -moz-animation: $value; + } + @if $experimental-support-for-microsoft { + -ms-animation: $value; + } + @if $experimental-support-for-opera { + -o-animation: $value; + } animation: $value; } } @@ -148,8 +146,6 @@ @if(length($value) > 1) { @include z-index(nth($value, 1), nth($value, 2)); } @else { @include z-index($value); } } - // make sure content is always quoted - @else if($property == content) { #{$property}: quote($value); } // :before/:after @else if($property == ie-pseudo-before or $property == ie-pseudo-after) { $value: -compass-list($value); @@ -168,6 +164,8 @@ @include ie-pseudo-after(nth($value, 1), $content, $tag); } } + //ellipsis + @else if($property == ellipsis) { @include ellipsis(); } // check to see if we have a custom output styler (post) @else if has-custom-output-styler($property, $value, post) == true { @include custom-output-styler($property, $value, $method: post); @@ -216,6 +214,7 @@ // otherwise, just output it @else if($selectors == true and $states == true ) { @include _outputStyle($property, unquote($value)); + } } } diff --git a/stylesheets/archetype/util/_targeting.scss b/stylesheets/archetype/util/_targeting.scss index b7b396a..da7cf23 100644 --- a/stylesheets/archetype/util/_targeting.scss +++ b/stylesheets/archetype/util/_targeting.scss @@ -5,11 +5,10 @@ @if $vendor != ie { @return true; } $compass-not-legacy-ie-version: 9; // the version if IE that Compass starts considering `legacy` $min-ie-legacy-support: 999; - $supported-legacy-ie: (); - @if($legacy-support-for-ie8) { $min-ie-legacy-support: 8; $supported-legacy-ie: append($supported-legacy-ie, 8); } - @if($legacy-support-for-ie7) { $min-ie-legacy-support: 7; $supported-legacy-ie: append($supported-legacy-ie, 7); } - @if($legacy-support-for-ie6) { $min-ie-legacy-support: 6; $supported-legacy-ie: append($supported-legacy-ie, 6); } - @return if($comparator == lte, $version >= $min-ie-legacy-support, index($supported-legacy-ie, $version)); + @if($legacy-support-for-ie8) { $min-ie-legacy-support: 8; } + @if($legacy-support-for-ie7) { $min-ie-legacy-support: 7; } + @if($legacy-support-for-ie6) { $min-ie-legacy-support: 6; } + @return ($version >= $min-ie-legacy-support); } // given a list of browsers and versions, this will consolidate them into a @@ -53,6 +52,7 @@ } // otherwise assume it's a version @else if(type-of($item) == number) { + $unversioned: list-remove($unversioned, index($unversioned, '.#{$vendor}#{$using}')); $tmp: $item; // if it's equalitative, prefix the vendor onto the version @if(not $comparator or $comparator == eq) { @@ -65,7 +65,6 @@ @if($vendor and _isLegacySupported($vendor, $comparator, $tmp)) { $item: '.#{$vendor}.#{$item}#{$using}'; $list: append($list, unquote($item), comma); - $unversioned: list-remove($unversioned, index($unversioned, '.#{$vendor}#{$using}')); } // restore temps $version-adjust: 0; @@ -84,9 +83,8 @@ // @param $browsers {List} the List of browsers to target // @param $property {String} the CSS property // @param $value {*} the CSS value -// @param $merge {Boolean} should the class name be merged e.g. `.ie8.example` vs `.ie8 .example` -// @param $inline {Boolean} if set to false, don't use inline hacks even if available -// @content +// @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 // @usage: // =target-browser(ie 8, border, 10px); // =target-browser(ie lte 7, padding, 0); @@ -151,7 +149,7 @@ $prefix: nth(('_', '*'), $idx); $value: if(index($CORE_CSS_RTL_VALUE_SUPPORT, $property), rtl($value, $property), $value); // NOTE: RTL support on properties like `border-left-width` won't fully work until Compass/Sass support string replace methods - @include debug-message("[archetype:target-browser:being] --- #{$browsers} ---"); + @include debug-message("[archetype:target-browser:begin] --- #{$browsers} ---"); @include output-style(#{$prefix}#{rtl($property)}, $value); @include debug-message("[archetype:target-browser:end] --- #{$browsers} ---"); $value: nil; @@ -178,8 +176,7 @@ // @param $os {List} the List of operating systems to target // @param $property {String} the CSS property // @param $value {*} the CSS value -// @param $merge {Boolean} should the class name be merged e.g. `.os-win.example` vs `.os-win .example` -// @content +// @param $merge {Bool} should the class name be merged e.g. `.os-win.example` vs `.os-win .example` @mixin target-os($os: (), $property: nil, $value: nil, $merge: false) { $os: -compass-list($os); $using: if($merge, '&', ' &'); diff --git a/stylesheets/archetype/util/_units.scss b/stylesheets/archetype/util/_units.scss index caf31c1..9897e9e 100644 --- a/stylesheets/archetype/util/_units.scss +++ b/stylesheets/archetype/util/_units.scss @@ -4,7 +4,7 @@ // @function _getUnit // @private // @param $number {Number} unit of measurement -// @param $abuse {Boolean} if `false`, $number cannot be a fraction +// @param $abuse {Bool} if `false`, $number cannot be a fraction // @return $number {Number} normalized number of measurement @function _getUnit($number, $abuse: false) { @if(not unitless($number)) { diff --git a/test/fixtures/stylesheets/archetype/expected/hacks/ie_pseudo.css b/test/fixtures/stylesheets/archetype/expected/hacks/ie_pseudo.css index 626c2a7..c7324b3 100644 --- a/test/fixtures/stylesheets/archetype/expected/hacks/ie_pseudo.css +++ b/test/fixtures/stylesheets/archetype/expected/hacks/ie_pseudo.css @@ -1,11 +1,11 @@ .before { - *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.style.cssText="color: red; background: green;",this.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype"), t.el.style.cssText="color: red; background: green;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .after-content { - *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="➽",this.appendChild(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype"), t.el.innerHTML="➽", t.appendChild(t.el)})}(this))); } .before-style-content { - *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="testing ➽if this works",this.el.style.cssText="color: red; background: green;",this.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype"), t.el.innerHTML="testing ➽if this works", t.el.style.cssText="color: red; background: green;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } diff --git a/test/fixtures/stylesheets/archetype/expected/styleguide/alerts.css b/test/fixtures/stylesheets/archetype/expected/styleguide/alerts.css index 7dd7bbf..4e7c4ba 100644 --- a/test/fixtures/stylesheets/archetype/expected/styleguide/alerts.css +++ b/test/fixtures/stylesheets/archetype/expected/styleguide/alerts.css @@ -16,7 +16,7 @@ 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-0.0.1', '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",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;position:absolute;line-height:1;top:6px;left:11px;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.error:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -28,7 +28,7 @@ color: inherit; content: "\f057"; } -.alert.error:before, .alert.error #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.error:before { position: absolute; top: 6px; left: 11px; @@ -49,7 +49,7 @@ 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-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)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.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;vertical-align:top;line-height:1;position:absolute;top:0;right:0;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.error .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -61,7 +61,7 @@ color: inherit; content: "\f00d"; } -.alert.error .dismiss:before, .alert.error .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.error .dismiss:before { vertical-align: top; line-height: 1; position: absolute; @@ -92,7 +92,7 @@ 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-0.0.1', '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",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;position:absolute;line-height:1;top:6px;left:11px;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.success:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -104,7 +104,7 @@ color: inherit; content: "\f058"; } -.alert.success:before, .alert.success #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.success:before { position: absolute; top: 6px; left: 11px; @@ -125,7 +125,7 @@ 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-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)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.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;vertical-align:top;line-height:1;position:absolute;top:0;right:0;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.success .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -137,7 +137,7 @@ color: inherit; content: "\f00d"; } -.alert.success .dismiss:before, .alert.success .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.success .dismiss:before { vertical-align: top; line-height: 1; position: absolute; @@ -168,7 +168,7 @@ 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-0.0.1', '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",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;position:absolute;line-height:1;top:6px;left:11px;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.notice:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -180,7 +180,7 @@ color: inherit; content: "\f05a"; } -.alert.notice:before, .alert.notice #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.notice:before { position: absolute; top: 6px; left: 11px; @@ -201,7 +201,7 @@ 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-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)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.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;vertical-align:top;line-height:1;position:absolute;top:0;right:0;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.notice .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -213,7 +213,7 @@ color: inherit; content: "\f00d"; } -.alert.notice .dismiss:before, .alert.notice .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.notice .dismiss:before { vertical-align: top; line-height: 1; position: absolute; @@ -244,7 +244,7 @@ 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-0.0.1', '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",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:36px;color:inherit;position:absolute;line-height:1;top:6px;left:11px;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.yield:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -256,7 +256,7 @@ color: inherit; content: "\f071"; } -.alert.yield:before, .alert.yield #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.yield:before { position: absolute; top: 6px; left: 11px; @@ -277,7 +277,7 @@ 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-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)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.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;vertical-align:top;line-height:1;position:absolute;top:0;right:0;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.yield .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -289,7 +289,7 @@ color: inherit; content: "\f00d"; } -.alert.yield .dismiss:before, .alert.yield .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.yield .dismiss:before { vertical-align: top; line-height: 1; position: absolute; @@ -320,7 +320,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.error:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -339,8 +339,12 @@ text-decoration: inherit; font-size: 36px; color: inherit; + position: absolute; + line-height: 1; + top: 6px; + left: 11px; } -.alert.error:before, .alert.error #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.error:before { position: absolute; top: 6px; left: 11px; @@ -361,7 +365,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.error .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -381,8 +385,13 @@ font-size: 11px; color: inherit; text-decoration: none; + vertical-align: top; + line-height: 1; + position: absolute; + top: 0; + right: 0; } -.alert.error .dismiss:before, .alert.error .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.error .dismiss:before { vertical-align: top; line-height: 1; position: absolute; @@ -413,7 +422,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.success:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -432,8 +441,12 @@ text-decoration: inherit; font-size: 36px; color: inherit; + position: absolute; + line-height: 1; + top: 6px; + left: 11px; } -.alert.success:before, .alert.success #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.success:before { position: absolute; top: 6px; left: 11px; @@ -454,7 +467,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.success .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -474,8 +487,13 @@ font-size: 11px; color: inherit; text-decoration: none; + vertical-align: top; + line-height: 1; + position: absolute; + top: 0; + right: 0; } -.alert.success .dismiss:before, .alert.success .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.success .dismiss:before { vertical-align: top; line-height: 1; position: absolute; @@ -506,7 +524,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.notice:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -525,8 +543,12 @@ text-decoration: inherit; font-size: 36px; color: inherit; + position: absolute; + line-height: 1; + top: 6px; + left: 11px; } -.alert.notice:before, .alert.notice #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.notice:before { position: absolute; top: 6px; left: 11px; @@ -547,7 +569,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.notice .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -567,8 +589,13 @@ font-size: 11px; color: inherit; text-decoration: none; + vertical-align: top; + line-height: 1; + position: absolute; + top: 0; + right: 0; } -.alert.notice .dismiss:before, .alert.notice .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.notice .dismiss:before { vertical-align: top; line-height: 1; position: absolute; @@ -599,7 +626,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.yield:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -618,8 +645,12 @@ text-decoration: inherit; font-size: 36px; color: inherit; + position: absolute; + line-height: 1; + top: 6px; + left: 11px; } -.alert.yield:before, .alert.yield #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.yield:before { position: absolute; top: 6px; left: 11px; @@ -640,7 +671,7 @@ 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.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .alert.yield .dismiss:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -660,8 +691,13 @@ font-size: 11px; color: inherit; text-decoration: none; + vertical-align: top; + line-height: 1; + position: absolute; + top: 0; + right: 0; } -.alert.yield .dismiss:before, .alert.yield .dismiss #ie-pseudo-archetype-uid-RANDOM_UID { +.alert.yield .dismiss:before { vertical-align: top; line-height: 1; position: absolute; diff --git a/test/fixtures/stylesheets/archetype/expected/styleguide/nested_styleguides.css b/test/fixtures/stylesheets/archetype/expected/styleguide/nested_styleguides.css index b938c1c..4b760a9 100644 --- a/test/fixtures/stylesheets/archetype/expected/styleguide/nested_styleguides.css +++ b/test/fixtures/stylesheets/archetype/expected/styleguide/nested_styleguides.css @@ -7,8 +7,12 @@ .nested-styleguide-test.hover, .nested-styleguide-test:hover, .nested-styleguide-test.focus, .nested-styleguide-test:focus { text-decoration: none; color: #0088cc; + cursor: pointer; background: #eeeeee; } +.ie .nested-styleguide-test.hover, .ie .nested-styleguide-test:hover, .ie .nested-styleguide-test.focus, .ie .nested-styleguide-test:focus { + cursor: hand; +} .nested-styleguide-test h3 { font-size: 18px; font-weight: bold; diff --git a/test/fixtures/stylesheets/archetype/expected/ui/glyph_icon.css b/test/fixtures/stylesheets/archetype/expected/ui/glyph_icon.css index 1f554af..4a05973 100644 --- a/test/fixtures/stylesheets/archetype/expected/ui/glyph_icon.css +++ b/test/fixtures/stylesheets/archetype/expected/ui/glyph_icon.css @@ -1,7 +1,7 @@ @font-face { font-family: "FontAwesome"; src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot'); - src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('eot'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg'); + src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } @@ -9,13 +9,13 @@ @font-face { font-family: "FontAwesome-0.0.1"; src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot'); - src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('eot'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg'); + src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } .simple { - *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:100%;color:inherit;",this.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:100%;color:inherit;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .simple:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -39,7 +39,7 @@ } .size { - *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:20px;color:inherit;",this.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:20px;color:inherit;", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .size:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -53,7 +53,7 @@ } .not-inline { - *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)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .not-inline:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -75,7 +75,7 @@ } .ie-uid { - *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="my-custom-id",this.el.innerHTML="",this.insertBefore(this.el)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .ie-uid:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; @@ -100,7 +100,7 @@ } .content-block { - *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)); + *zoom: expression(this.runtimeStyle.zoom="1",(function(t){setTimeout(function(){t.el=document.createElement("x-archetype-glyph"), t.el.innerHTML="", t.insertBefore(t.el,t.childNodes[0]||null)})}(this))); } .content-block:before { font-family: "FontAwesome-0.0.1", "FontAwesome"; diff --git a/test/fixtures/stylesheets/archetype/expected/utilities/targeting/target-browser.css b/test/fixtures/stylesheets/archetype/expected/utilities/targeting/target-browser.css index 30355d7..2c710d4 100644 --- a/test/fixtures/stylesheets/archetype/expected/utilities/targeting/target-browser.css +++ b/test/fixtures/stylesheets/archetype/expected/utilities/targeting/target-browser.css @@ -64,14 +64,14 @@ background: #2c2c2b; } -.ie.ie7 .target-ie-7-8-9, .ie.ie8 .target-ie-7-8-9 { +.ie.ie7 .target-ie-7-8-9, .ie.ie8 .target-ie-7-8-9, .ie.ie9 .target-ie-7-8-9 { width: 250px; } -.ie .target-ie-9 { +.ie.ie9 .target-ie-9 { right: -83px; } -.ie .target-ie-9 { +.ie.ie9 .target-ie-9 { top: 17px; } diff --git a/test/fixtures/stylesheets/archetype/source/utilities/custom_output_styler.scss b/test/fixtures/stylesheets/archetype/source/utilities/custom_output_styler.scss index 22efecf..ad34d1a 100644 --- a/test/fixtures/stylesheets/archetype/source/utilities/custom_output_styler.scss +++ b/test/fixtures/stylesheets/archetype/source/utilities/custom_output_styler.scss @@ -1,3 +1,5 @@ +@import "archetype"; + // define the test function @function has-custom-output-styler($property, $value, $method: pre) { @if $property == color { @@ -9,13 +11,12 @@ } @return false; } + // define the custom styler @mixin custom-output-styler($property, $value, $method: pre) { #{$property}: $value; /* #{$method} override */ } -@import "archetype"; - .test { @include styleguide(copy); } \ No newline at end of file