diff --git a/css/kidsonbrooms.css b/css/kidsonbrooms.css index 8e242f1..1f0b24b 100644 --- a/css/kidsonbrooms.css +++ b/css/kidsonbrooms.css @@ -162,72 +162,140 @@ } .flex-group-center { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: center; flex-direction: center; + -ms-flex-wrap: center; flex-wrap: center; + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; align-items: stretch; text-align: center; } .flex-group-left { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: flex-start; flex-direction: flex-start; + -ms-flex-wrap: center; flex-wrap: center; + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; align-items: stretch; text-align: left; } .flex-group-right { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: flex-end; flex-direction: flex-end; + -ms-flex-wrap: center; flex-wrap: center; + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; align-items: stretch; text-align: right; } .flexshrink { + -webkit-box-flex: 0; + -ms-flex: 0; flex: 0; } .flex-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; } .flexlarge { + -webkit-box-flex: 2; + -ms-flex: 2; flex: 2; } .align-left { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: flex-start; flex-direction: flex-start; + -ms-flex-wrap: center; flex-wrap: center; + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; align-items: stretch; text-align: left; } .align-right { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: flex-end; flex-direction: flex-end; + -ms-flex-wrap: center; flex-wrap: center; + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; align-items: stretch; text-align: right; } .align-center { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: center; flex-direction: center; + -ms-flex-wrap: center; flex-wrap: center; + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; align-items: stretch; text-align: center; } .right-align-input { + -webkit-box-flex: 1; + -ms-flex: 1; flex: 1; margin-left: auto; max-width: 260px; @@ -248,21 +316,37 @@ font-family: "Roboto", sans-serif; } .kids-on-brooms .sheet-header { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; align-items: stretch; + -webkit-box-flex: 0; + -ms-flex: 0 auto; flex: 0 auto; overflow: hidden; margin-bottom: 10px; } .kids-on-brooms .sheet-header .profile-img { + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; flex: 0 0 100px; height: 100px; margin-right: 10px; } .kids-on-brooms .sheet-header .header-fields { + -webkit-box-flex: 1; + -ms-flex: 1; flex: 1; } .kids-on-brooms .sheet-header h1.charname { @@ -281,7 +365,9 @@ border-radius: 10px; } .kids-on-brooms .sheet-tabs { - flex: 0; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } .kids-on-brooms .sheet-body, .kids-on-brooms .sheet-body .tab, @@ -295,8 +381,14 @@ padding: 0 8px; } .kids-on-brooms .selection-row { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; margin-bottom: 10px; } @@ -307,6 +399,8 @@ height: 28px; margin: 2px 0; padding: 0; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; background: rgba(0, 0, 0, 0.05); border: 2px groove #eeede0; @@ -320,6 +414,8 @@ font-weight: bold; padding-left: 5px; text-align: left; + display: -webkit-box; + display: -ms-flexbox; display: flex; } .kids-on-brooms .items-list { @@ -336,7 +432,11 @@ padding: 0; } .kids-on-brooms .items-list .item { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; padding: 0 2px; border-bottom: 1px solid #c9c7b8; @@ -345,11 +445,15 @@ border-bottom: none; } .kids-on-brooms .items-list .item .item-name { + -webkit-box-flex: 2; + -ms-flex: 2; flex: 2; margin: 0; overflow: hidden; font-size: 13px; text-align: left; + display: -webkit-box; + display: -ms-flexbox; display: flex; color: #191813; } @@ -359,6 +463,8 @@ overflow-x: hidden; } .kids-on-brooms .items-list .item .item-name .item-image { + -webkit-box-flex: 0; + -ms-flex: 0 0 30px; flex: 0 0 30px; height: 30px; background-size: 30px; @@ -366,8 +472,14 @@ margin-right: 5px; } .kids-on-brooms .items-list .item-controls { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; flex: 0 0 100px; + -webkit-box-pack: end; + -ms-flex-pack: end; justify-content: flex-end; } .kids-on-brooms .items-list .item-controls a { @@ -385,6 +497,8 @@ height: 28px; margin: 2px 0; padding: 0; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; background: rgba(0, 0, 0, 0.05); border: 2px groove #eeede0; @@ -399,6 +513,8 @@ text-align: left; } .kids-on-brooms .item-formula { + -webkit-box-flex: 0; + -ms-flex: 0 0 200px; flex: 0 0 200px; padding: 0 8px; } @@ -418,6 +534,4 @@ .kids-on-brooms .kids-on-brooms select:focus { outline: none; border-color: #8102dd; -} - -/*# sourceMappingURL=kidsonbrooms.css.map */ +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 92f75ca..6376fb0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -71,7 +71,7 @@ function compileScss() { /* ----------------------------------------- */ function watchUpdates() { - gulp.watch(SYSTEM_SCSS, css); + gulp.watch(SYSTEM_SCSS, compileScss); } diff --git a/scss/components/_forms.scss b/scss/components/_forms.scss index b84222b..ea9b36d 100644 --- a/scss/components/_forms.scss +++ b/scss/components/_forms.scss @@ -38,7 +38,7 @@ div.editor-border { } .sheet-tabs { - flex: 0; + flex: 1; } .sheet-body, diff --git a/templates/actor/actor-character-sheet.html b/templates/actor/actor-character-sheet.html index 120ff36..3212a86 100644 --- a/templates/actor/actor-character-sheet.html +++ b/templates/actor/actor-character-sheet.html @@ -43,10 +43,14 @@ - {{!-- Schoolbag Tab --}} -