testio-tailwind 0.1.0 → 0.2.1

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

@@ -1,195 +1,195 @@
-
-/*///// File upload and attachments /////*/
-
-.form-file {
-  @apply flex justify-center h-xl border-dashed border-primary text-primary;
-}
-
-.form-file-btn {
-  @apply inline-flex flex-row items-center text-primary;
-}
-
-.attachments {
-  @apply flex flex-wrap;
-}
-
-.attachments .attachment {
-  @apply mr-xs mb-xs;
-}
-
-.attachment {
-  @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded;
-
-  & .attachment-thumb {
-    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white;
-
-    & .icon {
-      @apply text-icon-lg;
-    }
-
-    & img {
-      @apply min-w-full h-xxl;
-    }
-
-    &:hover {
-      @apply border border-link-hover bg-link-hover;
-    }
-  }
-
-  & .attachment-name {
-    @apply mt-xxs text-xs font-normal text-center text-black line-clamp-3 leading-tight whitespace-normal break-all;
-  }
-
-  & .attachment-btn {
-    @apply absolute flex justify-center top-0 right-0 w-btn-sm h-btn-sm p-0 text-icon rounded-tr;
-  }
-}
-
-.attachment.inverted .attachment-thumb {
-  @apply border-bordercolor-dark;
-}
-
-.attachment.inverted .attachment-name {
-  @apply text-white;
-}
-
-
-/* Selectable / checkbox attachment */
-
-.attachment.selectable {
-  @apply ml-spacing;
-}
-
-.attachment.selectable input {
-  @apply hidden;
-}
-
-.attachment.selectable label {
-  @apply mb-0;
-}
-
-.attachment.selectable .attachment-thumb {
-  @apply bg-gray border border-bordercolor hover:border-link-hover hover:bg-link-hover;
-}
-
-.attachment.selectable label::before {
-  @apply absolute top-0 -left-spacing h-md w-md border border-primary cursor-pointer rounded;
-  content: "";
-}
-
-.attachment.selectable input:checked + label::before {
-  @apply bg-info;
-  mask-image: url("/assets/images/checkbox-sm-checked.svg");
-  mask-repeat: no-repeat;
-}
-
-.attachment.selectable input:checked + label .attachment-thumb {
-  @apply text-white bg-info border border-info hover:border-link-hover hover:bg-link-hover;
-}
-
-/* Dropzone plugin */
-
-.dropzone {
-  @apply relative flex justify-center items-start flex-wrap min-h-xxl p-md border border-dashed border-primary rounded text-black hover:border-link-hover hover:text-link-hover cursor-pointer;
-}
-
-.dz-preview {
-  @apply relative inline-flex flex-col h-auto w-xxl mr-0 border-0 bg-transparent overflow-hidden shadow-none;
-
-  & .dz-details {
-    @apply mt-xxs text-center text-xs text-black;
-    font-weight: normal;
-    white-space: normal;
-    word-break: break-all;
-  }
-
-  & .dz-remove {
-    @apply absolute flex justify-center items-center top-0 right-0 w-btn-sm h-btn-sm bg-danger rounded-tr hover:bg-link-hover;
-    z-index: 2;
-  }
-
-  & .dz-remove::after {
-    @apply inline-block h-icon-sm bg-white;
-    content: "";
-    width: 14px;
-    mask-image: url("/assets/images/remove.svg");
-    mask-repeat: no-repeat;
-  }
-}
-
-.dz-preview .dz-image {
-  @apply relative flex justify-center items-center w-xxl h-xxl text-white bg-primary rounded overflow-hidden;
-  border-image-width: 0;
-}
-
-
-/*/// Fallback image  ///*/
-
-.dz-image::after {
-  @apply absolute block top-0 left-0 w-full h-full;
-  content: "";
-  background-image: url("/assets/images/attachment-fallbackimage.svg");
-  background-size: cover;
-}
-
-.dz-preview .dz-image .icon {
-  @apply text-icon-lg;
-}
-
-.dz-preview .dz-image img {
-  @apply h-xxl min-w-full;
-  z-index: 1;
-}
-
-.dz-filename {
-  line-height: 1.1;
-}
-
-.dz-success-mark {
-  display: none;
-}
-
-.dz-error-mark {
-  display: none;
-}
-
-.dz-started {
-  justify-content: start;
-}
-
-.dz-message {
-  align-self: center;
-}
-
-.dz-started .dz-message {
-  display: none;
-}
-
-.dz-error-message {
-  @apply mt-xxs text-danger text-xs;
-}
-
-.dropzone-msg-title {
-  @apply text-center;
-}
-
-.dropzone-msg-desc {
-  @apply text-xs text-center;
-}
-
-.dz-size, .dz-size strong {
-  @apply text-xs;
-}
-
-.dropzone.inverted {
-  @apply text-white hover:text-link-hover;
-}
-
-.dropzone.inverted .dz-preview, 
-.dropzone.inverted .dz-preview .dz-image {
-  @apply text-white;
-}
-
-.dropzone.inverted .dz-details {
-  @apply text-white;
+
+/*///// File upload and attachments /////*/
+
+.form-file {
+  @apply flex justify-center h-xl border-dashed border-primary text-primary;
+}
+
+.form-file-btn {
+  @apply inline-flex flex-row items-center text-primary;
+}
+
+.attachments {
+  @apply flex flex-wrap;
+}
+
+.attachments .attachment {
+  @apply mr-xs mb-xs;
+}
+
+.attachment {
+  @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded;
+
+  & .attachment-thumb {
+    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white;
+
+    & .icon {
+      @apply text-icon-lg;
+    }
+
+    & img {
+      @apply min-w-full h-xxl;
+    }
+
+    &:hover {
+      @apply border border-link-hover bg-link-hover;
+    }
+  }
+
+  & .attachment-name {
+    @apply mt-xxs text-xs font-normal text-center text-black line-clamp-3 leading-tight whitespace-normal break-all;
+  }
+
+  & .attachment-btn {
+    @apply absolute flex justify-center top-0 right-0 w-btn-sm h-btn-sm p-0 text-icon rounded-tr;
+  }
+}
+
+.attachment.inverted .attachment-thumb {
+  @apply border-bordercolor-dark;
+}
+
+.attachment.inverted .attachment-name {
+  @apply text-white;
+}
+
+
+/* Selectable / checkbox attachment */
+
+.attachment.selectable {
+  @apply ml-spacing;
+}
+
+.attachment.selectable input {
+  @apply hidden;
+}
+
+.attachment.selectable label {
+  @apply mb-0;
+}
+
+.attachment.selectable .attachment-thumb {
+  @apply bg-gray border border-bordercolor hover:border-link-hover hover:bg-link-hover;
+}
+
+.attachment.selectable label::before {
+  @apply absolute top-0 -left-spacing h-md w-md border border-primary cursor-pointer rounded;
+  content: "";
+}
+
+.attachment.selectable input:checked + label::before {
+  @apply bg-info;
+  mask-image: url("/assets/images/checkbox-sm-checked.svg");
+  mask-repeat: no-repeat;
+}
+
+.attachment.selectable input:checked + label .attachment-thumb {
+  @apply text-white bg-info border border-info hover:border-link-hover hover:bg-link-hover;
+}
+
+/* Dropzone plugin */
+
+.dropzone {
+  @apply relative flex justify-center items-start flex-wrap min-h-xxl p-md border border-dashed border-primary rounded text-black hover:border-link-hover hover:text-link-hover cursor-pointer;
+}
+
+.dz-preview {
+  @apply relative inline-flex flex-col h-auto w-xxl mr-0 border-0 bg-transparent overflow-hidden shadow-none;
+
+  & .dz-details {
+    @apply mt-xxs text-center text-xs text-black;
+    font-weight: normal;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  & .dz-remove {
+    @apply absolute flex justify-center items-center top-0 right-0 w-btn-sm h-btn-sm bg-danger rounded-tr hover:bg-link-hover;
+    z-index: 2;
+  }
+
+  & .dz-remove::after {
+    @apply inline-block h-icon-sm bg-white;
+    content: "";
+    width: 14px;
+    mask-image: url("/assets/images/remove.svg");
+    mask-repeat: no-repeat;
+  }
+}
+
+.dz-preview .dz-image {
+  @apply relative flex justify-center items-center w-xxl h-xxl text-white bg-primary rounded overflow-hidden;
+  border-image-width: 0;
+}
+
+
+/*/// Fallback image  ///*/
+
+.dz-image::after {
+  @apply absolute block top-0 left-0 w-full h-full;
+  content: "";
+  background-image: url("/assets/images/attachment-fallbackimage.svg");
+  background-size: cover;
+}
+
+.dz-preview .dz-image .icon {
+  @apply text-icon-lg;
+}
+
+.dz-preview .dz-image img {
+  @apply h-xxl min-w-full;
+  z-index: 1;
+}
+
+.dz-filename {
+  line-height: 1.1;
+}
+
+.dz-success-mark {
+  display: none;
+}
+
+.dz-error-mark {
+  display: none;
+}
+
+.dz-started {
+  justify-content: start;
+}
+
+.dz-message {
+  align-self: center;
+}
+
+.dz-started .dz-message {
+  display: none;
+}
+
+.dz-error-message {
+  @apply mt-xxs text-danger text-xs;
+}
+
+.dropzone-msg-title {
+  @apply text-center;
+}
+
+.dropzone-msg-desc {
+  @apply text-xs text-center;
+}
+
+.dz-size, .dz-size strong {
+  @apply text-xs;
+}
+
+.dropzone.inverted {
+  @apply text-white hover:text-link-hover;
+}
+
+.dropzone.inverted .dz-preview, 
+.dropzone.inverted .dz-preview .dz-image {
+  @apply text-white;
+}
+
+.dropzone.inverted .dz-details {
+  @apply text-white;
 }

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

@@ -1,58 +1,58 @@
-.user-item {
-  @apply relative inline-flex flex-row items-center;
-}
-
-.user-item img {
-  @apply w-spacing h-spacing rounded-full mr-xs;
-}
-
-.user-item.sm {
-  @apply h-icon;
-}
-
-.user-item.sm img {
-  @apply w-icon h-icon;
-}
-
-a.user-item {
-  @apply text-black;
-}
-
-a.user-item:hover,
-.user-item.linked:hover {
-  @apply text-link-hover;
-  img {
-    @apply outline-link-hover;
-  }
-  .tester-level-medal {
-    outline: none;
-  }
-}
-
-.user-item .tester-level-medal {
-  @apply absolute -left-xxs -top-xxs w-auto h-auto;
-}
-
-.user-item.sm .tester-level-medal {
-  @apply relative mr-xxs top-auto left-auto;
-}
-
-.user-item.lg .tester-level-medal {
-  @apply -left-xxs -top-xxs; 
-}
-
-.user-item.xxl img {
-  @apply rounded-none;
-}
-
-.user-item.xxl .tester-level-medal {
-  @apply top-xs left-xs;
-}
-
-.user-item.square .profile-thumb {
-  @apply rounded;
-}
-
-.user-item.square .tester-level-medal {
-  @apply top-xxs left-xxs;
+.user-item {
+  @apply relative inline-flex flex-row items-center;
+}
+
+.user-item img {
+  @apply w-spacing h-spacing rounded-full mr-xs;
+}
+
+.user-item.sm {
+  @apply h-icon;
+}
+
+.user-item.sm img {
+  @apply w-icon h-icon;
+}
+
+a.user-item {
+  @apply text-black;
+}
+
+a.user-item:hover,
+.user-item.linked:hover {
+  @apply text-link-hover;
+  img {
+    @apply outline-link-hover;
+  }
+  .tester-level-medal {
+    outline: none;
+  }
+}
+
+.user-item .tester-level-medal {
+  @apply absolute -left-xxs -top-xxs w-auto h-auto;
+}
+
+.user-item.sm .tester-level-medal {
+  @apply relative mr-xxs top-auto left-auto;
+}
+
+.user-item.lg .tester-level-medal {
+  @apply -left-xxs -top-xxs; 
+}
+
+.user-item.xxl img {
+  @apply rounded-none;
+}
+
+.user-item.xxl .tester-level-medal {
+  @apply top-xs left-xs;
+}
+
+.user-item.square .profile-thumb {
+  @apply rounded;
+}
+
+.user-item.square .tester-level-medal {
+  @apply top-xxs left-xxs;
 }

package/src/assets/stylesheets/designsystem-styles.css

@@ -1,82 +1,82 @@
-
-.ds-app-body main, 
-.ds-app-body form.main-content {
-  grid-area: main;
-}
-
-.ds-app-body .ds-header {
-  grid-area: header;
-}
-
-.ds-app-body .ds-sidebar {
-  @apply bg-petrol-800;
-  grid-area: sidebar;
-  position: relative;
-  width: 200px;
-  height: 100%;
-}
-
-.ds-sidebar .sidebar-item {
-  width: 100%;
-}
-
-.ds-header .ds-header-logo {
-  height: 25px;
-}
-
-.ds-example-relative {
-  position: relative;
-}
-
-.ds-removethisclass-flex {
-  display: flex !important;
-}
-
-
-.main-content.floating-actionbar {
-  @apply mb-actionbar;
-}
-
-.main-content.floating-actionbar .actionbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 50;
-}
-
-.main-content.with-sidebar.floating-actionbar .actionbar {
-  @apply lg:ml-sidebar;
-}
-
-.ds-home-logo {
-  height: 200px;
-}
-
-.page-example-container {
-  @apply bg-gray-darkest border-gray-darker;
-  display: grid;
-  grid-area: main;
-  height: 100%;
-  overflow: hidden;
-  border-top: 20px solid;
-}
-
-.page-example-container .app-body {
-  height: 100%;
-  max-height: 100%;
-  min-height: 100%;
-  width: 100%;
-}
-
-.ds-code-preview {
-  @apply mt-xxs p-md bg-gray-lighter rounded;
-}
-
-.ds-code-preview pre {
-  @apply font-mono text-sm leading-5 bg-transparent text-gray-700;
-}
-
-.color-cell {
-  @apply flex flex-col justify-start items-start text-left px-5 py-2.5;
+
+.ds-app-body main, 
+.ds-app-body form.main-content {
+  grid-area: main;
+}
+
+.ds-app-body .ds-header {
+  grid-area: header;
+}
+
+.ds-app-body .ds-sidebar {
+  @apply bg-petrol-800;
+  grid-area: sidebar;
+  position: relative;
+  width: 200px;
+  height: 100%;
+}
+
+.ds-sidebar .sidebar-item {
+  width: 100%;
+}
+
+.ds-header .ds-header-logo {
+  height: 25px;
+}
+
+.ds-example-relative {
+  position: relative;
+}
+
+.ds-removethisclass-flex {
+  display: flex !important;
+}
+
+
+.main-content.floating-actionbar {
+  @apply mb-actionbar;
+}
+
+.main-content.floating-actionbar .actionbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 50;
+}
+
+.main-content.with-sidebar.floating-actionbar .actionbar {
+  @apply lg:ml-sidebar;
+}
+
+.ds-home-logo {
+  height: 200px;
+}
+
+.page-example-container {
+  @apply bg-gray-darkest border-gray-darker;
+  display: grid;
+  grid-area: main;
+  height: 100%;
+  overflow: hidden;
+  border-top: 20px solid;
+}
+
+.page-example-container .app-body {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  width: 100%;
+}
+
+.ds-code-preview {
+  @apply mt-xxs p-md bg-gray-lighter rounded;
+}
+
+.ds-code-preview pre {
+  @apply font-mono text-sm leading-5 bg-transparent text-gray-700;
+}
+
+.color-cell {
+  @apply flex flex-col justify-start items-start text-left px-5 py-2.5;
 }