@phila/phila-ui-core 1.0.11 → 1.0.14

package/dist/styles/scss/deprecated/buttons.scss

@@ -0,0 +1,135 @@
+.font-sizes {
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-medium, &.is-normal {
+    font-size: $size-medium;
+  }
+
+  &.is-large {
+    font-size: $size-large;
+  }
+}
+
+.button {
+  border-width: 0.25rem;
+  font-weight: $weight-semibold;
+  border-color: transparent;
+
+  &:focus {
+    &:not(:active) {
+      box-shadow: 0 0 0 0.25em $electric-blue !important;
+    }
+  }
+
+  &.is-primary, &.is-secondary, &.is-danger, &.is-cta {
+    &:hover {
+      background-color: $grey-dark;
+      border-color: $grey-dark;
+      color: $white;
+    }
+    &:active {
+      background-color: $black;
+      border-color: $black;
+      color: $white;
+    }
+    &:disabled {
+      background-color: $sidewalk-grey;
+      border-color: $sidewalk-grey;
+      color: $white;
+    }
+  }
+
+  &.is-secondary {
+    @extend .is-primary;
+    @extend .is-outlined;
+    border-width: 0.125rem;
+    color: $ben-franklin-blue;
+    border-color: $ben-franklin-blue;
+    &:focus:not(:active) {
+      background-color: $white;
+      color: $ben-franklin-blue;
+      border-color: $ben-franklin-blue;
+    }
+    &:disabled {
+      background-color: $white !important;
+      border-color: $sidewalk-grey !important;
+      color: $sidewalk-grey !important;
+      border-width: 0.125rem !important;
+    }
+  }
+
+  &.is-tertiary {
+    border: 0 !important;
+    color: $primary;
+    &:focus {
+      &:not(:active) {
+        border-color: transparent !important;
+        border-width: 0;
+        box-shadow: 0 0 0 0.25em $grey-dark !important;
+      }
+    }
+    &:hover {
+      background-color: $grey-dark;
+      border-color: $ben-franklin-blue;
+      color: $white !important;
+    }
+    &:active {
+      background-color: $black;
+      border-color: $grey-dark;
+      color: $white;
+    }
+    &:disabled {
+      color: $sidewalk-grey;
+      &:hover {
+        background-color: $white;
+        color: $sidewalk-grey !important;
+      }
+    }
+  }
+
+  &.is-cta, input[type='submit'] {
+    font-family: $family-secondary;
+    font-weight: $weight-bold;
+    text-transform: uppercase;
+    padding: 1rem 2.5rem;
+    color: $ben-franklin-blue-dark;
+    border-color: $ben-franklin-blue-dark;
+    background-color: transparent;
+    &:not(.is-tertiary):not(.is-secondary) {
+      &:hover {
+        background-color: $grey-dark;
+      }
+      &:active {
+        background-color: $black;
+      }
+      background-color: $ben-franklin-blue-dark;
+      border-color: transparent;
+      color: $white;
+      &:disabled {
+        background-color: $sidewalk-grey;
+      }
+    }
+    &:disabled {
+      background-color: transparent;
+      color: $sidewalk-grey;
+    }
+  }
+
+  @extend .font-sizes;
+
+  &.is-small {
+    padding: 0.5rem 1rem;
+    border-radius: 0;
+  }
+
+  &.is-medium, &.is-normal {
+    padding: 0.75rem 1.5em;
+  }
+
+  &.is-large {
+    padding: 1rem 2rem;
+  }
+
+}

package/dist/styles/scss/deprecated/content-padding.scss

@@ -0,0 +1,3 @@
+.content {
+  padding: 1.5rem;
+}

package/dist/styles/scss/deprecated/headings.scss

@@ -0,0 +1,112 @@
+@mixin deprecated-title-sizes {
+  &.is-size-1,
+  &.is-1 {
+    font-size: $size-1;
+    line-height: $size-1;
+  }
+  &.is-size-2,
+  &.is-2 {
+    font-size: $size-2;
+    line-height: $size-2;
+  }
+  &.is-size-3,
+  &.is-3 {
+    font-size: $size-3;
+    line-height: $size-3;
+  }
+  &.is-size-4,
+  &.is-4 {
+    font-size: $size-4;
+    line-height: $size-4;
+  }
+
+  &.is-size-5,
+  &.is-size-6,
+  &.is-5,
+  &.is-6 {
+    font-size: $size-small;
+    line-height: $size-small;
+  }
+}
+
+@mixin deprecated-subtitle-sizes {
+  &.is-1 {
+    font-size: 1.5rem;
+    line-height: 1.33rem;
+  }
+  &.is-2 {
+    font-size: 1.25rem;
+    line-height: 1.2rem;
+  }
+  &.is-3 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+  &.is-4,
+  &.is-5,
+  &.is-6 {
+    font-size: 0.875rem;
+    line-height: 1.29rem;
+  }
+}
+
+.content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $family-secondary;
+    font-weight: $weight-normal;
+    margin-bottom: 0;
+    line-height: 1.25;
+    &:not(:first-child) {
+      margin-top: 0 !important;
+    }
+    &.heading-with-background {
+      margin-bottom: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      background-color: $ghost-grey;
+      font-size: $size-3;
+    }
+    &.heading-with-contrast {
+      margin-bottom: 0.5rem;
+      border-bottom: 10px solid $ben-franklin-blue;
+      font-size: $size-2;
+    }
+
+    &.title {
+      @include deprecated-title-sizes;
+      font-weight: $weight-normal;
+      margin-bottom: 1rem;
+    }
+
+    &.title + .subtitle {
+      margin-top: -1rem !important;
+      margin-bottom: 1rem !important;
+    }
+
+    &.title:not(.is-spaced) + .subtitle {
+      margin-top: 1rem;
+    }
+  }
+
+  div {
+    &.subtitle {
+      font-family: $family-sans-serif;
+      font-weight: $weight-normal;
+      @include deprecated-subtitle-sizes;
+    }
+    &.subtitle {
+      margin-bottom: 0;
+    }
+    &.subtitle + .title {
+      margin-bottom: 1rem !important;
+    }
+    &.subtitle:not(.is-spaced) + .title {
+      margin-top: 0;
+    }
+  }
+}

