testio-tailwind 0.1.0

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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");
+}