@mjsz-vbr-elements/shared 2.1.0-beta.5

package/dist/css/cards.css

@@ -0,0 +1,85 @@
+.is-card {
+  background-color: #fff;
+  padding: 15px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+.is-card > div {
+  border-bottom: 1px solid var(--vbr-widget-primary-color-100);
+}
+
+.is-card > div:last-of-type {
+    border: none;
+  }
+
+.mjsz-vbr-card-item {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: 2fr 1fr 2fr;
+  padding: 2rem 0;
+  border-bottom: 1px solid var(--vbr-widget-primary-color-100);
+}
+
+.mjsz-vbr-card-item svg {
+    display: block;
+  }
+
+.mjsz-vbr-card-item .is-info {
+    grid-column: 1/4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--vbr-widget-primary-color-500);
+  }
+
+.mjsz-vbr-card-item .is-home-team {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+    font-weight: 700;
+  }
+
+.mjsz-vbr-card-item .is-away-team {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+    font-weight: 700;
+  }
+
+.mjsz-vbr-card-item .is-logo-image {
+    width: 40px;
+  }
+
+.mjsz-vbr-card-item .is-game-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+.mjsz-vbr-card-item .is-game-data a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: var(--vbr-widget-primary-color-900);
+    }
+
+.mjsz-vbr-card-item .is-game-data a:hover {
+        color: var(--vbr-widget-primary-color-600);
+      }
+
+.mjsz-vbr-card-item .is-game-data.is-live {
+      color: var(--vbr-widget-live-game-color);
+    }
+
+.mjsz-vbr-card-item .is-game-data.is-live a {
+        color: var(--vbr-widget-live-game-color);
+      }
+
+.mjsz-vbr-section-selector {
+  margin: 20px 0;
+  border-bottom: 1px solid var(--vbr-widget-primary-color-200);
+}

package/dist/css/common.css

