testio-tailwind 0.1.0

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

@@ -0,0 +1,50 @@
+.alert {
+  @apply relative overflow-hidden flex flex-row items-start w-full mb-xs p-xxs text-left text-white bg-info border-0 rounded;
+}
+
+.alert-message {
+  @apply flex flex-col sm:flex-row sm:flex-grow items-start justify-between w-full p-xs;
+}
+
+.alert-message .btn {
+  @apply mt-xs sm:-my-xs ml-0 sm:ml-xs -mr-xxs text-primary bg-white hover:text-white hover:bg-link-hover;
+}
+
+.alert .close {
+  @apply flex justify-center items-center flex-shrink-0 w-btn h-btn top-xxs right-xxs text-info bg-white hover:bg-link-hover rounded opacity-100; 
+  .icon {
+    @apply text-icon;
+  }
+}
+
+.alert .close:hover, .alert .close:focus {
+  @apply text-white bg-link-hover outline-none;
+  .icon {
+    @apply text-white;
+  }
+}
+
+.alert .close:not(:disabled):not(.disabled):hover,
+.alert .close:not(:disabled):not(.disabled):focus {
+  @apply opacity-100; 
+}
+
+.alert-info {
+  @apply bg-info;
+}
+
+.alert-success {
+  @apply bg-success;
+  .icon {
+    @apply text-success;
+  }
+}
+
+.alert-warning,
+.alert-danger,
+.alert-error {
+  @apply bg-danger;
+  .icon {
+    @apply text-danger;
+  }
+}

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

@@ -0,0 +1,57 @@
+.banner-card {
+  @apply flex flex-row mb-md w-full rounded overflow-hidden bg-gray-lightest border border-bordercolor;
+}
+
+.banner-card.welcome {
+  @apply text-white bg-purple-500;
+}
+
+.banner-card .welcome-image {
+  @apply w-spacing-3xl;
+}
+
+.banner-card .card-content {
+  @apply p-md;
+}
+
+.banner-card.welcome .card-content {
+  @apply pl-0;
+}
+
+.banner-card .card-title {
+  @apply p-0 mb-xs;
+}
+
+.banner-card .card-actions {
+  @apply flex mt-sm;
+}
+
+.banner-card .card-actions .btn {
+  @apply mr-xs;
+}
+
+.banner-card .card-image {
+  @apply p-md pr-0;
+}
+
+.banner-card .card-image img {
+  @apply w-spacing-3xl;
+}
+
+.banner-card .card-chart {
+  @apply flex flex-col justify-center items-center text-center m-md mr-0 w-xxl h-xxl flex-shrink-0;
+}
+
+.banner-card .card-chart .chart-value {
+  @apply text-display-3 font-display h-xl;
+}
+
+.banner-card .card-chart .chart-label {
+  @apply pt-xxs px-md text-label-sm text-label-color;
+  line-height: 1.2;
+}
+
+.banner-card .card-chart .piechart-example {
+  @apply absolute rounded-full w-xxl border-gray-lighter;
+  border: 5px solid;
+}

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

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

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

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

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

