testio-tailwind 0.2.0 → 0.2.1

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

@@ -1,106 +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;
-}
-
+
+.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

@@ -1,221 +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);
+
+.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);
 }