@innovaccer/design-system 2.5.0 → 2.7.0-0

package/css/src/components/calendar.css

@@ -1,248 +1,259 @@
 /* calendar */
 
 .Calendar-wrapper {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .Calendar {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
 }
 
 .Calendar--small {
-    padding: var(--spacing-l);
-    padding-bottom: var(--spacing);
-    width: 212px;
+  padding: var(--spacing-l);
+  padding-bottom: var(--spacing);
+  width: 212px;
 }
 
-.Calendar--date--small{
-    height: 248px;
+.Calendar--date--small {
+  height: 248px;
 }
 
-.Calendar--month--small{
-    height: 208px;
+.Calendar--month--small {
+  height: 192px;
 }
 
-.Calendar--year--small{
-    height: 208px;
+.Calendar--year--small {
+  height: 192px;
 }
 
 .Calendar--large {
-    padding-top: var(--spacing-2);
-    padding-left: var(--spacing-2);
-    padding-right: var(--spacing-2);
-    padding-bottom: var(--spacing-l);
-    width: 316px;
+  padding-top: var(--spacing-2);
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+  padding-bottom: var(--spacing-l);
+  width: 316px;
 }
 
-.Calendar--date--large{
-    height: 324px;
+.Calendar--date--large {
+  height: 324px;
 }
 
-.Calendar--month--large{
-    height: 274px;
+.Calendar--month--large {
+  height: 272px;
 }
 
-.Calendar--year--large{
-    height: 274px;
+.Calendar--year--large {
+  height: 272px;
 }
 
 .Calendar-header--large {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-bottom: var(--spacing-l);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: var(--spacing-l);
 }
 
 .Calendar-header--small {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-bottom: var(--spacing-m);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: var(--spacing-m);
 }
 
 .Calendar-headerIcon {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    user-select: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
 }
 
 .Calendar-headerIcon--prev {
-    left: 0;
+  left: 0;
 }
 
 .Calendar-headerIcon--next {
-    right: 0;
+  right: 0;
 }
 
 .Calendar-headerContent {
-    display: flex;
-    white-space: nowrap;
-    cursor: pointer;
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
-    user-select: none;
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
+  user-select: none;
 }
 
 .Calendar-body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-around;
 }
 
 .Calendar-valueRow {
-    display: flex;
-    justify-content: space-around;
-    padding-top: var(--spacing-s);
-    padding-bottom: var(--spacing-s);
+  display: flex;
+  justify-content: space-between;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
 }
 
 .Calendar-valueWrapper {
-    display: inline-flex;
-    flex: 1 0 0;
-    justify-content: center;
-    position: relative;
+  display: inline-flex;
+  flex: 1 0 0;
+  justify-content: center;
+  position: relative;
 }
 
 .Calendar-valueWrapper--inRange {
-    background: var(--primary-lightest);
+  background: var(--primary-lightest);
 }
 
 .Calendar-valueWrapper--inRangeError {
-    background: var(--alert-lightest);
+  background: var(--alert-lightest);
 }
 
 .Calendar-valueWrapper--start {
-    background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
-    border-radius: var(--spacing-m) 0 0 var(--spacing-m);
+  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+  border-radius: var(--spacing-m) 0 0 var(--spacing-m);
 }
 
 .Calendar-valueWrapper--startError {
-    background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);
+  background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);
 }
 
 .Calendar-valueWrapper--end {
-    background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
-    border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
+  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
 }
 
 .Calendar-valueWrapper--endError {
-    background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
+  background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
 }
 
 .Calendar-valueWrapper--startEnd {
-    background: transparent;
+  background: transparent;
 }
 
 .Calendar-value {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-    user-select: none;
-    border-radius: var(--spacing-m);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--spacing-m);
 }
 
 .Calendar-value:hover {
-    background: var(--secondary);
+  background: var(--secondary);
 }
 
-.Calendar-value--start:hover, .Calendar-value--end:hover {
-    background: var(--primary-lightest);
+.Calendar-value--start:hover,
+.Calendar-value--end:hover {
+  background: var(--primary-lightest);
 }
 
-.Calendar-value--startError:hover, .Calendar-value--endError:hover {
-    background: var(--alert-lightest);
+.Calendar-value--startError:hover,
+.Calendar-value--endError:hover {
+  background: var(--alert-lightest);
 }
 
-.Calendar-value--start, .Calendar-value--end {
-    background: var(--primary-lightest);
+.Calendar-value--start,
+.Calendar-value--end {
+  background: var(--primary-lightest);
 }
 
-.Calendar-value--startError, .Calendar-value--endError {
-    background: var(--alert-lightest);
+.Calendar-value--startError,
+.Calendar-value--endError {
+  background: var(--alert-lightest);
 }
 
-.Calendar-value--currDateMonthYear, .Calendar-value--currDateMonthYear:hover {
-    background: var(--primary-lightest) !important;
+.Calendar-value--currDateMonthYear,
+.Calendar-value--currDateMonthYear:hover {
+  background: var(--primary-lightest) !important;
 }
 
-.Calendar-value--active, .Calendar-value--active:hover {
-    background: var(--primary) !important;
-    font-weight: var(--font-weight-bold);
+.Calendar-value--active,
+.Calendar-value--active:hover {
+  background: var(--primary) !important;
+  font-weight: var(--font-weight-bold);
 }
 
-.Calendar-yearValue, .Calendar-monthValue {}
+.Calendar-yearValue,
+.Calendar-monthValue {
+}
 
-.Calendar-yearValue--small, .Calendar-monthValue--small {
-    height: var(--spacing-xl);
-    width: var(--spacing-4);
+.Calendar-yearValue--small,
+.Calendar-monthValue--small {
+  height: var(--spacing-xl);
+  width: var(--spacing-4);
 }
 
-.Calendar-yearValue--large, .Calendar-monthValue--large {
-    height: var(--spacing-3);
-    width: var(--spacing-5);
+.Calendar-yearValue--large,
+.Calendar-monthValue--large {
+  height: var(--spacing-3);
+  width: var(--spacing-5);
 }
 
-.Calendar-dateValue {}
+.Calendar-dateValue {
+}
 
 .Calendar-dateValue--small {
-    height: var(--spacing-xl);
-    width: var(--spacing-xl);
+  height: var(--spacing-xl);
+  width: var(--spacing-xl);
 }
 
 .Calendar-dateValue--large {
-    height: var(--spacing-3);
-    width: var(--spacing-3);
+  height: var(--spacing-3);
+  width: var(--spacing-3);
 }
 
 .Calendar-valueWrapper--dummy {
-    opacity: 0.58;
+  opacity: var(--transparent-58);
 }
 
 .Calendar-value--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Calendar-dayValues {
-    display: flex;
-    justify-content: center;
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
+  display: flex;
+  justify-content: center;
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
 }
 
 .Calendar-dateValues {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-around;
 }
 
 .Calendar-dayValues .Calendar-value {
-    padding: 0;
+  padding: 0;
 }
 
-.Calendar-eventsIndicator{
-    position: absolute;
-    bottom: var(--spacing-s);
-    width: var(--spacing-m);
-    height: var(--spacing-m);
-    background-color: var(--alert);
-    border-radius: 50%;
+.Calendar-eventsIndicator {
+  position: absolute;
+  bottom: var(--spacing-s);
+  width: var(--spacing-m);
+  height: var(--spacing-m);
+  background-color: var(--alert);
+  border-radius: 50%;
 }
-.Calendar-eventsIndicator--small{
-    width: 3px;
-    height: 3px;
+.Calendar-eventsIndicator--small {
+  width: 3px;
+  height: 3px;
 }
-.Calendar-eventsIndicator--active{
-    background-color: var(--white);
+.Calendar-eventsIndicator--active {
+  background-color: var(--white);
 }

package/css/src/components/card.css

@@ -38,4 +38,3 @@
 .Card-footer--withSeperator {
   border-top: var(--spacing-xs) solid var(--secondary-light);
 }
-

package/css/src/components/cardSubdued.css

@@ -1,4 +1,3 @@
-
 .CardSubdued {
   background: var(--card-subdued-bg);
   padding: var(--spacing-2);
@@ -9,14 +8,13 @@
 }
 
 .CardSubdued--left {
-  border-left: var(--spacing-xs) solid var(--secondary-light);;
+  border-left: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .CardSubdued--right {
-  border-right: var(--spacing-xs) solid var(--secondary-light);;
+  border-right: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .CardSubdued--bottom {
-  border-bottom: var(--spacing-xs) solid var(--secondary-light);;
+  border-bottom: var(--spacing-xs) solid var(--secondary-light);
 }
-

package/css/src/components/chat.css

@@ -1,7 +1,7 @@
 .Box {
   width: 100%;
   border-radius: var(--spacing);
-  padding: var(--spacing-l)
+  padding: var(--spacing-l);
 }
 
 .Box--typing {

package/css/src/components/checkbox.css

@@ -1,123 +1,124 @@
 /* badge */
 
 .Checkbox {
-    display: flex;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    line-height: initial;
-    box-sizing: border-box;
-    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;
+  line-height: initial;
+  box-sizing: border-box;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
 }
 
 .Checkbox-input {
-    position: absolute;
-    z-index: 2;
-    opacity: 0;
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-    margin: 0;
+  position: absolute;
+  z-index: 2;
+  opacity: 0;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  margin: 0;
 }
 
 .Checkbox-labelWrapper {
-    padding-left: var(--spacing);
-    display: flex;
-    flex-direction: column;
+  padding-left: var(--spacing);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
 .Checkbox-label {
-    display: flex;
-    cursor: pointer;
+  display: flex;
+  cursor: pointer;
 }
 
 .Checkbox-outerWrapper {
-    position: relative;
-    margin-top: var(--spacing-s);
+  position: relative;
+  margin-top: var(--spacing-s);
 }
 
 .Checkbox-outerWrapper--regular {
-    height: var(--spacing-2);
-    min-width: var(--spacing-2);
+  height: var(--spacing-2);
+  min-width: var(--spacing-2);
 }
 
 .Checkbox-outerWrapper--tiny {
-    height: var(--spacing-l);
-    min-width: var(--spacing-l);
+  height: var(--spacing-l);
+  min-width: var(--spacing-l);
 }
 
 /* Type: Unchecked  */
 
 .Checkbox-wrapper {
-    top: 0;
-    left: 0;
-    border: var(--border);
-    border-radius: var(--spacing-s);
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    height: 100%;
-    width: 100%;
+  top: 0;
+  left: 0;
+  border: var(--border);
+  border-radius: var(--spacing-s);
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
 }
 
 .Checkbox-input:focus {
-    outline: 0;
+  outline: 0;
 }
 
-.Checkbox-input:focus~.Checkbox-wrapper {
-    box-shadow: var(--shadow-spread) var(--secondary-shadow);
+.Checkbox-input:focus ~ .Checkbox-wrapper {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
-.Checkbox-input:hover~.Checkbox-wrapper {
-    border: var(--spacing-xs) solid var(--inverse-lightest);
-    background-color: var(--shadow-0);
+.Checkbox-input:hover ~ .Checkbox-wrapper {
+  border: var(--spacing-xs) solid var(--inverse-lightest);
+  background-color: var(--shadow-0);
 }
 
-.Checkbox-input:active~.Checkbox-wrapper {
-    border: var(--spacing-xs) solid var(--inverse-lightest);
-    background-color: var(--secondary-light);
+.Checkbox-input:active ~ .Checkbox-wrapper {
+  border: var(--spacing-xs) solid var(--inverse-lightest);
+  background-color: var(--secondary-light);
 }
 
 .Checkbox--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Checkbox--disabled .Checkbox-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);
 }
 
 /* Type: checked && Type: indeterminate  */
 
-.Checkbox-input--checked~.Checkbox-wrapper,
-.Checkbox-input--indeterminate~.Checkbox-wrapper {
-    background-color: var(--primary);
-    border: 0;
+.Checkbox-input--checked ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate ~ .Checkbox-wrapper {
+  background-color: var(--primary);
+  border: 0;
 }
 
-.Checkbox-input--checked:focus~.Checkbox-wrapper,
-.Checkbox-input--indeterminate:focus~.Checkbox-wrapper {
-    box-shadow: var(--shadow-spread) var(--primary-shadow);
-    background-color: var(--primary);
-    border: 0;
+.Checkbox-input--checked:focus ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  background-color: var(--primary);
+  border: 0;
 }
 
-.Checkbox-input--checked:hover~.Checkbox-wrapper,
-.Checkbox-input--indeterminate:hover~.Checkbox-wrapper {
-    background-color: var(--primary-dark);
-    border: 0;
+.Checkbox-input--checked:hover ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper {
+  background-color: var(--primary-dark);
+  border: 0;
 }
 
-.Checkbox-input--checked:active~.Checkbox-wrapper,
-.Checkbox-input--indeterminate:active~.Checkbox-wrapper {
-    background-color: var(--primary-darker);
-    border: 0;
+.Checkbox-input--checked:active ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper {
+  background-color: var(--primary-darker);
+  border: 0;
 }
 
-.Checkbox--disabled .Checkbox-input--checked~.Checkbox-wrapper,
-.Checkbox--disabled .Checkbox-input--indeterminate~.Checkbox-wrapper {
-    background-color: var(--primary-lighter);
-    border: 0;
-}
+.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper,
+.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper {
+  background-color: var(--primary-lighter);
+  border: 0;
+}