testio-tailwind 0.2.0 → 0.2.2

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

@@ -1,78 +1,78 @@
-.list-devices {
-  @apply flex flex-wrap;
-}
-
-.list-devices .device,
-.list-devices .device-wrapper {
-  @apply mr-sm mb-xs;
-}
-
-.device {
-  @apply inline-flex flex-wrap;
-  user-select: none;
-}
-
-.device.white {
-  @apply text-white;
-  & .clouddevice-info::before {
-    @apply bg-white;
-  }
-}
-
-.device.outline {
-  @apply p-sm border border-bordercolor rounded;
-}
-
-.device-icon {
-  @apply mr-xs;
-}
-
-.device-info {
-  @apply leading-tight;
-}
-
-.browser-list {
-  @apply flex mt-xxs;
-}
-
-.browser-list li {
-  @apply mr-xxs;
-}
-
-.clouddevice-info {
-  @apply flex items-center w-full flex-shrink-0 mt-xxs text-label;
-}
-
-.clouddevice-info::before {
-  @apply inline-block bg-black h-icon mr-icon-spacing;
-  content: "";
-  mask-image: url("/assets/images/logo-mobile-cloud.svg");
-  mask-repeat: no-repeat;
-  width: 27px;
-} 
-
-/*/ Device with actions /*/
-
-.device-wrapper {
-  @apply flex;
-}
-
-.device-wrapper .device {
-  @apply p-sm m-0 text-white border-0 rounded-l bg-primary;
-  & .clouddevice-info::before {
-    @apply bg-white;
-  }
-}
-
-.device-wrapper .device-actions {
-  @apply flex flex-col flex-shrink-0 w-spacing ml-1px text-white bg-primary rounded-r;
-
-}
-
-.device-wrapper .device-actions a {
-  @apply flex items-center justify-center flex-1 min-h-spacing text-white border-t-1 first:border-t-0 rounded-none first:rounded-tr last:rounded-br border-white;
-
-  &:hover {
-    @apply bg-link-hover;
-  }
+.list-devices {
+  @apply flex flex-wrap;
+}
+
+.list-devices .device,
+.list-devices .device-wrapper {
+  @apply mr-sm mb-xs;
+}
+
+.device {
+  @apply inline-flex flex-wrap;
+  user-select: none;
+}
+
+.device.white {
+  @apply text-white;
+  & .clouddevice-info::before {
+    @apply bg-white;
+  }
+}
+
+.device.outline {
+  @apply p-sm border border-bordercolor rounded;
+}
+
+.device-icon {
+  @apply mr-xs;
+}
+
+.device-info {
+  @apply leading-tight;
+}
+
+.browser-list {
+  @apply flex mt-xxs;
+}
+
+.browser-list li {
+  @apply mr-xxs;
+}
+
+.clouddevice-info {
+  @apply flex items-center w-full flex-shrink-0 mt-xxs text-label;
+}
+
+.clouddevice-info::before {
+  @apply inline-block bg-black h-icon mr-icon-spacing;
+  content: "";
+  mask-image: url("/assets/images/logo-mobile-cloud.svg");
+  mask-repeat: no-repeat;
+  width: 27px;
+} 
+
+/*/ Device with actions /*/
+
+.device-wrapper {
+  @apply flex;
+}
+
+.device-wrapper .device {
+  @apply p-sm m-0 text-white border-0 rounded-l bg-primary;
+  & .clouddevice-info::before {
+    @apply bg-white;
+  }
+}
+
+.device-wrapper .device-actions {
+  @apply flex flex-col flex-shrink-0 w-spacing ml-1px text-white bg-primary rounded-r;
+
+}
+
+.device-wrapper .device-actions a {
+  @apply flex items-center justify-center flex-1 min-h-spacing text-white border-t-1 first:border-t-0 rounded-none first:rounded-tr last:rounded-br border-white;
+
+  &:hover {
+    @apply bg-link-hover;
+  }
 }

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

@@ -1,100 +1,100 @@
-
-details[open].drawer-wrapper .drawer {
-  @apply top-header w-meta-sidebar-width pt-md pb-lg px-spacing text-white bg-header border-t-1 border-black;
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  right: 0;
-  z-index: 40;
-  height: 100vh;
-  max-height: 100vh;
-}
-
-details[open].drawer-wrapper .drawer-trigger::before {
-  @apply top-header;
-  content: "";
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  left: 0;
-  z-index: 2;
-  background-color: rgba(0,0,0,.75);
-}
-
-.drawer-trigger {
-  cursor: pointer;
-}
-
-details .drawer-trigger .close-btn {
-  display: none;
-}
-
-
-details[open] .drawer-trigger .close-btn {
-  @apply top-header text-white rounded-none hover:bg-link-hover hover:text-white;
-  position: fixed;
-  display: inline-flex;
-  right: 0;
-  cursor: pointer;
-  z-index: 41;
-}
-
-.drawer-header {
-  position: relative;
-}
-
-.drawer-title {
-  @apply pb-xs text-heading-4;
-}
-
-.drawer-content {
-  @apply pt-xs pb-spacing;
-  position: relative;
-  flex: 1;
-  overflow-y: scroll;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.drawer-content::-webkit-scrollbar {
-  display: none;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.drawer-footer {
-  @apply h-actionbar bg-info px-spacing -mx-spacing;
-  display: flex;
-  align-items: center;
-}
-
-.drawer-footer .btn {
-  @apply mr-xs last:mr-0;
-}
-
-.drawer-footer .btn-primary {
-  @apply text-primary bg-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
-}
-
-.drawer-footer .btn-secondary {
-  @apply text-white bg-transparent border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
-}
-
-.drawer-content .section-header,
-.drawer-content .section-collapsable .section-title {
-  @apply text-white;
-  &::before {
-    @apply bg-white;
-  }
-  &::after {
-    @apply border-gray-darker;
-  }
-  .section-title {
-    @apply bg-header;
-  }
-}
-
-.drawer-content .icon-user-story {
-  @apply text-white;
+
+details[open].drawer-wrapper .drawer {
+  @apply top-header w-meta-sidebar-width pt-md pb-lg px-spacing text-white bg-header border-t-1 border-black;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  right: 0;
+  z-index: 40;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+details[open].drawer-wrapper .drawer-trigger::before {
+  @apply top-header;
+  content: "";
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  z-index: 2;
+  background-color: rgba(0,0,0,.75);
+}
+
+.drawer-trigger {
+  cursor: pointer;
+}
+
+details .drawer-trigger .close-btn {
+  display: none;
+}
+
+
+details[open] .drawer-trigger .close-btn {
+  @apply top-header text-white rounded-none hover:bg-link-hover hover:text-white;
+  position: fixed;
+  display: inline-flex;
+  right: 0;
+  cursor: pointer;
+  z-index: 41;
+}
+
+.drawer-header {
+  position: relative;
+}
+
+.drawer-title {
+  @apply pb-xs text-heading-4;
+}
+
+.drawer-content {
+  @apply pt-xs pb-spacing;
+  position: relative;
+  flex: 1;
+  overflow-y: scroll;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.drawer-content::-webkit-scrollbar {
+  display: none;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.drawer-footer {
+  @apply h-actionbar bg-info px-spacing -mx-spacing;
+  display: flex;
+  align-items: center;
+}
+
+.drawer-footer .btn {
+  @apply mr-xs last:mr-0;
+}
+
+.drawer-footer .btn-primary {
+  @apply text-primary bg-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
+}
+
+.drawer-footer .btn-secondary {
+  @apply text-white bg-transparent border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
+}
+
+.drawer-content .section-header,
+.drawer-content .section-collapsable .section-title {
+  @apply text-white;
+  &::before {
+    @apply bg-white;
+  }
+  &::after {
+    @apply border-gray-darker;
+  }
+  .section-title {
+    @apply bg-header;
+  }
+}
+
+.drawer-content .icon-user-story {
+  @apply text-white;
 }

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

@@ -1,92 +1,92 @@
-
-.dropdown-actions,
-.dropdown-wrapper,
-.popover-wrapper {
-  @apply relative;
-  width: fit-content;
-}
-
-details.dropdown-actions[open] summary:after,
-.dropdown-wrapper[open] summary:after,
-.popover-wrapper[open] summary:after {
-  @apply fixed block h-screen w-screen cursor-pointer bg-transparent bottom-0 left-0 z-10;
-  content: "";
-}
-
-.popover-menu, 
-.dropdown-menu {
-  @apply flex-col overflow-hidden w-popover-width p-xxs bg-primary text-white rounded;
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-details.dropdown-actions[open] .dropdown-menu, 
-details.dropdown-actions[open] .popover-menu,
-.dropdown-wrapper[open] .dropdown-menu,
-.popover-wrapper[open] .popover-menu {
-  @apply flex absolute top-btn left-0 mt-0.5 z-50;
-}
-
-details.dropdown-actions[open].dropup .dropdown-menu,
-details.dropdown-actions[open].dropup .popover-menu,
-.dropdown-wrapper[open].dropup .dropdown-menu,
-.popover-wrapper[open].dropup .popover-menu {
-  @apply bottom-btn top-auto mt-0;
-  margin-bottom: 2px;
-}
-
-details.dropdown-actions[open].dropright .dropdown-menu,
-details.dropdown-actions[open].dropright .popover-menu,
-.dropdown-wrapper[open].dropright .dropdown-menu,
-.popover-wrapper[open].dropright .popover-menu {
-  @apply right-0 left-auto;
-}
-
-.popover-menu .popover-action, 
-.dropdown-menu .dropdown-action {
-  @apply relative flex items-center justify-start mb-1px p-xs text-base text-white rounded;
-  font-weight: 600;
-  line-height: 1.2;
-
-  & .icon {
-    @apply w-spacing;
-  }
-
-  &:hover, &:focus {
-    @apply text-white bg-link-hover;
-  }
-  &:hover .icon, &:focus .icon {
-    @apply text-white;
-  }
-  &.active {
-    @apply text-link-hover bg-petrol-800;
-  }
-  &.active .icon {
-    @apply text-link-hover;
-  }
-  &:last-child {
-    @apply mb-0;
-  }
-}
-
-/*/// Info popover  ///*/
-
-.popover-menu.info, 
-.dropdown-menu.info {
-  @apply p-sm bg-petrol-800;
-}
-
-.popover-menu.info .popover-title, 
-.dropdown-menu.info .popover-title {
-  @apply text-base font-semibold mb-xxs;
-  line-height: 1.1;
-}
-
-.popover-menu.info .popover-content, 
-.dropdown-menu.info .popover-content {
-  @apply text-sm;
-}
-
-.popover-menu.info .popover-actions, 
-.dropdown-menu.info .popover-actions {
-  @apply mt-xs;
-}
+
+.dropdown-actions,
+.dropdown-wrapper,
+.popover-wrapper {
+  @apply relative;
+  width: fit-content;
+}
+
+details.dropdown-actions[open] summary:after,
+.dropdown-wrapper[open] summary:after,
+.popover-wrapper[open] summary:after {
+  @apply fixed block h-screen w-screen cursor-pointer bg-transparent bottom-0 left-0 z-10;
+  content: "";
+}
+
+.popover-menu, 
+.dropdown-menu {
+  @apply flex-col overflow-hidden w-popover-width p-xxs bg-primary text-white rounded;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+details.dropdown-actions[open] .dropdown-menu, 
+details.dropdown-actions[open] .popover-menu,
+.dropdown-wrapper[open] .dropdown-menu,
+.popover-wrapper[open] .popover-menu {
+  @apply flex absolute top-btn left-0 mt-0.5 z-50;
+}
+
+details.dropdown-actions[open].dropup .dropdown-menu,
+details.dropdown-actions[open].dropup .popover-menu,
+.dropdown-wrapper[open].dropup .dropdown-menu,
+.popover-wrapper[open].dropup .popover-menu {
+  @apply bottom-btn top-auto mt-0;
+  margin-bottom: 2px;
+}
+
+details.dropdown-actions[open].dropright .dropdown-menu,
+details.dropdown-actions[open].dropright .popover-menu,
+.dropdown-wrapper[open].dropright .dropdown-menu,
+.popover-wrapper[open].dropright .popover-menu {
+  @apply right-0 left-auto;
+}
+
+.popover-menu .popover-action, 
+.dropdown-menu .dropdown-action {
+  @apply relative flex items-center justify-start mb-1px p-xs text-base text-white rounded;
+  font-weight: 600;
+  line-height: 1.2;
+
+  & .icon {
+    @apply w-spacing;
+  }
+
+  &:hover, &:focus {
+    @apply text-white bg-link-hover;
+  }
+  &:hover .icon, &:focus .icon {
+    @apply text-white;
+  }
+  &.active {
+    @apply text-link-hover bg-petrol-800;
+  }
+  &.active .icon {
+    @apply text-link-hover;
+  }
+  &:last-child {
+    @apply mb-0;
+  }
+}
+
+/*/// Info popover  ///*/
+
+.popover-menu.info, 
+.dropdown-menu.info {
+  @apply p-sm bg-petrol-800;
+}
+
+.popover-menu.info .popover-title, 
+.dropdown-menu.info .popover-title {
+  @apply text-base font-semibold mb-xxs;
+  line-height: 1.1;
+}
+
+.popover-menu.info .popover-content, 
+.dropdown-menu.info .popover-content {
+  @apply text-sm;
+}
+
+.popover-menu.info .popover-actions, 
+.dropdown-menu.info .popover-actions {
+  @apply mt-xs;
+}

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

@@ -1,42 +1,42 @@
-.empty-state-message {
-  @apply flex flex-col items-center justify-start text-gray-dark text-center;
-  line-height: 1.2;
-}
-
-.empty-state-message.horizontal {
-  @apply flex-row items-center justify-center text-left;
-  &::before {
-    @apply mr-md mb-0;
-  }
-}
-
-.empty-state-message::before {
-  @apply block w-icon-xl h-icon-xl mb-xs bg-gray-dark;
-  content: "";
-  mask-image: url("/assets/images/bug-sleeping-xl.svg");
-  mask-repeat: no-repeat;
-}
-
-.empty-state-message.sad::before {
-  mask-image: url("/assets/images/bug-sad-xl.svg");
-}
-
-.empty-state-message.search::before {
-  mask-image: url("/assets/images/bug-search-xl.svg");
-}
-
-.empty-state-message.smile::before {
-  mask-image: url("/assets/images/bug-smile-xl.svg");
-}
-
-.empty-state-message.deceased::before {
-  mask-image: url("/assets/images/bug-deceased-xl.svg");
-}
-
-.empty-state-message.chat::before {
-  mask-image: url("/assets/images/bug-chat-xl.svg");
-}
-
-.empty-state-message.bell::before {
-  mask-image: url("/assets/images/bell-smile-xl.svg");
+.empty-state-message {
+  @apply flex flex-col items-center justify-start text-gray-dark text-center;
+  line-height: 1.2;
+}
+
+.empty-state-message.horizontal {
+  @apply flex-row items-center justify-center text-left;
+  &::before {
+    @apply mr-md mb-0;
+  }
+}
+
+.empty-state-message::before {
+  @apply block w-icon-xl h-icon-xl mb-xs bg-gray-dark;
+  content: "";
+  mask-image: url("/assets/images/bug-sleeping-xl.svg");
+  mask-repeat: no-repeat;
+}
+
+.empty-state-message.sad::before {
+  mask-image: url("/assets/images/bug-sad-xl.svg");
+}
+
+.empty-state-message.search::before {
+  mask-image: url("/assets/images/bug-search-xl.svg");
+}
+
+.empty-state-message.smile::before {
+  mask-image: url("/assets/images/bug-smile-xl.svg");
+}
+
+.empty-state-message.deceased::before {
+  mask-image: url("/assets/images/bug-deceased-xl.svg");
+}
+
+.empty-state-message.chat::before {
+  mask-image: url("/assets/images/bug-chat-xl.svg");
+}
+
+.empty-state-message.bell::before {
+  mask-image: url("/assets/images/bell-smile-xl.svg");
 }

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

@@ -1,21 +1,21 @@
-.form-card {
-  @apply p-sm bg-gray-lighter rounded;
-}
-
-.form-card-heading {
-  @apply flex mb-xs;
-}
-
-.form-card-title {
-  @apply flex-1 uppercase text-sm;
-}
-
-.form-card .form-control {
-  @apply bg-gray-lightest;
-}
-
-.form-card .form-control:disabled, 
-.form-card .form-control.disabled, 
-.form-card .form-control[readonly] {
-  @apply bg-gray-light;
+.form-card {
+  @apply p-sm bg-gray-lighter rounded;
+}
+
+.form-card-heading {
+  @apply flex mb-xs;
+}
+
+.form-card-title {
+  @apply flex-1 uppercase text-sm;
+}
+
+.form-card .form-control {
+  @apply bg-gray-lightest;
+}
+
+.form-card .form-control:disabled, 
+.form-card .form-control.disabled, 
+.form-card .form-control[readonly] {
+  @apply bg-gray-light;
 }

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

@@ -1,12 +1,12 @@
-.form-grid {
-  @apply grid gap-xs;
-  grid-template-columns: 1fr;
-}
-
-.form-grid.single {
-  grid-template-columns: 1fr;
-}
-
-.form-grid.narrow {
-  @apply gap-xxs;
+.form-grid {
+  @apply grid gap-xs;
+  grid-template-columns: 1fr;
+}
+
+.form-grid.single {
+  grid-template-columns: 1fr;
+}
+
+.form-grid.narrow {
+  @apply gap-xxs;
 }