@webikon/webentor-core 0.9.12

package/resources/styles/common/_form.css

@@ -0,0 +1,83 @@
+:root {
+  --form-field-label-color: #000;
+  --form-field-label-font-size: 16px;
+  --form-field-input-border: #000;
+  --form-field-input-background: #ffffff;
+  --form-field-placeholder-color: #000;
+  --form-field-font-size: 16px;
+  --form-confirmation-message-color: green;
+  --form-validation-error-color: red;
+}
+
+.gform_wrapper.gform-theme {
+  width: 100%;
+  align-self: center;
+
+  .gfield {
+    padding: 4px 0;
+  }
+
+  .gform_fields {
+    row-gap: 8px;
+  }
+
+  .gform_heading {
+    display: none;
+  }
+
+  .gform_validation_errors,
+  .gform_submission_error {
+    font-size: 18px;
+    outline: none;
+    border: none;
+  }
+
+  .gfield_label {
+    color: var(--form-field-label-color);
+    font-size: var(--form-field-label-font-size);
+    font-weight: 400;
+    margin-bottom: 4px;
+  }
+
+  input,
+  textarea {
+    border: 2px solid var(--form-field-input-border);
+    background-color: var(--form-field-input-background);
+    padding: 16px 16px;
+    font-size: var(--form-field-font-size);
+    line-height: 1.5;
+    border-radius: 0;
+
+    &::placeholder {
+      color: var(--form-field-placeholder-color);
+    }
+  }
+
+  .gform_footer {
+    margin-top: 20px;
+    justify-content: left;
+  }
+
+  .gform_confirmation_message {
+    color: var(--form-confirmation-message-color);
+  }
+
+  .gfield_required > span,
+  .gfield_description.validation_message,
+  .gform_submission_error,
+  .gform_validation_errors .gform-icon {
+    color: var(--form-validation-error-color);
+  }
+
+  .gform_validation_errors,
+  .gform_validation_errors .gform-icon {
+    background-color: transparent;
+    border-color: var(--form-validation-error-color);
+  }
+
+  .gfield_visibility_hidden {
+    left: -9999px;
+    position: absolute;
+    visibility: hidden;
+  }
+}

package/resources/styles/common/_global.css

