Skip to content

Commit 91c9fa8

Browse files
aboseabose
committed
refactor: infobox and ruler styles in remote functions
1 parent ff67c79 commit 91c9fa8

File tree

3 files changed

+101
-103
lines changed

3 files changed

+101
-103
lines changed

‎src/extensionsIntegrated/phoenix-pro/browser-css/info-box.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
:host {
2+
all: initial !important;
3+
}
4+
5+
.phoenix-node-info-box {
6+
background-color: var(--info-box-bg-color) !important;
7+
color: white !important;
8+
border-radius: 3px !important;
9+
padding: 5px 8px !important;
10+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
11+
font-size: 12px !important;
12+
font-family: Arial, sans-serif !important;
13+
z-index: 2147483646 !important;
14+
position: absolute !important;
15+
left: -1000px;
16+
top: -1000px;
17+
max-width: 300px !important;
18+
box-sizing: border-box !important;
19+
pointer-events: none !important;
20+
}
21+
22+
.tag-line {
23+
display: flex !important;
24+
align-items: baseline !important;
25+
justify-content: space-between !important;
26+
}
27+
28+
.tag-name {
29+
font-weight: bold !important;
30+
}
31+
32+
.elem-dimensions {
33+
font-size: 9px !important;
34+
font-weight: 500 !important;
35+
opacity: 0.9 !important;
36+
margin-left: 7px !important;
37+
flex-shrink: 0 !important;
38+
}
39+
40+
.id-name,
41+
.class-name,
42+
.href-info {
43+
margin-top: 3px !important;
44+
}
45+
46+
.href-info {
47+
display: flex !important;
48+
align-items: center !important;
49+
gap: 6px !important;
50+
opacity: 0.9 !important;
51+
letter-spacing: 0.6px !important;
52+
}
53+
54+
.href-info svg {
55+
width: 13px !important;
56+
height: 13px !important;
57+
flex-shrink: 0 !important;
58+
}
59+
60+
.exceeded-classes {
61+
opacity: 0.8 !important;
62+
}

‎src/extensionsIntegrated/phoenix-pro/browser-css/rulers.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
:host {
2+
all: initial !important;
3+
}
4+
5+
.phoenix-ruler-line {
6+
position: absolute !important;
7+
pointer-events: none !important;
8+
z-index: 2147483645 !important;
9+
}
10+
11+
.phoenix-ruler-line-editable {
12+
background-color: rgba(66, 133, 244, 0.4) !important;
13+
}
14+
15+
.phoenix-ruler-line-non-editable {
16+
background-color: rgba(60, 63, 65, 0.8) !important;
17+
}
18+
19+
.phoenix-ruler-label {
20+
position: absolute !important;
21+
font-size: 9px !important;
22+
font-family: Arial, sans-serif !important;
23+
pointer-events: none !important;
24+
z-index: 2147483646 !important;
25+
white-space: nowrap !important;
26+
background-color: transparent !important;
27+
}
28+
29+
.phoenix-ruler-label-editable {
30+
color: rgba(66, 133, 244, 1) !important;
31+
}
32+
33+
.phoenix-ruler-label-non-editable {
34+
color: rgba(60, 63, 65, 1) !important;
35+
}

‎src/extensionsIntegrated/phoenix-pro/remote-styles.js‎

Lines changed: 4 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -10,109 +10,10 @@ define(function (require, exports, module) {
1010
const optionsBoxStyles = require("text!./browser-css/options-box.css");
1111
// this is the more options dropdown that comes up when clicking the ... icon in the option box.
1212
const optionsBoxDropdownStyles = require("text!./browser-css/more-options-dropdown.css");
13-
14-
const infoBoxStyles = `
15-
:host {
16-
all: initial !important;
17-
}
18-
19-
.phoenix-node-info-box {
20-
background-color: var(--info-box-bg-color) !important;
21-
color: white !important;
22-
border-radius: 3px !important;
23-
padding: 5px 8px !important;
24-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
25-
font-size: 12px !important;
26-
font-family: Arial, sans-serif !important;
27-
z-index: 2147483646 !important;
28-
position: absolute !important;
29-
left: -1000px;
30-
top: -1000px;
31-
max-width: 300px !important;
32-
box-sizing: border-box !important;
33-
pointer-events: none !important;
34-
}
35-
36-
.tag-line {
37-
display: flex !important;
38-
align-items: baseline !important;
39-
justify-content: space-between !important;
40-
}
41-
42-
.tag-name {
43-
font-weight: bold !important;
44-
}
45-
46-
.elem-dimensions {
47-
font-size: 9px !important;
48-
font-weight: 500 !important;
49-
opacity: 0.9 !important;
50-
margin-left: 7px !important;
51-
flex-shrink: 0 !important;
52-
}
53-
54-
.id-name,
55-
.class-name,
56-
.href-info {
57-
margin-top: 3px !important;
58-
}
59-
60-
.href-info {
61-
display: flex !important;
62-
align-items: center !important;
63-
gap: 6px !important;
64-
opacity: 0.9 !important;
65-
letter-spacing: 0.6px !important;
66-
}
67-
68-
.href-info svg {
69-
width: 13px !important;
70-
height: 13px !important;
71-
flex-shrink: 0 !important;
72-
}
73-
74-
.exceeded-classes {
75-
opacity: 0.8 !important;
76-
}
77-
`;
78-
79-
const rulerStyles = `
80-
:host {
81-
all: initial !important;
82-
}
83-
84-
.phoenix-ruler-line {
85-
position: absolute !important;
86-
pointer-events: none !important;
87-
z-index: 2147483645 !important;
88-
}
89-
90-
.phoenix-ruler-line-editable {
91-
background-color: rgba(66, 133, 244, 0.4) !important;
92-
}
93-
94-
.phoenix-ruler-line-non-editable {
95-
background-color: rgba(60, 63, 65, 0.8) !important;
96-
}
97-
98-
.phoenix-ruler-label {
99-
position: absolute !important;
100-
font-size: 9px !important;
101-
font-family: Arial, sans-serif !important;
102-
pointer-events: none !important;
103-
z-index: 2147483646 !important;
104-
white-space: nowrap !important;
105-
background-color: transparent !important;
106-
}
107-
108-
.phoenix-ruler-label-editable {
109-
color: rgba(66, 133, 244, 1) !important;
110-
}
111-
112-
.phoenix-ruler-label-non-editable {
113-
color: rgba(60, 63, 65, 1) !important;
114-
}
115-
`;
13+
// this is the info box about the div that shows the element tyle(like div/image etc), css class, dimensions, etc..
14+
const infoBoxStyles = require("text!./browser-css/info-box.css");
15+
// this is the rulers and guidelines feature
16+
const rulerStyles = require("text!./browser-css/rulers.css");
11617

11718
const toastMessageStyles = `
11819
:host {

0 commit comments

Comments
 (0)