commit 49775d66703ed2e34d7052e6abd1c74bacb81b9b (patch)
parent fd62e88b962af0864521c595dde4f4858e97386b
Author: Alex Karle <alex@alexkarle.com>
Date: Sun, 2 May 2021 01:25:50 -0400
style: Refactor SCSS style to CSS in prep for esbuild
Diffstat:
| A | assets/app.css | | | 402 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | assets/app.js | | | 6 | +++--- |
| D | assets/app.scss | | | 397 | ------------------------------------------------------------------------------- |
3 files changed, 405 insertions(+), 400 deletions(-)
diff --git a/assets/app.css b/assets/app.css
@@ -0,0 +1,402 @@
+/* this class is manipulated dynamically by the app,
+ so keep it first, before any imports */
+.err__post {
+ color: red;
+}
+
+.lobby__outer {
+ margin-top: 2rem;
+ margin-left: 3rem;
+}
+.unique__error {
+ margin-top: 1.2rem;
+ color: red;
+}
+.gover__outer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: bisque;
+ padding: 15px;
+}
+.gover__inwin {
+ font-size: 2rem;
+ font-weight: bold;
+}
+.gover__inst {
+ font-size: 1.2rem;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+.textRow {
+ display: flex;
+ align-items: flex-start;
+ margin-top: 1rem;
+ margin-left: 15px;
+ width: 30rem;
+}
+.textRow .bx--btn--icon-only {
+ background-color: lightgreen;
+}
+
+.table__main {
+ /* margin-top: 2rem; */
+ min-width: 950px;
+ min-height: 650px;
+}
+.banner {
+ padding-top: 1rem;
+}
+
+.og {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.score__holder{
+ font-size: 1.2rem;
+ font-weight: bold;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ padding-top: 1rem;
+}
+
+.exit__row {
+ display: flex;
+ justify-content: flex-end;
+ align-items: baseline;
+}
+.leave__button {
+ font-size: 1.3rem;
+}
+.menu__holder {
+ padding-top: 1rem;
+ padding-left: 2rem;
+}
+.seat__picker {
+ height: 46vh;
+ margin-top: 2vh;
+}
+.table__seat {
+ display: flex;
+ justify-content: center;
+ align-items: baseline;
+}
+.spName {
+ font-size: 1.3rem;
+ font-weight: bold;
+}
+
+.sp__top, .sp__bot {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 12vh;
+}
+.sp__mid {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 20vh;
+}
+.start__game {
+ display: flex;
+}
+.start__game .bx--dropdown__wrapper {
+ width: -webkit-fill-available;
+}
+
+.player__name {
+ font-size: 1.6rem;
+ font-weight: bold;
+}
+.play__hinfo {
+ font-size: 1.3rem;
+ min-height: 20px;
+}
+.play__tinfo {
+ font-size: 1.3rem;
+ min-height: 20px;
+}
+.partner__stack{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 1rem;
+}
+.partner__info {
+ width: 100%;
+ display: flex;
+ justify-content: space-evenly;
+}
+.my__stack {
+ float: right;
+}
+.my__hinfo {
+ font-size: 1.5rem;
+}
+.my__tinfo {
+ font-size: 1.3rem;
+}
+.mh__card__wrapper {
+ overflow: hidden;
+}
+
+.mh__card__wrapper:last-child, .mh__card__wrapper:hover {
+ overflow: visible;
+}
+.mh__card {
+ width: 9vw;
+ min-width: 80px;
+}
+.mh__card__row {
+ display: flex;
+ align-content: center;
+ max-width: 35vw;
+}
+.my__hand {
+ /* background-color: cadetblue; */
+
+}
+.cp__outer {
+ width: 100%
+}
+.chat__panel {
+ width: 100%;
+ height: 241px;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid;
+}
+.chat__holder {
+ flex: auto;
+ max-height: 207px;
+ overflow: hidden;
+}
+.chat__tile {
+ height: 207px;
+ overflow: auto;
+ background-color: whitesmoke;
+}
+.chat__input__row {
+ display: flex;
+}
+.chat__post, .err__post {
+ padding-right: 0.3rem;
+ padding-left: 0.3rem;
+}
+.hid__card {
+ width: 30px;
+}
+.hid__card__row {
+ display: flex;
+}
+
+.vert__stack {
+ display: flex;
+ flex-direction: column;
+}
+.vert__stack .hid__card__div {
+ height: 32px;
+}
+.vert__stack .hid__card__row {
+ flex-direction: column;
+}
+.vert__stack .hid__card {
+ transform: rotate(90deg);
+}
+
+.right__stack {
+ margin-left: 1.5vw;
+}
+.og__left, .inner__left {
+ padding-right: 0;
+ padding-left: 0;
+}
+.og__right, inner__right {
+ padding-left: 0;
+}
+
+.tm__left {
+ /* background-color: rgb(217, 249, 255); */
+}
+.tm__left .vert__stack {
+ float: right;
+ align-items: flex-end;
+}
+
+.tt__center {
+ /* background-color: rgb(217, 249, 255); */
+ text-align: center;
+}
+
+.tm__right {
+ height: 35vh;
+ /* background-color: rgb(217, 249, 255); */
+}
+.tb__center {
+ /* background-color: rgb(217, 249, 255); */
+}
+.trick__card {
+ width: 80px;
+}
+.trick__holder, .trick__outer, .trick__grid, .trick__row {
+ height: 100%;
+}
+.left__trick, .right__trick {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+.mid__trick {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+.me {
+ justify-content: flex-end;
+}
+.partner {
+ justify-content: flex-start;
+}
+.both {
+ justify-content: space-between;
+}
+
+.trump__card {
+ width: 80px;
+}
+.trump__outer {
+ height: 100%;
+ width: 100%;
+}
+.trump__holder {
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+.trump__holder.me {
+ flex-direction: column;
+ justify-content: flex-end;
+}
+.trump__holder.partner {
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.trump__holder.left {
+ flex-direction: row;
+ justify-content: flex-start;
+}
+.trump__holder.right {
+ flex-direction: row;
+ justify-content: flex-end;
+}
+.tp1__stack {
+ display: flex;
+ flex-direction: column;
+}
+.tp1__stack .bx--btn, .bx--dropdown__wrapper{
+ margin-bottom: 3px;
+}
+
+.table__header {
+ height: 10vh;
+ margin-left: 2rem;
+}
+.table__top {
+ height: 20vh;
+}
+.table__mid {
+ height: 50vh;
+}
+.table__bot {
+ height: 20vh;
+ margin-left: 0;
+}
+.tt__right {
+ height: 20vh;
+ justify-content: flex-end;
+ /* background-color: lightsalmon; */
+}
+.tb__right {
+ height: 35vh;
+ /* background-color: lightsalmon; */
+}
+.tb__left {
+ padding-left: 2rem;
+}
+.tlist__title {
+ font-size: 1.75rem;
+ font-weight: 400;
+ padding-right: 0.5rem;
+}
+.tlist__title__row {
+ display: flex;
+ align-items: center;
+}
+.tlist__main {
+ border: 3px solid darkgray;
+ margin-right: 4rem;
+}
+.tlist__cntl {
+ border-bottom: 1px solid;
+}
+.tlist__none {
+ margin: 1rem;
+}
+.tlist__holder {
+ height: 45vh;
+ overflow: hidden;
+}
+.tlist__list {
+ height: 45vh;
+ overflow: auto;
+}
+.tlist__list .bx--tile{
+ margin-bottom: 5px;
+}
+
+.table__name {
+ font-size: 1.2rem;
+ font-weight: 600;
+}
+.table__options {
+ font-size: 0.8rem;
+ font-variant: small-caps;
+}
+.table__name--locked {
+ color: red;
+}
+.table__conflict {
+ font-style: italic;
+ font-weight: 600;
+ color: red;
+}
+.ti__name {
+ font-size: 1.2rem;
+ font-weight: 600;
+}
+.ti__opt {
+ font-variant: small-caps;
+ padding-top: 2px;
+}
+.spec__title {
+ font-weight: 600;
+}
+
+/*
+.hd__left {
+ background-color: rosybrown;
+}
+.hd__right {
+ background-color: skyblue;
+}
+.tt__left {
+ background-color: slategray;
+}
+.tm__center {
+ background-color: lightpink;
+}
+*/
diff --git a/assets/app.js b/assets/app.js
@@ -1,4 +1,5 @@
-import './app.scss';
+import "carbon-components/css/carbon-components.css";
+import './app.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Lobby from './components/Lobby';
@@ -199,4 +200,4 @@ class App extends React.Component {
};
}
-ReactDOM.render( <App />, document.getElementById('content'));
-\ No newline at end of file
+ReactDOM.render( <App />, document.getElementById('content'));
diff --git a/assets/app.scss b/assets/app.scss
@@ -1,397 +0,0 @@
-// this class is manipulated dynamically by the app,
-// so keep it first, before any imports
-.err__post {
- color: red;
-}
-
-@import 'carbon-components/scss/globals/scss/styles.scss';
-
-.lobby__outer {
- margin-top: 2rem;
- margin-left: 3rem;
-}
-.unique__error {
- margin-top: 1.2rem;
- color: red;
-}
-.gover__outer {
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: bisque;
- padding: 15px;
-}
-.gover__inwin {
- font-size: 2rem;
- font-weight: bold;
-}
-.gover__inst {
- font-size: 1.2rem;
- margin-top: 10px;
- margin-bottom: 10px;
-}
-.textRow {
- display: flex;
- align-items: flex-start;
- margin-top: 1rem;
- margin-left: 15px;
- width: 30rem;
- .bx--btn--icon-only {
- background-color: lightgreen;
- }
-}
-
-.table__main {
- // margin-top: 2rem;
- min-width: 950px;
- min-height: 650px;
-}
-.banner {
- padding-top: 1rem;
-}
-
-.og {
- padding-left: 0;
- padding-right: 0;
-}
-
-.score__holder{
- font-size: 1.2rem;
- font-weight: bold;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding-top: 1rem;
-}
-
-.exit__row {
- display: flex;
- justify-content: flex-end;
- align-items: baseline;
-}
-.leave__button {
- font-size: 1.3rem;
-}
-.menu__holder {
- padding-top: 1rem;
- padding-left: 2rem;
-}
-.seat__picker {
- height: 46vh;
- margin-top: 2vh;
-}
-.table__seat {
- display: flex;
- justify-content: center;
- align-items: baseline;
-}
-.spName {
- font-size: 1.3rem;
- font-weight: bold;
-}
-
-.sp__top, .sp__bot {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 12vh;
-}
-.sp__mid {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 20vh;
-}
-.start__game {
- display: flex;
- .bx--dropdown__wrapper {
- width: -webkit-fill-available;
- }
-}
-.player__name {
- font-size: 1.6rem;
- font-weight: bold;
-}
-.play__hinfo {
- font-size: 1.3rem;
- min-height: 20px;
-}
-.play__tinfo {
- font-size: 1.3rem;
- min-height: 20px;
-}
-.partner__stack{
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-top: 1rem;
-}
-.partner__info {
- width: 100%;
- display: flex;
- justify-content: space-evenly;
-}
-.my__stack {
- float: right;
-}
-.my__hinfo {
- font-size: 1.5rem;
-}
-.my__tinfo {
- font-size: 1.3rem;
-}
-.mh__card__wrapper {
- overflow: hidden;
-}
-
-.mh__card__wrapper:last-child, .mh__card__wrapper:hover {
- overflow: visible;
-}
-.mh__card {
- width: 9vw;
- min-width: 80px;
-}
-.mh__card__row {
- display: flex;
- align-content: center;
- max-width: 35vw;
-}
-.my__hand {
- // background-color: cadetblue;
-
-}
-.cp__outer {
- width: 100%
-}
-.chat__panel {
- width: 100%;
- height: 241px;
- display: flex;
- flex-direction: column;
- border: 1px solid;
-}
-.chat__holder {
- flex: auto;
- max-height: 207px;
- overflow: hidden;
-}
-.chat__tile {
- height: 207px;
- overflow: auto;
- background-color: whitesmoke;
-}
-.chat__input__row {
- display: flex;
-}
-.chat__post, .err__post {
- padding-right: 0.3rem;
- padding-left: 0.3rem;
-}
-.hid__card {
- width: 30px;
-}
-.hid__card__row {
- display: flex;
-}
-.vert__stack {
- display: flex;
- flex-direction: column;
- .hid__card__div {
- height: 32px;
- }
- .hid__card__row {
- flex-direction: column;
- }
- .hid__card {
- transform: rotate(90deg);
- }
-}
-.right__stack {
- margin-left: 1.5vw;
-}
-.og__left, .inner__left {
- padding-right: 0;
- padding-left: 0;
-}
-.og__right, inner__right {
- padding-left: 0;
-}
-
-.tm__left {
- // background-color: rgb(217, 249, 255);
- .vert__stack {
- float: right;
- align-items: flex-end;
- }
-}
-.tt__center {
- // background-color: rgb(217, 249, 255);
- text-align: center;
-}
-
-.tm__right {
- height: 35vh;
- // background-color: rgb(217, 249, 255);
-}
-.tb__center {
- // background-color: rgb(217, 249, 255);
-}
-.trick__card {
- width: 80px;
-}
-.trick__holder, .trick__outer, .trick__grid, .trick__row {
- height: 100%;
-}
-.left__trick, .right__trick {
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-.mid__trick {
- height: 100%;
- display: flex;
- flex-direction: column;
-}
-.me {
- justify-content: flex-end;
-}
-.partner {
- justify-content: flex-start;
-}
-.both {
- justify-content: space-between;
-}
-
-.trump__card {
- width: 80px;
-}
-.trump__outer {
- height: 100%;
- width: 100%;
-}
-.trump__holder {
- height: 100%;
- display: flex;
- align-items: center;
-}
-.trump__holder.me {
- flex-direction: column;
- justify-content: flex-end;
-}
-.trump__holder.partner {
- flex-direction: column;
- justify-content: flex-start;
-}
-.trump__holder.left {
- flex-direction: row;
- justify-content: flex-start;
-}
-.trump__holder.right {
- flex-direction: row;
- justify-content: flex-end;
-}
-.tp1__stack {
- display: flex;
- flex-direction: column;
- .bx--btn, .bx--dropdown__wrapper{
- margin-bottom: 3px;
- }
-}
-
-.table__header {
- height: 10vh;
- margin-left: 2rem;
-}
-.table__top {
- height: 20vh;
-}
-.table__mid {
- height: 50vh;
-}
-.table__bot {
- height: 20vh;
- margin-left: 0;
-}
-.tt__right {
- height: 20vh;
- justify-content: flex-end;
- // background-color: lightsalmon;
-}
-.tb__right {
- height: 35vh;
- // background-color: lightsalmon;
-}
-.tb__left {
- padding-left: 2rem;
-}
-.tlist__title {
- font-size: 1.75rem;
- font-weight: 400;
- padding-right: 0.5rem;
-}
-.tlist__title__row {
- display: flex;
- align-items: center;
-}
-.tlist__main {
- border: 3px solid darkgray;
- margin-right: 4rem;
-}
-.tlist__cntl {
- border-bottom: 1px solid;
-}
-.tlist__none {
- margin: 1rem;
-}
-.tlist__holder {
- height: 45vh;
- overflow: hidden;
-}
-.tlist__list {
- height: 45vh;
- overflow: auto;
- .bx--tile{
- margin-bottom: 5px;
- }
-}
-.table__name {
- font-size: 1.2rem;
- font-weight: 600;
-}
-.table__options {
- font-size: 0.8rem;
- font-variant: small-caps;
-}
-.table__name--locked {
- color: red;
-}
-.table__conflict {
- font-style: italic;
- font-weight: 600;
- color: red;
-}
-.ti__name {
- font-size: 1.2rem;
- font-weight: 600;
-}
-.ti__opt {
- font-variant: small-caps;
- padding-top: 2px;
-}
-.spec__title {
- font-weight: 600;
-}
-
-// .hd__left {
-// background-color: rosybrown;
-// }
-// .hd__right {
-// background-color: skyblue;
-// }
-// .tt__left {
-// background-color: slategray;
-// }
-// .tm__center {
-// background-color: lightpink;
-// }
