testio-tailwind 0.1.0

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

@@ -0,0 +1,480 @@
+nav.sidebar,
+.mobile-menu.sidebar {
+  @apply hidden relative w-full h-auto flex-col flex-shrink-0 p-xs bg-header sm:w-sidebar sm:overflow-hidden md:flex;
+  grid-area: sidebar;
+  overflow-x: auto;
+  overflow-y: scroll;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+  z-index: 0;
+  border-right: none;
+}
+
+nav.sidebar::-webkit-scrollbar,
+nav.sidebar .navlinks::-webkit-scrollbar {
+  display: none;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.sidebar .navlinks {
+  @apply overflow-y-scroll pb-spacing;
+}
+
+.sidebar .navlink,
+.sidebar a.navlink, 
+.sidebar.mobile-menu .navlink,
+.sidebar .header-dropdown .navlink,
+.sidebar .header-dropdown .dropdown-link {
+  @apply relative flex h-auto w-full items-start justify-start p-xs text-navlinks font-navlinks leading-tight text-white rounded;
+  margin-bottom: 1px;
+  user-select: none;
+  
+  & .icon {
+    @apply w-spacing flex-shrink-0;
+  }
+  &:hover, 
+  &:focus,
+  &.active:hover, 
+  &.active:focus {
+    @apply text-white bg-petrol-800;
+  }
+
+  &:hover .icon {
+    @apply text-white;
+  }
+
+  &.active {
+    @apply text-link-hover bg-petrol-800;
+  }
+  &.active .icon {
+    @apply text-link-hover flex-shrink-0;
+  }
+  &.active .recording-icon {
+    @apply text-danger;
+  }
+  &.active:hover .icon {
+    @apply text-white;
+  }
+  &:last-child {
+    @apply mb-0;
+  }
+}
+
+
+.sidebar .navlink .icon-wrapper {
+  @apply w-spacing;
+}
+
+.sidebar .navlink .recording-icon,
+.sidebar.tester .navlink .recording-icon,
+.sidebar.tester .navlink .icon.recording-icon {
+  @apply absolute left-xs top-xs text-danger;
+}
+
+.sidebar .navlink .text-wrapper {
+  @apply flex flex-col;
+}
+
+.sidebar-title {
+  @apply w-auto -ml-xs my-xs py-xs text-white text-center text-heading-5 font-light border-b-1 border-gray-darkest;
+}
+
+.sidebar-title + .navlink {
+  @apply mt-xs;
+}
+
+.sidebar-divider {
+  @apply block w-auto h-1px my-xs -mx-xs bg-gray-800;
+}
+
+.sidebar-label {
+  @apply block text-label-color text-label ml-xs my-xs;
+}
+
+/*/////// Collapsable ///////*/
+
+.sidebar summary.navlink,
+.sidebar .header-dropdown summary.navlink {
+  @apply relative cursor-pointer pr-spacing;
+  &:hover::after {
+    @apply bg-teal-300;
+  }
+}
+
+.sidebar summary.navlink:after,
+.sidebar .header-dropdown summary.navlink::after {
+  @apply inline-block absolute right-xxs w-icon-xs h-icon-xs bg-white;
+  content: "";
+  top: 12px;
+  mask-image: url("/assets/images/triangle-centered-left.svg");
+  mask-repeat: no-repeat;
+}
+
+.sidebar details[open] summary.navlink:after,
+.sidebar .header-dropdown[open] summary.navlink::after {
+  mask-image: url("/assets/images/triangle-centered-down.svg");
+  mask-repeat: no-repeat;
+}
+
+.sidebar details[open],
+.header .sidebar details[open],
+.sidebar .header-dropdown[open] {
+  @apply flex flex-col items-stretch mb-xxs rounded bg-gray-darkest;
+  padding: 0 0 1px 0;
+}
+
+.sidebar details[open] .navlink,
+.sidebar .header-dropdown[open] .navlink {
+  @apply w-auto mx-xxs;
+  &:last-child {
+    @apply mb-xxs;
+  }
+}
+
+.sidebar details[open] summary.navlink,
+.header .sidebar details[open] summary.navlink,
+.sidebar .header-dropdown[open] summary.navlink {
+  @apply mx-0;
+}
+
+
+.sidebar .header-dropdown[open] .dropdown-menu {
+  @apply relative w-full max-w-full h-auto top-auto left-auto contents;
+  max-height: max-content;
+}
+
+.sidebar summary:focus {
+  outline: none;
+}
+
+.seatslot {
+  @apply relative flex items-start justify-start h-auto w-full mb-xxs p-xs text-base font-semibold select-none border border-dashed border-gray-darker text-gray-darker rounded;
+  line-height: 1.5;
+
+  &::before {
+    @apply inline-block w-icon h-icon mr-xs bg-gray-darker;
+    content: "";
+    mask-image: url("/assets/images/seat.svg");
+    mask-repeat: no-repeat;
+  }
+}
+
+/*/ Test cycle navlink with more info and actions */
+
+.navlink.test-cycle {
+  @apply justify-between items-stretch mb-xxs p-0 bg-gray-darker text-white;
+}
+
+.navlink-wrapper {
+  @apply flex flex-row p-xs;
+  pointer-events: all;
+}
+
+.navlink-info {
+  @apply text-white;
+}
+
+.navlink-title {
+  @apply text-base font-semibold;
+  line-height: 1.2;
+}
+
+.navlink-meta {
+  @apply text-xs;
+  line-height: 1.2;
+}
+
+.navlink .dropdown-actions .btn {
+  @apply justify-center items-center w-btn h-full px-0 border-0 border-l-1 border-gray-900 rounded-l-none;
+}
+
+.navlink .dropdown-actions summary .icon {
+  @apply w-auto;
+}
+
+.navlink .dropdown-actions[open] {
+  margin-bottom: 0;
+}
+
+.navlink.test-cycle .dropdown-actions .btn:hover .icon,
+.navlink.test-cycle .dropdown-actions .btn:focus .icon,
+.navlink.active.test-cycle .dropdown-actions .btn:hover .icon,
+.navlink.active.test-cycle .dropdown-actions .btn:focus .icon,
+.sidebar .navlink.test-cycle .dropdown-actions .popover-action .icon,
+.sidebar .navlink.active.test-cycle .dropdown-actions .popover-action .icon,
+.navlink.test-cycle .dropdown-actions .popover-action:hover .icon,
+.navlink.test-cycle .dropdown-actions .popover-action:focus .icon,
+.navlink.active.test-cycle .dropdown-actions .popover-action:hover .icon,
+.navlink.active.test-cycle .dropdown-actions .popover-action:focus .icon {
+  @apply text-white;
+}
+
+.navlink .popover-menu {
+  @apply max-w-44;
+}
+
+
+/*/////// Marked collapse with color coding, f.e. for sections ///////*/
+ 
+.sidebar details.marked-collapse.purple summary.navlink:hover,
+.sidebar details.marked-collapse.purple summary.navlink:focus,
+.sidebar details.marked-collapse.pink summary.navlink:hover,
+.sidebar details.marked-collapse.pink summary.navlink:focus,
+.sidebar details.marked-collapse.yellow summary.navlink:hover,
+.sidebar details.marked-collapse.yellow summary.navlink:focus,
+.sidebar details.marked-collapse.red-light summary.navlink:hover,
+.sidebar details.marked-collapse.red-light summary.navlink:focus,
+.sidebar details.marked-collapse.orange summary.navlink:hover,
+.sidebar details.marked-collapse.orange summary.navlink:focus {
+  @apply bg-gray-800;
+}
+
+/*/ Purple /*/
+
+.sidebar details.marked-collapse.purple .navlink .icon {
+  @apply text-purple-500;
+}
+
+.sidebar details.marked-collapse.purple .navlink:hover,
+.sidebar details.marked-collapse.purple .navlink:focus,
+.sidebar details.marked-collapse.purple .navlink.active:hover {
+  @apply text-purple-500 bg-gray-700;
+  .icon {
+    @apply text-purple-500;
+  }
+  &:after {
+    @apply bg-purple-500;
+  }
+}
+
+.sidebar details.marked-collapse.purple .navlink.active {
+  @apply text-white bg-purple-500;
+  .icon {
+    @apply text-white;
+  }
+}
+
+
+/*/ Orange /*/
+
+.sidebar details.marked-collapse.orange .navlink .icon {
+  @apply text-orange-500;
+}
+
+.sidebar details.marked-collapse.orange .navlink:hover,
+.sidebar details.marked-collapse.orange .navlink:focus,
+.sidebar details.marked-collapse.orange .navlink.active:hover {
+  @apply text-orange-500 bg-gray-700;
+  .icon {
+    @apply text-orange-500;
+  }
+  &:after {
+    @apply bg-orange-500;
+  }
+}
+
+.sidebar details.marked-collapse.orange .navlink.active {
+  @apply text-gray-800 bg-orange-500;
+
+  .icon {
+    @apply text-gray-800;
+  }
+}
+
+
+/*/ Yellow /*/
+
+.sidebar details.marked-collapse.yellow .navlink .icon {
+  @apply text-yellow-500;
+}
+
+.sidebar details.marked-collapse.yellow .navlink:hover,
+.sidebar details.marked-collapse.yellow .navlink:focus,
+.sidebar details.marked-collapse.yellow .navlink.active:hover {
+  @apply text-yellow-500 bg-gray-700;
+  .icon {
+    @apply text-yellow-500;
+  }
+  &:after {
+    @apply bg-yellow-500;
+  }
+}
+
+.sidebar details.marked-collapse.yellow .navlink.active {
+  @apply bg-yellow-500 text-gray-800;
+  .icon {
+    @apply text-gray-800;
+  }
+}
+
+
+/*/ Red-light /*/
+
+.sidebar details.marked-collapse.red-light .navlink .icon {
+  @apply text-red-200;
+}
+
+.sidebar details.marked-collapse.red-light .navlink:hover,
+.sidebar details.marked-collapse.red-light .navlink:focus,
+.sidebar details.marked-collapse.red-light .navlink.active:hover  {
+  @apply text-red-200 bg-gray-700;
+
+  .icon {
+    @apply text-red-200;
+  }
+  &:after {
+    @apply bg-red-200;
+  }
+}
+
+.sidebar details.marked-collapse.red-light .navlink.active {
+  @apply text-white bg-red-200;
+
+  .icon {
+    @apply text-white;
+  }
+}
+
+
+/*/ Pink /*/
+
+.sidebar details.marked-collapse.pink .navlink .icon {
+  @apply text-pink-500;
+}
+
+.sidebar details.marked-collapse.pink .navlink:hover,
+.sidebar details.marked-collapse.pink .navlink:focus,
+.sidebar details.marked-collapse.pink .navlink.active:hover {
+  @apply text-pink-500 bg-gray-700;
+
+  .icon {
+    @apply text-pink-500;
+  }
+  &:after {
+    @apply bg-pink-500;
+  }
+}
+
+.sidebar details.marked-collapse.pink .navlink.active {
+  @apply text-white bg-pink-500;
+
+  .icon {
+    @apply text-white;
+  }
+}
+
+
+/*/ Blue /*/
+
+.sidebar details.marked-collapse.blue .navlink .icon {
+  @apply text-blue-500;
+}
+
+.sidebar details.marked-collapse.blue .navlink:hover,
+.sidebar details.marked-collapse.blue .navlink:focus,
+.sidebar details.marked-collapse.blue .navlink.active:hover {
+  @apply text-blue-500 bg-gray-700;
+
+  .icon {
+    @apply text-blue-500;
+  }
+  &:after {
+    @apply bg-blue-500;
+  }
+}
+
+.sidebar details.marked-collapse.blue .navlink.active {
+  @apply text-white bg-blue-500;
+
+  .icon {
+    @apply text-white;
+  }
+}
+
+
+/*/ Green /*/
+
+.sidebar details.marked-collapse.green .navlink .icon {
+  @apply text-green-500;
+}
+
+.sidebar details.marked-collapse.green .navlink:hover,
+.sidebar details.marked-collapse.green .navlink:focus,
+.sidebar details.marked-collapse.green .navlink.active:hover {
+  @apply text-green-500 bg-gray-700;
+  .icon {
+    @apply text-green-500;
+  }
+  &:after {
+    @apply bg-green-500;
+  }
+}
+
+.sidebar details.marked-collapse.green .navlink.active {
+  @apply text-white bg-green-500;
+
+  .icon {
+    @apply text-white;
+  }
+}
+
+
+/*/////// Profile picture button ///////*/
+
+.sidebar .profilepicture-wrapper {
+  @apply flex content-center sm:block sm:-ml-xs sm:-my-xs;
+}
+
+.sidebar .profilepicture-actions,
+.sidebar .profilepicture-actions summary {
+  @apply relative w-sidebar h-sidebar;
+}
+
+.sidebar .profilepicture-actions[open] {
+  @apply mb-0;
+}
+
+.sidebar .profilepicture-actions .profilepicture {
+  @apply w-sidebar h-sidebar rounded sm:rounded-none;
+}
+
+.sidebar .profilepicture-actions .testerlevel-medal {
+  @apply absolute left-xs top-xs;
+}
+
+/*/ Hover state for profile button /*/
+
+.sidebar .profilepicture-actions summary:hover:before {
+  @apply block absolute w-full h-full left-0 top-0 bg-link-hover rounded sm:rounded-none;
+  content: "";
+  opacity: 0.9;
+}
+
+.sidebar .profilepicture-actions summary:hover:after {
+  @apply block absolute w-icon-xl h-icon-xl left-1/2 top-1/2 -ml-spacing -mt-spacing bg-white;
+  content: "";
+  -webkit-mask-image: url("/assets/images/file-image-plus-xl.svg");
+  mask-image: url("/assets/images/file-image-plus-xl.svg");
+  mask-repeat: no-repeat;
+}
+
+.sidebar .profilepicture-actions[open] .popover-menu {
+  @apply absolute left-xs;
+  top: 100px;
+  width: 180px;
+}
+
+
+/*/ testNow banner /*/
+
+.banner-install-testnow {
+  @apply flex flex-shrink-0 justify-between items-center h-actionbar mt-auto -mx-xs -mb-xs py-xs pr-sm pl-md text-white bg-gray-darkest;
+
+  .icon {
+    @apply text-white;
+  }
+  a.icon:hover {
+    @apply text-link-hover; 
+  }
+}