testio-tailwind 0.1.0 → 0.2.1

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

@@ -1,281 +1,285 @@
-
-.list-listitems .listitem,
-.list-listitems .listitem-with-footer {
-  @apply mb-xs; 
-}
-
-.listitem, 
-details.listitem .listitem-header {
-  @apply relative grid items-stretch border-0 grid-rows-auto-auto grid-cols-auto-fr-auto sm:grid-cols-auto-fr-2-auto;
-  grid-template-areas:  "badge title actions"
-                        "badge metrics actions";
-  grid-template-columns: auto 1fr auto;
-
-  @screen sm {
-    grid-template-areas:  "badge title metrics actions";
-  }
-}
-
-.listitem {
-  @apply bg-card rounded border;
-}
-
-details.listitem {
-  grid: none;
-}
-
-.listitem-with-footer {
-  @apply grid;
-}
-
-.listitem.white {
-  @apply text-black bg-white;
-}
-
-a.listitem:hover {
-  @apply text-white bg-link-hover border-link-hover;
-  .icon {
-    @apply text-white;
-  }
-}
-
-.listitem[open] > .listitem-header {
-  @apply border-b-1 border-white rounded-t;
-}
-
-.listitem .collapse-btn {
-  @apply justify-center items-start w-btn p-xxs pt-xs;
-  &:hover:after {
-    @apply bg-white;
-  }
-}
-
-.listitem[open] > .listitem-header .collapse-btn {
-  @apply rounded-none last:rounded-tr;
-  border-radius: 0;
-}
-
-.listitem .collapse-btn:after {
-  @apply inline-block w-sm h-icon bg-primary;
-  content: "";
-  mask-image: url("/assets/images/arrow-down.svg");
-  mask-repeat: no-repeat;
-}
-
-.listitem[open] > .listitem-header .collapse-btn:after {
-  mask-image: url("/assets/images/arrow-up.svg");
-}
-
-.listitem-badge {
-  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black rounded-l;
-  grid-area: badge;
-}
-
-.listitem-badge.success {
-  @apply bg-success;
-}
-
-.listitem-badge.danger {
-  @apply bg-danger;
-}
-
-.listitem[open] > .listitem-header .listitem-badge {
-  border-bottom-left-radius: 0;
-}
-
-.listitem-badge .counter {
-  @apply flex justify-center items-center text-center w-icon h-icon m-0 font-semibold text-black bg-white;
-  border-radius: 50%;
-}
-
-.listitem-title {
-  @apply flex-grow pt-xs px-sm overflow-hidden mb-xs text-base;
-  grid-area: title;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  line-height: 1.4;
-}
-
-.listitem-label {
-  @apply inline text-label ml-xs;
-}
-
-.listitem-metrics {
-  @apply relative flex flex-wrap px-sm sm:pt-xs;
-  grid-area: metrics;
-}
-
-.listitem-metric {
-  @apply flex mr-xs mb-xs last:mr-0;
-  & .icon {
-    @apply mr-xxs; 
-  }
-}
-
-.listitem-actions {
-  @apply flex relative items-stretch justify-end -mt-1px -mr-1px;
-  grid-area: actions;
-}
-
-.listitem-actions summary {
-  @apply contents;
-}
-
-.listitem-actions .btn {
-  @apply h-full rounded-none ml-1px last:rounded-r;
-}
-
-.listitem-actions .btn-secondary {
-  @apply px-xs border-transparent;
-}
-
-.listitem-content {
-  @apply p-sm;
-}
-
-.listitem-card {
-  @apply relative mb-md p-sm bg-white rounded last:mb-0;
-}
-
-.listitem-card img {
-  @apply max-w-full;
-}
-
-.listitem-subheadline {
-  @apply mb-xs text-label font-semibold uppercase;
-}
-
-.listitem[open] > .listitem-header .listitem-actions .btn {
-  @apply rounded-b-none;
-}
-
-.listitem .section-collapsable {
-  @apply mb-md;
-}
-
-.listitem .section-header::after {
-  @apply border-gray-light;
-}
-
-.listitem .section-header .section-title {
-  @apply bg-card;
-} 
-
-
-/* ////// Nested listitems, Styles for white listitems ////// */
-
-.listitem-content .listitem {
-  @apply bg-white;
-}
-
-.listitem-content .listitem[open] > .listitem-header,
-.listitem.white[open] > .listitem-header {
-  @apply border-b-1 border-card;
-}
-
-.listitem-content .listitem .listitem-card,
-.listitem.white .listitem-card {
-  @apply bg-gray-lightest;
-}
-
-.listitem-content .listitem .section-header::after,
-.listitem.white .section-header::after {
-  @apply border-b-1 border-bordercolor;
-}
-
-.listitem-content .listitem .section-header .section-title,
-.listitem.white .section-header .section-title {
-  @apply bg-white;
-}
-
-
-/*//////// Listitem selectable ////////*/
-
-.listitem-check input {
-  @apply hidden;
-}
-
-.listitem-check {
-  @apply flex justify-center items-center w-btn;
-  grid-area: badge;
-}
-
-.listitem-check label {
-  @apply flex justify-center items-center cursor-pointer w-full h-full mb-0 bg-transparent rounded-l border-r-1 border-white;
-}
-
-.listitem-check label::after {
-  @apply inline-block h-md w-md bg-white border-1 border-primary rounded;
-  content: "";
-}
-
-.listitem-check input:checked + label {
-  @apply bg-info;
-}
-
-.listitem-check input:checked + label::after {
-  border: none;
-}
-
-.listitem-check input:checked + label::before {
-  @apply absolute inline-block h-md w-md bg-info;
-  content: "";
-  mask-image: url("/assets/images/checkbox-background-white.svg");
-  mask-repeat: no-repeat;
-}
-
-.listitem[open] .listitem-check label {
-  @apply rounded-bl-none;
-}
-
-
-/*////// Listitem with action footer //////*/
-
-.listitem-with-footer .listitem {
-  @apply mb-0 rounded-b-none;
-}
-
-.listitem-with-footer .listitem-badge {
-  @apply rounded-bl-none;
-}
-
-.listitem-with-footer .listitem-actions .btn:last-child {
-  @apply rounded-br-none;
-}
-
-.listitem-with-footer .listitem-footer {
-  @apply flex w-full;
-}
-
-.listitem-with-footer .listitem-footer .btn {
-  @apply px-sm m-0 rounded-none border-l-1 border-white;
-
-  &:first-child {
-    @apply rounded-bl border-l-0;
-  }
-
-  &:last-child {
-    @apply rounded-br;
-  }
-}
-
-.listitem-with-footer .listitem-footer .dropdown-actions .btn {
-  @apply border-l-1 border-white rounded-bl-none;
-}
-
-.listitem-with-footer .listitem-footer .btn-primary {
-  @apply flex-grow;
-}
-
-.listitem-with-footer .listitem-footer .btn-secondary {
-  @apply flex-1 text-white bg-primary border-t-0 border-r-0 border-b-0;
-  &:hover, &:focus, &:active {
-    @apply bg-link-hover;
-  }
-}
-
-.listitem-with-footer .listitem-footer .btn-square {
-  @apply flex-auto flex-grow-0 flex-shrink-0;
-}
+
+.list-listitems .listitem,
+.list-listitems .listitem-with-footer {
+  @apply mb-xs; 
+}
+
+.listitem, 
+details.listitem .listitem-header {
+  @apply relative grid items-stretch border-0 grid-rows-auto-auto grid-cols-auto-fr-auto sm:grid-cols-auto-fr-2-auto select-none;
+  grid-template-areas:  "badge title actions"
+                        "badge metrics actions";
+  grid-template-columns: auto 1fr auto;
+
+  @screen sm {
+    grid-template-areas:  "badge title metrics actions";
+  }
+}
+
+details.listitem .listitem-title {
+  @apply cursor-pointer hover:text-link-hover;
+}
+
+.listitem {
+  @apply bg-card rounded border;
+}
+
+details.listitem {
+  grid: none;
+}
+
+.listitem-with-footer {
+  @apply grid;
+}
+
+.listitem.white {
+  @apply text-black bg-white;
+}
+
+a.listitem:hover {
+  @apply text-white bg-link-hover border-link-hover;
+  .icon {
+    @apply text-white;
+  }
+}
+
+.listitem[open] > .listitem-header {
+  @apply border-b-1 border-white rounded-t;
+}
+
+.listitem .collapse-btn {
+  @apply justify-center items-start w-btn p-xxs pt-xs;
+  &:hover:after {
+    @apply bg-white;
+  }
+}
+
+.listitem[open] > .listitem-header .collapse-btn {
+  @apply rounded-none last:rounded-tr;
+  border-radius: 0;
+}
+
+.listitem .collapse-btn:after {
+  @apply inline-block w-sm h-icon bg-primary;
+  content: "";
+  mask-image: url("/assets/images/arrow-down.svg");
+  mask-repeat: no-repeat;
+}
+
+.listitem[open] > .listitem-header .collapse-btn:after {
+  mask-image: url("/assets/images/arrow-up.svg");
+}
+
+.listitem-badge {
+  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black rounded-l;
+  grid-area: badge;
+}
+
+.listitem-badge.success {
+  @apply bg-success;
+}
+
+.listitem-badge.danger {
+  @apply bg-danger;
+}
+
+.listitem[open] > .listitem-header .listitem-badge {
+  border-bottom-left-radius: 0;
+}
+
+.listitem-badge .counter {
+  @apply flex justify-center items-center text-center w-icon h-icon m-0 font-semibold text-black bg-white;
+  border-radius: 50%;
+}
+
+.listitem-title {
+  @apply flex-grow pt-xs px-sm overflow-hidden mb-xs text-base;
+  grid-area: title;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: 1.4;
+}
+
+.listitem-label {
+  @apply inline text-label ml-xs;
+}
+
+.listitem-metrics {
+  @apply relative flex flex-wrap px-sm sm:pt-xs;
+  grid-area: metrics;
+}
+
+.listitem-metric {
+  @apply flex mr-xs mb-xs last:mr-0;
+  & .icon {
+    @apply mr-xxs; 
+  }
+}
+
+.listitem-actions {
+  @apply flex relative items-stretch justify-end -mt-1px -mr-1px;
+  grid-area: actions;
+}
+
+.listitem-actions summary {
+  @apply contents;
+}
+
+.listitem-actions .btn {
+  @apply h-full rounded-none ml-1px last:rounded-r;
+}
+
+.listitem-actions .btn-secondary {
+  @apply px-xs border-transparent;
+}
+
+.listitem-content {
+  @apply p-sm;
+}
+
+.listitem-card {
+  @apply relative mb-md p-sm bg-white rounded last:mb-0;
+}
+
+.listitem-card img {
+  @apply max-w-full;
+}
+
+.listitem-subheadline {
+  @apply mb-xs text-label font-semibold uppercase;
+}
+
+.listitem[open] > .listitem-header .listitem-actions .btn {
+  @apply rounded-b-none;
+}
+
+.listitem .section-collapsable {
+  @apply mb-md;
+}
+
+.listitem .section-header::after {
+  @apply border-gray-light;
+}
+
+.listitem .section-header .section-title {
+  @apply bg-card;
+} 
+
+
+/* ////// Nested listitems, Styles for white listitems ////// */
+
+.listitem-content .listitem {
+  @apply bg-white;
+}
+
+.listitem-content .listitem[open] > .listitem-header,
+.listitem.white[open] > .listitem-header {
+  @apply border-b-1 border-card;
+}
+
+.listitem-content .listitem .listitem-card,
+.listitem.white .listitem-card {
+  @apply bg-gray-lightest;
+}
+
+.listitem-content .listitem .section-header::after,
+.listitem.white .section-header::after {
+  @apply border-b-1 border-bordercolor;
+}
+
+.listitem-content .listitem .section-header .section-title,
+.listitem.white .section-header .section-title {
+  @apply bg-white;
+}
+
+
+/*//////// Listitem selectable ////////*/
+
+.listitem-check input {
+  @apply hidden;
+}
+
+.listitem-check {
+  @apply flex justify-center items-center w-btn;
+  grid-area: badge;
+}
+
+.listitem-check label {
+  @apply flex justify-center items-center cursor-pointer w-full h-full mb-0 bg-transparent rounded-l border-r-1 border-white;
+}
+
+.listitem-check label::after {
+  @apply inline-block h-md w-md bg-white border-1 border-primary rounded;
+  content: "";
+}
+
+.listitem-check input:checked + label {
+  @apply bg-info;
+}
+
+.listitem-check input:checked + label::after {
+  border: none;
+}
+
+.listitem-check input:checked + label::before {
+  @apply absolute inline-block h-md w-md bg-info;
+  content: "";
+  mask-image: url("/assets/images/checkbox-background-white.svg");
+  mask-repeat: no-repeat;
+}
+
+.listitem[open] .listitem-check label {
+  @apply rounded-bl-none;
+}
+
+
+/*////// Listitem with action footer //////*/
+
+.listitem-with-footer .listitem {
+  @apply mb-0 rounded-b-none;
+}
+
+.listitem-with-footer .listitem-badge {
+  @apply rounded-bl-none;
+}
+
+.listitem-with-footer .listitem-actions .btn:last-child {
+  @apply rounded-br-none;
+}
+
+.listitem-with-footer .listitem-footer {
+  @apply flex w-full;
+}
+
+.listitem-with-footer .listitem-footer .btn {
+  @apply px-sm m-0 rounded-none border-l-1 border-white;
+
+  &:first-child {
+    @apply rounded-bl border-l-0;
+  }
+
+  &:last-child {
+    @apply rounded-br;
+  }
+}
+
+.listitem-with-footer .listitem-footer .dropdown-actions .btn {
+  @apply border-l-1 border-white rounded-bl-none;
+}
+
+.listitem-with-footer .listitem-footer .btn-primary {
+  @apply flex-grow;
+}
+
+.listitem-with-footer .listitem-footer .btn-secondary {
+  @apply flex-1 text-white bg-primary border-t-0 border-r-0 border-b-0;
+  &:hover, &:focus, &:active {
+    @apply bg-link-hover;
+  }
+}
+
+.listitem-with-footer .listitem-footer .btn-square {
+  @apply flex-auto flex-grow-0 flex-shrink-0;
+}