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}}
+
+ {{'addItem' | i18n}}
+
+
+
0">
-
-
-
-
- {{'noItemsInList' | i18n}}
- {{'addItem' | 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";