testio-tailwind 0.2.0 → 0.2.2

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

@@ -1,307 +1,307 @@
-.splitview-layout {
-  @apply relative grid overflow-hidden max-h-full;
-  grid-template-areas:  "splitview-header splitview-header"
-                        "splitview-list-header splitview-details"
-                        "splitview-list splitview-details"
-                        "splitview-list-actionbar splitview-details-actionbar";
-  grid-template-columns: 1fr;
-  grid-template-rows: auto auto 1fr auto;
-  grid-area: main;
-  @screen lg {
-    grid-template-columns: 1fr 1fr;
-  }
-  @screen xl {
-    grid-template-columns: 1fr 2fr;
-  }
-  @screen 2xl {
-    grid-template-columns: 2fr 3fr;
-  }
-  @screen 3xl {
-    grid-template-columns: 1fr 3fr;
-  }
-}
-
-.splitview-layout .splitview-details {
-  @apply hidden lg:block;
-}
-
-/*/ hide content when no item is selected */
-.splitview-layout .splitview-details-content {
-  @apply hidden; 
-}
-
-.splitview-layout.item-selected .splitview-list-header {
-  @apply hidden lg:flex;
-}
-
-.splitview-layout.item-selected .splitview-list {
-  @apply hidden lg:block overflow-x-hidden;
-}
-
-.splitview-layout.item-selected {
-
-  .splitview-details {
-    display: block;
-  }
-  .splitview-details-content  {
-    display: block; /*/ Show content when items are selected */
-  }
-  .splitview-details-emptystate {
-    display: none;
-  }
-  .splitview-details {
-    @apply border-info;
-  }
-  .splitview-list-actionbar {
-    display: none;
-  }
-  .splitview-details-actionbar {
-    display: flex;
-  }
-  .splitview-list {
-    grid-row-start: 3;
-    grid-row-end: 5;
-  }
-}
-
-.splitview-header {
-  @apply relative px-body-padding-mobile pt-body-padding-mobile pb-md sm:px-body-padding-tablet sm:pt-body-padding-tablet xl:px-body-padding-desktop xl:pt-body-padding-desktop;
-  grid-area: splitview-header;
-}
-
-.splitview-list {
-  @apply relative h-full max-h-full min-h-0 pl-body-padding-mobile pb-xl sm:pl-body-padding-tablet xl:pl-body-padding-desktop overflow-y-scroll overflow-x-hidden;
-  grid-area: splitview-list;
-}
-
-.splitview-list-header {
-  @apply relative flex flex-row mr-spacing mb-xs ml-body-padding-mobile sm:ml-body-padding-tablet xl:ml-body-padding-desktop;
-  grid-area: splitview-list-header;
-}
-
-.splitview-list-header::before {
-  @apply absolute block left-0 bottom-xxs w-full h-1px border-b border-bordercolor;
-  content: "";
-}
-
-.splitview-list-header-title {
-  @apply relative inline-block pr-sm mt-xxs text-heading-3 bg-appbody;
-  line-height: 1.1;
-}
-
-.splitview-list-header .form-check {
-  @apply pr-xs bg-white;
-  margin-top: 8px;
-}
-
-.splitview-list-header-actions {
-  @apply flex flex-row justify-end ml-auto;
-}
-
-.splitview-list-header-actions .linked-icon {
-  @apply ml-sm;
-}
-
-/*///// Splitview Details /////*/
-
-.splitview-details {
-  @apply px-spacing pb-xl overflow-y-scroll overflow-x-hidden h-full max-h-full min-h-0 max-w-full min-w-0 border-l-2 border-bordercolor;
-  grid-area: splitview-details;
-}
-
-.splitview-details-header {
-  @apply grid gap-xs mb-md;
-  grid-template-columns: auto 1fr auto;
-}
-
-.splitview-details-title {
-  @apply text-heading-3;
-}
-
-.splitview-details-header .btn-close-detailview {
-  @apply lg:hidden;
-}
-
-.list-splitview-meta {
-  @apply grid content-start gap-xs mb-xs;
-  grid-template-columns: 1fr 2fr;
-
-  dd {
-    margin-bottom: 0;
-  }
-  @screen xl {
-    grid-template-columns: 1fr 2fr 1fr 2fr;
-  }
-}
-
-.meta-collapsable {
-  @apply border-b border-bordercolor mb-md;
-
-  .summary-closed {
-    @apply block;
-  }
-  .summary-open {
-    @apply hidden;
-  }
-}
-
-.meta-collapsable > summary {
-  @apply flex items-center justify-center h-btn-sm text-primary cursor-pointer;
-
-  &:hover, &:focus {
-    @apply text-white bg-link-hover border-link-hover;
-  }
-}
-
-.meta-collapsable[open] {
-  @apply flex flex-col-reverse;
-  .summary-open {
-    @apply block;
-  }
-  .summary-closed {
-    @apply hidden;
-  }
-}
-
-.splitview-details-content-grid {
-  @apply grid gap-xs mb-md;
-
-  @screen xl {
-    grid-template-columns: 1fr 3fr;
-    .label {
-      padding-top: 2px;
-    }
-  }
-}
-
-/*///// Splitview actionbars /////*/
-
-.splitview-list-actionbar {
-  @apply flex px-body-padding-mobile sm:px-body-padding-tablet xl:px-body-padding-desktop bg-primary;
-  grid-area: splitview-list-actionbar;
-  grid-column-start: 1;
-  grid-column-end: 3;
-}
-
-.splitview-details-actionbar {
-  @apply hidden bg-info px-body-padding-mobile sm:px-body-padding-tablet;
-
-  .popover-menu {
-    @apply bg-info;
-  }
-}
-
-
-/*///// Splitview item /////*/
-
-.splitview-item {
-  @apply grid p-xs pr-spacing -mx-xs cursor-pointer;
-  grid-template-areas: "split-check split-icon split-text split-status";
-  grid-template-columns: auto auto 1fr auto;
-}
-
-.splitview-item.selected {
-  @apply text-white bg-info;
-  .splitview-item-icon, 
-  .splitview-item-metainfo {
-    @apply text-white;
-  }
-  .status-icon {
-    @apply bg-white;
-  }
-  .splitview-item-checkbox input {
-    @apply border-white;
-  }
-  .splitview-item-checkbox input[type=checkbox]:checked {
-    @apply bg-white;
-  }
-  .splitview-item-checkbox input[type=checkbox]:checked::after {
-    @apply bg-info;
-  }
-}
-
-.splitview-item:hover {
-  @apply text-white bg-link-hover;
-
-  .splitview-item-icon, 
-  .splitview-item-metainfo {
-    @apply text-white;
-  }
-  .status-icon {
-    @apply bg-white;
-  }
-  .splitview-item-checkbox input {
-    @apply border-white;
-  }
-  .splitview-item-checkbox input[type=checkbox]:checked {
-    @apply border-white bg-white;
-  }
-  .splitview-item-checkbox input[type=checkbox]:checked::after {
-    @apply bg-info;
-  }
-}
-
-.splitview-item-checkbox {
-  grid-area: split-check;
-  & input {
-    @apply mr-xs;
-  }
-}
-
-.splitview-item-icon {
-  @apply w-spacing;
-  grid-area: split-icon;
-}
-
-.splitview-item-text {
-  @apply pr-xs;
-  grid-area: split-text;
-  line-height: 1.3;
-}
-
-.splitview-item-title {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-clamp: 4;
-  -webkit-line-clamp: 4;
-}
-
-.splitview-item-metainfo {
-  @apply mt-xxs text-label text-label-color;
-  line-height: 1.3;
-}
-
-.splitview-item-status {
-  @apply flex flex-col items-end w-spacing;
-  grid-area: split-status;
-}
-
-.splitview-item-status .status-icon {
-  @apply mb-xxs;
-}
-
-.splitview-item .list-tags {
-  @apply mt-xxs;
-}
-
-/*///// Collapsable splitview item/group /////*/
-
-.splitview-group > summary::before {
-  @apply inline-block w-icon h-icon mr-xxs bg-primary;
-  content: "";
-  mask-repeat: no-repeat;
-  mask-image: url("/assets/images/triangle-centered-right.svg");
-}
-
-.splitview-group[open] > summary::before {
-  mask-image: url("/assets/images/triangle-centered-down.svg");
-}
-
-.splitview-group > summary:hover::before {
-  @apply bg-white;
-}
-
-.splitview-group .splitview-item:not(summary) {
-  padding-left: 65px;
-}
+.splitview-layout {
+  @apply relative grid overflow-hidden max-h-full;
+  grid-template-areas:  "splitview-header splitview-header"
+                        "splitview-list-header splitview-details"
+                        "splitview-list splitview-details"
+                        "splitview-list-actionbar splitview-details-actionbar";
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto 1fr auto;
+  grid-area: main;
+  @screen lg {
+    grid-template-columns: 1fr 1fr;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 2fr;
+  }
+  @screen 2xl {
+    grid-template-columns: 2fr 3fr;
+  }
+  @screen 3xl {
+    grid-template-columns: 1fr 3fr;
+  }
+}
+
+.splitview-layout .splitview-details {
+  @apply hidden lg:block;
+}
+
+/*/ hide content when no item is selected */
+.splitview-layout .splitview-details-content {
+  @apply hidden; 
+}
+
+.splitview-layout.item-selected .splitview-list-header {
+  @apply hidden lg:flex;
+}
+
+.splitview-layout.item-selected .splitview-list {
+  @apply hidden lg:block overflow-x-hidden;
+}
+
+.splitview-layout.item-selected {
+
+  .splitview-details {
+    display: block;
+  }
+  .splitview-details-content  {
+    display: block; /*/ Show content when items are selected */
+  }
+  .splitview-details-emptystate {
+    display: none;
+  }
+  .splitview-details {
+    @apply border-info;
+  }
+  .splitview-list-actionbar {
+    display: none;
+  }
+  .splitview-details-actionbar {
+    display: flex;
+  }
+  .splitview-list {
+    grid-row-start: 3;
+    grid-row-end: 5;
+  }
+}
+
+.splitview-header {
+  @apply relative px-body-padding-mobile pt-body-padding-mobile pb-md sm:px-body-padding-tablet sm:pt-body-padding-tablet xl:px-body-padding-desktop xl:pt-body-padding-desktop;
+  grid-area: splitview-header;
+}
+
+.splitview-list {
+  @apply relative h-full max-h-full min-h-0 pl-body-padding-mobile pb-xl sm:pl-body-padding-tablet xl:pl-body-padding-desktop overflow-y-scroll overflow-x-hidden;
+  grid-area: splitview-list;
+}
+
+.splitview-list-header {
+  @apply relative flex flex-row mr-spacing mb-xs ml-body-padding-mobile sm:ml-body-padding-tablet xl:ml-body-padding-desktop;
+  grid-area: splitview-list-header;
+}
+
+.splitview-list-header::before {
+  @apply absolute block left-0 bottom-xxs w-full h-1px border-b border-bordercolor;
+  content: "";
+}
+
+.splitview-list-header-title {
+  @apply relative inline-block pr-sm mt-xxs text-heading-3 bg-appbody;
+  line-height: 1.1;
+}
+
+.splitview-list-header .form-check {
+  @apply pr-xs bg-white;
+  margin-top: 8px;
+}
+
+.splitview-list-header-actions {
+  @apply flex flex-row justify-end ml-auto;
+}
+
+.splitview-list-header-actions .linked-icon {
+  @apply ml-sm;
+}
+
+/*///// Splitview Details /////*/
+
+.splitview-details {
+  @apply px-spacing pb-xl overflow-y-scroll overflow-x-hidden h-full max-h-full min-h-0 max-w-full min-w-0 border-l-2 border-bordercolor;
+  grid-area: splitview-details;
+}
+
+.splitview-details-header {
+  @apply grid gap-xs mb-md;
+  grid-template-columns: auto 1fr auto;
+}
+
+.splitview-details-title {
+  @apply text-heading-3;
+}
+
+.splitview-details-header .btn-close-detailview {
+  @apply lg:hidden;
+}
+
+.list-splitview-meta {
+  @apply grid content-start gap-xs mb-xs;
+  grid-template-columns: 1fr 2fr;
+
+  dd {
+    margin-bottom: 0;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 2fr 1fr 2fr;
+  }
+}
+
+.meta-collapsable {
+  @apply border-b border-bordercolor mb-md;
+
+  .summary-closed {
+    @apply block;
+  }
+  .summary-open {
+    @apply hidden;
+  }
+}
+
+.meta-collapsable > summary {
+  @apply flex items-center justify-center h-btn-sm text-primary cursor-pointer;
+
+  &:hover, &:focus {
+    @apply text-white bg-link-hover border-link-hover;
+  }
+}
+
+.meta-collapsable[open] {
+  @apply flex flex-col-reverse;
+  .summary-open {
+    @apply block;
+  }
+  .summary-closed {
+    @apply hidden;
+  }
+}
+
+.splitview-details-content-grid {
+  @apply grid gap-xs mb-md;
+
+  @screen xl {
+    grid-template-columns: 1fr 3fr;
+    .label {
+      padding-top: 2px;
+    }
+  }
+}
+
+/*///// Splitview actionbars /////*/
+
+.splitview-list-actionbar {
+  @apply flex px-body-padding-mobile sm:px-body-padding-tablet xl:px-body-padding-desktop bg-primary;
+  grid-area: splitview-list-actionbar;
+  grid-column-start: 1;
+  grid-column-end: 3;
+}
+
+.splitview-details-actionbar {
+  @apply hidden bg-info px-body-padding-mobile sm:px-body-padding-tablet;
+
+  .popover-menu {
+    @apply bg-info;
+  }
+}
+
+
+/*///// Splitview item /////*/
+
+.splitview-item {
+  @apply grid p-xs pr-spacing -mx-xs cursor-pointer;
+  grid-template-areas: "split-check split-icon split-text split-status";
+  grid-template-columns: auto auto 1fr auto;
+}
+
+.splitview-item.selected {
+  @apply text-white bg-info;
+  .splitview-item-icon, 
+  .splitview-item-metainfo {
+    @apply text-white;
+  }
+  .status-icon {
+    @apply bg-white;
+  }
+  .splitview-item-checkbox input {
+    @apply border-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked {
+    @apply bg-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked::after {
+    @apply bg-info;
+  }
+}
+
+.splitview-item:hover {
+  @apply text-white bg-link-hover;
+
+  .splitview-item-icon, 
+  .splitview-item-metainfo {
+    @apply text-white;
+  }
+  .status-icon {
+    @apply bg-white;
+  }
+  .splitview-item-checkbox input {
+    @apply border-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked {
+    @apply border-white bg-white;
+  }
+  .splitview-item-checkbox input[type=checkbox]:checked::after {
+    @apply bg-info;
+  }
+}
+
+.splitview-item-checkbox {
+  grid-area: split-check;
+  & input {
+    @apply mr-xs;
+  }
+}
+
+.splitview-item-icon {
+  @apply w-spacing;
+  grid-area: split-icon;
+}
+
+.splitview-item-text {
+  @apply pr-xs;
+  grid-area: split-text;
+  line-height: 1.3;
+}
+
+.splitview-item-title {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 4;
+  -webkit-line-clamp: 4;
+}
+
+.splitview-item-metainfo {
+  @apply mt-xxs text-label text-label-color;
+  line-height: 1.3;
+}
+
+.splitview-item-status {
+  @apply flex flex-col items-end w-spacing;
+  grid-area: split-status;
+}
+
+.splitview-item-status .status-icon {
+  @apply mb-xxs;
+}
+
+.splitview-item .list-tags {
+  @apply mt-xxs;
+}
+
+/*///// Collapsable splitview item/group /////*/
+
+.splitview-group > summary::before {
+  @apply inline-block w-icon h-icon mr-xxs bg-primary;
+  content: "";
+  mask-repeat: no-repeat;
+  mask-image: url("/assets/images/triangle-centered-right.svg");
+}
+
+.splitview-group[open] > summary::before {
+  mask-image: url("/assets/images/triangle-centered-down.svg");
+}
+
+.splitview-group > summary:hover::before {
+  @apply bg-white;
+}
+
+.splitview-group .splitview-item:not(summary) {
+  padding-left: 65px;
+}