Skip to content

Commit 02073d3

Browse files
camdecostercamdecoster
authored
Merge pull request #7833 from plotly/cam/7592/update-sass-calls
chore: Update sass function calls
2 parents 61cca14 + ec3dba6 commit 02073d3

8 files changed

Lines changed: 329 additions & 315 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/_cloud_dialog.scss‎

Lines changed: 72 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,87 @@
1-
.plotly-cloud-dialog {
2-
font-family: 'Open Sans', verdana, arial, sans-serif; // Because not all contexts have this specified.
3-
position: absolute;
4-
top: 0;
5-
left: 0;
6-
width: 100%;
7-
height: 100%;
8-
z-index: 1001;
9-
10-
display: flex;
11-
align-items: center;
12-
justify-content: center;
13-
14-
background-color: rgba(0, 0, 0, 0.4);
15-
16-
.plotly-cloud-dialog-box {
17-
box-sizing: border-box;
18-
min-width: 300px;
19-
max-width: 420px;
20-
padding: 20px 24px;
21-
22-
background-color: $color-bg-light;
23-
border: 1px solid $color-bg-darker;
24-
border-radius: 4px;
25-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
26-
27-
font-size: 13px;
28-
color: #2a3f5f;
29-
}
1+
@use "vars";
302

31-
.plotly-cloud-dialog-title {
32-
font-size: 16px;
33-
font-weight: bold;
34-
margin-bottom: 12px;
35-
}
3+
@mixin styles {
4+
.plotly-cloud-dialog {
5+
font-family: 'Open Sans', verdana, arial, sans-serif; // Because not all contexts have this specified.
6+
position: absolute;
7+
top: 0;
8+
left: 0;
9+
width: 100%;
10+
height: 100%;
11+
z-index: 1001;
3612

37-
.plotly-cloud-dialog-message {
38-
line-height: 1.5;
39-
overflow-wrap: break-word;
40-
word-wrap: break-word;
41-
}
42-
43-
.plotly-cloud-dialog-buttons {
4413
display: flex;
45-
justify-content: flex-end;
46-
margin-top: 20px;
47-
}
14+
align-items: center;
15+
justify-content: center;
4816

49-
.plotly-cloud-dialog-btn {
50-
font-family: inherit;
51-
font-size: 13px;
52-
padding: 7px 16px;
53-
margin-left: 8px;
17+
background-color: rgba(0, 0, 0, 0.4);
5418

55-
border-radius: 3px;
56-
border: 1px solid transparent;
57-
cursor: pointer;
19+
.plotly-cloud-dialog-box {
20+
box-sizing: border-box;
21+
min-width: 300px;
22+
max-width: 420px;
23+
padding: 20px 24px;
5824

59-
&:focus-visible {
60-
outline: 2px solid $color-brand-primary;
61-
outline-offset: 1px;
25+
background-color: vars.$color-bg-light;
26+
border: 1px solid vars.$color-bg-darker;
27+
border-radius: 4px;
28+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
29+
30+
font-size: 13px;
31+
color: #2a3f5f;
6232
}
63-
}
6433

65-
.plotly-cloud-dialog-btn--cancel {
66-
background-color: $color-bg-light;
67-
border-color: $color-bg-darker;
68-
color: $color-muted-text;
34+
.plotly-cloud-dialog-title {
35+
font-size: 16px;
36+
font-weight: bold;
37+
margin-bottom: 12px;
38+
}
6939

70-
&:hover {
71-
background-color: $color-bg-base;
40+
.plotly-cloud-dialog-message {
41+
line-height: 1.5;
42+
overflow-wrap: break-word;
43+
word-wrap: break-word;
44+
}
45+
46+
.plotly-cloud-dialog-buttons {
47+
display: flex;
48+
justify-content: flex-end;
49+
margin-top: 20px;
50+
}
51+
52+
.plotly-cloud-dialog-btn {
53+
font-family: inherit;
54+
font-size: 13px;
55+
padding: 7px 16px;
56+
margin-left: 8px;
57+
58+
border-radius: 3px;
59+
border: 1px solid transparent;
60+
cursor: pointer;
61+
62+
&:focus-visible {
63+
outline: 2px solid vars.$color-brand-primary;
64+
outline-offset: 1px;
65+
}
66+
}
67+
68+
.plotly-cloud-dialog-btn--cancel {
69+
background-color: vars.$color-bg-light;
70+
border-color: vars.$color-bg-darker;
71+
color: vars.$color-muted-text;
72+
73+
&:hover {
74+
background-color: vars.$color-bg-base;
75+
}
7276
}
73-
}
7477

75-
.plotly-cloud-dialog-btn--confirm {
76-
background-color: $color-brand-primary;
77-
color: $color-bg-light;
78+
.plotly-cloud-dialog-btn--confirm {
79+
background-color: vars.$color-brand-primary;
80+
color: vars.$color-bg-light;
7881

79-
&:hover {
80-
background-color: $color-brand-accent;
82+
&:hover {
83+
background-color: vars.$color-brand-accent;
84+
}
8185
}
8286
}
8387
}

‎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+
}

0 commit comments

Comments
 (0)