package/dist/styles/scss/deprecated/links.scss

@@ -0,0 +1,32 @@
+@import "../mixins.scss";
+
+.is-link {
+  @include font-sizes;
+  font-weight: $weight-semibold;
+  border: 0;
+  color: $primary;
+  &:focus {
+    border-color: transparent;
+    outline-width: 0;
+    &:not(:active) {
+      border-color: transparent !important;
+      border-width: 0;
+      border-radius: 0;
+      box-shadow: 0 0 0 0.25em $electric-blue !important;
+    }
+  }
+  &:hover {
+    background-color: $ben-franklin-blue;
+    border-color: $ben-franklin-blue;
+    color: $white !important;
+  }
+  &:active {
+    background-color: $grey-dark;
+    border-color: $grey-dark;
+    color: $white;
+  }
+  .icon {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+  }
+}

package/dist/styles/scss/deprecated/table.scss

@@ -0,0 +1,15 @@
+/** Custom Styles **/
+.table-responsive {
+  width: 100%;
+  overflow: hidden;
+  overflow-x: auto;
+}
+
+table {
+  &.is-align-middle {
+    td,
+    th {
+      vertical-align: middle;
+    }
+  }
+}

package/dist/styles/scss/deprecated/tabs.scss

@@ -0,0 +1,14 @@
+.tabs {
+  & + .fix-margin {
+    margin-top: -1.5rem;
+    padding-top: 1.5rem;
+  }
+  &.is-boxed + .tabs-container {
+    border: 1px solid $tabs-border-bottom-color;
+    border-top: 0;
+  }
+}
+
+.tabs-container {
+  padding: $tabs-link-padding;
+}

package/dist/styles/scss/derived-colors.scss

@@ -0,0 +1,14 @@
+$custom-colors: (
+  "ben-franklin-blue-light": ($ben-franklin-blue-light, $ben-franklin-blue),
+  "ben-franklin-blue": ($ben-franklin-blue, $white, $white, $ben-franklin-blue-dark),
+  "ben-franklin-blue-dark": ($ben-franklin-blue-dark, $white),
+  "electric-blue": ($electric-blue, $grey-dark),
+  "bell-yellow-light": ($bell-yellow-light, $grey-dark),
+  "bell-yellow": ($bell-yellow, $grey-dark, $bell-yellow-light),
+  "phanatic-green-light": ($phanatic-green-light, $phanatic-green),
+  "phanatic-green": ($phanatic-green, $white, $phanatic-green-light),
+  "phanatic-green-dark": ($phanatic-green-dark, $white),
+  "love-park-red-light": ($love-park-red-light, $love-park-red-dark),
+  "love-park-red": ($love-park-red, $white, $love-park-red-light, $love-park-red-dark),
+  "love-park-red-dark": ($love-park-red-dark, $white)
+) !default;

package/dist/styles/scss/fonts.scss

@@ -0,0 +1,71 @@
+@font-face {
+  font-family: 'Montserrat';
+  src: local('Montserrat Regular'), local('Montserrat-Regular'),
+      url('https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff') format('woff');      
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans Italic'), local('OpenSans-Italic'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff') format('woff');      
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff');      
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: local('Montserrat Bold'), local('Montserrat-Bold'),
+      url('https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff') format('woff');      
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff') format('woff');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff') format('woff');    
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2') format('woff2'),
+      url('https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}

package/dist/styles/scss/functions.scss

@@ -0,0 +1,57 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group functions
+////
+
+@use 'sass:math';
+
+$global-font-size: 100% !default;
+
+/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+///
+/// @param {Number} $num - Number to strip unit from.
+///
+/// @returns {Number} The same number, sans unit.
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+/// Converts one or more pixel values into matching rem values.
+///
+/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$global-font-size` variable as the base.
+///
+/// @returns {List} A list of converted values.
+@function rem-calc($values, $base: null) {
+  $rem-values: ();
+  $count: length($values);
+
+  // If no base is defined, defer to the global font size
+  @if $base == null {
+    $base: $global-font-size;
+  }
+
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
+  @if unit($base) == "%" {
+    $base: math.div($base, 100%) * 16px;
+  }
+
+  // Using rem as base allows correct scaling
+  @if unit($base) == "rem" {
+    $base: strip-unit($base) * 16px;
+  }
+
+  @if $count == 1 {
+    @return -zf-to-rem($values, $base);
+  }
+
+  @for $i from 1 through $count {
+    $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
+  }
+
+  @return $rem-values;
+}

package/dist/styles/scss/headings.scss

@@ -0,0 +1,10 @@
+@import "mixins";
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include headings-set-sizes;
+}

package/dist/styles/scss/helpers.scss

@@ -0,0 +1,4 @@
+@import 'variables.scss';
+@import 'mixins.scss';
+@import 'colors.scss';
+@import 'functions.scss';