diff options
Diffstat (limited to 'packages/demobank-ui/src/scss')
-rw-r--r-- | packages/demobank-ui/src/scss/_custom-calendar.scss | 12 | ||||
-rw-r--r-- | packages/demobank-ui/src/scss/bank.scss | 247 | ||||
-rw-r--r-- | packages/demobank-ui/src/scss/colors-bank.scss | 2 | ||||
-rw-r--r-- | packages/demobank-ui/src/scss/fonts/nunito.css | 4 | ||||
-rw-r--r-- | packages/demobank-ui/src/scss/libs/_all.scss | 2 | ||||
-rw-r--r-- | packages/demobank-ui/src/scss/pure.scss | 783 |
6 files changed, 529 insertions, 521 deletions
diff --git a/packages/demobank-ui/src/scss/_custom-calendar.scss b/packages/demobank-ui/src/scss/_custom-calendar.scss index e0334b62d..463cd88d3 100644 --- a/packages/demobank-ui/src/scss/_custom-calendar.scss +++ b/packages/demobank-ui/src/scss/_custom-calendar.scss @@ -135,9 +135,9 @@ text-align: center; // there's probably a better way to do this, but wanted to try out CSS grid - grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc( - 100% / 7 - ) calc(100% / 7) calc(100% / 7) calc(100% / 7); + grid-template-columns: + calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) + calc(100% / 7) calc(100% / 7) calc(100% / 7); span { color: var(--secondary-text-color-dark); @@ -151,9 +151,9 @@ width: 100%; display: grid; text-align: center; - grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc( - 100% / 7 - ) calc(100% / 7) calc(100% / 7) calc(100% / 7); + grid-template-columns: + calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) + calc(100% / 7) calc(100% / 7) calc(100% / 7); span { color: var(--primary-text-color-dark); diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss index b524cfe29..55ac21588 100644 --- a/packages/demobank-ui/src/scss/bank.scss +++ b/packages/demobank-ui/src/scss/bank.scss @@ -1,5 +1,5 @@ .navcontainer:not(.default-navcontainer) { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .abort-button { @@ -17,8 +17,8 @@ div.pages-list { .login-div, .register-div { - display: block; - text-align: center; + display: block; + text-align: center; } a.page-number { @@ -42,55 +42,55 @@ input[type="number"]::-webkit-inner-spin-button { /* This CSS code styles the tab */ .tab { - overflow: hidden; + overflow: hidden; } .logout { - float: right; - border: 20px; - margin-right: 15px; - margin-top: 15px; + float: right; + border: 20px; + margin-right: 15px; + margin-top: 15px; } .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; + 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; } .tab button:hover { - background-color: yellow; - border: 2px solid #c1c1c1; - color: black; + background-color: yellow; + border: 2px solid #c1c1c1; + color: black; } .tab button.active { - background-color: orange; - border: 2px solid #c1c1c1; - color: black; - font-weight: bold; + background-color: orange; + border: 2px solid #c1c1c1; + color: black; + font-weight: bold; } .tabcontent { - display: none; - padding: 8px 16px; - border: 2px solid #c1c1c1; - width: max-content; + display: none; + padding: 8px 16px; + border: 2px solid #c1c1c1; + width: max-content; } .tabcontent.active { - display: block; + display: block; } input[type="number"] { - -moz-appearance: textfield; + -moz-appearance: textfield; } #transfer-fields { @@ -115,16 +115,16 @@ input[type="number"] { } input { - background-color: inherit; + background-color: inherit; } .large-amount { - font-weight: bold; - font-size: x-large; + font-weight: bold; + font-size: x-large; } .currency { - font-style: oblique; + font-style: oblique; } /* @@ -154,111 +154,108 @@ input { .register-form > .pure-form, .login-form > .pure-form { - background: #4a4a4a; - color: #ffffff; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - padding: 16px 16px; - border-radius: 8px; - width: max-content; - .formFieldLabel { - margin: 2px 2px; - } - input[type="text"], - input[type="password"] { - border: none; - border-radius: 4px; - background: #6a6a6a; - color: #fefefe; - box-shadow: none; - } - input[placeholder="Password"][type="password"] { - margin-bottom: 8px; - } - .btn-register, - .btn-login { - float: left; - } - .btn-cancel { - float: right; - } - h2 { - margin-top: 0; - margin-bottom: 10px; - } + background: #4a4a4a; + color: #ffffff; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + padding: 16px 16px; + border-radius: 8px; + width: max-content; + .formFieldLabel { + margin: 2px 2px; + } + input[type="text"], + input[type="password"] { + border: none; + border-radius: 4px; + background: #6a6a6a; + color: #fefefe; + box-shadow: none; + } + input[placeholder="Password"][type="password"] { + margin-bottom: 8px; + } + .btn-register, + .btn-login { + float: left; + } + .btn-cancel { + float: right; + } + h2 { + margin-top: 0; + margin-bottom: 10px; + } } - .challenge-div { - display: block; - text-align: center; + display: block; + text-align: center; } .challenge-form > .pure-form { - background: #4a4a4a; - color: #ffffff; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - padding: 16px 16px; - border-radius: 8px; - width: max-content; - .formFieldLabel { - margin: 2px 2px; - } - input[type="text"] { - border: none; - border-radius: 4px; - background: #6a6a6a; - color: #fefefe; - box-shadow: none; - } - .btn-confirm { - float: left; - } - .btn-cancel { - float: right; - } - h2 { - margin-top: 0; - margin-bottom: 10px; - } + background: #4a4a4a; + color: #ffffff; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + padding: 16px 16px; + border-radius: 8px; + width: max-content; + .formFieldLabel { + margin: 2px 2px; + } + input[type="text"] { + border: none; + border-radius: 4px; + background: #6a6a6a; + color: #fefefe; + box-shadow: none; + } + .btn-confirm { + float: left; + } + .btn-cancel { + float: right; + } + h2 { + margin-top: 0; + margin-bottom: 10px; + } } - .wire-transfer-form > .pure-form, .payto-form > .pure-form, .reserve-form > .pure-form { - background: #4a4a4a; - color: #ffffff; - display: inline-block; - text-align: left; - margin-left: auto; - margin-right: auto; - padding: 16px 16px; - border-radius: 8px; - width: max-content; - .formFieldLabel { - margin: 2px 2px; - } - input[type="text"] { - border: none; - border-radius: 4px; - background: #6a6a6a; - color: #fefefe; - box-shadow: none; - } + background: #4a4a4a; + color: #ffffff; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + padding: 16px 16px; + border-radius: 8px; + width: max-content; + .formFieldLabel { + margin: 2px 2px; + } + input[type="text"] { + border: none; + border-radius: 4px; + background: #6a6a6a; + color: #fefefe; + box-shadow: none; + } } - html { - background: #ffffff; - color: #2a2a2a; + background: #ffffff; + color: #2a2a2a; } .hint { - scale: 0.7; + scale: 0.7; } diff --git a/packages/demobank-ui/src/scss/colors-bank.scss b/packages/demobank-ui/src/scss/colors-bank.scss index c34610948..e11bbe203 100644 --- a/packages/demobank-ui/src/scss/colors-bank.scss +++ b/packages/demobank-ui/src/scss/colors-bank.scss @@ -28,4 +28,4 @@ nav span:hover, nav a.navbtn.langbtn:focus { background-color: #df3d3d; -}
\ No newline at end of file +} diff --git a/packages/demobank-ui/src/scss/fonts/nunito.css b/packages/demobank-ui/src/scss/fonts/nunito.css index ab30db36b..8d45df9a1 100644 --- a/packages/demobank-ui/src/scss/fonts/nunito.css +++ b/packages/demobank-ui/src/scss/fonts/nunito.css @@ -15,8 +15,8 @@ */ @font-face { - font-family: 'Nunito'; + font-family: "Nunito"; font-style: normal; font-weight: 400; - src: url(./XRXV3I6Li01BKofINeaE.ttf) format('truetype'); + src: url(./XRXV3I6Li01BKofINeaE.ttf) format("truetype"); } diff --git a/packages/demobank-ui/src/scss/libs/_all.scss b/packages/demobank-ui/src/scss/libs/_all.scss index 08bd76cd1..d33f8acc4 100644 --- a/packages/demobank-ui/src/scss/libs/_all.scss +++ b/packages/demobank-ui/src/scss/libs/_all.scss @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - /** +/** * * @author Sebastian Javier Marchano (sebasjm) */ diff --git a/packages/demobank-ui/src/scss/pure.scss b/packages/demobank-ui/src/scss/pure.scss index 83fcadce7..af98eb293 100644 --- a/packages/demobank-ui/src/scss/pure.scss +++ b/packages/demobank-ui/src/scss/pure.scss @@ -18,7 +18,7 @@ Copyright (c) Nicolas Gallagher and Jonathan Neal * 2. Prevent adjustments of font size after orientation changes in iOS. */ - html { +html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } @@ -62,7 +62,7 @@ h1 { hr { -webkit-box-sizing: content-box; - box-sizing: content-box; /* 1 */ + box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } @@ -97,7 +97,7 @@ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** @@ -186,7 +186,8 @@ textarea { */ button, -input { /* 1 */ +input { + /* 1 */ overflow: visible; } @@ -196,7 +197,8 @@ input { /* 1 */ */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } @@ -251,7 +253,7 @@ fieldset { legend { -webkit-box-sizing: border-box; - box-sizing: border-box; /* 1 */ + box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ @@ -283,7 +285,7 @@ textarea { [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; - box-sizing: border-box; /* 1 */ + box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -373,7 +375,7 @@ template { */ html { - font-family: sans-serif; + font-family: sans-serif; } /** @@ -382,7 +384,7 @@ html { .hidden, [hidden] { - display: none !important; + display: none !important; } /** @@ -390,18 +392,18 @@ html { * aspect ratio. */ .pure-img { - max-width: 100%; - height: auto; - display: block; + max-width: 100%; + height: auto; + display: block; } /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ .pure-g { - letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ - text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ + letter-spacing: -0.31em; /* Webkit: 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/pure-css/pure/issues/41/ @@ -417,27 +419,27 @@ html { * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. */ - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; + /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; - /* Prevents distributing space between rows */ - -ms-flex-line-pack: start; - align-content: flex-start; + /* Prevents distributing space between rows */ + -ms-flex-line-pack: 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) { - table .pure-g { - display: block; - } + table .pure-g { + display: block; + } } /* Opera as of 12 on Windows needs word-spacing. @@ -446,23 +448,23 @@ html { */ .opera-only :-o-prefocus, .pure-g { - word-spacing: -0.43em; + word-spacing: -0.43em; } .pure-u { - display: inline-block; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; + display: inline-block; + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + 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; +.pure-g [class*="pure-u"] { + font-family: sans-serif; } .pure-u-1, @@ -511,210 +513,223 @@ this the same font stack that Normalize.css sets for the `body`. .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 { - display: inline-block; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; + display: inline-block; + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + text-rendering: auto; } .pure-u-1-24 { - width: 4.1667%; + width: 4.1667%; } .pure-u-1-12, .pure-u-2-24 { - width: 8.3333%; + width: 8.3333%; } .pure-u-1-8, .pure-u-3-24 { - width: 12.5000%; + width: 12.5%; } .pure-u-1-6, .pure-u-4-24 { - width: 16.6667%; + width: 16.6667%; } .pure-u-1-5 { - width: 20%; + width: 20%; } .pure-u-5-24 { - width: 20.8333%; + width: 20.8333%; } .pure-u-1-4, .pure-u-6-24 { - width: 25%; + width: 25%; } .pure-u-7-24 { - width: 29.1667%; + width: 29.1667%; } .pure-u-1-3, .pure-u-8-24 { - width: 33.3333%; + width: 33.3333%; } .pure-u-3-8, .pure-u-9-24 { - width: 37.5000%; + width: 37.5%; } .pure-u-2-5 { - width: 40%; + width: 40%; } .pure-u-5-12, .pure-u-10-24 { - width: 41.6667%; + width: 41.6667%; } .pure-u-11-24 { - width: 45.8333%; + width: 45.8333%; } .pure-u-1-2, .pure-u-12-24 { - width: 50%; + width: 50%; } .pure-u-13-24 { - width: 54.1667%; + width: 54.1667%; } .pure-u-7-12, .pure-u-14-24 { - width: 58.3333%; + width: 58.3333%; } .pure-u-3-5 { - width: 60%; + width: 60%; } .pure-u-5-8, .pure-u-15-24 { - width: 62.5000%; + width: 62.5%; } .pure-u-2-3, .pure-u-16-24 { - width: 66.6667%; + width: 66.6667%; } .pure-u-17-24 { - width: 70.8333%; + width: 70.8333%; } .pure-u-3-4, .pure-u-18-24 { - width: 75%; + width: 75%; } .pure-u-19-24 { - width: 79.1667%; + width: 79.1667%; } .pure-u-4-5 { - width: 80%; + width: 80%; } .pure-u-5-6, .pure-u-20-24 { - width: 83.3333%; + width: 83.3333%; } .pure-u-7-8, .pure-u-21-24 { - width: 87.5000%; + width: 87.5%; } .pure-u-11-12, .pure-u-22-24 { - width: 91.6667%; + width: 91.6667%; } .pure-u-23-24 { - width: 95.8333%; + width: 95.8333%; } .pure-u-1, .pure-u-1-1, .pure-u-5-5, .pure-u-24-24 { - width: 100%; + width: 100%; } .pure-button { - /* Structure */ - display: inline-block; - line-height: normal; - white-space: nowrap; - vertical-align: middle; - text-align: center; - cursor: pointer; - -webkit-user-drag: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-box-sizing: border-box; - box-sizing: border-box; + /* Structure */ + display: inline-block; + line-height: normal; + white-space: nowrap; + vertical-align: middle; + text-align: center; + cursor: pointer; + -webkit-user-drag: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-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; + padding: 0; + border: 0; } /* Inherit .pure-g styles */ .pure-button-group { - letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ - text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ + letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ + text-rendering: optimizespeed; /* 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; + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + text-rendering: auto; } /*csslint outline-none:false*/ .pure-button { - font-family: inherit; - font-size: 100%; - padding: 0.5em 1em; - color: rgba(0, 0, 0, 0.80); - border: none rgba(0, 0, 0, 0); - background-color: #E6E6E6; - text-decoration: none; - border-radius: 2px; + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + color: rgba(0, 0, 0, 0.8); + border: none rgba(0, 0, 0, 0); + background-color: #e6e6e6; + text-decoration: none; + border-radius: 2px; } .pure-button-hover, .pure-button:hover, .pure-button:focus { - background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); - background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); + background-image: -webkit-gradient( + linear, + left top, + left bottom, + from(transparent), + color-stop(40%, rgba(0, 0, 0, 0.05)), + to(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 { - -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; - box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; - border-color: #000; + -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, + 0 0 6px rgba(0, 0, 0, 0.2) inset; + 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; } .pure-button[disabled], @@ -722,43 +737,42 @@ this the same font stack that Normalize.css sets for the `body`. .pure-button-disabled:hover, .pure-button-disabled:focus, .pure-button-disabled:active { - border: none; - background-image: none; - opacity: 0.40; - cursor: not-allowed; - -webkit-box-shadow: none; - box-shadow: none; - pointer-events: none; + border: none; + background-image: none; + opacity: 0.4; + cursor: not-allowed; + -webkit-box-shadow: none; + box-shadow: 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: rgb(0, 120, 231); - color: #fff; + background-color: rgb(0, 120, 231); + color: #fff; } /* Button Groups */ .pure-button-group .pure-button { - margin: 0; - border-radius: 0; - border-right: 1px solid rgba(0, 0, 0, 0.2); - + margin: 0; + border-radius: 0; + 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-top-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-top-right-radius: 2px; + border-bottom-right-radius: 2px; + border-right: none; } /*csslint box-model:false*/ @@ -785,15 +799,15 @@ so we can ignore the csslint warning. .pure-form input[type="color"], .pure-form select, .pure-form textarea { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - -webkit-box-shadow: inset 0 1px 3px #ddd; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - vertical-align: middle; - -webkit-box-sizing: border-box; - box-sizing: border-box; + padding: 0.5em 0.6em; + display: inline-block; + border: 1px solid #ccc; + -webkit-box-shadow: inset 0 1px 3px #ddd; + box-shadow: inset 0 1px 3px #ddd; + border-radius: 4px; + vertical-align: middle; + -webkit-box-sizing: border-box; + box-sizing: border-box; } /* @@ -801,24 +815,22 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 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; - -webkit-box-shadow: inset 0 1px 3px #ddd; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - -webkit-box-sizing: border-box; - box-sizing: border-box; + padding: 0.5em 0.6em; + display: inline-block; + border: 1px solid #ccc; + -webkit-box-shadow: inset 0 1px 3px #ddd; + box-shadow: inset 0 1px 3px #ddd; + border-radius: 4px; + -webkit-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, .pure-form input[type="email"]:focus, @@ -835,8 +847,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form input[type="color"]:focus, .pure-form select:focus, .pure-form textarea:focus { - outline: 0; - border-color: #129FEA; + outline: 0; + border-color: #129fea; } /* @@ -844,20 +856,20 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]):focus { - outline: 0; - border-color: #129FEA; + outline: 0; + 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: thin solid #129fea; + outline: 1px auto #129fea; } .pure-form .pure-checkbox, .pure-form .pure-radio { - margin: 0.5em 0; - display: block; + margin: 0.5em 0; + display: block; } .pure-form input[type="text"][disabled], @@ -876,9 +888,9 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form input[type="color"][disabled], .pure-form select[disabled], .pure-form textarea[disabled] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; + cursor: not-allowed; + background-color: #eaeded; + color: #cad2d3; } /* @@ -886,53 +898,53 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors 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; + cursor: not-allowed; + background-color: #eaeded; + color: #cad2d3; } .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; } .pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid { - color: #b94a48; - border-color: #e9322d; + color: #b94a48; + 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; + /* Normalizes the height; padding is not sufficient. */ + height: 2.25em; + border: 1px solid #ccc; + 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; + margin: 0; + padding: 0.35em 0 0.75em; + border: 0; } .pure-form legend { - display: block; - width: 100%; - padding: 0.3em 0; - margin-bottom: 0.3em; - color: #333; - border-bottom: 1px solid #e5e5e5; + display: block; + width: 100%; + padding: 0.3em 0; + margin-bottom: 0.3em; + color: #333; + border-bottom: 1px solid #e5e5e5; } .pure-form-stacked input[type="text"], @@ -953,8 +965,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form-stacked select, .pure-form-stacked label, .pure-form-stacked textarea { - display: block; - margin: 0.25em 0; + display: block; + margin: 0.25em 0; } /* @@ -962,384 +974,384 @@ Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form-stacked input:not([type]) { - display: block; - margin: 0.25em 0; + display: block; + margin: 0.25em 0; } .pure-form-aligned input, .pure-form-aligned textarea, .pure-form-aligned select, .pure-form-message-inline { - display: inline-block; - vertical-align: middle; + display: inline-block; + 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; + text-align: right; + display: inline-block; + vertical-align: middle; + width: 10em; + 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; + border-radius: 2em; + 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 { - display: block; - padding: 10px; - margin: 0 0 -1px; - border-radius: 0; - position: relative; - top: -1px; + display: block; + padding: 10px; + margin: 0 0 -1px; + border-radius: 0; + position: relative; + 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; + top: 1px; + border-radius: 4px 4px 0 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; + top: 1px; + border-radius: 4px; + 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; + top: -2px; + border-radius: 0 0 4px 4px; + 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 */ .pure-form-message-inline { - display: inline-block; - padding-left: 0.3em; - color: #666; - vertical-align: middle; - font-size: 0.875em; + display: inline-block; + padding-left: 0.3em; + color: #666; + vertical-align: middle; + font-size: 0.875em; } /* Block help for forms */ .pure-form-message { + display: block; + color: #666; + font-size: 0.875em; +} + +@media only screen and (max-width: 480px) { + .pure-form button[type="submit"] { + margin: 0.7em 0 0; + } + + .pure-form input:not([type]), + .pure-form input[type="text"], + .pure-form input[type="password"], + .pure-form input[type="email"], + .pure-form input[type="url"], + .pure-form input[type="date"], + .pure-form input[type="month"], + .pure-form input[type="time"], + .pure-form input[type="datetime"], + .pure-form input[type="datetime-local"], + .pure-form input[type="week"], + .pure-form input[type="number"], + .pure-form input[type="search"], + .pure-form input[type="tel"], + .pure-form input[type="color"], + .pure-form label { + margin-bottom: 0.3em; display: block; - color: #666; - font-size: 0.875em; -} - -@media only screen and (max-width : 480px) { - .pure-form button[type="submit"] { - margin: 0.7em 0 0; - } - - .pure-form input:not([type]), - .pure-form input[type="text"], - .pure-form input[type="password"], - .pure-form input[type="email"], - .pure-form input[type="url"], - .pure-form input[type="date"], - .pure-form input[type="month"], - .pure-form input[type="time"], - .pure-form input[type="datetime"], - .pure-form input[type="datetime-local"], - .pure-form input[type="week"], - .pure-form input[type="number"], - .pure-form input[type="search"], - .pure-form input[type="tel"], - .pure-form input[type="color"], - .pure-form label { - margin-bottom: 0.3em; - display: block; - } - - .pure-group input:not([type]), - .pure-group input[type="text"], - .pure-group input[type="password"], - .pure-group input[type="email"], - .pure-group input[type="url"], - .pure-group input[type="date"], - .pure-group input[type="month"], - .pure-group input[type="time"], - .pure-group input[type="datetime"], - .pure-group input[type="datetime-local"], - .pure-group input[type="week"], - .pure-group input[type="number"], - .pure-group input[type="search"], - .pure-group input[type="tel"], - .pure-group input[type="color"] { - margin-bottom: 0; - } - - .pure-form-aligned .pure-control-group label { - margin-bottom: 0.3em; - text-align: left; - display: block; - width: 100%; - } - - .pure-form-aligned .pure-controls { - margin: 1.5em 0 0 0; - } - - .pure-form-message-inline, - .pure-form-message { - display: block; - font-size: 0.75em; - /* Increased bottom padding to make it group with its related input element. */ - padding: 0.2em 0 0.8em; - } + } + + .pure-group input:not([type]), + .pure-group input[type="text"], + .pure-group input[type="password"], + .pure-group input[type="email"], + .pure-group input[type="url"], + .pure-group input[type="date"], + .pure-group input[type="month"], + .pure-group input[type="time"], + .pure-group input[type="datetime"], + .pure-group input[type="datetime-local"], + .pure-group input[type="week"], + .pure-group input[type="number"], + .pure-group input[type="search"], + .pure-group input[type="tel"], + .pure-group input[type="color"] { + margin-bottom: 0; + } + + .pure-form-aligned .pure-control-group label { + margin-bottom: 0.3em; + text-align: left; + display: block; + width: 100%; + } + + .pure-form-aligned .pure-controls { + margin: 1.5em 0 0 0; + } + + .pure-form-message-inline, + .pure-form-message { + display: block; + font-size: 0.75em; + /* Increased bottom padding to make it group with its related input element. */ + padding: 0.2em 0 0.8em; + } } /*csslint adjoining-classes: false, box-model:false*/ .pure-menu { - -webkit-box-sizing: border-box; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .pure-menu-fixed { - position: fixed; - left: 0; - top: 0; - z-index: 3; + position: fixed; + left: 0; + top: 0; + z-index: 3; } .pure-menu-list, .pure-menu-item { - position: relative; + position: relative; } .pure-menu-list { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } .pure-menu-item { - padding: 0; - margin: 0; - height: 100%; + padding: 0; + margin: 0; + height: 100%; } .pure-menu-link, .pure-menu-heading { - display: block; - text-decoration: none; - white-space: nowrap; + display: block; + text-decoration: none; + white-space: nowrap; } /* HORIZONTAL MENU */ .pure-menu-horizontal { - width: 100%; - white-space: nowrap; + width: 100%; + 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, .pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-separator { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; } /* Submenus should still be display: block; */ .pure-menu-item .pure-menu-item { - display: block; + display: block; } .pure-menu-children { - display: none; - position: absolute; - left: 100%; - top: 0; - margin: 0; - padding: 0; - z-index: 3; + display: none; + position: absolute; + left: 100%; + top: 0; + margin: 0; + padding: 0; + z-index: 3; } .pure-menu-horizontal .pure-menu-children { - left: 0; - top: auto; - width: inherit; + left: 0; + top: auto; + width: inherit; } .pure-menu-allow-hover:hover > .pure-menu-children, .pure-menu-active > .pure-menu-children { - display: block; - position: absolute; + display: block; + position: absolute; } /* Vertical Menus - show the dropdown arrow */ .pure-menu-has-children > .pure-menu-link:after { - padding-left: 0.5em; - content: "\25B8"; - font-size: small; + padding-left: 0.5em; + content: "\25B8"; + font-size: small; } /* Horizontal Menus - show the dropdown arrow */ .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { - content: "\25BE"; + content: "\25BE"; } /* scrollable menus */ .pure-menu-scrollable { - overflow-y: scroll; - overflow-x: hidden; + overflow-y: scroll; + 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; - overflow-y: hidden; - overflow-x: auto; - /* a little extra padding for this style to allow for scrollbars */ - padding: .5em 0; + white-space: nowrap; + overflow-y: hidden; + overflow-x: auto; + /* a little extra padding for this style to allow for scrollbars */ + padding: 0.5em 0; } /* misc default styling */ .pure-menu-separator, .pure-menu-horizontal .pure-menu-children .pure-menu-separator { - background-color: #ccc; - height: 1px; - margin: .3em 0; + background-color: #ccc; + height: 1px; + margin: 0.3em 0; } .pure-menu-horizontal .pure-menu-separator { - width: 1px; - height: 1.3em; - margin: 0 .3em ; + width: 1px; + height: 1.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; + display: block; + width: auto; } .pure-menu-heading { - text-transform: uppercase; - color: #565d64; + text-transform: uppercase; + color: #565d64; } .pure-menu-link { - color: #777; + color: #777; } .pure-menu-children { - background-color: #fff; + background-color: #fff; } .pure-menu-link, .pure-menu-heading { - padding: .5em 1em; + padding: 0.5em 1em; } .pure-menu-disabled { - opacity: .5; + opacity: 0.5; } .pure-menu-disabled .pure-menu-link:hover { - background-color: transparent; - cursor: default; + background-color: transparent; + cursor: default; } .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; + /* Remove spacing between table cells (from Normalize.css) */ + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + border: 1px solid #cbcbcb; } .pure-table caption { - color: #000; - font: italic 85%/1 arial, sans-serif; - padding: 1em 0; - text-align: center; + color: #000; + font: italic 85%/1 arial, sans-serif; + padding: 1em 0; + text-align: center; } .pure-table td, .pure-table th { - border-left: 1px solid #cbcbcb;/* inner column border */ - border-width: 0 0 0 1px; - font-size: inherit; - margin: 0; - overflow: visible; /*to make ths where the title is really long work*/ - padding: 0.5em 1em; /* cell padding */ + border-left: 1px solid #cbcbcb; /* inner column border */ + border-width: 0 0 0 1px; + font-size: inherit; + margin: 0; + overflow: visible; /*to make ths where the title is really long work*/ + padding: 0.5em 1em; /* cell padding */ } .pure-table thead { - background-color: #e0e0e0; - color: #000; - text-align: left; - vertical-align: bottom; + background-color: #e0e0e0; + color: #000; + text-align: left; + vertical-align: bottom; } /* @@ -1348,33 +1360,32 @@ 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; + 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-width: 0 0 1px 0; + border-bottom: 1px solid #cbcbcb; } .pure-table-horizontal tbody > tr:last-child > td { - border-bottom-width: 0; -}
\ No newline at end of file + border-bottom-width: 0; +} |