diff options
Diffstat (limited to 'ui/app/css/itcss/components/newui-sections.scss')
| -rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 335 |
1 files changed, 335 insertions, 0 deletions
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..5cdda5e6c --- /dev/null +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -0,0 +1,335 @@ +$sub-mid-size-breakpoint: 667px; +$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})"; + +/* + NewUI Container Elements + */ + +// Component Colors +$tx-view-bg: $white; +$wallet-view-bg: $alabaster; + +// Main container +.main-container { + // position: absolute; + z-index: $main-container-z-index; + font-family: Roboto; + display: flex; + flex-wrap: wrap; + align-items: stretch; +} + +.main-container::-webkit-scrollbar { + display: none; +} + +//Account and transaction details +.account-and-transaction-details { + display: flex; + flex: 1 0 auto; +} + +// tx view + +.tx-view { + flex: 63.5 0 66.5%; + background: $tx-view-bg; + + // No title on mobile + @media screen and (max-width: 575px) { + .identicon-wrapper { + display: none; + } + + .account-name { + display: none; + } + } +} + +.open-in-browser { + cursor: pointer; + display: flex; + justify-content: center; + padding: 10px; +} + +// wallet view and sidebar + +.wallet-view { + display: flex; + flex-direction: column; + flex: 32 1 32%; + width: 0; + background: $wallet-view-bg; + z-index: 200; + position: relative; + + @media screen and (min-width: 576px) { + overflow-y: scroll; + overflow-x: hidden; + } + + @media #{$sub-mid-size-breakpoint-range} { + min-width: 160px; + } + + .wallet-view-account-details { + flex: 0 0 auto; + } + + &__name-container { + flex: 0 0 auto; + cursor: pointer; + width: 100%; + } + + &__keyring-label { + height: 50px; + color: $dusty-gray; + font-family: Roboto; + font-size: 10px; + text-align: right; + padding: 17px 20px 0; + box-sizing: border-box; + } + + &__details-button { + font-size: 10px; + border-radius: 17px; + background-color: transparent; + margin: 0 auto; + padding: 4px 12px; + flex: 0 0 auto; + } + + &__tooltip { + display: flex; + justify-content: center; + align-items: center; + padding: 24px; + } + + &__address { + border-radius: 3px; + background-color: $alto; + color: $scorpion; + font-size: 14px; + line-height: 12px; + padding: 4px 12px; + font-weight: 300; + cursor: pointer; + flex: 0 0 auto; + + &__pressed { + background-color: $manatee, + } + } + + &__sidebar-close { + + @media screen and (max-width: 575px) { + &::after { + content: '\00D7'; + font-size: 40px; + color: $tundora; + position: absolute; + top: 12px; + left: 12px; + cursor: pointer; + } + } + } + + &__add-token-button { + flex: 0 0 auto; + margin: 36px auto; + background: none; + padding: .7rem 2rem; + transition: border-color .3s ease; + + &:hover { + border-color: $curious-blue; + } + } +} + +@media screen and (min-width: 576px) { + .wallet-view::-webkit-scrollbar { + display: none; + } +} + +.wallet-view-title-wrapper { + flex: 0 0 25px; +} + +.wallet-view-title { + margin-left: 15px; + font-size: 16px; + + // No title on mobile + @media screen and (max-width: 575px) { + display: none; + } +} + +.wallet-view.sidebar { + flex: 1 0 230px; + background: rgb(250, 250, 250); + z-index: $sidebar-z-index; + position: fixed; + top: 66px; + left: 0; + right: 0; + bottom: 0; + opacity: 1; + visibility: visible; + will-change: transform; + overflow-y: auto; + box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; + width: 85%; + height: calc(100% - 56px); +} + +.sidebar-overlay { + z-index: $sidebar-overlay-z-index; + position: fixed; + // top: 41px; + height: 100%; + width: 100%; + left: 0; + right: 0; + bottom: 0; + opacity: 1; + visibility: visible; + background-color: rgba(0, 0, 0, .3); +} + +// main-container media queries + +@media screen and (min-width: 576px) { + .lap-visible { + display: flex; + } + + .phone-visible { + display: none; + } + + .main-container { + // margin-top: 6.9vh; + width: 85vw; + height: 90vh; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + } +} + +@media screen and (min-width: 769px) { + .main-container { + // margin-top: 6.9vh; + width: 80vw; + height: 82vh; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + } +} + +@media screen and (min-width: 1281px) { + .main-container { + // margin-top: 6.9vh; + width: 62vw; + height: 82vh; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + } +} + +@media screen and (max-width: 575px) { + .lap-visible { + display: none; + } + + .phone-visible { + display: flex; + } + + .main-container { + // margin-top: 41px; + height: 100%; + width: 100%; + overflow-y: auto; + background-color: $white; + } +} + +// wallet view +.account-name { + font-size: 24px; + font-weight: 300; + line-height: 20px; + color: $black; + margin-top: 8px; + margin-bottom: .9rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + padding: 0 8px; + text-align: center; +} + +// account options dropdown +.account-options-menu { + align-items: center; + justify-content: flex-start; + margin: 5% 7% 0%; +} + +.fiat-amount { + text-transform: uppercase; +} + +.token-balance__amount { + padding-right: 6px; +} + +// first time +.first-view-main { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + + @media screen and (max-width: 575px) { + height: 100%; + } + + @media screen and (min-width: 576px) { + width: 85vw; + } + + @media screen and (min-width: 769px) { + width: 80vw; + } + + @media screen and (min-width: 1281px) { + width: 62vw; + } +} + +.unlock-screen-container { + z-index: $main-container-z-index; + font-family: Roboto; + display: flex; + justify-content: center; + align-items: center; + flex: 1 0 auto; + background: #f7f7f7; + width: 100%; +} + +.unlock-screen { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 auto; +} |