barbican-reset 1.2.3 → 1.2.4

package/components/form_section.vue

@@ -0,0 +1,23 @@
+<template>
+  <div :class="$style.container">
+    <slot />
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'FormSection',
+  }
+</script>
+
+<style lang="scss" module>
+
+.container {
+  padding: 0.875rem 0.75rem 0.625rem 0.75rem;
+  border-left: 0.25rem solid;
+  background: $c-grey-alpine;
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+</style>

package/components/form_update.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="$style.container">
+    <div :class="$style.input"><slot /></div>
+    <b-button class="btn-update" @click.prevent="$emit('update')">update</b-button>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'FormUpdate',
+  }
+</script>
+
+<style lang="scss" module>
+
+.container {
+  grid-template-columns: auto 6rem;
+  column-gap: 0.5rem;
+  display: grid;
+
+  @include media-breakpoint-up(sm) {
+    column-gap: 1rem;
+  }
+}
+
+.input {
+  @include all-text-inputs;
+  user-select: none;
+  overflow: hidden;
+}
+
+</style>

package/helpers/mixins/_buttons.scss

@@ -1,5 +1,5 @@
 
-@mixin button_setup {
+@mixin button-setup {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border-radius: $border-radius-lg;
@@ -11,7 +11,7 @@
   padding: 1em;
 }
 
-@mixin button_display($display:'ib',$gap:1rem) {
+@mixin button-display($display:'ib',$gap:1rem) {
   @if $display == 'ib' {
     vertical-align: middle;
     display: inline-block;
@@ -28,7 +28,7 @@
   }
 }
 
-@mixin button_solid(
+@mixin button-solid(
   $background: $c-brand-orange, 
   $color: $white, 
   $border: 1px,
@@ -40,7 +40,7 @@
   padding: $padding;
   color: $color;
 
-  @if $display { @include button_display($display, $padding * 0.625); }
+  @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
   @include focus {
@@ -51,7 +51,7 @@
   }
 }
 
-@mixin button_outline(
+@mixin button-outline(
   $color: $c-brand-orange,
   $background: $white, 
   $border: 1px,
@@ -63,7 +63,7 @@
   padding: $padding;
   color: $color;
 
-  @if $display { @include button_display($display, $padding * 0.625); }
+  @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
   @include focus {
@@ -73,7 +73,7 @@
   }
 }
 
-@mixin button_link(
+@mixin button-link(
   $color: inherit,
   $background: transparent,
   $padding: 0,
@@ -93,7 +93,7 @@
 }
 
 @mixin btn-outline-header {
-  @include button_outline(
+  @include button-outline(
     $color: $white, 
     $background: $c-brand-orange,
     $border: 0.125rem,
@@ -101,46 +101,47 @@
 }
 
 @mixin btn-primary {
-  @include button_solid;
+  @include button-solid;
+  min-width: 8rem;
 }
 
 @mixin btn-outline-primary {
-  @include button_outline;
+  @include button-outline;
 }
 
 @mixin btn-secondary {
-  @include button_solid($c-grey-night);
+  @include button-solid($c-grey-night);
 }
 
 @mixin btn-outline-secondary {
-  @include button_outline($c-grey-night);
+  @include button-outline($c-grey-night);
 }
 
 @mixin btn-cinema {
-  @include button_solid($c-brand-cinema);
+  @include button-solid($c-brand-cinema);
 }
 
 @mixin btn-power {
-  @include button_solid($c-power-blue);
+  @include button-solid($c-power-blue);
 }
 
 @mixin btn-info {
-  @include button_solid($c-status-neutral);
+  @include button-solid($c-status-neutral);
 }
 
 @mixin btn-outline-cinema {
-  @include button_outline($c-brand-cinema);
+  @include button-outline($c-brand-cinema);
 }
 
 @mixin btn-remove {
-  @include button_solid(
+  @include button-solid(
     $background: $c-grey-night,
     $padding: 0.625rem,
     $line: 1.375);
 }
 
 @mixin btn-link {
-  @include button_link {
+  @include button-link {
     @include single-box($c-grey-night);
     background-color: $c-grey-night;
     color: $white;
@@ -148,7 +149,7 @@
 }
 
 @mixin btn-exit {
-  @include button_link {
+  @include button-link {
     @include single-box($c-grey-night);
     background-color: $white;
     border-radius: 50%;
@@ -174,14 +175,14 @@
 }
 
 @mixin btn-membership-card {
-  @include button_outline(
+  @include button-outline(
     $color: $white,
     $background: transparent
   );
 }
 
 @mixin btn-video-login {
-  @include button_solid( 
+  @include button-solid( 
     $background: $white,
     $color: $c-splash-videos 
   );

package/helpers/mixins/_content.scss

@@ -32,18 +32,6 @@
   }
 }
 
-// @mixin all-text-inputs {
-//   border: solid $border-width $c-border-strong;
-//   $background: lighten($c-grey-alpine, 1%);
-//   border-radius: $border-radius-sm;
-//   background-color: $background;
-//   // padding: 0.8rem 0.8rem 0.6rem;
-
-//   &:focus {
-//     background-color: $background;
-//   }
-// }
-
 @mixin card-container {
   border-radius: $border-radius-lg;
   background-color: $white;

package/helpers/mixins/_font.scss

@@ -8,4 +8,11 @@
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: auto;
   }
+}
+
+@mixin all-text-inputs {
+  border: solid $border-width $c-border-strong;
+  padding: 0.875rem 0.875rem 0.75rem;
+  background-color: $c-grey-alpine;
+  border-radius: $border-radius-lg;  
 }

package/index.js

@@ -6,7 +6,6 @@ import EventSummary from './components/event_summary'
 import AccountCard from './components/account_card'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
-import FormRow from './components/form_row'
 import TableRow from './components/table_row'
 import Banner from './components/banner'
 import Notification from './components/notification'
@@ -16,6 +15,8 @@ import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import Carousel from './components/carousel'
 import CardDeck from './components/card_deck'
+import FormSection from './components/form_section'
+import FormUpdate from './components/form_update'
 
 export { 
   LoadingAnimation, 
@@ -30,7 +31,8 @@ export {
   AccountCard,
   AccountTitle,
   Placeholder,
-  FormRow,
+  FormSection,
+  FormUpdate,
   TableRow,
   Block,
   EventSummary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_btn.scss

@@ -1,5 +1,5 @@
 .btn {
-  @include button_setup;
+  @include button-setup;
 
   &.btn-primary {
     // solid orange

package/scss/_checkbox.scss

@@ -75,4 +75,8 @@
       }
     }    
   }
+}
+
+.custom-checkbox label {
+  font-weight: 400;
 }

package/scss/_form-group.scss

@@ -0,0 +1,59 @@
+
+form > .form-group {
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 33fr 67fr;
+    align-items: center;
+    gap: $gap-account;
+    display: grid;
+  }
+
+  > div:first-child {
+    @include media-breakpoint-up(sm) {
+      grid-column: 2 / 3;
+    }
+  }
+}
+
+.form-group {
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+
+  legend {
+    padding: 0 !important;
+    font-weight: 700;
+    
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+.form-group[submit] {
+  text-align: right;
+
+  @include media-breakpoint-down(sm) {
+    button {
+      width: 100%;
+    }
+  }
+}
+
+@mixin label-status($content: '(required)') {
+  margin-left: 0.375rem;
+  display: inline-block;
+  content: $content;
+  font-weight: 400;
+}
+
+.form-group[required] {
+  legend::after {
+    @include label-status;
+  }
+}
+
+.form-group[optional] {
+  legend::after {
+    @include label-status('(optional)');
+  }
+}

package/scss/_input.scss

@@ -34,8 +34,5 @@ input[type=submit] {
 }
 
 #{$all-text-inputs} {
-  border: solid $border-width $c-border-strong;
-  padding: 0.875rem 0.875rem 0.75rem;
-  background-color: $c-grey-alpine;
-  border-radius: $border-radius-lg;
+  @include all-text-inputs;
 }

package/scss/_radio.scss

@@ -0,0 +1,4 @@
+
+.custom-radio label {
+  font-weight: 400;
+}

package/scss/card/index.scss

@@ -25,6 +25,10 @@
   margin: 0;
 }
 
+.card-body {
+  padding: 1.5rem;
+}
+
 .card-img {
   border: 1px solid $c-grey-concrete;
   margin-bottom: 1rem;

package/scss/index.scss

@@ -17,9 +17,11 @@
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 @import "form.scss";
+@import "form-group.scss";
 @import "list.scss";
 @import "input.scss";
 @import "radio-group.scss";
+@import "radio.scss";
 
 // atomic helper styles
 @import "atomic.scss";

package/components/form_row.vue

@@ -1,91 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <label v-if="label" :for="id">
-      <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
-    </label>
-    <div :class="styleContent">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script type="text/javascript">
-  export default {
-    name: 'FormRow',
-    props: {
-      label: {
-        type: String
-      },
-      id: {
-        type: String
-      },
-      required: {
-        type: Boolean
-      },
-      optional: {
-        type: Boolean
-      },
-      submit: {
-        type: Boolean
-      }
-    },
-    computed: {
-      styleContent() {
-        const style = this.$style;
-        let output = [style.content];
-        if (!this.label) { output.push(style.no_label); }
-        if (this.submit) { output.push(style.submit); }
-        return output;
-      }
-    }
-  }
-</script>
-
-<style lang="scss" module>
-
-.container {
-
-  &:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: 33fr 67fr;
-    align-items: center;
-    gap: $gap-account;
-    display: grid;
-  }
-
-  label {
-    font-weight: normal;
-
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  input {
-    margin: 0;
-  }
-}
-
-.content {
-
-  &.no_label {
-    @include media-breakpoint-up(sm) {
-      grid-column: 2 / 3;
-    }
-  }
-  
-  &.submit {
-    text-align: right;
-
-    @include media-breakpoint-down(sm) {
-      > button {
-        width: 100%;
-      }
-    }
-  }
-}
-
-</style>