aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/styles/components/chip.scss
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/web-shared/src/styles/components/chip.scss')
-rw-r--r--old-apps/web-shared/src/styles/components/chip.scss117
1 files changed, 0 insertions, 117 deletions
diff --git a/old-apps/web-shared/src/styles/components/chip.scss b/old-apps/web-shared/src/styles/components/chip.scss
deleted file mode 100644
index 1bb93db..0000000
--- a/old-apps/web-shared/src/styles/components/chip.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-@use '../base' as *;
-
-/* --------------------------------
-
-File#: _1_chips
-Title: Chips
-Descr: A list of compact pieces of information
-Usage: codyhouse.co/license
-
--------------------------------- */
-
-.chip {
- /* reset - in case the class is applied to a <button> or an <a> */
- border: 0;
- color: inherit;
- line-height: 1;
- appearance: none;
-
- display: inline-flex;
- align-items: center;
- border-radius: var(--radius-sm);
-
- background-color: alpha(var(--color-contrast-higher), 0.1);
- padding: var(--space-xxxs) 0;
-}
-
-.chip--outline {
- background-color: transparent;
- box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-higher), 0.25);
-}
-
-.chip--error {
- background-color: alpha(var(--color-error), 0.2);
- color: var(--color-contrast-higher);
-}
-
-.chip--success {
- background-color: alpha(var(--color-success), 0.2);
- color: var(--color-contrast-higher);
-}
-
-.chip--warning {
- background-color: alpha(var(--color-warning), 0.2);
- color: var(--color-contrast-higher);
-}
-
-.chip--interactive {
- cursor: pointer;
-
- &:hover {
- background-color: alpha(var(--color-contrast-higher), 0.2);
- }
-
- &:focus {
- outline: none;
- box-shadow: 0 0 0 3px alpha(var(--color-contrast-higher), 0.3);
- }
-
- &:focus:not(:focus-visible) {
- box-shadow: none;
- }
-}
-
-.chip__label {
- padding: 0 var(--space-xxs);
-}
-
-.chip__img {
- display: block;
- width: 1.5em;
- height: 1.5em;
- border-radius: 50%;
- object-fit: cover;
-}
-
-.chip__icon-wrapper {
- display: flex;
- width: 1.5em;
- height: 1.5em;
- border-radius: 50%;
- background-color: alpha(var(--color-contrast-higher), 0.95);
- color: var(--color-bg); /* icon color */
-
- .icon {
- display: block;
- margin: auto;
- }
-}
-
-.chip__btn {
- @include reset;
- display: flex;
- width: 1em;
- height: 1em;
- background-color: alpha(var(--color-contrast-higher), 0.2);
- border-radius: 50%;
- cursor: pointer;
- margin-right: 7px;
-
- .icon {
- display: block;
- margin: 0 auto;
- }
-
- &:hover {
- background-color: alpha(var(--color-contrast-higher), 0.3);
- }
-
- &:focus {
- outline: none;
- box-shadow: 0 0 0 2px alpha(var(--color-contrast-higher), 0.5);
- }
-
- &:focus:not(:focus-visible) {
- box-shadow: none;
- }
-}