"browser-sync-webpack-plugin": "2.0.1",
"cash-dom": "^4.1.5",
"cross-env": "^5.2.0",
+ "css-vars-ponyfill": "^2.1.2",
"element-closest": "^3.0.1",
"element-closest-polyfill": "^1.0.0",
"element-matches-polyfill": "^1.0.0",
require('./bootstrap');
require('./menu');
require('../../vendor/cubist/cms-back/src/public/emailobfuscator/emailobfuscator');
-require("element-closest");
+require('element-closest');
+
+// Todo: WIP for CSS vars - need to assess MMenu usage and options for the polyfill. In default state, it's only partially working so it's better to disable this until it fully works.
+//import cssVars from 'css-vars-ponyfill';
+//cssVars({}); // Polyfill CSS Vars for older browsers
+
var glob = require('glob');
var path = require('path');
:href="item.URL"
:style="`background-image: url(${item.image});`">
</a>
- <div class="pl-6 xs:pl-0 leading-relaxed flex-grow">
+ <div class="cart-item-text pl-6 xs:pl-0 leading-relaxed flex-grow">
<a :href="item.URL" class="block text-navy font-display">
<span class="text-grey-dark">{{ item.reference }}</span>
if (undefined !== value && null !== value) {
options.value = value;
}
- console.log('gtag event', action, options);
- return gtag('event', action, options)
+
+ //console.log('gtag event', action, options);
+
+ return (typeof gtag !== "undefined") ? gtag('event', action, options) : false;
};
cubistga.prototype.handleGtag = function (el) {
// Extracted components or custom styles that can't be done with utilities
@import 'common/spacing'
@import 'common/columns'
+@import 'common/grids'
@import 'common/global'
@import 'common/headings'
@import 'common/links'
--- /dev/null
+// Generate utility classes for grids
+// Grid gaps are on 0.25vw jumps for greater control
+// Also some named gaps: sm, md, lg, xl
+$vw-spacing = {
+
+ 'xs': 0.25vw,
+ 'sm': 0.5vw,
+ 'md': 1.25vw,
+ 'lg': 2.5vw,
+ 'xl': 5vw,
+
+ '1v': 0.25vw,
+ '2v': 0.5vw,
+ '3v': 0.75vw,
+ '4v': 1vw,
+ '5v': 1.25vw,
+ '6v': 1.5vw,
+ '7v': 1.75vw,
+ '8v': 2vw,
+ '9v': 2.25vw,
+ '10v': 2.5vw,
+ '20v': 5vw,
+}
+
+// Generate classes + make responsive
+
+@responsive
+ for id, vwAmount in $vw-spacing
+
+ .grid-gap-{id}
+ constrain(grid-gap, vwAmount)
+
+ // Non-CSS-Grid should have padding + negative margins to simulate grid gaps
+ // In the end this is a bit too complicated to do for not enough benefit so
+ // all grids can have the same fixed gap (see grid-fallback mixin)
+ //.no-cssgrid &
+ // horizontal-spacing(vwAmount / -2, margin) // Negative half spacing on each side
+ // > *
+ // horizontal-spacing(vwAmount / 2) // Halved because padding will be doubled between neighbouring columns
+
+//----------------------------------
+
+// Fallback mixin for non-CSS-Grid columns
+$fallback_grid_gap = $vw-spacing.lg // Basis for all grid gaps and
+$fallback_grid_gap_px = unit($fallback_grid_gap / 100, '') * $base-width
+
+grid-fallback(cols, gap = $fallback_grid_gap) {
+ .no-cssgrid & {
+ > * {
+ lost-column: s('1/%s %s %s', cols, cols, gap)
+ margin-bottom: gap
+ }
+ }
+}
+
+//----------------------------------
+
+@responsive // Generate responsive utilities like sm:grid, md:grid-cols-2 etc
+ .grid
+ display: grid
+
+ .no-cssgrid &
+ display: flex
+ flex-wrap: wrap
+ margin-bottom: - $fallback_grid_gap
+
+ &-cols-auto
+ // Automatic number of columns based on number of children
+ // but with a min-width to stop them getting too small...
+ grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))
+
+ // When there's no CSS Grid support, set columns based on breakpoints
+ grid-fallback(4)
+
+ +below(1500px)
+ grid-fallback(3)
+ +below(1100px)
+ grid-fallback(2)
+ +below(600px)
+ grid-fallback(1)
+
+
+ &-cols-1
+ grid-template-columns: 1fr
+ grid-fallback(1)
+
+ &-cols-2
+ grid-template-columns: repeat(2, 1fr)
+ grid-fallback(2)
+
+ &-cols-3
+ grid-template-columns: repeat(3, 1fr)
+ grid-fallback(3)
+
+ &-cols-4
+ grid-template-columns: repeat(4, 1fr)
+ grid-fallback(4)
+
+ &-cols-5
+ grid-template-columns: repeat(5, 1fr)
+ grid-fallback(5)
+
+
+ //&-cols-2
+ //
+ // // Todo: consider using Modernizr so we can clean this up and only apply the .no-grid for IE11 and friends
+ // // For IE11 and older browsers, use lost grid...
+ // > *
+ // lost-column: 1/2 2 1.25vw
+ // margin-bottom: 1.25vw
+ //
+ // @supports (display: grid)
+ // grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
+ //
+ // //Reset the lost-grid so it doesn't interfere
+ // > *
+ // lost-column: none
+ // margin: 0 !important
+ // flex-basis: auto
+ // max-width: none
+ //
+ // //// Internal block alignment - make sure text label sits at bottom
+ // //display: flex
+ // //flex-direction: column
+ // //justify-content: space-between
+ //
+ //
+ //&-cols-3
+ // @supports (display: grid)
+ // grid-template-columns: repeat(3, 1fr)
&-body
grid-area: body
+
+
+ .no-cssgrid &
+
+ &-layout
+ display: flex
+ align-items: flex-start
+
+ +below(700px)
+ display: block
+
+ > *
+ flex: 1 1 auto
+
+ &-body
+ padding: 0 2em
+
+ +below(700px)
+ padding: 2em 0
transition: max-height var(--transition-duration)
overflow-y: auto
+ // IE 11 Flexbox
+ /*! purgecss start ignore */
+ .flexboxtweener &
+ .cart-item-text
+ flex: 1 1 0% // Fix for inconsistent sizing in IE11 (flex-basis must have unit)
+ /*! purgecss end ignore */
+
&-footer
@apply bg-grey-100 p-10
&-image
max-width: 144px
max-height: @max-width
+
+// CSS Grid fallback
+.template-cart .grid-cols-auto
+ grid-fallback(2)
+
+ +below(850px)
+ grid-fallback(1)
min-width: unset
padding-left: 1.5em
padding-right: @padding-left
+
+
+ // CSS Grid fallback
+ // Since forms can be used in multiple contexts (main / sidebar),
+ // it's not worth the complexity here in the fallback to accommodate
+ // the dual column layout because with only flexbox, the closest we
+ // can get is 2 columns without gaps OR a column gap but narrower
+ // fields than the full-width ones (because we don't know when
+ // the container will force a wrap)
+ .no-cssgrid &
+ .grid
+ display: flex
+ flex-wrap: wrap
+ justify-content: space-between
+ margin-bottom: 0
+
+ label
+ @apply block w-full
+ //min-width: 200px
+ //
+ //&.half
+ // flex: 0 1 48%
+++ /dev/null
-// Generate utility classes for grids
-// Grid gaps are on 0.25vw jumps for greater control
-// Also some named gaps: sm, md, lg, xl
-$vw-spacing = {
-
- 'xs': 0.25vw,
- 'sm': 0.5vw,
- 'md': 1.25vw,
- 'lg': 2.5vw,
- 'xl': 5vw,
-
- '1v': 0.25vw,
- '2v': 0.5vw,
- '3v': 0.75vw,
- '4v': 1vw,
- '5v': 1.25vw,
- '6v': 1.5vw,
- '7v': 1.75vw,
- '8v': 2vw,
- '9v': 2.25vw,
- '10v': 2.5vw,
- '20v': 5vw,
-}
-
-// Generate classes + make responsive
-
-@responsive
- for id, vwAmount in $vw-spacing
-
- .grid-gap-{id}
- constrain(grid-gap, vwAmount)
-
- // Non-CSS-Grid should have padding + negative margins to simulate grid gaps
- // In the end this is a bit too complicated to do for not enough benefit so
- // all grids can have the same fixed gap (see grid-fallback mixin)
- //.no-cssgrid &
- // horizontal-spacing(vwAmount / -2, margin) // Negative half spacing on each side
- // > *
- // horizontal-spacing(vwAmount / 2) // Halved because padding will be doubled between neighbouring columns
-
-//----------------------------------
-
-// Fallback mixin for non-CSS-Grid columns
-$fallback_grid_gap = $vw-spacing.lg // Basis for all grid gaps and
-$fallback_grid_gap_px = unit($fallback_grid_gap / 100, '') * $base-width
-
-grid-fallback(cols) {
- .no-cssgrid & {
- > * {
- lost-column: s('1/%s %s %s', cols, cols, $fallback_grid_gap)
- margin-bottom: $fallback_grid_gap
- }
- }
-}
-
-//----------------------------------
-
-@responsive // Generate responsive utilities like sm:grid, md:grid-cols-2 etc
- .grid
- display: grid
-
- .no-cssgrid &
- display: flex
- flex-wrap: wrap
- margin-bottom: - $fallback_grid_gap
-
- &-cols-auto
- // Automatic number of columns based on number of children
- // but with a min-width to stop them getting too small...
- grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))
-
- // When there's no CSS Grid support, set columns based on breakpoints
- grid-fallback(4)
-
- +below(1500px)
- grid-fallback(3)
- +below(1100px)
- grid-fallback(2)
- +below(600px)
- grid-fallback(1)
-
-
- &-cols-1
- grid-template-columns: 1fr
- grid-fallback(1)
-
- &-cols-2
- grid-template-columns: repeat(2, 1fr)
- grid-fallback(2)
-
- &-cols-3
- grid-template-columns: repeat(3, 1fr)
- grid-fallback(3)
-
- &-cols-4
- grid-template-columns: repeat(4, 1fr)
- grid-fallback(4)
-
- &-cols-5
- grid-template-columns: repeat(5, 1fr)
- grid-fallback(5)
-
-
- //&-cols-2
- //
- // // Todo: consider using Modernizr so we can clean this up and only apply the .no-grid for IE11 and friends
- // // For IE11 and older browsers, use lost grid...
- // > *
- // lost-column: 1/2 2 1.25vw
- // margin-bottom: 1.25vw
- //
- // @supports (display: grid)
- // grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
- //
- // //Reset the lost-grid so it doesn't interfere
- // > *
- // lost-column: none
- // margin: 0 !important
- // flex-basis: auto
- // max-width: none
- //
- // //// Internal block alignment - make sure text label sits at bottom
- // //display: flex
- // //flex-direction: column
- // //justify-content: space-between
- //
- //
- //&-cols-3
- // @supports (display: grid)
- // grid-template-columns: repeat(3, 1fr)
width 100%;
+ // Non-CSS grid fallback
+ .no-cssgrid &
+
+ &-layout
+ display: flex
+
+ +below(900px)
+ display: block
+
+ &-articles
+ flex: 1 1 auto
+
+ &-sidebar
+ flex: 0 1 320px
+
+ +below(900px)
+ margin-top: 2em
+ max-width: none
+
+ &-article
+ display: flex
+
+ &-image
+ flex: 1 1 auto
+ width: 33%
+ max-width: 330px
+
+ &-text
+ flex: 1 1 67%
+ padding: 0 2em
+
+
+
//=== Individual News Post
// 3 column layout with image / text / sidebar
&-sidebar
grid-area: sidebar
min-width: 320px
+
+
+ .no-cssgrid &
+
+ &-layout
+ display: flex
+ align-items: flex-start
+
+ +below(1200px)
+ display: block
+
+ > *
+ flex: 1 1 auto
+
+ &-body
+ padding: 0 2em
+
+ +below(1200px)
+ padding: 2em 0
+
@apply w-full bg-center bg-cover pb-100p border-4 border-grey-100 cursor-pointer
&-current
- @apply border-grey-300
\ No newline at end of file
+ @apply border-grey-300
+
+
+ // Non CSS Grid
+ .grid
+ grid-fallback(3, 15px)
+
+ .no-cssgrid &
+ &-thumb
+ padding-bottom: calc(33.3% - 10px)
@apply w-full mb-4
+ // Non CSS Grid fallback
+ .no-cssgrid &
+ &-layout
+ @apply flex
+
+ +below($breakpoint-search-results)
+ @apply block
+
+ &-main
+ flex: 1 1 0%
+
+ &-sidebar
+ @apply ml-8
+ flex: 0 0 320px
+
+ +below($breakpoint-search-results)
+ @apply ml-0 mt-6
+
+
//== Autocomplete field
/*! purgecss start ignore */
.autocomplete
</full-width>
@show
- <main class="flex-grow">
+ <main class="flex-grow h-full">
@yield('content')
</main>
@extends('layouts.app')
@section('content')
- @intro(['padding' => 'pb-4v'])
+ @intro(['padding' => 'pb-2v'])
<full-width padding="pb-3v">
<content>
],
'feature-detects': [
'css/cssgrid',
+ 'css/flexbox',
+ 'css/flexboxtweener',
]
}),
],
mix.version(); // Enable unique hashed filenames when in production
// Transpile code for older browsers like IE11
+ // This has to be here because if it is in the default setup,
+ // it seems to cause BrowserSync to go into an infinite loop :(
mix.babel(['public/js/app.js'], 'public/js/app.js');
}
resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec"
integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=
+css-vars-ponyfill@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/css-vars-ponyfill/-/css-vars-ponyfill-2.1.2.tgz#0de2e49e72a6bac09cb456a0325c8584cadaecd2"
+ integrity sha512-Jfff/j2AGwr+WJaIbxVroTa9sFXy9b0xe5zjWEVQ9aoeCpd0e6iOo4D+d3OoLDTWcHCf2UBTswis/hN6fKEKiA==
+
css-what@^2.1.2:
version "2.1.3"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
projects / pmi.git / commitdiff