diff --git a/src/popup2/vault/ciphers.component.html b/src/popup2/vault/ciphers.component.html index 03746ff1aa4..bfb79a52443 100644 --- a/src/popup2/vault/ciphers.component.html +++ b/src/popup2/vault/ciphers.component.html @@ -11,13 +11,22 @@
-
+
+ + +

{{'noItemsInList' | i18n}}

+ +
+
{{groupingTitle}} @@ -28,13 +37,5 @@ (onSelected)="selectCipher($event)">
-
- - - -

{{'noItemsInList' | i18n}}

- -
-
diff --git a/src/popup2/vault/ciphers.component.ts b/src/popup2/vault/ciphers.component.ts index 09b61c1408c..ea2bdb704f0 100644 --- a/src/popup2/vault/ciphers.component.ts +++ b/src/popup2/vault/ciphers.component.ts @@ -37,6 +37,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On groupingTitle: string; searchText: string; state: any; + showAdd = true; constructor(cipherService: CipherService, private route: ActivatedRoute, private router: Router, private location: Location, @@ -82,6 +83,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On } await super.load((c) => c.folderId === folderId); } else if (params.collectionId) { + this.showAdd = false; this.searchPlaceholder = this.i18nService.t('searchCollection'); const collection = await this.collectionService.get(params.collectionId); if (collection != null) { diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss new file mode 100644 index 00000000000..9f5368a4f26 --- /dev/null +++ b/src/scss/buttons.scss @@ -0,0 +1,58 @@ +@import "variables.scss"; + +.btn { + background-color: $button-backgound-color; + border-radius: $border-radius; + padding: 7px 15px; + border: 1px solid $button-border-color; + font-size: $font-size-base; + color: $button-color; + white-space: nowrap; + text-align: center; + cursor: pointer; + + &.primary { + color: $button-color-primary; + } + + &.danger { + color: $button-color-danger; + } + + &:hover:not([disabled]) { + cursor: pointer; + background-color: darken($button-backgound-color, 1.5%); + border-color: darken($button-border-color, 17%); + color: darken($button-color, 10%); + + &.primary { + color: darken($button-color-primary, 6%); + } + + &.danger { + color: darken($button-color-danger, 6%); + } + } + + &:focus:not([disabled]) { + cursor: pointer; + background-color: darken($button-backgound-color, 6%); + border-color: darken($button-border-color, 25%); + outline: 0; + } + + &[disabled] { + opacity: 0.65; + cursor: default; + } + + &.block { + display: block; + width: 100%; + } + + &.link { + border: none !important; + background: none !important; + } +} diff --git a/src/scss/popup.scss b/src/scss/popup.scss index bea0361e203..cafa4d1c0f5 100644 --- a/src/scss/popup.scss +++ b/src/scss/popup.scss @@ -2,6 +2,7 @@ @import "variables.scss"; @import "base.scss"; @import "box.scss"; +@import "buttons.scss"; @import "misc.scss"; @import "plugins.scss"; @import "environment.scss";