Commit 584203a7 authored by Mathieu Spillebeen's avatar Mathieu Spillebeen
Browse files

Initial commit.

parents
{#
/**
* @file
* Theme override of a datetime form element.
*
* Available variables:
* - attributes: HTML attributes for the datetime form element.
* - content: The datelist form element to be output.
*
* @see template_preprocess_datetime_form()
*/
#}
{{ attach_library('compony/form-item--date') }}
<div{{ attributes.addClass('form-item__inner') }}>
{{ content }}
</div>
{#
/**
* @file
* Theme override of a datetime form wrapper.
*
* Available variables:
* - content: The form element to be output, usually a datelist, or datetime.
* - title: The title of the form element.
* - title_attributes: HTML attributes for the title wrapper.
* - description: Description text for the form element.
* - required: An indicator for whether the associated form element is required.
*
* @see template_preprocess_datetime_wrapper()
*/
#}
{%
set title_classes = [
'label',
required ? 'js-form-required',
required ? 'form-required',
]
%}
{# Mimic form-item classes, in order for less complexity needed in CSS #}
{%
set extra_classes = [
'form-item',
'form-item--datetime',
element['#id'] ? 'form-item--' ~ element['#id']|clean_class
]
%}
<div {{ attributes.addClass(extra_classes) }}>
{% if title %}
<div class="form-item__label">
<label>
<span class="label-text">{{ title }}</span>
</label>
</div>
{% endif %}
{{ content }}
{#
# We are not showing errors for grouping containers,
# instead we will show the errors on the individual fields.
{% if errors %}
<div class="form-item--error-message">
{{ errors }}
</div>
{% endif %}
#}
{% if description %}
<div{{ description_attributes.addClass('description') }}>
{{ description }}
</div>
{% endif %}
</div>
/* In order to use this import, make sure you have the bourbon setting on "true" in
* gulpfile.js/theming.config.js
* @import "bourbon";
*/
/* In order to use this import, make sure you have the bourbonneat setting on "true" in
* gulpfile.js/theming.config.js
* @import "neat";
*/
/* In order to use this import, make sure you have the breakpoint setting on "true" in
* gulpfile.js/theming.config.js
* @import "breakpoint";
*/
/* Animations
@mixin transition() {
transition: all 150ms ease;
}*/
/* Column layouts */
/*
* Mixins.
* Snippets of reusable CSS to develop faster and keep your code readable.
* Add all mixins in this file.
*/
/* Component mixins */
/*
* CSS image replacement.
* Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757.
*/
/*
* Calculate the px fallback for an rem value.
* E.g.: @include rem_px(line-height, 1.5rem);
* Returns both the rem and the px values.
*/
/*
* Calculate the rem value and px fallback for a px value.
* E.g.: @include px_rem(line-height, 16px);
* Returns both the rem and the px values.
*/
/*
* Variables
* Add your site-variables, such as colours and font sizes in this file.
*/
/* Colors */
/* Font sizes */
/* Grid (powered by Bourbon Neat) */
/* Breakpoints */
.form-item--datelist .form-item__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.form-item--datelist .form-item {
-webkit-box-flex: 0;
-ms-flex: 0 1 48%;
flex: 0 1 48%;
margin-bottom: 25px;
}
.form-item--datetime {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.form-item--datetime .form-item__label {
width: 100%;
}
.form-item--datetime .form-item__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.form-item--datetime .form-item__inner > * {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 48%;
margin-bottom: 0;
}
.form-item--datetime .form-item__inner > *:last-child {
margin-bottom: 0;
}
.ui-datepicker {
/* Rectangle 2 Copy 12: */
background: #FFF;
border: 1px solid #4D4D4D;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.34);
border-radius: 19px;
padding: 26px 20px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
display: none;
}
.ui-datepicker-calendar {
text-align: center;
border-collapse: collapse;
}
.ui-datepicker-calendar thead {
display: none;
}
.ui-datepicker-calendar td {
padding: 2.5px 1.5px;
}
.ui-datepicker-calendar a {
text-decoration: none;
color: #4D4D4D;
background: #DDD;
border: 1px solid #DDD;
width: 35px;
height: 30px;
display: inline-block;
border-radius: 5px;
font-size: 21px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
line-height: 30px;
}
.ui-datepicker-calendar a:hover, .ui-datepicker-calendar a:focus {
color: #4D4D4D;
background: #DDD;
text-decoration: none;
border-color: #4D4D4D;
}
.ui-datepicker-title {
margin-bottom: 26px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-datepicker-title > * {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.ui-datepicker-title > *:nth-child(2) {
margin-left: 20px;
}
/*# sourceMappingURL=maps/form-item--date.css.map */
!function e(t,r,a){function n(c,o){if(!r[c]){if(!t[c]){var u="function"==typeof require&&require;if(!o&&u)return u(c,!0);if(i)return i(c,!0);var d=new Error("Cannot find module '"+c+"'");throw d.code="MODULE_NOT_FOUND",d}var p=r[c]={exports:{}};t[c][0].call(p.exports,function(e){var r=t[c][1][e];return n(r?r:e)},p,p.exports,e,t,r,a)}return r[c].exports}for(var i="function"==typeof require&&require,c=0;c<a.length;c++)n(a[c]);return n}({1:[function(e,t,r){"use strict";!function(e){Drupal.behaviors.enhanced_dateinput={attach:function(t,r){function a(t,r){e("select").once("enhanced_select").wrap(n).parent().append(i).find("select").select2({minimumResultsForSearch:2e3})}e.datepicker._updateDatepicker_original=e.datepicker._updateDatepicker,e.datepicker._updateDatepicker=function(t){e.datepicker._updateDatepicker_original(t);var r=this._get(t,"afterShow");r&&r.apply(t.input?t.input[0]:null)},e.datepicker.setDefaults({showOn:"focus"}),e.extend(e.datepicker,{_checkOffset:function(e,t,r){return t}});var n='<div class="select-style"></div>',i='<div class="icon"><svg viewBox="0 0 12 9" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L0 0h12z" fill="#FFF" fill-rule="evenodd"/></svg></div>',c="yy-mm-dd";e(".form-item--date input[data-drupal-date-format]",t).once("custom_date_picker").each(function(){var t=e(this);c=t.data("drupal-date-format"),c=c.replace("Y","yy").replace("m","mm").replace("d","dd"),t.datepicker({dateFormat:c,changeMonth:!0,changeYear:!0,yearRange:"c-90:c+10",afterShow:a})})}}}(jQuery,Drupal)},{}]},{},[1]);
\ No newline at end of file
{"version":3,"sources":["../../../_sass-essentials/sass-essentials.scss","../../../_sass-essentials/_animations.scss","../../../_sass-essentials/_mixins.scss","../../../_sass-essentials/_variables.scss","../../../stdin"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AAEH;;;GAGG;ACZH;;;GAGG;ACkBH,oBAAoB;AA8CpB;;;;GAIG;AACH,sBAAsB;AAqBtB;;;GAGG;AAQH;;;;GAIG;AAMH;;;;GAIG;ACvHH;;;GAGG;AAKH,YAAY;AA0BZ,gBAAgB;AAWhB,oCAAoC;AAMpC,iBAAiB;ACjDjB;EAEI,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,oBAAgB;EAAhB,gBAAgB;EAChB,+BAAoB;EAApB,8BAAoB;EAApB,wBAAoB;EAApB,oBAAoB;EACpB,0BAA+B;EAA/B,uBAA+B;EAA/B,+BAA+B;CAChC;;AANH;EAQI,oBAAc;EAAd,kBAAc;EAAd,cAAc;EACd,oBAAoB;CACrB;;AAGH;EACE,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,oBAAgB;EAAhB,gBAAgB;EAChB,0BAAoB;EAApB,uBAAoB;EAApB,oBAAoB;CAqBrB;;AAxBD;EAKI,YAAY;CAIb;;AATH;EAWI,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,oBAAgB;EAAhB,gBAAgB;EAChB,oBAAe;EAAf,mBAAe;EAAf,eAAe;EACf,0BAA+B;EAA/B,uBAA+B;EAA/B,+BAA+B;CAShC;;AAvBH;EAgBM,oBAAe;EAAf,mBAAe;EAAf,eAAe;EACf,WAAW;EACX,iBAAiB;CAIlB;;AAtBL;EAoBQ,iBAAiB;CAClB;;AAKP;EACE,0BAA0B;EAC1B,iBAAiB;EACjB,0BAA0B;EAC1B,8CAA8B;EAC9B,oBAAoB;EACpB,mBAAmB;CACpB;;AAGD;;EAEE,cAAc;CACf;;AAED;EACE,mBAAmB;EACnB,0BAA0B;CA2B3B;;AA7BD;EAII,cAAc;CACf;;AALH;EAOI,qBAAqB;CACtB;;AARH;EAUI,sBAAsB;EACtB,eAAe;EACf,iBAAiB;EACjB,uBAAuB;EACvB,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,kCAA0B;EAA1B,0BAA0B;EAC1B,kBAAkB;CAQnB;;AA5BH;EAuBM,eAAe;EACf,iBAAiB;EACjB,sBAAsB;EACtB,sBAAsB;CACvB;;AAIL;EACE,oBAAoB;EACpB,qBAAc;EAAd,qBAAc;EAAd,cAAc;CAOf;;AATD;EAII,oBAAe;EAAf,mBAAe;EAAf,eAAe;CAIhB;;AARH;EAMM,kBAAkB;CACnB","file":"../form-item--date.css","sourcesContent":["/* In order to use this import, make sure you have the bourbon setting on \"true\" in\n * gulpfile.js/theming.config.js\n * @import \"bourbon\";\n */\n\n/* In order to use this import, make sure you have the bourbonneat setting on \"true\" in\n * gulpfile.js/theming.config.js\n * @import \"neat\";\n */\n\n/* In order to use this import, make sure you have the breakpoint setting on \"true\" in\n * gulpfile.js/theming.config.js\n * @import \"breakpoint\";\n */\n\n@import '_colors.scss';\n@import '_animations.scss';\n@import '_box-shadows.scss';\n@import '_mixins.scss';\n@import '_typography.scss';\n@import '_variables.scss';\n","\n/* Animations\n@mixin transition() {\n transition: all 150ms ease;\n}*/\n","@mixin button {\n transition: all 150ms linear;\n background: $white;\n border: 1px solid $base-link-color;\n border-radius: 3px;\n box-shadow: none;\n color: $base-link-color;\n padding: 6px 10px 5px 10px;\n text-shadow: none;\n text-transform: lowercase;\n -webkit-font-smoothing: antialiased;\n\n &:hover,\n &:focus {\n background: $base-link-color;\n color: $white;\n outline: none;\n }\n}\n\n\n\n/* Column layouts */\n@mixin col_2 {\n margin: 0 0 25px 0;\n\n @media (min-width: 960px) {\n width: 50%;\n }\n}\n\n@mixin col_3 {\n width: 100%;\n\n @media (min-width: 600px) {\n width: 50%;\n }\n\n @media (min-width: 960px) {\n width: 33%;\n }\n}\n\n@mixin col_4 {\n @media (min-width: 600px) {\n width: 50%;\n\n }\n\n @media (min-width: 960px) {\n width: 25%;\n }\n}\n\n@mixin col_6 {\n width: 50%;\n\n\n @media (min-width: 600px) {\n width: 33%;\n }\n\n @media (min-width: 1200px) {\n width: 16.6%;\n margin-bottom: 0px;\n }\n}\n\n/*\n * Mixins.\n * Snippets of reusable CSS to develop faster and keep your code readable.\n * Add all mixins in this file.\n */\n/* Component mixins */\n@mixin cf {\n zoom: 1;\n &:after {\n clear: both;\n content: \" \";\n display: block;\n font-size: 0;\n height: 0;\n visibility: hidden;\n }\n}\n\n@mixin outer-container {\n\n margin-left: auto;\n margin-right: auto;\n max-width: $max-width;\n padding: 0 $gutter/2;\n}\n\n/*\n * CSS image replacement.\n * Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757.\n */\n@mixin hide-text {\n color: transparent;\n background-color: transparent;\n border: 0;\n font: 0/0 a;\n text-shadow: none;\n}\n/*\n * Calculate the px fallback for an rem value.\n * E.g.: @include rem_px(line-height, 1.5rem);\n * Returns both the rem and the px values.\n */\n@mixin rem_px($prop, $rem_val){\n #{$prop}: $rem_val / 1rem * $base-font-size;\n #{$prop}: $rem_val;\n}\n\n/*\n * Calculate the rem value and px fallback for a px value.\n * E.g.: @include px_rem(line-height, 16px);\n * Returns both the rem and the px values.\n */\n@mixin px-rem($prop, $px_val){\n #{$prop}: $px_val;\n #{$prop}: $px_val / $base-font-size * 1rem;\n}\n\n@mixin shrink {\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n box-shadow: 0 0 1px rgba(0, 0, 0, 0);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -moz-osx-font-smoothing: grayscale;\n -webkit-transition-duration: 0.3s;\n transition-duration: 0.3s;\n -webkit-transition-property: transform;\n transition-property: transform;\n &:hover {\n -webkit-transform: scale(0.98);\n transform: scale(0.98);\n }\n}\n\n@mixin flexbox {\n display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */\n display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */\n display: -ms-flexbox; /* TWEENER - IE 10 */\n display: -webkit-flex; /* NEW - Chrome */\n display: flex;\n}\n\n@mixin flexboxImportant {\n display: -webkit-box!important; /* OLD - iOS 6-, Safari 3.1-6 */\n display: -moz-box!important; /* OLD - Firefox 19- (buggy but mostly works) */\n display: -ms-flexbox!important; /* TWEENER - IE 10 */\n display: -webkit-flex!important; /* NEW - Chrome */\n display: flex!important;\n}\n","/*\n * Variables\n * Add your site-variables, such as colours and font sizes in this file.\n */\n\n$legacy_support_for_ie: false;\n$normalize_headings: true;\n\n/* Colors */\n$white: #fff;\n$beige: #e9e4cf;\n$lightblue: #eef3f2;\n$blue: #89cbbb;\n$darkerblue: #79b6a7;\n$darkblue: #293a3c;\n$orange: #e94d27;\n$input: #3f5456;\n\n$javascript: #cfe2dd;\n$drupal: #6ad1e4;\n$theming: #ffe269;\n$ux--design: #e94d27;\n\n$hover: #37445a;\n\n$background: #fff;\n$color: #333;\n$white: #fff;\n$base-text-color: $color;\n$base-selected-text-color: invert($base-text-color);\n$base-selected-text-background-color: $base-text-color;\n$base-link-color: #e93130;\n$base-link-hover-color: #19bdbe;\n\n/* Font sizes */\n$fs_1: 32px;\n$fs_2: 24px;\n$fs_3: 20px;\n$fs_4: 16px;\n$fs_5: 14px;\n$fs_6: 12px;\n\n$base-font-size: 17px;\n$base-line-height: 24px;\n\n/* Grid (powered by Bourbon Neat) */\n$gutter: 20px;\n$grid-columns: 12;\n$max-width: 960px;\n$column: ($max-width - ($gutter * $grid-columns)) / $grid-columns;\n\n/* Breakpoints */\n$bp1: 461px;\n$bp2: 768px;\n$bp3: 1025px;\n$bp4: 1400px;\n","@import \"sass-essentials\";\n\n.form-item--datelist {\n .form-item__inner {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n justify-content: space-between;\n }\n .form-item {\n flex: 0 1 48%;\n margin-bottom: 25px;\n }\n}\n\n.form-item--datetime {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n .form-item__label {\n width: 100%;\n // This should be only be used form-specific!\n // flex: 0 0 70px;\n // margin-bottom: 0;\n }\n .form-item__inner {\n display: flex;\n flex-wrap: wrap;\n flex: 1 0 100%;\n justify-content: space-between;\n > * {\n flex: 0 1 auto;\n width: 48%;\n margin-bottom: 0;\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n}\n\n.ui-datepicker {\n /* Rectangle 2 Copy 12: */\n background: #FFF;\n border: 1px solid #4D4D4D;\n box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.34);\n border-radius: 19px;\n padding: 26px 20px;\n}\n\n// Hide the left and right arrows.\n.ui-datepicker-prev,\n.ui-datepicker-next {\n display: none;\n}\n\n.ui-datepicker-calendar {\n text-align: center;\n border-collapse: collapse;\n thead {\n display: none;\n }\n td {\n padding: 2.5px 1.5px;\n }\n a {\n text-decoration: none;\n color: #4D4D4D;\n background: #DDD;\n border: 1px solid #DDD;\n width: 35px;\n height: 30px;\n display: inline-block;\n border-radius: 5px;\n font-size: 21px;\n transition: all 0.2s ease;\n line-height: 30px;\n &:hover,\n &:focus {\n color: #4D4D4D;\n background: #DDD;\n text-decoration: none;\n border-color: #4D4D4D;\n }\n }\n}\n\n.ui-datepicker-title {\n margin-bottom: 26px;\n display: flex;\n > * {\n flex: 1 1 auto;\n &:nth-child(2) {\n margin-left: 20px;\n }\n }\n}\n"]}
\ No newline at end of file
(($) => {
Drupal.behaviors.enhanced_dateinput = {
attach: function attach(context, settings) {
// Extend the datepicker with an aftershow trigger!
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow)
afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
};
// Also show the datepicker on focus.
$.datepicker.setDefaults({
showOn: "focus"
});
/*
* Disable the functionality where the datepicker always wants to be displayed,
* inside the viewport (sometimes above and sometimes underneath the input-field)
*/
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset;}});
var $wrapper = '<div class="select-style"></div>';
var $icon = '<div class="icon"><svg viewBox="0 0 12 9" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L0 0h12z" fill="#FFF" fill-rule="evenodd"/></svg></div>';
var customDateFormat = 'yy-mm-dd';
$('.form-item--date input[data-drupal-date-format]', context).once('custom_date_picker').each(function(){
var $input = $(this);
customDateFormat = $input.data('drupal-date-format');
customDateFormat = customDateFormat.replace('Y', 'yy').replace('m', 'mm').replace('d', 'dd');
$input.datepicker({
dateFormat: customDateFormat,
changeMonth: true,
changeYear: true,
yearRange: "c-90:c+10",
afterShow: datepickerAfterShow
});
});
function datepickerAfterShow(input, inst) {
// Mimic the same semantics as Drupal selects. See component: form-item--select.
$('select').once('enhanced_select')
.wrap($wrapper)
.parent()
.append($icon)
.find('select')
.select2({
minimumResultsForSearch: 2000
});
}
}
};
})(jQuery, Drupal);
@import "sass-essentials";
.form-item--datelist {
.form-item__inner {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.form-item {
flex: 0 1 48%;
margin-bottom: 25px;
}
}
.form-item--datetime {
display: flex;
flex-wrap: wrap;
align-items: center;
.form-item__label {
width: 100%;
// This should be only be used form-specific!
// flex: 0 0 70px;
// margin-bottom: 0;
}
.form-item__inner {
display: flex;
flex-wrap: wrap;
flex: 1 0 100%;
justify-content: space-between;
> * {
flex: 0 1 auto;
width: 48%;
margin-bottom: 0;
&:last-child {
margin-bottom: 0;
}
}
}
}
.ui-datepicker {
/* Rectangle 2 Copy 12: */
background: #FFF;
border: 1px solid #4D4D4D;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.34);
border-radius: 19px;
padding: 26px 20px;
}
// Hide the left and right arrows.
.ui-datepicker-prev,
.ui-datepicker-next {
display: none;
}
.ui-datepicker-calendar {
text-align: center;
border-collapse: collapse;
thead {
display: none;
}
td {
padding: 2.5px 1.5px;
}
a {
text-decoration: none;
color: #4D4D4D;
background: #DDD;
border: 1px solid #DDD;
width: 35px;
height: 30px;
display: inline-block;
border-radius: 5px;
font-size: 21px;
transition: all 0.2s ease;
line-height: 30px;
&:hover,
&:focus {
color: #4D4D4D;
background: #DDD;
text-decoration: none;
border-color: #4D4D4D;
}
}
}
.ui-datepicker-title {
margin-bottom: 26px;
display: flex;
> * {
flex: 1 1 auto;
&:nth-child(2) {
margin-left: 20px;
}
}
}
{% extends 'input.html.twig' %}
{% block before %}
{# Don't use the type="date" yet, as it throws a datepicker in some browser, and no datepicker in other browsers #}
{% set attributes = attributes.setAttribute('type', 'text') %}
{{ attach_library('compony/form-item--select') }}
{{ attach_library('compony/form-item--date') }}
{% endblock %}
This diff is collapsed.
form-item--date:
version: VERSION
css:
component:
dist/form-item--date.css: {}
js:
jquery-ui.min.js: {}
dist/form-item--date.js: {}
dependencies:
- core/jquery
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment