testio-tailwind 0.1.0

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

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

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

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

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

@@ -0,0 +1,106 @@
+
+.form-group {
+  @apply relative grid grid-cols-1 md:grid-cols-1-3 md:gap-grid-gutter;
+}
+
+.form-label {
+  @apply text-label text-label leading-tight;
+}
+
+.form-group .form-label {
+  @apply pb-xxs md:pt-sm;
+}
+
+.form-group.inverted .form-label {
+  @apply text-label-inverted-color;
+}
+
+.form-control, 
+.form-control-static {
+  @apply h-btn w-full text-base border border-bordercolor;
+}
+
+.form-check .field_with_errors input[type=checkbox],
+.form-check .field_with_errors input[type=checkbox]:checked,
+.form-radio .field_with_errors input[type=radio],
+.form-radio .field_with_errors input[type=radio]:checked,
+.field_with_errors.dropzone,
+.field_with_errors .form-control {
+  @apply border-danger;
+}
+
+.form-check .field_with_errors + label,
+.form-radio .field_with_errors + label,
+.field_with_errors.dropzone .dz-message,
+.field_with_errors .form-label {
+  @apply text-danger;
+}
+
+.form-hint {
+  @apply flex items-start text-sm mt-xs;
+  
+  &::before {
+    @apply inline-block h-icon w-icon mr-xs bg-gray;
+    content: "";
+    flex-shrink: 0;
+    mask-image: url("/assets/images/exclamation-circle.svg");
+    mask-repeat: no-repeat;
+  }
+
+  &.error::before {
+    @apply bg-danger;
+    mask-image: url("/assets/images/exclamation-circle.svg");
+  }
+
+  &.error {
+    @apply text-danger;
+  }
+}
+
+textarea.form-control {
+  @apply h-auto min-h-btn;
+}
+
+.form-control-search {
+  /* padding-right: ($input-padding-x * 3);
+  background-repeat: no-repeat;
+  background-position: center right ($input-height * .25);
+  background-size: ($input-height * .50) ($input-height * .50); */
+}
+
+.form-control-label {
+  @apply flex items-center h-btn p-0;
+  line-height: 1.2;
+}
+
+
+.form-control::placeholder {
+  @apply text-disabled italic;
+}
+
+
+.form-control:disabled, 
+.form-control.disabled, 
+.form-control[readonly] {
+  @apply bg-disabled;
+}
+
+.form-group.with-addon .form-control {
+  @apply pr-lg;
+}
+
+.form-addon {
+  @apply absolute flex justify-center items-center h-btn bottom-0 right-0 px-xs;
+}
+
+.form-date::before {
+  @apply inline-block absolute bottom-xs right-xs h-icon w-icon bg-gray-darker;
+  content: "";
+  mask-image: url("/assets/images/calendar.svg");
+  mask-repeat: no-repeat;
+}
+
+.form-date .form-control {
+  @apply pr-lg;
+}
+

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

@@ -0,0 +1,221 @@
+
+.header {
+  @apply h-header flex items-center bg-header;
+  grid-area: header;
+}
+
+.header .navlinks {
+  @apply flex flex-grow;
+}
+
+.header .navlinks.left {
+  @apply hidden lg:flex;
+}
+
+.header .navlinks.right {
+  @apply justify-end pr-xs lg:pr-spacing;
+}
+
+.header .navlinks.logo-wrapper {
+  @apply flex-grow-0 pl-xs lg:w-sidebar lg:justify-center lg:pl-0;
+}
+
+
+.header .navlink,
+.header a.navlink,
+.header .dropdown-link,
+.header-dropdown .dropdown-link {
+  @apply relative h-btn inline-flex items-center justify-start mr-1px p-xs rounded text-navlinks font-navlinks text-white;
+  line-height: 1.1;
+
+  & span {
+    @apply first:mr-icon-spacing last:mr-0;
+  }
+  & span:only-child {
+    @apply mr-0;
+  }
+  &:hover, &:focus, &.active:hover {
+    @apply text-white bg-petrol-800;
+  }
+  &:hover .icon, &.active:hover .icon {
+    @apply text-white;
+  }
+  &.active {
+    @apply text-link-hover bg-petrol-800;
+  }
+  &.active .icon {
+    @apply text-link-hover;
+  }
+  &:last-child {
+    @apply mr-0;
+  }
+}
+
+.header-dropdown .navlink .icon, 
+.header .dropdown-link .icon,
+.header-dropdown .dropdown-link .icon {
+  @apply w-spacing mr-0 flex-shrink-0 first:mr-0;
+}
+
+.header .navlink.responsive-label {
+  @apply text-hidden xl:text-navlinks;
+}
+
+.header .navlink.responsive-label .icon {
+  @apply w-auto mr-0 xl:mr-icon-spacing;
+}
+
+.header .header-logo::before {
+  @apply block overflow-hidden;
+  content: url("/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg");
+  height: 13px;
+  width: 74px;
+  @screen sm {
+    @apply h-md;
+    width: 128px;
+  }
+} 
+
+
+/*///// Mobile menu /////*/
+
+.header .mobile-links {
+  @apply flex flex-row flex-grow lg:hidden;
+}
+
+.mobile-menu-btn {
+  @apply h-full cursor-pointer;
+}
+
+.mobile-links[open] .mobile-menu.sidebar {
+  @apply fixed flex top-header left-0 z-30 h-screen;
+}
+
+details[open].mobile-links summary.mobile-menu-btn:after {
+  @apply fixed z-10 block h-screen w-screen cursor-pointer bottom-0 left-0 bg-transparent;
+  content: "";
+}
+
+details[open].mobile-links details[open].header-dropdown summary:before {
+  display: none;
+}
+
+details[open].mobile-links .navlinks {
+  @apply flex-col overflow-y-scroll pb-spacing;
+  &::-webkit-scrollbar {
+    @apply hidden;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+
+details[open].mobile-links .toggle-label {
+  @apply ml-xs text-xs font-semibold text-white;
+  user-select: none;
+}
+
+
+/*///// Header dropdown /////*/
+
+.header .dropdown-menu {
+  @apply z-20;
+}
+
+.header-dropdown {
+  @apply relative;
+}
+
+.header-dropdown summary.navlink {
+  @apply relative cursor-pointer;
+}
+
+.header .dropdown-menu .navlink {
+  @apply h-auto min-h-btn;
+}
+
+.header-dropdown summary:after {
+  @apply inline-block bg-white ml-xs;
+  content: "";
+  mask-image: url("/assets/images/triangle-down.svg");
+  mask-repeat: no-repeat;
+  width: 8px;
+  height: 8px;
+}
+
+details[open].header-dropdown summary:after {
+  mask-image: url("/assets/images/triangle-up.svg");
+}
+
+details[open].header-dropdown summary:before {
+  @apply fixed z-10 block h-screen w-screen cursor-pointer bg-transparent bottom-0 left-0;
+  content: "";
+}
+
+details[open].header-dropdown .dropdown-menu {
+  @apply flex flex-col absolute left-0 top-header mt-0 p-xxs text-white bg-header overflow-y-scroll rounded;
+  transform-origin: top right;
+  min-width: 200px;
+  max-height: 500px;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/*///// Header profile dropdown /////*/
+
+.user-menu .btn-profile {
+  @apply relative cursor-pointer;
+} 
+
+.user-menu summary {
+  @apply h-full;
+}
+
+details[open].header-dropdown .dropdown-menu.profile-dropdown {
+  @apply right-0 left-auto;
+  transform-origin: top right;
+}
+
+.header .btn-profile .user-initials {
+  @apply text-black bg-white;
+}
+
+.user-profile {
+  @apply w-spacing h-spacing rounded-full;
+}
+
+.user-details {
+  @apply hidden justify-start flex-col ml-xs xl:flex;
+}
+
+.header .profile-name,
+.header .profile-role {
+  @apply text-label;
+  line-height: 1.1;
+}
+
+/*///// Header toggle /////*/
+
+.header-toggle {
+  @apply flex flex-row items-center pr-xs text-white text-xs;
+  line-height: 1;
+}
+
+.header .toggle-switch {
+  @apply w-btn h-md ml-xs;
+  border-radius: 10px;
+}
+
+.header .toggle-switch .slider:before {
+  width: 16px;
+  height: 16px;
+}
+
+.header .toggle-switch .slider {
+  @apply bg-gray-darker;
+}
+
+.header .toggle-switch input:checked + .slider:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}