diff options
author | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-07 04:24:06 +0800 |
---|---|---|
committer | sdtsui <szehungdanieltsui@gmail.com> | 2017-08-07 04:24:13 +0800 |
commit | d46a79df25afa0973f19210048b929fa5ba76117 (patch) | |
tree | 53e4918a2bb8c824c82598d568e8c96b41eb023e /ui/app/css/itcss/components | |
parent | b65dc85b0a87d4646a2671656d18166f208228d4 (diff) | |
download | tangerine-wallet-browser-d46a79df25afa0973f19210048b929fa5ba76117.tar tangerine-wallet-browser-d46a79df25afa0973f19210048b929fa5ba76117.tar.gz tangerine-wallet-browser-d46a79df25afa0973f19210048b929fa5ba76117.tar.bz2 tangerine-wallet-browser-d46a79df25afa0973f19210048b929fa5ba76117.tar.lz tangerine-wallet-browser-d46a79df25afa0973f19210048b929fa5ba76117.tar.xz tangerine-wallet-browser-d46a79df25afa0973f19210048b929fa5ba76117.tar.zst tangerine-wallet-browser-d46a79df25afa0973f19210048b929fa5ba76117.zip |
Organize app components scss
Diffstat (limited to 'ui/app/css/itcss/components')
-rw-r--r-- | ui/app/css/itcss/components/footer.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/header.scss | 18 | ||||
-rw-r--r-- | ui/app/css/itcss/components/identicon.scss | 7 | ||||
-rw-r--r-- | ui/app/css/itcss/components/index.scss | 74 | ||||
-rw-r--r-- | ui/app/css/itcss/components/network.scss | 12 | ||||
-rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 109 | ||||
-rw-r--r-- | ui/app/css/itcss/components/sections.scss | 488 |
7 files changed, 645 insertions, 67 deletions
diff --git a/ui/app/css/itcss/components/footer.scss b/ui/app/css/itcss/components/footer.scss new file mode 100644 index 000000000..000a53eed --- /dev/null +++ b/ui/app/css/itcss/components/footer.scss @@ -0,0 +1,4 @@ +.app-footer { + padding-bottom: 10px; + align-items: center; +} diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss new file mode 100644 index 000000000..0525d00fc --- /dev/null +++ b/ui/app/css/itcss/components/header.scss @@ -0,0 +1,18 @@ +.app-header { + padding: 6px 8px; + // background: #EFEFEF; // $gallery +} + +.app-header h1 { + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #22232C; // $shark +} + +h2.page-subtitle { + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #AEAEAE; + font-size: 1em; + margin: 12px; +} diff --git a/ui/app/css/itcss/components/identicon.scss b/ui/app/css/itcss/components/identicon.scss new file mode 100644 index 000000000..2f2de6ed8 --- /dev/null +++ b/ui/app/css/itcss/components/identicon.scss @@ -0,0 +1,7 @@ +.identicon { + height: 46px; + width: 46px; + background-size: cover; + border-radius: 100%; + border: 3px solid gray; +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index a93b629f6..03a974877 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,67 +1,7 @@ -@import './buttons.scss' - -/* -app -*/ - -.app-header { - padding: 6px 8px; - // background: #EFEFEF; // $gallery -} - -.app-header h1 { - font-family: 'Montserrat Regular'; - text-transform: uppercase; - color: #22232C; // $shark -} - -h2.page-subtitle { - font-family: 'Montserrat Regular'; - text-transform: uppercase; - color: #AEAEAE; - font-size: 1em; - margin: 12px; -} - -.app-footer { - padding-bottom: 10px; - align-items: center; -} - -.identicon { - height: 46px; - width: 46px; - background-size: cover; - border-radius: 100%; - border: 3px solid gray; -} - -textarea.twelve-word-phrase { - padding: 12px; - width: 300px; - height: 140px; - font-size: 16px; - background: white; - resize: none; -} - -.network-indicator { - display: flex; - align-items: center; - font-size: 0.6em; - -} - -.network-name { - width: 5.2em; - line-height: 9px; - text-rendering: geometricPrecision; -} - -.check { - margin-left: 7px; - color: #F7861C; - flex: 1 0 auto; - display: flex; - justify-content: flex-end; -}
\ No newline at end of file +@import './buttons.scss'; +@import './header.scss'; +@import './footer.scss'; +@import './identicon.scss'; +@import './network.scss'; +@import './sections.scss'; +@import './newui-sections.scss'; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss new file mode 100644 index 000000000..fb135d190 --- /dev/null +++ b/ui/app/css/itcss/components/network.scss @@ -0,0 +1,12 @@ +.network-indicator { + display: flex; + align-items: center; + font-size: 0.6em; + +} + +.network-name { + width: 5.2em; + line-height: 9px; + text-rendering: geometricPrecision; +} diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss new file mode 100644 index 000000000..23cf4a39a --- /dev/null +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -0,0 +1,109 @@ +/* + NewUI Container Elements + */ + +.main-container { + position: absolute; + z-index: 18; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + font-family: DIN OT; + display: flex; + flex-wrap: wrap; + align-items: stretch; + overflow-y: scroll; +} + +.sidebar { + flex: 1 0 230px; + background: rgb(250, 250, 250); + z-index: 26; + position: fixed; + top: 35px; + left: 0px; + right: 0px; + bottom: 0px; + opacity: 1; + visibility: visible; + will-change: transform; + overflow-y: auto; + box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px; + width: 85%; + height: 100%; +} + +.sidebar-overlay { + z-index: 25; + position: fixed; + top: 35px; + left: 0px; + right: 0px; + bottom: 0px; + opacity: 1; + visibility: visible; + background-color: rgba(0, 0, 0, 0.3); +} + +@media screen and (min-width: 576px) { + .lap-visible { + display: flex; + } + + .phone-visible { + display: none; + } + + .main-container { + margin-top: 35px; + width: 85%; + height: 90vh; + } + + button.btn-clear { + width: 75px; + height: 32px; + font-size: .6em; + background: white; + border: 1px solid; + } +} + +@media screen and (min-width: 769px) { + .main-container { + margin-top: 35px; + width: 80%; + height: 82vh; + } +} + +@media screen and (min-width: 1281px) { + .main-container { + margin-top: 35px; + width: 65%; + height: 82vh; + } +} + +@media screen and (max-width: 575px) { + .lap-visible { + display: none; + } + + .phone-visible { + display: flex; + } + + .main-container { + margin-top: 35px; + // position: relative; + width: 100%; + height: 100%; + } + + button.btn-clear { + width: 100px; + height: 50px; + font-size: .7em; + background: red; + border: 1px solid; + } +} diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss new file mode 100644 index 000000000..7c6a8c1ce --- /dev/null +++ b/ui/app/css/itcss/components/sections.scss @@ -0,0 +1,488 @@ +/* +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; +} + +.warning { + color: #FFAE00; +} + +.lock { + width: 50px; + height: 50px; +} + +.lock.locked { + transform: scale(1.5); + opacity: 0.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: 0px 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: 0px -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: 0.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: #AEAEAE; + 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; +} + +/* Send Screen */ + +.send-screen section { + margin: 4px 16px; +} + +.send-screen input { + width: 100%; + font-size: 12px; +} + +/* Ether Balance Widget */ + +.ether-balance-amount { + color: #F7861C; +} + +.ether-balance-label { + color: #ABA9AA; +} + +/* Info screen */ +.info-gray{ + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #AEAEAE; +} + +.icon-size{ + width: 20px; +} + +.info{ + font-family: 'Montserrat Regular', 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: #AEAEAE; +} + +.radio-titles { + color: rgba(247, 134, 28, 1); +} + +.radio-titles-subtext { + +} + +.selected-exchange { + +} + +.buy-radio { + +} + +.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: 'Montserrat Light'; + font-size: 13px; + height: 20px; + background: transparent; + box-sizing: border-box; + border: solid; + border-color: transparent; + border-width: 0.5px; + border-radius: 2px; + +} +.input-container:hover .buy-inputs{ + box-sizing: inherit; + border: solid; + border-color: #F7861C; + border-width: 0.5px; + border-radius: 2px; +} + +.buy-inputs:focus{ + border: solid; + border-color: #F7861C; + border-width: 0.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: 'Montserrat Regular'; + text-transform: uppercase; + text-align: center; + font-size: 33px; + width: 118px; + height: 42px; + padding: 1px; + color: #4D4D4D; +} + +.marketinfo{ + font-family: 'Montserrat light'; + color: #AEAEAE; + 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: #AEAEAE; +} + +.inactive button{ + background: #AEAEAE; + color: white; +} + +.ellip-address { + overflow: hidden; + text-overflow: ellipsis; + width: 5em; + font-size: 14px; + font-family: "Montserrat Light"; + margin-left: 5px; +} + +.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); +} |