Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

switch to using TypeScript

Browse source
This commit is contained in:
Johannes Loher 2020-12-23 16:52:20 +01:00
parent 1d120b273a
commit d163fd27fe
53 changed files with 2875 additions and 1614 deletions
Download patch file Download diff file Expand all files Collapse all files

16
scss/components/_apps.scss
View file

@ -1,16 +0,0 @@
.window-content {
overflow-y: hidden;
padding: 5px;
form {
height: 100%;
overflow: hidden;
}
.tab {
height: 100%;
overflow-y: auto;
align-content: flex-start;
}
}

13
scss/components/_basic_property.scss
View file

@ -1,13 +0,0 @@
.basic-properties {
flex: 0 0 100%;
.basic-property {
.basic-property-label {
font-weight: bold;
}
.basic-property-select {
display: block;
width: 100%;
}
}
}

39
scss/components/_description.scss
View file

@ -1,39 +0,0 @@
.side-properties {
flex: 0 0 150px;
margin: 5px 5px 5px 0;
padding-right: 5px;
border-right: 2px groove $c-border-groove;
.side-property {
margin: 2px 0;
display: flex;
flex-direction: row;
label {
flex: 2;
line-height: 26px;
font-weight: bold;
}
input,
select {
text-align: right;
flex: 1;
width: calc(100% - 2px);
}
}
}
.sheet-body .tab .editor {
height: 100%;
}
.tox {
.tox-editor-container {
background: $c-white;
}
.tox-edit-area {
padding: 0 8px;
}
}

62
scss/components/_forms.scss
View file

@ -1,62 +0,0 @@
.item-form {
font-family: $font-primary;
}
$header-top-margin: 5px;
header.sheet-header {
flex: 0 0 210px;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
.profile-img {
flex: 0 0 100px;
height: 100px;
margin: $header-top-margin 10px $header-top-margin 0;
}
.header-fields {
flex: 1;
}
h1.charname {
height: 50px;
padding: 0px;
margin: $header-top-margin 10px $header-top-margin 0;
border-bottom: 0;
input {
width: 100%;
height: 100%;
margin: 0;
border: none;
background-color: transparent;
}
font-family: $font-heading;
display: block;
}
h2.item-type {
font-family: $font-heading;
display: block;
height: 50px;
padding: 0px;
flex: 0 0 0;
color: $c-light-grey;
border: none;
line-height: 50px;
margin: $header-top-margin 0;
text-align: right;
}
}
.sheet-tabs {
flex: 0;
}
.sheet-body,
.sheet-body .tab {
height: 100%;
}

35
scss/components/_items.scss
View file

@ -1,35 +0,0 @@
.items-list {
list-style: none;
margin: 7px 0;
padding: 0;
overflow-y: auto;
.item-header {
font-weight: bold;
}
.item {
height: 30px;
line-height: 24px;
padding: 3px 0;
border-bottom: 1px solid #BBB;
.item-image {
flex: 0 0 24px;
margin-right: 5px;
}
img {
display: block;
}
}
.item-name {
margin: 0;
}
.item-controls {
flex: 0 0 86px;
text-align: right;
}
}

14
scss/components/_tabs.scss
View file

@ -1,14 +0,0 @@
nav.tabs {
height: 40px;
border-top: 2px groove $c-border-groove;
border-bottom: 2px groove $c-border-groove;
.item {
line-height: 40px;
font-weight: bold;
}
.item.active {
text-decoration: none;
}
}

20
scss/ds4.scss
View file

@ -1,20 +0,0 @@
// Import utilities.
@import "utils/typography";
@import "utils/colors";
@import "utils/mixins";
@import "utils/variables";
/* Global styles */
@import "global/window";
@import "global/grid";
@import "global/flex";
/* Styles limited to ds4 sheets */
.ds4 {
@import "components/apps";
@import "components/forms";
@import "components/basic_property";
@import "components/tabs";
@import "components/items";
@import "components/description";
}

60
scss/global/_flex.scss
View file

@ -1,60 +0,0 @@
/* ----------------------------------------- */
/* Flexbox */
/* ----------------------------------------- */
.flexrow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
> * {
flex: 1;
}
.flex1 {
flex: 1;
}
.flex2 {
flex: 2;
}
.flex3 {
flex: 3;
}
.flex4 {
flex: 4;
}
}
.flexcol {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
> * {
flex: 1;
}
.flex1 {
flex: 1;
}
.flex2 {
flex: 2;
}
.flex3 {
flex: 3;
}
.flex4 {
flex: 4;
}
}
.flex-center {
align-items: center;
justify-content: center;
text-align: center;
}
.flex-between {
justify-content: space-between;
}

83
scss/global/_grid.scss
View file

@ -1,83 +0,0 @@
.grid,
.grid-2col {
display: grid;
grid-column: span 2 / span 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 0;
}
.grid-1col {
grid-column: span 1 / span 1;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-3col {
grid-column: span 3 / span 3;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4col {
grid-column: span 4 / span 4;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-5col {
grid-column: span 5 / span 5;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-6col {
grid-column: span 5 / span 5;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-7col {
grid-column: span 7 / span 7;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-8col {
grid-column: span 8 / span 8;
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-9col {
grid-column: span 9 / span 9;
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-10col {
grid-column: span 10 / span 10;
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-11col {
grid-column: span 11 / span 11;
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-12col {
grid-column: span 12 / span 12;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.flex-group-center,
.flex-group-left,
.flex-group-right {
justify-content: center;
align-items: center;
text-align: center;
padding: 5px;
border: 1px solid #999;
}
.flex-group-left {
justify-content: flex-start;
text-align: left;
}
.flex-group-right {
justify-content: flex-end;
text-align: right;
}

12
scss/global/_window.scss
View file

@ -1,12 +0,0 @@
.window-app {
font-family: $font-primary;
}
.rollable {
&:hover,
&:focus {
color: #000;
text-shadow: 0 0 10px red;
cursor: pointer;
}
}

4
scss/utils/_colors.scss
View file

@ -1,4 +0,0 @@
$c-white: #fff;
$c-black: #000;
$c-light-grey: #777;
$c-border-groove: #eeede0;

16
scss/utils/_mixins.scss
View file

@ -1,16 +0,0 @@
@mixin element-invisible {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
@mixin hide {
display: none;
}

12
scss/utils/_typography.scss
View file

@ -1,12 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap");
@font-face {
font-family: "Wood Stamp";
font-style: normal;
font-weight: normal;
src: local("Wood Stamp"), url("../fonts/Woodstamp.woff") format("woff");
}
$font-primary: "Lora", sans-serif;
$font-secondary: "Lora", sans-serif;
$font-heading: "Wood Stamp", sans-serif;

3
scss/utils/_variables.scss
View file

@ -1,3 +0,0 @@
$padding-sm: 5px;
$padding-md: 10px;
$padding-lg: 20px;