Skip to content
This repository was archived by the owner on Mar 7, 2023. It is now read-only.

Commit 29c0ee9

Browse files
mdeanjonesmdeanjones
committed
recreated default styles in SASS to optionally be imported by consuming app
1 parent f3476e2 commit 29c0ee9

File tree

4 files changed

+282
-0
lines changed

4 files changed

+282
-0
lines changed

‎app/styles/nsf-ember-tooltip/_mixins.scss

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@mixin __style-prefixer($styleName, $styleValue, $prefixValues: false) {
2+
@each $prefix in ('-webkit', '-moz', '-o', '-ms') {
3+
@if $prefixValues {
4+
#{$prefix}-#{$styleName}: #{$prefix}-#{$styleValue};
5+
}
6+
@else {
7+
#{$prefix}-#{$styleName}: $styleValue;
8+
}
9+
}
10+
11+
#{$styleName}: $styleValue;
12+
}
13+
14+
15+
@mixin tooltipster-variant($color, $bgColor, $borderColor, $borderWeight: 2px, $arrowWidth: 10px) {
16+
.tooltipster-box {
17+
background: $bgColor;
18+
border: $borderWeight solid $borderColor;
19+
}
20+
21+
.tooltipster-content {
22+
color: $color;
23+
}
24+
25+
.tooltipster-arrow-border,
26+
.tooltipster-arrow-background {
27+
border: $arrowWidth solid transparent;
28+
}
29+
30+
@each $side, $opp in (top: bottom, bottom: top, left: right, right: left) {
31+
&.tooltipster-#{$side} {
32+
.tooltipster-box {
33+
margin-#{$opp}: $arrowWidth - $borderWeight;
34+
}
35+
36+
.tooltipster-arrow-border {
37+
border-#{$side}-color: $borderColor;
38+
}
39+
40+
.tooltipster-arrow {
41+
#{$opp}: 0;
42+
43+
@if $side == left or $side == right {
44+
height: $arrowWidth * 2;
45+
margin-top: -$arrowWidth;
46+
top: 0;
47+
width: $arrowWidth;
48+
}
49+
@else if $side == top or $side == bottom {
50+
height: $arrowWidth;
51+
margin-left: -$arrowWidth;
52+
width: $arrowWidth * 2;
53+
}
54+
}
55+
56+
.tooltipster-arrow-background {
57+
border-#{$side}-color: #565656;
58+
59+
@if $side == left {
60+
left: -($borderWeight + 1);
61+
top: 0px;
62+
}
63+
@else if $side == right {
64+
left: $borderWeight + 1;
65+
top: 0px;
66+
}
67+
@else if $side == top {
68+
left: 0px;
69+
top: -($borderWeight + 1);
70+
}
71+
@else if $side == bottom {
72+
left: 0px;
73+
top: $borderWeight + 1;
74+
}
75+
}
76+
77+
.tooltipster-arrow-uncropped {
78+
@if $side == bottom {
79+
top: -$arrowWidth;
80+
}
81+
@if $side == right {
82+
left: -$arrowWidth;
83+
}
84+
}
85+
}
86+
}
87+
}

