@innovaccer/design-system 2.5.0 → 2.7.0-0

package/css/src/components/placeholder.css

@@ -1,9 +1,9 @@
 @keyframes shimmer {
-  0%{
-    background-position: -500px 0
+  0% {
+    background-position: -500px 0;
   }
-  100%{
-    background-position: 500px 0
+  100% {
+    background-position: 500px 0;
   }
 }
 
@@ -15,7 +15,12 @@
   animation-name: shimmer;
   animation-timing-function: linear;
   background: var(--secondary-lightest);
-  background: linear-gradient(to right, var(--secondary-lighter) 8%, var(--secondary-dark) 18%, var(--secondary-lighter) 33%);
+  background: linear-gradient(
+    to right,
+    var(--secondary-lighter) 8%,
+    var(--secondary-dark) 18%,
+    var(--secondary-lighter) 33%
+  );
   background-size: 1000px 104px;
 }
 

package/css/src/components/popover.css

@@ -11,7 +11,7 @@
   color: var(--white);
 }
 
-.Popover[data-hide="true"] {
+.Popover[data-hide='true'] {
   visibility: hidden;
   pointer-events: none;
-}
+}

package/css/src/components/progressRing.css

@@ -23,4 +23,4 @@
 .Ring-indicator {
   stroke: var(--primary);
   transition: stroke-dashOffset 200ms;
-}
+}

package/css/src/components/radio.css

@@ -1,137 +1,137 @@
 /* Radio */
 
 .Radio {
-    display: flex;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    padding-top: var(--spacing-s);
-    padding-bottom: var(--spacing-s);
+  display: flex;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
 }
 
 .Radio-outerWrapper {
-    position: relative;
-    flex-shrink: 0;
-    margin-top: var(--spacing-s);
+  position: relative;
+  flex-shrink: 0;
+  margin-top: var(--spacing-s);
 }
 
 .Radio-outerWrapper--regular {
-    height: var(--spacing-2);
-    width: var(--spacing-2);
+  height: var(--spacing-2);
+  width: var(--spacing-2);
 }
 
 .Radio-outerWrapper--tiny {
-    height: var(--spacing-l);
-    width: var(--spacing-l);
+  height: var(--spacing-l);
+  width: var(--spacing-l);
 }
 
 .Radio-input {
-    opacity: 0;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 2;
-    margin: 0;
-    cursor: pointer;
+  opacity: 0;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 2;
+  margin: 0;
+  cursor: pointer;
 }
 
 .Radio-labelWrapper {
-    padding-left: var(--spacing);
-    display: flex;
-    flex-direction: column;
+  padding-left: var(--spacing);
+  display: flex;
+  flex-direction: column;
 }
 
-.Radio-Label{
-    display: flex;
-    cursor: pointer;
+.Radio-Label {
+  display: flex;
+  cursor: pointer;
 }
 
 .Radio-wrapper {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    border: var(--border);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    z-index: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  border: var(--border);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  z-index: 1;
 }
 
 .Radio--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Radio:hover .Radio-wrapper {
-    border: var(--spacing-xs) solid var(--inverse-lightest);
+  border: var(--spacing-xs) solid var(--inverse-lightest);
 }
 
 .Radio:active .Radio-wrapper {
-    background-color: var(--secondary-light);
-    border: var(--spacing-xs) solid var(--inverse-lightest);
+  background-color: var(--secondary-light);
+  border: var(--spacing-xs) solid var(--inverse-lightest);
 }
 
 .Radio--disabled .Radio-wrapper {
-    border: var(--spacing-xs) solid var(--secondary-light);
-    background-color: var(--secondary-lightest);
+  border: var(--spacing-xs) solid var(--secondary-light);
+  background-color: var(--secondary-lightest);
 }
 
-.Radio-input:checked~.Radio-wrapper {
-    border: var(--spacing-xs) solid var(--primary);
+.Radio-input:checked ~ .Radio-wrapper {
+  border: var(--spacing-xs) solid var(--primary);
 }
 
-.Radio-input:checked~.Radio-wrapper:focus {
-    border: var(--spacing-xs) solid var(--primary-dark);
+.Radio-input:checked ~ .Radio-wrapper:focus {
+  border: var(--spacing-xs) solid var(--primary-dark);
 }
 
-.Radio-input:checked~.Radio-wrapper:after {
-    display: block;
+.Radio-input:checked ~ .Radio-wrapper:after {
+  display: block;
 }
 
 .Radio-wrapper:after {
-    content: "";
-    display: none;
-    border-radius: 50%;
-    background: var(--primary);
+  content: '';
+  display: none;
+  border-radius: 50%;
+  background: var(--primary);
 }
 
 .Radio-wrapper--regular:after {
-    width: var(--spacing);
-    height: var(--spacing);
+  width: var(--spacing);
+  height: var(--spacing);
 }
 
 .Radio-wrapper--tiny:after {
-    width: var(--spacing-m);
-    height: var(--spacing-m); 
-    border: var(--spacing-xs) solid var(--primary);
+  width: var(--spacing-m);
+  height: var(--spacing-m);
+  border: var(--spacing-xs) solid var(--primary);
 }
 
-.Radio-outerWrapper:hover .Radio-input:checked~.Radio-wrapper{
-    border: var(--spacing-xs) solid var(--primary-dark);
+.Radio-outerWrapper:hover .Radio-input:checked ~ .Radio-wrapper {
+  border: var(--spacing-xs) solid var(--primary-dark);
 }
 
-.Radio:hover .Radio-input:checked~.Radio-wrapper:after{
-    background: var(--primary-dark);
+.Radio:hover .Radio-input:checked ~ .Radio-wrapper:after {
+  background: var(--primary-dark);
 }
 
-.Radio:active .Radio-input:checked~.Radio-wrapper{
-    background: var(--white);
-    border: var(--spacing-xs) solid var(--primary-darker);
+.Radio:active .Radio-input:checked ~ .Radio-wrapper {
+  background: var(--white);
+  border: var(--spacing-xs) solid var(--primary-darker);
 }
 
-.Radio-outerWrapper:active .Radio-input:checked~.Radio-wrapper:after{
-    background: var(--primary-darker);
+.Radio-outerWrapper:active .Radio-input:checked ~ .Radio-wrapper:after {
+  background: var(--primary-darker);
 }
 
-.Radio--disabled .Radio-input:checked~.Radio-wrapper {
-    border: var(--spacing-xs) solid var(--primary-lighter);
-    background-color: var(--white);
+.Radio--disabled .Radio-input:checked ~ .Radio-wrapper {
+  border: var(--spacing-xs) solid var(--primary-lighter);
+  background-color: var(--white);
 }
 
-.Radio--disabled .Radio-input:checked~.Radio-wrapper:after {
-    background: var(--primary-lighter);
+.Radio--disabled .Radio-input:checked ~ .Radio-wrapper:after {
+  background: var(--primary-lighter);
 }

package/css/src/components/slider.css

@@ -1,4 +1,3 @@
-
 .Slider {
   width: 100%;
 }
@@ -38,15 +37,15 @@
 
 .Slider-label {
   margin-top: var(--spacing-m);
-  -webkit-transform: translate(-50%,0px);
-  transform: translate(-50%,0px);
+  -webkit-transform: translate(-50%, 0px);
+  transform: translate(-50%, 0px);
   display: flex;
   align-items: center;
   flex-direction: column;
   position: absolute;
   user-select: none;
   -moz-user-select: none;
-  -ms-user-select: none;        
+  -ms-user-select: none;
 }
 
 .Slider-ticks {
@@ -92,7 +91,8 @@
   border: var(--border);
 }
 
-.Slider-handle:focus, .Slider-handle:active {
+.Slider-handle:focus,
+.Slider-handle:active {
   border: var(--spacing-s) solid var(--primary);
 }
 

package/css/src/components/statusHints.css

@@ -1,34 +1,34 @@
 .StatusHint {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: fit-content;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
 }
 
 .StatusHint-icon {
-    flex-shrink: 0;
-    border-radius: 50%;
-    height: var(--spacing);
-    width: var(--spacing);
-    margin-right: var(--spacing);
+  flex-shrink: 0;
+  border-radius: 50%;
+  height: var(--spacing);
+  width: var(--spacing);
+  margin-right: var(--spacing);
 }
 
 .StatusHint--alert {
-    background: var(--alert);
+  background: var(--alert);
 }
 
 .StatusHint--success {
-    background: var(--success);
+  background: var(--success);
 }
 
 .StatusHint--warning {
-    background: var(--warning);
+  background: var(--warning);
 }
 
 .StatusHint--info {
-    background: var(--primary);
+  background: var(--primary);
 }
 
 .StatusHint--default {
-    background: var(--secondary);
-}
+  background: var(--secondary);
+}

package/css/src/components/switch.css

@@ -1,85 +1,110 @@
 .Switch {
-    display: inline-flex;
-    position: relative;
+  display: inline-flex;
+  position: relative;
 }
 
 .Switch--tiny {
-    height: var(--spacing-2);
-    width: var(--spacing-3);
+  height: var(--spacing-2);
+  width: var(--spacing-3);
 }
 
 .Switch--regular {
-    height: var(--spacing-xl);
-    width: var(--spacing-4);
+  height: var(--spacing-xl);
+  width: var(--spacing-4);
 }
 
 .Switch--large {
-    height: var(--spacing-3);
-    width: var(--spacing-5);
+  height: var(--spacing-3);
+  width: var(--spacing-5);
 }
 
 .Switch-input {
-    position: absolute;
-    cursor: pointer;
-    z-index: 10;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
+  position: absolute;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }
 
 .Switch-wrapper {
-    display: flex;
-    align-items: center;
-    line-height: 100%;
-    padding: var(--spacing-xs);
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--secondary-light);
+  display: flex;
+  align-items: center;
+  line-height: 100%;
+  padding: var(--spacing-s);
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--secondary-light);
+}
+
+.Switch-input:focus ~ .Switch-wrapper {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.Switch-input:focus ~ .Switch-wrapper--checked {
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.Switch-input:hover ~ .Switch-wrapper {
+  background-color: var(--secondary-light);
+  box-shadow: var(--shadow-s);
+}
+
+.Switch-input:hover ~ .Switch-wrapper--checked {
+  background-color: var(--primary-dark);
+  box-shadow: var(--shadow-s);
+}
+
+.Switch-input:active ~ .Switch-wrapper {
+  background-color: var(--secondary-dark);
+}
+
+.Switch-input:active ~ .Switch-wrapper--checked {
+  background-color: var(--primary-darker);
 }
 
 .Switch-wrapper--tiny {
-    border-radius: 10px;
+  border-radius: 10px;
 }
 
 .Switch-wrapper--regular {
-    border-radius: 34px;
+  border-radius: 34px;
 }
 
 .Switch-wrapper--large {
-    border-radius: 38px;
+  border-radius: 38px;
 }
 
 .Switch-wrapper:before {
-    content: "";
-    height: 100%;
-    width: 50%;
-    background-color: var(--shadow-0);
-    box-shadow: 0 0 var(--spacing-xs) 0 var(--shadow-20);
-    border-radius: 50%;
-    box-sizing: border-box;
+  content: '';
+  height: 100%;
+  width: 50%;
+  background-color: var(--shadow-0);
+  box-shadow: 0 0 var(--spacing-xs) 0 var(--shadow-20);
+  border-radius: 50%;
+  box-sizing: border-box;
 }
 
 .Switch-wrapper--checked {
-    background-color: var(--primary);
+  background-color: var(--primary);
 }
 
 .Switch-wrapper--checked:before {
-    -webkit-transform: translateX(100%);
-    -ms-transform: translateX(100%);
-    transform: translateX(100%);
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
 }
 
 .Switch--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Switch-wrapper--disabled:before {
-    background-color: var(--secondary-lightest);
+  background-color: var(--secondary-lightest);
 }
 
 .Switch-wrapper--checkedDisabled {
-    background-color: var(--primary-lighter);
+  background-color: var(--primary-lighter);
 }

package/css/src/components/table.css

@@ -1,22 +1,22 @@
 .Table {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
 }
 
 .Table-grid {
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
 }
 
 .Table-pagination {
-    display: flex;
-    justify-content: center;
-    background: var(--white);
-    padding: var(--spacing) 0;
-    border-top: var(--border);
-}
+  display: flex;
+  justify-content: center;
+  background: var(--white);
+  padding: var(--spacing) 0;
+  border-top: var(--border);
+}