mirror of
https://github.com/penpot/penpot.git
synced 2025-01-26 08:29:42 -05:00
wip options css
This commit is contained in:
parent
54a8a89dd0
commit
d886c5615a
6 changed files with 79 additions and 12 deletions
60
frontend/resources/public/images/svg/arrow-down-white.svg
Normal file
60
frontend/resources/public/images/svg/arrow-down-white.svg
Normal file
|
@ -0,0 +1,60 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 500 500.00001"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
sodipodi:docname="arrow-down-white.svg"
|
||||||
|
inkscape:version="0.92.3 (2405546, 2018-03-11)">
|
||||||
|
<defs
|
||||||
|
id="defs4" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:zoom="0.472"
|
||||||
|
inkscape:cx="-221.39831"
|
||||||
|
inkscape:cy="250"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1020"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2" />
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>
|
||||||
|
image/svg+xml
|
||||||
|
</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="matrix(0,1,-1,0,1052.3622,3.4029767e-6)"
|
||||||
|
style="fill:#e7ecf2">
|
||||||
|
<path
|
||||||
|
d="m 138.95104,552.39877 c -15.97981,-0.91956 -29.97031,15.64781 -25.60739,31.33414 4.13074,8.64975 24.56735,29.78594 24.56735,29.78594 0,0 124.53922,124.60864 185.12839,188.55293 2.98762,7.37445 -5.2414,11.74615 -9.09921,16.46818 -65.67593,65.77624 -134.53948,128.31983 -199.74642,194.55784 -10.04086,14.0513 -0.63252,36.5051 16.6162,38.8691 11.18564,2.1327 21.43639,-4.6772 28.26602,-12.9034 69.31825,-65.46486 137.62693,-132.00453 206.41188,-198.03973 7.65756,-8.14176 16.96875,-15.29428 22.61013,-25.01415 5.09335,-12.02529 -1.09218,-25.6828 -11.04128,-33.08286 -74.27352,-75.37761 -148.37953,-150.94757 -224.06956,-224.8979 -3.90281,-3.30297 -8.78051,-5.91159 -14.03611,-5.63009 z"
|
||||||
|
id="path4149"
|
||||||
|
fill="E1E1E1"
|
||||||
|
sodipodi:nodetypes="ccccccccccccc"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="fill:#e7ecf2" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.3 KiB |
|
@ -454,7 +454,7 @@ input.element-name {
|
||||||
|
|
||||||
.input-select {
|
.input-select {
|
||||||
@extend .input-text;
|
@extend .input-text;
|
||||||
background-image: url("/images/svg/arrow-down.svg");
|
background-image: url("/images/svg/arrow-down-white.svg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 95% 48%;
|
background-position: 95% 48%;
|
||||||
background-size: 10px;
|
background-size: 10px;
|
||||||
|
|
|
@ -154,12 +154,17 @@
|
||||||
|
|
||||||
.color-info {
|
.color-info {
|
||||||
input {
|
input {
|
||||||
border: 1px solid $soft-ui-border;
|
border: 1px solid $intense-ui-border;
|
||||||
border-radius: $br-small;
|
border-radius: $br-small;
|
||||||
|
color: $soft-ui-text;
|
||||||
margin: 3px 0 0 $x-small;
|
margin: 3px 0 0 $x-small;
|
||||||
padding: 0 $x-small;
|
padding: 0 $x-small;
|
||||||
width: 58px;
|
width: 58px;
|
||||||
font-size: $fs13;
|
font-size: $fs13;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $soft-ui-text;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -62,14 +62,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.element-set {
|
.element-set {
|
||||||
|
border-bottom: 1px solid $soft-ui-border;
|
||||||
color: $medium-ui-text;
|
color: $medium-ui-text;
|
||||||
margin: 0 $x-small;
|
margin: 0 $x-small;
|
||||||
|
|
||||||
.element-set-title {
|
.element-set-title {
|
||||||
border-bottom: 1px dashed $soft-ui-border;
|
color: $soft-ui-text;
|
||||||
color: $medium-ui-text;
|
font-size: $fs14;
|
||||||
font-weight: bold;
|
margin-top: $x-small;
|
||||||
padding: 2px $x-small;
|
padding: $x-small;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -214,7 +215,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: $medium-ui-text;
|
color: $soft-ui-text;
|
||||||
font-size: $fs12;
|
font-size: $fs12;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -260,7 +260,8 @@
|
||||||
[:div.tool-window-bar
|
[:div.tool-window-bar
|
||||||
[:div.tool-window-icon i/layers]
|
[:div.tool-window-icon i/layers]
|
||||||
[:span (tr "ds.settings.layers")]
|
[:span (tr "ds.settings.layers")]
|
||||||
[:div.tool-window-close {:on-click on-click} i/close]]
|
;; [:div.tool-window-close {:on-click on-click} i/close]
|
||||||
|
]
|
||||||
[:div.tool-window-content
|
[:div.tool-window-content
|
||||||
[:& canvas-list {:canvas canvas
|
[:& canvas-list {:canvas canvas
|
||||||
:shapes all-shapes
|
:shapes all-shapes
|
||||||
|
|
|
@ -113,10 +113,10 @@
|
||||||
(let [close #(st/emit! (udw/toggle-layout-flag :element-options))
|
(let [close #(st/emit! (udw/toggle-layout-flag :element-options))
|
||||||
selected (mf/deref refs/selected-shapes)]
|
selected (mf/deref refs/selected-shapes)]
|
||||||
[:div.elementa-options.tool-window
|
[:div.elementa-options.tool-window
|
||||||
[:div.tool-window-bar
|
;; [:div.tool-window-bar
|
||||||
[:div.tool-window-icon i/options]
|
;; [:div.tool-window-icon i/options]
|
||||||
[:span (tr "ds.settings.element-options")]
|
;; [:span (tr "ds.settings.element-options")]
|
||||||
[:div.tool-window-close {:on-click close} i/close]]
|
;; [:div.tool-window-close {:on-click close} i/close]]
|
||||||
[:div.tool-window-content
|
[:div.tool-window-content
|
||||||
[:div.element-options
|
[:div.element-options
|
||||||
(if (= (count selected) 1)
|
(if (= (count selected) 1)
|
||||||
|
|
Loading…
Add table
Reference in a new issue