diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs index e12313a..24ca50f 100644 --- a/app/components/proposal-list/template.hbs +++ b/app/components/proposal-list/template.hbs @@ -7,9 +7,8 @@ {{/each}} {{#if confirmProposals}} -
- -
+

+ +

{{/if}} diff --git a/app/styles/_forms.scss b/app/styles/_forms.scss new file mode 100644 index 0000000..d4486d7 --- /dev/null +++ b/app/styles/_forms.scss @@ -0,0 +1,91 @@ +button, input[type=submit] { + display: inline-block; + border: 1px solid rgba(22, 21, 40, 1); + background-color: rgba(22, 21, 40, 0.6); + color: $primaryColor; + border-radius: 3px; + font-weight: 500; + text-transform: uppercase; + cursor: pointer; + letter-spacing: 0.1em; + + &:hover { + background-color: rgba(22, 21, 40, 0.8); + } + + &:disabled { + cursor: not-allowed; + background-color: transparent; + } +} + +input[type=submit] { + padding: 0.6rem 2rem; +} + +input[type=text], select { + width: 100%; + padding: 1rem; + border: none; + border-bottom: 1px solid rgba(255,255,255,0.2); + background-color: rgba(22, 21, 40, 0.3); + color: #fff; + font-size: 1.2rem; + &:focus, &.valid { + background-color: rgba(22, 21, 40, 0.6); + } + @include placeholder { + color: rgba(238, 238, 238, 0.5); + } +} + +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; + background-color: rgba(22, 21, 40, 0.6); + background-image: + linear-gradient(45deg, transparent 50%, gray 50%), + linear-gradient(135deg, gray 50%, transparent 50%); + background-position: + calc(100% - 1.5rem) calc(1rem + 0.5rem), + calc(100% - 1rem) calc(1rem + 0.5rem); + background-size: + 0.5rem 0.5rem, + 0.5rem 0.5rem; + background-repeat: no-repeat; + + &:invalid { + color: rgba(238, 238, 238, 0.5); + } +} + +input[type=checkbox] { + display: none; +} + +label.checkbox { + line-height: 3.2rem; + font-size: 1.2rem; + &::before { + display: inline-block; + margin-right: 0.8rem; + height: 3.2rem; + width: 3.2rem; + font-size: 2rem; + background-color: rgba(22, 21, 40, 0.3); + border-bottom: 1px solid rgba(255,255,255,0.2); + text-align: center; + vertical-align: middle; + content: '✓'; + color: rgba(255,255,255,0.2); + } +} + +input[type=checkbox]:checked + label.checkbox { + &::before { + background-color: rgba(22, 21, 40, 0.6); + color: #fff; + } +} diff --git a/app/styles/app.scss b/app/styles/app.scss index 8c04cf8..fcd7ca8 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -84,21 +84,7 @@ section { } } -button, input[type=submit] { - display: inline-block; - border: 1px solid rgba(22, 21, 40, 1); - background-color: rgba(22, 21, 40, 0.6); - color: $primaryColor; - border-radius: 3px; - font-weight: 500; - text-transform: uppercase; - cursor: pointer; - letter-spacing: 0.1em; - - &:hover { - background-color: rgba(22, 21, 40, 0.8); - } -} +@import "forms"; @import "components/loading-spinner"; @import "components/contributor-list"; diff --git a/app/styles/components/_add-contributor.scss b/app/styles/components/_add-contributor.scss index 379b91e..929f05f 100644 --- a/app/styles/components/_add-contributor.scss +++ b/app/styles/components/_add-contributor.scss @@ -1,7 +1,6 @@ section#add-contributor, section#add-proposal { form { - p { margin-bottom: 1rem; @@ -14,81 +13,6 @@ section#add-contributor, section#add-proposal { } } } - - input[type=text], select { - width: 100%; - padding: 1rem; - border: none; - border-bottom: 1px solid rgba(255,255,255,0.2); - background-color: rgba(22, 21, 40, 0.3); - color: #fff; - font-size: 1.2rem; - &:focus, &.valid { - background-color: rgba(22, 21, 40, 0.6); - } - @include placeholder { - color: rgba(238, 238, 238, 0.5); - } - } - - select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; - background-color: rgba(22, 21, 40, 0.6); - background-image: - linear-gradient(45deg, transparent 50%, gray 50%), - linear-gradient(135deg, gray 50%, transparent 50%); - background-position: - calc(100% - 1.5rem) calc(1rem + 0.5rem), - calc(100% - 1rem) calc(1rem + 0.5rem); - background-size: - 0.5rem 0.5rem, - 0.5rem 0.5rem; - background-repeat: no-repeat; - - &:invalid { - color: rgba(238, 238, 238, 0.5); - } - } - - input[type=submit] { - padding: 0.6rem 2rem; - &:disabled { - background-color: transparent; - } - } - - input[type=checkbox] { - display: none; - } - - label.checkbox { - line-height: 3.2rem; - font-size: 1.2rem; - &::before { - display: inline-block; - margin-right: 0.8rem; - height: 3.2rem; - width: 3.2rem; - font-size: 2rem; - background-color: rgba(22, 21, 40, 0.3); - border-bottom: 1px solid rgba(255,255,255,0.2); - text-align: center; - vertical-align: middle; - content: '✓'; - color: rgba(255,255,255,0.2); - } - } - - input[type=checkbox]:checked + label.checkbox { - &::before { - background-color: rgba(22, 21, 40, 0.6); - color: #fff; - } - } - } } diff --git a/app/styles/components/_proposal-list.scss b/app/styles/components/_proposal-list.scss index f86dd4a..64530ed 100644 --- a/app/styles/components/_proposal-list.scss +++ b/app/styles/components/_proposal-list.scss @@ -53,15 +53,4 @@ ul.proposal-list { } } - button { - margin-top: 1.1rem; - height: 2rem; - line-height: 2rem; - padding: 0 0.6rem; - - &:disabled { - cursor: not-allowed; - color: rgba(204,204,204, 0.6); - } - } }