‎app/styles/nsf-ember-tooltip/_styles.scss

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
/*
2+
All credit to the Tooltipster crew (https://github.com/iamceege/tooltipster).
3+
This is just a SASS-y version of the default theme.
4+
*/
5+
6+
7+
/* This is the core CSS of Tooltipster */
8+
@import 'mixins';
9+
10+
.tooltipster-base {
11+
/* this ensures that a constrained height set by functionPosition, if greater that the natural height
12+
of the tooltip, will be enforced in browsers that support display:flex */
13+
display: flex;
14+
pointer-events: none;
15+
position: absolute; /* this may be overriden in JS for fixed position origins */
16+
}
17+
18+
.tooltipster-box {
19+
/* see .tooltipster-base. flex-shrink 1 is only necessary for IE10- and flex-basis auto for IE11- (at least) */
20+
flex: 1 1 auto;
21+
}
22+
23+
.tooltipster-content {
24+
box-sizing: border-box; /* prevents an overflow if the user adds padding to the div */
25+
/* these make sure we'll be able to detect any overflow */
26+
max-height: 100%;
27+
max-width: 100%;
28+
overflow: auto;
29+
}
30+
31+
.tooltipster-ruler {
32+
/* these let us test the size of the tooltip without overflowing the window */
33+
bottom: 0;
34+
left: 0;
35+
overflow: hidden;
36+
position: fixed;
37+
right: 0;
38+
top: 0;
39+
visibility: hidden;
40+
}
41+
42+
/* ANIMATIONS */
43+
44+
/* Open/close animations */
45+
46+
/* fade */
47+
.tooltipster-fade {
48+
opacity: 0;
49+
@include __style-prefixer('transition-property', 'opacity');
50+
51+
&.tooltipster-show {
52+
opacity: 1;
53+
}
54+
}
55+
56+
57+
/* grow */
58+
.tooltipster-grow {
59+
@include __style-prefixer('transform', scale(0, 0));
60+
@include __style-prefixer('transition-property', 'transform', true);
61+
-webkit-backface-visibility: hidden;
62+
63+
&.tooltipster-show {
64+
@include __style-prefixer('transform', scale(1, 1));
65+
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
66+
@include __style-prefixer('transition-timing-function', cubic-bezier(0.175, 0.885, 0.320, 1.15));
67+
}
68+
}
69+
70+
71+
/* swing */
72+
.tooltipster-swing {
73+
opacity: 0;
74+
@include __style-prefixer('transform', rotateZ(4deg));
75+
@include __style-prefixer('transition-property', 'transform', true);
76+
77+
&.tooltipster-show {
78+
opacity: 1;
79+
@include __style-prefixer('transform', rotateZ(0deg));
80+
-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
81+
@include __style-prefixer('transition-timing-function', cubic-bezier(0.230, 0.635, 0.495, 2.4));
82+
}
83+
}
84+
85+
86+
/* fall */
87+
.tooltipster-fall {
88+
@include __style-prefixer('transition-property', 'top');
89+
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
90+
@include __style-prefixer('transition-timing-function', cubic-bezier(0.175, 0.885, 0.320, 1.15));
91+
92+
&.tooltipster-initial {
93+
top: 0 !important;
94+
}
95+
96+
&.tooltipster-dying {
97+
@include __style-prefixer('transition-property', 'all');
98+
top: 0 !important;
99+
opacity: 0;
100+
}
101+
}
102+
103+
104+
/* slide */
105+
.tooltipster-slide {
106+
@include __style-prefixer('transition-property', 'left');
107+
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
108+
@include __style-prefixer('transition-timing-function', cubic-bezier(0.175, 0.885, 0.320, 1.15));
109+
110+
&.tooltipster-initial {
111+
left: -40px !important;
112+
}
113+
114+
&.tooltipster-dying {
115+
@include __style-prefixer('transition-property', 'all');
116+
left: 0 !important;
117+
opacity: 0;
118+
}
119+
}
120+
121+
122+
/* Update animations */
123+
124+
/* We use animations rather than transitions here because transition durations may be specified in
125+
the style tag due to animationDuration, and we try to avoid collisions and the use of !important */
126+
127+
/* fade */
128+
@keyframes tooltipster-fading {
129+
0% { opacity: 0; }
130+
100% { opacity: 1; }
131+
}
132+
133+
.tooltipster-update-fade {
134+
animation: tooltipster-fading 400ms;
135+
}
136+
137+
138+
/* rotate */
139+
@keyframes tooltipster-rotating {
140+
25% { transform: rotate(-2deg); }
141+
75% { transform: rotate(2deg); }
142+
100% { transform: rotate(0); }
143+
}
144+
145+
.tooltipster-update-rotate {
146+
animation: tooltipster-rotating 600ms;
147+
}
148+
149+
150+
/* scale */
151+
@keyframes tooltipster-scaling {
152+
50% { transform: scale(1.1); }
153+
100% { transform: scale(1); }
154+
}
155+
156+
.tooltipster-update-scale {
157+
animation: tooltipster-scaling 600ms;
158+
}
159+
160+
161+
/* DEFAULT STYLE */
162+
.tooltipster-sidetip {
163+
.tooltipster-box {
164+
border-radius: 4px;
165+
}
166+
167+
.tooltipster-content {
168+
line-height: 18px;
169+
padding: 6px 14px;
170+
}
171+
172+
.tooltipster-arrow {
173+
overflow: hidden;
174+
position: absolute;
175+
}
176+
177+
.tooltipster-arrow-uncropped {
178+
position: relative;
179+
}
180+
181+
.tooltipster-arrow-background,
182+
.tooltipster-arrow-border {
183+
height: 0;
184+
position: absolute;
185+
width: 0;
186+
}
187+
188+
.tooltipster-arrow-border {
189+
left: 0;
190+
top: 0;
191+
}
192+
193+
@include tooltipster-variant(white, #565656, black);
194+
}

‎tests/dummy/app/styles/app.css

Whitespace-only changes.

‎tests/dummy/app/styles/app.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'nsf-ember-tooltip/styles';

0 commit comments

Comments
 (0)