testio-tailwind 0.2.0 → 0.2.1

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

@@ -1,105 +1,105 @@
-
-.modal-wrapper {
-  position: relative;
-}
-
-.modal-trigger {
-  display: contents;
-}
-
-.modal-wrapper[open] .modal-trigger::before {
-  content: "";
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  background-color: rgba(0,0,0,.75);
-}
-
-.modal-wrapper[open] .modal-container {
-  @apply p-lg;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: start;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow-y: scroll;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.modal-wrapper[open] .modal {
-  @apply w-modal-md mt-spacing rounded bg-white;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  max-width: 100vw;
-  pointer-events: all;
-  z-index: 11;
-
-  &.modal-sm {
-    @apply w-modal-sm;
-  }
-  
-  &.modal-lg {
-    @apply w-modal-lg;
-  }
-  
-}
-
-.modal-wrapper[open] .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  padding: 0;
-}
-
-.modal-wrapper[open] .modal-title {
-  @apply p-spacing text-heading-3;
-}
-
-.modal-wrapper[open] .modal-header .close-btn {
-  @apply rounded-none rounded-tr cursor-pointer;
-}
-
-.modal-wrapper[open] .modal-content {
-  @apply p-spacing pt-0;
-}
-
-.modal-wrapper[open] .modal-footer {
-  @apply py-sm px-spacing bg-actionbar rounded-b;
-  display: flex;
-  justify-content: start;
-}
-
-.modal-footer .btn {
-  @apply mr-xs;
-}
-
-.modal-footer .btn-primary {
-  @apply bg-white text-primary border-0 hover:bg-link-hover hover:border-link-hover hover:text-white;
-}
-
-.modal-footer .btn-secondary {
-  @apply bg-transparent text-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
-}
-
-.modal-footer .btn.disabled,
-.modal-footer .btn:disabled {
-  @apply text-white border-white;
-  background-image: url("/assets/images/pattern-striped-bright.png");
-  background-color: transparent;
-  opacity: 0.25;
-}
-
-.btn.disabled, :disabled.btn {
-  @apply bg-transparent text-disabled;
-  background-image: url("/assets/images/btn-disabled-petrol.png");
-  background-repeat: repeat;
-}
+
+.modal-wrapper {
+  position: relative;
+}
+
+.modal-trigger {
+  display: contents;
+}
+
+.modal-wrapper[open] .modal-trigger::before {
+  content: "";
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background-color: rgba(0,0,0,.75);
+}
+
+.modal-wrapper[open] .modal-container {
+  @apply p-lg;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: start;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow-y: scroll;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.modal-wrapper[open] .modal {
+  @apply w-modal-md mt-spacing rounded bg-white;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  max-width: 100vw;
+  pointer-events: all;
+  z-index: 11;
+
+  &.modal-sm {
+    @apply w-modal-sm;
+  }
+  
+  &.modal-lg {
+    @apply w-modal-lg;
+  }
+  
+}
+
+.modal-wrapper[open] .modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  padding: 0;
+}
+
+.modal-wrapper[open] .modal-title {
+  @apply p-spacing text-heading-3;
+}
+
+.modal-wrapper[open] .modal-header .close-btn {
+  @apply rounded-none rounded-tr cursor-pointer;
+}
+
+.modal-wrapper[open] .modal-content {
+  @apply p-spacing pt-0;
+}
+
+.modal-wrapper[open] .modal-footer {
+  @apply py-sm px-spacing bg-actionbar rounded-b;
+  display: flex;
+  justify-content: start;
+}
+
+.modal-footer .btn {
+  @apply mr-xs;
+}
+
+.modal-footer .btn-primary {
+  @apply bg-white text-primary border-0 hover:bg-link-hover hover:border-link-hover hover:text-white;
+}
+
+.modal-footer .btn-secondary {
+  @apply bg-transparent text-white border-white hover:bg-link-hover hover:border-link-hover hover:text-white;
+}
+
+.modal-footer .btn.disabled,
+.modal-footer .btn:disabled {
+  @apply text-white border-white;
+  background-image: url("/assets/images/pattern-striped-bright.png");
+  background-color: transparent;
+  opacity: 0.25;
+}
+
+.btn.disabled, :disabled.btn {
+  @apply bg-transparent text-disabled;
+  background-image: url("/assets/images/btn-disabled-petrol.png");
+  background-repeat: repeat;
+}

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

