[scss.popup] popup layout
This commit is contained in:
xdrm-brackets
parent
4ff95c44b8
commit
1dd2db9d79
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?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"
|
||||||
|
data-name="Livello 1"
|
||||||
|
id="Livello_1"
|
||||||
|
viewBox="0 0 128 128"
|
||||||
|
version="1.1"
|
||||||
|
sodipodi:docname="checked.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata13">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs11" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1015"
|
||||||
|
id="namedview9"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="1.84375"
|
||||||
|
inkscape:cx="64"
|
||||||
|
inkscape:cy="64"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="Livello_1" />
|
||||||
|
<path
|
||||||
|
d="M 100.42,31.022206 43.293309,87.203898 27.670348,70.757873 a 4.5725739,4.5725739 0 0 0 -6.630232,6.294911 l 18.823763,19.814487 a 4.5725739,4.5725739 0 0 0 3.231285,1.417498 h 0.07621 a 4.5725739,4.5725739 0 0 0 3.200802,-1.310805 L 106.80636,37.530503 a 4.5752722,4.5752722 0 1 0 -6.41684,-6.523539 z"
|
||||||
|
id="path6"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="stroke-width:1.52419126;fill:#7289da;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,44 @@
|
||||||
|
<?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"
|
||||||
|
enable-background="new 0 0 100 100"
|
||||||
|
id="Layer_1"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
xml:space="preserve"
|
||||||
|
sodipodi:docname="dialog.add.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
|
||||||
|
id="metadata9"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs7" /><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1015"
|
||||||
|
id="namedview5"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="9.44"
|
||||||
|
inkscape:cx="56.65302"
|
||||||
|
inkscape:cy="52.459637"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="Layer_1" /><path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#a1a3a0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79571247;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 48.203125,17.248047 c -0.770911,8.33e-4 -1.395651,0.625573 -1.396484,1.396484 V 49.505859 H 15.945312 c -0.770912,8.33e-4 -1.395651,0.625573 -1.396484,1.396485 v 3.894531 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 30.861329 v 30.861329 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 3.894531 c 0.770912,-8.33e-4 1.395652,-0.625572 1.396485,-1.396484 V 56.193359 h 30.861328 c 0.770911,-8.33e-4 1.395651,-0.625573 1.396484,-1.396484 V 50.902344 C 85.75112,50.131432 85.126381,49.506692 84.355469,49.505859 H 83.574219 53.494141 V 18.644531 c -8.33e-4,-0.770912 -0.625573,-1.395651 -1.396485,-1.396484 z"
|
||||||
|
id="polygon2"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccccccccccccccccc" /></svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,44 @@
|
||||||
|
<?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"
|
||||||
|
enable-background="new 0 0 100 100"
|
||||||
|
id="Layer_1"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
xml:space="preserve"
|
||||||
|
sodipodi:docname="dialog.add@hover.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
|
||||||
|
id="metadata9"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs7" /><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1015"
|
||||||
|
id="namedview5"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="9.44"
|
||||||
|
inkscape:cx="56.65302"
|
||||||
|
inkscape:cy="52.459637"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="Layer_1" /><path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#dddedd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79571247;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 48.203125,17.248047 c -0.770911,8.33e-4 -1.395651,0.625573 -1.396484,1.396484 V 49.505859 H 15.945312 c -0.770912,8.33e-4 -1.395651,0.625573 -1.396484,1.396485 v 3.894531 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 30.861329 v 30.861329 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 3.894531 c 0.770912,-8.33e-4 1.395652,-0.625572 1.396485,-1.396484 V 56.193359 h 30.861328 c 0.770911,-8.33e-4 1.395651,-0.625573 1.396484,-1.396484 V 50.902344 C 85.75112,50.131432 85.126381,49.506692 84.355469,49.505859 H 83.574219 53.494141 V 18.644531 c -8.33e-4,-0.770912 -0.625573,-1.395651 -1.396485,-1.396484 z"
|
||||||
|
id="polygon2"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccccccccccccccccc" /></svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,56 @@
|
||||||
|
<?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="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
version="1.1"
|
||||||
|
id="svg851"
|
||||||
|
sodipodi:docname="dialog.text@active.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata857">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs855" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1015"
|
||||||
|
id="namedview853"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="51.4375"
|
||||||
|
inkscape:cx="8"
|
||||||
|
inkscape:cy="8"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg851" />
|
||||||
|
<path
|
||||||
|
style="fill:#b9bbbe;fill-opacity:1"
|
||||||
|
d="M2.27333333,12 L2.74666667,9.33333333 L0.08,9.33333333 L0.313333333,8 L2.98,8 L3.68666667,4 L1.02,4 L1.25333333,2.66666667 L3.92,2.66666667 L4.39333333,0 L5.72666667,0 L5.25333333,2.66666667 L9.25333333,2.66666667 L9.72666667,0 L11.06,0 L10.5866667,2.66666667 L13.2533333,2.66666667 L13.02,4 L10.3533333,4 L9.64666667,8 L12.3133333,8 L12.08,9.33333333 L9.41333333,9.33333333 L8.94,12 L7.60666667,12 L8.08,9.33333333 L4.08,9.33333333 L3.60666667,12 L2.27333333,12 L2.27333333,12 Z M5.02,4 L4.31333333,8 L8.31333333,8 L9.02,4 L5.02,4 L5.02,4 Z"
|
||||||
|
transform="translate(1.333 2)"
|
||||||
|
id="path849" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?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="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
version="1.1"
|
||||||
|
id="svg914"
|
||||||
|
sodipodi:docname="dialog.voice@active.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata920">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs918" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="800"
|
||||||
|
inkscape:window-height="480"
|
||||||
|
id="namedview916"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="14.75"
|
||||||
|
inkscape:cx="8"
|
||||||
|
inkscape:cy="8"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg914" />
|
||||||
|
<path
|
||||||
|
style="fill:#b9bbbe;fill-opacity:1"
|
||||||
|
d="M9.33333333,2 L9.33333333,3.37333333 C11.26,3.94666667 12.6666667,5.73333333 12.6666667,7.84666667 C12.6666667,9.96 11.26,11.74 9.33333333,12.3133333 L9.33333333,13.6933333 C12,13.0866667 14,10.7 14,7.84666667 C14,4.99333333 12,2.60666667 9.33333333,2 L9.33333333,2 Z M11,7.84666667 C11,6.66666667 10.3333333,5.65333333 9.33333333,5.16 L9.33333333,10.5133333 C10.3333333,10.04 11,9.02 11,7.84666667 L11,7.84666667 Z M2,5.84666667 L2,9.84666667 L4.66666667,9.84666667 L8,13.18 L8,2.51333333 L4.66666667,5.84666667 L2,5.84666667 L2,5.84666667 Z"
|
||||||
|
id="path912" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -11,12 +11,14 @@
|
||||||
|
|
||||||
<!-- STYLESHEET -->
|
<!-- STYLESHEET -->
|
||||||
<link type='text/css' rel='stylesheet' href='./css/layout.css'>
|
<link type='text/css' rel='stylesheet' href='./css/layout.css'>
|
||||||
|
<link type='text/css' rel='stylesheet' href='./css/global.css'>
|
||||||
<link type='text/css' rel='stylesheet' href='./css/menu.css'>
|
<link type='text/css' rel='stylesheet' href='./css/menu.css'>
|
||||||
<link type='text/css' rel='stylesheet' href='./css/dialog.css'>
|
<link type='text/css' rel='stylesheet' href='./css/dialog.css'>
|
||||||
<link type='text/css' rel='stylesheet' href='./css/container.css'>
|
<link type='text/css' rel='stylesheet' href='./css/container.css'>
|
||||||
|
<link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
|
||||||
|
|
||||||
<!-- FONT -->
|
<!-- FONT -->
|
||||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Arvo|Exo+2" rel="stylesheet">
|
<!-- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Arvo|Exo+2" rel="stylesheet"> -->
|
||||||
|
|
||||||
|
|
||||||
<!-- BODY -->
|
<!-- BODY -->
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ $dialog-header-bg: #2f3136;
|
||||||
$dialog-bg: #2f3136;
|
$dialog-bg: #2f3136;
|
||||||
$container-bg: #36393e;
|
$container-bg: #36393e;
|
||||||
$header-bg: #36393f;
|
$header-bg: #36393f;
|
||||||
|
$main: #7289da;
|
||||||
|
|
||||||
|
|
||||||
/* (1) Header specific
|
/* (1) Header specific
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
background-color: $dialog-bg;
|
background-color: $dialog-bg;
|
||||||
|
|
||||||
/* (1) Container HEADER */
|
/* (2) Container HEADER */
|
||||||
& > div.header{
|
& > div.header{
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -29,9 +29,16 @@
|
||||||
|
|
||||||
padding: #{$header-height/4} 1em;
|
padding: #{$header-height/4} 1em;
|
||||||
|
|
||||||
|
background: url('../asset/svg/arrow.down@hover.svg') right .7em center no-repeat;
|
||||||
|
background-size: auto 1.2em;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (2) Container BODY */
|
/* (3) Container BODY */
|
||||||
& > div.body{
|
& > div.body{
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -50,9 +57,8 @@
|
||||||
|
|
||||||
/* (3) Toggle label */
|
/* (3) Toggle label */
|
||||||
& div.toggle{
|
& div.toggle{
|
||||||
display: block;
|
display: inline-block;
|
||||||
width: calc( 100% - 2*.5em );
|
width: calc( 100% - 2*.5em - 3em );
|
||||||
|
|
||||||
|
|
||||||
margin: 0 .5em;
|
margin: 0 .5em;
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
|
|
@ -88,9 +94,27 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (4) UL after toggle label */
|
/* (4) Add button */
|
||||||
& div.toggle + ul,
|
& div.add{
|
||||||
& div.toggle:not([data-toggle='1']) + ul{
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: .15em;
|
||||||
|
left: -.5em;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
|
||||||
|
background: url('../asset/svg/dialog.add.svg') center center no-repeat;
|
||||||
|
background-size: auto 100%;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover{ background-image: url('../asset/svg/dialog.add@hover.svg'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (5) UL after toggle label */
|
||||||
|
& div.toggle ~ ul,
|
||||||
|
& div.toggle:not([data-toggle='1']) ~ ul{
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
|
|
@ -149,7 +173,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// when visible
|
// when visible
|
||||||
& div.toggle[data-toggle='1'] + ul{ display: block; }
|
& div.toggle[data-toggle='1'] ~ ul{ display: block; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
@import 'constants';
|
||||||
|
|
||||||
|
|
||||||
|
/* (1) Title box
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
// [data-title]:before{ content: 'test'; }
|
||||||
|
|
||||||
|
// [data-title]:before{
|
||||||
|
|
||||||
|
// content: attr(data-title);
|
||||||
|
|
||||||
|
// display: block;
|
||||||
|
// position: absolute;
|
||||||
|
|
||||||
|
// padding: .8em 1em;
|
||||||
|
|
||||||
|
// border-radius: 5px / 5px;
|
||||||
|
|
||||||
|
// color: #ddd;
|
||||||
|
|
||||||
|
// background-color: #000;
|
||||||
|
|
||||||
|
// transform: translateY(-75%) translateX(80%);
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
@ -0,0 +1,215 @@
|
||||||
|
@import 'constants';
|
||||||
|
|
||||||
|
|
||||||
|
/* (1) Popup box
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
.popup{
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 440px;
|
||||||
|
min-height: 200px;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
|
||||||
|
border-radius: 5px / 5px;
|
||||||
|
|
||||||
|
box-shadow: 0 0 0 100vw rgba(0,0,0,.8);
|
||||||
|
|
||||||
|
background-color: #36393f;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
z-index: 800;
|
||||||
|
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (2) Popup HEADER
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
.popup > .header{
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin: 1em 1.3em;
|
||||||
|
|
||||||
|
font-size: .9em;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (3) Popup BODY
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
.popup > .body{
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin: 0 1.2em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
label{
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: .7em;
|
||||||
|
|
||||||
|
font-size: .7em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
.select-box{
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
padding: .7em 1em;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
|
||||||
|
border: 1px solid #222;
|
||||||
|
border-radius: 3px / 3px;
|
||||||
|
|
||||||
|
background-color: #313339;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
transition: border-color .1s ease-in-out;
|
||||||
|
|
||||||
|
&:hover{ border-color: #111; }
|
||||||
|
&:focus{ border-color: #7289da; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-box[data-type]{
|
||||||
|
padding-left: 4em;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition: background-color .1s ease-in-out,
|
||||||
|
border-color 0s;
|
||||||
|
|
||||||
|
// {1} Trailing icon //
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: .1em;
|
||||||
|
margin-left: -1.65em;
|
||||||
|
width: 1.3em;
|
||||||
|
height: 1.3em;
|
||||||
|
|
||||||
|
background: center center no-repeat;
|
||||||
|
background-size: auto 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// specific images
|
||||||
|
&[data-type='text']:before{ background-image: url('../asset/svg/dialog.text@active.svg'); }
|
||||||
|
&[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice@active.svg'); }
|
||||||
|
|
||||||
|
|
||||||
|
// {2} Checkbox //
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -1.4em;
|
||||||
|
margin-left: -3.4em;
|
||||||
|
width: 1.3em;
|
||||||
|
height: 1.3em;
|
||||||
|
|
||||||
|
border: 1px solid #888;
|
||||||
|
border-radius: 3px / 3px;
|
||||||
|
|
||||||
|
background: center center no-repeat;
|
||||||
|
background-size: auto 80%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// {3} Active item //
|
||||||
|
&[data-selected='1']{
|
||||||
|
background-color: $main;
|
||||||
|
border-color: $main;
|
||||||
|
&:hover{ border-color: $main; }
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
border-color: #fff;
|
||||||
|
background-color: #fff;
|
||||||
|
background-image: url('../asset/svg/checked.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (4) Popup Footer
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
.popup > .footer{
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
padding: 1.2em 1em;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
background-color: #2f3136;
|
||||||
|
|
||||||
|
& > button:first-child{
|
||||||
|
|
||||||
|
margin: 0 2em;
|
||||||
|
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
font-size: .8em;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
&:hover{ text-decoration: underline; }
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > button:nth-child(2){
|
||||||
|
|
||||||
|
padding: .8em 1.5em;
|
||||||
|
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px / 3px;
|
||||||
|
|
||||||
|
background-color: $main;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
font-size: .8em;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition: background-color .1s ease-in-out;
|
||||||
|
|
||||||
|
&:hover{ background-color: darken($main, 5%);}
|
||||||
|
&:active{ background-color: darken($main, 10%);}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
<div class='dialog'>
|
<div class='dialog'>
|
||||||
|
|
||||||
|
|
||||||
<div class='header'>
|
<div class='header'>
|
||||||
<div class='title'>{{ 'blabla' }}</div>
|
<div class='title'>{{ 'blabla' }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -13,7 +14,10 @@
|
||||||
<div v-for='(rooms, type) in gs.room'>
|
<div v-for='(rooms, type) in gs.room'>
|
||||||
<div class='toggle'
|
<div class='toggle'
|
||||||
:data-toggle='rooms.visible?1:0'
|
:data-toggle='rooms.visible?1:0'
|
||||||
@click='rooms.visible=!rooms.visible'>{{ type }} rooms</div>
|
@click='rooms.visible=!rooms.visible'>
|
||||||
|
{{ type }} <span>rooms</span>
|
||||||
|
</div>
|
||||||
|
<div class='add' data-title='Create channel' @click='gs.room.create()'></div>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for='r in rooms.list'
|
<li v-for='r in rooms.list'
|
||||||
:class='rooms.current==r.id?`active`:``'
|
:class='rooms.current==r.id?`active`:``'
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,27 @@
|
||||||
<!-- Container -->
|
<!-- Container -->
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
|
|
||||||
|
<!-- Pop-up -->
|
||||||
|
<div class='popup'>
|
||||||
|
<span class='header'>Create text channel</span>
|
||||||
|
|
||||||
|
<span class='body'>
|
||||||
|
<label for='channel_name'>Channel Name</label>
|
||||||
|
<input type='text' name='channel_name'>
|
||||||
|
|
||||||
|
<label for='channel_name'>Channel Type</label>
|
||||||
|
<div class='select'>
|
||||||
|
<span class='select-box' @click='selected=0' :data-selected='selected==0?1:0' data-type='text'>Text Channel</span>
|
||||||
|
<span class='select-box' @click='selected=1' :data-selected='selected==1?1:0' data-type='voice'>Voice Channel</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class='footer'>
|
||||||
|
<button>Cancel</button>
|
||||||
|
<button>Create Channel</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -25,7 +46,7 @@
|
||||||
|
|
||||||
name: 'wrapper-',
|
name: 'wrapper-',
|
||||||
|
|
||||||
data(){ return { gs: gs.get }; },
|
data(){ return { gs: gs.get, selected: 1}; },
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
'MenuComp': menu_vue,
|
'MenuComp': menu_vue,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue