testio-tailwind 0.2.0 → 0.2.2

package/src/assets/stylesheets/components/toggleswitch.css

@@ -1,119 +1,119 @@
-
-.form-toggle {
-  @apply relative flex flex-row items-center h-auto;
-}
-
-.toggle-switch {
-  @apply relative inline-block h-btn-sm w-xl mb-0;
-  color: inherit;
-}
-
-.toggle-switch-label {
-  @apply inline-block ml-xs text-base font-normal text-black cursor-pointer;
-}
-
-.toggle-switch input,
-.translation-header-toggle input {
-  @apply hidden w-0 h-0;
-}
-
-.toggle-switch .slider {
-  @apply absolute top-0 left-0 right-0 bottom-0 bg-gray-light transition-transform cursor-pointer;
-  border-radius: 20px;
-}
-
-.toggle-switch .slider:before {
-  @apply absolute bg-white transition-transform ;
-  border-radius: 100%;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 2px;
-  bottom: 2px;
-  top: 2px;
-}
-
-.toggle-switch input:checked + .slider {
-  @apply bg-info;
-}
-
-.toggle-switch input:focus + .slider {
-  box-shadow: 0 0 1px #21bef4;
-}
-
-.toggle-switch input:checked + .slider:before {
-  -webkit-transform: translateX(30px);
-  -ms-transform: translateX(30px);
-  transform: translateX(30px);
-}
-
-.toggle-switch.disabled .slider {
-  @apply border border-disabled;
-  background-image: url("/assets/images/pattern-striped-bright.png");
-  background-repeat: repeat;
-  background-color: transparent;
-  cursor: not-allowed;
-
-  &::before {
-    @apply bg-disabled;
-    top: 1px;
-  }
-}
-
-.toggle-switch input:disabled + .slider,
-.toggle-switch input:disabled + label {
-  background-color: transparent;
-}
-
-.toggle-switch input:checked { 
-  &:disabled + .slider:before {
-    -webkit-transform: translateX(29px);
-    -ms-transform: translateX(29px);
-    transform: translateX(29px);
-  }
-}
-
-.toggle-switch.disabled .toggle-switch-label {
-  cursor: not-allowed;
-}
-
-.form-toggle.inverted .toggle-switch .slider:before {
-  @apply bg-dark;
-}
-
-.form-toggle.inverted .toggle-switch .slider {
-  @apply bg-gray-dark;
-}
-
-.form-toggle.inverted .toggle-switch input:checked + .slider {
-  @apply bg-gray;
-}
-
-.form-toggle.inverted .toggle-switch-label {
-  @apply text-white;
-}
-
-.form-toggle.sm .toggle-switch {
-  border-radius: 10px;
-  width: 44px;
-  height: 24px;
-}
-
-.form-toggle.sm .toggle-switch .slider:before {
-  width: 20px;
-  height: 20px;
-}
-
-.form-toggle.sm .toggle-switch input:checked + .slider:before {
-  -webkit-transform: translateX(20px);
-  -ms-transform: translateX(20px);
-  transform: translateX(20px);
-}
-
-.form-toggle.sm {
-  @apply items-center;
-}
-
-.form-toggle .toggle-label {
-  @apply text-label;
+
+.form-toggle {
+  @apply relative flex flex-row items-center h-auto;
+}
+
+.toggle-switch {
+  @apply relative inline-block h-btn-sm w-xl mb-0;
+  color: inherit;
+}
+
+.toggle-switch-label {
+  @apply inline-block ml-xs text-base font-normal text-black cursor-pointer;
+}
+
+.toggle-switch input,
+.translation-header-toggle input {
+  @apply hidden w-0 h-0;
+}
+
+.toggle-switch .slider {
+  @apply absolute top-0 left-0 right-0 bottom-0 bg-gray-light transition-transform cursor-pointer;
+  border-radius: 20px;
+}
+
+.toggle-switch .slider:before {
+  @apply absolute bg-white transition-transform ;
+  border-radius: 100%;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 2px;
+  bottom: 2px;
+  top: 2px;
+}
+
+.toggle-switch input:checked + .slider {
+  @apply bg-info;
+}
+
+.toggle-switch input:focus + .slider {
+  box-shadow: 0 0 1px #21bef4;
+}
+
+.toggle-switch input:checked + .slider:before {
+  -webkit-transform: translateX(30px);
+  -ms-transform: translateX(30px);
+  transform: translateX(30px);
+}
+
+.toggle-switch.disabled .slider {
+  @apply border border-disabled;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-repeat: repeat;
+  background-color: transparent;
+  cursor: not-allowed;
+
+  &::before {
+    @apply bg-disabled;
+    top: 1px;
+  }
+}
+
+.toggle-switch input:disabled + .slider,
+.toggle-switch input:disabled + label {
+  background-color: transparent;
+}
+
+.toggle-switch input:checked { 
+  &:disabled + .slider:before {
+    -webkit-transform: translateX(29px);
+    -ms-transform: translateX(29px);
+    transform: translateX(29px);
+  }
+}
+
+.toggle-switch.disabled .toggle-switch-label {
+  cursor: not-allowed;
+}
+
+.form-toggle.inverted .toggle-switch .slider:before {
+  @apply bg-dark;
+}
+
+.form-toggle.inverted .toggle-switch .slider {
+  @apply bg-gray-dark;
+}
+
+.form-toggle.inverted .toggle-switch input:checked + .slider {
+  @apply bg-gray;
+}
+
+.form-toggle.inverted .toggle-switch-label {
+  @apply text-white;
+}
+
+.form-toggle.sm .toggle-switch {
+  border-radius: 10px;
+  width: 44px;
+  height: 24px;
+}
+
+.form-toggle.sm .toggle-switch .slider:before {
+  width: 20px;
+  height: 20px;
+}
+
+.form-toggle.sm .toggle-switch input:checked + .slider:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+.form-toggle.sm {
+  @apply items-center;
+}
+
+.form-toggle .toggle-label {
+  @apply text-label;
 }

package/src/assets/stylesheets/components/tom_select.css

@@ -1,186 +1,186 @@
-
-/*///// Tom-Select theme https://tom-select.js.org /////*/
-
-.ts-control {
-  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded text-white bg-primary;
-  padding-right: 40px !important;
-}
-
-.ts-control input {
-  @apply text-base text-white;
-}
-
-.ts-control,
-.full .ts-control, 
-.ts-wrapper.single.input-active .ts-control {
-  @apply bg-primary border-0 cursor-pointer;
-  &:hover {
-    @apply bg-link-hover;
-  }
-  &:hover input::placeholder {
-    @apply text-white;
-  }
-}
-
-.ts-control input::placeholder {
-  @apply text-placeholder italic text-base;
-}
-
-.ts-control::before {
-  @apply absolute right-0 top-0 w-btn h-full;
-  content: "";
-}
-
-.ts-control::after {
-  @apply absolute inline-block right-md bg-white;
-  content: "";
-  -webkit-mask-image: url("/assets/images/caret-down.svg");
-  mask-image: url("/assets/images/caret-down.svg");
-  width: 9px;
-  height: 20px;
-  z-index: 1;
-  top: 50%;
-  margin-top: -10px;
-}
-
-.ts-wrapper .ts-control:hover,
-.ts-wrapper.focus .ts-control:hover,
-.ts-control:hover, 
-.form-select.inverted .ts-control:hover, 
-.form-group.inverted .ts-control:hover, 
-.multi-select.inverted .ts-control:hover {
-  @apply bg-link-hover text-white cursor-pointer;
-
-  &::before {
-    @apply bg-link-hover;
-
-  }
-  &::after {
-    @apply bg-white;
-  }
-}
-
-.ts-wrapper.dropdown-active .ts-control {
-  @apply rounded-t rounded-b-none;
-}
-
-.ts-wrapper .ts-dropdown {
-  @apply m-0 bg-petrol-500 text-white border-0 overflow-hidden rounded-b;
-}
-
-.ts-dropdown-content {
-  scrollbar-width: thin;
-}
-
-.ts-dropdown .option {
-  @apply flex items-center w-full py-xs px-sm text-white bg-transparent;
-  &:hover {
-    @apply bg-link-hover;
-  }
-}
-
-.ts-dropdown .option.selected {
-  @apply text-white bg-primary;
-
-  &::before {
-    @apply inline-block w-icon h-icon mr-icon-spacing bg-white;
-    content: "";
-    mask-image: url("/assets/images/check-circle-filled.svg");
-  } 
-}
-
-.ts-dropdown .option.selected:hover {
-  @apply bg-link-hover;
-}
-
-
-/* Multi select item */
-
-.ts-wrapper.multi .ts-control div.item {
-  @apply relative flex-row flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded;
-  line-height: 25px;
-
-  a {
-    @apply flex justify-center items-center text-primary rounded-r;
-    margin-top: -2px;
-    margin-bottom: -2px;
-  }
-
-  a::after {
-    @apply inline-block w-xs h-xs bg-primary;
-    content: "";
-    mask-image: url("/assets/images/cross-thick.svg");
-  }
-
-  a:hover {
-    @apply bg-danger;
-  }
-
-  a:hover::after {
-    @apply bg-white;
-  }
-}
-
-.ts-wrapper.multi .ts-control {
-  padding-right: 40px !important;
-}
-
-.ts-wrapper.multi .ts-control div.item.active {
-  @apply bg-link-hover;
-}
-
-
-.ts-wrapper .optgroup-header {
-  @apply pt-xs px-sm pb-xxs text-sm text-gray-light bg-transparent;
-}
-
-
-/*///// Validation errors /////*/
-
-.field_with_errors .ts-control,
-.field_with_errors .ts-wrapper.focus .ts-control,
-.form-select.inverted .field_with_errors .ts-control,
-.form-group.inverted .field_with_errors .ts-control {
-  @apply bg-danger;
-}
-
-.field_with_errors .ts-wrapper .ts-dropdown,
-.form-select.inverted .field_with_errors .ts-wrapper .ts-dropdown, 
-.form-group.inverted .field_with_errors .ts-wrapper .ts-dropdown {
-  @apply border-danger;
-}
-
-.field_with_errors .ts-control::before,
-.form-select.inverted .field_with_errors .ts-control::before,
-.form-group.inverted .field_with_errors .ts-control::before {
-  @apply text-white bg-danger cursor-pointer;
-  content: "";
-}
-
-.field_with_errors .form-label,
-.form-select.inverted .field_with_errors .form-label,
-.form-group.inverted .field_with_errors .form-label {
-  @apply text-danger;
-}
-
-
-/*///// Disabled /////*/
-
-.ts-wrapper.disabled .ts-control,
-.ts-wrapper.locked .ts-control {
-  @apply text-disabled-dark border border-disabled cursor-not-allowed bg-transparent;
-  background-image: url("/assets/images/pattern-striped-bright.png");
-  background-repeat: repeat;
-  &:hover{
-    @apply text-disabled;
-  }
-  &::before {
-    @apply bg-transparent;
-  }
-  &::after {
-    @apply bg-disabled-dark;
-  }
-  & input::placeholder {
-    @apply text-disabled-dark;
-  }
-}
+
+/*///// Tom-Select theme https://tom-select.js.org /////*/
+
+.ts-control {
+  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded text-white bg-primary;
+  padding-right: 40px !important;
+}
+
+.ts-control input {
+  @apply text-base text-white;
+}
+
+.ts-control,
+.full .ts-control, 
+.ts-wrapper.single.input-active .ts-control {
+  @apply bg-primary border-0 cursor-pointer;
+  &:hover {
+    @apply bg-link-hover;
+  }
+  &:hover input::placeholder {
+    @apply text-white;
+  }
+}
+
+.ts-control input::placeholder {
+  @apply text-placeholder italic text-base;
+}
+
+.ts-control::before {
+  @apply absolute right-0 top-0 w-btn h-full;
+  content: "";
+}
+
+.ts-control::after {
+  @apply absolute inline-block right-md bg-white;
+  content: "";
+  -webkit-mask-image: url("/assets/images/caret-down.svg");
+  mask-image: url("/assets/images/caret-down.svg");
+  width: 9px;
+  height: 20px;
+  z-index: 1;
+  top: 50%;
+  margin-top: -10px;
+}
+
+.ts-wrapper .ts-control:hover,
+.ts-wrapper.focus .ts-control:hover,
+.ts-control:hover, 
+.form-select.inverted .ts-control:hover, 
+.form-group.inverted .ts-control:hover, 
+.multi-select.inverted .ts-control:hover {
+  @apply bg-link-hover text-white cursor-pointer;
+
+  &::before {
+    @apply bg-link-hover;
+
+  }
+  &::after {
+    @apply bg-white;
+  }
+}
+
+.ts-wrapper.dropdown-active .ts-control {
+  @apply rounded-t rounded-b-none;
+}
+
+.ts-wrapper .ts-dropdown {
+  @apply m-0 bg-petrol-500 text-white border-0 overflow-hidden rounded-b;
+}
+
+.ts-dropdown-content {
+  scrollbar-width: thin;
+}
+
+.ts-dropdown .option {
+  @apply flex items-center w-full py-xs px-sm text-white bg-transparent;
+  &:hover {
+    @apply bg-link-hover;
+  }
+}
+
+.ts-dropdown .option.selected {
+  @apply text-white bg-primary;
+
+  &::before {
+    @apply inline-block w-icon h-icon mr-icon-spacing bg-white;
+    content: "";
+    mask-image: url("/assets/images/check-circle-filled.svg");
+  } 
+}
+
+.ts-dropdown .option.selected:hover {
+  @apply bg-link-hover;
+}
+
+
+/* Multi select item */
+
+.ts-wrapper.multi .ts-control div.item {
+  @apply relative flex-row flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded;
+  line-height: 25px;
+
+  a {
+    @apply flex justify-center items-center text-primary rounded-r;
+    margin-top: -2px;
+    margin-bottom: -2px;
+  }
+
+  a::after {
+    @apply inline-block w-xs h-xs bg-primary;
+    content: "";
+    mask-image: url("/assets/images/cross-thick.svg");
+  }
+
+  a:hover {
+    @apply bg-danger;
+  }
+
+  a:hover::after {
+    @apply bg-white;
+  }
+}
+
+.ts-wrapper.multi .ts-control {
+  padding-right: 40px !important;
+}
+
+.ts-wrapper.multi .ts-control div.item.active {
+  @apply bg-link-hover;
+}
+
+
+.ts-wrapper .optgroup-header {
+  @apply pt-xs px-sm pb-xxs text-sm text-gray-light bg-transparent;
+}
+
+
+/*///// Validation errors /////*/
+
+.field_with_errors .ts-control,
+.field_with_errors .ts-wrapper.focus .ts-control,
+.form-select.inverted .field_with_errors .ts-control,
+.form-group.inverted .field_with_errors .ts-control {
+  @apply bg-danger;
+}
+
+.field_with_errors .ts-wrapper .ts-dropdown,
+.form-select.inverted .field_with_errors .ts-wrapper .ts-dropdown, 
+.form-group.inverted .field_with_errors .ts-wrapper .ts-dropdown {
+  @apply border-danger;
+}
+
+.field_with_errors .ts-control::before,
+.form-select.inverted .field_with_errors .ts-control::before,
+.form-group.inverted .field_with_errors .ts-control::before {
+  @apply text-white bg-danger cursor-pointer;
+  content: "";
+}
+
+.field_with_errors .form-label,
+.form-select.inverted .field_with_errors .form-label,
+.form-group.inverted .field_with_errors .form-label {
+  @apply text-danger;
+}
+
+
+/*///// Disabled /////*/
+
+.ts-wrapper.disabled .ts-control,
+.ts-wrapper.locked .ts-control {
+  @apply text-disabled-dark border border-disabled cursor-not-allowed bg-transparent;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-repeat: repeat;
+  &:hover{
+    @apply text-disabled;
+  }
+  &::before {
+    @apply bg-transparent;
+  }
+  &::after {
+    @apply bg-disabled-dark;
+  }
+  & input::placeholder {
+    @apply text-disabled-dark;
+  }
+}