From 57422d6406e9310f63b53ae8bbdc22adada2538d Mon Sep 17 00:00:00 2001 From: Danny Coates Date: Wed, 16 Jan 2019 12:38:43 -0800 Subject: [PATCH] refactored styles to extract btn --- app/main.css | 219 ++++++++++++++++++---------------------- app/ui/archiveTile.js | 8 +- app/ui/copyDialog.js | 5 +- app/ui/expiryOptions.js | 2 +- app/ui/header.js | 4 +- app/ui/okDialog.js | 5 +- app/ui/signupDialog.js | 2 +- 7 files changed, 110 insertions(+), 135 deletions(-) diff --git a/app/main.css b/app/main.css index 8e970cff..1e3c4d1d 100644 --- a/app/main.css +++ b/app/main.css @@ -1,90 +1,34 @@ @tailwind preflight; @tailwind components; -@tailwind utilities; + +:not(input) { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} a { color: inherit; text-decoration: none; } -progress { - @apply bg-grey-light; - @apply rounded-sm; - @apply w-full; - @apply h-1; -} - -progress::-moz-progress-bar { +.btn { @apply bg-blue; - @apply rounded-sm; + @apply text-white; + @apply font-semibold; + @apply cursor-pointer; + @apply py-2; + @apply px-6; + @apply h-12; } -progress::-webkit-progress-bar { - @apply bg-grey-light; - @apply rounded-sm; - @apply w-full; - @apply h-1; +.btn:hover { + @apply bg-blue-dark; } -progress::-webkit-progress-value { - @apply bg-blue; - @apply rounded-sm; -} - -.word-break-all { - word-break: break-all; -} - -.main { - display: flex; - max-width: 64rem; - width: 100%; - height: 100%; -} - -.main > section { - @apply bg-white; -} - -.header-logo { - background-image: url('../assets/send_logo_white.svg'); - background-position: left; - background-repeat: no-repeat; - background-size: 1.8rem; - padding-left: 2.4rem; - text-decoration: none; -} - -.header-logo h1 { - font-size: 1.5rem; -} - -.mozilla-logo { - background-image: url('../assets/mozilla-logo.svg'); - background-repeat: no-repeat; - background-size: 100px, 32px; - overflow: hidden; - text-indent: 120%; - white-space: nowrap; - display: inline-block; - height: 32px; - width: 100px; - flex-shrink: 0; -} - -.feedback-link { - background-color: #000; - background-image: url('../assets/feedback.svg'); - background-position: 0.125rem 0.25rem; - background-repeat: no-repeat; - background-size: 1.125rem; - color: #fff; - display: block; - font-size: 0.75rem; - line-height: 0.75rem; - padding: 0.375rem 0.375rem 0.375rem 1.25rem; - text-indent: 0.125rem; - white-space: nowrap; +.btn:focus { + @apply bg-blue-dark; } .checkbox { @@ -140,53 +84,73 @@ progress::-webkit-progress-value { cursor: auto; } +.feedback-link { + background-color: #000; + background-image: url('../assets/feedback.svg'); + background-position: 0.125rem 0.25rem; + background-repeat: no-repeat; + background-size: 1.125rem; + color: #fff; + display: block; + font-size: 0.75rem; + line-height: 0.75rem; + padding: 0.375rem 0.375rem 0.375rem 1.25rem; + text-indent: 0.125rem; + white-space: nowrap; +} + +.header-logo { + background-image: url('../assets/send_logo_white.svg'); + background-position: left; + background-repeat: no-repeat; + background-size: 1.8rem; + padding-left: 2.4rem; + text-decoration: none; +} + +.main { + display: flex; + max-width: 64rem; + width: 100%; + height: 100%; +} + +.main > section { + @apply bg-white; +} + +.mozilla-logo { + background-image: url('../assets/mozilla-logo.svg'); + background-repeat: no-repeat; + background-size: 100px, 32px; + overflow: hidden; + text-indent: 120%; + white-space: nowrap; + display: inline-block; + height: 32px; + width: 100px; + flex-shrink: 0; +} + #password-msg::after { content: '\200b'; } -@screen md { - .main { - @apply flex-1; - @apply self-center; - @apply items-center; - @apply m-auto; - @apply py-8; - - min-height: 33rem; - max-height: 40rem; - width: calc(100% - 3rem); - } - - .header-logo { - background-image: url('../assets/send_logo.svg'); - } - - .main > section { - @apply shadow-md; - } +progress { + @apply bg-grey-light; + @apply rounded-sm; + @apply w-full; + @apply h-1; } -.rounded-device { - border-radius: 0.25rem; +progress::-webkit-progress-bar { + @apply bg-grey-light; + @apply rounded-sm; + @apply w-full; + @apply h-1; } -.px-4-device { - padding-left: 0; - padding-right: 0; -} - -@media screen and (max-device-width: 576px) { - .rounded-device { - border-radius: 0; - } - - .px-4-device { - padding-left: 1rem; - padding-right: 1rem; - } -} - -progress[value]::-webkit-progress-value { +progress::-webkit-progress-value { /* stylelint-disable */ background-image: -webkit-linear-gradient( -45deg, @@ -206,7 +170,7 @@ progress[value]::-webkit-progress-value { -webkit-animation: animate-stripes 1s linear infinite; } -progress[value]::-moz-progress-bar { +progress::-moz-progress-bar { /* stylelint-disable */ background-image: -moz-linear-gradient( 135deg, @@ -238,9 +202,26 @@ progress[value]::-moz-progress-bar { } } -:not(input) { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +@screen md { + .header-logo { + background-image: url('../assets/send_logo.svg'); + } + + .main { + @apply flex-1; + @apply self-center; + @apply items-center; + @apply m-auto; + @apply py-8; + + min-height: 33rem; + max-height: 40rem; + width: calc(100% - 3rem); + } + + .main > section { + @apply shadow-md; + } } + +@tailwind utilities; diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index 09e25d0a..04a161ed 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -20,7 +20,7 @@ function password(state) { const MAX_LENGTH = 32; return html` -
+
@@ -349,7 +349,7 @@ module.exports.empty = function(state, emit) {