@@ -0,0 +1,73 @@
+@layer base {
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  html {
+    scroll-behavior: smooth;
+    font-family: var(--font-primary);
+  }
+
+  /**
+   * Disable smooth scrolling when users have prefers-reduced-motion enabled
+   */
+  @media screen and (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+
+  a,
+  button,
+  label {
+    transition:
+      color 0.15s ease-out,
+      background-color 0.15s ease-out,
+      opacity 0.15s ease-out,
+      border-color 0.15s ease-out;
+  }
+
+  svg {
+    transition: fill 0.15s ease-out, stroke 0.15s ease-out;
+  }
+}
+
+.tabs-navigation ul {
+  list-style: none;
+  margin-left: 0;
+}
+
+/* Fix for AlpineJS blip when page loads and we use x-show */
+[x-cloak] {
+  display: none !important;
+}
+
+/* Loading state for Alpine.js AJAX requests */
+[aria-busy='true'] {
+  cursor: wait;
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+/* Loading spinner */
+.loader {
+  width: 24px;
+  height: 24px;
+  border: 5px solid var(--color-white);
+  border-bottom-color: var(--color-primary);
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/resources/styles/common/_theme.css

@@ -0,0 +1,75 @@
+@theme {
+  /* Fonts */
+  --font-*: initial;
+  --font-primary:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-secondary: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-heading:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --default-font-family: var(--font-primary);
+
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-900: 900;
+
+  --leading-*: initial;
+  --leading-100: 1;
+  --leading-110: 1.1;
+  --leading-125: 1.25;
+  --leading-150: 1.5;
+
+  --text-*: initial;
+  --text-10: 0.625rem;
+  --text-12: 0.75rem;
+  --text-14: 0.875rem;
+  --text-16: 1rem;
+  --text-18: 1.125rem;
+  --text-20: 1.25rem;
+  --text-22: 1.375rem;
+  --text-24: 1.5rem;
+  --text-26: 1.625rem;
+  --text-28: 1.75rem;
+  --text-30: 1.875rem;
+  --text-32: 2rem;
+  --text-34: 2.125rem;
+  --text-36: 2.25rem;
+  --text-38: 2.375rem;
+  --text-40: 2.5rem;
+  --text-44: 2.75rem;
+  --text-48: 3rem;
+  --text-50: 3.125rem;
+  --text-56: 3.5rem;
+  --text-60: 3.75rem;
+  --text-80: 5rem;
+
+  /* Breakpoints */
+  --breakpoint-*: initial;
+  --breakpoint-sm: 30rem; /* 480px */
+  --breakpoint-md: 48rem; /* 768px */
+  --breakpoint-lg: 64rem; /* 1024px */
+  --breakpoint-xl: 75rem; /* 1200px */
+  --breakpoint-2xl: 100rem; /* 1600px */
+
+  /* Colors */
+  --color-editor-border: #ddd;
+
+  /* Borders */
+  --radius-*: initial;
+  --radius-none: 0;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+}

package/resources/styles/common/_utilities.css

@@ -0,0 +1,33 @@
+.bg-image-underlay {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    display: block;
+    inset: 0;
+    background-color: var(--color-gray-900);
+    opacity: 0.2;
+    content: '';
+  }
+
+  > * {
+    z-index: 1;
+  }
+}
+
+/* Border utilities */
+@utility border-t-* {
+  border-top-style: --value('none', 'solid', 'dashed', 'dotted', 'double');
+}
+
+@utility border-r-* {
+  border-right-style: --value('none', 'solid', 'dashed', 'dotted', 'double');
+}
+
+@utility border-b-* {
+  border-bottom-style: --value('none', 'solid', 'dashed', 'dotted', 'double');
+}
+
+@utility border-l-* {
+  border-left-style: --value('none', 'solid', 'dashed', 'dotted', 'double');
+}

package/resources/styles/common/_wordpress.css

@@ -0,0 +1,110 @@
+/* WordPress Core
+-------------------------------------------------------------- */
+.alignnone {
+  margin: 5px 20px 20px 0;
+}
+
+.aligncenter,
+div.aligncenter {
+  display: block;
+  margin: 5px auto;
+}
+
+.alignright {
+  float: right;
+  margin: 5px 0 20px 20px;
+}
+
+.alignleft {
+  float: left;
+  margin: 5px 20px 20px 0;
+}
+
+a img.alignright {
+  float: right;
+  margin: 5px 0 20px 20px;
+}
+
+a img.alignnone {
+  margin: 5px 20px 20px 0;
+}
+
+a img.alignleft {
+  float: left;
+  margin: 5px 20px 20px 0;
+}
+
+a img.aligncenter {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.wp-caption {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  max-width: 96%; /* Image does not overflow the content area */
+  padding: 5px 3px 10px;
+  text-align: center;
+}
+
+.wp-caption.alignnone {
+  margin: 5px 20px 20px 0;
+}
+
+.wp-caption.alignleft {
+  margin: 5px 20px 20px 0;
+}
+
+.wp-caption.alignright {
+  margin: 5px 0 20px 20px;
+}
+
+.wp-caption img {
+  border: 0 none;
+  height: auto;
+  margin: 0;
+  max-width: 98.5%;
+  padding: 0;
+  width: auto;
+}
+
+.wp-caption p.wp-caption-text {
+  font-size: 11px;
+  line-height: 17px;
+  margin: 0;
+  padding: 0 4px 5px;
+}
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}
+
+.screen-reader-text:focus {
+  background-color: #eee;
+  clip: auto !important;
+  clip-path: none;
+  color: #444;
+  display: block;
+  font-size: 1em;
+  height: auto;
+  left: 5px;
+  line-height: normal;
+  padding: 15px 23px 14px;
+  text-decoration: none;
+  top: 5px;
+  width: auto;
+  z-index: 100000;
+
+  /* Above WP toolbar. */
+}

package/resources/styles/components/_table.css

@@ -0,0 +1,102 @@
+:root {
+  /* TODO adjust variables */
+  --wbtr-table-row-border-width: 1px;
+  --wbtr-table-row-border-color: #e5e5e5;
+}
+
+.table-scroll-shadow {
+  &.has-scroll {
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      right: 0;
+      width: 16px; /* same as cell right padding */
+      height: 100%;
+      pointer-events: none;
+      background-image: linear-gradient(
+        270deg,
+        var(--color-white) 0%,
+        rgba(255 255 255 / 0%) 100%
+      );
+
+      @media (min-width: theme(--breakpoint-sm)) {
+        width: 24px;
+      }
+
+      @media (min-width: theme(--breakpoint-md)) {
+        width: 36px;
+      }
+
+      @media (min-width: theme(--breakpoint-lg)) {
+        width: 48px;
+      }
+    }
+  }
+}
+
+.table,
+.wp-block-table {
+  width: 100%;
+  display: block;
+  overflow-x: auto;
+  position: relative;
+
+  table {
+    width: 100%;
+    font-family: var(--font-primary);
+    text-align: left;
+  }
+  thead {
+    border-bottom: none;
+  }
+
+  th,
+  td {
+    padding-right: 16px;
+    border: none;
+    border-bottom: var(--wbtr-table-row-border-width) solid
+      var(--wbtr-table-row-border-color);
+    max-width: 200px;
+
+    @media (min-width: theme(--breakpoint-sm)) {
+      padding-right: 24px;
+      max-width: 400px;
+    }
+
+    @media (min-width: theme(--breakpoint-md)) {
+      padding-right: 36px;
+    }
+
+    @media (min-width: theme(--breakpoint-lg)) {
+      padding-right: 48px;
+    }
+  }
+
+  th {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    font-size: 16px;
+    font-weight: var(--font-weight-bold);
+
+    @media (min-width: theme(--breakpoint-sm)) {
+      font-size: 18px;
+    }
+  }
+
+  td {
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  table.has-fixed-layout {
+    table-layout: fixed;
+
+    th,
+    td {
+      white-space: normal;
+    }
+  }
+}

package/resources/styles/editor.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss' prefix(wbtr);
+@source "../views/";
+@source "../core-components/";
+@source "../blocks/";
+@source "../../app/";
+
+/* Tailwind Config */
+@import './common/_theme';
+@import './common/_utilities';
+
+/** Common **/
+@import './common/_global';
+@import './common/_editor';
+
+/** Components */
+@import './components/_table';

package/resources/styles/partials/_header.css

@@ -0,0 +1,21 @@
+.header {
+  &.is-sticky {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    transition: transform 0.2s ease-in-out;
+  }
+}
+
+.admin-bar {
+  .header.is-sticky {
+    padding-top: 32px;
+
+    /* stylelint-disable-next-line */
+    @media screen and (max-width: 782px) {
+      padding-top: 46px;
+    }
+  }
+}

package/resources/styles/partials/_pagination.css

@@ -0,0 +1,35 @@
+/* Post loop pagination */
+.wp-block-query-pagination {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  color: var(--color-primary);
+  font-size: 1rem;
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  .wp-block-query-pagination-previous {
+    position: absolute;
+    left: 0;
+  }
+
+  .wp-block-query-pagination-next {
+    position: absolute;
+    right: 0;
+  }
+
+  .page-numbers.current {
+    color: var(--color-primary);
+    font-size: 1.125rem;
+  }
+
+  .wp-block-query & {
+    > .wp-block-query-pagination-numbers,
+    > .wp-block-query-pagination-previous,
+    > .wp-block-query-pagination-next {
+      margin: 0;
+    }
+  }
+}