42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

panel create ok

Browse Source
This commit is contained in:
simplonco
2022-12-26 11:12:03 +01:00
parent 010ecfe8c5
commit 934b54197a
5 changed files with 86 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
View File

@@ -28,7 +28,7 @@
<div class="panel panel_create">
<form>
<!-- name: -->
<label for="chat_name"><p>name :</p></label>
<label for="chat_name"><p>new room name :</p></label>
<input id="chat_name" required>
<!-- [ ] pubic -->
<input id="chat_public" type="radio" name="chat_create_type" checked>
@@ -57,10 +57,10 @@
/* grid layout "create"
*/
.grid_box :global(back ) {grid-area: back;}
.grid_box :global(create ) {grid-area: create;}
.grid_box :global(close ) {grid-area: close;}
.grid_box :global(panel_create) {grid-area: panel_create;}
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.create ) {grid-area: create;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_create) {grid-area: panel_create;}
.grid_box {
grid:
' back create close ' auto
@@ -69,6 +69,51 @@
}
/* radio elements style check
*/
:global(#chat_box) form input[type=radio] {
display: none;
}
form label._radio {
margin: 0px 20px 0px auto;
padding-right: 10px;
cursor: pointer;
}
form label._radio p {
margin-top: 0px;
margin-bottom: 0px;
}
form label._radio::after {
content: "";
position: absolute;
top: calc(50% - 6px);
right: 0px;
width: 12px;
height: 12px;
border-radius: 6px;
border: 2px solid rgb(150, 150, 150);
box-sizing: border-box;
cursor: pointer;
}
form input[type=radio]:checked
+ label._radio::after {
background-color: rgb(200, 200, 200);
}
/* change next element on check
*/
:global(#chat_box) form ._check_change_next:checked ~ ._is_hidden {
display: flex;
}
:global(#chat_box) form ._check_change_next:checked ~ ._is_not_gray {
pointer-events: none;
color: rgb(100, 100, 100);
}
:global(#chat_box) form ._is_hidden {
display: none;
}
</style>

51
srcs/requirements/svelte/api_front/src/styles/chat/chat_form.css
View File

@@ -1,55 +1,4 @@
/* default element take all space on each line
*/
#chat_box .chat_item form {
margin: 0px auto;
}
#chat_box .chat_item form * {
margin: 0px;
}
/* radio elements style check
*/
#chat_box .chat_item form input[type=radio] {
display: none;
}
#chat_box .chat_item form label._radio {
margin: 0px 0px 0px auto;
padding-right: 10px;
cursor: pointer;
}
#chat_box .chat_item form label._radio::after {
content: "";
position: absolute;
top: calc(50% - 6px);
right: 0px;
width: 12px;
height: 12px;
border-radius: 6px;
border: 2px solid rgb(150, 150, 150);
box-sizing: border-box;
cursor: pointer;
}
#chat_box .chat_item form input[type=radio]:checked
+ label._radio::after {
background-color: rgb(200, 200, 200);
}
/* change next element on check
*/
#chat_box form ._check_change_next:checked ~ ._is_hidden {
display: flex;
}
#chat_box form ._check_change_next:checked ~ ._is_not_gray {
pointer-events: none;
color: rgb(100, 100, 100);
}
#chat_box form ._is_hidden {
display: none;
}
/* submit button
https://www.fileformat.info/info/unicode/category/So/list.htm