@@ -1,155 +1,155 @@
-
-/* Notification inside the notification center */
-
-.drawer .notifications {
-  @apply -mx-spacing;
-}
-
-.drawer .notification {
-  @apply relative mb-1px;
-}
-
-.drawer .notification input {
-  @apply hidden;
-}
-
-.drawer .notification-content {
-  @apply relative grid py-xxs px-xs text-label cursor-pointer;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto;
-}
-
-.drawer .notification-content,
-.drawer .notification input[type=checkbox]:checked + .notification-content {
-  &:hover::before, &:focus::before, &:active::before {
-    @apply bg-gray-darkest opacity-100;
-  }
-}
-
-.drawer .notification-content::before {
-  @apply absolute block w-full h-full top-0 left-0 bg-gray-darkest;
-  content: "";
-  z-index: -1;
-  opacity: 0.75;
-}
-
-.drawer .notification input[type=checkbox]:checked + .notification-content::before {
-  opacity: 0;
-}
-
-.drawer .notification input[type=checkbox] + .notification-content::after {
-  @apply absolute top-xs right-xs h-icon-xs w-icon-xs bg-white;
-  content: "";
-  opacity: 0.5;
-  mask-image: url("/assets/images/circle-empty-white.svg");
-  mask-repeat: no-repeat;
-}
-
-.drawer .notification input[type=checkbox]:checked + .notification-content::after {
-  @apply bg-success opacity-100;
-  mask-image: url("/assets/images/check-circle-filled.svg");
-}
-
-.drawer .notification-badge {
-  @apply flex flex-col mr-xs;
-  grid-row-start: 1;
-  grid-row-end: 4;
-}
-
-.drawer .notification-badge img {
-  @apply w-icon-lg h-icon-lg rounded;
-}
-
-.drawer .notification-badge .profile-thumb {
-  @apply w-spacing h-spacing -mt-md mr-xs translate-y-md border border-bordercolor;
-  border-radius: 50%;
-  z-index: 1;
-}
-
-.drawer .notification-badge .icon {
-  @apply text-icon-lg h-icon-lg;
-}
-
-.drawer .notification-label,
-.drawer .notification-metainfo {
-  @apply text-gray;
-}
-
-.drawer a.notification-text {
-  @apply text-white;
-  &:hover, &:focus, &:active {
-    @apply text-link-hover;
-  }
-}
-
-
-/* Notification message */
-
-.notification-container {
-  @apply fixed top-header right-0 overflow-y-scroll max-h-screen pt-xs pb-xl z-10;
-  width: 280px;
-}
-
-.notification-container::-webkit-scrollbar {
-  display: none;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.notification-container .notification {
-  @apply relative grid bg-info rounded-l mb-xxs py-sm pr-btn pl-sm text-white;
-  grid-template-areas:  "badge title"
-                        "content content";
-  grid-template-columns: auto 1fr;
-  line-height: 1.3;
-  box-shadow: -5px 5px 8px rgba(0,0,0,.1);
-}
-
-.notification-container a.notification {
-  @apply block hover:bg-link-hover hover:text-white no-underline;
-}
-
-.notification-container .notification-badge {
-  grid-area: badge;
-}
-
-.notification-container .notification-badge .icon {
-  @apply h-icon-lg text-icon-lg mr-xs mb-xs;
-}
-
-.notification-container .notification .btn {
-  @apply mt-xs;
-}
-
-.notification-container .notification .btn-close {
-  @apply absolute items-center justify-center w-btn-sm h-btn-sm top-0 right-0 text-white mt-0 p-xxs rounded-none;
-}
-
-.notification-container .notification-content {
-  grid-area: content;
-}
-
-.notification-container .notification .notification-title {
-  @apply mb-xxs font-bold;
-  grid-area: title;
-  line-height: 1.2;
-}
-
-.notification-container .notification .notification-message {
-  @apply text-label;
-}
-
-.notification-container .notification.success {
-  @apply text-black bg-success;
-  & .btn-close {
-    @apply text-black;
-  }
-}
-
-.notification-container .notification.warning {
-  @apply bg-danger;
-}
-
-.notification-container .notification.error {
-  @apply bg-danger;
+
+/* Notification inside the notification center */
+
+.drawer .notifications {
+  @apply -mx-spacing;
+}
+
+.drawer .notification {
+  @apply relative mb-1px;
+}
+
+.drawer .notification input {
+  @apply hidden;
+}
+
+.drawer .notification-content {
+  @apply relative grid py-xxs px-xs text-label cursor-pointer;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto;
+}
+
+.drawer .notification-content,
+.drawer .notification input[type=checkbox]:checked + .notification-content {
+  &:hover::before, &:focus::before, &:active::before {
+    @apply bg-gray-darkest opacity-100;
+  }
+}
+
+.drawer .notification-content::before {
+  @apply absolute block w-full h-full top-0 left-0 bg-gray-darkest;
+  content: "";
+  z-index: -1;
+  opacity: 0.75;
+}
+
+.drawer .notification input[type=checkbox]:checked + .notification-content::before {
+  opacity: 0;
+}
+
+.drawer .notification input[type=checkbox] + .notification-content::after {
+  @apply absolute top-xs right-xs h-icon-xs w-icon-xs bg-white;
+  content: "";
+  opacity: 0.5;
+  mask-image: url("/assets/images/circle-empty-white.svg");
+  mask-repeat: no-repeat;
+}
+
+.drawer .notification input[type=checkbox]:checked + .notification-content::after {
+  @apply bg-success opacity-100;
+  mask-image: url("/assets/images/check-circle-filled.svg");
+}
+
+.drawer .notification-badge {
+  @apply flex flex-col mr-xs;
+  grid-row-start: 1;
+  grid-row-end: 4;
+}
+
+.drawer .notification-badge img {
+  @apply w-icon-lg h-icon-lg rounded;
+}
+
+.drawer .notification-badge .profile-thumb {
+  @apply w-spacing h-spacing -mt-md mr-xs translate-y-md border border-bordercolor;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.drawer .notification-badge .icon {
+  @apply text-icon-lg h-icon-lg;
+}
+
+.drawer .notification-label,
+.drawer .notification-metainfo {
+  @apply text-gray;
+}
+
+.drawer a.notification-text {
+  @apply text-white;
+  &:hover, &:focus, &:active {
+    @apply text-link-hover;
+  }
+}
+
+
+/* Notification message */
+
+.notification-container {
+  @apply fixed top-header right-0 overflow-y-scroll max-h-screen pt-xs pb-xl z-10;
+  width: 280px;
+}
+
+.notification-container::-webkit-scrollbar {
+  display: none;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.notification-container .notification {
+  @apply relative grid bg-info rounded-l mb-xxs py-sm pr-btn pl-sm text-white;
+  grid-template-areas:  "badge title"
+                        "content content";
+  grid-template-columns: auto 1fr;
+  line-height: 1.3;
+  box-shadow: -5px 5px 8px rgba(0,0,0,.1);
+}
+
+.notification-container a.notification {
+  @apply block hover:bg-link-hover hover:text-white no-underline;
+}
+
+.notification-container .notification-badge {
+  grid-area: badge;
+}
+
+.notification-container .notification-badge .icon {
+  @apply h-icon-lg text-icon-lg mr-xs mb-xs;
+}
+
+.notification-container .notification .btn {
+  @apply mt-xs;
+}
+
+.notification-container .notification .btn-close {
+  @apply absolute items-center justify-center w-btn-sm h-btn-sm top-0 right-0 text-white mt-0 p-xxs rounded-none;
+}
+
+.notification-container .notification-content {
+  grid-area: content;
+}
+
+.notification-container .notification .notification-title {
+  @apply mb-xxs font-bold;
+  grid-area: title;
+  line-height: 1.2;
+}
+
+.notification-container .notification .notification-message {
+  @apply text-label;
+}
+
+.notification-container .notification.success {
+  @apply text-black bg-success;
+  & .btn-close {
+    @apply text-black;
+  }
+}
+
+.notification-container .notification.warning {
+  @apply bg-danger;
+}
+
+.notification-container .notification.error {
+  @apply bg-danger;
 }