jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed SCSS, using CSS only now

Browse Source 
SCSS wasn't being utilized enough to add much value to the build times
This commit is contained in:
Stefan Zermatten
2017-01-20 09:06:24 +02:00
parent b44fe33b30
commit 4261776d8c
17 changed files with 234 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
rpg-docs/.meteor/packages
View File

@@ -41,7 +41,6 @@ wizonesolutions:canonical
meteorhacks:fast-render
standard-minifier-js@1.2.1
shell-server
fourseven:scss
seba:minifiers-autoprefixer
nikogosovd:multiple-uihooks
templates:array

1
rpg-docs/.meteor/versions
View File

@@ -41,7 +41,6 @@ ecwyne:mathjs@0.25.0
ejson@1.0.13
email@1.1.18
fastclick@1.0.13
fourseven:scss@3.13.0
geojson-utils@1.0.10
google@1.1.15
hot-code-push@1.0.4

81
rpg-docs/client/style/cards.css Normal file
View File

@@ -0,0 +1,81 @@
/*Column layout*/
.column-container {
column-fill: balance;
column-gap: 0px;
column-width: 304px;
padding: 4px;
}
.column-container.thin-columns {
column-count: 4;
column-width: 240px;
}
.column-container > div {
padding: 4px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
/*Cards*/
.card {
background: white;
border-radius: 2px;
}
.card .top {
cursor: pointer;
padding: 16px;
border-radius: 2px 2px 0 0;
}
.card .top.white {
cursor: auto;
padding: 16px;
border-bottom: rgba(0,0,0,0.12) solid 1px;
}
.card .bottom {
padding: 16px;
border-radius: 0 0 2px 2px;
}
.card .bottom.list {
padding: 16px 0;
}
.card .bottom.list .subhead {
color: rgba(0,0,0,0.54);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.010em;
padding: 12px 16px 12px 16px;
}
.card .bottom.text {
white-space: pre-wrap;
}
.card .left {
padding: 16px;
border-radius: 2px 0 0 2px;
text-align: center;
min-width: 72px;
}
.card .right {
padding: 16px;
border-radius: 0 2px 2px 0;
}
.card .left paper-icon-button {
display: block;
height: 32px;
padding: 0;
width: 32px;
}
.card .left paper-icon-button[disabled] {
color: rgba(255, 255, 255, 0.2);
}

71
rpg-docs/client/style/cards.scss
View File

@@ -1,71 +0,0 @@
$thickColumnWidth: 304px;
$thinColumnWidth: 240px;
//Column layout
.column-container {
column-fill: balance;
column-gap: 0px;
column-width: $thickColumnWidth;
padding: 4px;
&.thin-columns {
column-count: 4;
column-width: $thinColumnWidth;
}
& > div {
padding: 4px;
//stop divs breaking over multiple columns
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
}
//Cards
.card {
background: white;
border-radius: 2px;
.top {
cursor: pointer;
padding: 16px;
border-radius: 2px 2px 0 0;
&.white {
cursor: auto;
padding: 16px;
border-bottom: rgba(0,0,0,0.12) solid 1px;
}
}
.bottom {
padding: 16px;
border-radius: 0 0 2px 2px;
&.list {
padding: 16px 0;
.subhead {
color: rgba(0,0,0,0.54);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.010em;
padding: 12px 16px 12px 16px;
}
}
&.text {
white-space: pre-wrap;
}
}
.left {
padding: 16px;
border-radius: 2px 0 0 2px;
text-align: center;
min-width: 72px;
}
.right {
padding: 16px;
border-radius: 0 2px 2px 0;
}
}
/* undo pointer cursor on detail box heading */
#globalDetail.card .top {
cursor: auto;
}

0
rpg-docs/client/style/colors.scss → rpg-docs/client/style/colors.css
View File

43
rpg-docs/client/style/listItem.scss → rpg-docs/client/style/listItem.css
View File

@@ -15,23 +15,28 @@ List items
padding: 0 16px 0 16px;
position: relative;
transition: box-shadow 0.3s ease, opacity 0.5s ease-in-out;
&.small {
height: 32px;
}
&.tall {
height: 56px;
}
&.flexible {
height: auto;
padding-top: 16px;
padding-bottom: 16px;
}
&[hero], &:active{
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
z-index: 10;
}
iron-icon, paper-icon-button {
color: #747474;
color: rgba(0,0,0,0.54);
}
}
.item.small {
height: 32px;
}
.item.tall {
height: 56px;
}
.item.flexible {
height: auto;
padding-top: 16px;
padding-bottom: 16px;
}
.item[hero], &:active{
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
z-index: 10;
}
.item iron-icon, .item paper-icon-button {
color: #747474;
color: rgba(0,0,0,0.54);
}

12
rpg-docs/client/style/main.scss → rpg-docs/client/style/main.css
View File

