testio-tailwind 0.2.0 → 0.2.2

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

@@ -1,193 +1,193 @@
-
-.btn,
-input.btn, 
-input[type="submit"].btn {
-  @apply inline-flex justify-start items-center h-btn px-md text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
-
-  &:hover, &:focus, &:active {
-    @apply text-white bg-link-hover;
-    .icon {
-      @apply text-white;
-    }
-  }
-}
-
-.btn-primary, 
-input.btn-primary, 
-input[type="submit"].btn-primary {
-  @apply text-white bg-primary;
-}
-
-.btn-secondary,
-input[type="submit"].btn-secondary {
-  @apply border-1 border-primary text-primary bg-transparent hover:border-link-hover;
-}
-
-.btn-info,
-input[type="submit"].btn-info {
-  @apply text-white bg-info;
-}
-
-.btn-ghost,
-input[type="submit"].btn-ghost {
-  @apply text-primary bg-transparent border-transparent;
-}
-
-.btn-ghost-inverted,
-input[type="submit"].btn-ghost-inverted {
-  @apply text-white bg-transparent;
-}
-
-.btn-sm {
-  @apply h-btn-sm py-xxs px-xs;
-}
-
-.btn-sm .icon {
-  @apply h-icon-sm text-icon-sm;
-}
-
-.btn-block {
-  @apply flex w-full justify-center;
-}
-
-.btn.btn-square {
-  @apply inline-flex justify-center items-center flex-shrink-0 h-btn w-btn p-0;
-
-  .icon {
-    margin: 0;
-  }
-}
-
-.btn-square.btn-sm {
-  @apply w-btn-sm h-btn-sm p-0;
-
-  .icon {
-    @apply h-icon-sm;
-  }
-}
-
-.btn-danger,
-input[type="submit"].btn-danger, 
-.btn-warning,
-input[type="submit"].btn-warning {
-  @apply text-white bg-danger;
-}
-
-.btn-success, 
-input[type="submit"].btn-success {
-  @apply text-white bg-success;
-}
-
-.btn-inverted,
-input[type="submit"].btn-inverted,
-.btn-primary-inverted,
-input[type="submit"].btn-primary-inverted {
-  @apply text-primary bg-white;
-
-  .icon {
-    @apply text-primary;
-  }
-}
-
-.btn-outline-primary-inverted,
-.btn-secondary-inverted,
-input[type="submit"].btn-secondary-inverted,
-.btn-white-secondary,
-input[type="submit"].btn-white-secondary,
-input.btn-white-secondary,
-input[type="submit"].btn-white-secondary {
-  @apply text-white border border-white bg-transparent;
-
-  .icon {
-    @apply text-white;
-  }
-}
-
-.btn.btn-lg {
-  @apply h-btn-lg w-btn-lg p-0;
-
-  .icon {
-    @apply m-0; 
-  }
-}
-
-.btn-lg-wrapper {
-  @apply text-center max-w-xxl;
-}
-
-.btn-lg-wrapper .btn-label {
-  @apply mt-xs text-label;
-  line-height: 1.2;
-}
-
-
-.btn-dashed,
-input[type="submit"].btn-dashed {
-  @apply border-primary border-dashed border-1 bg-transparent;
-}
-
-.btn.btn-xl {
-  @apply flex-col justify-center w-btn-xl h-btn-xl;
-
-  .icon {
-    @apply block text-icon-xl h-icon-xl my-xs;
-  }
-}
-
-.btn.btn-circle {
-  @apply justify-center items-center w-btn rounded-full;
-  .icon {
-    @apply m-0;
-  }
-}
-
-.btn-intercom {
-  @apply flex items-center justify-center w-btn h-btn rounded-full bg-info hover:bg-link-hover focus:bg-link-hover;
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);
-
-  .icon-intercom::before {
-    @apply text-white;
-  }
-}
-
-
-.btn:disabled, 
-.btn[disabled], 
-button:disabled, 
-button[disabled], 
-.btn.disabled, 
-.btn-sm:disabled, 
-.btn-sm[disabled], 
-.btn-sm.disabled,  
-.btn-lg-wrapper:disabled .btn-lg, 
-.btn-lg-wrapper[disabled] .btn-lg, 
-.btn-lg-wrapper.disabled .btn-lg, 
-.btn-lg:disabled, 
-.btn-lg[disabled], 
-.btn-lg.disabled, 
-.btn-xl:disabled, 
-.btn-xl[disabled], 
-.btn-xl.disabled, 
-input[type="submit"].btn[disabled], 
-input.btn[disabled], 
-input.btn-sm[disabled], 
-input.btn-lg[disabled] {
-  @apply text-disabled border border-disabled bg-pattern-disabled-bright hover:bg-pattern-disabled-bright bg-transparent hover:bg-transparent hover:text-disabled shadow-none cursor-not-allowed;
-
-  &:hover .icon, &:focus .icon {
-    @apply text-disabled;
-  }
-
-  &.disabled-dark {
-    @apply text-disabled-dark bg-pattern-disabled-dark hover:bg-pattern-disabled-dark bg-transparent border-disabled-dark;
-  }
-
-  &.disabled-actionbar {
-    @apply text-disabled-dark bg-pattern-disabled-dark hover:bg-pattern-disabled-dark bg-transparent border-disabled-dark;
-  }
-}
-
-
-.btn-gray {
-  @apply bg-gray-lighter text-black;
+
+.btn,
+input.btn, 
+input[type="submit"].btn {
+  @apply inline-flex justify-start items-center h-btn px-md text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none;
+
+  &:hover, &:focus, &:active {
+    @apply text-white bg-link-hover;
+    .icon {
+      @apply text-white;
+    }
+  }
+}
+
+.btn-primary, 
+input.btn-primary, 
+input[type="submit"].btn-primary {
+  @apply text-white bg-primary;
+}
+
+.btn-secondary,
+input[type="submit"].btn-secondary {
+  @apply border-1 border-primary text-primary bg-transparent hover:border-link-hover;
+}
+
+.btn-info,
+input[type="submit"].btn-info {
+  @apply text-white bg-info;
+}
+
+.btn-ghost,
+input[type="submit"].btn-ghost {
+  @apply text-primary bg-transparent border-transparent;
+}
+
+.btn-ghost-inverted,
+input[type="submit"].btn-ghost-inverted {
+  @apply text-white bg-transparent;
+}
+
+.btn-sm {
+  @apply h-btn-sm py-xxs px-xs;
+}
+
+.btn-sm .icon {
+  @apply h-icon-sm text-icon-sm;
+}
+
+.btn-block {
+  @apply flex w-full justify-center;
+}
+
+.btn.btn-square {
+  @apply inline-flex justify-center items-center flex-shrink-0 h-btn w-btn p-0;
+
+  .icon {
+    margin: 0;
+  }
+}
+
+.btn-square.btn-sm {
+  @apply w-btn-sm h-btn-sm p-0;
+
+  .icon {
+    @apply h-icon-sm;
+  }
+}
+
+.btn-danger,
+input[type="submit"].btn-danger, 
+.btn-warning,
+input[type="submit"].btn-warning {
+  @apply text-white bg-danger;
+}
+
+.btn-success, 
+input[type="submit"].btn-success {
+  @apply text-white bg-success;
+}
+
+.btn-inverted,
+input[type="submit"].btn-inverted,
+.btn-primary-inverted,
+input[type="submit"].btn-primary-inverted {
+  @apply text-primary bg-white;
+
+  .icon {
+    @apply text-primary;
+  }
+}
+
+.btn-outline-primary-inverted,
+.btn-secondary-inverted,
+input[type="submit"].btn-secondary-inverted,
+.btn-white-secondary,
+input[type="submit"].btn-white-secondary,
+input.btn-white-secondary,
+input[type="submit"].btn-white-secondary {
+  @apply text-white border border-white bg-transparent;
+
+  .icon {
+    @apply text-white;
+  }
+}
+
+.btn.btn-lg {
+  @apply h-btn-lg w-btn-lg p-0;
+
+  .icon {
+    @apply m-0; 
+  }
+}
+
+.btn-lg-wrapper {
+  @apply text-center max-w-xxl;
+}
+
+.btn-lg-wrapper .btn-label {
+  @apply mt-xs text-label;
+  line-height: 1.2;
+}
+
+
+.btn-dashed,
+input[type="submit"].btn-dashed {
+  @apply border-primary border-dashed border-1 bg-transparent;
+}
+
+.btn.btn-xl {
+  @apply flex-col justify-center w-btn-xl h-btn-xl;
+
+  .icon {
+    @apply block text-icon-xl h-icon-xl my-xs;
+  }
+}
+
+.btn.btn-circle {
+  @apply justify-center items-center w-btn rounded-full;
+  .icon {
+    @apply m-0;
+  }
+}
+
+.btn-intercom {
+  @apply flex items-center justify-center w-btn h-btn rounded-full bg-info hover:bg-link-hover focus:bg-link-hover;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);
+
+  .icon-intercom::before {
+    @apply text-white;
+  }
+}
+
+
+.btn:disabled, 
+.btn[disabled], 
+button:disabled, 
+button[disabled], 
+.btn.disabled, 
+.btn-sm:disabled, 
+.btn-sm[disabled], 
+.btn-sm.disabled,  
+.btn-lg-wrapper:disabled .btn-lg, 
+.btn-lg-wrapper[disabled] .btn-lg, 
+.btn-lg-wrapper.disabled .btn-lg, 
+.btn-lg:disabled, 
+.btn-lg[disabled], 
+.btn-lg.disabled, 
+.btn-xl:disabled, 
+.btn-xl[disabled], 
+.btn-xl.disabled, 
+input[type="submit"].btn[disabled], 
+input.btn[disabled], 
+input.btn-sm[disabled], 
+input.btn-lg[disabled] {
+  @apply text-disabled border border-disabled bg-pattern-disabled-bright hover:bg-pattern-disabled-bright bg-transparent hover:bg-transparent hover:text-disabled shadow-none cursor-not-allowed;
+
+  &:hover .icon, &:focus .icon {
+    @apply text-disabled;
+  }
+
+  &.disabled-dark {
+    @apply text-disabled-dark bg-pattern-disabled-dark hover:bg-pattern-disabled-dark bg-transparent border-disabled-dark;
+  }
+
+  &.disabled-actionbar {
+    @apply text-disabled-dark bg-pattern-disabled-dark hover:bg-pattern-disabled-dark bg-transparent border-disabled-dark;
+  }
+}
+
+
+.btn-gray {
+  @apply bg-gray-lighter text-black;
 }

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

