diff --git a/src/styles/aside.less b/src/styles/aside.less deleted file mode 100644 index f1714f1d..00000000 --- a/src/styles/aside.less +++ /dev/null @@ -1,602 +0,0 @@ -aside { - position: relative; - width: 320px; - min-width: 320px; - overflow-x: hidden; - - .sticky-container { - // position: relative; - // top: 0; - // width: 320px; - // overflow: hidden; - - &.fixed { - position: fixed; - border-right: 1px solid @color_divider; - } - - &.fixed-bottom { - padding-bottom: 60px; // height of .help - // .sticky-bottom { - // position: fixed; - // bottom: 0; - // background: @color_main; - // border-right: 1px solid @color_divider; - // } - } - } - - //.transition-container { - //width: 640px; - - // section { - // width: 320px; - // display: inline-block; - // vertical-align: top; - // } - //} - - .trezor-webusb-button { - margin: 12px 0px 12px 30px; - padding: 6px 24px 6px 40px; - width: 256px; - } - - .device-select { - background: @color_white; - border-bottom: 1px solid @color_divider; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); - cursor: pointer; - - .arrow { - width: 24px; - height: 24px; - margin-right: 24px; - &:after { - .icomoon-arrow-down; - transition: transform 0.3s, color 0.3s; - color: @color_text_secondary; - transform-origin: 50% 50%; - font-size: 24px; - } - } - - &:hover { - .arrow:after { - color: @color_text_primary; - } - } - - &.opened { - border-color: @color_white; - box-shadow: none; - .arrow:after { - transform: rotate(180deg); - } - } - - &.disabled { - cursor: initial; - .arrow { - display: none; - } - - .device-menu { - padding-right: 26px; - } - } - } - - .device { - position: relative; - height: 64px; - width: 320px; - display: flex; - align-items: center; - padding-left: 60px; - - &.item { - padding-right: 24px; - cursor: pointer; - .hover(); - &:hover { - background: @color_gray_light; - } - } - - &:before { - content: ''; - position: absolute; - display: block; - width: 13px; - height: 25px; - z-index: 2; - left: 25px; - top: 19px; - background-repeat: no-repeat; - background-position: center; - background-size: 13px 25px; - background-image: url('../images/trezor-1.png'); - } - - &:after { - content: ''; - position: absolute; - display: block; - width: 10px; - height: 10px; - top: 14px; - left: 32px; - background: @color_green_primary; - border: 2px solid @color_white; - border-radius: 50%; - z-index: 3; - } - - &.disconnected, - &.unavailable, { - &:after { - background: @color_error_primary; - } - } - - &.unacquired, - &.used-elsewhere, - &.reload-features, { - &:after { - background: @color_warning_primary; - } - } - - &.trezor-t { - &:before { - width: 17px; - left: 23px; - background-size: 17px 25px; - background-image: url('../images/trezor-T.png'); - } - - &:after { - left: 34px; - top: 14px; - } - } - - .label-container { - flex: 1; - overflow: hidden; - span { - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - - &.label { - font-weight: 500; - font-size: 14px; - color: @color_text_primary; - } - - &.status { - font-size: 12px; - color: @color_text_secondary; - } - } - } - - .counter { - border: 1px solid @color_divider; - border-radius: 50%; - color: @color_text_secondary; - width: 24px; - height: 24px; - line-height: 22px; - text-align: center; - font-size: 11px; - margin-right: 8px; - } - - .forget-button { - color: @color_text_secondary; - .hover(); - &:before { - .icomoon-eject; - position: relative; - font-size: 24px; - } - - &:hover { - color: @color_text_primary; - } - } - } - - .device-menu { - padding: 0px 24px 8px 19px; - border-bottom: 1px solid @color_divider; - background: @color_white; - - div { - padding: 4px 0px; - display: flex; - align-items: center; - line-height: 24px; - cursor: pointer; - color: @color_text_secondary; - .hover(); - - &:before { - .icomoon-refresh; - position: relative; - font-size: 24px; - margin-right: 17px; - .hover(); - } - - &:hover { - color: @color_text_primary; - // &:before { - // color: @color_text_primary; - // } - } - - &.forget { - &:before { - .icomoon-eject; - } - } - - &.clone { - &:before { - .icomoon-T1; - font-size: 32px; - transform: translateX(-4px); - margin-right: 8px; - } - } - - &.settings { - &:before { - .icomoon-settings; - } - } - } - } - - // a { - // position: relative; - // display: block; - // cursor: pointer; - // font-size: 16px; - // padding: 16px 0 16px 24px; - // white-space: nowrap; - // color: @color_text_primary; - // height: 50px; - - // transition: background-color 0.3s, color 0.3s; - - // &:hover { - // background-color: @color_gray_light; - // } - - // &.account { - // height: 64px; - // display: flex; - // flex-direction: column; - // justify-content: space-evenly; - // font-size: 14px; - // border-top: 1px solid @color_divider; - // span { - // display: block; - // font-size: 12px; - // color: @color_text_secondary; - // } - - // &:before { - // content: ''; - // width: 0px; - // height: 100%; - // position: absolute; - // top: 0; - // left: 0; - // background: @color_green_primary; - // transition: width 0.3s; - // } - - // &.selected { - // background: @color_white; - //border-left: 3px solid @color_green_primary; - //border-bottom: 1px solid @color_divider; - //padding-left: 27px; - - // &:before { - // width: 3px; - // } - - // &:hover { - // background: @color_white; - // } - - // &:last-child { - // border-bottom: 1px solid @color_divider; - // &:after { - // content: ''; - // position: absolute; - // bottom: 0px; - // left: 0px; - // width: 100%; - // height: 1px; - // line-height: 1px; - // background-color: @color_divider; - // } - // } - // } - // } - - - - // &.coin { - // padding-left: 60px; - // &:before { - // content: ''; - // position: absolute; - // display: block; - // width: 20px; - // height: 20px; - // left: 24px; - // top: 0px; - // bottom: 0px; - // margin: auto 0; - // background-repeat: no-repeat; - // background-position: center; - // background-size: 20px 20px; - - // } - // } - - // &.external { - // &:after { - // .icomoon-redirect; - // position: absolute; - // display: block; - // width: 30px; - // height: 30px; - // right: 20px; - // top: 0px; - // bottom: 0px; - // margin: auto 0; - // font-size: 30px; - // color: @color_text_secondary; - // .hover(); - // } - - // &:hover:after { - // color: @color_text_primary; - // } - // } - - // &.back { - // padding-left: 80px; - - // &:before { - // content: ''; - // position: absolute; - // display: block; - // width: 20px; - // height: 20px; - // left: 56px; - // top: 0px; - // bottom: 0px; - // margin: auto 0; - // background-repeat: no-repeat; - // background-position: center; - // background-size: auto 20px; - // } - - // &:after { - // .icomoon-arrow-left; - // position: absolute; - // display: block; - // width: 20px; - // height: 20px; - // left: 24px; - // top: 0px; - // bottom: 0px; - // margin: auto 0; - // font-size: 20px; - // } - // } - - // &.ethereum:before, - // &.ethereum-classic:before, - // &.ropsten:before, - // &.rinkeby:before { - // background-size: auto 20px; - // background-position: 2px 0px; - // } - - - // &.ethereum:before { - // background-image: url('../images/eth-logo.png'); - // } - // &.ethereum-classic:before { - // background-image: url('../images/etc-logo.png'); - // } - // &.ropsten:before { - // background-image: url('../images/ropsten-logo.png'); - // } - // &.rinkeby:before { - // background-image: url('../images/rinkeby-logo.png'); - // } - - // &.btc:before { - // background-image: url('../images/btc-logo.png'); - // } - // &.bch:before { - // background-image: url('../images/bch-logo.png'); - // } - // &.btg:before { - // background-image: url('../images/btg-logo.png'); - // } - // &.ltc:before { - // background-image: url('../images/ltc-logo.png'); - // } - // &.dash:before { - // background-image: url('../images/dash-logo.png'); - // } - // &.zec:before { - // background-image: url('../images/zec-logo.png'); - // } - // } - - // .coin-divider { - // font-size: 12px; - // display: flex; - // justify-content: space-between; - // color: @color_text_secondary; - // background: @color_gray_light; - // padding: 8px 28px 8px 24px; - // border-top: 1px solid @color_divider; - // border-bottom: 1px solid @color_divider; - // span { - // display: flex; - // justify-content: flex-end; - // } - // } - - // .device-divider { - // font-size: 12px; - // display: flex; - // justify-content: space-between; - // color: @color_text_secondary; - // background: @color_gray_light; - // padding: 8px 28px 8px 24px; - // border-bottom: 1px solid @color_divider; - // } - - // .help { - // width: 319px; // - 1px border-roght; 320px; - // padding: 14px 0px; - // text-align: center; - // border-top: 1px solid @color_divider; - - // &.fixed { - // position: fixed; - // bottom: 0px; - // } - - // a { - // color: @color_text_secondary; - // font-size: 12px; - // display: inline-block; - // padding: 8px; - // height: auto; - - // &:before { - // .icomoon-chat; - // font-size: 32px; - // position: absolute; - // top: 0px; - // left: -26px; - // } - - // &:hover { - // background: transparent; - // color: @color_text_primary; - // } - // } - // } - - // .wallet-settings { - - // } - - - - // .add-account { - // position: relative; - // padding: 8px 0 8px 20px; - // cursor: pointer; - // color: @color_text_secondary; - // display: flex; - // align-items: center; - - // &:before { - // .icomoon-plus; - // margin-right: 12px; - // } - - // .hover(); - // &:hover { - // color: @color_text_primary; - // } - // } - - // .discovery-status { - // height: 64px; - // display: flex; - // flex-direction: column; - // justify-content: space-evenly; - // font-size: 14px; - // padding: 16px 28px 16px 30px; - // white-space: nowrap; - // border-top: 1px solid @color_divider; - // span { - // display: block; - // font-size: 12px; - // color: @color_text_secondary; - // overflow: hidden; - // text-overflow: ellipsis; - // } - // } - - // .discovery-loading { - // display: flex; - // flex-direction: row; - // align-items: center; - // font-size: 14px; - // padding: 8px 0 8px 22px; - // white-space: nowrap; - // color: @color_text_secondary; - // //border-top: 1px solid @color_divider; - // .loader-circle { - // margin-right: 14px; - // } - // } - - // menu trasitions - - @slide_transition_time: 300ms; - - .slide-left-enter { - transform: translate(100%); - pointer-events: none; - } - .slide-left-enter.slide-left-enter-active { - transform: translate(0%); - transition: transform @slide_transition_time ease-in-out; - } - .slide-left-exit { - transform: translate(-100%); - } - .slide-left-exit.slide-left-exit-active { - transform: translate(0%); - transition: transform @slide_transition_time ease-in-out; - } - - .slide-right-enter { - transform: translate(-100%); - pointer-events: none; - } - .slide-right-enter.slide-right-enter-active { - transform: translate(0%); - transition: transform @slide_transition_time ease-in-out; - } - .slide-right-exit { - transform: translate(-100%); - } - .slide-right-exit.slide-right-exit-active { - transform: translate(-200%); - transition: transform @slide_transition_time ease-in-out; - } -} \ No newline at end of file diff --git a/src/styles/index.less b/src/styles/index.less index 743b26a0..198816e3 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -1,7 +1,6 @@ @import './fonts.less'; @import './colors.less'; @import './mixins.less'; -@import './aside.less'; @import './content.less'; @import './modal.less';