Skip to content

Commit e40bde3

Browse files
camdecostercamdecoster
committed
chore: Update sass function calls
1 parent 8965c3d commit e40bde3

7 files changed

Lines changed: 255 additions & 246 deletions

File tree

‎src/css/_base.scss‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,48 @@
1-
&, div {
2-
direction: ltr;
3-
font-family: 'Open Sans', verdana, arial, sans-serif;
4-
margin: 0;
5-
padding: 0;
6-
border: 0;
7-
}
1+
@use "vars";
2+
@use "mixins";
3+
4+
@mixin styles {
5+
&, div {
6+
direction: ltr;
7+
font-family: 'Open Sans', verdana, arial, sans-serif;
8+
margin: 0;
9+
padding: 0;
10+
border: 0;
11+
}
812

9-
input, button {
10-
font-family: 'Open Sans', verdana, arial, sans-serif;
13+
input, button {
14+
font-family: 'Open Sans', verdana, arial, sans-serif;
1115

12-
&:focus {
13-
outline: none;
16+
&:focus {
17+
outline: none;
18+
}
1419
}
15-
}
16-
17-
a {
18-
text-decoration: none;
1920

20-
&:hover {
21+
a {
2122
text-decoration: none;
23+
24+
&:hover {
25+
text-decoration: none;
26+
}
2227
}
23-
}
2428

25-
.crisp { shape-rendering: crispEdges; }
29+
.crisp { shape-rendering: crispEdges; }
2630

27-
.user-select-none {
28-
@include vendor('user-select', none);
29-
}
31+
.user-select-none {
32+
@include mixins.vendor('user-select', none);
33+
}
3034

31-
svg a { fill: $color-brand-primary; }
32-
svg a:hover { fill: #3c6dc5; }
35+
svg a { fill: vars.$color-brand-primary; }
36+
svg a:hover { fill: #3c6dc5; }
3337

34-
.main-svg {
35-
position: absolute;
36-
top: 0;
37-
left: 0;
38-
pointer-events: none;
38+
.main-svg {
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
pointer-events: none;
3943

40-
.draglayer {
41-
pointer-events: all;
44+
.draglayer {
45+
pointer-events: all;
46+
}
4247
}
4348
}

‎src/css/_cursor.scss‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1-
.cursor-default { cursor: default; }
2-
.cursor-pointer { cursor: pointer; }
3-
.cursor-crosshair { cursor: crosshair; }
4-
.cursor-move { cursor: move; }
5-
.cursor-col-resize { cursor: col-resize; }
6-
.cursor-row-resize { cursor: row-resize; }
7-
.cursor-ns-resize { cursor: ns-resize; }
8-
.cursor-ew-resize { cursor: ew-resize; }
9-
.cursor-sw-resize { cursor: sw-resize; }
10-
.cursor-s-resize { cursor: s-resize; }
11-
.cursor-se-resize { cursor: se-resize; }
12-
.cursor-w-resize { cursor: w-resize; }
13-
.cursor-e-resize { cursor: e-resize; }
14-
.cursor-nw-resize { cursor: nw-resize; }
15-
.cursor-n-resize { cursor: n-resize; }
16-
.cursor-ne-resize { cursor: ne-resize; }
17-
.cursor-grab {
18-
cursor: -webkit-grab; // For Chrome
19-
cursor: grab;
20-
}
1+
@mixin styles {
2+
.cursor-default { cursor: default; }
3+
.cursor-pointer { cursor: pointer; }
4+
.cursor-crosshair { cursor: crosshair; }
5+
.cursor-move { cursor: move; }
6+
.cursor-col-resize { cursor: col-resize; }
7+
.cursor-row-resize { cursor: row-resize; }
8+
.cursor-ns-resize { cursor: ns-resize; }
9+
.cursor-ew-resize { cursor: ew-resize; }
10+
.cursor-sw-resize { cursor: sw-resize; }
11+
.cursor-s-resize { cursor: s-resize; }
12+
.cursor-se-resize { cursor: se-resize; }
13+
.cursor-w-resize { cursor: w-resize; }
14+
.cursor-e-resize { cursor: e-resize; }
15+
.cursor-nw-resize { cursor: nw-resize; }
16+
.cursor-n-resize { cursor: n-resize; }
17+
.cursor-ne-resize { cursor: ne-resize; }
18+
.cursor-grab {
19+
cursor: -webkit-grab; // For Chrome
20+
cursor: grab;
21+
}
22+
}

‎src/css/_modebar.scss‎

Lines changed: 71 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,90 @@
1-
.modebar {
2-
position: absolute;
3-
top: 2px;
4-
right: 2px;
5-
}
6-
7-
.ease-bg {
8-
@include vendor('transition', background-color 0.3s ease 0s);
9-
}
1+
@use "mixins";
102

11-
.modebar--hover> :not(.watermark) {
12-
opacity: 0;
13-
@include vendor('transition', opacity 0.3s ease 0s);
14-
}
15-
16-
&:hover .modebar--hover .modebar-group {
17-
opacity: 1;
18-
}
3+
@mixin styles {
4+
.modebar {
5+
position: absolute;
6+
top: 2px;
7+
right: 2px;
8+
}
199

20-
&:focus-within .modebar--hover .modebar-group {
21-
opacity: 1;
22-
}
10+
.ease-bg {
11+
@include mixins.vendor('transition', background-color 0.3s ease 0s);
12+
}
2313

24-
.modebar-group {
25-
float: left;
26-
display: inline-block;
27-
box-sizing: border-box;
28-
padding-left: 8px;
29-
position: relative;
30-
vertical-align: middle;
31-
white-space: nowrap;
14+
.modebar--hover> :not(.watermark) {
15+
opacity: 0;
16+
@include mixins.vendor('transition', opacity 0.3s ease 0s);
17+
}
3218

33-
a {
34-
display: grid;
35-
place-content: center;
19+
&:hover .modebar--hover .modebar-group {
20+
opacity: 1;
3621
}
37-
}
3822

39-
.modebar-btn {
40-
position: relative;
41-
font-size: 16px;
42-
padding: 3px 4px;
43-
height: 22px;
44-
/* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */
45-
cursor: pointer;
46-
line-height: normal;
47-
box-sizing: border-box;
48-
border: none;
49-
background: transparent;
23+
&:focus-within .modebar--hover .modebar-group {
24+
opacity: 1;
25+
}
5026

51-
svg {
27+
.modebar-group {
28+
float: left;
29+
display: inline-block;
30+
box-sizing: border-box;
31+
padding-left: 8px;
5232
position: relative;
53-
}
33+
vertical-align: middle;
34+
white-space: nowrap;
5435

55-
&:focus-visible {
56-
outline: 1px solid black;
57-
outline-offset: 1px;
58-
border-radius: 3px;
36+
a {
37+
display: grid;
38+
place-content: center;
39+
}
5940
}
6041

61-
&.modebar-btn--logo {}
62-
}
42+
.modebar-btn {
43+
position: relative;
44+
font-size: 16px;
45+
padding: 3px 4px;
46+
height: 22px;
47+
/* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */
48+
cursor: pointer;
49+
line-height: normal;
50+
box-sizing: border-box;
51+
border: none;
52+
background: transparent;
53+
54+
svg {
55+
position: relative;
56+
}
6357

64-
.modebar.vertical {
65-
display: flex;
66-
flex-direction: column;
67-
flex-wrap: wrap;
68-
align-content: flex-end;
69-
max-height: 100%;
58+
&:focus-visible {
59+
outline: 1px solid black;
60+
outline-offset: 1px;
61+
border-radius: 3px;
62+
}
7063

71-
svg {
72-
top: -1px;
64+
&.modebar-btn--logo {}
7365
}
7466

75-
.modebar-group {
76-
display: block;
77-
float: none;
78-
padding-left: 0px;
79-
padding-bottom: 8px;
67+
.modebar.vertical {
68+
display: flex;
69+
flex-direction: column;
70+
flex-wrap: wrap;
71+
align-content: flex-end;
72+
max-height: 100%;
73+
74+
svg {
75+
top: -1px;
76+
}
8077

81-
.modebar-btn {
78+
.modebar-group {
8279
display: block;
83-
text-align: center;
80+
float: none;
81+
padding-left: 0px;
82+
padding-bottom: 8px;
83+
84+
.modebar-btn {
85+
display: block;
86+
text-align: center;
87+
}
8488
}
8589
}
86-
}
90+
}

‎src/css/_notifier.scss‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,57 @@
1-
.plotly-notifier {
2-
font-family: 'Open Sans', verdana, arial, sans-serif; // Because not all contexts have this specified.
3-
position: fixed;
4-
top: 50px;
5-
right: 20px;
6-
z-index: 10000;
7-
font-size: 10pt;
8-
max-width: 180px;
9-
10-
p {
11-
margin: 0;
12-
}
1+
@use "vars";
2+
3+
@mixin styles {
4+
.plotly-notifier {
5+
font-family: 'Open Sans', verdana, arial, sans-serif; // Because not all contexts have this specified.
6+
position: fixed;
7+
top: 50px;
8+
right: 20px;
9+
z-index: 10000;
10+
font-size: 10pt;
11+
max-width: 180px;
12+
13+
p {
14+
margin: 0;
15+
}
1316

14-
.notifier-note {
15-
min-width: 180px;
16-
max-width: 250px;
17-
border: 1px solid $color-bg-light;
18-
z-index: 3000;
19-
margin: 0;
17+
.notifier-note {
18+
min-width: 180px;
19+
max-width: 250px;
20+
border: 1px solid vars.$color-bg-light;
21+
z-index: 3000;
22+
margin: 0;
2023

21-
background-color: #8c97af;
22-
background-color: rgba(140, 151, 175, 0.9);
23-
color: $color-bg-light;
24-
padding: 10px;
24+
background-color: #8c97af;
25+
background-color: rgba(140, 151, 175, 0.9);
26+
color: vars.$color-bg-light;
27+
padding: 10px;
2528

26-
overflow-wrap: break-word;
27-
word-wrap: break-word;
29+
overflow-wrap: break-word;
30+
word-wrap: break-word;
2831

29-
-ms-hyphens: auto;
30-
-webkit-hyphens: auto;
31-
hyphens: auto;
32-
}
32+
-ms-hyphens: auto;
33+
-webkit-hyphens: auto;
34+
hyphens: auto;
35+
}
3336

34-
.notifier-close {
35-
color: $color-bg-light;
36-
opacity: 0.8;
37+
.notifier-close {
38+
color: vars.$color-bg-light;
39+
opacity: 0.8;
3740

38-
float: right;
39-
padding: 0 5px;
41+
float: right;
42+
padding: 0 5px;
4043

41-
background: none;
42-
border: none;
43-
font-size: 20px;
44-
font-weight: bold;
45-
line-height: 20px;
44+
background: none;
45+
border: none;
46+
font-size: 20px;
47+
font-weight: bold;
48+
line-height: 20px;
4649

47-
&:hover {
48-
color: #444;
49-
text-decoration: none;
50-
cursor: pointer;
50+
&:hover {
51+
color: #444;
52+
text-decoration: none;
53+
cursor: pointer;
54+
}
5155
}
5256
}
5357
}

0 commit comments

Comments
 (0)