@@ -1,149 +1,149 @@
-.grid-cards-achievements {
-  @apply grid gap-grid-gutter;
-  grid-template-columns: 1fr 1fr;
-  @screen lg {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  @screen xl {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-  }
-  @screen 2xl {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-  }
-}
-
-.grid-cards {
-  @apply grid gap-grid-gutter;
-  grid-template-columns: 1fr;
-  @screen sm {
-    grid-template-columns: 1fr 1fr;
-  }
-  @screen lg {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  @screen xl {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-  }
-  @screen 2xl {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-  }
-}
-
-.list-cards {
-  @apply flex flex-wrap;
-
-  .card {
-    @apply sm:mr-grid-gutter mb-grid-gutter;
-  }
-
-  .card:last-child {
-    @apply mr-0;
-  }
-}
-
-.card {
-  @apply relative flex flex-col bg-card rounded;
-}
-
-.card.card-sm {
-  @apply w-full sm:w-card-sm;
-
-  .card-title {
-    @apply block overflow-ellipsis text-heading-5 text-center;
-  }
-}
-
-.card.card-md {
-  @apply w-full sm:w-card-md;
-}
-
-.card.card-lg {
-  @apply w-full sm:w-card-lg;
-}
-
-.card-header {
-  @apply relative px-md pt-md;
-}
-
-.card-header .popover_info_icon {
-  @apply relative text-icon-xs;
-  top: 3px;
-  right: 3px;
-  padding: 3px;
-}
-  
-.card-header.highlight {
-  @apply bg-info text-white;
-  
-  .card-title {
-    @apply text-white;
-  }
-  
-  .popover_info_icon {
-    @apply text-white;
-  }
-}
-
-.card-image {
-  @apply rounded-t;
-}
-
-.card-body {
-  @apply relative flex-grow p-md;
-  flex: 1 1 1;
-}
-
-.card.highlight {
-  @apply text-white bg-info border-0;
-
-  .card-header {
-    @apply border-white text-white;
-
-    .popover_info_icon {
-      @apply text-white;
-    }
-  }
-}
-
-.card-content {
-  flex: 1 1 auto;
-}
-
-.card-footer {
-  @apply flex w-full h-btn;
-}
-
-.card-footer .btn {
-  @apply m-0 px-sm rounded-none border-l border-white first:border-l-0 first:rounded-bl last:rounded-br;
-}
-
-.card-footer .dropdown-actions .btn {
-  @apply border-l border-white rounded-bl-none;
-}
-
-.card-footer .btn-primary {
-  @apply flex-grow;
-}
-
-.card-footer .btn-secondary {
-  @apply flex-1 text-white bg-primary hover:bg-link-hover border-t-0 border-r-0 border-b-0;
-}
-
-.card-footer .btn-square {
-  @apply flex-auto flex-grow-0 flex-shrink-0;
-}
-
-.card-icon-header {
-  @apply h-lg mb-xs text-center border-b border-bordercolor;
-}
-
-.card-icon-header .icon {
-  @apply absolute h-icon-lg top-spacing px-xs text-icon-lg;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.card .card-info-popover {
-  @apply absolute right-xxs top-xxs;
-  z-index: 1;
+.grid-cards-achievements {
+  @apply grid gap-grid-gutter;
+  grid-template-columns: 1fr 1fr;
+  @screen lg {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+  @screen 2xl {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.grid-cards {
+  @apply grid gap-grid-gutter;
+  grid-template-columns: 1fr;
+  @screen sm {
+    grid-template-columns: 1fr 1fr;
+  }
+  @screen lg {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  @screen xl {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+  @screen 2xl {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.list-cards {
+  @apply flex flex-wrap;
+
+  .card {
+    @apply sm:mr-grid-gutter mb-grid-gutter;
+  }
+
+  .card:last-child {
+    @apply mr-0;
+  }
+}
+
+.card {
+  @apply relative flex flex-col bg-card rounded;
+}
+
+.card.card-sm {
+  @apply w-full sm:w-card-sm;
+
+  .card-title {
+    @apply block overflow-ellipsis text-heading-5 text-center;
+  }
+}
+
+.card.card-md {
+  @apply w-full sm:w-card-md;
+}
+
+.card.card-lg {
+  @apply w-full sm:w-card-lg;
+}
+
+.card-header {
+  @apply relative px-md pt-md;
+}
+
+.card-header .popover_info_icon {
+  @apply relative text-icon-xs;
+  top: 3px;
+  right: 3px;
+  padding: 3px;
+}
+  
+.card-header.highlight {
+  @apply bg-info text-white;
+  
+  .card-title {
+    @apply text-white;
+  }
+  
+  .popover_info_icon {
+    @apply text-white;
+  }
+}
+
+.card-image {
+  @apply rounded-t;
+}
+
+.card-body {
+  @apply relative flex-grow p-md;
+  flex: 1 1 1;
+}
+
+.card.highlight {
+  @apply text-white bg-info border-0;
+
+  .card-header {
+    @apply border-white text-white;
+
+    .popover_info_icon {
+      @apply text-white;
+    }
+  }
+}
+
+.card-content {
+  flex: 1 1 auto;
+}
+
+.card-footer {
+  @apply flex w-full h-btn;
+}
+
+.card-footer .btn {
+  @apply m-0 px-sm rounded-none border-l border-white first:border-l-0 first:rounded-bl last:rounded-br;
+}
+
+.card-footer .dropdown-actions .btn {
+  @apply border-l border-white rounded-bl-none;
+}
+
+.card-footer .btn-primary {
+  @apply flex-grow;
+}
+
+.card-footer .btn-secondary {
+  @apply flex-1 text-white bg-primary hover:bg-link-hover border-t-0 border-r-0 border-b-0;
+}
+
+.card-footer .btn-square {
+  @apply flex-auto flex-grow-0 flex-shrink-0;
+}
+
+.card-icon-header {
+  @apply h-lg mb-xs text-center border-b border-bordercolor;
+}
+
+.card-icon-header .icon {
+  @apply absolute h-icon-lg top-spacing px-xs text-icon-lg;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.card .card-info-popover {
+  @apply absolute right-xxs top-xxs;
+  z-index: 1;
 }