testio-tailwind 1.1.1 → 2.0.0

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

@@ -1,4 +1,3 @@
-
 .list-inline {
   @apply flex flex-wrap;
 }
@@ -36,7 +35,7 @@ dl.list-inline.responsive {
   dd {
     @apply mb-xs;
   }
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: auto 1fr;
     dd {
       margin-bottom: 0;

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

@@ -1,104 +1,86 @@
 .testio-loader-wrapper {
+  display: inline-block;
   overflow: hidden;
   position: relative;
+}
 
-  .stroke {
-    stroke-linecap: round;
-    stroke-miterlimit: 10;
-    stroke-width: 180px;
-  }
+.testio-loader-wrapper .stroke {
+  stroke: var(--color-info);
+  stroke-linecap: round;
+  stroke-miterlimit: 10;
+  stroke-width: 6px;
+}
 
-  .anim-bar {
-    animation: dash-line 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-    stroke: e6e6e6;
-  }
+.testio-loader-i {
+  height: 60px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 60px;
+}
 
-  .anim-circle {
-    animation: dash-circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
+.anim-bar {
+  animation: dash-line 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+}
 
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
+@keyframes dash-line {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: -60px;
   }
 
-  @keyframes dash-line {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: -180px;
-    }
-
-    50% {
-      stroke-dasharray: 50, 200;
-    }
-
-    100% {
-      stroke-dasharray: 0, 200;
-      stroke-dashoffset: 180px;
-    }
+  50% {
+    stroke-dasharray: 50, 200;
   }
 
-  @keyframes dash-circle {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-    }
-
-    50% {
-      stroke-dasharray: 89, 200;
-      stroke-dashoffset: -35px;
-    }
-
-    100% {
-      stroke-dasharray: 89, 200;
-      stroke-dashoffset: -124px;
-    }
+  100% {
+    stroke-dasharray: 0, 200;
+    stroke-dashoffset: 60px;
   }
+}
 
-  @keyframes color {
-    100%,
-    0% {
-      stroke: #e6e6e6;
-    }
-
-    99% {
-      stroke: #21bef4;
-    }
-  }
+.testio-loader-o-wrapper {
+  position: relative;
+  height: 60px;
+  margin-left: 12px;
+  width: 60px;
 }
 
-.testio-loader-i {
-  height: 180px;
-  left: 0;
+.testio-loader-o-wrapper .testio-loader-o {
   position: absolute;
-  top: 0;
-  width: 180px;
+    bottom: 0;
+    height: 60px;
+    left: 0;
+    right: 0;
+    top: 0;
+    transform-origin: center center;
 }
 
-.testio-loader-o-wrapper {
-  height: 180px;
-  margin-left: 20;
-  position: relative;
-  width: 180px;
-
-  &::before {
+.testio-loader-o-wrapper::before {
     content: "";
     display: block;
     padding-top: 100%;
+}
+
+.anim-circle {
+  animation: dash-circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+}
+
+@keyframes dash-circle {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
   }
 
-  .testio-loader-o {
-    animation: rotate 2s linear infinite;
-    bottom: 0;
-    height: 180px;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform-origin: center center;
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
   }
-}
 
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}

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

@@ -1,4 +1,3 @@
-
 aside.metasidebar {
   @apply relative overflow-hidden;
   grid-area: aside;
@@ -39,7 +38,7 @@ aside .metasidebar-wrapper {
 }
 
 aside .metasidebar-wrapper[open] {
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply relative grid top-auto;
   }
 }

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

@@ -14,7 +14,7 @@
 }
 
 .drawer .notification-content {
-  @apply relative grid py-xxs px-xs text-label cursor-pointer;
+  @apply relative grid py-xs px-spacing text-label cursor-pointer;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto;
 }

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

@@ -23,7 +23,7 @@ select {
 }
 
 .form-select-native select {
-  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-none border-0 cursor-pointer;
+  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-hidden border-0 cursor-pointer;
 }
 
 .form-select-native .select-wrapper select:disabled {

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

@@ -50,7 +50,7 @@ select.select2 {
   }
 
   .select2-search__field {
-    @apply h-btn-sm pl-xs outline-none;
+    @apply h-btn-sm pl-xs outline-hidden;
   }
 
   .select2-results__options {

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

@@ -7,16 +7,16 @@
   grid-template-columns: 1fr;
   grid-template-rows: auto auto 1fr auto;
   grid-area: main;
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: 1fr 1fr;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 2fr;
   }
-  @screen 2xl {
+  @media (width >= theme(--breakpoint-2xl)) {
     grid-template-columns: 2fr 3fr;
   }
-  @screen 3xl {
+  @media (width >= theme(--breakpoint-3xl)) {
     grid-template-columns: 1fr 3fr;
   }
 }
@@ -129,7 +129,7 @@
   dd {
     margin-bottom: 0;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 2fr 1fr 2fr;
   }
 }
@@ -166,7 +166,7 @@
 .splitview-details-content-grid {
   @apply grid gap-xs mb-md;
 
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 3fr;
     .label {
       padding-top: 2px;

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

@@ -188,20 +188,20 @@ td.action-cell,
 
 .table-cellstyle th.missing::after {
   @apply right-0 bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/exclamation.svg");
-  mask-image: url("$package_path/images/exclamation.svg");
+  -webkit-mask-image: url("/assets/images/exclamation.svg");
+  mask-image: url("/assets/images/exclamation.svg");
 }
 
 .table-cellstyle th.inprogress::after {
   @apply bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/clock.svg");
-  mask-image: url("$package_path/images/clock.svg");
+  -webkit-mask-image: url("/assets/images/clock.svg");
+  mask-image: url("/assets/images/clock.svg");
 }
 
 .table-cellstyle th.completed::after {
   @apply h-2.5 top-2.5 right-1.5 bg-success;
-  -webkit-mask-image: url("$package_path/images/check-thick.svg");
-  mask-image: url("$package_path/images/check-thick.svg");
+  -webkit-mask-image: url("/assets/images/check-thick.svg");
+  mask-image: url("/assets/images/check-thick.svg");
 }
 
 .table-cellstyle td {
@@ -228,8 +228,8 @@ td.action-cell,
 
 .table-cellstyle td.inprogress::after {
   @apply bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/clock.svg");
-  mask-image: url("$package_path/images/clock.svg");
+  -webkit-mask-image: url("/assets/images/clock.svg");
+  mask-image: url("/assets/images/clock.svg");
 }
 
 .table-cellstyle td.completed {
@@ -238,8 +238,8 @@ td.action-cell,
 
 .table-cellstyle .completed::after {
   @apply h-2.5 top-2.5 right-1.5 bg-success;
-  -webkit-mask-image: url("$package_path/images/check-thick.svg");
-  mask-image: url("$package_path/images/check-thick.svg");
+  -webkit-mask-image: url("/assets/images/check-thick.svg");
+  mask-image: url("/assets/images/check-thick.svg");
 }
 
 .table-cellstyle td.cell-editable, 
@@ -266,8 +266,8 @@ td.action-cell,
     @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2 bg-primary;
     content: "";
     mask-repeat: round;
-    -webkit-mask-image: url("$package_path/images/edit.svg");
-    mask-image: url("$package_path/images/edit.svg");
+    -webkit-mask-image: url("/assets/images/pencil.svg");
+    mask-image: url("/assets/images/pencil.svg");
   }
 }
 
@@ -342,8 +342,8 @@ td.action-cell,
   &::after {
     @apply block w-full h-full bg-white;
     content: "";
-    mask-image: url("$package_path/images/checkbox-background.svg");
-    -webkit-mask-image: url("$package_path/images/checkbox-background.svg");
+    mask-image: url("/assets/images/checkbox-background.svg");
+    -webkit-mask-image: url("/assets/images/checkbox-background.svg");
     mask-repeat: no-repeat;
   }
 }
@@ -368,14 +368,14 @@ td.action-cell,
 
 .table-cellstyle td.cell-selectable.inprogress label::after {
   @apply bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/clock.svg");
-  mask-image: url("$package_path/images/clock.svg");
+  -webkit-mask-image: url("/assets/images/clock.svg");
+  mask-image: url("/assets/images/clock.svg");
 }
 
 .table-cellstyle .cell-selectable.completed label::after {
   @apply h-2.5 top-2.5 right-1.5 bg-success;
-  -webkit-mask-image: url("$package_path/images/check-thick.svg");
-  mask-image: url("$package_path/images/check-thick.svg");
+  -webkit-mask-image: url("/assets/images/check-thick.svg");
+  mask-image: url("/assets/images/check-thick.svg");
 }
 
 

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

@@ -13,7 +13,8 @@
 }
 
 .tag .icon {
-  @apply text-icon-xxs h-icon-xxs;
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
 }
 
 .tag.sm {
@@ -29,13 +30,19 @@
 }
 
 .tag.popover-tag {
-  @apply text-base h-auto hover:text-white hover:bg-link-hover cursor-pointer;
+  @apply text-base h-auto cursor-pointer;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
+.tag.popover-tag:hover {
+  @apply bg-link-hover text-white;
+}
+
 .tag.popover-tag .icon {
-  @apply h-icon-xs mr-icon-spacing text-icon-xs;
+  @apply mr-icon-spacing;
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
 }
 
 .tag.popover-tag:hover .icon {

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

@@ -7,14 +7,14 @@
   grid-template-columns: 1fr auto auto;
   grid-template-rows: auto;
 
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply pt-xs pr-md pb-0 pl-md;
     grid-template-areas:  "test-title test-progress session-info test-actions"
                           "nav-tabs nav-tabs nav-tabs nav-tabs";
     grid-template-columns: auto 1fr auto auto;
     grid-template-rows: auto;
   }
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     @apply pt-xs pr-md pb-0 pl-body-padding-desktop;
   }
 }
@@ -44,7 +44,7 @@
   .nav-tabs {
     @apply pt-xxs pb-xs;
   }
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply py-xxs;
   }
 }

package/src/assets/stylesheets/components/tester/tester_cards.css

@@ -1,16 +1,16 @@
 .grid-testercards {
   @apply grid gap-grid-gutter;
 
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     grid-template-columns: 1fr 1fr;
   }
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: 1fr 1fr 1fr;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }
-  @screen 3xl {
+  @media (width >= theme(--breakpoint-3xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   }
 }

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

@@ -1,7 +1,7 @@
 .form-group.trix-editor {
   @apply gap-grid-gutter grid-rows-auto;
   grid-template-rows: auto;
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     grid-template-areas:
       "label trix-toolbar"
       "label trix-editor";
@@ -10,7 +10,7 @@
 
 .trix-editor .trix-content {
   @apply -mt-grid-gutter;
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     grid-area: trix-editor;
   }
 }
@@ -21,7 +21,7 @@
 
 trix-toolbar {
   @apply border border-bordercolor rounded-t;
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     grid-area: trix-toolbar;
   }
 }

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

@@ -1,4 +1,8 @@
 
+body {
+  @apply font-body text-base;
+}
+
 h1, h2, h3, h4, h5,
 .text-heading-1,
 .text-heading-2,
@@ -9,31 +13,27 @@ h1, h2, h3, h4, h5,
 }
 
 h1 {
-  @apply text-heading-1;
+  font-size: var(--font-size-heading-1);
 }
 
 h2 {
-  @apply text-heading-2;
+  font-size: var(--font-size-heading-2);
 }
 
 h3 {
-  @apply text-heading-3;
+  font-size: var(--font-size-heading-3);
 }
 
 h4 {
-  @apply text-heading-4;
+  font-size: var(--font-size-heading-4);
 }
 
 h5 {
-  @apply text-heading-5;
+  font-size: var(--font-size-heading-5);
 }
 
 h6 {
-  @apply text-heading-6;
-}
-
-body {
-  @apply text-base;
+  font-size: var(--font-size-heading-6);
 }
 
 .text-display-1,
@@ -41,10 +41,11 @@ body {
 .text-display-3,
 .text-display-4 {
   @apply font-display;
+  font-weight: var(--font-weight-display);
 }
 
 a {
-  @apply text-link font-semibold hover:text-link-hover hover:underline cursor-pointer;
+  @apply text-link font-semibold leading-5 hover:text-link-hover hover:underline cursor-pointer;
 }
 
 code {