@phila/phila-ui-core 1.0.9 → 1.0.10

package/dist/styles/scss/inputs.scss

@@ -1,350 +0,0 @@
-/*
-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

@@ -1,220 +0,0 @@
-@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

@@ -1,10 +0,0 @@
-/*
-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

@@ -1,29 +0,0 @@
-/*
-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

@@ -1,86 +0,0 @@
-@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

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

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

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