uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update item style for flex stretch css

Browse Source
This commit is contained in:
Mandar
2021-01-07 19:38:01 +01:00
parent 5449d4a4de
commit b6549b7230
7 changed files with 117 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

2
system/styles/scss/global.scss
View File

@@ -113,7 +113,7 @@ fieldset {
color: $l5r5e-label;
}
.editor {
height: calc(100% - 1.25rem);
height: 100%;
}
}

104
system/styles/scss/items.scss
View File

@@ -92,18 +92,31 @@
&.technique,
&.weapon {
.sheet-header {
margin-bottom: 0.5rem;
img {
flex: 0 0 90px;
height: 90px;
width: 90px;
background: rgba(255, 255, 255, 0.25);
}
h1 {
input {
height: 5.5rem;
}
}
}
fieldset {
input[name="data.effects"] {
text-align: left;
}
}
.sheet-body {
flex: 100%;
height: calc(100% - 90px);
align-self: stretch;
display: flex;
flex-wrap: wrap;
}
article {
display: flex;
flex-wrap: wrap;
@@ -114,8 +127,14 @@
line-height: 1.5rem;
}
&.attributes {
.advancement_type,
.advancement_skill,
align-self: flex-start;
width: 100%;
height: 6.5rem;
#advancement_type,
#advancement_skill {
flex: 0 0 calc(40% - 2rem);
margin: 0.25rem;
}
select[name="data.skill"],
select[name="data.ring"],
select[name="data.peculiarity_type"],
@@ -133,7 +152,12 @@
select[name="data.skill"] {
text-transform: capitalize;
}
.type,
.type {
flex: 100%;
label {
width: 50%;
}
}
.properties {
flex: 0 0 calc(50% - 0.5rem);
margin: 0.25rem;
@@ -147,7 +171,7 @@
input[type="number"] {
width: 2rem;
&.grip {
width: 12rem;
width: 100%;
margin-bottom: 0.25rem;
}
}
@@ -173,6 +197,9 @@
}
&.infos {
display: flex;
align-self: stretch;
height: calc(100% - 7.5rem);
width: 100%;
.reference {
flex: 0 0 calc(100% - 0.5rem);
input[name="data.book_reference"] {
@@ -180,6 +207,15 @@
width: 70%;
}
}
fieldset {
align-self: stretch;
height: calc(100% - 2rem);
}
}
&.properties {
fieldset {
margin-bottom: 0.5rem;
}
}
}
}
@@ -219,35 +255,69 @@
}
}
}
&.peculiarity {
article {
&.attributes {
height: 8.5rem;
}
&.infos {
height: calc(100% - 9.5rem);
}
}
}
&.item {
article {
&.attributes {
height: 4.5rem;
.properties {
flex: 100%;
}
}
&.infos {
flex: 0 0 60%;
height: calc(100% - 5.5rem);
}
&.properties {
flex: 0 0 40%;
height: calc(100% - 5.5rem);
}
}
}
&.property {
.sheet-header {
img {
flex: 0 0 75px;
height: 75px;
width: 75px;
background: rgba(255, 255, 255, 0.25);
}
&.infos {
height: 100%;
}
article {
min-height: calc(100% - 5rem);
}
}
&.armor {
article {
&.attributes {
height: 9.5rem;
}
&.infos {
flex: 0 0 60%;
height: calc(100% - 10.5rem);
}
&.properties {
flex: 0 0 40%;
height: calc(100% - 10.5rem);
}
}
}
&.weapon {
article {
&.attributes {
.attribute-value,
.stats {
height: 18.5rem;
.stats,
.attribute-value {
flex: 0 0 calc(50% - 0.5rem);
flex-wrap: wrap;
margin: 0.25rem;
label {
width: 100%;
}
}
.value {
flex: 0 0 calc(25% - 0.5rem);
@@ -262,6 +332,14 @@
}
}
}
&.infos {
flex: 0 0 60%;
height: calc(100% - 19.5rem);
}
&.properties {
flex: 0 0 40%;
height: calc(100% - 19.5rem);
}
}
}
.item-list {

25
system/styles/scss/sheets.scss
View File

@@ -39,6 +39,11 @@
box-shadow: none;
}
}
fieldset {
&.advancement {
display: block;
}
}
.advancements-tabs {
height: 2rem;
line-height: 2rem;
@@ -49,22 +54,10 @@
margin: 0 0 0.25rem 0.5rem;
}
}
&.item,
.technique,
.weapon,
.armor,
.advantages,
.disadvantages {
.sheet-header {
height: 10rem;
}
.sheet-body {
height: calc(100% - 10rem);
}
}
form {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.sheet-body {
flex: 0 0 100%;
@@ -430,6 +423,12 @@
.narrative-content,
.narrative-note {
flex: 0 0 calc(50% - 0.5rem);
fieldset {
display: block;
label {
width: 100%;
}
}
}
.techniques-wrapper {
.checklist {

2
system/templates/items/armor/armor-sheet.html
View File

@@ -23,6 +23,8 @@
<input class="select-on-focus" type="number" name="data.armor.supernatural" value="{{data.armor.supernatural}}" data-dtype="Number" min="0" placeholder="0"/>
</label>
</fieldset>
</article>
<article class="properties" data-group="primary" data-tab="properties">
{{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }}
</article>
{{> 'systems/l5r5e/templates/items/item/item-infos.html' }}

4
system/templates/items/item/item-sheet.html
View File

@@ -6,12 +6,14 @@
{{!-- Sheet Body --}}
<section class="sheet-body">
{{!-- properties Tab --}}
<article class="attributes" data-group="primary" data-tab="properties">
<article class="attributes" data-group="primary" data-tab="checkbox">
<label class="equipped checkbox">
<input type="checkbox" name="data.equipped" {{checked item.data.equipped}} />
{{ localize 'l5r5e.armors.equipped' }}
</label>
{{> 'systems/l5r5e/templates/items/item/item-value.html' }}
</article>
<article class="properties" data-group="primary" data-tab="properties">
{{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }}
</article>
{{> 'systems/l5r5e/templates/items/item/item-infos.html' }}

12
system/templates/items/weapon/weapon-sheet.html
View File

@@ -44,12 +44,14 @@
{{ localize 'l5r5e.weapons.deadliness' }}
<input class="select-on-focus" type="number" name="data.deadliness" value="{{data.deadliness}}" data-dtype="Number" min="0" placeholder="0"/>
</label>
<label>
{{ localize 'l5r5e.weapons.grips' }}
<input class="grip" type="text" name="data.grip_1" value="{{data.grip_1}}" />
<input class="grip" type="text" name="data.grip_2" value="{{data.grip_2}}" />
</label>
</fieldset>
<fieldset class="stats">
<legend class="text-block-header">{{ localize 'l5r5e.weapons.grips' }}</legend>
<input class="grip" type="text" name="data.grip_1" value="{{data.grip_1}}" />
<input class="grip" type="text" name="data.grip_2" value="{{data.grip_2}}" />
</fieldset>
</article>
<article class="properties" data-group="primary" data-tab="properties">
{{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }}
</article>
{{> 'systems/l5r5e/templates/items/item/item-infos.html' }}