diff options
Diffstat (limited to 'ui/app/css/itcss/components/sections.scss')
-rw-r--r-- | ui/app/css/itcss/components/sections.scss | 476 |
1 files changed, 476 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss new file mode 100644 index 000000000..388aea175 --- /dev/null +++ b/ui/app/css/itcss/components/sections.scss @@ -0,0 +1,476 @@ +// Old scss, do not lint - clean up later +/* stylelint-disable */ + + +/* +App Sections + TODO: Move into separate files. +*/ + +/* initialize */ +textarea.twelve-word-phrase { + padding: 12px; + width: 300px; + height: 140px; + font-size: 16px; + background: $white; + resize: none; +} + +.initialize-screen hr { + width: 60px; + margin: 12px; + border-color: #f7861c; + border-style: solid; +} + +.initialize-screen label { + margin-top: 20px; +} + +.initialize-screen button.create-vault { + margin-top: 40px; +} + +.initialize-screen .warning { + font-size: 14px; + margin: 0 16px; +} + +/* unlock */ +.error { + // color: #e20202; + color: #f7861c; + margin-bottom: 9px; +} + +.warning { + color: #ffae00; +} + +.lock { + width: 50px; + height: 50px; +} + +.lock.locked { + transform: scale(1.5); + opacity: 0; + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.lock.unlocked { + transform: scale(1); + opacity: 1; + transition: opacity 500ms ease-out, transform 500ms ease-out, background 200ms ease-in; +} + +.lock.locked .lock-top { + transform: scaleX(1) translateX(0); + transition: transform 250ms ease-in; +} + +.lock.unlocked .lock-top { + transform: scaleX(-1) translateX(-12px); + transition: transform 250ms ease-in; +} + +.lock.unlocked:hover { + border-radius: 4px; + background: #e5e5e5; + border: 1px solid #b1b1b1; +} + +.lock.unlocked:active { + background: #c3c3c3; +} + +.section-title .fa-arrow-left { + margin: -2px 8px 0px -8px; +} + +.unlock-screen #metamask-mascot-container { + margin-top: 24px; +} + +.unlock-screen h1 { + margin-top: -28px; + margin-bottom: 42px; +} + +.unlock-screen input[type=password] { + width: 260px; +} + +.sizing-input { + font-size: 14px; + height: 30px; + padding-left: 5px; +} + +.editable-label { + display: flex; +} + +/* Webkit */ + +.unlock-screen input::-webkit-input-placeholder { + text-align: center; + font-size: 1.2em; +} + +/* Firefox 18- */ + +.unlock-screen input:-moz-placeholder { + text-align: center; + font-size: 1.2em; +} + +/* Firefox 19+ */ + +.unlock-screen input::-moz-placeholder { + text-align: center; + font-size: 1.2em; +} + +/* IE */ + +.unlock-screen input:-ms-input-placeholder { + text-align: center; + font-size: 1.2em; +} + +/* accounts */ + +.accounts-section { + margin: 0 0px; +} + +.accounts-section .horizontal-line { + margin: 0 18px; +} + +.accounts-list-option { + height: 120px; +} + +.accounts-list-option .identicon-wrapper { + width: 100px; +} + +.unconftx-link { + margin-top: 24px; + cursor: pointer; +} + +.unconftx-link .fa-arrow-right { + margin: 0 -8px 0px 8px; +} + +/* identity panel */ + +.identity-panel { + font-weight: 500; +} + +.identity-panel .identicon-wrapper { + margin: 4px; + margin-top: 8px; + display: flex; + align-items: center; +} + +.identity-panel .identicon-wrapper span { + margin: 0 auto; +} + +.identity-panel .identity-data { + margin: 8px 8px 8px 18px; +} + +.identity-panel i { + margin-top: 32px; + margin-right: 6px; + color: #b9b9b9; +} + +.identity-panel .arrow-right { + padding-left: 18px; + width: 42px; + min-width: 18px; + height: 100%; +} + +.identity-copy.flex-column { + flex: .25 0 auto; + justify-content: center; +} + +/* accounts screen */ + +.identity-section { +} + +.identity-section .identity-panel { + background: #e9e9e9; + border-bottom: 1px solid #b1b1b1; + cursor: pointer; +} + +.identity-section .identity-panel.selected { + background: $white; + color: #f3c83e; +} + +.identity-section .identity-panel.selected .identicon { + border-color: $orange; +} + +.identity-section .accounts-list-option:hover, +.identity-section .accounts-list-option.selected { + background: $white; +} + +/* account detail screen */ + +.account-detail-section { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + flex-direction: inherit; +} + +.grow-tenx { + flex-grow: 10; +} + +.name-label { +} + +.unapproved-tx-icon { + height: 16px; + width: 16px; + background: rgb(47, 174, 244); + border-color: $silver-chalice; + border-radius: 13px; +} + +.edit-text { + height: 100%; + visibility: hidden; +} + +.editing-label { + display: flex; + justify-content: flex-start; + margin-left: 50px; + margin-bottom: 2px; + font-size: 11px; + text-rendering: geometricPrecision; + color: #f7861c; +} + +.name-label:hover .edit-text { + visibility: visible; +} +/* tx confirm */ + +.unconftx-section input[type=password] { + height: 22px; + padding: 2px; + margin: 12px; + margin-bottom: 24px; + border-radius: 4px; + border: 2px solid #f3c83e; + background: #faf6f0; +} + +/* Ether Balance Widget */ + +.ether-balance-amount { + color: #f7861c; +} + +.ether-balance-label { + color: #aba9aa; +} + +/* Info screen */ +.info-gray { + font-family: Roboto; + text-transform: uppercase; + color: $silver-chalice; +} + +.icon-size { + width: 20px; +} + +.info { + font-family: Roboto, Arial; + padding-bottom: 10px; + display: inline-block; + padding-left: 5px; +} + +/* buy eth warning screen */ +.custom-radios { + justify-content: space-around; + align-items: center; +} + +.custom-radio-selected { + width: 17px; + height: 17px; + border: solid; + border-style: double; + border-radius: 15px; + border-width: 5px; + background: rgba(247, 134, 28, 1); + border-color: #f7f7f7; +} + +.custom-radio-inactive { + width: 14px; + height: 14px; + border: solid; + border-width: 1px; + border-radius: 24px; + border-color: $silver-chalice; +} + +.radio-titles { + color: rgba(247, 134, 28, 1); +} + +.eth-warning { + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.buy-subview { + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.input-container:hover .edit-text { + visibility: visible; +} + +.buy-inputs { + font-family: Roboto; + font-size: 13px; + height: 20px; + background: transparent; + box-sizing: border-box; + border: solid; + border-color: transparent; + border-width: .5px; + border-radius: 2px; +} + +.input-container:hover .buy-inputs { + box-sizing: inherit; + border: solid; + border-color: #f7861c; + border-width: .5px; + border-radius: 2px; +} + +.buy-inputs:focus { + border: solid; + border-color: #f7861c; + border-width: .5px; + border-radius: 2px; +} + +.activeForm { + background: #f7f7f7; + border: none; + border-radius: 8px 8px 0px 0px; + width: 50%; + text-align: center; + padding-bottom: 4px; +} + +.inactiveForm { + border: none; + border-radius: 8px 8px 0px 0px; + width: 50%; + text-align: center; + padding-bottom: 4px; +} + +.ex-coins { + font-family: Roboto; + text-transform: uppercase; + text-align: center; + font-size: 33px; + width: 118px; + height: 42px; + padding: 1px; + color: #4d4d4d; +} + +.marketinfo { + font-family: Roboto; + color: $silver-chalice; + font-size: 15px; + line-height: 17px; +} + +#fromCoin::-webkit-calendar-picker-indicator { + display: none; +} + +#coinList { + width: 400px; + height: 500px; + overflow: scroll; +} + +.icon-control .fa-refresh { + visibility: hidden; +} + +.icon-control:hover .fa-refresh { + visibility: visible; +} + +.icon-control:hover .fa-chevron-right { + visibility: hidden; +} + +.inactive { + color: $silver-chalice; +} + +.inactive button { + background: $silver-chalice; + color: $white; +} + +.qr-ellip-address, .ellip-address { + overflow: hidden; + text-overflow: ellipsis; +} + +.qr-header { + font-size: 25px; + margin-top: 40px; +} + +.qr-message { + font-size: 12px; + color: #f7861c; +} + +div.message-container > div:first-child { + margin-top: 18px; + font-size: 15px; + color: #4d4d4d; +} + +.pop-hover:hover { + transform: scale(1.1); +} + +/* stylelint-enable */ |