diff options
author | ng <�> | 2022-10-23 01:14:11 +0200 |
---|---|---|
committer | ng <�> | 2022-10-23 01:14:11 +0200 |
commit | 7139fdadb7f803f6ecfd295ab570435898f709ce (patch) | |
tree | 6d5c0ba5138cb25a1783ac20a9c0958e7d65678d /packages | |
parent | 33281c2f6df99be3785bd9458ef62ae6e9f803cc (diff) | |
download | merchant-backoffice-7139fdadb7f803f6ecfd295ab570435898f709ce.tar.gz merchant-backoffice-7139fdadb7f803f6ecfd295ab570435898f709ce.tar.bz2 merchant-backoffice-7139fdadb7f803f6ecfd295ab570435898f709ce.zip |
feat: 💄 Rework more or less the entire styles of the page
BREAKING: Light theme may break in certain edge-cases, should be trivial to fix in those edge-cases
Diffstat (limited to 'packages')
-rw-r--r-- | packages/bank/src/components/app.tsx | 3 | ||||
-rw-r--r-- | packages/bank/src/pages/home/index.tsx | 210 | ||||
-rw-r--r-- | packages/bank/src/scss/_import_theme.scss | 1 | ||||
-rw-r--r-- | packages/bank/src/scss/bank.scss | 141 | ||||
-rw-r--r-- | packages/bank/src/scss/demo.scss | 12 | ||||
-rw-r--r-- | packages/bank/src/scss/pure.scss | 589 |
6 files changed, 609 insertions, 347 deletions
diff --git a/packages/bank/src/components/app.tsx b/packages/bank/src/components/app.tsx index 9e90a04..a211aea 100644 --- a/packages/bank/src/components/app.tsx +++ b/packages/bank/src/components/app.tsx @@ -5,6 +5,9 @@ import { BankHome } from '../pages/home/index'; const App: FunctionalComponent = () => { return ( <TranslationProvider> + {/* TODO: move this somewhere else + the code is too spaghetti for me to find out where to put this */} + <div class="transitionContainer" /> <BankHome /> </TranslationProvider> ); diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx index ca090a4..1563022 100644 --- a/packages/bank/src/pages/home/index.tsx +++ b/packages/bank/src/pages/home/index.tsx @@ -918,7 +918,6 @@ const BankFrame = (Props: any): VNode => { </section> <section id="footer" class="footer"> <div class="footer"> - <hr /> <div> <p>You can learn more about GNU Taler on our <a href="https://taler.net">main website</a>.</p> </div> @@ -1470,14 +1469,19 @@ const LoginForm = (Props: any): VNode => { console.log('username or password is the empty string', submitData); return; } - loginCall( + // add an animation class to the body, as a form of mini transition + document.body.classList.add('transition-login') + setTimeout(() => { + document.body.classList.remove('transition-login') + loginCall( // Deep copy, to avoid the cleanup // below make data disappear. - { ...submitData }, - backendStateSetter, - pageStateSetter - ); - submitDataSetter(undefined); + { ...submitData }, + backendStateSetter, + pageStateSetter + ); + submitDataSetter(undefined); + }, 500); }}>{i18n`Login`} </button> {RegistrationButton(Props)} @@ -1619,15 +1623,15 @@ function Transactions(Props: any): VNode { if (typeof error !== 'undefined') { console.log('transactions not found error', error); switch (error.status) { - case 404: { - return <p>Transactions page {pageNumber} was not found.</p> - } - case 401: { - return <p>Wrong credentials given.</p> - } - default: { - return <p>Transaction page {pageNumber} could not be retrieved.</p> - } + case 404: { + return <p>Transactions page {pageNumber} was not found.</p> + } + case 401: { + return <p>Wrong credentials given.</p> + } + default: { + return <p>Transaction page {pageNumber} could not be retrieved.</p> + } } } if (!data) { @@ -1703,48 +1707,48 @@ function Account(Props: any): VNode { * message in the case-branch. */ switch (error.status) { - case 404: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Username or account label '${accountLabel}' not found. Won't login.` - })); - - /** - * 404 should never stick to the cache, because they - * taint successful future registrations. How? After - * registering, the user gets navigated to this page, - * therefore a previous 404 on this SWR key (the requested - * resource) would still appear as valid and cause this - * page not to be shown! A typical case is an attempted - * login of a unregistered user X, and then a registration - * attempt of the same user X: in this case, the failed - * login would cache a 404 error to X's profile, resulting - * in the legitimate request after the registration to still - * be flagged as 404. Clearing the cache should prevent - * this. */ - (cache as any).clear(); - return <p>Profile not found...</p>; - } - case 401: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Wrong credentials given.` - })); - return <p>Wrong credentials...</p>; - } - default: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Account information could not be retrieved.` - })); - return <p>Unknown problem...</p>; - } + case 404: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Username or account label '${accountLabel}' not found. Won't login.` + })); + + /** + * 404 should never stick to the cache, because they + * taint successful future registrations. How? After + * registering, the user gets navigated to this page, + * therefore a previous 404 on this SWR key (the requested + * resource) would still appear as valid and cause this + * page not to be shown! A typical case is an attempted + * login of a unregistered user X, and then a registration + * attempt of the same user X: in this case, the failed + * login would cache a 404 error to X's profile, resulting + * in the legitimate request after the registration to still + * be flagged as 404. Clearing the cache should prevent + * this. */ + (cache as any).clear(); + return <p>Profile not found...</p>; + } + case 401: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Wrong credentials given.` + })); + return <p>Wrong credentials...</p>; + } + default: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Account information could not be retrieved.` + })); + return <p>Unknown problem...</p>; + } } } if (!data) return <p>Retrieving the profile page...</p>; @@ -1782,31 +1786,33 @@ function Account(Props: any): VNode { <Translate>Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})!</Translate> </h1> </div> - <section id="assets"> - <div class="asset-summary"> - <h2>{i18n`Bank account balance`}</h2> - {data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null} - <div class="large-amount amount"><span class="value">{`${balance.value}`}</span> <span class="currency">{`${balance.currency}`}</span></div> - </div> - </section> - <section id="payments"> - <div class="payments"> - <h2>{i18n`Payments`}</h2> - {/* FIXME: turn into button! */} - <CurrencyContext.Provider value={balance.currency}> - {Props.children} - <PaymentOptions - backendState={backendState} - pageStateSetter={pageStateSetter} /> - </CurrencyContext.Provider> - </div> - </section> - <section id="main"> - <article> - <h2>{i18n`Latest transactions:`}</h2> - <Transactions pageNumber="0" accountLabel={accountLabel} /> - </article> - </section> + <div className="sections"> + <section id="assets"> + <div class="asset-summary"> + <h2>{i18n`Bank account balance`}</h2> + {data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null} + <div class="large-amount amount"><span class="value">{`${balance.value}`}</span> <span class="currency">{`${balance.currency}`}</span></div> + </div> + </section> + <section id="payments"> + <div class="payments"> + <h2>{i18n`Payments`}</h2> + {/* FIXME: turn into button! */} + <CurrencyContext.Provider value={balance.currency}> + {Props.children} + <PaymentOptions + backendState={backendState} + pageStateSetter={pageStateSetter} /> + </CurrencyContext.Provider> + </div> + </section> + <section id="main"> + <article> + <h2>{i18n`Latest transactions:`}</h2> + <Transactions pageNumber="0" accountLabel={accountLabel} /> + </article> + </section> + </div> </BankFrame>); } @@ -1867,24 +1873,24 @@ function PublicHistories(Props: any): VNode { if (typeof error !== 'undefined') { console.log('account error', error); switch (error.status) { - case 404: - console.log('public accounts: 404', error); - Props.pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - showPublicHistories: false, - error: i18n`List of public accounts was not found.` - })); - break; - default: - console.log('public accounts: non-404 error', error); - Props.pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - showPublicHistories: false, - error: i18n`List of public accounts could not be retrieved.` - })); - break; + case 404: + console.log('public accounts: 404', error); + Props.pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + showPublicHistories: false, + error: i18n`List of public accounts was not found.` + })); + break; + default: + console.log('public accounts: non-404 error', error); + Props.pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + showPublicHistories: false, + error: i18n`List of public accounts could not be retrieved.` + })); + break; } } if (!data) @@ -1935,8 +1941,6 @@ function PublicHistories(Props: any): VNode { export function BankHome(): VNode { const [backendState, backendStateSetter] = useBackendState(); const [pageState, pageStateSetter] = usePageState(); - const [accountState, accountStateSetter] = useAccountState(); - const setTxPageNumber = useTransactionPageNumber()[1]; const i18n = useTranslator(); if (pageState.showPublicHistories) diff --git a/packages/bank/src/scss/_import_theme.scss b/packages/bank/src/scss/_import_theme.scss new file mode 100644 index 0000000..36fbf98 --- /dev/null +++ b/packages/bank/src/scss/_import_theme.scss @@ -0,0 +1 @@ +@import url(https://demo.taler.net/static/theme.css); diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss index 3feeb3e..4aafb09 100644 --- a/packages/bank/src/scss/bank.scss +++ b/packages/bank/src/scss/bank.scss @@ -1,3 +1,9 @@ +@use "./import_theme"; + +h2:not(.default-h2):not([data-use-default-h2-padding]) { + margin: 0 0; +} + .navcontainer:not(.default-navcontainer) { margin-bottom: 0 !important; } @@ -37,60 +43,107 @@ a.current-page-number { input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; + appearance: none; margin: 0; } -/* This CSS code styles the tab */ -.tab { - overflow: hidden; +/* fix tables */ +@media (prefers-color-scheme: dark) { + table:not([data-default-table]):not([data-default]) { + filter: #{"invert()"}; + } + #main .currency-indicator { + filter: #{"invert()"}; + } } -.logout { - float: right; - border: 20px; - margin-right: 15px; - margin-top: 15px; +/* login transition */ +.transitionContainer { + position: fixed; + opacity: 0; + pointer-events: none; + z-index: 50000; + background: var(--main-background-colour); + transition: opacity 0.5s; + width: 100vw; + height: 100vh; } - -.tab button { - background-color: lightgray; - color: black; - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 18px 19px; - border: 2px solid #c1c1c1; - transition: 0.5s; - font-weight: bold; +body.transition-login .transitionContainer { + opacity: 1; } -.tab button:hover { - background-color: yellow; - border: 2px solid #c1c1c1; - color: black; -} +/* sections styles */ +.sections { + margin-right: 4px; + section { + // backdrop-filter: blur(8px) brightness(1.4); + padding: 16px 16px; + border-radius: 8px; + + &:not(:last-child) { + margin-bottom: 8px; + } + } -.tab button.active { - background-color: orange; - border: 2px solid #c1c1c1; - color: black; - font-weight: bold; + // @media (prefers-color-scheme: light) { + // &>section { + // backdrop-filter: blur(8px) brightness(0.7); + // } + // } + + #payments { + .payments article>.payments { + .tab { + overflow: hidden; + + button { + border: none; + padding: 8px 8px; + border-radius: 4px; + padding-right: 4px; + cursor: pointer; + color: #ffffff; + background-color: #809cb6; + cursor: pointer; + transition: background-color 0.5s; + margin-right: 8px; + + &:hover { + background-color: #0a67be; + } + + &.active { + background-color: #00509b; + } + } + } + + .tabcontent { + display: block; + padding: 8px 16px; + width: max-content; + border: 2px solid var(--main-text-colour); + border-radius: 8px; + + &:not(.active) { + display: none; + } + } + } + } } -.tabcontent { - display: none; - padding: 8px 16px; - border: 2px solid #c1c1c1; - width: max-content; +.logout { + float: right; + border: 20px; + margin-right: 15px; + margin-top: 15px; } -.tabcontent.active { - display: block; -} input[type="number"] { -moz-appearance: textfield; + appearance: textfield; } #transfer-fields { @@ -268,10 +321,18 @@ input { html { - background: #ffffff; - color: #2a2a2a; + background: var(--main-background-colour); + color: var(--main-text-colour); } .hint { scale: 0.7; +} + +section#footer.footer>div.footer{ + text-align: center; + margin-top: 5px; +} +h1.nav { + text-align: center; }
\ No newline at end of file diff --git a/packages/bank/src/scss/demo.scss b/packages/bank/src/scss/demo.scss index 71db4b4..c02d4c9 100644 --- a/packages/bank/src/scss/demo.scss +++ b/packages/bank/src/scss/demo.scss @@ -28,18 +28,22 @@ Colors: .informational-ok { background: lightgreen; + text-align: center; border-radius: 1em; - padding: 0.5em; + padding: .5em; + margin: 15px; } .informational-fail { - background: lightpink; + background: #ff1212; + text-align: center; border-radius: 1em; - padding: 0.5em; + padding: .5em; + margin: 15px; } .content { - margin-left: 2em; + // margin-left: 2em; overflow-x: auto; } diff --git a/packages/bank/src/scss/pure.scss b/packages/bank/src/scss/pure.scss index 0d804d6..41b3227 100644 --- a/packages/bank/src/scss/pure.scss +++ b/packages/bank/src/scss/pure.scss @@ -20,13 +20,15 @@ html { -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 2 */ +} /** * Remove default margin. */ body { - margin: 0; } + margin: 0; +} /* HTML5 display definitions ========================================================================== */ @@ -49,7 +51,8 @@ menu, nav, section, summary { - display: block; } + display: block; +} /** * 1. Correct `inline-block` display not defined in IE 8/9. @@ -62,7 +65,8 @@ video { display: inline-block; /* 1 */ vertical-align: baseline; - /* 2 */ } + /* 2 */ +} /** * Prevent modern browsers from displaying `audio` without controls. @@ -70,7 +74,8 @@ video { */ audio:not([controls]) { display: none; - height: 0; } + height: 0; +} /** * Address `[hidden]` styling not present in IE 8/9/10. @@ -78,7 +83,8 @@ audio:not([controls]) { */ [hidden], template { - display: none; } + display: none; +} /* Links ========================================================================== */ @@ -86,7 +92,8 @@ template { * Remove the gray background color from active links in IE 10. */ a { - background-color: transparent; } + background-color: transparent; +} /** * Improve readability of focused elements when they are also in an @@ -94,7 +101,8 @@ a { */ a:active, a:hover { - outline: 0; } + outline: 0; +} /* Text-level semantics ========================================================================== */ @@ -102,20 +110,23 @@ a:hover { * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: 1px dotted; +} /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { - font-weight: bold; } + font-weight: bold; +} /** * Address styling not present in Safari and Chrome. */ dfn { - font-style: italic; } + font-style: italic; +} /** * Address variable `h1` font-size and margin within `section` and `article` @@ -123,20 +134,23 @@ dfn { */ h1 { font-size: 2em; - margin: 0.67em 0; } + margin: 0.67em 0; +} /** * Address styling not present in IE 8/9. */ mark { background: #ff0; - color: #000; } + color: #000; +} /** * Address inconsistent and variable font size in all browsers. */ small { - font-size: 80%; } + font-size: 80%; +} /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. @@ -146,13 +160,16 @@ sup { font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; } + vertical-align: baseline; +} sup { - top: -0.5em; } + top: -0.5em; +} sub { - bottom: -0.25em; } + bottom: -0.25em; +} /* Embedded content ========================================================================== */ @@ -160,13 +177,15 @@ sub { * Remove border when inside `a` element in IE 8/9/10. */ img { - border: 0; } + border: 0; +} /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { - overflow: hidden; } + overflow: hidden; +} /* Grouping content ========================================================================== */ @@ -174,20 +193,23 @@ svg:not(:root) { * Address margin not present in IE 8/9 and Safari. */ figure { - margin: 1em 40px; } + margin: 1em 40px; +} /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; - height: 0; } + height: 0; +} /** * Contain overflow in all browsers. */ pre { - overflow: auto; } + overflow: auto; +} /** * Address odd `em`-unit font size rendering in all browsers. @@ -197,7 +219,8 @@ kbd, pre, samp { font-family: monospace, monospace; - font-size: 1em; } + font-size: 1em; +} /* Forms ========================================================================== */ @@ -221,13 +244,15 @@ textarea { font: inherit; /* 2 */ margin: 0; - /* 3 */ } + /* 3 */ +} /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { - overflow: visible; } + overflow: visible; +} /** * Address inconsistent `text-transform` inheritance for `button` and `select`. @@ -237,7 +262,8 @@ button { */ button, select { - text-transform: none; } + text-transform: none; +} /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` @@ -253,14 +279,16 @@ input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; - /* 3 */ } + /* 3 */ +} /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { - cursor: default; } + cursor: default; +} /** * Remove inner padding and border in Firefox 4+. @@ -268,14 +296,16 @@ html input[disabled] { button::-moz-focus-inner, input::-moz-focus-inner { border: 0; - padding: 0; } + padding: 0; +} /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { - line-height: normal; } + line-height: normal; +} /** * It's recommended that you don't attempt to style these elements. @@ -289,7 +319,8 @@ input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; - /* 2 */ } + /* 2 */ +} /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain @@ -298,7 +329,8 @@ input[type="radio"] { */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; } + height: auto; +} /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. @@ -308,7 +340,8 @@ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; - /* 2 */ } + /* 2 */ +} /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. @@ -317,7 +350,8 @@ input[type="search"] { */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + -webkit-appearance: none; +} /** * Define consistent border, margin, and padding. @@ -325,7 +359,8 @@ input[type="search"]::-webkit-search-decoration { fieldset { border: 1px solid #c0c0c0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; } + padding: 0.35em 0.625em 0.75em; +} /** * 1. Correct `color` not being inherited in IE 8/9/10/11. @@ -335,20 +370,23 @@ legend { border: 0; /* 1 */ padding: 0; - /* 2 */ } + /* 2 */ +} /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { - overflow: auto; } + overflow: auto; +} /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { - font-weight: bold; } + font-weight: bold; +} /* Tables ========================================================================== */ @@ -357,11 +395,13 @@ optgroup { */ table { border-collapse: collapse; - border-spacing: 0; } + border-spacing: 0; +} td, th { - padding: 0; } + padding: 0; +} /*csslint important:false*/ /* ========================================================================== @@ -375,7 +415,8 @@ th { */ .hidden, [hidden] { - display: none !important; } + display: none !important; +} /** * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining @@ -384,7 +425,8 @@ th { .pure-img { max-width: 100%; height: auto; - display: block; } + display: block; +} /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ .pure-g { @@ -396,7 +438,7 @@ th { /* IE < 8: collapse white-space between units */ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ - /* + /* Sets the font stack to fonts known to work properly with the above letter and word spacings. See: https://github.com/yahoo/pure/issues/41/ @@ -424,19 +466,25 @@ th { /* Prevents distributing space between rows */ -webkit-align-content: flex-start; -ms-flex-line-pack: start; - align-content: flex-start; } + align-content: flex-start; +} /* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */ -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { +@media all and (-ms-high-contrast: none), +(-ms-high-contrast: active) { table .pure-g { - display: block; } } + display: block; + } +} + /* Opera as of 12 on Windows needs word-spacing. The ".opera-only" selector is used to prevent actual prefocus styling and is not required in markup. */ .opera-only :-o-prefocus, .pure-g { - word-spacing: -0.43em; } + word-spacing: -0.43em; +} .pure-u { display: inline-block; @@ -446,14 +494,16 @@ th { letter-spacing: normal; word-spacing: normal; vertical-align: top; - text-rendering: auto; } + text-rendering: auto; +} /* Resets the font family back to the OS/browser's default sans-serif font, this the same font stack that Normalize.css sets for the `body`. */ .pure-g [class*="pure-u"] { - font-family: sans-serif; } + font-family: sans-serif; +} .pure-u-1, .pure-u-1-1, @@ -507,136 +557,165 @@ this the same font stack that Normalize.css sets for the `body`. letter-spacing: normal; word-spacing: normal; vertical-align: top; - text-rendering: auto; } + text-rendering: auto; +} .pure-u-1-24 { width: 4.1667%; - *width: 4.1357%; } + *width: 4.1357%; +} .pure-u-1-12, .pure-u-2-24 { width: 8.3333%; - *width: 8.3023%; } + *width: 8.3023%; +} .pure-u-1-8, .pure-u-3-24 { width: 12.5000%; - *width: 12.4690%; } + *width: 12.4690%; +} .pure-u-1-6, .pure-u-4-24 { width: 16.6667%; - *width: 16.6357%; } + *width: 16.6357%; +} .pure-u-1-5 { width: 20%; - *width: 19.9690%; } + *width: 19.9690%; +} .pure-u-5-24 { width: 20.8333%; - *width: 20.8023%; } + *width: 20.8023%; +} .pure-u-1-4, .pure-u-6-24 { width: 25%; - *width: 24.9690%; } + *width: 24.9690%; +} .pure-u-7-24 { width: 29.1667%; - *width: 29.1357%; } + *width: 29.1357%; +} .pure-u-1-3, .pure-u-8-24 { width: 33.3333%; - *width: 33.3023%; } + *width: 33.3023%; +} .pure-u-3-8, .pure-u-9-24 { width: 37.5000%; - *width: 37.4690%; } + *width: 37.4690%; +} .pure-u-2-5 { width: 40%; - *width: 39.9690%; } + *width: 39.9690%; +} .pure-u-5-12, .pure-u-10-24 { width: 41.6667%; - *width: 41.6357%; } + *width: 41.6357%; +} .pure-u-11-24 { width: 45.8333%; - *width: 45.8023%; } + *width: 45.8023%; +} .pure-u-1-2, .pure-u-12-24 { width: 50%; - *width: 49.9690%; } + *width: 49.9690%; +} .pure-u-13-24 { width: 54.1667%; - *width: 54.1357%; } + *width: 54.1357%; +} .pure-u-7-12, .pure-u-14-24 { width: 58.3333%; - *width: 58.3023%; } + *width: 58.3023%; +} .pure-u-3-5 { width: 60%; - *width: 59.9690%; } + *width: 59.9690%; +} .pure-u-5-8, .pure-u-15-24 { width: 62.5000%; - *width: 62.4690%; } + *width: 62.4690%; +} .pure-u-2-3, .pure-u-16-24 { width: 66.6667%; - *width: 66.6357%; } + *width: 66.6357%; +} .pure-u-17-24 { width: 70.8333%; - *width: 70.8023%; } + *width: 70.8023%; +} .pure-u-3-4, .pure-u-18-24 { width: 75%; - *width: 74.9690%; } + *width: 74.9690%; +} .pure-u-19-24 { width: 79.1667%; - *width: 79.1357%; } + *width: 79.1357%; +} .pure-u-4-5 { width: 80%; - *width: 79.9690%; } + *width: 79.9690%; +} .pure-u-5-6, .pure-u-20-24 { width: 83.3333%; - *width: 83.3023%; } + *width: 83.3023%; +} .pure-u-7-8, .pure-u-21-24 { width: 87.5000%; - *width: 87.4690%; } + *width: 87.4690%; +} .pure-u-11-12, .pure-u-22-24 { width: 91.6667%; - *width: 91.6357%; } + *width: 91.6357%; +} .pure-u-23-24 { width: 95.8333%; - *width: 95.8023%; } + *width: 95.8023%; +} .pure-u-1, .pure-u-1-1, .pure-u-5-5, .pure-u-24-24 { - width: 100%; } + width: 100%; +} .pure-button { /* Structure */ @@ -652,12 +731,14 @@ this the same font stack that Normalize.css sets for the `body`. -moz-user-select: none; -ms-user-select: none; user-select: none; - box-sizing: border-box; } + box-sizing: border-box; +} /* Firefox: Get rid of the inner focus border */ .pure-button::-moz-focus-inner { padding: 0; - border: 0; } + border: 0; +} /* Inherit .pure-g styles */ .pure-button-group { @@ -668,17 +749,20 @@ this the same font stack that Normalize.css sets for the `body`. *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ text-rendering: optimizespeed; - /* Webkit: fixes text-rendering: optimizeLegibility */ } + /* Webkit: fixes text-rendering: optimizeLegibility */ +} .opera-only :-o-prefocus, .pure-button-group { - word-spacing: -0.43em; } + word-spacing: -0.43em; +} .pure-button-group .pure-button { letter-spacing: normal; word-spacing: normal; vertical-align: top; - text-rendering: auto; } + text-rendering: auto; +} /*csslint outline-none:false*/ .pure-button { @@ -695,7 +779,8 @@ this the same font stack that Normalize.css sets for the `body`. /*IE9 + everything else*/ background-color: #E6E6E6; text-decoration: none; - border-radius: 2px; } + border-radius: 2px; +} .pure-button-hover, .pure-button:hover, @@ -704,15 +789,18 @@ this the same font stack that Normalize.css sets for the `body`. filter: alpha(opacity=90); /* csslint ignore:end */ background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); - background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } + background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); +} .pure-button:focus { - outline: 0; } + outline: 0; +} .pure-button-active, .pure-button:active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; - border-color: #000; } + border-color: #000; +} .pure-button[disabled], .pure-button-disabled, @@ -727,17 +815,20 @@ this the same font stack that Normalize.css sets for the `body`. opacity: 0.40; cursor: not-allowed; box-shadow: none; - pointer-events: none; } + pointer-events: none; +} .pure-button-hidden { - display: none; } + display: none; +} .pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { background-color: #00509b; - color: #fff; } + color: #fff; +} /* Button Groups */ .pure-button-group .pure-button { @@ -745,16 +836,19 @@ a.pure-button-selected { border-radius: 0; border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */ - border-right: 1px solid rgba(0, 0, 0, 0.2); } + border-right: 1px solid rgba(0, 0, 0, 0.2); +} .pure-button-group .pure-button:first-child { border-top-left-radius: 2px; - border-bottom-left-radius: 2px; } + border-bottom-left-radius: 2px; +} .pure-button-group .pure-button:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; - border-right: none; } + border-right: none; +} /*csslint box-model:false*/ /* @@ -781,11 +875,12 @@ so we can ignore the csslint warning. .pure-form textarea { padding: 0.5em 0.6em; display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; + border: 1px solid var(--quote-background-colour); + box-shadow: inset 0 1px 3px var(--quote-background-colour); border-radius: 4px; vertical-align: middle; - box-sizing: border-box; } + box-sizing: border-box; +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors @@ -794,15 +889,17 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form input:not([type]) { padding: 0.5em 0.6em; display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; + border: 1px solid var(--quote-background-colour); + box-shadow: inset 0 1px 3px var(--quote-background-colour); border-radius: 4px; - box-sizing: border-box; } + box-sizing: border-box; +} /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ /* May be able to remove this tweak as color inputs become more standardized across browsers. */ .pure-form input[type="color"] { - padding: 0.2em 0.5em; } + padding: 0.2em 0.5em; +} .pure-form input[type="text"]:focus, .pure-form input[type="password"]:focus, @@ -821,7 +918,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form select:focus, .pure-form textarea:focus { outline: 0; - border-color: #129FEA; } + border-color: #129FEA; +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors @@ -829,18 +927,21 @@ since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]):focus { outline: 0; - border-color: #129FEA; } + border-color: #129FEA; +} .pure-form input[type="file"]:focus, .pure-form input[type="radio"]:focus, .pure-form input[type="checkbox"]:focus { outline: thin solid #129FEA; - outline: 1px auto #129FEA; } + outline: 1px auto #129FEA; +} .pure-form .pure-checkbox, .pure-form .pure-radio { margin: 0.5em 0; - display: block; } + display: block; +} .pure-form input[type="text"][disabled], .pure-form input[type="password"][disabled], @@ -859,8 +960,10 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form select[disabled], .pure-form textarea[disabled] { cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; } + background-color: var(--quote-background-colour); + color: var(--quote-background-colour); + filter: brightness(0.8); +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors @@ -868,45 +971,56 @@ since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type])[disabled] { cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; } + background-color: var(--quote-background-colour); + color: var(--quote-background-colour); + filter: brightness(0.8); +} .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { - background-color: #eee; - /* menu hover bg color */ - color: #777; - /* menu text color */ - border-color: #ccc; } + // background-color: #eee; + // /* menu hover bg color */ + // color: #777; + // /* menu text color */ + // border-color: #ccc; + color: var(--main-text-colour); + filter: brightness(0.8); +} .pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid { color: #b94a48; - border-color: #e9322d; } + border-color: #e9322d; +} .pure-form input[type="file"]:focus:invalid:focus, .pure-form input[type="radio"]:focus:invalid:focus, .pure-form input[type="checkbox"]:focus:invalid:focus { - outline-color: #e9322d; } + outline-color: #e9322d; +} .pure-form select { /* Normalizes the height; padding is not sufficient. */ height: 2.25em; border: 1px solid #ccc; - background-color: white; } + background-color: white; +} .pure-form select[multiple] { - height: auto; } + height: auto; +} .pure-form label { - margin: 0.5em 0 0.2em; } + margin: 0.5em 0 0.2em; +} .pure-form fieldset { margin: 0; padding: 0.35em 0 0.75em; - border: 0; } + border: 0; +} .pure-form legend { display: block; @@ -914,7 +1028,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. padding: 0.3em 0; margin-bottom: 0.3em; color: #333; - border-bottom: 1px solid #e5e5e5; } + border-bottom: 1px solid #e5e5e5; +} .pure-form-stacked input[type="text"], .pure-form-stacked input[type="password"], @@ -935,7 +1050,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form-stacked label, .pure-form-stacked textarea { display: block; - margin: 0.25em 0; } + margin: 0.25em 0; +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors @@ -943,7 +1059,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form-stacked input:not([type]) { display: block; - margin: 0.25em 0; } + margin: 0.25em 0; +} .pure-form-aligned input, .pure-form-aligned textarea, @@ -953,34 +1070,41 @@ since IE8 won't execute CSS that contains a CSS3 selector. display: inline-block; *display: inline; *zoom: 1; - vertical-align: middle; } + vertical-align: middle; +} .pure-form-aligned textarea { - vertical-align: top; } + vertical-align: top; +} /* Aligned Forms */ .pure-form-aligned .pure-control-group { - margin-bottom: 0.5em; } + margin-bottom: 0.5em; +} .pure-form-aligned .pure-control-group label { text-align: right; display: inline-block; vertical-align: middle; width: 10em; - margin: 0 1em 0 0; } + margin: 0 1em 0 0; +} .pure-form-aligned .pure-controls { - margin: 1.5em 0 0 11em; } + margin: 1.5em 0 0 11em; +} /* Rounded Inputs */ .pure-form input.pure-input-rounded, .pure-form .pure-input-rounded { border-radius: 2em; - padding: 0.5em 1em; } + padding: 0.5em 1em; +} /* Grouped Inputs */ .pure-form .pure-group fieldset { - margin-bottom: 10px; } + margin-bottom: 10px; +} .pure-form .pure-group input, .pure-form .pure-group textarea { @@ -989,50 +1113,62 @@ since IE8 won't execute CSS that contains a CSS3 selector. margin: 0 0 -1px; border-radius: 0; position: relative; - top: -1px; } + top: -1px; +} .pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus { - z-index: 3; } + z-index: 3; +} .pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child { top: 1px; border-radius: 4px 4px 0 0; - margin: 0; } + margin: 0; +} .pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child { top: 1px; border-radius: 4px; - margin: 0; } + margin: 0; +} .pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child { top: -2px; border-radius: 0 0 4px 4px; - margin: 0; } + margin: 0; +} .pure-form .pure-group button { - margin: 0.35em 0; } + margin: 0.35em 0; +} .pure-form .pure-input-1 { - width: 100%; } + width: 100%; +} .pure-form .pure-input-3-4 { - width: 75%; } + width: 75%; +} .pure-form .pure-input-2-3 { - width: 66%; } + width: 66%; +} .pure-form .pure-input-1-2 { - width: 50%; } + width: 50%; +} .pure-form .pure-input-1-3 { - width: 33%; } + width: 33%; +} .pure-form .pure-input-1-4 { - width: 25%; } + width: 25%; +} /* Inline help for forms */ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ @@ -1042,17 +1178,20 @@ since IE8 won't execute CSS that contains a CSS3 selector. padding-left: 0.3em; color: #666; vertical-align: middle; - font-size: 0.875em; } + font-size: 0.875em; +} /* Block help for forms */ .pure-form-message { display: block; color: #666; - font-size: 0.875em; } + font-size: 0.875em; +} @media only screen and (max-width: 480px) { .pure-form button[type="submit"] { - margin: 0.7em 0 0; } + margin: 0.7em 0 0; + } .pure-form input:not([type]), .pure-form input[type="text"], @@ -1071,7 +1210,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form input[type="color"], .pure-form label { margin-bottom: 0.3em; - display: block; } + display: block; + } .pure-group input:not([type]), .pure-group input[type="text"], @@ -1088,16 +1228,19 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-group input[type="search"], .pure-group input[type="tel"], .pure-group input[type="color"] { - margin-bottom: 0; } + margin-bottom: 0; + } .pure-form-aligned .pure-control-group label { margin-bottom: 0.3em; text-align: left; display: block; - width: 100%; } + width: 100%; + } .pure-form-aligned .pure-controls { - margin: 1.5em 0 0 0; } + margin: 1.5em 0 0 0; + } /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ .pure-form .pure-help-inline, @@ -1106,44 +1249,55 @@ since IE8 won't execute CSS that contains a CSS3 selector. display: block; font-size: 0.75em; /* Increased bottom padding to make it group with its related input element. */ - padding: 0.2em 0 0.8em; } } + padding: 0.2em 0 0.8em; + } +} + /*csslint adjoining-classes: false, box-model:false*/ .pure-menu { - box-sizing: border-box; } + box-sizing: border-box; +} .pure-menu-fixed { position: fixed; left: 0; top: 0; - z-index: 3; } + z-index: 3; +} .pure-menu-list, .pure-menu-item { - position: relative; } + position: relative; +} .pure-menu-list { list-style: none; margin: 0; - padding: 0; } + padding: 0; +} .pure-menu-item { padding: 0; margin: 0; - height: 100%; } + height: 100%; +} .pure-menu-link, .pure-menu-heading { display: block; text-decoration: none; - white-space: nowrap; } + white-space: nowrap; +} /* HORIZONTAL MENU */ .pure-menu-horizontal { width: 100%; - white-space: nowrap; } + white-space: nowrap; +} .pure-menu-horizontal .pure-menu-list { - display: inline-block; } + display: inline-block; +} /* Initial menus should be inline-block so that they are horizontal */ .pure-menu-horizontal .pure-menu-item, @@ -1152,11 +1306,13 @@ since IE8 won't execute CSS that contains a CSS3 selector. display: inline-block; *display: inline; zoom: 1; - vertical-align: middle; } + vertical-align: middle; +} /* Submenus should still be display: block; */ .pure-menu-item .pure-menu-item { - display: block; } + display: block; +} .pure-menu-children { display: none; @@ -1165,38 +1321,46 @@ since IE8 won't execute CSS that contains a CSS3 selector. top: 0; margin: 0; padding: 0; - z-index: 3; } + z-index: 3; +} .pure-menu-horizontal .pure-menu-children { left: 0; top: auto; - width: inherit; } + width: inherit; +} -.pure-menu-allow-hover:hover > .pure-menu-children, -.pure-menu-active > .pure-menu-children { +.pure-menu-allow-hover:hover>.pure-menu-children, +.pure-menu-active>.pure-menu-children { display: block; - position: absolute; } + position: absolute; +} /* Vertical Menus - show the dropdown arrow */ -.pure-menu-has-children > .pure-menu-link:after { +.pure-menu-has-children>.pure-menu-link:after { padding-left: 0.5em; content: "\25B8"; - font-size: small; } + font-size: small; +} /* Horizontal Menus - show the dropdown arrow */ -.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { - content: "\25BE"; } +.pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after { + content: "\25BE"; +} /* scrollable menus */ .pure-menu-scrollable { overflow-y: scroll; - overflow-x: hidden; } + overflow-x: hidden; +} .pure-menu-scrollable .pure-menu-list { - display: block; } + display: block; +} .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { - display: inline-block; } + display: inline-block; +} .pure-menu-horizontal.pure-menu-scrollable { white-space: nowrap; @@ -1205,70 +1369,85 @@ since IE8 won't execute CSS that contains a CSS3 selector. -ms-overflow-style: none; -webkit-overflow-scrolling: touch; /* a little extra padding for this style to allow for scrollbars */ - padding: .5em 0; } + padding: .5em 0; +} .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { - display: none; } + display: none; +} /* misc default styling */ .pure-menu-separator, .pure-menu-horizontal .pure-menu-children .pure-menu-separator { background-color: #ccc; height: 1px; - margin: .3em 0; } + margin: .3em 0; +} .pure-menu-horizontal .pure-menu-separator { width: 1px; height: 1.3em; - margin: 0 0.3em; } + margin: 0 0.3em; +} /* Need to reset the separator since submenu is vertical */ .pure-menu-horizontal .pure-menu-children .pure-menu-separator { display: block; - width: auto; } + width: auto; +} .pure-menu-heading { text-transform: uppercase; - color: #565d64; } + color: #565d64; +} .pure-menu-link { - color: #777; } + color: #777; +} .pure-menu-children { - background-color: #fff; } + background-color: #fff; +} .pure-menu-link, .pure-menu-disabled, .pure-menu-heading { - padding: .5em 1em; } + padding: .5em 1em; +} .pure-menu-disabled { - opacity: .5; } + opacity: .5; +} .pure-menu-disabled .pure-menu-link:hover { - background-color: transparent; } + background-color: transparent; +} -.pure-menu-active > .pure-menu-link, +.pure-menu-active>.pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus { - background-color: #eee; } + background-color: #eee; +} .pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited { - color: #000; } + color: #000; +} .pure-table { /* Remove spacing between table cells (from Normalize.css) */ border-collapse: collapse; border-spacing: 0; empty-cells: show; - border: 1px solid #cbcbcb; } + border: 1px solid #cbcbcb; +} .pure-table caption { color: #000; font: italic 85%/1 arial, sans-serif; padding: 1em 0; - text-align: center; } + text-align: center; +} .pure-table td, .pure-table th { @@ -1280,19 +1459,22 @@ since IE8 won't execute CSS that contains a CSS3 selector. overflow: visible; /*to make ths where the title is really long work*/ padding: 0.5em 1em; - /* cell padding */ } + /* cell padding */ +} /* Consider removing this next declaration block, as it causes problems when there's a rowspan on the first cell. Case added to the tests. issue#432 */ .pure-table td:first-child, .pure-table th:first-child { - border-left-width: 0; } + border-left-width: 0; +} .pure-table thead { background-color: #e0e0e0; color: #000; text-align: left; - vertical-align: bottom; } + vertical-align: bottom; +} /* striping: @@ -1300,29 +1482,36 @@ striping: odd - #f2f2f2 (light gray) */ .pure-table td { - background-color: transparent; } + background-color: transparent; +} .pure-table-odd td { - background-color: #f2f2f2; } + background-color: #f2f2f2; +} /* nth-child selector for modern browsers */ .pure-table-striped tr:nth-child(2n-1) td { - background-color: #f2f2f2; } + background-color: #f2f2f2; +} /* BORDERED TABLES */ .pure-table-bordered td { - border-bottom: 1px solid #cbcbcb; } + border-bottom: 1px solid #cbcbcb; +} -.pure-table-bordered tbody > tr:last-child > td { - border-bottom-width: 0; } +.pure-table-bordered tbody>tr:last-child>td { + border-bottom-width: 0; +} /* HORIZONTAL BORDERED TABLES */ .pure-table-horizontal td, .pure-table-horizontal th { border-width: 0 0 1px 0; - border-bottom: 1px solid #cbcbcb; } + border-bottom: 1px solid #cbcbcb; +} -.pure-table-horizontal tbody > tr:last-child > td { - border-bottom-width: 0; } +.pure-table-horizontal tbody>tr:last-child>td { + border-bottom-width: 0; +} -/*# sourceMappingURL=pure.css.map */ +/*# sourceMappingURL=pure.css.map */
\ No newline at end of file |