@phila/phila-ui-core 1.0.10 → 1.0.12

package/dist/styles/scss/inputs.scss

@@ -0,0 +1,350 @@
+/*
+Shared input styles
+Used by all input components
+*/
+
+input::-webkit-input-placeholder {
+  color: $grey-medium !important;
+  opacity: 1 !important;
+}
+
+input::-moz-placeholder {
+  color: $grey-medium !important;
+  opacity: 1 !important;
+}
+/* FF 4-18 */
+input:-moz-placeholder {
+  color: $grey-medium !important;
+  opacity: 1 !important;
+}
+/* FF 19+ */
+input:-ms-input-placeholder {
+  color: $grey-medium !important;
+  opacity: 1 !important;
+}
+
+input::placeholder {
+  color: $grey-medium !important;
+  opacity: 1 !important;
+}
+
+input:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+
+input:focus:-moz-placeholder {
+  color: transparent;
+}
+/* FF 4-18 */
+input:focus::-moz-placeholder {
+  color: transparent;
+}
+/* FF 19+ */
+input:focus:-ms-input-placeholder {
+  color: transparent;
+}
+
+.is-field-info {
+  margin: 0 0.5rem;
+  font-size: 0.875rem;
+  padding: 0 0 0.5rem 0;
+  + .has-error {
+    margin-top: 0.15rem;
+  }
+}
+.is-field-info-important {
+  @extend .is-field-info;
+  background-color: $ben-franklin-blue-light;
+  padding: 1rem;
+}
+
+form {
+  .form-padding {
+    padding: 0 0.5rem;
+  }
+  fieldset {
+    legend {
+      font-size: 0.875rem;
+      padding: 0 0.5rem;
+      font-weight: bold;
+    }
+  }
+  .field {
+    margin-bottom: 0 !important;
+  }
+  .form-submit {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+.input-wrap {
+  padding: 0.5rem 0.5rem 0.5rem;
+  position: relative;
+  label {
+    font-size: 0.875rem;
+    color: $grey-dark;
+    font-weight: $weight-bold;
+    line-height: 1.5rem;
+    margin-bottom: 0.5rem;
+    display: block;
+  }
+  .is-field-info {
+    margin: 0;
+  }
+  &.required {
+    &.input-textbox,
+    &.input-textarea,
+    &.input-dropdown {
+      label {
+        &:after {
+          content: "*";
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+  &.has-error {
+    background-color: $error-light;
+    margin-bottom: 2px;
+    .select select,
+    .input,
+    .textarea {
+      border: 2px solid $love-park-red-dark !important;
+      &:focus {
+        border: 2px solid $love-park-red-dark !important;
+      }
+    }
+    .input-error-msg {
+      font-size: 0.9rem;
+      color: $love-park-red-dark;
+      font-weight: $weight-semibold;
+      line-height: 1.2;
+      position: relative;
+      margin-top: 0.4rem;
+      .icon {
+        font-size: 1rem;
+        width: 1rem;
+        position: absolute;
+        top: -3px;
+        left: 1px;
+      }
+      span:last-child {
+        left: 1.3rem;
+        padding-right: 1.3rem;
+        position: relative;
+        display: inline-block;
+      }
+    }
+    &.input-textbox,
+    &.input-textarea,
+    &.input-dropdown {
+      label {
+        color: $love-park-red-dark;
+      }
+    }
+    &.input-checkbox,
+    &.input-radio {
+      legend {
+        color: $love-park-red-dark;
+      }
+    }
+  }
+  &.inner-label {
+    &.input-textbox,
+    &.input-dropdown,
+    &.input-textarea {
+      .control {
+        overflow: hidden;
+      }
+      label {
+        position: absolute;
+        top: 1px;
+        left: 0;
+        z-index: 5;
+        padding: 0 0 0 0.9rem;
+        white-space: nowrap;
+      }
+    }
+    input::-webkit-input-placeholder {
+      color: $grey-dark !important;
+      opacity: 1 !important;
+    }
+
+    input::-moz-placeholder {
+      color: $grey-dark !important;
+      opacity: 1 !important;
+    }
+    /* FF 4-18 */
+    input:-moz-placeholder {
+      color: $grey-dark !important;
+      opacity: 1 !important;
+    }
+    /* FF 19+ */
+    input:-ms-input-placeholder {
+      color: $grey-dark !important;
+      opacity: 1 !important;
+    }
+
+    input::placeholder {
+      color: $grey-dark !important;
+      opacity: 1 !important;
+    }
+  }
+  .input,
+  .textarea,
+  .select select {
+    border-bottom: 1px solid #979797;
+    font-size: 1.063rem;
+    &:focus {
+      background-color: $white;
+      border: 2px solid $electric-blue !important;
+    }
+  }
+  &.input-checkbox,
+  &.input-radio {
+    .control {
+      margin-bottom: 0.5rem;
+    }
+    label {
+      top: 0;
+      left: 0;
+      page-break-inside: avoid;
+      -webkit-column-break-inside: avoid;
+      break-inside: avoid;
+      font-weight: $weight-normal;
+    }
+    fieldset {
+      legend {
+        padding: 0 0 0.1rem 0;
+      }
+    }
+
+    &.small-checkradio {
+      .control {
+        margin-bottom: 0.1rem;
+      }
+      .is-checkradio[type="checkbox"] + label {
+        margin-left: 1.5rem;
+        font-size: $size-small;
+        &:before {
+          width: 1.125rem;
+          height: 1.125rem;
+          left: -1.5rem !important;
+          top: 0.18rem;
+        }
+        &:after {
+          top: 0.3rem;
+          left: -1.1rem !important;
+        }
+      }
+
+      .is-checkradio[type="radio"] + label {
+        margin-left: 1.5rem !important;
+        font-size: $size-small;
+        &:before {
+          width: 1.125rem;
+          height: 1.125rem;
+          left: -1.5rem !important;
+          top: 0.18rem;
+        }
+        &:after {
+          transform: scale(0.3);
+          top: 0rem;
+          left: -1.7rem !important;
+        }
+      }
+    }
+
+    &.required {
+      fieldset legend {
+        &:after {
+          content: "*";
+          font-size: 0.875rem;
+        }
+      }
+    }
+    .is-checkradio[type="checkbox"]:checked {
+      + label {
+        &:before {
+          border-color: transparent !important;
+          background-color: $ben-franklin-blue;
+        }
+        &:after {
+          font-weight: $weight-semibold;
+          border-color: $white !important;
+        }
+      }
+    }
+
+    .is-checkradio[type="radio"]:checked {
+      + label {
+        &:before {
+          border-color: transparent !important;
+          background-color: $ben-franklin-blue;
+        }
+        &:after {
+          background-color: $white;
+        }
+      }
+    }
+
+    .is-checkradio + label:before {
+      border: 0.09rem solid #a1a1a1 !important;
+      left: -2rem !important;
+    }
+    .is-checkradio[type="checkbox"] + label:after {
+      top: 0.3rem;
+      left: -1.4rem !important;
+    }
+    .is-checkradio[type="radio"] + label:after {
+      left: -2rem !important;
+    }
+    .is-checkradio + label {
+      display: inline-block;
+      font-size: 1.063rem;
+      margin: 0 0 0 2rem;
+      padding: 0;
+      &:hover {
+        &:before {
+          border-color: $ben-franklin-blue !important;
+        }
+      }
+    }
+  }
+  .supplemental-text {
+    font-size: $size-small;
+    padding: 0.2rem 0.75rem 0 0.8rem;
+    line-height: 1rem;
+  }
+}
+
+.field {
+  .control {
+    &.is-loading {
+      // &:after {
+      // top: calc(50% - 1.75rem);
+      // }
+      span.icon {
+        opacity: 0 !important;
+      }
+    }
+    &.has-icons-right,
+    &.has-icons-left {
+      span.input-icon.is-right,
+      span.input-icon.is-left {
+        height: 3.5rem;
+        font-size: 1.2rem;
+        color: $grey-medium;
+      }
+      .select {
+        label {
+          padding-left: 2.85rem;
+        }
+        select {
+          padding-left: 2.5rem;
+        }
+      }
+    }
+  }
+}

package/dist/styles/scss/mixins.scss

@@ -0,0 +1,220 @@
+@mixin heading {
+  font-family: $family-secondary;
+  color: $grey-dark;
+  font-weight: $weight-semibold;
+  margin: 0 0 0.5rem 0;
+}
+
+@mixin heading-1 {
+  @include heading;
+  line-height: 2.5rem;
+  font-size: 2rem !important;
+}
+
+@mixin heading-2 {
+  @include heading;
+  line-height: 2.1875rem;
+  font-size: 1.75rem !important;
+}
+
+@mixin heading-3 {
+  @include heading;
+  line-height: 1.875rem;
+  font-size: 1.5rem !important;
+}
+
+@mixin heading-4 {
+  @include heading;
+  line-height: 1.5625rem;
+  font-size: 1.25rem !important;
+}
+
+@mixin heading-5 {
+  @include heading;
+  line-height: 1.25rem;
+  font-size: 1rem !important;
+}
+
+@mixin heading-6 {
+  @include heading;
+  line-height: 1.25rem;
+  font-size: 1rem !important;
+  font-weight: $weight-normal;
+  text-transform: uppercase;
+}
+
+@mixin headings-set-sizes {
+  &.is-1 {
+    @include heading-1;
+  }
+
+  &.is-2 {
+    @include heading-2;
+  }
+
+  &.is-3 {
+    @include heading-3;
+  }
+
+  &.is-4 {
+    @include heading-4;
+  }
+
+  &.is-5 {
+    @include heading-5;
+  }
+
+  &.is-6 {
+    @include heading-6;
+  }
+}
+
+@mixin font-sizes {
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-medium,
+  &.is-normal {
+    font-size: $size-medium;
+  }
+
+  &.is-large {
+    font-size: $size-large;
+  }
+}
+
+@mixin link {
+  color: $ben-franklin-blue-dark;
+  text-decoration: underline;
+  font-weight: $weight-bold;
+
+  &.external-link,
+  &.is-external-link {
+    display: inline-block;
+    &:after {
+      content: "\f35d";
+      font-family: "Font Awesome 5 Pro";
+      font-weight: 900;
+      display: inline-block;
+      font-size: $size-small;
+      margin-left: 0.25rem;
+    }
+  }
+  &.is-inverted {
+    color: $white;
+  }
+}
+
+@mixin small-link {
+  font-size: $size-small;
+  &.external-link,
+  &.is-external-link {
+    &:after {
+      font-size: 0.7rem;
+    }
+  }
+}
+
+@mixin table-styles {
+  width: 100%;
+  border: 0;
+  thead {
+    tr {
+      th {
+        background-clip: padding-box;
+        position: relative;
+        background-color: $grey-dark;
+        color: $white;
+        font-weight: $weight-semibold;
+        font-size: $size-small;
+        border: 3px solid $white;
+        padding: 10px 8px;
+        line-height: 18px;
+        &.sortable {
+          cursor: pointer;
+          padding-right: 20px;
+          &:before,
+          &:after {
+            border-radius: 1px;
+            border: 5px solid transparent;
+            content: "";
+            display: block;
+            height: 0;
+            right: 8px;
+            top: 8px;
+            position: absolute;
+            width: 0;
+          }
+          &:before {
+            border-bottom-color: #b5b5b5;
+          }
+          &:after {
+            border-top-color: #b5b5b5;
+            margin-top: 12px;
+          }
+          &:hover {
+            &:before {
+              border-bottom-color: $white;
+            }
+            &:after {
+              border-top-color: $white;
+            }
+          }
+          &.sorting {
+            background-color: $ben-franklin-blue;
+            color: $white;
+            &.sorting-asc {
+              &:before {
+                border-bottom-color: $white;
+              }
+              &:after {
+                border-top-color: #85b4e6;
+              }
+            }
+            &.sorting-desc {
+              &:before {
+                border-bottom-color: #85b4e6;
+              }
+              &:after {
+                border-top-color: $white;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      &:nth-of-type(even) {
+        td {
+          background-color: #d8d8d8;
+        }
+      }
+      td {
+        background-clip: padding-box;
+        position: relative;
+        background-color: $ghost-grey;
+        color: $grey-dark;
+        font-size: $size-small;
+        border: 3px solid $white;
+        padding: 10px 8px;
+        line-height: 20px;
+      }
+    }
+  }
+
+  &.is-align-middle {
+    td,
+    th {
+      vertical-align: middle;
+    }
+  }
+
+  &.table-responsive {
+    width: 100%;
+    overflow: hidden;
+    overflow-x: auto;
+  }
+}

package/dist/styles/scss/table.scss

@@ -0,0 +1,10 @@
+/*
+Table Styles
+PhilaUI table styles applied to the .table class, and compatible with the vue-good-table plugin
+*/
+
+@import "mixins";
+
+table.table {
+  @include table-styles;
+}

package/dist/styles/scss/textbox-inputs.scss

@@ -0,0 +1,29 @@
+/*
+Input Textbox Styles
+Applied to the Textbox component and other components that inherit the Textbox visuals
+*/
+.input-textbox {
+  .input {
+    height: 3.5rem;
+  }
+  &.inner-label {
+    .input {
+      + label {
+        opacity: 0;
+      }
+      &:not(:placeholder-shown),
+      &:focus {
+        padding: 1rem 2.2rem 0 0.75rem;
+        + label {
+          opacity: 1;
+        }
+      }
+    }
+    .input:not(:-ms-input-placeholder) {
+      padding: 1rem 2.2rem 0 0.75rem;
+      + label {
+        opacity: 1;
+      }
+    }
+  }
+}

package/dist/styles/scss/variables.scss

@@ -0,0 +1,86 @@
+@import './colors.scss';
+@import './derived-colors.scss';
+@import './fonts.scss';
+
+$family-sans-serif: 'Open Sans', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+
+$family-secondary: Montserrat, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+
+$radius: 0;
+$radius-large: 0;
+$notification-padding: 1rem 2.5rem 1rem 1rem;
+
+// NAVBAR OVERRIDES
+$navbar-item-img-max-height: 75px;
+$navbar-padding-vertical: 0.5rem;
+$navbar-padding-horizontal: 1rem;
+$navbar-background-color: $ben-franklin-blue-dark;
+$navbar-item-color: $white;
+$navbar-item-hover-background-color: transparent;
+$navbar-item-hover-color: $electric-blue;
+
+$navbar-dropdown-radius: 0;
+$navbar-dropdown-boxed-radius: 0;
+$navbar-dropdown-boxed-shadow: none;
+
+// FOOTER OVERRIDES
+$footer-background-color: $ben-franklin-blue-dark;
+$footer-padding: rem-calc(10px);
+$footer-color: $white;
+
+// INPUT OVERRIDES
+$input-background-color: $ghost-grey;
+$input-focus-box-shadow-size: none;
+$input-border-color: transparent;
+$input-hover-border-color: transparent;
+$input-focus-border-color: $electric-blue;
+$input-shadow: none;
+
+// TABS
+$tabs-boxed-link-hover-background-color: none;
+$tabs-link-hover-color: $ben-franklin-blue-dark;
+
+// TABLES
+$table-striped-row-even-background-color: $ghost-grey;
+
+// MODALS
+$modal-content-width: 760px;
+$modal-card-head-padding: 15px;
+$modal-card-body-padding: 15px;
+
+//TITLE OVERRIDE
+$title-line-height: 1.4;
+
+
+//Bulma unchanged defaults
+$body-background-color: $white;
+$body-size: 16px;
+$body-min-width: 300px;
+$body-rendering: optimizeLegibility;
+$body-weight: 400;
+
+
+//Bulma Existing and overwritten
+$button-padding-vertical: 0.75rem;
+$button-padding-horizontal: 1.5rem;
+
+$size-small: 0.875rem;
+$size-medium: 1rem;
+$size-normal: 1rem;
+$size-large: 1.125rem;
+
+$line-height-medium: 1.5rem;
+$line-height-large: 2rem;
+
+$body-line-height: 1.5rem;
+
+$size-1: 2rem;
+$size-2: 1.75rem;
+$size-3: 1.25rem;
+$size-4: 1.125rem;
+$size-5: $size-small;
+$size-6: $size-small;
+$size-7: $size-small;
+$link-hover: $ben-franklin-blue-dark;
+
+$tablet: 768px !default;

package/dist/styles/scss/vendors/vendors.scss

@@ -0,0 +1 @@
+@import "vue-good-table.scss";

package/dist/styles/scss/vendors/vue-good-table.scss

@@ -0,0 +1,15 @@
+.vgt-inner-wrap {
+  border-radius: 0;
+  box-shadow: none;
+  table.table thead tr th button {
+    width: 100%;
+    height: 100%;
+    padding: 0 .5rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    background-color: transparent;
+    cursor: pointer;
+  }
+}