Skip to content

R
RLG Maker
Commit 36c8fcef authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

update supplementary-role

parent aed0b633
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 48 deletions
src/app/pieces/role/role.component.html
View file @ 36c8fcef
...@@ -118,28 +118,34 @@ ...@@ -118,28 +118,34 @@
<button mat-button><mat-icon fontIcon="add"></mat-icon></button> <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div> </div>
<div class="piece-form-title">Rôle supplémentaire</div>
<div class="piece-form-supplementary"> <div class="piece-form-supplementary">
<div class="piece-form-title">Rôle supplémentaire</div> <div class="piece-form-supplementary-form">
<div> <div>
<div class="piece-form-supplementary-name"> <div class="piece-form-supplementary-form-name">
<label for="name">Nom</label> <label for="name">Nom</label>
<input name="name" type="text"/> <input name="name" type="text"/>
</div> </div>
<div class="piece-form-supplementary-textarea"> <div class="piece-form-supplementary-form-textarea">
<label for="objectives">Objectifs</label> <label for="objectives">Objectifs</label>
<textarea name="objectives"></textarea> <textarea name="objectives"></textarea>
</div> </div>
<div class="piece-form-supplementary-textarea"> <div class="piece-form-supplementary-form-textarea">
<label for="skills">Compétences</label> <label for="skills">Compétences</label>
<textarea name="skills"></textarea> <textarea name="skills"></textarea>
</div> </div>
<div class="piece-form-supplementary-textarea"> <div class="piece-form-supplementary-form-textarea">
<label for="rules">Règles</label> <label for="rules">Règles</label>
<textarea nam="rules"></textarea> <textarea name="rules"></textarea>
</div>
<div class="piece-form-supplementary-form-color">
<label for="color">Couleur</label>
<input name="color" type="color"/>
</div>
</div> </div>
</div> </div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div> </div>
<button class="piece-form-supplementary-form-add" mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div> </div>
</div> </div>
src/app/pieces/role/role.component.scss
View file @ 36c8fcef
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
width: 400px; width: 400px;
position: relative; position: relative;
background: linear-gradient(303deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 25%, #9ad5ec 25%, #9ad5ec 100%); background-color: #9ad5ec;
&-menu { &-menu {
position: absolute; position: absolute;
...@@ -237,7 +237,7 @@ ...@@ -237,7 +237,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 5px; margin-bottom: 5px;
input[type="text"] { input[type="text"] {
margin-left: 5px; margin-left: 5px;
} }
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
&-skill { &-skill {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
select { select {
margin-left: 5px; margin-left: 5px;
} }
...@@ -255,7 +255,7 @@ ...@@ -255,7 +255,7 @@
&-add { &-add {
margin-top: 5px; margin-top: 5px;
button { button {
width: 100%; width: 100%;
} }
...@@ -325,37 +325,58 @@ ...@@ -325,37 +325,58 @@
} }
&-supplementary { &-supplementary {
margin-bottom: 25px; padding-bottom: 10px;
background: linear-gradient(304deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 50%, #9ad5ec 50%, #9ad5ec 100%);
width: 398px;
position: relative;
left: -34px;
&-name { &-form {
margin-top: 10px; width: 350px;
display: flex; margin-left: 33px;
flex-direction: row; margin-right: 10px;
justify-content: space-between;
} &-name {
margin-top: 10px;
&-textarea { display: flex;
display: flex; flex-direction: row;
flex-direction: column; justify-content: space-between;
}
textarea { &-textarea {
height: 100px; display: flex;
flex-direction: column;
textarea {
height: 100px;
}
} }
}
button { &-color {
position: relative; display: flex;
width: 50px; flex-direction: row;
height: 50px; margin-top: 10px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px;
mat-icon { label {
transform: scale(1.3); margin-right: 5px;
color: white;
}
}
&-add {
position: relative;
width: 50px;
height: 50px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 10px;
border-radius: 10px;
margin-bottom: 10px;
mat-icon {
transform: scale(1.3);
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment