testio-tailwind 0.1.0

package/src/assets/stylesheets/components/manager/manager_header.css

@@ -0,0 +1,51 @@
+
+/*///////// manager Header /////////*/
+
+.header.manager .header-logo::before {
+  content: url("/assets/images/logo-testio/testio_horizontal_black.svg");
+}
+
+.header.manager {
+  @apply text-navlink-manager-hover-color bg-navigation-manager-color border-b-1 border-bordercolor;
+}
+
+.header.manager .navlink,
+.header.manager .navlink .icon,
+.header.manager .dropdown-menu,
+.header.manager .dropdown-link {
+  @apply text-black;
+}
+
+.header.manager .navlink.active {
+  @apply text-black bg-navlink-manager-active-bg;
+}
+
+.header.manager .navlink.active .icon {
+  @apply text-navlink-manager-hover-color;
+}
+
+.header.manager .navlink:hover,
+.header.manager .navlink:focus,
+.header.manager .navlink.active:focus,
+.header.manager .navlink.active:hover,
+.header.manager .dropdown-link:focus,
+.header.manager .header-dropdown .dropdown-link:hover {
+  @apply text-navlink-manager-hover-color bg-navlink-manager-hover-bg;
+
+  & .icon {
+    @apply text-navlink-manager-hover-color;
+  }
+}
+
+.header.manager .header-dropdown summary:hover:after, 
+.header.manager .header-dropdown summary:focus:after {
+  @apply bg-navlink-manager-hover-color;
+}
+
+.header.manager .header-dropdown summary:after {
+  @apply bg-black;
+}
+
+.header.manager .header-dropdown .dropdown-menu {
+  @apply bg-white border border-bordercolor;
+}

package/src/assets/stylesheets/components/manager/manager_sidebar.css

@@ -0,0 +1,76 @@
+
+/*///////// manager Sidebar /////////*/
+ 
+.sidebar.manager,
+.header.manager .sidebar {
+  @apply bg-navigation-manager-color text-black border-r border-solid border-bordercolor-dark;
+}
+
+.sidebar.manager .navlink,
+.sidebar.manager .navlink .icon,
+.header.manager .sidebar .navlink,
+.header.manager .sidebar .navlink .icon {
+  @apply text-black;
+}
+
+.sidebar.manager summary:after,
+.header.manager summary:after {
+  @apply bg-black;
+}
+
+.sidebar.manager .navlink.active,
+.header.manager .navlink.active {
+  @apply text-black bg-navlink-manager-active-bg;
+  & .icon {
+    @apply text-black;
+  }
+}
+
+.sidebar.manager .navlink:hover,
+.sidebar.manager .navlink:focus,
+.sidebar.manager .navlink.active:focus,
+.sidebar.manager .navlink.active:hover,
+.header.manager .sidebar .navlink:hover,
+.header.manager .sidebar .navlink:focus,
+.header.manager .sidebar .navlink.active:focus,
+.header.manager .sidebar .navlink.active:hover {
+  @apply text-navlink-manager-hover-color bg-navlink-manager-hover-bg;
+
+  & .icon {
+    @apply text-navlink-manager-hover-color;
+  }
+}
+
+.sidebar.manager details[open],
+.header.manager .sidebar details[open],
+.header.manager .sidebar .header-dropdown[open] {
+  @apply bg-gray-lightest;
+}
+
+.sidebar.manager details summary.navlink:hover,
+.sidebar.manager details summary.navlink:focus,
+.header.manager .sidebar details summary.navlink:hover,
+.header.manager .sidebar details summary.navlink:focus,
+.sidebar.manager .sidebar-divider,
+.header.manager .sidebar-divider,
+.header.manager .sidebar .sidebar-divider,
+.header.manager .header .sidebar-divider {
+  @apply bg-gray-lightest;
+}
+
+.sidebar.manager details .navlink,
+.sidebar.manager details .navlink.active,
+.header.manager .sidebar .navlink,
+.header.manager .sidebar .navlink.active {
+  &:hover, &:focus {
+    @apply text-navlink-manager-hover-color bg-gray-lighter;
+
+    .icon {
+      @apply text-navlink-manager-hover-color;
+    }
+    &:after {
+      @apply bg-navlink-manager-hover-color;
+    }
+  }
+}
+

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

@@ -0,0 +1,200 @@
+
+.markdown, .trix-content {
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply mb-sm mt-md first:mt-0 font-headings leading-none;
+  }
+
+  h1 {
+    @apply text-heading-2;
+  }
+
+  h2 {
+    @apply text-heading-3;
+  }
+
+  h3 {
+    @apply text-heading-4;
+  }
+
+  h4 {
+    @apply text-heading-5;
+  }
+
+  h5, h6 {
+    @apply text-base uppercase font-semibold;
+  }
+
+  p {
+    @apply mb-xs;
+  }
+
+  em {
+    @apply px-xxs text-white font-normal bg-info rounded;
+  }
+
+  code {
+    @apply p-xxs mb-xs text-label bg-gray-lightest text-black font-mono rounded;
+  }
+
+  pre {
+    @apply w-auto py-xxs px-xs mb-xs overflow-auto text-black bg-gray-lightest rounded font-mono whitespace-pre-wrap;
+  }
+
+  pre > code {
+    @apply m-0 p-0 break-normal whitespace-pre bg-transparent border-0;
+  }
+
+  pre code {
+    @apply inline m-0 p-0 overflow-visible bg-transparent bottom-0;
+    line-height: inherit;
+    word-wrap: normal;
+  }
+
+  blockquote {
+    @apply m-0 pl-sm text-gray-darker border-l-4 border-gray-lighter;
+  }
+
+  figure {
+    display: block;
+    margin: 1em 40px;
+  }
+
+  hr {
+    @apply my-sm;
+  }
+
+  em strong,
+  strong em {
+    font-family: sans-serif;
+  }
+
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  th {
+    @apply py-xxs px-xs bg-gray-lighter border border-white text-left text-label font-semibold;
+  }
+
+  td {
+    @apply bg-gray-lightest border border-white p-xs text-left;
+  }
+}
+
+/*/// List styles with combinations ///*/
+
+
+.markdown, .trix-content {
+  ul, ol {
+    @apply relative block mt-xs mb-md overflow-visible;
+    counter-reset: list-counter;
+    list-style: none;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  li {
+    @apply ml-0;
+  }
+
+  ul li {
+    @apply relative mb-xxs pl-md;
+  }
+
+  ul ul > li {
+    @apply pl-sm;
+  }
+
+  ul ul ul > li {
+    margin-bottom: 5px;
+    padding-left: 12px;
+  }
+
+  ul ul > li::before {
+    top: 1px;
+    font-size: 12px;
+  }
+
+  ul ul ul > li::before {
+    top: 3px;
+    font-size: 8px;
+  }
+
+  ul > li, ol > li {
+    display: block;
+    position: relative;
+    line-height: 1;
+  }
+
+  ol {
+    @apply mt-md mb-spacing;
+  }
+
+  ol > li {
+    @apply mb-md;
+    counter-increment: list-counter;
+    position: relative;
+    padding-left: 40px;
+  }
+
+  ol > li::before {
+    @apply absolute block w-spacing h-spacing pt-xxs left-0 overflow-visible text-center bg-gray-lighter;
+    content: counter(list-counter);
+    top: -8px;
+    font-size: 18px;
+    line-height: 1;
+    border-radius: 50%;
+  }
+
+  ul > li::before {
+    position: absolute;
+    display: inline;
+    top: -4px;
+    left: 0;
+    width: auto;
+    height: auto;
+    padding-top: 0;
+    content: "●";
+    font-size: 20px;
+    text-align: left;
+    background-color: transparent;
+    border-radius: 0;
+  }
+
+  ol ol, ol ul, ul ol {
+    @apply mt-sm ml-0;
+  }
+
+  ul ul {
+    @apply mt-xs ml-0;
+  }
+
+  ol ol > li, ul ol > li {
+    margin-bottom: 12px;
+    padding-left: 30px;
+  }
+
+  ol ol > li::before, ul ol > li::before {
+    @apply w-md h-md text-base font-medium;
+    top: -1px;
+    padding-top: 2px;
+    line-height: 1.2;
+  }
+
+  ol ol ol > li, ul ul ul > li, ul ol ol > li {
+    margin-bottom: 5px;
+    padding-left: 20px;
+  }
+
+   ol ol ol > li::before, ul ol ol > li::before  {
+    content: counter(list-counter) ".";
+    text-align: left;
+    background-color: transparent;
+  }
+}

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

@@ -0,0 +1,57 @@
+
+aside.metasidebar {
+  @apply relative overflow-hidden;
+  grid-area: aside;
+}
+
+aside .metasidebar-btn {
+  @apply relative inline-flex items-center justify-center h-full w-spacing border-l border-bordercolor;
+}
+
+aside .metasidebar-btn::after {
+  @apply inline-block right-xs bg-primary top-xs w-xs h-icon;
+  content: "";
+  mask-image: url("/assets/images/arrow-left.svg");
+  mask-repeat: no-repeat;
+}
+
+aside .metasidebar-btn:hover {
+  @apply bg-link-hover;
+  &:after {
+    @apply bg-white;
+  }
+} 
+
+aside .metasidebar-wrapper[open] .metasidebar-btn {
+  @apply absolute w-md;
+}
+
+aside .metasidebar-wrapper[open] .metasidebar-btn::after {
+  mask-image: url("/assets/images/arrow-right.svg");
+  mask-repeat: no-repeat;
+}
+
+
+aside .metasidebar-wrapper {
+  @apply relative grid h-full max-h-full min-h-0 bg-white;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: minmax(0, 1fr);
+}
+
+aside .metasidebar-wrapper[open] {
+  @screen sm {
+    @apply relative grid top-auto;
+  }
+}
+
+aside .metasidebar-content {
+  @apply relative block sm:w-meta-sidebar-width max-h-full min-h-0 ml-md pt-spacing pr-spacing pb-xxl pl-xs overflow-y-scroll;
+}
+
+.metasidebar-title {
+  @apply text-heading-4 mb-heading;
+}
+
+.metasidebar-subheading {
+  @apply text-heading-5 mb-xs;
+}

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

@@ -0,0 +1,13 @@
+a.metric-item:hover .icon {
+  @apply text-link-hover;
+}
+
+.metric-item {
+  @apply inline-flex;
+  & .icon {
+    @apply mr-xxs;
+  }
+  &:last-child {
+    @apply mr-0;
+  }
+}

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

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

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

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