source/stylesheets/.sass-cache/7b963f7f4dc44c7eaad58bd6c1897da558e16f47/_tooltip.scssc in refills-0.0.1 vs source/stylesheets/.sass-cache/7b963f7f4dc44c7eaad58bd6c1897da558e16f47/_tooltip.scssc in refills-0.0.2
- old
+ new
@@ -1,10 +1,10 @@
-3.2.12 (Media Mark)
-c26f89f0fc110d1dbfc8708074c48515316b192b
+3.2.13 (Media Mark)
+1fe7a0d3ff90221002393485da3088f964f6c82c
o:Sass::Tree::RootNode
:
-@linei:@has_childrenT:@template"g$tooltip-color: transparentize($dark-gray, 0.1);
+@linei:@has_childrenT:@template"Ó$tooltip-color: transparentize($dark-gray, 0.1);
$tooltip-placement: top; // "top" or "bottom"
@mixin tooltip($position) {
position: relative;
$opposite-position: bottom;
@@ -23,126 +23,96 @@
visibility: visible;
}
}
.tooltip {
+ @include position(absolute, 0 0 0 50%);
+ @include transition(all 0.15s linear);
+ @include box-sizing(border-box);
+ #{$position}: -55px;
background-color: $tooltip-color;
- box-sizing: border-box;
+ border-radius: $base-border-radius;
color: white;
font-weight: normal;
+ margin-left: -(em(200)/2);
opacity: 0;
padding: 0.5em 1em;
- border-radius: $base-border-radius;
- position: absolute;
text-align: center;
text-overflow: ellipsis;
text-shadow: 0 1px 0 darken(rgb(80,80,80), 4%);
text-transform: none;
- transition: all 0.15s linear;
- white-space: nowrap;
visibility: hidden;
- width: 200px;
+ white-space: nowrap;
+ width: em(200);
z-index: 10;
- #{$position}: -50px;
- left: 50%;
- margin-left: -(200px/2);
- &:before,
&:after {
- display: block;
- pointer-events: none;
- position: absolute;
- width: 0;
- height: 0;
- content: '';
+ @include size(0);
+ @include position(absolute, 0 0 0 em(200)/2);
border: 8px solid transparent;
- }
-
- &:before {
- top: auto;
- bottom: -18px;
- left: auto;
- right: auto;
- left: 50%;
- margin-left: -(8px + 1);
- }
-
- &:after {
border-#{$position}-color: $tooltip-color;
+ content: '';
+ pointer-events: none;
+ #{$opposite-position}: -15px;
$position: auto;
- #{$opposite-position}: -16px;
- left: auto;
- right: auto;
- left: 50%;
- margin-left: -8px;
}
}
}
a.tooltip-item {
- @include button(simple, lighten($light-gray, 10));
+ @include button(simple, $base-border-color);
@include tooltip($tooltip-placement);
font-size: $base-font-size;
+ margin-bottom: $base-line-height;
+ display: block;
+ max-width: 13em;
+ text-align: center;
}
:@children[
o: Sass::Tree::VariableNode :
@expro:Sass::Script::Funcall ;i:
@name"transparentize: @splat0:
@options{ :@keywords{ :
-@args[o:Sass::Script::Variable ;i;
"dark-gray:@underscored_name"dark_gray;@ o:Sass::Script::Number ;i:@denominator_units[ :@numerator_units[ :@original"0.1: @valuef0.10000000000000001 ™š;@ ;i;
"tooltip-color; [ :
@guarded0;@ o;
+@args[o:Sass::Script::Variable ;i;
"dark-gray:@underscored_name"dark_gray;@ o:Sass::Script::Number ;i:@numerator_units[ :@original"0.1: @valuef0.10000000000000001 ™š:@denominator_units[ ;@ ;i;
"tooltip-color; [ :
@guarded0;@ o;
; o:Sass::Script::String ;i:
-@type:identifier;"top;@ ;i;
"tooltip-placement; [ ;0;@ o: Sass::Tree::CommentNode
-;i;: silent; [ ;[" /* "top" or "bottom" */;@ o: Sass::Tree::MixinDefNode ;i ;
" tooltip;T;0; [
+@type:identifier;"top;@ ;i;
"tooltip-placement; [ ;0;@ o: Sass::Tree::CommentNode
+;i;: silent; [ ;[" /* "top" or "bottom" */;@ o: Sass::Tree::MixinDefNode ;i ;
" tooltip;T;0; [
o:Sass::Tree::PropNode ;i
;
["
position:@prop_syntax:new:
-@tabsi ; [ ;o;;; ;"
relative;@ ;@ o;
- ; o; ;i ;; ;" bottom;@ ;i ;
"opposite-position; [ ;0;@ u:Sass::Tree::IfNodeÓ[o: Sass::Script::Operation
+@tabsi ; [ ;o;;; ;"
relative;@ ;@ o;
+ ; o; ;i ;; ;" bottom;@ ;i ;
"opposite-position; [ ;0;@ u:Sass::Tree::IfNodeÓ[o: Sass::Script::Operation
:
@linei
:@operand2o:Sass::Script::String ;i
:
-@type:identifier: @value"top:
@options{ ; @ :@operator:eq:@operand1o:Sass::Script::Variable ;i
:
-@name"
position:@underscored_name"
position; @ u:Sass::Tree::IfNode^[o: Sass::Script::Operation
+@type:identifier: @value"top:
@options{ :@operand1o:Sass::Script::Variable ;i
:
+@name"
position:@underscored_name"
position; @ ; @ :@operator:equ:Sass::Tree::IfNode^[o: Sass::Script::Operation
:
@linei:@operand2o:Sass::Script::String ;i:
-@type:identifier: @value" bottom:
@options{ ; @ :@operator:eq:@operand1o:Sass::Script::Variable ;i:
-@name"
position:@underscored_name"
position; @ 0[o: Sass::Tree::VariableNode :
+@type:identifier: @value" bottom:
@options{ :@operand1o:Sass::Script::Variable ;i:
+@name"
position:@underscored_name"
position; @ ; @ :@operator:eq0[o: Sass::Tree::VariableNode :
@expro; ;i; ;
-; "top; @ ;i;"opposite-position:@children[ :
@guarded0; @ [o: Sass::Tree::VariableNode :
+; "top; @ ;i;"opposite-position:@children[ :
@guarded0; @ [o: Sass::Tree::VariableNode :
@expro; ;i; ;
-; " bottom; @ ;i;"opposite-position:@children[ :
@guarded0; @ o:Sass::Tree::RuleNode ;i:@parsed_ruleso:"Sass::Selector::CommaSequence;i:
@members[o: Sass::Selector::Sequence;([o:#Sass::Selector::SimpleSequence
+; " bottom; @ ;i;"opposite-position:@children[ :
@guarded0; @ o:Sass::Tree::RuleNode ;i:@parsed_ruleso:"Sass::Selector::CommaSequence;i:
@members[o: Sass::Selector::Sequence;([o:#Sass::Selector::SimpleSequence
;i:
@sourceso:Set:
@hash{ :
@subject0;([o:Sass::Selector::Parent;i:@filename" o:Sass::Selector::Pseudo
;i;
["
hover: @arg0:@syntactic_type:
class;0@:;0@:;0@:;T;#i ; [o;% ;i;&o;';i;([o;);([o;*
-;i;+o;,;-{ ;.0;([o:Sass::Selector::Class;i;
[" tooltip;0" ;0@K;0@K;T;#i ; [o; ;i;
[" opacity;!;";#i ; [ ;o;;; ;"1;@ ;@ o; ;i;
["visibility;!;";#i ; [ ;o;;; ;" visible;@ ;@ ;@ :
+;i;+o;,;-{ ;.0;([o:Sass::Selector::Class;i;
[" tooltip;0" ;0@K;0@K;T;#i ; [o; ;i;
[" opacity;!;";#i ; [ ;o;;; ;"1;@ ;@ o; ;i;
["visibility;!;";#i ; [ ;o;;; ;" visible;@ ;@ ;@ :
@rule["
.tooltip;@ ;6[" &:hovero;% ;i ;&o;';i ;([o;);([o;*
-;i ;+o;,;-{ ;.0;([o;5;i ;
[" tooltip;0" ;0@i;0@i;T;#i ; [ o; ;i ;
["background-color;!;";#i ; [ ;o; ;i ;
"tooltip-color;"tooltip_color;@ ;@ o; ;i ;
["box-sizing;!;";#i ; [ ;o;;; ;"border-box;@ ;@ o; ;i ;
["
-color;!;";#i ; [ ;o;;; ;"
-white;@ ;@ o; ;i ;
["font-weight;!;";#i ; [ ;o;;; ;" normal;@ ;@ o; ;i!;
[" opacity;!;";#i ; [ ;o;;; ;"0;@ ;@ o; ;i";
[" padding;!;";#i ; [ ;o;;; ;"0.5em 1em;@ ;@ o; ;i#;
["border-radius;!;";#i ; [ ;o; ;i#;
"base-border-radius;"base_border_radius;@ ;@ o; ;i$;
["
position;!;";#i ; [ ;o;;; ;"
absolute;@ ;@ o; ;i%;
["text-align;!;";#i ; [ ;o;;; ;" center;@ ;@ o; ;i&;
["text-overflow;!;";#i ; [ ;o;;; ;"
ellipsis;@ ;@ o; ;i';
["text-shadow;!;";#i ; [ ;o:Sass::Script::List ;i':@separator:
-space;[ o; ;i';@;[ ;"0;i ;@ o; ;i';[ ;["px;"1px;i;@ o; ;i';@;[ ;"0;i ;@ o; ;i';
" darken;0;@ ;{ ;[o; ;i';
"rgb;0;@ ;{ ;[o; ;i';@;[ ;"80;iU;@ o; ;i';@;[ ;"80;iU;@ o; ;i';@;[ ;"80;iU;@ o; ;i';[ ;["%;"4%;i ;@ ;@ ;@ o; ;i(;
["text-transform;!;";#i ; [ ;o;;; ;" none;@ ;@ o; ;i);
["transition;!;";#i ; [ ;o;;; ;"all 0.15s linear;@ ;@ o; ;i*;
["white-space;!;";#i ; [ ;o;;; ;" nowrap;@ ;@ o; ;i+;
["visibility;!;";#i ; [ ;o;;; ;" hidden;@ ;@ o; ;i,;
["
-width;!;";#i ; [ ;o;;; ;"
-200px;@ ;@ o; ;i-;
[" z-index;!;";#i ; [ ;o;;; ;"10;@ ;@ o; ;i.;
[o; ;i.;
"
position;"
position;@ ;!;";#i ; [ ;o;;; ;"
--50px;@ ;@ o; ;i/;
[" left;!;";#i ; [ ;o;;; ;"50%;@ ;@ o; ;i0;
["margin-left;!;";#i ; [ ;o:!Sass::Script::UnaryOperation ;i0:
@operando: Sass::Script::Operation
-;i0:@operand2o; ;i0;@;[ ;"2;i;@ ;@ :@operator:div:@operand1o;
-;i0;[ ;["px;iÈ;@ ;@ ;>:
-minus;@ o;% ;i3;&o;';i3;([o;);([o;*
-;i3;+o;,;-{ ;.0;([o;/;i3;0" o;1
-;i3;
[" before;20;3;4;0@;0@o;);(["
-o;*
-;i3;+o;,;-{ ;.0;([o;/;i3;0@o;1
-;i3;
["
-after;20;3;4;0@;0@;0@;T;#i ; [ o; ;i4;
[" display;!;";#i ; [ ;o;;; ;"
-block;@ ;@ o; ;i5;
["pointer-events;!;";#i ; [ ;o;;; ;" none;@ ;@ o; ;i6;
["
position;!;";#i ; [ ;o;;; ;"
absolute;@ ;@ o; ;i7;
["
-width;!;";#i ; [ ;o;;; ;"0;@ ;@ o; ;i8;
[" height;!;";#i ; [ ;o;;; ;"0;@ ;@ o; ;i9;
[" content;!;";#i ; [ ;o;;; ;"'';@ ;@ o; ;i:;
[" border;!;";#i ; [ ;o;;; ;"8px solid transparent;@ ;@ ;@ ;6["&:before,
- &:aftero;% ;i=;&o;';i=;([o;);([o;*
-;i=;+o;,;-{ ;.0;([o;/;i=;0" o;1
-;i=;
[" before;20;3;4;0@Z;0@Z;0@Z;T;#i ; [ o; ;i>;
["top;!;";#i ; [ ;o;;; ;" auto;@ ;@ o; ;i?;
[" bottom;!;";#i ; [ ;o;;; ;"
--18px;@ ;@ o; ;i@;
[" left;!;";#i ; [ ;o;;; ;" auto;@ ;@ o; ;iA;
["
-right;!;";#i ; [ ;o;;; ;" auto;@ ;@ o; ;iB;
[" left;!;";#i ; [ ;o;;; ;"50%;@ ;@ o; ;iC;
["margin-left;!;";#i ; [ ;o;: ;iC;;o;<
-;iC;=o; ;iC;@;[ ;"1;i;@ ;@ ;>: plus;@o;
-;iC;[ ;["px;i
;@ ;@ ;>;A;@ ;@ ;6["
&:beforeo;% ;iF;&o;';iF;([o;);([o;*
-;iF;+o;,;-{ ;.0;([o;/;iF;0" o;1
-;iF;
["
-after;20;3;4;0@–;0@–;0@–;T;#i ; [ o; ;iG;
[" border-o; ;iG;
"
position;"
position;@ " -color;!;";#i ; [ ;o; ;iG;
"tooltip-color;"tooltip_color;@ ;@ o;
- ; o; ;iH;; ;" auto;@ ;iH;
"
position; [ ;0;@ o; ;iI;
[o; ;iI;
"opposite-position;"opposite_position;@ ;!;";#i ; [ ;o;;; ;"
--16px;@ ;@ o; ;iJ;
[" left;!;";#i ; [ ;o;;; ;" auto;@ ;@ o; ;iK;
["
-right;!;";#i ; [ ;o;;; ;" auto;@ ;@ o; ;iL;
[" left;!;";#i ; [ ;o;;; ;"50%;@ ;@ o; ;iM;
["margin-left;!;";#i ; [ ;o;;; ;" -8px;@ ;@ ;@ ;6[" &:after;@ ;6["
.tooltip;@ ;[[o;;
"
position;"
position;@ 0o;% ;iR;&o;';iR;([o;);([o;*
-;iR;+o;,;-{ ;.0;([o: Sass::Selector::Element ;iR;
["a:@namespace0;0" o;5;iR;
["tooltip-item;0@à;0@à;0@à;T;#i ; [o:Sass::Tree::MixinNode ;iS;
" button;0; [ ;@ ;{ ;[o; ;iS;; ;" simple;@ o; ;iS;
" lighten;0;@ ;{ ;[o; ;iS;
"light-gray;"light_gray;@ o; ;iS;@;[ ;"10;i;@ o;E ;iT;
" tooltip;0; [ ;@ ;{ ;[o; ;iT;
"tooltip-placement;"tooltip_placement;@ o; ;iU;
["font-size;!;";#i ; [ ;o; ;iU;
"base-font-size;"base_font_size;@ ;@ ;@ ;6["a.tooltip-item;@
+;i ;+o;,;-{ ;.0;([o;5;i ;
[" tooltip;0" ;0@i;0@i;T;#i ; [o:Sass::Tree::MixinNode ;i ;
"
position;0; [ ;@ ;{ ;[o; ;i ;; ;"
absolute;@ o:Sass::Script::List ;i :@separator:
+space;[ o; ;i ;[ ;"0;i ;@;@ o; ;i ;[ ;"0;i ;@;@ o; ;i ;[ ;"0;i ;@;@ o; ;i ;["%;"50%;i7;[ ;@ ;@ o;7 ;i ;
"transition;0; [ ;@ ;{ ;[o;8 ;i ;9;:;[o; ;i ;; ;"all;@ o; ;i ;["s;"
+0.15s;f0.14999999999999999 33;[ ;@ o; ;i ;; ;" linear;@ ;@ o;7 ;i ;
"box-sizing;0; [ ;@ ;{ ;[o; ;i ;; ;"border-box;@ o; ;i ;
[o; ;i ;
"
position;"
position;@ ;!;";#i ; [ ;o;;; ;"
+-55px;@ ;@ o; ;i!;
["background-color;!;";#i ; [ ;o; ;i!;
"tooltip-color;"tooltip_color;@ ;@ o; ;i";
["border-radius;!;";#i ; [ ;o; ;i";
"base-border-radius;"base_border_radius;@ ;@ o; ;i#;
["
+color;!;";#i ; [ ;o;;; ;"
+white;@ ;@ o; ;i$;
["font-weight;!;";#i ; [ ;o;;; ;" normal;@ ;@ o; ;i%;
["margin-left;!;";#i ; [ ;o:!Sass::Script::UnaryOperation ;i%:
@operando: Sass::Script::Operation
+;i%:@operand2o; ;i%;[ ;"2;i;@;@ :@operand1o; ;i%;
"em;0;@ ;{ ;[o;
+;i%;[ ;iÈ;@;@ ;@ :@operator:div;@ ;@:
+minus;@ o; ;i&;
[" opacity;!;";#i ; [ ;o;;; ;"0;@ ;@ o; ;i';
[" padding;!;";#i ; [ ;o;;; ;"0.5em 1em;@ ;@ o; ;i(;
["text-align;!;";#i ; [ ;o;;; ;" center;@ ;@ o; ;i);
["text-overflow;!;";#i ; [ ;o;;; ;"
ellipsis;@ ;@ o; ;i*;
["text-shadow;!;";#i ; [ ;o;8 ;i*;9;:;[ o; ;i*;[ ;"0;i ;@;@ o; ;i*;["px;"1px;i;[ ;@ o; ;i*;[ ;"0;i ;@;@ o; ;i*;
" darken;0;@ ;{ ;[o; ;i*;
"rgb;0;@ ;{ ;[o; ;i*;[ ;"80;iU;@;@ o; ;i*;[ ;"80;iU;@;@ o; ;i*;[ ;"80;iU;@;@ o; ;i*;["%;"4%;i ;[ ;@ ;@ ;@ o; ;i+;
["text-transform;!;";#i ; [ ;o;;; ;" none;@ ;@ o; ;i,;
["visibility;!;";#i ; [ ;o;;; ;" hidden;@ ;@ o; ;i-;
["white-space;!;";#i ; [ ;o;;; ;" nowrap;@ ;@ o; ;i.;
["
+width;!;";#i ; [ ;o; ;i.;
"em;0;@ ;{ ;[o; ;i.;[ ;"200;iÈ;@;@ ;@ o; ;i/;
[" z-index;!;";#i ; [ ;o;;; ;"10;@ ;@ o;% ;i1;&o;';i1;([o;);([o;*
+;i1;+o;,;-{ ;.0;([o;/;i1;0" o;1
+;i1;
["
+after;20;3;4;0@2;0@2;0@2;T;#i ; [
o;7 ;i2;
" size;0; [ ;@ ;{ ;[o; ;i2;[ ;"0;i ;@;@ o;7 ;i3;
"
position;0; [ ;@ ;{ ;[o; ;i3;; ;"
absolute;@ o;8 ;i3;9;:;[ o; ;i3;[ ;"0;i ;@;@ o; ;i3;[ ;"0;i ;@;@ o; ;i3;[ ;"0;i ;@;@ o;=
+;i3;>o; ;i3;[ ;"2;i;@;@ ;?o; ;i3;
"em;0;@ ;{ ;[o; ;i3;[ ;"200;iÈ;@;@ ;@ ;@;A;@ o; ;i4;
[" border;!;";#i ; [ ;o;;; ;"8px solid transparent;@ ;@ o; ;i5;
[" border-o; ;i5;
"
position;"
position;@ " -color;!;";#i ; [ ;o; ;i5;
"tooltip-color;"tooltip_color;@ ;@ o; ;i6;
[" content;!;";#i ; [ ;o;;; ;"'';@ ;@ o; ;i7;
["pointer-events;!;";#i ; [ ;o;;; ;" none;@ ;@ o; ;i8;
[o; ;i8;
"opposite-position;"opposite_position;@ ;!;";#i ; [ ;o;;; ;"
+-15px;@ ;@ o;
+ ; o; ;i9;; ;" auto;@ ;i9;
"
position; [ ;0;@ ;@ ;6[" &:after;@ ;6["
.tooltip;@ ;[[o;;
"
position;"
position;@ 0o;% ;i>;&o;';i>;([o;);([o;*
+;i>;+o;,;-{ ;.0;([o: Sass::Selector::Element ;i>;
["a:@namespace0;0" o;5;i>;
["tooltip-item;0@›;0@›;0@›;T;#i ; [ o;7 ;i?;
" button;0; [ ;@ ;{ ;[o; ;i?;; ;" simple;@ o; ;i?;
"base-border-color;"base_border_color;@ o;7 ;i@;
" tooltip;0; [ ;@ ;{ ;[o; ;i@;
"tooltip-placement;"tooltip_placement;@ o; ;iA;
["font-size;!;";#i ; [ ;o; ;iA;
"base-font-size;"base_font_size;@ ;@ o; ;iB;
["margin-bottom;!;";#i ; [ ;o; ;iB;
"base-line-height;"base_line_height;@ ;@ o; ;iC;
[" display;!;";#i ; [ ;o;;; ;"
+block;@ ;@ o; ;iD;
["max-width;!;";#i ; [ ;o;;; ;" 13em;@ ;@ o; ;iE;
["text-align;!;";#i ; [ ;o;;; ;" center;@ ;@ ;@ ;6["a.tooltip-item;@
\ No newline at end of file