@@ -0,0 +1,265 @@
+.list-chat-messages {
+  @apply grid gap-md;
+}
+
+.chat-message-item {
+  @apply relative grid max-w-capped;
+  position: relative;
+  display: grid;
+  grid-template-areas:  "chat-avatar chat-header chat-header"
+                        "chat-avatar chat-message chat-actions";
+  grid-template-columns: auto auto 1fr;
+}
+
+.chat-avatar {
+  grid-area: chat-avatar;
+}
+
+img.chat-avatar {
+  @apply w-spacing h-spacing mr-xs rounded-full;
+}
+
+.chat-header {
+  @apply flex text-label py-xxs text-label-color;
+  grid-area: chat-header;
+  line-height: 1.3;
+}
+
+.chat-author {
+  @apply ml-xxs font-semibold;
+}
+
+.chat-message {
+  @apply p-xs rounded bg-gray-lightest;
+  grid-area: chat-message;
+  min-width: 0;
+}
+
+.chat-message .message-banner {
+  @apply relative flex flex-row items-center py-xxs pl-xs -mx-xs -mt-xs mb-xs text-white bg-info border-b border-white rounded-t;
+  &::before {
+    @apply block w-icon-xs h-icon-xs mr-xs bg-white;
+    content: "";
+    mask-repeat: no-repeat;
+  }
+}
+
+.chat-message .message-banner.announcement::before {
+  mask-image: url("/assets/images/speaker.svg");
+}
+
+.chat-message .message-banner.mentioned::before {
+  mask-image: url("/assets/images/at-sign.svg");
+}
+
+.chat-message .text-mentioned {
+  @apply mr-xxs font-bold;
+}
+
+.chat-actions {
+  @apply pl-xxs;
+  grid-area: chat-actions;
+  place-self: start;
+  display: flex;
+  flex-direction: column;
+  padding-right: 0;
+}
+
+.chat-actions .btn {
+  @apply w-btn-sm h-btn-sm;
+  justify-content: center;
+  padding: 0;
+  .icon {
+    @apply h-icon-xs text-icon-xs;
+  }
+}
+
+.chat-actions .dropdown-actions[open] .dropdown-menu,
+.chat-actions .dropdown-actions[open] .popover-menu {
+  right: 0;
+  left: auto;
+  margin-top: 0;
+}
+
+.chat-message-addons {
+  @apply flex flex-row mt-xxs;
+}
+
+.chat-message-addons .btn {
+  @apply h-btn-xs px-xxs mr-1px text-gray-dark bg-gray-lighter border-0;
+  &:hover, &:focus, &:active {
+    @apply text-white border-0 bg-link-hover;
+  }
+  .icon {
+    @apply h-icon-xs text-icon-xs mr-xxs;
+  }
+}
+
+/*///// Your message /////*/
+
+.chat-message-item.your-message {
+  grid-template-areas:  "chat-header chat-header chat-avatar "
+                        "chat-actions chat-message chat-avatar";
+  grid-template-columns: 1fr auto auto;
+  place-self: end;
+}
+
+.chat-message-item.your-message img.chat-avatar {
+  @apply ml-xs mr-0;
+}
+
+.chat-message-item.your-message .chat-actions {
+  @apply pl-0 pr-xxs;
+}
+
+.chat-message-item.your-message .chat-header {
+  text-align: end;
+}
+
+.chat-message-item.your-message .chat-message {
+  @apply text-white bg-primary;
+}
+
+.chat-message-item.your-message .chat-message-addons .btn {
+  @apply text-white bg-gray bg-opacity-25;
+  &:hover, &:focus, &:active {
+    @apply text-white bg-link-hover;
+  }
+}
+
+.chat-message-item.your-message .chat-message-addons .tag-item {
+  @apply text-white bg-gray bg-opacity-25;
+}
+
+.chat-message-item.your-message .chat-actions .dropdown-actions[open] .dropdown-menu,
+.chat-message-item.your-message .chat-actions .dropdown-actions[open] .popover-menu {
+  left: 0;
+  right: auto;
+}
+
+.chat-message-item.announcement .chat-message {
+  @apply text-white bg-info;
+}
+
+.chat-message-item.announcement .chat-message-addons .btn {
+  @apply text-white bg-gray bg-opacity-25;
+  &:hover, &:focus, &:active {
+    @apply text-white bg-link-hover;
+  }
+}
+
+.chat-message-item.announcement .chat-message-addons .tag-item {
+  @apply text-white bg-gray bg-opacity-25;
+}
+
+
+/*///// Chat window /////*/
+
+.chat-container {
+  grid-area: chat-container;
+  position: relative;
+}
+
+.chat-container .chat-window {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.chat-window {
+  @apply w-spacing-5xl bg-petrol-800 rounded-t;
+  z-index: 10;
+  box-shadow: rgba(0,0,0,0.2) 0 0 10px 5px;
+}
+
+.chat-window-header {
+  @apply flex flex-row justify-between items-center p-xxs pl-sm text-white border-b border-primary rounded-t select-none cursor-pointer;
+}
+
+.chat-window-header a {
+  @apply ml-xs text-link-hover;
+  &:hover, &:focus {
+    @apply text-link-hover underline;
+  }
+}
+
+.chat-window-header .btn {
+  @apply w-btn-xs h-btn-xs p-xxs;
+}
+
+.chat-window[open] .chat-window-header {
+  @apply bg-primary;
+}
+
+.chat-message-counter {
+  @apply relative pl-md;
+}
+
+.chat-message-counter::before {
+  @apply absolute inline-block bg-link-hover h-icon-sm w-icon left-0 top-1px;
+  content: "";
+  mask-image: url("/assets/images/circle-sm-filled.svg");
+  mask-repeat: no-repeat;
+}
+
+.chat-window .chat-title {
+  @apply flex-grow ml-xs;
+}
+
+.chat-window .list-chat-messages {
+  @apply max-h-spacing-8xl p-md;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+
+.chat-window .chat-header {
+  @apply text-label-inverted-color;
+}
+
+.chat-window .list-chat-messages .popover-menu {
+  @apply w-spacing-3xl;
+}
+
+.chat-window-actions {
+  @apply relative p-xs bg-primary;
+}
+
+.chat-window-actions .form-control {
+  @apply pr-lg;
+}
+
+.chat-window-actions .btn-send-message {
+  @apply absolute right-sm bottom-md;
+  position: absolute;
+  &::before {
+    @apply inline-block h-icon-sm w-icon bg-white;
+    content: "";
+    mask-image: url("/assets/images/sendmessage.svg");
+    mask-repeat: no-repeat;
+  }
+  input {
+    @apply absolute appearance-none left-0 top-0 w-btn-sm h-btn-sm p-0;
+    opacity: 0;
+    padding: 0;
+    font-size: 0;
+    color: transparent;
+  }
+}
+
+
+/*///// Floating chat input /////*/
+
+.floating-chatinput {
+  @apply sticky left-0 right-spacing -bottom-body-padding-mobile sm:-bottom-body-padding-tablet xl:-bottom-body-padding-desktop w-full pt-xxs pb-body-padding-mobile sm:pb-body-padding-tablet bg-white;
+  z-index: 1;
+}
+
+.floating-chatinput .form-control {
+  @apply min-h-lg pr-lg border-gray-light;
+}
+
+.floating-chatinput .btn-sendmessage {
+  @apply absolute bottom-md sm:bottom-spacing right-xxs;
+  z-index: 1;
+}