euchre-live

Euchre web-app for the socially distant family
git clone git://git.alexkarle.com/euchre-live.git
Log | Files | Refs | README | LICENSE

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:
Aassets/app.css | 402+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Massets/app.js | 6+++---
Dassets/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; -// }