@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.css

@@ -55,6 +55,7 @@
   --border-radius: 4px;
   display: inline-block;
   vertical-align: middle;
+  position: relative;
 }
 :host button, :host a {
   outline: none;
@@ -69,31 +70,40 @@
   cursor: pointer;
   transition: background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;
   border-radius: var(--border-radius);
+  position: relative;
   background-color: transparent;
   border-width: 0px;
-  border-color: transparent;
-  padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
-  min-height: calc(var(--base-spacing) * 13px);
-  min-width: calc(var(--base-spacing) * 13px);
+  border: 2px solid transparent;
 }
-:host button:not(.disabled):not(.isLoading):hover .label, :host a:not(.disabled):not(.isLoading):hover .label {
-  color: var(--color-light);
+:host button:focus, :host a:focus {
+  outline: 2px solid #6EA8FF;
 }
-:host button:not(.disabled):not(.isLoading):hover cura-icon, :host a:not(.disabled):not(.isLoading):hover cura-icon {
-  --color: var(--color-light) !important;
+:host button.large, :host a.large {
+  padding: calc(var(--base-spacing) * 6.12px) calc(var(--base-spacing) * 9.96px);
+  min-height: calc(var(--base-spacing) * 13px);
+  min-width: calc(var(--base-spacing) * 33.7px);
 }
-:host button:not(.disabled):not(.inverted):not(.isLoading):active .label, :host a:not(.disabled):not(.inverted):not(.isLoading):active .label {
-  color: var(--color-dark);
+:host button.medium, :host a.medium {
+  padding: calc(var(--base-spacing) * 3.44px) calc(var(--base-spacing) * 9.96px);
+  min-height: calc(var(--base-spacing) * 11px);
+  min-width: calc(var(--base-spacing) * 29.95px);
 }
-:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon, :host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon {
-  --color: var(--color-dark) !important;
+:host button.small, :host a.small {
+  padding: calc(var(--base-spacing) * 3.24px) calc(var(--base-spacing) * 7.44px);
+  min-height: calc(var(--base-spacing) * 8px);
+  min-width: calc(var(--base-spacing) * 21.67px);
 }
-:host button.medium, :host a.medium {
+:host button:not(.isLoading).large, :host a:not(.isLoading).large {
+  padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 13px);
+  min-width: calc(var(--base-spacing) * 13px);
+}
+:host button:not(.isLoading).medium, :host a:not(.isLoading).medium {
   padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
   min-height: calc(var(--base-spacing) * 11px);
   min-width: calc(var(--base-spacing) * 11px);
 }
-:host button.small, :host a.small {
+:host button:not(.isLoading).small, :host a:not(.isLoading).small {
   padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
   min-height: calc(var(--base-spacing) * 8px);
   min-width: calc(var(--base-spacing) * 8px);
@@ -103,26 +113,23 @@
   align-items: center;
   opacity: 1;
   transition: opacity 0.2s linear;
+  position: relative;
 }
 :host button.icon-right .button-container, :host a.icon-right .button-container {
   flex-direction: row-reverse;
 }
-:host button .label, :host a .label {
+:host button cura-label, :host a cura-label {
   flex: 1;
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
   font-size: 1.43em;
   line-height: 1.2em;
   text-align: var(--text-align, "left");
-  color: var(--color-base);
-}
-:host button .label.inverted, :host a .label.inverted {
-  color: var(--neutral-white);
 }
-:host button.medium .label, :host a.medium .label {
+:host button.medium cura-label, :host a.medium cura-label {
   font-size: 1.14em;
 }
-:host button.small .label, :host a.small .label {
+:host button.small cura-label, :host a.small cura-label {
   font-size: 1em;
 }
 :host button.icon-left cura-icon, :host a.icon-left cura-icon {
@@ -145,27 +152,11 @@
 }
 :host button.disabled, :host a.disabled {
   cursor: not-allowed;
-  border-color: var(--neutral-base);
-}
-:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted {
-  color: var(--neutral-dark);
-}
-:host button.disabled.inverted, :host a.disabled.inverted {
-  opacity: 0.6;
-}
-:host button.disabled.inverted .label, :host button.disabled.inverted .label.inverted, :host a.disabled.inverted .label, :host a.disabled.inverted .label.inverted {
-  color: var(--neutral-white);
-}
-:host button.disabled.inverted cura-icon, :host a.disabled.inverted cura-icon {
-  --color: var(--neutral-white) !important;
-}
-:host button.disabled.inverted cura-loader-circle, :host a.disabled.inverted cura-loader-circle {
-  --color: var(--neutral-white) !important;
 }
 :host button.icon-only, :host a.icon-only {
   padding: calc(var(--base-spacing) * 3.5px);
 }
-:host button.icon-only .label, :host a.icon-only .label {
+:host button.icon-only cura-label, :host a.icon-only cura-label {
   display: none;
 }
 :host button.icon-only cura-icon, :host a.icon-only cura-icon {
@@ -178,18 +169,6 @@
 :host button.icon-only.small, :host a.icon-only.small {
   padding: calc(var(--base-spacing) * 1.5px);
 }
-:host button.inverted:not(.isLoading):not(.disabled):hover .label, :host a.inverted:not(.isLoading):not(.disabled):hover .label {
-  color: var(--color-lighter);
-}
-:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon, :host a.inverted:not(.isLoading):not(.disabled):hover cura-icon {
-  --color: var(--color-lighter) !important;
-}
-:host button.inverted:not(.isLoading):not(.disabled):active .label, :host a.inverted:not(.isLoading):not(.disabled):active .label {
-  color: var(--color-light);
-}
-:host button.inverted:not(.isLoading):not(.disabled):active cura-icon, :host a.inverted:not(.isLoading):not(.disabled):active cura-icon {
-  --color: var(--color-light) !important;
-}
 :host button cura-loader-circle, :host a cura-loader-circle {
   position: absolute;
   display: none;
@@ -205,4 +184,7 @@
 }
 :host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle {
   display: block;
+}
+:host button.isLoading cura-label, :host a.isLoading cura-label {
+  display: none;
 }