Improve rendering of radios, checkboxes and select
Namely, it concerns the widgets: RadioSelect, CheckboxInput and Select.
This commit is contained in:
Aurélien Delobelle
parent
852829f73b
commit
df12ed8173
4 changed files with 346 additions and 203 deletions
|
|
@ -22,6 +22,10 @@ b {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/********************
|
||||
* Layout structure *
|
||||
|
|
@ -53,7 +57,7 @@ $main-max-width: 500px;
|
|||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
/* Blocks */
|
||||
|
|
@ -66,21 +70,23 @@ $main-max-width: 500px;
|
|||
@media (min-width: 500px) {
|
||||
& > section {
|
||||
flex: 1 1 auto;
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 120px) {
|
||||
& > section {
|
||||
flex: 1 1 auto;
|
||||
width: 350px;
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#providers {
|
||||
width:150px;
|
||||
width: 150px;
|
||||
min-width: unset;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -393,6 +399,13 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
|
|||
padding: $input-wrapper-padding;
|
||||
|
||||
label {
|
||||
margin-right: 10px;
|
||||
|
||||
color: rgba(0,0,0,0.38);
|
||||
font-size: $input-font-size;
|
||||
}
|
||||
|
||||
& .transform-label label {
|
||||
@include ellipsis;
|
||||
|
||||
padding-left: $input-wrapper-padding;
|
||||
|
|
@ -403,11 +416,6 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
|
|||
height: $label-height;
|
||||
line-height: $label-height;
|
||||
|
||||
color: rgba(0,0,0,0.38);
|
||||
font-size: $input-font-size;
|
||||
}
|
||||
|
||||
&:not(.input-skip) label {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
|
|
@ -439,6 +447,11 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
select {
|
||||
height: $input-height;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
@mixin input-special($type, $color: $input-border-color) {
|
||||
&.input-#{$type} {
|
||||
color: $color;
|
||||
|
|
@ -451,15 +464,15 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
|
|||
}
|
||||
}
|
||||
|
||||
&:not(.input-skip) {
|
||||
|
||||
&.input-focused label,
|
||||
&.input-has-value label {
|
||||
transform: translate3d(0,$label-small-top,0) scale($label-small-scale);
|
||||
&.input-focused {
|
||||
label, .messages {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-focused label {
|
||||
color: inherit;
|
||||
&.input-focused, &.input-has-value {
|
||||
.transform-label label {
|
||||
transform: translate3d(0,$label-small-top,0) scale($label-small-scale);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -467,13 +480,14 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
|
|||
@include input-special('error', $brand-danger);
|
||||
@include input-special('focused', $brand-primary);
|
||||
|
||||
.infos-spacer {
|
||||
.messages-spacer {
|
||||
float: right;
|
||||
min-height: $input-space-after;
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
.messages {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
|
||||
& > * {
|
||||
padding-top: 5px;
|
||||
|
|
@ -481,35 +495,41 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
|
|||
}
|
||||
}
|
||||
|
||||
&.input-checkbox, &.input-radio {
|
||||
& > :first-child {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-checkbox {
|
||||
.buttons-choices {
|
||||
display: inline-flex;
|
||||
|
||||
& > input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > button {
|
||||
@include transition;
|
||||
flex: 0 1 auto;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
background: white;
|
||||
background: lighten($brand-primary, 60%);
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
& > button.choice-yes {
|
||||
& > button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
& > button.choice-no {
|
||||
& > button:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
& > button.focus {
|
||||
& > button:focus {
|
||||
background: lighten($brand-primary, 30%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
& > button.selected {
|
||||
background: $brand-primary;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,79 +2,154 @@
|
|||
* Input fields handlers
|
||||
*/
|
||||
|
||||
function toggleWrapperClass(class_name, callable) {
|
||||
let func = function(bool) {
|
||||
if (bool === undefined)
|
||||
bool = callable.apply(this);
|
||||
this.wrapper.toggleClass(class_name, bool);
|
||||
};
|
||||
return func;
|
||||
}
|
||||
let WIDGET_CLS = {
|
||||
has_error: 'input-error',
|
||||
has_focus: 'input-focused',
|
||||
has_value: 'input-has-value'
|
||||
};
|
||||
|
||||
let Input = function(field) {
|
||||
let Widget = function($wrapper) {
|
||||
this.$wrapper = $wrapper;
|
||||
|
||||
this.dom_field = field;
|
||||
this.field = $(field);
|
||||
this.wrapper = $(field).closest('.input-wrapper');
|
||||
this.$field = $wrapper.find('input');
|
||||
|
||||
// initialization
|
||||
this.update_focus();
|
||||
this.update_has_value();
|
||||
|
||||
// register event handlers
|
||||
this.field.focus( () => this.on_focus() );
|
||||
this.field.blur( () => this.on_blur() );
|
||||
this.field.on('change', () => this.on_change() );
|
||||
this.$field.focus( () => this.on_focus() );
|
||||
this.$field.blur( () => this.on_blur() );
|
||||
this.$field.on('change', () => this.on_change() );
|
||||
|
||||
// initialization
|
||||
if (this.has_focus())
|
||||
this.$field.focus();
|
||||
};
|
||||
|
||||
Input.prototype = {
|
||||
has_value: function() { return this.field.val() ? true : false; },
|
||||
has_focus: function() { return this.field.is(':focus'); },
|
||||
has_error: function() { return !this.has_value() && this.field.prop('required'); },
|
||||
Widget.prototype = {
|
||||
has_value: function () {
|
||||
return Boolean(this.$field.val());
|
||||
},
|
||||
|
||||
on_focus: function() { this.update_focus(true); },
|
||||
on_blur: function() { this.update_focus(false); },
|
||||
on_change: function() {
|
||||
has_focus: function () {
|
||||
return this.$field.is(':focus');
|
||||
},
|
||||
|
||||
has_error: function () {
|
||||
return this.$field.prop('required') && !this.has_value();
|
||||
},
|
||||
|
||||
on_focus: function () {
|
||||
this.$wrapper.addClass(WIDGET_CLS.has_focus);
|
||||
},
|
||||
|
||||
on_blur: function () {
|
||||
this.$wrapper.removeClass(WIDGET_CLS.has_focus);
|
||||
},
|
||||
|
||||
on_change: function () {
|
||||
this.update_has_value();
|
||||
this.update_error();
|
||||
},
|
||||
|
||||
update_has_value: function () {
|
||||
this.$wrapper.toggleClass(WIDGET_CLS.has_value, this.has_value());
|
||||
},
|
||||
|
||||
update_error: function () {
|
||||
let has_error = this.has_error();
|
||||
this.$wrapper.toggleClass(WIDGET_CLS.has_error, has_error);
|
||||
if (!has_error)
|
||||
this.$wrapper.find('.messages .error-desc').hide();
|
||||
}
|
||||
};
|
||||
|
||||
$.extend(Input.prototype, {
|
||||
update_focus: toggleWrapperClass('input-focused', Input.prototype.has_focus),
|
||||
update_error: function () {
|
||||
let has_error = this.has_error();
|
||||
toggleWrapperClass('input-error').bind(this)(has_error);
|
||||
if (!has_error) {
|
||||
this.wrapper.find('.messages .error-desc').hide();
|
||||
let CheckboxInput = function ($wrapper) {
|
||||
this.$wrapper = $wrapper;
|
||||
|
||||
this.$field = $wrapper.find('input');
|
||||
this.$buttons = $wrapper.find('button');
|
||||
|
||||
this.$buttons.click( (e) => this.on_click(e) );
|
||||
this.$buttons.focus( () => this.on_focus() );
|
||||
this.$buttons.blur( () => this.on_blur() );
|
||||
};
|
||||
|
||||
CheckboxInput.prototype = {
|
||||
on_click: function (e) {
|
||||
let $button = $(e.target);
|
||||
let checked = $button.hasClass('choice-yes');
|
||||
|
||||
this.$field.prop('checked', checked);
|
||||
this.$buttons.removeClass('selected');
|
||||
$button.addClass('selected');
|
||||
},
|
||||
|
||||
on_focus: function () {
|
||||
this.$wrapper.addClass(WIDGET_CLS.has_focus);
|
||||
},
|
||||
|
||||
on_blur: function () {
|
||||
this.$wrapper.removeClass(WIDGET_CLS.has_focus);
|
||||
}
|
||||
};
|
||||
|
||||
let RadioSelect = function ($wrapper) {
|
||||
this.$wrapper = $wrapper;
|
||||
|
||||
this.$buttons = $wrapper.find('button');
|
||||
|
||||
this.$buttons.click( (e) => this.on_click(e) );
|
||||
this.$buttons.focus( () => this.on_focus() );
|
||||
this.$buttons.blur( () => this.on_blur() );
|
||||
};
|
||||
|
||||
RadioSelect.prototype = {
|
||||
on_click: function (e) {
|
||||
let $button = $(e.target);
|
||||
let $field = $button.find('input');
|
||||
|
||||
if (!$field.prop('checked')) {
|
||||
$field.prop('checked', true);
|
||||
this.$buttons.removeClass('selected');
|
||||
$button.addClass('selected');
|
||||
}
|
||||
},
|
||||
update_has_value: toggleWrapperClass('input-has-value', Input.prototype.has_value),
|
||||
});
|
||||
|
||||
on_focus: function () { this.$wrapper.addClass(WIDGET_CLS.has_focus); },
|
||||
on_blur: function () { this.$wrapper.removeClass(WIDGET_CLS.has_focus); }
|
||||
};
|
||||
|
||||
$(function () {
|
||||
let fields = $('input.field');
|
||||
fields.map( function() { return new Input(this); });
|
||||
$('.input-wrapper').each(function () {
|
||||
let $wrapper = $(this);
|
||||
let widget_type = $wrapper.data('widget-type');
|
||||
|
||||
if (widget_type == 'checkboxinput') {
|
||||
new CheckboxInput($wrapper);
|
||||
} else if (widget_type == 'radioselect') {
|
||||
new RadioSelect($wrapper);
|
||||
} else if (widget_type == 'select') {
|
||||
new Select($wrapper);
|
||||
} else {
|
||||
new Widget($wrapper);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(function () {
|
||||
let choice_yes = $('.choice-yes');
|
||||
let choice_no = $('.choice-no');
|
||||
let Select = function ($wrapper) {
|
||||
this.$wrapper = $wrapper;
|
||||
|
||||
choice_yes.click(function () {
|
||||
$(this).siblings('input').prop('checked', true);
|
||||
$(this).addClass('focus');
|
||||
$(this).siblings('.choice-no').removeClass('focus');
|
||||
});
|
||||
this.$field = $wrapper.find('select');
|
||||
|
||||
choice_no.click(function () {
|
||||
$(this).siblings('input').prop('checked', true);
|
||||
$(this).addClass('focus');
|
||||
$(this).siblings('.choice-yes').removeClass('focus');
|
||||
});
|
||||
this.$field.focus( () => this.on_focus() );
|
||||
this.$field.blur( () => this.on_blur() );
|
||||
};
|
||||
|
||||
Select.prototype = {
|
||||
on_focus: function () { this.$wrapper.addClass(WIDGET_CLS.has_focus); },
|
||||
on_blur: function () { this.$wrapper.removeClass(WIDGET_CLS.has_focus); }
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Keyboard shortcuts
|
||||
|
|
@ -87,7 +162,7 @@ function prepareShorcuts() {
|
|||
let shortcuts = {};
|
||||
|
||||
$('.method-wrapper a').each( function() {
|
||||
let name = $(this).text();
|
||||
let name = $(this).text().trim();
|
||||
|
||||
for (let i=0; i < name.length; i++) {
|
||||
let key = name[i].toLowerCase();
|
||||
|
|
|
|||
|
|
@ -128,10 +128,15 @@ b {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* line 25, ../../scss/_base.scss */
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/********************
|
||||
* Layout structure *
|
||||
********************/
|
||||
/* line 32, ../../scss/_base.scss */
|
||||
/* line 36, ../../scss/_base.scss */
|
||||
.wrapper {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -140,54 +145,56 @@ b {
|
|||
}
|
||||
|
||||
@media (min-height: 400px) and (min-width: 576px) {
|
||||
/* line 42, ../../scss/_base.scss */
|
||||
/* line 46, ../../scss/_base.scss */
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-height: 500px) and (min-width: 576px) {
|
||||
/* line 48, ../../scss/_base.scss */
|
||||
/* line 52, ../../scss/_base.scss */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
top: -5%;
|
||||
}
|
||||
}
|
||||
/* line 54, ../../scss/_base.scss */
|
||||
/* line 58, ../../scss/_base.scss */
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
/* Blocks */
|
||||
}
|
||||
/* line 61, ../../scss/_base.scss */
|
||||
/* line 65, ../../scss/_base.scss */
|
||||
.content-wrapper > section {
|
||||
flex: 1 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
/* line 67, ../../scss/_base.scss */
|
||||
/* line 71, ../../scss/_base.scss */
|
||||
.content-wrapper > section {
|
||||
flex: 1 1 auto;
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 120px) {
|
||||
/* line 74, ../../scss/_base.scss */
|
||||
/* line 78, ../../scss/_base.scss */
|
||||
.content-wrapper > section {
|
||||
flex: 1 1 auto;
|
||||
width: 350px;
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
/* line 82, ../../scss/_base.scss */
|
||||
/* line 86, ../../scss/_base.scss */
|
||||
#providers {
|
||||
width: 150px;
|
||||
min-width: unset;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
/**********
|
||||
* Header *
|
||||
**********/
|
||||
/* line 94, ../../scss/_base.scss */
|
||||
/* line 100, ../../scss/_base.scss */
|
||||
header {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
|
@ -203,7 +210,7 @@ header::after {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 108, ../../scss/_base.scss */
|
||||
/* line 114, ../../scss/_base.scss */
|
||||
header a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
@ -212,7 +219,7 @@ header a:focus, header a:hover {
|
|||
background: #d43f3a;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* line 117, ../../scss/_base.scss */
|
||||
/* line 123, ../../scss/_base.scss */
|
||||
header .right {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
@ -223,25 +230,25 @@ header .right {
|
|||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
/* line 130, ../../scss/_base.scss */
|
||||
/* line 136, ../../scss/_base.scss */
|
||||
header .right > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
/* line 133, ../../scss/_base.scss */
|
||||
/* line 139, ../../scss/_base.scss */
|
||||
header .right > * > * {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
/* line 139, ../../scss/_base.scss */
|
||||
/* line 145, ../../scss/_base.scss */
|
||||
header .right #connect-status {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* line 143, ../../scss/_base.scss */
|
||||
/* line 149, ../../scss/_base.scss */
|
||||
header .right #connect-status .fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* line 149, ../../scss/_base.scss */
|
||||
/* line 155, ../../scss/_base.scss */
|
||||
header h1 {
|
||||
flex: 1 1 auto;
|
||||
padding: 15px 25px;
|
||||
|
|
@ -250,11 +257,11 @@ header h1 {
|
|||
/************
|
||||
* Messages *
|
||||
************/
|
||||
/* line 162, ../../scss/_base.scss */
|
||||
/* line 168, ../../scss/_base.scss */
|
||||
.messages-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
/* line 165, ../../scss/_base.scss */
|
||||
/* line 171, ../../scss/_base.scss */
|
||||
.messages-container::after {
|
||||
display: block;
|
||||
content: "";
|
||||
|
|
@ -262,30 +269,30 @@ header h1 {
|
|||
height: 2px;
|
||||
}
|
||||
|
||||
/* line 173, ../../scss/_base.scss */
|
||||
/* line 179, ../../scss/_base.scss */
|
||||
.messages-list {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* line 183, ../../scss/_base.scss */
|
||||
/* line 189, ../../scss/_base.scss */
|
||||
.message {
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
color: #292b2c;
|
||||
}
|
||||
/* line 178, ../../scss/_base.scss */
|
||||
/* line 184, ../../scss/_base.scss */
|
||||
.message.info {
|
||||
color: #28a1c5;
|
||||
}
|
||||
/* line 178, ../../scss/_base.scss */
|
||||
/* line 184, ../../scss/_base.scss */
|
||||
.message.success {
|
||||
color: #2d672d;
|
||||
}
|
||||
/* line 178, ../../scss/_base.scss */
|
||||
/* line 184, ../../scss/_base.scss */
|
||||
.message.warning {
|
||||
color: #b06d0f;
|
||||
}
|
||||
/* line 178, ../../scss/_base.scss */
|
||||
/* line 184, ../../scss/_base.scss */
|
||||
.message.error {
|
||||
color: #b52b27;
|
||||
}
|
||||
|
|
@ -293,24 +300,24 @@ header h1 {
|
|||
/***********
|
||||
* Content *
|
||||
***********/
|
||||
/* line 202, ../../scss/_base.scss */
|
||||
/* line 208, ../../scss/_base.scss */
|
||||
section > * + * {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* Methods list */
|
||||
/* line 210, ../../scss/_base.scss */
|
||||
/* line 216, ../../scss/_base.scss */
|
||||
.method-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* line 215, ../../scss/_base.scss */
|
||||
/* line 221, ../../scss/_base.scss */
|
||||
.method-list > .method-wrapper {
|
||||
flex: 1 100%;
|
||||
padding: 2px 0;
|
||||
}
|
||||
/* line 219, ../../scss/_base.scss */
|
||||
/* line 225, ../../scss/_base.scss */
|
||||
.method-list > .method-wrapper a {
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
display: block;
|
||||
|
|
@ -340,11 +347,11 @@ section > * + * {
|
|||
}
|
||||
|
||||
/* Connected accounts list */
|
||||
/* line 243, ../../scss/_base.scss */
|
||||
/* line 249, ../../scss/_base.scss */
|
||||
.connections-providers-list > * + * {
|
||||
margin-top: 2px;
|
||||
}
|
||||
/* line 247, ../../scss/_base.scss */
|
||||
/* line 253, ../../scss/_base.scss */
|
||||
.connections-providers-list > * > .heading {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
|
@ -357,7 +364,7 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 256, ../../scss/_base.scss */
|
||||
/* line 262, ../../scss/_base.scss */
|
||||
.connections-providers-list > * > .heading .connect {
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
display: block;
|
||||
|
|
@ -388,29 +395,29 @@ section > * + * {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* line 268, ../../scss/_base.scss */
|
||||
/* line 274, ../../scss/_base.scss */
|
||||
.connections-list {
|
||||
border-left: 5px solid #f7f7f9;
|
||||
}
|
||||
/* line 271, ../../scss/_base.scss */
|
||||
/* line 277, ../../scss/_base.scss */
|
||||
.connections-list > * {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* line 275, ../../scss/_base.scss */
|
||||
/* line 281, ../../scss/_base.scss */
|
||||
.connections-list > * + * {
|
||||
border-top: 1px dotted #eceeef;
|
||||
}
|
||||
/* line 279, ../../scss/_base.scss */
|
||||
/* line 285, ../../scss/_base.scss */
|
||||
.connections-list > * > .fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* line 283, ../../scss/_base.scss */
|
||||
/* line 289, ../../scss/_base.scss */
|
||||
.connections-list > * .delete {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
}
|
||||
/* line 287, ../../scss/_base.scss */
|
||||
/* line 293, ../../scss/_base.scss */
|
||||
.connections-list > * .delete [type=submit] {
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
display: block;
|
||||
|
|
@ -439,17 +446,17 @@ section > * + * {
|
|||
background: #b52b27;
|
||||
color: #fff;
|
||||
}
|
||||
/* line 296, ../../scss/_base.scss */
|
||||
/* line 302, ../../scss/_base.scss */
|
||||
.connections-list form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* E-mail adresses list */
|
||||
/* line 305, ../../scss/_base.scss */
|
||||
/* line 311, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress {
|
||||
border-bottom: 1px dotted #464a4c;
|
||||
}
|
||||
/* line 309, ../../scss/_base.scss */
|
||||
/* line 315, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary {
|
||||
height: 45px;
|
||||
}
|
||||
|
|
@ -459,13 +466,13 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 314, ../../scss/_base.scss */
|
||||
/* line 320, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > * {
|
||||
float: left;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
/* line 320, ../../scss/_base.scss */
|
||||
/* line 326, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status {
|
||||
float: right;
|
||||
width: 45px;
|
||||
|
|
@ -473,25 +480,25 @@ section > * + * {
|
|||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
/* line 328, ../../scss/_base.scss */
|
||||
/* line 334, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .email {
|
||||
padding: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* line 333, ../../scss/_base.scss */
|
||||
/* line 339, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .primary {
|
||||
color: #025aa5;
|
||||
}
|
||||
/* line 337, ../../scss/_base.scss */
|
||||
/* line 343, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .verified {
|
||||
color: #449d44;
|
||||
}
|
||||
/* line 341, ../../scss/_base.scss */
|
||||
/* line 347, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .unverified {
|
||||
color: #ec971f;
|
||||
}
|
||||
|
||||
/* line 350, ../../scss/_base.scss */
|
||||
/* line 356, ../../scss/_base.scss */
|
||||
.actions {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -501,7 +508,7 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 355, ../../scss/_base.scss */
|
||||
/* line 361, ../../scss/_base.scss */
|
||||
.actions > * {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
|
@ -511,7 +518,7 @@ section > * + * {
|
|||
/*********
|
||||
* Forms *
|
||||
*********/
|
||||
/* line 387, ../../scss/_base.scss */
|
||||
/* line 393, ../../scss/_base.scss */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -524,24 +531,19 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 395, ../../scss/_base.scss */
|
||||
/* line 401, ../../scss/_base.scss */
|
||||
.input-wrapper label {
|
||||
margin-right: 10px;
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
font-size: 16px;
|
||||
}
|
||||
/* line 408, ../../scss/_base.scss */
|
||||
.input-wrapper .transform-label label {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
font-size: 16px;
|
||||
}
|
||||
/* line 26, ../../scss/_mixins.scss */
|
||||
.input-wrapper label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* line 410, ../../scss/_base.scss */
|
||||
.input-wrapper:not(.input-skip) label {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
|
|
@ -550,7 +552,13 @@ section > * + * {
|
|||
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transform-origin: left top;
|
||||
}
|
||||
/* line 422, ../../scss/_base.scss */
|
||||
/* line 26, ../../scss/_mixins.scss */
|
||||
.input-wrapper .transform-label label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* line 430, ../../scss/_base.scss */
|
||||
.input-wrapper input.field:not([type=checkbox]) {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
|
|
@ -560,96 +568,110 @@ section > * + * {
|
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
font-size: 16px;
|
||||
}
|
||||
/* line 436, ../../scss/_base.scss */
|
||||
/* line 444, ../../scss/_base.scss */
|
||||
.input-wrapper input[type="checkbox"] {
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
/* line 456, ../../scss/_base.scss */
|
||||
.input-wrapper:not(.input-skip).input-focused label, .input-wrapper:not(.input-skip).input-has-value label {
|
||||
transform: translate3d(0, 6.5px, 0) scale(0.75);
|
||||
/* line 450, ../../scss/_base.scss */
|
||||
.input-wrapper select {
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
}
|
||||
/* line 461, ../../scss/_base.scss */
|
||||
.input-wrapper:not(.input-skip).input-focused label {
|
||||
/* line 468, ../../scss/_base.scss */
|
||||
.input-wrapper.input-focused label, .input-wrapper.input-focused .messages {
|
||||
color: inherit;
|
||||
}
|
||||
/* line 443, ../../scss/_base.scss */
|
||||
/* line 474, ../../scss/_base.scss */
|
||||
.input-wrapper.input-focused .transform-label label, .input-wrapper.input-has-value .transform-label label {
|
||||
transform: translate3d(0, 6.5px, 0) scale(0.75);
|
||||
}
|
||||
/* line 456, ../../scss/_base.scss */
|
||||
.input-wrapper.input-has-value {
|
||||
color: #449d44;
|
||||
}
|
||||
/* line 447, ../../scss/_base.scss */
|
||||
/* line 460, ../../scss/_base.scss */
|
||||
.input-wrapper.input-has-value input.field {
|
||||
padding-bottom: 0px;
|
||||
border-width: 2px;
|
||||
border-color: #449d44;
|
||||
}
|
||||
/* line 443, ../../scss/_base.scss */
|
||||
/* line 456, ../../scss/_base.scss */
|
||||
.input-wrapper.input-error {
|
||||
color: #d9534f;
|
||||
}
|
||||
/* line 447, ../../scss/_base.scss */
|
||||
/* line 460, ../../scss/_base.scss */
|
||||
.input-wrapper.input-error input.field {
|
||||
padding-bottom: 0px;
|
||||
border-width: 2px;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
/* line 443, ../../scss/_base.scss */
|
||||
/* line 456, ../../scss/_base.scss */
|
||||
.input-wrapper.input-focused {
|
||||
color: #025aa5;
|
||||
}
|
||||
/* line 447, ../../scss/_base.scss */
|
||||
/* line 460, ../../scss/_base.scss */
|
||||
.input-wrapper.input-focused input.field {
|
||||
padding-bottom: 0px;
|
||||
border-width: 2px;
|
||||
border-color: #025aa5;
|
||||
}
|
||||
/* line 470, ../../scss/_base.scss */
|
||||
.input-wrapper .infos-spacer {
|
||||
/* line 483, ../../scss/_base.scss */
|
||||
.input-wrapper .messages-spacer {
|
||||
float: right;
|
||||
min-height: 10px;
|
||||
min-width: 1px;
|
||||
}
|
||||
/* line 478, ../../scss/_base.scss */
|
||||
/* line 489, ../../scss/_base.scss */
|
||||
.input-wrapper .messages {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
/* line 492, ../../scss/_base.scss */
|
||||
.input-wrapper .messages > * {
|
||||
padding-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* line 499, ../../scss/_base.scss */
|
||||
.input-wrapper.input-checkbox > :first-child, .input-wrapper.input-radio > :first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* line 486, ../../scss/_base.scss */
|
||||
.widget-checkbox {
|
||||
/* line 505, ../../scss/_base.scss */
|
||||
.buttons-choices {
|
||||
display: inline-flex;
|
||||
}
|
||||
/* line 489, ../../scss/_base.scss */
|
||||
.widget-checkbox > input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
/* line 493, ../../scss/_base.scss */
|
||||
.widget-checkbox > button {
|
||||
/* line 508, ../../scss/_base.scss */
|
||||
.buttons-choices > button {
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
flex: 0 1 auto;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
background: white;
|
||||
background: #daeeff;
|
||||
color: #636c72;
|
||||
}
|
||||
/* line 502, ../../scss/_base.scss */
|
||||
.widget-checkbox > button.choice-yes {
|
||||
/* line 517, ../../scss/_base.scss */
|
||||
.buttons-choices > button:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
/* line 507, ../../scss/_base.scss */
|
||||
.widget-checkbox > button.choice-no {
|
||||
/* line 522, ../../scss/_base.scss */
|
||||
.buttons-choices > button:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
/* line 512, ../../scss/_base.scss */
|
||||
.widget-checkbox > button.focus {
|
||||
/* line 527, ../../scss/_base.scss */
|
||||
.buttons-choices > button:focus {
|
||||
background: #43a7fd;
|
||||
color: white;
|
||||
}
|
||||
/* line 532, ../../scss/_base.scss */
|
||||
.buttons-choices > button.selected {
|
||||
background: #025aa5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* line 518, ../../scss/_base.scss */
|
||||
/* line 538, ../../scss/_base.scss */
|
||||
[type=submit]:not(.link) {
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
display: block;
|
||||
|
|
@ -676,7 +698,7 @@ section > * + * {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* line 524, ../../scss/_base.scss */
|
||||
/* line 544, ../../scss/_base.scss */
|
||||
[type=submit].link {
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
color: #025aa5;
|
||||
|
|
@ -693,23 +715,23 @@ section > * + * {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 533, ../../scss/_base.scss */
|
||||
/* line 553, ../../scss/_base.scss */
|
||||
.form-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* line 537, ../../scss/_base.scss */
|
||||
/* line 557, ../../scss/_base.scss */
|
||||
.form-inline > .input-wrapper {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
/* line 541, ../../scss/_base.scss */
|
||||
/* line 561, ../../scss/_base.scss */
|
||||
.form-inline [type=submit] {
|
||||
margin-top: -5px;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* line 548, ../../scss/_base.scss */
|
||||
/* line 568, ../../scss/_base.scss */
|
||||
.btn {
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
display: block;
|
||||
|
|
@ -729,7 +751,7 @@ section > * + * {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 553, ../../scss/_base.scss */
|
||||
/* line 573, ../../scss/_base.scss */
|
||||
.btn-primary {
|
||||
background: #025aa5;
|
||||
color: #fff;
|
||||
|
|
@ -740,7 +762,7 @@ section > * + * {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* line 554, ../../scss/_base.scss */
|
||||
/* line 574, ../../scss/_base.scss */
|
||||
.btn-success {
|
||||
background: #449d44;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -2,24 +2,44 @@
|
|||
|
||||
{% csrf_token %}
|
||||
|
||||
{% for field in form %}
|
||||
{% with widget=field|widget_type %}
|
||||
{% if widget == "checkboxinput" %}
|
||||
<div li class="input-wrapper input-skip {% if field.errors %}input-error{% endif %}">
|
||||
<label for="{{ field.id_for_label }}">
|
||||
{{ field.label }}
|
||||
<div class="widget-checkbox">
|
||||
{% render_field field class+="field" %}
|
||||
<button type="button" class="choice-yes">Oui</button>
|
||||
<button type="button" class="choice-no focus">Non</button>
|
||||
{% for field in form.visible_fields %}
|
||||
{% with widget_type=field|widget_type %}
|
||||
<div class="input-wrapper {% if field.errors %}input-error{% endif %}" data-widget-type="{{ widget_type }}">
|
||||
{% if widget_type == "checkboxinput" %}
|
||||
<div>
|
||||
<label>{{ field.label }}</label>
|
||||
<div class="buttons-choices">
|
||||
<button type="button" class="choice-yes {% if field.initial %}selected{% endif %}">Oui</button>
|
||||
<button type="button" class="choice-no {% if not field.initial %}selected{% endif %}">Non</button>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
{% render_field field %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif widget_type == "radioselect" %}
|
||||
<div>
|
||||
<label>{{ field.label }}</label>
|
||||
<div class="buttons-choices">
|
||||
{% for choice in field %}
|
||||
<button type="button" class="{% if choice.data.selected %}selected{% endif %}">
|
||||
{{ choice.choice_label }}
|
||||
<div class="hidden">{{ choice.tag }}</div>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif widget_type == "select" %}
|
||||
<div>
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{% render_field field %}
|
||||
</div>
|
||||
</label>
|
||||
{% else %}
|
||||
<div class="input-wrapper{% if field.errors %} input-error{% endif %}">
|
||||
<div class="transform-label">
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{% render_field field class+="field" size="" autocomplete="off" autocapitalize="none" placeholder="" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="infos-spacer"></div>
|
||||
<div class="messages-spacer"></div>
|
||||
<ul class="messages">
|
||||
{% if field.help_text %}
|
||||
<li>{{ field.help_text|safe }}</li>
|
||||
|
|
@ -31,3 +51,9 @@
|
|||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="hidden">
|
||||
{% for field in form.hidden_fields %}
|
||||
{{ field }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue