testio-tailwind 0.1.0

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

@@ -0,0 +1,174 @@
+
+.form-group.trix-editor {
+  @apply gap-grid-gutter grid-rows-auto;
+  grid-template-rows: auto;
+  @screen md {
+    grid-template-areas: "label trix-toolbar"
+                         "label trix-editor";
+   }
+}
+
+.trix-content {
+  @apply -mt-grid-gutter;
+  @screen md {
+    grid-area: trix-editor;
+   }
+}
+
+.trix-editor .form-control {
+  @apply h-auto min-h-xxl border-t-0 rounded-t-none;
+}
+
+trix-toolbar {
+  @apply border border-bordercolor rounded-t;
+  @screen md {
+    grid-area: trix-toolbar;
+   }
+}
+
+trix-toolbar .trix-button-group {
+  @apply relative border-0 mb-0;
+}
+
+trix-toolbar .trix-button-row {
+  @apply relative flex flex-row w-full p-xxs overflow-x-scroll;
+}
+
+.trix-button-row::-webkit-scrollbar {
+  display: none;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.trix-button-group.trix-button-group--history-tools {
+  @apply absolute right-0 pr-xs bg-white;
+}
+
+trix-toolbar .trix-button {
+  @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded bg-transparent;
+  font-size: 0; /* Fix for safari bug, we don't need to show any text in those buttons */
+  &:hover, &:focus {
+    @apply text-white bg-link-hover;
+  }
+  &::before {
+    @apply relative block h-icon-sm w-icon-sm bg-gray-darker;
+    background-image: none;
+    mask-repeat: no-repeat;
+  }
+}
+
+trix-toolbar .trix-button--icon::before {
+  content: "";
+  opacity: 1;
+}
+
+trix-toolbar .trix-button:hover {
+  &::before {
+    @apply opacity-100 bg-white;
+  }
+}
+
+trix-toolbar .trix-button.trix-active {
+  @apply bg-info;
+  &::before {
+    @apply bg-white;
+  }
+}
+
+trix-toolbar .trix-button:not(:first-child) {
+  @apply border-l-0;
+}
+
+.trix-button--icon-bold::before {
+  mask-image: url("/assets/images/format-bold.svg");
+}
+
+.trix-button--icon-italic::before {
+  mask-image: url("/assets/images/format-mark.svg");
+}
+.trix-button--icon-strike::before {
+  mask-image: url("/assets/images/format-strikethrough.svg");
+}
+.trix-button--icon-link::before {
+  mask-image: url("/assets/images/format-link.svg");
+}
+.trix-button--icon-heading-1::before {
+  mask-image: url("/assets/images/format-heading.svg");
+}
+.trix-button--icon-quote::before {
+  mask-image: url("/assets/images/format-quote.svg");
+}
+.trix-button--icon-code::before {
+  mask-image: url("/assets/images/format-code.svg");
+}
+.trix-button--icon-bullet-list::before {
+  mask-image: url("/assets/images/format-list-bulleted.svg");
+}
+.trix-button--icon-number-list::before {
+  mask-image: url("/assets/images/format-list-numbered.svg");
+}
+.trix-button--icon-decrease-nesting-level::before {
+  mask-image: url("/assets/images/format-indent-decrease.svg");
+}
+.trix-button--icon-increase-nesting-level::before {
+  mask-image: url("/assets/images/format-indent-increase.svg");
+}
+trix-toolbar .trix-button--icon-attach::before {
+  @apply top-0 bottom-0;
+  mask-image: url("/assets/images/attachment.svg");
+}
+.trix-button--icon-undo::before {
+  mask-image: url("/assets/images/undo.svg");
+}
+.trix-button--icon-redo::before {
+  mask-image: url("/assets/images/redo.svg");
+}
+
+
+/*//// Add link/URL popover ////*/
+
+trix-toolbar .trix-dialog {
+  @apply px-xs py-xxs bg-gray-lightest border border-bordercolor border-t-0;
+}
+
+trix-toolbar .trix-button--dialog {
+  @apply w-auto h-btn-sm px-xs bg-primary text-white text-label;
+}
+
+trix-toolbar .trix-dialog__link-fields {
+  @apply flex flex-row items-center;
+}
+
+trix-toolbar .trix-dialog .trix-button-group {
+  @apply ml-xs;
+}
+
+trix-toolbar .trix-input--dialog {
+  @apply w-full h-btn-sm px-xs border border-bordercolor rounded;
+}
+
+
+/*//// Attachments ////*/
+
+trix-editor .attachment-gallery .attachment,
+trix-editor .attachment {
+  @apply block w-full mb-xs;
+}
+
+trix-editor [data-trix-attachment] figcaption textarea {
+  @apply w-full h-btn-sm p-xs border border-bordercolor rounded;
+}
+
+trix-editor .attachment__caption {
+  @apply mt-xxs;
+}
+
+trix-editor .attachment__progress {
+  @apply appearance-none block overflow-hidden w-full h-progress-bar-thin-height my-xxs rounded-none;
+  &::-webkit-progress-bar {
+    @apply h-progress-bar-thin-height bg-gray-light;
+  }
+  &::-webkit-progress-value {
+    @apply h-progress-bar-thin-height bg-info;
+  }
+}

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

@@ -0,0 +1,81 @@
+
+h1, h2, h3, h4, h5,
+.text-heading-1,
+.text-heading-2,
+.text-heading-3,
+.text-heading-4,
+.text-heading-5 {
+  @apply font-light;
+}
+
+h1 {
+  @apply text-heading-1;
+}
+
+h2 {
+  @apply text-heading-2;
+}
+
+h3 {
+  @apply text-heading-3;
+}
+
+h4 {
+  @apply text-heading-4;
+}
+
+h5 {
+  @apply text-heading-5;
+}
+
+h6 {
+  @apply text-heading-6;
+}
+
+body {
+  @apply text-base;
+}
+
+.text-display-1,
+.text-display-2,
+.text-display-3,
+.text-display-4 {
+  @apply font-display;
+}
+
+a {
+  @apply text-link font-semibold hover:text-link-hover hover:underline cursor-pointer;
+}
+
+code {
+  @apply font-mono not-italic text-sm;
+}
+
+label, .label, .form-label, dt {
+  @apply text-label-color text-label font-semibold;
+}
+
+.link-with-icon {
+  @apply inline-flex items-start hover:no-underline;
+
+  &.black {
+    @apply text-black hover:text-link-hover;
+  }
+}
+
+.link-with-icon .icon {
+  @apply mr-icon-spacing;
+}
+
+.text-with-icon {
+  @apply inline-flex items-start;
+}
+
+.text-with-icon .icon {
+  @apply mr-icon-spacing;
+}
+
+.text-with-icon p {
+  @apply -mt-0.5;
+}
+

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

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

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

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

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

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

package/src/assets/stylesheets/postcss.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-nesting'),
+    require('tailwindcss')('./src/assets/stylesheets/tailwind.config.js'),
+    require('postcss-simple-vars')(
+      {
+          variables: {
+              package_path: '../../..',
+              fonts_path: 'fonts'
+          }
+      }
+    ),
+    require('autoprefixer')
+  ]
+}