Skip to content

Commit ff67c79

Browse files
aboseabose
committed
refactor: options box styles into its own css file for better code intelligence in editor
1 parent 39d92cc commit ff67c79

File tree

3 files changed

+147
-147
lines changed

3 files changed

+147
-147
lines changed

‎src/extensionsIntegrated/phoenix-pro/browser-css/more-options-dropdown.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
:host {
2+
all: initial !important;
3+
}
4+
5+
.phoenix-dropdown {
6+
background-color: #2c2c2c !important;
7+
color: #cdcdcd !important;
8+
border: 1px solid #4a4a4a !important;
9+
border-radius: 6px !important;
10+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
11+
font-size: 13px !important;
12+
font-family: Arial, sans-serif !important;
13+
z-index: 2147483647 !important;
14+
position: absolute !important;
15+
left: -1000px;
16+
top: -1000px;
17+
box-sizing: border-box !important;
18+
min-width: 130px !important;
19+
padding: 3px 0 !important;
20+
overflow: hidden !important;
21+
}
22+
23+
.more-options-dropdown {
24+
display: flex !important;
25+
flex-direction: column !important;
26+
}
27+
28+
.dropdown-item {
29+
padding: 7px 14px !important;
30+
cursor: pointer !important;
31+
white-space: nowrap !important;
32+
user-select: none !important;
33+
display: flex !important;
34+
align-items: center !important;
35+
gap: 6px !important;
36+
}
37+
38+
.dropdown-item:hover {
39+
background-color: #3c3f41 !important;
40+
}
41+
42+
.item-icon {
43+
display: flex !important;
44+
align-items: center !important;
45+
justify-content: center !important;
46+
width: 16px !important;
47+
height: 16px !important;
48+
flex-shrink: 0 !important;
49+
}
50+
51+
.item-icon svg {
52+
width: 16px !important;
53+
height: 16px !important;
54+
display: block !important;
55+
}
56+
57+
.item-label {
58+
flex: 1 !important;
59+
}
60+
61+
.item-label.show-ruler-label {
62+
margin-top: 1px !important;
63+
}
64+
65+
.dropdown-separator {
66+
height: 1px !important;
67+
background-color: #4a4a4a !important;
68+
margin: 2px 0 !important;
69+
}
70+
71+
.item-checkmark {
72+
margin-left: auto !important;
73+
padding-left: 4px !important;
74+
padding-bottom: 1px !important;
75+
font-size: 14px !important;
76+
display: flex !important;
77+
align-items: center !important;
78+
justify-content: center !important;
79+
width: 14px !important;
80+
height: 14px !important;
81+
}
82+
83+
.item-checkmark svg {
84+
width: 14px !important;
85+
height: 14px !important;
86+
display: block !important;
87+
}

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
:host {
2+
all: initial !important;
3+
}
4+
5+
.phoenix-more-options-box {
6+
background-color: #4285F4 !important;
7+
color: white !important;
8+
border-radius: 3px !important;
9+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
10+
font-size: 12px !important;
11+
font-family: Arial, sans-serif !important;
12+
z-index: 2147483646 !important;
13+
position: absolute !important;
14+
left: -1000px;
15+
top: -1000px;
16+
box-sizing: border-box !important;
17+
}
18+
19+
.node-options {
20+
display: flex !important;
21+
align-items: center !important;
22+
}
23+
24+
.node-options span {
25+
padding: 4px 3.9px !important;
26+
cursor: pointer !important;
27+
display: flex !important;
28+
align-items: center !important;
29+
border-radius: 0 !important;
30+
}
31+
32+
.node-options span:first-child {
33+
border-radius: 3px 0 0 3px !important;
34+
}
35+
36+
.node-options span:last-child {
37+
border-radius: 0 3px 3px 0 !important;
38+
}
39+
40+
.node-options span:hover {
41+
background-color: rgba(255, 255, 255, 0.15) !important;
42+
}
43+
44+
.node-options span > svg {
45+
width: 16px !important;
46+
height: 16px !important;
47+
display: block !important;
48+
}
49+
50+
.node-options span[data-action="image-gallery"].selected {
51+
background-color: rgba(50, 50, 220, 0.5) !important;
52+
}
53+
54+
.node-options span[data-action="image-gallery"].selected:hover {
55+
background-color: rgba(100, 100, 230, 0.6) !important;
56+
}

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

Lines changed: 4 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -5,154 +5,11 @@
55

66
define(function (require, exports, module) {
77
const LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
8-
const optionsBoxStyles = `
9-
:host {
10-
all: initial !important;
11-
}
12-
13-
.phoenix-more-options-box {
14-
background-color: #4285F4 !important;
15-
color: white !important;
16-
border-radius: 3px !important;
17-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
18-
font-size: 12px !important;
19-
font-family: Arial, sans-serif !important;
20-
z-index: 2147483646 !important;
21-
position: absolute !important;
22-
left: -1000px;
23-
top: -1000px;
24-
box-sizing: border-box !important;
25-
}
26-
27-
.node-options {
28-
display: flex !important;
29-
align-items: center !important;
30-
}
31-
32-
.node-options span {
33-
padding: 4px 3.9px !important;
34-
cursor: pointer !important;
35-
display: flex !important;
36-
align-items: center !important;
37-
border-radius: 0 !important;
38-
}
39-
40-
.node-options span:first-child {
41-
border-radius: 3px 0 0 3px !important;
42-
}
43-
44-
.node-options span:last-child {
45-
border-radius: 0 3px 3px 0 !important;
46-
}
47-
48-
.node-options span:hover {
49-
background-color: rgba(255, 255, 255, 0.15) !important;
50-
}
51-
52-
.node-options span > svg {
53-
width: 16px !important;
54-
height: 16px !important;
55-
display: block !important;
56-
}
57-
58-
.node-options span[data-action="image-gallery"].selected {
59-
background-color: rgba(50, 50, 220, 0.5) !important;
60-
}
61-
62-
.node-options span[data-action="image-gallery"].selected:hover {
63-
background-color: rgba(100, 100, 230, 0.6) !important;
64-
}
65-
`;
66-
67-
const optionsBoxDropdownStyles = `
68-
:host {
69-
all: initial !important;
70-
}
71-
72-
.phoenix-dropdown {
73-
background-color: #2c2c2c !important;
74-
color: #cdcdcd !important;
75-
border: 1px solid #4a4a4a !important;
76-
border-radius: 6px !important;
77-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
78-
font-size: 13px !important;
79-
font-family: Arial, sans-serif !important;
80-
z-index: 2147483647 !important;
81-
position: absolute !important;
82-
left: -1000px;
83-
top: -1000px;
84-
box-sizing: border-box !important;
85-
min-width: 130px !important;
86-
padding: 3px 0 !important;
87-
overflow: hidden !important;
88-
}
89-
90-
.more-options-dropdown {
91-
display: flex !important;
92-
flex-direction: column !important;
93-
}
94-
95-
.dropdown-item {
96-
padding: 7px 14px !important;
97-
cursor: pointer !important;
98-
white-space: nowrap !important;
99-
user-select: none !important;
100-
display: flex !important;
101-
align-items: center !important;
102-
gap: 6px !important;
103-
}
104-
105-
.dropdown-item:hover {
106-
background-color: #3c3f41 !important;
107-
}
108-
109-
.item-icon {
110-
display: flex !important;
111-
align-items: center !important;
112-
justify-content: center !important;
113-
width: 16px !important;
114-
height: 16px !important;
115-
flex-shrink: 0 !important;
116-
}
117-
118-
.item-icon svg {
119-
width: 16px !important;
120-
height: 16px !important;
121-
display: block !important;
122-
}
123-
124-
.item-label {
125-
flex: 1 !important;
126-
}
127-
128-
.item-label.show-ruler-label {
129-
margin-top: 1px !important;
130-
}
131-
132-
.dropdown-separator {
133-
height: 1px !important;
134-
background-color: #4a4a4a !important;
135-
margin: 2px 0 !important;
136-
}
1378

138-
.item-checkmark {
139-
margin-left: auto !important;
140-
padding-left: 4px !important;
141-
padding-bottom: 1px !important;
142-
font-size: 14px !important;
143-
display: flex !important;
144-
align-items: center !important;
145-
justify-content: center !important;
146-
width: 14px !important;
147-
height: 14px !important;
148-
}
149-
150-
.item-checkmark svg {
151-
width: 14px !important;
152-
height: 14px !important;
153-
display: block !important;
154-
}
155-
`;
9+
// this is the box that comes up with the tools like select parent, duplicate, delete, etc..
10+
const optionsBoxStyles = require("text!./browser-css/options-box.css");
11+
// this is the more options dropdown that comes up when clicking the ... icon in the option box.
12+
const optionsBoxDropdownStyles = require("text!./browser-css/more-options-dropdown.css");
15613

15714
const infoBoxStyles = `
15815
:host {

0 commit comments

Comments
 (0)