[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 -->
|
||||
<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/dialog.css'>
|
||||
<link type='text/css' rel='stylesheet' href='./css/container.css'>
|
||||
<link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
|
||||
|
||||
<!-- 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 -->
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ $dialog-header-bg: #2f3136;
|
|||
$dialog-bg: #2f3136;
|
||||
$container-bg: #36393e;
|
||||
$header-bg: #36393f;
|
||||
$main: #7289da;
|
||||
|
||||
|
||||
/* (1) Header specific
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
background-color: $dialog-bg;
|
||||
|
||||
/* (1) Container HEADER */
|
||||
/* (2) Container HEADER */
|
||||
& > div.header{
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -29,9 +29,16 @@
|
|||
|
||||
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{
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -50,9 +57,8 @@
|
|||
|
||||
/* (3) Toggle label */
|
||||
& div.toggle{
|
||||
display: block;
|
||||
width: calc( 100% - 2*.5em );
|
||||
|
||||
display: inline-block;
|
||||
width: calc( 100% - 2*.5em - 3em );
|
||||
|
||||
margin: 0 .5em;
|
||||
margin-top: 2em;
|
||||
|
|
@ -88,9 +94,27 @@
|
|||
|
||||
}
|
||||
|
||||
/* (4) UL after toggle label */
|
||||
& div.toggle + ul,
|
||||
& div.toggle:not([data-toggle='1']) + ul{
|
||||
/* (4) Add button */
|
||||
& div.add{
|
||||
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;
|
||||
|
||||
|
|
@ -149,7 +173,7 @@
|
|||
}
|
||||
|
||||
// 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='header'>
|
||||
<div class='title'>{{ 'blabla' }}</div>
|
||||
</div>
|
||||
|
|
@ -13,7 +14,10 @@
|
|||
<div v-for='(rooms, type) in gs.room'>
|
||||
<div class='toggle'
|
||||
: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>
|
||||
<li v-for='r in rooms.list'
|
||||
:class='rooms.current==r.id?`active`:``'
|
||||
|
|
|
|||
|
|
@ -13,6 +13,27 @@
|
|||
<!-- Container -->
|
||||
<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>
|
||||
|
||||
|
||||
|
|
@ -25,7 +46,7 @@
|
|||
|
||||
name: 'wrapper-',
|
||||
|
||||
data(){ return { gs: gs.get }; },
|
||||
data(){ return { gs: gs.get, selected: 1}; },
|
||||
|
||||
components: {
|
||||
'MenuComp': menu_vue,
|
||||
|
|
|
|||
Loading…
Reference in New Issue