Skip to content

Commit 825573c

Browse files
sawkasawka
committed
remove a lot of old scss mixins
1 parent 10091e1 commit 825573c

23 files changed

Lines changed: 37 additions & 267 deletions

‎frontend/app/block/block.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,6 @@
118118
}
119119

120120
.block-frame-text {
121-
@include mixins.ellipsis();
122121
font: var(--fixed-font);
123122
font-size: 11px;
124123
opacity: 0.7;
@@ -166,7 +165,6 @@
166165
flex: 1 2 auto;
167166
overflow: hidden;
168167
padding-right: 4px;
169-
@include mixins.ellipsis();
170168
}
171169

172170
.connecting-svg {
@@ -328,7 +326,6 @@
328326
}
329327

330328
.connstatus-status {
331-
@include mixins.ellipsis();
332329
display: flex;
333330
flex-direction: column;
334331
align-items: flex-start;

‎frontend/app/block/blockframe.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ const BlockFrame_Header = ({
215215
if (typeof headerTextUnion === "string") {
216216
if (!util.isBlank(headerTextUnion)) {
217217
headerTextElems.push(
218-
<div key="text" className="block-frame-text">
218+
<div key="text" className="block-frame-text ellipsis">
219219
&lrm;{headerTextUnion}
220220
</div>
221221
);
@@ -280,7 +280,7 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
280280
return <Input decl={elem} className={clsx("block-frame-input", elem.className)} preview={preview} />;
281281
} else if (elem.elemtype == "text") {
282282
return (
283-
<div className={clsx("block-frame-text", elem.className, { "flex-nogrow": elem.noGrow })}>
283+
<div className={clsx("block-frame-text ellipsis", elem.className, { "flex-nogrow": elem.noGrow })}>
284284
<span ref={preview ? null : elem.ref} onClick={(e) => elem?.onClick(e)}>
285285
&lrm;{elem.text}
286286
</span>
@@ -398,10 +398,10 @@ const ConnStatusOverlay = React.memo(
398398
let reconClassName = "outlined grey";
399399
if (width && width < 350) {
400400
reconDisplay = <i className="fa-sharp fa-solid fa-rotate-right"></i>;
401-
reconClassName = clsx(reconClassName, "font-size-12 vertical-padding-5 horizontal-padding-6");
401+
reconClassName = clsx(reconClassName, "text-[12px] py-[5px] px-[6px]");
402402
} else {
403403
reconDisplay = "Reconnect";
404-
reconClassName = clsx(reconClassName, "font-size-11 vertical-padding-3 horizontal-padding-7");
404+
reconClassName = clsx(reconClassName, "text-[11px] py-[3px] px-[7px]");
405405
}
406406
const showIcon = connStatus.status != "connecting";
407407

@@ -440,7 +440,7 @@ const ConnStatusOverlay = React.memo(
440440
<div className="connstatus-content">
441441
<div className={clsx("connstatus-status-icon-wrapper", { "has-error": showError || showWshError })}>
442442
{showIcon && <i className="fa-solid fa-triangle-exclamation"></i>}
443-
<div className="connstatus-status">
443+
<div className="connstatus-status ellipsis">
444444
<div className="connstatus-status-text">{statusText}</div>
445445
{(showError || showWshError) && (
446446
<OverlayScrollbarsComponent

‎frontend/app/block/blockutil.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ export const ConnectionButton = React.memo(
232232
}}
233233
/>
234234
</span>
235-
{isLocal ? null : <div className="connection-name">{connection}</div>}
235+
{isLocal ? null : <div className="connection-name ellipsis">{connection}</div>}
236236
</div>
237237
);
238238
}

‎frontend/app/element/button.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,4 @@
160160
outline: 1px solid var(--success-color);
161161
outline-offset: 2px;
162162
}
163-
164-
// Include mixins
165-
@include mixins.border-radius-mixin();
166-
@include mixins.vertical-padding-mixin();
167-
@include mixins.horizontal-padding-mixin();
168-
@include mixins.font-size-mixin();
169-
@include mixins.font-weight-mixin();
170163
}

‎frontend/app/element/collapsiblemenu.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
}
3232

3333
.collapsible-menu-item-text {
34-
@include mixins.ellipsis();
3534
text-decoration: none;
3635
}
3736

‎frontend/app/element/collapsiblemenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const CollapsibleMenu = memo(({ items, className, renderItem }: VerticalNavProps
4646
})}
4747
>
4848
{item.icon && <div className="collapsible-menu-item-icon">{item.icon}</div>}
49-
<div className="collapsible-menu-item-text">{item.label}</div>
49+
<div className="collapsible-menu-item-text ellipsis">{item.label}</div>
5050
</div>
5151
{hasChildren && (
5252
<i className={`fa-sharp fa-solid ${isOpen ? "fa-angle-up" : "fa-angle-down"}`}></i>

‎frontend/app/element/input.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,6 @@
2626
&.error {
2727
border-color: var(--form-element-error-color);
2828
}
29-
30-
// Include mixins
31-
@include mixins.border-radius-mixin();
32-
@include mixins.vertical-padding-mixin();
33-
@include mixins.horizontal-padding-mixin();
34-
@include mixins.font-size-mixin();
35-
@include mixins.font-weight-mixin();
3629
}
3730

3831
/* Styles when an InputGroup is present */
@@ -85,9 +78,4 @@
8578
border-color: transparent;
8679
}
8780
}
88-
89-
// Include mixins
90-
@include mixins.border-radius-mixin();
91-
@include mixins.font-size-mixin();
92-
@include mixins.font-weight-mixin();
9381
}

‎frontend/app/element/menubutton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps)
1010
<div className={clsx("menubutton", className)}>
1111
<FlyoutMenu items={items} onOpenChange={setIsOpen}>
1212
<Button
13-
className="grey border-radius-3 vertical-padding-2 horizontal-padding-2"
13+
className="grey rounded-[3px] py-[2px] px-[2px]"
1414
style={{ borderColor: isOpen ? "var(--accent-color)" : "transparent" }}
1515
title={title}
1616
>

‎frontend/app/mixins.scss‎

Lines changed: 0 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -8,208 +8,6 @@
88
text-overflow: ellipsis;
99
}
1010

11-
@mixin border-radius-mixin() {
12-
&.border-radius-2 {
13-
border-radius: 4px;
14-
}
15-
&.border-radius-3 {
16-
border-radius: 3px;
17-
}
18-
&.border-radius-4 {
19-
border-radius: 4px;
20-
}
21-
&.border-radius-5 {
22-
border-radius: 5px;
23-
}
24-
&.border-radius-6 {
25-
border-radius: 6px;
26-
}
27-
&.border-radius-7 {
28-
border-radius: 7px;
29-
}
30-
&.border-radius-8 {
31-
border-radius: 8px;
32-
}
33-
&.border-radius-9 {
34-
border-radius: 9px;
35-
}
36-
&.border-radius-10 {
37-
border-radius: 10px;
38-
}
39-
}
40-
41-
@mixin vertical-padding-mixin() {
42-
&.vertical-padding-0 {
43-
padding-top: 0px;
44-
padding-bottom: 0px;
45-
}
46-
&.vertical-padding-1 {
47-
padding-top: 1px;
48-
padding-bottom: 1px;
49-
}
50-
&.vertical-padding-2 {
51-
padding-top: 2px;
52-
padding-bottom: 2px;
53-
}
54-
&.vertical-padding-3 {
55-
padding-top: 3px;
56-
padding-bottom: 3px;
57-
}
58-
&.vertical-padding-4 {
59-
padding-top: 4px;
60-
padding-bottom: 4px;
61-
}
62-
&.vertical-padding-5 {
63-
padding-top: 5px;
64-
padding-bottom: 5px;
65-
}
66-
&.vertical-padding-6 {
67-
padding-top: 6px;
68-
padding-bottom: 6px;
69-
}
70-
&.vertical-padding-7 {
71-
padding-top: 7px;
72-
padding-bottom: 7px;
73-
}
74-
&.vertical-padding-8 {
75-
padding-top: 8px;
76-
padding-bottom: 8px;
77-
}
78-
&.vertical-padding-9 {
79-
padding-top: 9px;
80-
padding-bottom: 9px;
81-
}
82-
&.vertical-padding-10 {
83-
padding-top: 10px;
84-
padding-bottom: 10px;
85-
}
86-
}
87-
88-
@mixin horizontal-padding-mixin() {
89-
&.horizontal-padding-0 {
90-
padding-left: 0px;
91-
padding-right: 0px;
92-
}
93-
&.horizontal-padding-1 {
94-
padding-left: 1px;
95-
padding-right: 1px;
96-
}
97-
&.horizontal-padding-2 {
98-
padding-left: 2px;
99-
padding-right: 2px;
100-
}
101-
&.horizontal-padding-3 {
102-
padding-left: 3px;
103-
padding-right: 3px;
104-
}
105-
&.horizontal-padding-4 {
106-
padding-left: 4px;
107-
padding-right: 4px;
108-
}
109-
&.horizontal-padding-5 {
110-
padding-left: 5px;
111-
padding-right: 5px;
112-
}
113-
&.horizontal-padding-6 {
114-
padding-left: 6px;
115-
padding-right: 6px;
116-
}
117-
&.horizontal-padding-7 {
118-
padding-left: 7px;
119-
padding-right: 7px;
120-
}
121-
&.horizontal-padding-8 {
122-
padding-left: 8px;
123-
padding-right: 8px;
124-
}
125-
&.horizontal-padding-9 {
126-
padding-left: 9px;
127-
padding-right: 9px;
128-
}
129-
&.horizontal-padding-10 {
130-
padding-left: 10px;
131-
padding-right: 10px;
132-
}
133-
}
134-
135-
@mixin font-size-mixin() {
136-
&.font-size-10 {
137-
font-size: 10px;
138-
}
139-
&.font-size-11 {
140-
font-size: 11px;
141-
}
142-
&.font-size-12 {
143-
font-size: 12px;
144-
}
145-
&.font-size-13 {
146-
font-size: 13px;
147-
}
148-
&.font-size-14 {
149-
font-size: 14px;
150-
}
151-
&.font-size-15 {
152-
font-size: 15px;
153-
}
154-
&.font-size-16 {
155-
font-size: 16px;
156-
}
157-
&.font-size-17 {
158-
font-size: 17px;
159-
}
160-
&.font-size-18 {
161-
font-size: 18px;
162-
}
163-
&.font-size-19 {
164-
font-size: 19px;
165-
}
166-
&.font-size-20 {
167-
font-size: 20px;
168-
}
169-
&.font-size-21 {
170-
font-size: 21px;
171-
}
172-
&.font-size-22 {
173-
font-size: 22px;
174-
}
175-
&.font-size-23 {
176-
font-size: 23px;
177-
}
178-
&.font-size-24 {
179-
font-size: 24px;
180-
}
181-
&.font-size-25 {
182-
font-size: 25px;
183-
}
184-
&.font-size-26 {
185-
font-size: 26px;
186-
}
187-
}
188-
189-
@mixin font-weight-mixin() {
190-
&.font-weight-100 {
191-
font-weight: 100;
192-
}
193-
&.font-weight-200 {
194-
font-weight: 200;
195-
}
196-
&.font-weight-300 {
197-
font-weight: 300;
198-
}
199-
&.font-weight-400 {
200-
font-weight: 400;
201-
}
202-
&.font-weight-500 {
203-
font-weight: 500;
204-
}
205-
&.font-weight-600 {
206-
font-weight: 600;
207-
}
208-
&.font-weight-700 {
209-
font-weight: 700;
210-
}
211-
}
212-
21311
@mixin avatar-dims-mixin() {
21412
&.size-xs {
21513
width: 20px;

‎frontend/app/modals/tos.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const ModalPage1 = () => {
112112
</div>
113113
<footer className="unselectable">
114114
<div className="flex flex-row items-center justify-center [&>button]:!px-5 [&>button]:!py-2 [&>button]:text-sm [&>button:not(:first-child)]:ml-2.5">
115-
<Button className="font-weight-600" onClick={acceptTos}>
115+
<Button className="font-[600]" onClick={acceptTos}>
116116
Continue
117117
</Button>
118118
</div>
@@ -141,7 +141,7 @@ const ModalPage2 = () => {
141141
</div>
142142
<footer className="unselectable">
143143
<div className="flex flex-row items-center justify-center [&>button]:!px-5 [&>button]:!py-2 [&>button]:text-sm [&>button:not(:first-child)]:ml-2.5">
144-
<Button className="font-weight-600" onClick={handleGetStarted}>
144+
<Button className="font-[600]" onClick={handleGetStarted}>
145145
Get Started
146146
</Button>
147147
</div>

0 commit comments

Comments
 (0)