@@ -0,0 +1,319 @@
+h1,
+h2,
+h3,
+ul,
+li,
+dl,
+dt,
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+
+  border-width: 0;
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+  cursor: pointer;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+:root,
+:host {
+  font-family: 'Roboto Condensed', Avenir, Helvetica, Arial, sans-serif;
+
+  --vbr-widget-primary-color-0: #ffffff;
+  --vbr-widget-primary-color-50: #eceff1;
+  --vbr-widget-primary-color-100: #cfd8dc;
+  --vbr-widget-primary-color-200: #b0bec5;
+  --vbr-widget-primary-color-300: #90a4ae;
+  --vbr-widget-primary-color-400: #78909c;
+  --vbr-widget-primary-color-500: #607d8b;
+  --vbr-widget-primary-color-600: #546e7a;
+  --vbr-widget-primary-color-700: #455a64;
+  --vbr-widget-primary-color-800: #37474f;
+  --vbr-widget-primary-color-900: #263238;
+
+  --vbr-widget-secondary-color-100: #dcedc8;
+  --vbr-widget-secondary-color-200: #badb94;
+  --vbr-widget-secondary-color-300: #aed581;
+  --vbr-widget-secondary-color-400: #9ccc65;
+  --vbr-widget-secondary-color-500: #8bc34a;
+  --vbr-widget-secondary-color-700: #689f38;
+  --vbr-widget-secondary-color-800: #558b2f;
+  --vbr-widget-secondary-color-900: #33691e;
+
+  --vbr-widget-danger-color-50: #ffebee;
+  --vbr-widget-danger-color-100: #ffcdd2;
+  --vbr-widget-danger-color-200: #ef9a9a;
+  --vbr-widget-danger-color-300: #e57373;
+  --vbr-widget-danger-color-400: #ef5350;
+  --vbr-widget-danger-color-500: #f44336;
+  --vbr-widget-danger-color-700: #d32f2f;
+  --vbr-widget-danger-color-900: #b71c1c;
+  --vbr-widget-danger-color-a400: #ff1744;
+
+  --vbr-widget-live-game-color: #8bc34a;
+
+  --vbr-widget-table-header-font-size: 12px;
+  --vbr-widget-table-default-column-width: 30px;
+  --vbr-widget-table-default-bg-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-table-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-table-neutral-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-table-header-bg-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-table-header-hover-bg-color: var(--vbr-widget-primary-color-700);
+  --vbr-widget-table-header-color: var(--vbr-widget-primary-color-200);
+  --vbr-widget-table-table-header-active-bg-color: var(--vbr-widget-primary-color-700);
+  --vbr-widget-table-header-active-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-table-hover-color: var(--vbr-widget-secondary-color-900);
+  --vbr-widget-table-hover-bg-color: var(--vbr-widget-secondary-color-100);
+  --vbr-widget-table-active-color: var(--vbr-widget-secondary-color-900);
+  --vbr-widget-table-active-bg-color: var(--vbr-widget-secondary-color-200);
+  --vbr-widget-table-active-even-bg-color: var(--vbr-widget-secondary-color-300);
+  --vbr-widget-table-active-hover-color: var(--vbr-widget-secondary-color-900);
+  --vbr-widget-table-active-hover-bg-color: var(--vbr-widget-secondary-color-400);
+  --vbr-widget-table-portrait-border-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-table-portrait-bg-color: var(--vbr-widget-primary-color-50);
+  --vbr-widget-table-cell-light-color: var(--vbr-widget-primary-color-600);
+  --vbr-widget-table-cell-dark-color: var(--vbr-widget-primary-color-900);
+  --vbr-widget-table-stripped-bg-color: #f8f9fa;
+  --vbr-widget-table-label-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-table-label-bg-color: var(--vbr-widget-primary-color-50);
+  --vbr-widget-table-cell-logo-size: 20px;
+  --vbr-widget-table-cell-portrait-size: 26px;
+
+  --vbr-widget-paginator-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-paginator-bg-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-paginator-hover-color: var(--vbr-widget-primary-color-700);
+  --vbr-widget-paginator-hover-bg-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-paginator-border-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-paginator-active-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-paginator-active-bg-color: var(--vbr-widget-primary-color-900);
+  --vbr-widget-paginator-disabled-color: var(--vbr-widget-primary-color-200);
+
+  --vbr-widget-tooltip-font-size: 12px;
+  --vbr-widget-tooltip-color: #ffffff;
+  --vbr-widget-tooltip-bg-color: #000000;
+
+  --vbr-widget-popover-trigger-hover-bg-color: var(--vbr-widget-secondary-color-200);
+  --vbr-widget-popover-trigger-focus-bg-color: var(--vbr-widget-secondary-color-300);
+  --vbr-widget-popover-bg-color: var(--vbr-widget-primary-color-0);
+
+  --vbr-widget-dropdown-item-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-dropdown-item-hover-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-dropdown-item-hover-bg-color: var(--vbr-widget-primary-color-50);
+
+  --vbr-widget-error-notice-bg-color: var(--vbr-widget-danger-color-50);
+  --vbr-widget-error-notice-border-color: var(--vbr-widget-danger-color-100);
+  --vbr-widget-error-notice-color: var(--vbr-widget-danger-color-700);
+
+  --vbr-widget-link-color: var(--vbr-widget-secondary-color-700);
+  --vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
+
+  --vbr-widget-base-input-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-base-input-font-size: 0.875rem;
+  --vbr-widget-base-input-border-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-base-input-border-radius: 3px;
+
+  --vbr-widget-form-label-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-form-label-font-size: 0.75rem;
+
+  --vbr-widget-timezone-selector-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-timezone-selector-font-size: 0.8125rem;
+
+  --vbr-widget-badge-bg-color: var(--vbr-widget-primary-color-50);
+  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
+  --vbr-widget-badge-font-size: 0.625rem;
+
+  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
+  --vbr-widget-tab-btn-font-size: 1rem;
+  --vbr-widget-tab-btn-font-weight: 500;
+  --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-tab-btn-border-color: transparent;
+  --vbr-widget-tab-btn-border-style: solid;
+  --vbr-widget-tab-btn-border-width: 0 0 3px 0;
+  --vbr-widget-tab-btn-text-transform: uppercase;
+  --vbr-widget-tab-btn-hover-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-tab-btn-hover-bg-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-tab-btn-hover-border-color: transparent;
+  --vbr-widget-tab-btn-active-bg-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-tab-btn-active-color: var(--vbr-widget-primary-color-900);
+  --vbr-widget-tab-btn-active-border-color: var(--vbr-widget-secondary-color-500);
+
+  --vbr-widget-progress-height: 10px;
+  --vbr-widget-progress-border-radius: 5px;
+  --vbr-widget-progress-bg-color: var(--vbr-widget-primary-color-50);
+  --vbr-widget-progress-bar-color: var(--vbr-widget-live-game-color);
+  --vbr-widget-progress-bar-stripe-color: rgba(255, 255, 255, 0.2);
+  --vbr-widget-progress-bar-stripe-angle: 45deg;
+
+  --vbr-widget-gamecenter-result-size: 6rem;
+  --vbr-widget-gamecenter-result-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-gamecenter-teamname-size: 1.3125rem;
+  --vbr-widget-gamecenter-teamname-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-gamecenter-title-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-gamecenter-title-size: 1rem;
+  --vbr-widget-gamecenter-gamedate-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-gamecenter-gamedate-size: 1rem;
+  --vbr-widget-gamecenter-local-gamedate-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-gamecenter-local-gamedate-size: 0.8125rem;
+  --vbr-widget-gamecenter-gamestatus-color: var(--vbr-widget-primary-color-600);
+  --vbr-widget-gamecenter-gamestatus-size: 1rem;
+  --vbr-widget-gamecenter-periodresults-color: var(--vbr-widget-primary-color-600);
+  --vbr-widget-gamecenter-periodresults-size: 1.3125rem;
+  --vbr-widget-gamecenter-period-header-bg-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-gamecenter-period-header-color: var(--vbr-widget-primary-color-0);
+  --vbr-widget-gamecenter-stats-bg-color: var(--vbr-widget-primary-color-50);
+  --vbr-widget-gamecenter-stats-border-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-gamecenter-stats-title-size: 0.8125rem;
+  --vbr-widget-gamecenter-stats-title-color: var(--vbr-widget-primary-color-400);
+  --vbr-widget-gamecenter-stats-size: 1rem;
+  --vbr-widget-gamecenter-stats-color: var(--vbr-widget-primary-color-800);
+
+  --vbr-widget-gamecenter-team-container-title-color: var(--vbr-widget-primary-color-800);
+  --vbr-widget-gamecenter-team-container-title-bg-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
+
+  --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
+  --vbr-widget-gamecenter-events-poi-list-size: 0.75rem;
+  --vbr-widget-gamecenter-events-score-size: 1rem;
+  --vbr-widget-gamecenter-events-penalty-size: 0.875rem;
+  --vbr-widget-gamecenter-events-goalie-direction-size: 0.875rem;
+}
+
+.transition-fade-enter-active,
+.transition-fade-leave-active {
+  transition: all 0.25s ease;
+}
+
+.transition-fade-enter-from,
+.transition-fade-leave-to {
+  opacity: 0;
+  transform: translateY(5px);
+}
+
+img {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
+
+img.is-loaded {
+  opacity: 1;
+}
+
+a {
+  color: var(--vbr-widget-link-color);
+  text-decoration: none;
+}
+
+a:hover {
+    color: var(--vbr-widget-hover-color);
+  }
+
+.floating-content.is-tooltip {
+    background-color: var(--vbr-widget-tooltip-bg-color);
+    color: var(--vbr-widget-tooltip-color);
+    font-weight: bold;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: var(--vbr-widget-tooltip-font-size);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+.floating-content.is-tooltip .is-arrow {
+      background-color: var(--vbr-widget-tooltip-bg-color);
+    }
+
+.floating-content.is-content {
+    /* width: 220px; */
+    border-radius: 4px;
+    box-shadow: 2px 14px 23px 0px rgba(0, 0, 0, 0.25);
+  }
+
+.floating-content.is-content .is-arrow {
+      background-color: var(--vbr-widget-primary-color-50);
+    }
+
+.floating-content .is-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+  }
+
+[data-placement^='top'] .floating-content .is-arrow {
+      bottom: -4px;
+    }
+
+[data-placement^='bottom'] .floating-content .is-arrow {
+      top: -4px;
+    }
+
+[data-placement^='left'] .floating-content .is-arrow {
+      right: -4px;
+    }
+
+[data-placement^='right'] .floating-content .is-arrow {
+      left: -4px;
+    }
+
+.mjsz-vbr-error-notice {
+  display: flex;
+  align-items: center;
+  justify-items: flex-start;
+  margin: 10px 0;
+  padding: 10px 20px;
+  background-color: var(--vbr-widget-error-notice-bg-color);
+  color: var(--vbr-widget-error-notice-color);
+  border: 1px solid var(--vbr-widget-error-notice-border-color);
+}
+
+.mjsz-vbr-error-notice .icon {
+    margin-right: 15px;
+  }
+
+.mjsz-vbr-timezone-selector {
+  padding: 3px 0;
+  color: var(--vbr-widget-timezone-selector-color);
+  font-size: var(--vbr-widget-timezone-selector-font-size);
+  font-weight: 500;
+}
+
+.mjsz-vbr-timezone-selector .is-active {
+    font-weight: 700;
+  }
+
+.is-badge {
+  display: inline-block;
+  padding: 0.125rem 0.25rem;
+  color: var(--vbr-widget-badge-color);
+  font-size: var(--vbr-widget-badge-font-size);
+  font-weight: 700;
+  text-transform: uppercase;
+  background-color: var(--vbr-widget-badge-bg-color);
+  border-radius: 3px;
+}
+
+.is-badge + .is-badge {
+    margin-left: 3px;
+  }
+
+.is-badge.is-invert {
+    color: var(--vbr-widget-badge-bg-color);
+    background-color: var(--vbr-widget-badge-color);
+  }

package/dist/css/dropdown.css

@@ -0,0 +1,33 @@
+.is-dropdown-menu {
+  padding: 8px 0;
+  margin: 0;
+  min-width: 160px;
+  color: black;
+  list-style: none;
+  background: var(--vbr-widget-popover-bg-color);
+  border-radius: 3px;
+  box-shadow: 0 5px 30px rgba(black, 0.3);
+}
+
+  .is-dropdown-menu .is-dropdown-item {
+    display: flex;
+    align-items: center;
+    padding: .25rem 1rem;
+    font-family: var(--vbr-widget-font-family);
+    line-height: 24px;
+    color: var(--vbr-widget-dropdown-item-color);
+    text-align: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+  }
+
+  .is-dropdown-menu .is-dropdown-item:hover {
+      color: var(--vbr-widget-dropdown-item-hover-color);
+      background-color: var(--vbr-widget-dropdown-item-hover-bg-color);
+    }
+
+  .is-dropdown-menu .is-dropdown-item svg {
+      margin-right: 8px;
+    }

package/dist/css/forms.css

@@ -0,0 +1,63 @@
+.mjsz-vbr-base-input {
+  padding: 0.375rem 0.75rem;
+  color: var(--vbr-widget-base-input-color);
+  border: 1px solid var(--vbr-widget-base-input-border-color);
+  border-radius: var(--vbr-widget-base-input-border-radius);
+  width: 100%;
+  -moz-padding-start: calc(0.75rem - 3px);
+  font-size: var(--vbr-widget-base-input-font-size);
+  font-weight: 400;
+  line-height: 1.5;
+  background-color: #fff;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  appearance: none;
+}
+
+  .mjsz-vbr-base-input:disabled {
+    opacity: 0.3;
+  }
+
+.mjsz-vbr-base-input.is-select {
+  padding-right: 2.25rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 16px 12px;
+}
+
+label {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--vbr-widget-form-label-color);
+  font-size: var(--vbr-widget-form-label-font-size);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.mjsz-vbr-tab-button {
+  padding: var(--vbr-widget-tab-btn-padding);
+  font-family: inherit;
+  font-size: var(--vbr-widget-tab-btn-font-size);
+  font-weight: var(--vbr-widget-tab-btn-font-weight);
+  color: var(--vbr-widget-tab-btn-color);
+  text-transform: var(--vbr-widget-tab-btn-text-transform);
+  background-color: var(--vbr-widget-tab-btn-bg-color);
+  border-color: var(--vbr-widget-tab-btn-border-color);
+  border-width: var(--vbr-widget-tab-btn-border-width);
+  border-style: var(--vbr-widget-tab-btn-border-style);
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.mjsz-vbr-tab-button:hover {
+    color: var(--vbr-widget-tab-btn-hover-color);
+    border-color: var(--vbr-widget-tab-btn-hover-border-color);
+    background-color: var(--vbr-widget-tab-btn-hover-bg-color);
+  }
+
+.mjsz-vbr-tab-button.is-active {
+    color: var(--vbr-widget-tab-btn-active-color);
+    border-color: var(--vbr-widget-tab-btn-active-border-color);
+    background-color: var(--vbr-widget-tab-btn-active-bg-color);
+  }