diff --git a/react/src/components/dashboard/navbar.js b/react/src/components/dashboard/navbar.js index dc278d6..0050b60 100755 --- a/react/src/components/dashboard/navbar.js +++ b/react/src/components/dashboard/navbar.js @@ -33,7 +33,7 @@ class Navbar extends React.Component { handleClickOutside(e) { if (e.srcElement.className !== 'dropdown-menu' && e.srcElement.alt !== 'iguana profile pic' && - e.srcElement.offsetParent.className !== 'avatar avatar-online' && + (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'avatar avatar-online') && e.srcElement.className.indexOf('navbar-avatar') === -1 && (e.path && e.path[4] && e.path[4].className.indexOf('dropdown-menu') === -1)) { this.setState({ diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss new file mode 100644 index 0000000..b1741e0 --- /dev/null +++ b/react/src/components/overrides.scss @@ -0,0 +1,552 @@ +/* TODO: nesting, separate */ + +#app > div { + height: 100%; +} + +.page-main { + background: #f3f4f5; +} + +#kmd_header_button button { + margin-right: 5px; +} + +.widget.active .bg-white { + box-shadow: inset 1px 1px 10px #ccc; +} + +body { + padding-top: 44px; +} + +.login-form, +.register-form { + width: 540px; + margin: 30px 0; +} + +#section-iguana-wallet-settings .panel-title { + cursor: pointer; + cursor: hand; +} + +#section-iguana-wallet-settings .panel-title:before { + content: '\F273'; +} +#section-iguana-wallet-settings .panel-title.collapsed:before { + content: '\F278'; +} + +#section-dashboard { + height: 100%; +} + +#section-iguana-wallet-settings { + background: #f3f4f5; +} + +#edexcoin_dashboardinfo a, +.nav-top-menu, +#kmd_txid_info_mdl .nav-tabs li, +.pagination a, +.action { + cursor: pointer; + cursor: hand; +} + +#easydex-header-div { + background-repeat: no-repeat; + background-size: 100%; +} + +.unselectable { + user-select: none; +} + +.seed-toggle { + position: absolute; + right: 0; + top: 0px; + cursor: pointer; + cursor: hand; +} + +.radio-custom input { + cursor: pointer; + cursor: hand; +} + +.collapse { + overflow: hidden; + display: block; +} + +.collapse-active { + transition: height 0.3s ease-out; +} + +.rc-tree { + height: 450px; + overflow-y: scroll; + margin-top: 20px; + + a { + pointer-events: none; + } + li span.rc-tree-iconEle { + display: none; + } +} + +.rc-tree-node-content-wrapper-close + ul { + height: 0; +} +.rc-tree-node-content-wrapper { + user-select: none; +} +.rc-tree-node-content-wrapper-normal { + color: inherit; + pointer-events: all; + user-select: all; +} + +#RefreshBasiliskConnectionsMdl .btn-close { + position: absolute; + top: 15px; + right: 15px; +} + +.page-aside { + position: fixed; +} + +.page-aside-inner .wallet-widgets-list { + overflow-y: auto; + height: 100%; +} + +.display-sync-only-coins-toggle { + cursor: pointer; +} +.display-sync-only-coins-toggle:hover { + color: #ffa726; +} + +.btn-add-coin-item, +.btn-add-coin-item-options, +.btn-save-coin-selection, +.btn-load-coin-selection { + position: absolute; + right: 32px; + z-index: 50; +} +.btn-add-coin-item { + right: 60px; +} +.btn-add-coin-item-options { + padding: 6px; +} +.btn-save-coin-selection { + top: 60px; +} +.btn-load-coin-selection { + top: 95px; +} + +.btn-outline-primary { + color: #FF6600; + background-color: #fff; + border-color: #FF6600; +} + +.add-coin-modal { + .modal-body { + max-height: 590px; + overflow-y: auto; + } + + .multi { + .col-sm-8 { + width: 30%; + } + .col-sm-12 { + &.text-center { + width: 60%; + padding: 0; + + .col-lg-4 { + width: 25%; + margin-right: 8%; + padding: 0; + + .input.to-labelauty+label { + max-width: 136px; + } + } + .col-lg-4:last-child { + margin-right: 0; + } + .col-sm-1 { + width: 44px; + padding: 0; + } + } + } + } +} + +.sync-only-forks { + color: #757575; + + .modal-body { + overflow-y: auto; + } + .badge{ + &.up { + position: absolute; + top: 40px; + left: 65px; + margin: 0 5px; + } + } + .avatar { + width: 20%; + display: inline-block; + text-align: center; + vertical-align: top; + + img { + width: 55px; + display: inherit; + } + } + .progress-bars { + padding-left: 40px; + display: inline-block; + width: 80%; + margin: 0 auto; + } + .padding-bottom-60:last-child { + padding-bottom: 0 !important; + } +} + +#SettingsAccordion { + .panel { + .panel-collapse { + transition: all .3s; + + &.collapse { + height: 0; + } + } + } +} + +.center { + text-align: center; +} + +.navbar { + &.navbar-fixed-top { + .dropdown { + &.open { + .dropdown-menu { + right: 0; + } + } + .dropdown-menu { + display: block; + right: -165px; + } + } + } +} + +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 24px; +} + +/* Hide default HTML checkbox */ +.switch input { + display: none; +} + +/* The slider */ +.slider { + border-radius: 20px; + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + border-radius: 50%; + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 2px; + bottom: 2px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +.toggle-label { + color: #757575; + display: inline-block; + position: relative; + top: -12px; + left: 8px; +} + +input:checked + .slider { + background-color: rgb(57, 73, 171); +} + +input:focus + .slider { + box-shadow: 0 0 1px rgb(57, 73, 171); +} + +input:checked + .slider:before { + -webkit-transform: translateX(16px); + -ms-transform: translateX(16px); + transform: translateX(16px); +} + +.dropdown-menu li { + cursor: pointer; +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.pointer { + cursor: pointer; +} + +.text-center { + text-align: center; +} + +.breadcrumb > li + li:before { + display: none; +} + +.notifications-modal { + color: #757575; +} + +.notifications { + .notice { + position: relative; + margin: 1em; + background: #F9F9F9; + padding: 1em 1em 1em 2em; + border-left: 4px solid #DDD; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); + } + + .notice:before { + position: absolute; + top: 50%; + margin-top: -17px; + left: -17px; + background-color: #DDD; + color: #FFF; + width: 30px; + height: 30px; + border-radius: 100%; + text-align: center; + line-height: 30px; + font-weight: bold; + font-family: Georgia; + text-shadow: 1px 1px rgba(0, 0, 0, 0.5); + } + + .info { + border-color: #0074D9; + } + + .info:before { + content: 'i'; + background-color: #0074D9; + } + + .success { + border-color: #2ECC40; + } + + .success:before { + content: '√'; + background-color: #2ECC40; + } + + .warning { + border-color: #FFDC00; + } + + .warning:before { + content: '!'; + background-color: #FFDC00; + } + + .error { + border-color: #FF4136; + } + + .error:before { + content: 'X'; + background-color: #FF4136; + } +} + +.notifications-badge { + position: fixed; + bottom: 10px; + left: 5px; + cursor: pointer; + height: 20px; + z-index: 20; + + .badge { + margin-left: 2px; + font-weight: bold; + } + .badge.success { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; + } + .badge.pending { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; + } + .badge.error { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; + } + + .spinner-hide { + >div { + display: none; + } + } + + .spinner { + position: absolute; + left: 60px; + bottom: -12px; + + >div { + background-color: #fff; + margin-right: 1px; + width: 3px; + } + } + + &.stick-to-top { + top: -3px; + left: 470px; + z-index: 1500; + + .spinner { + display: inline-block; + position: relative; + left: -4px; + bottom: -16px; + + >div { + background-color: #00bcd4; + margin-right: 1px; + width: 3px; + } + } + } +} + +#js-copytextarea { + opacity: 0; + height: 10px; + width: 200px; +} + +#app { + height: 100%; +} + +.spinner { + width: 50px; + height: 40px; + text-align: center; + font-size: 10px; +} + +.spinner > div { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + + -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; + animation: sk-stretchdelay 1.2s infinite ease-in-out; +} + +.spinner .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes sk-stretchdelay { + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } + 20% { -webkit-transform: scaleY(1.0) } +} + +@keyframes sk-stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} + +.bootstrap-select > .dropdown-toggle { + z-index: 0; +} \ No newline at end of file diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss index 4d3038d..3b3c8e4 100644 --- a/react/src/styles/index.scss +++ b/react/src/styles/index.scss @@ -33,550 +33,4 @@ @import '../components/addcoin/addcoin.scss'; @import '../components/dashboard/dashboard.scss'; @import '../components/login/login.scss'; - -#app > div { - height: 100%; -} - -.page-main { - background: #f3f4f5; -} - -#kmd_header_button button { - margin-right: 5px; -} - -.widget.active .bg-white { - box-shadow: inset 1px 1px 10px #ccc; -} - -body { - padding-top: 44px; -} - -.login-form, -.register-form { - width: 540px; - margin: 30px 0; -} - -#section-iguana-wallet-settings .panel-title { - cursor: pointer; - cursor: hand; -} - -#section-iguana-wallet-settings .panel-title:before { - content: '\F273'; -} -#section-iguana-wallet-settings .panel-title.collapsed:before { - content: '\F278'; -} - -#section-dashboard { - height: 100%; -} - -#section-iguana-wallet-settings { - background: #f3f4f5; -} - -#edexcoin_dashboardinfo a, -.nav-top-menu, -#kmd_txid_info_mdl .nav-tabs li, -.pagination a, -.action { - cursor: pointer; - cursor: hand; -} - -#easydex-header-div { - background-repeat: no-repeat; - background-size: 100%; -} - -.unselectable { - user-select: none; -} - -.seed-toggle { - position: absolute; - right: 0; - top: 0px; - cursor: pointer; - cursor: hand; -} - -.radio-custom input { - cursor: pointer; - cursor: hand; -} - -.collapse { - overflow: hidden; - display: block; -} - -.collapse-active { - transition: height 0.3s ease-out; -} - -.rc-tree { - height: 450px; - overflow-y: scroll; - margin-top: 20px; - - a { - pointer-events: none; - } - li span.rc-tree-iconEle { - display: none; - } -} - -.rc-tree-node-content-wrapper-close + ul { - height: 0; -} -.rc-tree-node-content-wrapper { - user-select: none; -} -.rc-tree-node-content-wrapper-normal { - color: inherit; - pointer-events: all; - user-select: all; -} - -#RefreshBasiliskConnectionsMdl .btn-close { - position: absolute; - top: 15px; - right: 15px; -} - -.page-aside { - position: fixed; -} - -.page-aside-inner .wallet-widgets-list { - overflow-y: auto; - height: 100%; -} - -.display-sync-only-coins-toggle { - cursor: pointer; -} -.display-sync-only-coins-toggle:hover { - color: #ffa726; -} - -.btn-add-coin-item, -.btn-add-coin-item-options, -.btn-save-coin-selection, -.btn-load-coin-selection { - position: absolute; - right: 32px; - z-index: 50; -} -.btn-add-coin-item { - right: 60px; -} -.btn-add-coin-item-options { - padding: 6px; -} -.btn-save-coin-selection { - top: 60px; -} -.btn-load-coin-selection { - top: 95px; -} - -.btn-outline-primary { - color: #FF6600; - background-color: #fff; - border-color: #FF6600; -} - -.add-coin-modal { - .modal-body { - max-height: 590px; - overflow-y: auto; - } - - .multi { - .col-sm-8 { - width: 30%; - } - .col-sm-12 { - &.text-center { - width: 60%; - padding: 0; - - .col-lg-4 { - width: 25%; - margin-right: 8%; - padding: 0; - - .input.to-labelauty+label { - max-width: 136px; - } - } - .col-lg-4:last-child { - margin-right: 0; - } - .col-sm-1 { - width: 44px; - padding: 0; - } - } - } - } -} - -.sync-only-forks { - color: #757575; - - .modal-body { - overflow-y: auto; - } - .badge{ - &.up { - position: absolute; - top: 40px; - left: 65px; - margin: 0 5px; - } - } - .avatar { - width: 20%; - display: inline-block; - text-align: center; - vertical-align: top; - - img { - width: 55px; - display: inherit; - } - } - .progress-bars { - padding-left: 40px; - display: inline-block; - width: 80%; - margin: 0 auto; - } - .padding-bottom-60:last-child { - padding-bottom: 0 !important; - } -} - -#SettingsAccordion { - .panel { - .panel-collapse { - transition: all .3s; - - &.collapse { - height: 0; - } - } - } -} - -.center { - text-align: center; -} - -.navbar { - &.navbar-fixed-top { - .dropdown { - &.open { - .dropdown-menu { - right: 0; - } - } - .dropdown-menu { - display: block; - right: -165px; - } - } - } -} - -/* The switch - the box around the slider */ -.switch { - position: relative; - display: inline-block; - width: 40px; - height: 24px; -} - -/* Hide default HTML checkbox */ -.switch input { - display: none; -} - -/* The slider */ -.slider { - border-radius: 20px; - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; -} - -.slider:before { - border-radius: 50%; - position: absolute; - content: ""; - height: 20px; - width: 20px; - left: 2px; - bottom: 2px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; -} - -.toggle-label { - color: #757575; - display: inline-block; - position: relative; - top: -12px; - left: 8px; -} - -input:checked + .slider { - background-color: rgb(57, 73, 171); -} - -input:focus + .slider { - box-shadow: 0 0 1px rgb(57, 73, 171); -} - -input:checked + .slider:before { - -webkit-transform: translateX(16px); - -ms-transform: translateX(16px); - transform: translateX(16px); -} - -.dropdown-menu li { - cursor: pointer; -} - -/* Rounded sliders */ -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; -} - -.pointer { - cursor: pointer; -} - -.text-center { - text-align: center; -} - -.breadcrumb > li + li:before { - display: none; -} - -.notifications-modal { - color: #757575; -} - -.notifications { - .notice { - position: relative; - margin: 1em; - background: #F9F9F9; - padding: 1em 1em 1em 2em; - border-left: 4px solid #DDD; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); - } - - .notice:before { - position: absolute; - top: 50%; - margin-top: -17px; - left: -17px; - background-color: #DDD; - color: #FFF; - width: 30px; - height: 30px; - border-radius: 100%; - text-align: center; - line-height: 30px; - font-weight: bold; - font-family: Georgia; - text-shadow: 1px 1px rgba(0, 0, 0, 0.5); - } - - .info { - border-color: #0074D9; - } - - .info:before { - content: 'i'; - background-color: #0074D9; - } - - .success { - border-color: #2ECC40; - } - - .success:before { - content: '√'; - background-color: #2ECC40; - } - - .warning { - border-color: #FFDC00; - } - - .warning:before { - content: '!'; - background-color: #FFDC00; - } - - .error { - border-color: #FF4136; - } - - .error:before { - content: 'X'; - background-color: #FF4136; - } -} - -.notifications-badge { - position: fixed; - bottom: 10px; - left: 5px; - cursor: pointer; - height: 20px; - z-index: 20; - - .badge { - margin-left: 2px; - font-weight: bold; - } - .badge.success { - color: #3c763d; - background-color: #dff0d8; - border-color: #d6e9c6; - } - .badge.pending { - color: #8a6d3b; - background-color: #fcf8e3; - border-color: #faebcc; - } - .badge.error { - color: #a94442; - background-color: #f2dede; - border-color: #ebccd1; - } - - .spinner-hide { - >div { - display: none; - } - } - - .spinner { - position: absolute; - left: 60px; - bottom: -12px; - - >div { - background-color: #fff; - margin-right: 1px; - width: 3px; - } - } - - &.stick-to-top { - top: -3px; - left: 470px; - z-index: 1500; - - .spinner { - display: inline-block; - position: relative; - left: -4px; - bottom: -16px; - - >div { - background-color: #00bcd4; - margin-right: 1px; - width: 3px; - } - } - } -} - -#js-copytextarea { - opacity: 0; - height: 10px; - width: 200px; -} - -#app { - height: 100%; -} - -.spinner { - width: 50px; - height: 40px; - text-align: center; - font-size: 10px; -} - -.spinner > div { - background-color: #333; - height: 100%; - width: 6px; - display: inline-block; - - -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; - animation: sk-stretchdelay 1.2s infinite ease-in-out; -} - -.spinner .rect2 { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; -} - -.spinner .rect3 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; -} - -.spinner .rect4 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; -} - -.spinner .rect5 { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; -} - -@-webkit-keyframes sk-stretchdelay { - 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } - 20% { -webkit-transform: scaleY(1.0) } -} - -@keyframes sk-stretchdelay { - 0%, 40%, 100% { - transform: scaleY(0.4); - -webkit-transform: scaleY(0.4); - } 20% { - transform: scaleY(1.0); - -webkit-transform: scaleY(1.0); - } -} \ No newline at end of file +@import '../components/overrides.scss'; \ No newline at end of file