@@ -1,6 +1,4 @@
@import "colors";
//apply a natural box layout model to all elements
/*apply a natural box layout model to all elements*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -18,7 +16,7 @@ body {
background-color: #E0E0E0;
}
//Paragraphs
/*Paragraphs*/
p {
margin-bottom: 8px;
}
@@ -52,7 +50,7 @@ paper-icon-item::shadow #contentIcon {
flex-shrink: 0;
}
//FABs
/*FABs*/
.floatyButton {
position: fixed;
bottom: 24px;
@@ -67,7 +65,7 @@ paper-fab.keyboard-focus {
background: #630c05;
}
//Buttons
/*Buttons*/
paper-button {
color: #000;
color: rgba(0,0,0,0.87);
@@ -77,7 +75,7 @@ paper-button {
text-transform: uppercase;
}
//Style shortcuts
/*Style shortcuts*/
.scroll-y {
overflow-y: auto;
}

24
rpg-docs/client/style/shadowDom.css
View File

@@ -1,24 +0,0 @@
.card .left paper-icon-button {
display: block;
height: 32px;
padding: 0;
width: 32px;
}
.card .left paper-icon-button[disabled] {
color: rgba(255, 255, 255, 0.2);
}
.card .left paper-icon-button /deep/ core-icon {
height: 32px;
width: 32px;
}
/*fix paper-dropdowns*/
body /deep/ core-menu {
overflow-x: hidden !important;
}
html /deep/ paper-dropdown {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}

15
rpg-docs/client/style/tables.css Normal file
View File

@@ -0,0 +1,15 @@
td {
padding: 8px;
}
.strengthTable{
width: 100%;
}
.strengthTable td:nth-child(2){
text-align: right;
}
.summaryTable td:nth-child(3){
text-align: right;
}

21
rpg-docs/client/style/tables.scss
View File

@@ -1,21 +0,0 @@
td {
padding: 8px;
}
.strengthTable{
width: 100%;
td{
&:nth-child(2) {
text-align: right;
}
&:nth-child(3) {
width: 250px;
}
}
}
.summaryTable {
&:nth-child(3){
text-align: right;
}
}

15
rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.css Normal file
View File

@@ -0,0 +1,15 @@
.carryCapacityBar {
background-color: #7DC580;
background-color: rgba(255,255,255,0.27);
position: relative;
height: 4px;
}
.carryCapacityBar div{
height: 100%;
position: absolute;
}
.carryCapacityBar .tick {
border-right: solid 2px #E5E5E5;
border-right-color: rgba(255,255,255,0.54);
}

14
rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.scss
View File

@@ -1,14 +0,0 @@
.carryCapacityBar {
background-color: #7DC580;
background-color: rgba(255,255,255,0.27);
position: relative;
height: 4px;
div{
height: 100%;
position: absolute;
}
.tick {
border-right: solid 2px #E5E5E5;
border-right-color: rgba(255,255,255,0.54);
}
}

22
rpg-docs/client/views/character/stats/skillRow/skillRow.css Normal file
View File

@@ -0,0 +1,22 @@
.skill-row .skill-mod{
width: 45px;
text-align: center;
}
.skill-row .skill-mod.fail {
color: #D50000;
}
.skill-row .skill-mod.advantage{
background-image: url(/png/advantage/greenUp.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.skill-row .skill-mod.disadvantage{
background-image: url(/png/advantage/redDown.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

21
rpg-docs/client/views/character/stats/skillRow/skillRow.scss
View File

@@ -1,21 +0,0 @@
.skill-row {
.skill-mod{
width: 45px;
text-align: center;
&.fail {
color: #D50000;
}
&.advantage{
background-image: url(/png/advantage/greenUp.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
&.disadvantage{
background-image: url(/png/advantage/redDown.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
}

63
rpg-docs/client/views/home/intro/intro.scss
View File

@@ -1,33 +1,32 @@
.intro {
.section {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 24px;
padding-bottom: 24px;
& > div, & > h2 {
padding: 32px;
.display1 {
margin-bottom: 16px;
}
}
.columns > div{
max-width: 300px;
padding: 16px;
text-align: center;
paper-button {
color: #FF5252;
}
}
}
paper-button {
min-width: 200px;
a {
color: inherit;
text-decoration: inherit;
}
}
.intro .section {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 24px;
padding-bottom: 24px;
}
.intro .section > div, .intro .section > h2 {
padding: 32px;
}
.intro .section .display1 {
margin-bottom: 16px;
}
.intro .section .columns > div {
max-width: 300px;
padding: 16px;
text-align: center;
}
.intro .section paper-button {
color: #FF5252;
}
.intro paper-button {
min-width: 200px;
}

41
rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.css Normal file
View File

@@ -0,0 +1,41 @@
.mini-holder {
position: absolute;
padding: 4px;
bottom: 80px;
right: 24px;
width: 56px;
pointer-events: none;
flex-direction: column-reverse !important;
}
.mini-holder core-tooltip{
transform: scale(0);
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
margin: 4px;
}
.mini-holder.active core-tooltip{
transform: scale(1);
}
.mini-holder.active {
pointer-events: auto;
}
.mini-holder.active core-tooltip:nth-child(2){
transition-delay: 0.1s;
}
.mini-holder.active core-tooltip:nth-child(3){
transition-delay: 0.2s;
}
.mini-holder.active core-tooltip:nth-child(4){
transition-delay: 0.3s;
}
.mini-holder.active core-tooltip:nth-child(5){
transition-delay: 0.4s;
}

43
rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss
View File

@@ -1,43 +0,0 @@
.mini-holder {
position: absolute;
padding: 4px;
bottom: 80px;
right: 24px;
width: 56px;
pointer-events: none;
flex-direction: column-reverse !important;
core-tooltip{
transform: scale(0);
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
margin: 4px;
}
&.active {
pointer-events: auto;
core-tooltip{
transform: scale(1);
}
core-tooltip:nth-child(2){
transition-delay: 0.1s;
}
core-tooltip:nth-child(3){
transition-delay: 0.2s;
}
core-tooltip:nth-child(4){
transition-delay: 0.3s;
}
core-tooltip:nth-child(5){
transition-delay: 0.4s;
}
}
}
.expand-menu {
&::shadow iron-icon {
transition: transform 0.3s ease-in-out;
}
&.active::shadow iron-icon{
transform: rotate(405deg);
}
}