testio-tailwind 0.2.0 → 0.2.2

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

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