diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss index 554396fa038..bfa037eea23 100644 --- a/apps/browser/src/popup/scss/base.scss +++ b/apps/browser/src/popup/scss/base.scss @@ -356,86 +356,10 @@ header:not(bit-callout header, bit-dialog header, popup-page header) { } } -.no-bg { - background-color: transparent; -} - -.no-pad { - padding: 0 !important; -} - .content { padding: 15px 5px; } -.tabs { - width: 100%; - height: 55px; - border-top: 1px solid #000000; - position: absolute; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - - @include themify($themes) { - background-color: themed("tabBackgroundColor"); - border-top-color: themed("borderColor"); - } - - ul { - display: flex; - list-style: none; - padding: 0; - margin: 0; - - li { - flex: 1; - display: inline-block; - padding: 0; - margin: 0; - - a, - button { - text-align: center; - display: block; - padding: 7px 0; - text-decoration: none; - font-size: 12px; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - - @include themify($themes) { - color: themed("mutedColor"); - } - - &:hover, - &:focus { - @include themify($themes) { - background-color: themed("tabBackgroundHoverColor"); - } - } - - i { - display: block; - margin-bottom: 2px; - text-align: center; - } - } - - &.active { - a, - button { - @include themify($themes) { - color: themed("primaryColor"); - } - } - } - } - } -} - app-root { position: absolute; width: 100%; @@ -475,16 +399,6 @@ main:not(popup-page main) { display: flex; flex-flow: column; height: calc(100% - 44px); - - &.tab-page { - height: calc(100% - 99px); - } - } -} - -.tab-page { - main { - bottom: 55px; } } @@ -534,102 +448,6 @@ main:not(popup-page main) { width: 100%; } -.org-filter-content { - padding-bottom: 5px; - padding-left: 7px; - .org-filter { - @include themify($themes) { - background-color: themed("buttonBackgroundColor"); - } - border-radius: $border-radius; - padding: 6px 10px; - width: auto; - max-width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - .org-filter-text-container { - // src: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ - display: flex; - flex: 1; - min-width: 0; - - .org-filter-text-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } -} -.vault-select { - overflow-y: auto; - display: flex; - flex-direction: column; - - @include themify($themes) { - background-color: themed("boxBackgroundColor"); - } - margin-right: 18px; - margin-top: 1px; - @include themify($themes) { - border: 1px solid themed("borderColor"); - } - border-radius: $border-radius; - button { - border: none; - background: transparent; - width: auto; - max-width: 100%; - - padding: 5px 10px; - text-align: start; - @include themify($themes) { - color: themed("textColor"); - } - - a { - @include themify($themes) { - color: themed("textColor"); - } - } - - &:hover { - @include themify($themes) { - background-color: themed("boxBackgroundHoverColor"); - } - } - - i.vault-select-prefix-icon { - margin-right: 5px; - } - i.vault-select-suffix-icon { - margin-left: 5px; - } - - .vault-select-org-text-container { - display: flex; - flex: 1; - min-width: 0; - align-items: center; - .vault-select-org-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - .border { - @include themify($themes) { - background: themed("borderColor"); - } - left: 10px; - width: calc(100% - 20px); - height: 1px; - position: relative; - } -} - .login-with-device { .fingerprint-phrase-header { padding-top: 1rem; diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss index 179673279e6..1e053f6b9da 100644 --- a/apps/browser/src/popup/scss/box.scss +++ b/apps/browser/src/popup/scss/box.scss @@ -18,39 +18,6 @@ } } - .box-header-expandable { - padding: 10px 5px; - margin: 0 5px; - text-transform: uppercase; - display: flex; - width: calc(100% - 10px); - box-sizing: border-box; - align-items: center; - border-radius: $border-radius; - - @include themify($themes) { - color: themed("headingColor"); - } - - &:hover, - &:focus-visible, - &.active { - @include themify($themes) { - background-color: themed("boxBackgroundHoverColor"); - } - } - - .icon { - display: flex; - align-items: center; - margin-right: 5px; - - @include themify($themes) { - color: themed("headingColor"); - } - } - } - .box-content { @include themify($themes) { background-color: themed("backgroundColor"); @@ -200,35 +167,6 @@ } } } - - &.only-list { - margin-bottom: 0; - - .box-content { - border-bottom: none; - } - } - - &.full-list { - margin: 0; - - .box-content { - border: none; - } - } -} - -.stacked-boxes { - display: flex; - flex-direction: column; -} - -.box-section-divider { - border-top: 1px solid #000000; - - @include themify($themes) { - border-color: themed("borderColor"); - } } .box-content-row { @@ -243,10 +181,6 @@ background-color: themed("boxBackgroundColor"); } - &.no-bg { - background-color: rgba(0, 0, 0, 0) !important; - } - &:last-child { &:before { border: none; @@ -599,15 +533,6 @@ } } - .row-sub-label { - margin: 0 15px; - white-space: nowrap; - - @include themify($themes) { - color: themed("mutedColor"); - } - } - .icon { display: flex; justify-content: center; @@ -630,68 +555,6 @@ } } - &.totp { - .totp-code { - font-family: $font-family-monospace; - font-size: 1.1em; - } - - .totp-countdown { - margin: 3px 3px 0 0; - display: block; - user-select: none; - - .totp-sec { - font-size: 0.85em; - position: absolute; - line-height: 32px; - width: 32px; - text-align: center; - } - - svg { - width: 32px; - height: 32px; - transform: rotate(-90deg); - } - - .totp-circle { - fill: none; - - @include themify($themes) { - stroke: themed("totpStrokeColor"); - } - - &.inner { - stroke-width: 3; - stroke-dasharray: 78.6; - stroke-dashoffset: 0; - } - - &.outer { - stroke-width: 2; - stroke-dasharray: 88; - stroke-dashoffset: 0; - } - } - } - - &.low { - .totp-sec, - .totp-code { - @include themify($themes) { - color: themed("dangerColor"); - } - } - - .totp-circle { - @include themify($themes) { - stroke: themed("dangerColor"); - } - } - } - } - .progress { display: flex; height: 5px; @@ -740,12 +603,6 @@ } } -.truncate-box { - display: flex; - align-items: center; - gap: 5px; -} - .truncate { display: inline-block; white-space: nowrap; @@ -768,24 +625,3 @@ form { } } } - -.account-switcher-row { - @include themify($themes) { - color: themed("textColor"); - background-color: themed("boxBackgroundColor"); - } - - &:hover, - &:focus, - &.active { - @include themify($themes) { - background-color: themed("listItemBackgroundHoverColor"); - } - } - - &-details { - @include themify($themes) { - color: themed("mutedColor"); - } - } -} diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss index 0fb8e0ddaba..042bcd1b450 100644 --- a/apps/browser/src/popup/scss/environment.scss +++ b/apps/browser/src/popup/scss/environment.scss @@ -45,47 +45,3 @@ html.browser_safari { border-color: #2e3440; } } - -.environment-selector-btn { - font-size: $font-size-small; - color: $text-muted; - line-height: 25px; - font-weight: 400; - padding-left: 15px; - - span { - font-weight: 600; - font-size: $font-size-small; - } -} - -.environment-selector-dialog { - @include themify($themes) { - background-color: themed("boxBackgroundColor"); - } - padding: 5px; - width: 100%; - box-shadow: - 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 3px 1px -2px rgba(0, 0, 0, 0.12), - 0 1px 5px 0 rgba(0, 0, 0, 0.2); - border-radius: $border-radius; -} - -.environment-selector-dialog-item { - @include themify($themes) { - color: themed("textColor") !important; - } - width: 100%; - text-align: left; - padding: 0px 15px 0px 5px; - border-radius: 3px; - border: 1px solid transparent; - transition: all 0.2s ease-in-out; - - &:hover { - @include themify($themes) { - background-color: themed("listItemBackgroundHoverColor") !important; - } - } -} diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss index f61d593c43f..86623e395e8 100644 --- a/apps/browser/src/popup/scss/misc.scss +++ b/apps/browser/src/popup/scss/misc.scss @@ -334,11 +334,6 @@ img, } } -app-about .modal-body > *, -app-vault-view .box-footer { - user-select: auto; -} - /* tweak for inconsistent line heights in cipher view */ .box-footer button, .box-footer a { @@ -359,10 +354,6 @@ html.force_redraw { animation: redraw 1s linear infinite; } -.rounded-circle { - border-radius: 50% !important; -} - /* override for vault icon in browser (pre extension refresh) */ app-vault-icon:not(app-vault-list-items-container app-vault-icon) > div { display: flex; diff --git a/apps/browser/src/popup/scss/modal.scss b/apps/browser/src/popup/scss/modal.scss deleted file mode 100644 index 1d86b1e880a..00000000000 --- a/apps/browser/src/popup/scss/modal.scss +++ /dev/null @@ -1,356 +0,0 @@ -@import "variables.scss"; - -$white: white; -$black: black; -$line-height-base: 14px; -$border-radius-lg: $border-radius; - -// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss - -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, -) !default; - -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; - -// Padding applied to the modal body -$modal-inner-padding: 10px !default; - -$modal-dialog-margin: 0.5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; - -$modal-title-line-height: $line-height-base !default; - -//$modal-content-bg: $background-color-alt !default; -$modal-content-border-color: rgba($black, 0.2) !default; -$modal-content-border-width: 1px !default; -$modal-content-box-shadow-xs: none; -$modal-content-box-shadow-sm-up: none; - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: 0.5 !default; -$modal-header-border-color: $border-color-dark !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 12px !default; - -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; - -$modal-transition: transform 0.3s ease-out !default; - -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; - -// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss - -@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { - $min: breakpoint-min($name, $breakpoints); - - @if $min { - @media (min-width: $min) { - @content; - } - } @else { - @content; - } -} - -@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { - $min: map-get($breakpoints, $name); - @return if($min != 0, $min, null); -} - -// Custom Added CSS animations - -@keyframes modalshow { - 0% { - opacity: 0; - transform: translate(0, -25%); - } - - 100% { - opacity: 1; - transform: translate(0, 0); - } -} - -@keyframes backdropshow { - 0% { - opacity: 0; - } - - 100% { - opacity: $modal-backdrop-opacity; - } -} - -// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss - -// .modal-open - body class for killing the scroll -// .modal - container to scroll within -// .modal-dialog - positioning shell for the actual modal -// .modal-content - actual modal w/ bg and corners and stuff - -// Kill the scroll on the body -.modal-open { - overflow: hidden; -} - -// Container that the modal scrolls within -.modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $zindex-modal; - //display: none; - overflow: hidden; - // Prevent Chrome on Windows from adding a focus outline. For details, see - // https://github.com/twbs/bootstrap/pull/10951. - outline: 0; - // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a - // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 - // See also https://github.com/twbs/bootstrap/issues/17695 - .modal-open & { - overflow-x: hidden; - overflow-y: auto; - } -} - -// Shell div to position the modal with bottom padding -.modal-dialog { - position: relative; - width: auto; - margin: $modal-dialog-margin; - // allow clicks to pass through for custom click handling to close modal - pointer-events: none; - // When fading in the modal, animate it to slide down - .modal.fade & { - //@include transition($modal-transition); - //transform: translate(0, -25%); - animation: modalshow 0.3s ease-in; - } - //.modal.show & { - // transform: translate(0, 0); - //} - transform: translate(0, 0); -} - -.modal-dialog-centered { - display: flex; - align-items: center; - min-height: calc(100% - (#{$modal-dialog-margin} * 2)); -} - -// Actual modal -.modal-content { - position: relative; - display: flex; - flex-direction: column; - width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` - // counteract the pointer-events: none; in the .modal-dialog - pointer-events: auto; - //background-color: $modal-content-bg; - background-clip: padding-box; - border: $modal-content-border-width solid $modal-content-border-color; - //@include border-radius($border-radius-lg); - //@include box-shadow($modal-content-box-shadow-xs); - border-radius: $border-radius-lg; - box-shadow: $modal-content-box-shadow-xs; - // Remove focus outline from opened modal - outline: 0; - - @include themify($themes) { - background-color: themed("backgroundColorAlt"); - } -} - -// Modal background -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $zindex-modal-backdrop; - background-color: $modal-backdrop-bg; - // Fade for backdrop - &.fade { - //opacity: 0; - animation: backdropshow 0.1s ease-in; - } - //&.show { - // opacity: $modal-backdrop-opacity; - //} - opacity: $modal-backdrop-opacity; -} - -// Modal header -// Top section of the modal w/ title and dismiss -.modal-header { - display: flex; - align-items: flex-start; // so the close btn always stays on the upper right corner - justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends - padding: $modal-header-padding $modal-inner-padding; - border-bottom: $modal-header-border-width solid $modal-header-border-color; - //@include border-top-radius($border-radius-lg); - - @include themify($themes) { - border-bottom-color: themed("borderColor"); - } - - .close { - padding: $modal-header-padding $modal-inner-padding; - // auto on the left force icon to the right even when there is no .modal-title - margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto; - } - - h5 { - font-size: $font-size-base; - font-weight: bold; - display: flex; - align-items: center; - - .bwi { - margin-right: 5px; - } - } -} - -// Title text within header -.modal-title { - margin-bottom: 0; - line-height: $modal-title-line-height; -} - -// Modal body -// Where all modal content resides (sibling of .modal-header and .modal-footer) -.modal-body { - position: relative; - // Enable `flex-grow: 1` so that the body take up as much space as possible - // when should there be a fixed height on `.modal-dialog`. - flex: 1 1 auto; - padding: $modal-inner-padding; -} - -// Footer (for actions) -.modal-footer { - display: flex; - align-items: center; // vertically center - //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items - padding: $modal-inner-padding; - border-top: $modal-footer-border-width solid $modal-footer-border-color; - - @include themify($themes) { - border-top-color: themed("borderColor"); - } - - // Easily place margin between footer elements - button { - margin-right: 10px; - - &:last-child { - margin-right: 0; - } - } - - .right { - margin-left: auto; - display: flex; - } -} - -// Measure scrollbar width for padding body during modal show/hide -.modal-scrollbar-measure { - position: absolute; - top: -9999px; - width: 50px; - height: 50px; - overflow: scroll; -} - -// Scale up the modal -@include media-breakpoint-up(sm) { - // Automatically set modal's width for larger viewports - .modal-dialog { - max-width: $modal-md; - margin: $modal-dialog-margin-y-sm-up auto; - } - - .modal-dialog-centered { - min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2)); - } - - .modal-content { - //@include box-shadow($modal-content-box-shadow-sm-up); - box-shadow: $modal-content-box-shadow-sm-up; - } - - .modal-sm { - max-width: $modal-sm; - } -} - -@include media-breakpoint-up(lg) { - .modal-lg { - max-width: $modal-lg; - } -} - -// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss - -.close { - float: right; - font-size: $close-font-size; - font-weight: $close-font-weight; - line-height: 1; - color: $close-color; - text-shadow: $close-text-shadow; - opacity: 0.5; - - &:hover, - &:focus { - color: $close-color; - text-decoration: none; - opacity: 0.75; - } - // Opinionated: add "hand" cursor to non-disabled .close elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } -} - -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - -// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type -button.close { - padding: 0; - background-color: transparent; - border: 0; - -webkit-appearance: none; -} -// stylelint-enable - -// box - -.modal-content .box { - margin-top: 20px; - - &:first-child { - margin-top: 0; - } -} diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss index 2fd903fedc7..4c2daab2159 100644 --- a/apps/browser/src/popup/scss/pages.scss +++ b/apps/browser/src/popup/scss/pages.scss @@ -1,61 +1,5 @@ @import "variables.scss"; -app-sync { - main { - .btn { - margin-bottom: 10px; - } - } -} - -app-generator .generated-block { - font-size: $font-size-large; - font-family: $font-family-monospace; - margin: 8px; - padding: 8px 10px 8px 0; - display: flex; - border-radius: $border-radius; - border: 1px solid; - - @include themify($themes) { - background-color: transparent; - border-color: themed("borderColorAlt"); - } - - .generated-wrapper { - text-align: left; - width: 100%; - min-width: 0; - white-space: pre-wrap; - word-break: break-all; - padding: 15px; - border-radius: $border-radius; - - @include themify($themes) { - background-color: themed("backgroundColor"); - } - } - - .action-buttons { - display: flex; - align-self: center; - height: 100%; - margin-left: 10px; - - button { - padding: 6px; - margin: 2px; - border-radius: $border-radius; - - &:hover { - @include themify($themes) { - background-color: themed("hoverColorTransparent"); - } - } - } - } -} - app-home { position: fixed; height: 100%; @@ -148,29 +92,6 @@ body.body-full { margin: 15px 0 15px 0; } -app-options { - .box { - margin: 10px 0; - - & + .box { - margin-top: 10px; - } - } -} - -app-vault-view, -app-vault-add-edit, -app-generator, -app-vault-attachments { - .box { - margin: 15px 0 25px 0; - - & + .box { - margin-top: 25px; - } - } -} - .useBrowserlink { margin-left: 5px; margin-top: 20px; @@ -216,169 +137,3 @@ app-vault-attachments { margin-bottom: 0; } } - -app-fido2-v1 { - .auth-wrapper { - display: flex; - flex-direction: column; - padding: 12px 24px 12px 24px; - - .auth-header { - display: flex; - justify-content: space-between; - align-items: center; - - .left { - padding-right: 10px; - - .logo { - display: inline-flex; - align-items: center; - - i.bwi { - font-size: 35px; - margin-right: 3px; - @include themify($themes) { - color: themed("primaryColor"); - } - } - - span { - font-size: 45px; - font-weight: 300; - margin-top: -3px; - @include themify($themes) { - color: themed("primaryColor"); - } - } - } - } - - .search { - padding: 7px 10px; - width: 100%; - text-align: left; - position: relative; - display: flex; - - .bwi { - position: absolute; - top: 15px; - left: 20px; - - @include themify($themes) { - color: themed("labelColor"); - } - } - - input { - width: 100%; - margin: 0; - border: none; - padding: 5px 10px 5px 30px; - border-radius: $border-radius; - - &:focus { - border-radius: $border-radius; - outline: none; - } - - &[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; - appearance: none; - background-repeat: no-repeat; - mask-image: none; - -webkit-mask-image: none; - } - } - } - } - - .auth-flow { - display: flex; - align-items: flex-start; - flex-direction: column; - margin-top: 32px; - - .subtitle { - font-family: "DM Sans"; - font-size: 24px; - font-style: normal; - font-weight: 600; - line-height: 32px; - } - - .box.list { - overflow-y: auto; - } - - .box-content { - max-height: 140px; - } - - @media screen and (min-height: 501px) and (max-height: 600px) { - .box-content { - max-height: 200px; - } - } - - @media screen and (min-height: 601px) { - .box-content { - max-height: 260px; - } - } - - .box-content-row { - display: flex; - justify-content: center; - align-items: center; - margin: 0px; - padding: 0px; - margin-bottom: 12px; - - button { - min-height: 44px; - } - - .row-main { - border-radius: 6px; - padding: 5px 0px 5px 12px; - - &:focus { - @include themify($themes) { - padding: 3px 0px 3px 10px; - border: 2px solid themed("headerInputBackgroundFocusColor"); - } - } - - &.row-selected { - @include themify($themes) { - outline: none; - padding-left: 7px; - border-left: 5px solid themed("primaryColor"); - background-color: themed("headerBackgroundHoverColor"); - color: themed("headerColor"); - } - } - } - - .row-main-content { - display: flex; - flex-direction: column; - justify-content: center; - - .detail { - min-height: 15px; - display: block; - } - } - } - - .btn { - width: 100%; - font-size: 16px; - font-weight: 600; - } - } - } -} diff --git a/apps/browser/src/popup/scss/popup.scss b/apps/browser/src/popup/scss/popup.scss index 8dc2c206f87..9bec001c936 100644 --- a/apps/browser/src/popup/scss/popup.scss +++ b/apps/browser/src/popup/scss/popup.scss @@ -7,7 +7,6 @@ @import "box.scss"; @import "buttons.scss"; @import "misc.scss"; -@import "modal.scss"; @import "environment.scss"; @import "pages.scss"; @import "plugins.scss";