DGNum/django-allauth-ens
6
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Improve rendering of radios, checkboxes and select

Browse source 
Namely, it concerns the widgets: RadioSelect, CheckboxInput and Select.
This commit is contained in:
Aurélien Delobelle 2018-01-25 14:12:33 +01:00
parent 852829f73b
commit df12ed8173
4 changed files with 346 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
allauth_ens/scss/_base.scss
View file

@ -22,6 +22,10 @@ b {
font-weight: bold; font-weight: bold;
} }
.hidden {
display: none;
}
/******************** /********************
* Layout structure * * Layout structure *
@ -53,7 +57,7 @@ $main-max-width: 500px;
.content-wrapper { .content-wrapper {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row nowrap;
align-items: center; align-items: center;
/* Blocks */ /* Blocks */
@ -66,14 +70,14 @@ $main-max-width: 500px;
@media (min-width: 500px) { @media (min-width: 500px) {
& > section { & > section {
flex: 1 1 auto; flex: 1 1 auto;
width: 250px; min-width: 250px;
} }
} }
@media (min-width: 120px) { @media (min-width: 120px) {
& > section { & > section {
flex: 1 1 auto; flex: 1 1 auto;
width: 350px; min-width: 350px;
} }
} }
@ -81,6 +85,8 @@ $main-max-width: 500px;
#providers { #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; padding: $input-wrapper-padding;
label { label {
margin-right: 10px;
color: rgba(0,0,0,0.38);
font-size: $input-font-size;
}
& .transform-label label {
@include ellipsis; @include ellipsis;
padding-left: $input-wrapper-padding; padding-left: $input-wrapper-padding;
@ -403,11 +416,6 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
height: $label-height; height: $label-height;
line-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; position: absolute;
bottom: 100%; bottom: 100%;
left: 0; left: 0;
@ -439,6 +447,11 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
height: 20px; height: 20px;
} }
select {
height: $input-height;
background: $white;
}
@mixin input-special($type, $color: $input-border-color) { @mixin input-special($type, $color: $input-border-color) {
&.input-#{$type} { &.input-#{$type} {
color: $color; color: $color;
@ -451,15 +464,15 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
} }
} }
&:not(.input-skip) { &.input-focused {
label, .messages {
&.input-focused label, color: inherit;
&.input-has-value label { }
transform: translate3d(0,$label-small-top,0) scale($label-small-scale);
} }
&.input-focused label { &.input-focused, &.input-has-value {
color: inherit; .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('error', $brand-danger);
@include input-special('focused', $brand-primary); @include input-special('focused', $brand-primary);
.infos-spacer { .messages-spacer {
float: right; float: right;
min-height: $input-space-after; min-height: $input-space-after;
min-width: 1px; min-width: 1px;
} }
.messages { .messages {
color: rgba(0, 0, 0, 0.38);
& > * { & > * {
padding-top: 5px; 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; display: inline-flex;
& > input[type="checkbox"] {
display: none;
}
& > button { & > button {
@include transition; @include transition;
flex: 0 1 auto; flex: 0 1 auto;
display: inline-block; display: inline-block;
padding: 5px 10px; padding: 5px 10px;
background: white; background: lighten($brand-primary, 60%);
color: $gray-light; color: $gray-light;
} }
& > button.choice-yes { & > button:first-child {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
& > button.choice-no { & > button:last-child {
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
& > button.focus { & > button:focus {
background: lighten($brand-primary, 30%);
color: white;
}
& > button.selected {
background: $brand-primary; background: $brand-primary;
color: white; color: white;
} }

171
allauth_ens/static/allauth_ens/authens.js
View file

@ -2,79 +2,154 @@
* Input fields handlers * Input fields handlers
*/ */
function toggleWrapperClass(class_name, callable) { let WIDGET_CLS = {
let func = function(bool) { has_error: 'input-error',
if (bool === undefined) has_focus: 'input-focused',
bool = callable.apply(this); has_value: 'input-has-value'
this.wrapper.toggleClass(class_name, bool);
}; };
return func;
}
let Input = function(field) { let Widget = function($wrapper) {
this.$wrapper = $wrapper;
this.dom_field = field; this.$field = $wrapper.find('input');
this.field = $(field);
this.wrapper = $(field).closest('.input-wrapper');
// initialization
this.update_focus();
this.update_has_value(); this.update_has_value();
// register event handlers // register event handlers
this.field.focus( () => this.on_focus() ); this.$field.focus( () => this.on_focus() );
this.field.blur( () => this.on_blur() ); this.$field.blur( () => this.on_blur() );
this.field.on('change', () => this.on_change() ); this.$field.on('change', () => this.on_change() );
// initialization
if (this.has_focus())
this.$field.focus();
}; };
Input.prototype = { Widget.prototype = {
has_value: function() { return this.field.val() ? true : false; }, has_value: function () {
has_focus: function() { return this.field.is(':focus'); }, return Boolean(this.$field.val());
has_error: function() { return !this.has_value() && this.field.prop('required'); }, },
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_focus: function() { this.update_focus(true); },
on_blur: function() { this.update_focus(false); },
on_change: function () { on_change: function () {
this.update_has_value(); this.update_has_value();
this.update_error(); 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, { let CheckboxInput = function ($wrapper) {
update_focus: toggleWrapperClass('input-focused', Input.prototype.has_focus), this.$wrapper = $wrapper;
update_error: function () {
let has_error = this.has_error(); this.$field = $wrapper.find('input');
toggleWrapperClass('input-error').bind(this)(has_error); this.$buttons = $wrapper.find('button');
if (!has_error) {
this.wrapper.find('.messages .error-desc').hide(); 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 () { $(function () {
let fields = $('input.field'); $('.input-wrapper').each(function () {
fields.map( function() { return new Input(this); }); 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 Select = function ($wrapper) {
let choice_yes = $('.choice-yes'); this.$wrapper = $wrapper;
let choice_no = $('.choice-no');
choice_yes.click(function () { this.$field = $wrapper.find('select');
$(this).siblings('input').prop('checked', true);
$(this).addClass('focus');
$(this).siblings('.choice-no').removeClass('focus');
});
choice_no.click(function () { this.$field.focus( () => this.on_focus() );
$(this).siblings('input').prop('checked', true); this.$field.blur( () => this.on_blur() );
$(this).addClass('focus'); };
$(this).siblings('.choice-yes').removeClass('focus');
}); Select.prototype = {
on_focus: function () { this.$wrapper.addClass(WIDGET_CLS.has_focus); },
on_blur: function () { this.$wrapper.removeClass(WIDGET_CLS.has_focus); }
};
});
/** /**
* Keyboard shortcuts * Keyboard shortcuts
@ -87,7 +162,7 @@ function prepareShorcuts() {
let shortcuts = {}; let shortcuts = {};
$('.method-wrapper a').each( function() { $('.method-wrapper a').each( function() {
let name = $(this).text(); let name = $(this).text().trim();
for (let i=0; i < name.length; i++) { for (let i=0; i < name.length; i++) {
let key = name[i].toLowerCase(); let key = name[i].toLowerCase();

228
allauth_ens/static/allauth_ens/screen.css
View file

@ -128,10 +128,15 @@ b {
font-weight: bold; font-weight: bold;
} }
/* line 25, ../../scss/_base.scss */
.hidden {
display: none;
}
/******************** /********************
* Layout structure * * Layout structure *
********************/ ********************/
/* line 32, ../../scss/_base.scss */ /* line 36, ../../scss/_base.scss */
.wrapper { .wrapper {
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
@ -140,54 +145,56 @@ b {
} }
@media (min-height: 400px) and (min-width: 576px) { @media (min-height: 400px) and (min-width: 576px) {
/* line 42, ../../scss/_base.scss */ /* line 46, ../../scss/_base.scss */
html, body { html, body {
height: 100%; height: 100%;
} }
} }
@media (min-height: 500px) and (min-width: 576px) { @media (min-height: 500px) and (min-width: 576px) {
/* line 48, ../../scss/_base.scss */ /* line 52, ../../scss/_base.scss */
.wrapper { .wrapper {
position: relative; position: relative;
top: -5%; top: -5%;
} }
} }
/* line 54, ../../scss/_base.scss */ /* line 58, ../../scss/_base.scss */
.content-wrapper { .content-wrapper {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row nowrap;
align-items: center; align-items: center;
/* Blocks */ /* Blocks */
} }
/* line 61, ../../scss/_base.scss */ /* line 65, ../../scss/_base.scss */
.content-wrapper > section { .content-wrapper > section {
flex: 1 100%; flex: 1 100%;
padding: 15px; padding: 15px;
} }
@media (min-width: 500px) { @media (min-width: 500px) {
/* line 67, ../../scss/_base.scss */ /* line 71, ../../scss/_base.scss */
.content-wrapper > section { .content-wrapper > section {
flex: 1 1 auto; flex: 1 1 auto;
width: 250px; min-width: 250px;
} }
} }
@media (min-width: 120px) { @media (min-width: 120px) {
/* line 74, ../../scss/_base.scss */ /* line 78, ../../scss/_base.scss */
.content-wrapper > section { .content-wrapper > section {
flex: 1 1 auto; flex: 1 1 auto;
width: 350px; min-width: 350px;
} }
} }
/* line 82, ../../scss/_base.scss */ /* line 86, ../../scss/_base.scss */
#providers { #providers {
width: 150px; width: 150px;
min-width: unset;
flex: 1 0 auto;
} }
/********** /**********
* Header * * Header *
**********/ **********/
/* line 94, ../../scss/_base.scss */ /* line 100, ../../scss/_base.scss */
header { header {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@ -203,7 +210,7 @@ header::after {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 108, ../../scss/_base.scss */ /* line 114, ../../scss/_base.scss */
header a { header a {
color: #fff !important; color: #fff !important;
} }
@ -212,7 +219,7 @@ header a:focus, header a:hover {
background: #d43f3a; background: #d43f3a;
text-decoration: none; text-decoration: none;
} }
/* line 117, ../../scss/_base.scss */ /* line 123, ../../scss/_base.scss */
header .right { header .right {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -223,25 +230,25 @@ header .right {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
} }
/* line 130, ../../scss/_base.scss */ /* line 136, ../../scss/_base.scss */
header .right > * { header .right > * {
flex: 0 0 auto; flex: 0 0 auto;
} }
/* line 133, ../../scss/_base.scss */ /* line 139, ../../scss/_base.scss */
header .right > * > * { header .right > * > * {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
} }
/* line 139, ../../scss/_base.scss */ /* line 145, ../../scss/_base.scss */
header .right #connect-status { header .right #connect-status {
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
} }
/* line 143, ../../scss/_base.scss */ /* line 149, ../../scss/_base.scss */
header .right #connect-status .fa { header .right #connect-status .fa {
margin-right: 5px; margin-right: 5px;
} }
/* line 149, ../../scss/_base.scss */ /* line 155, ../../scss/_base.scss */
header h1 { header h1 {
flex: 1 1 auto; flex: 1 1 auto;
padding: 15px 25px; padding: 15px 25px;
@ -250,11 +257,11 @@ header h1 {
/************ /************
* Messages * * Messages *
************/ ************/
/* line 162, ../../scss/_base.scss */ /* line 168, ../../scss/_base.scss */
.messages-container { .messages-container {
padding: 0 15px; padding: 0 15px;
} }
/* line 165, ../../scss/_base.scss */ /* line 171, ../../scss/_base.scss */
.messages-container::after { .messages-container::after {
display: block; display: block;
content: ""; content: "";
@ -262,30 +269,30 @@ header h1 {
height: 2px; height: 2px;
} }
/* line 173, ../../scss/_base.scss */ /* line 179, ../../scss/_base.scss */
.messages-list { .messages-list {
padding: 10px 0; padding: 10px 0;
} }
/* line 183, ../../scss/_base.scss */ /* line 189, ../../scss/_base.scss */
.message { .message {
padding: 5px; padding: 5px;
font-size: 14px; font-size: 14px;
color: #292b2c; color: #292b2c;
} }
/* line 178, ../../scss/_base.scss */ /* line 184, ../../scss/_base.scss */
.message.info { .message.info {
color: #28a1c5; color: #28a1c5;
} }
/* line 178, ../../scss/_base.scss */ /* line 184, ../../scss/_base.scss */
.message.success { .message.success {
color: #2d672d; color: #2d672d;
} }
/* line 178, ../../scss/_base.scss */ /* line 184, ../../scss/_base.scss */
.message.warning { .message.warning {
color: #b06d0f; color: #b06d0f;
} }
/* line 178, ../../scss/_base.scss */ /* line 184, ../../scss/_base.scss */
.message.error { .message.error {
color: #b52b27; color: #b52b27;
} }
@ -293,24 +300,24 @@ header h1 {
/*********** /***********
* Content * * Content *
***********/ ***********/
/* line 202, ../../scss/_base.scss */ /* line 208, ../../scss/_base.scss */
section > * + * { section > * + * {
margin-top: 15px; margin-top: 15px;
} }
/* Methods list */ /* Methods list */
/* line 210, ../../scss/_base.scss */ /* line 216, ../../scss/_base.scss */
.method-list { .method-list {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
} }
/* line 215, ../../scss/_base.scss */ /* line 221, ../../scss/_base.scss */
.method-list > .method-wrapper { .method-list > .method-wrapper {
flex: 1 100%; flex: 1 100%;
padding: 2px 0; padding: 2px 0;
} }
/* line 219, ../../scss/_base.scss */ /* line 225, ../../scss/_base.scss */
.method-list > .method-wrapper a { .method-list > .method-wrapper a {
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
display: block; display: block;
@ -340,11 +347,11 @@ section > * + * {
} }
/* Connected accounts list */ /* Connected accounts list */
/* line 243, ../../scss/_base.scss */ /* line 249, ../../scss/_base.scss */
.connections-providers-list > * + * { .connections-providers-list > * + * {
margin-top: 2px; margin-top: 2px;
} }
/* line 247, ../../scss/_base.scss */ /* line 253, ../../scss/_base.scss */
.connections-providers-list > * > .heading { .connections-providers-list > * > .heading {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@ -357,7 +364,7 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 256, ../../scss/_base.scss */ /* line 262, ../../scss/_base.scss */
.connections-providers-list > * > .heading .connect { .connections-providers-list > * > .heading .connect {
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
display: block; display: block;
@ -388,29 +395,29 @@ section > * + * {
color: #fff; color: #fff;
} }
/* line 268, ../../scss/_base.scss */ /* line 274, ../../scss/_base.scss */
.connections-list { .connections-list {
border-left: 5px solid #f7f7f9; border-left: 5px solid #f7f7f9;
} }
/* line 271, ../../scss/_base.scss */ /* line 277, ../../scss/_base.scss */
.connections-list > * { .connections-list > * {
padding: 10px; padding: 10px;
font-size: 14px; font-size: 14px;
} }
/* line 275, ../../scss/_base.scss */ /* line 281, ../../scss/_base.scss */
.connections-list > * + * { .connections-list > * + * {
border-top: 1px dotted #eceeef; border-top: 1px dotted #eceeef;
} }
/* line 279, ../../scss/_base.scss */ /* line 285, ../../scss/_base.scss */
.connections-list > * > .fa { .connections-list > * > .fa {
margin-right: 5px; margin-right: 5px;
} }
/* line 283, ../../scss/_base.scss */ /* line 289, ../../scss/_base.scss */
.connections-list > * .delete { .connections-list > * .delete {
float: right; float: right;
margin-top: -2px; margin-top: -2px;
} }
/* line 287, ../../scss/_base.scss */ /* line 293, ../../scss/_base.scss */
.connections-list > * .delete [type=submit] { .connections-list > * .delete [type=submit] {
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
display: block; display: block;
@ -439,17 +446,17 @@ section > * + * {
background: #b52b27; background: #b52b27;
color: #fff; color: #fff;
} }
/* line 296, ../../scss/_base.scss */ /* line 302, ../../scss/_base.scss */
.connections-list form { .connections-list form {
display: inline-block; display: inline-block;
} }
/* E-mail adresses list */ /* E-mail adresses list */
/* line 305, ../../scss/_base.scss */ /* line 311, ../../scss/_base.scss */
.emailaddress-list .emailaddress { .emailaddress-list .emailaddress {
border-bottom: 1px dotted #464a4c; border-bottom: 1px dotted #464a4c;
} }
/* line 309, ../../scss/_base.scss */ /* line 315, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary { .emailaddress-list .emailaddress .summary {
height: 45px; height: 45px;
} }
@ -459,13 +466,13 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 314, ../../scss/_base.scss */ /* line 320, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > * { .emailaddress-list .emailaddress .summary > * {
float: left; float: left;
height: 100%; height: 100%;
padding: 12px; padding: 12px;
} }
/* line 320, ../../scss/_base.scss */ /* line 326, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status { .emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status {
float: right; float: right;
width: 45px; width: 45px;
@ -473,25 +480,25 @@ section > * + * {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
/* line 328, ../../scss/_base.scss */ /* line 334, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .email { .emailaddress-list .emailaddress .summary > .email {
padding: 12px; padding: 12px;
font-weight: bold; font-weight: bold;
} }
/* line 333, ../../scss/_base.scss */ /* line 339, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .primary { .emailaddress-list .emailaddress .summary > .primary {
color: #025aa5; color: #025aa5;
} }
/* line 337, ../../scss/_base.scss */ /* line 343, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .verified { .emailaddress-list .emailaddress .summary > .verified {
color: #449d44; color: #449d44;
} }
/* line 341, ../../scss/_base.scss */ /* line 347, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .unverified { .emailaddress-list .emailaddress .summary > .unverified {
color: #ec971f; color: #ec971f;
} }
/* line 350, ../../scss/_base.scss */ /* line 356, ../../scss/_base.scss */
.actions { .actions {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -501,7 +508,7 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 355, ../../scss/_base.scss */ /* line 361, ../../scss/_base.scss */
.actions > * { .actions > * {
float: right; float: right;
margin-right: 10px; margin-right: 10px;
@ -511,7 +518,7 @@ section > * + * {
/********* /*********
* Forms * * Forms *
*********/ *********/
/* line 387, ../../scss/_base.scss */ /* line 393, ../../scss/_base.scss */
.input-wrapper { .input-wrapper {
position: relative; position: relative;
display: block; display: block;
@ -524,24 +531,19 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 395, ../../scss/_base.scss */ /* line 401, ../../scss/_base.scss */
.input-wrapper label { .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; padding-left: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 26px; height: 26px;
line-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; position: absolute;
bottom: 100%; bottom: 100%;
left: 0; left: 0;
@ -550,7 +552,13 @@ section > * + * {
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transform-origin: left top; 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]) { .input-wrapper input.field:not([type=checkbox]) {
height: 30px; height: 30px;
width: 100%; width: 100%;
@ -560,96 +568,110 @@ section > * + * {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 16px; font-size: 16px;
} }
/* line 436, ../../scss/_base.scss */ /* line 444, ../../scss/_base.scss */
.input-wrapper input[type="checkbox"] { .input-wrapper input[type="checkbox"] {
vertical-align: sub; vertical-align: sub;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
/* line 456, ../../scss/_base.scss */ /* line 450, ../../scss/_base.scss */
.input-wrapper:not(.input-skip).input-focused label, .input-wrapper:not(.input-skip).input-has-value label { .input-wrapper select {
transform: translate3d(0, 6.5px, 0) scale(0.75); height: 30px;
background: #fff;
} }
/* line 461, ../../scss/_base.scss */ /* line 468, ../../scss/_base.scss */
.input-wrapper:not(.input-skip).input-focused label { .input-wrapper.input-focused label, .input-wrapper.input-focused .messages {
color: inherit; 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 { .input-wrapper.input-has-value {
color: #449d44; color: #449d44;
} }
/* line 447, ../../scss/_base.scss */ /* line 460, ../../scss/_base.scss */
.input-wrapper.input-has-value input.field { .input-wrapper.input-has-value input.field {
padding-bottom: 0px; padding-bottom: 0px;
border-width: 2px; border-width: 2px;
border-color: #449d44; border-color: #449d44;
} }
/* line 443, ../../scss/_base.scss */ /* line 456, ../../scss/_base.scss */
.input-wrapper.input-error { .input-wrapper.input-error {
color: #d9534f; color: #d9534f;
} }
/* line 447, ../../scss/_base.scss */ /* line 460, ../../scss/_base.scss */
.input-wrapper.input-error input.field { .input-wrapper.input-error input.field {
padding-bottom: 0px; padding-bottom: 0px;
border-width: 2px; border-width: 2px;
border-color: #d9534f; border-color: #d9534f;
} }
/* line 443, ../../scss/_base.scss */ /* line 456, ../../scss/_base.scss */
.input-wrapper.input-focused { .input-wrapper.input-focused {
color: #025aa5; color: #025aa5;
} }
/* line 447, ../../scss/_base.scss */ /* line 460, ../../scss/_base.scss */
.input-wrapper.input-focused input.field { .input-wrapper.input-focused input.field {
padding-bottom: 0px; padding-bottom: 0px;
border-width: 2px; border-width: 2px;
border-color: #025aa5; border-color: #025aa5;
} }
/* line 470, ../../scss/_base.scss */ /* line 483, ../../scss/_base.scss */
.input-wrapper .infos-spacer { .input-wrapper .messages-spacer {
float: right; float: right;
min-height: 10px; min-height: 10px;
min-width: 1px; 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 > * { .input-wrapper .messages > * {
padding-top: 5px; padding-top: 5px;
font-size: 12px; 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 */ /* line 505, ../../scss/_base.scss */
.widget-checkbox { .buttons-choices {
display: inline-flex; display: inline-flex;
} }
/* line 489, ../../scss/_base.scss */ /* line 508, ../../scss/_base.scss */
.widget-checkbox > input[type="checkbox"] { .buttons-choices > button {
display: none;
}
/* line 493, ../../scss/_base.scss */
.widget-checkbox > button {
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
flex: 0 1 auto; flex: 0 1 auto;
display: inline-block; display: inline-block;
padding: 5px 10px; padding: 5px 10px;
background: white; background: #daeeff;
color: #636c72; color: #636c72;
} }
/* line 502, ../../scss/_base.scss */ /* line 517, ../../scss/_base.scss */
.widget-checkbox > button.choice-yes { .buttons-choices > button:first-child {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
/* line 507, ../../scss/_base.scss */ /* line 522, ../../scss/_base.scss */
.widget-checkbox > button.choice-no { .buttons-choices > button:last-child {
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
/* line 512, ../../scss/_base.scss */ /* line 527, ../../scss/_base.scss */
.widget-checkbox > button.focus { .buttons-choices > button:focus {
background: #43a7fd;
color: white;
}
/* line 532, ../../scss/_base.scss */
.buttons-choices > button.selected {
background: #025aa5; background: #025aa5;
color: white; color: white;
} }
/* line 518, ../../scss/_base.scss */ /* line 538, ../../scss/_base.scss */
[type=submit]:not(.link) { [type=submit]:not(.link) {
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
display: block; display: block;
@ -676,7 +698,7 @@ section > * + * {
color: #fff; color: #fff;
} }
/* line 524, ../../scss/_base.scss */ /* line 544, ../../scss/_base.scss */
[type=submit].link { [type=submit].link {
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
color: #025aa5; color: #025aa5;
@ -693,23 +715,23 @@ section > * + * {
cursor: pointer; cursor: pointer;
} }
/* line 533, ../../scss/_base.scss */ /* line 553, ../../scss/_base.scss */
.form-inline { .form-inline {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* line 537, ../../scss/_base.scss */ /* line 557, ../../scss/_base.scss */
.form-inline > .input-wrapper { .form-inline > .input-wrapper {
flex: 1 0 auto; flex: 1 0 auto;
} }
/* line 541, ../../scss/_base.scss */ /* line 561, ../../scss/_base.scss */
.form-inline [type=submit] { .form-inline [type=submit] {
margin-top: -5px; margin-top: -5px;
margin-left: 8px; margin-left: 8px;
font-size: 14px; font-size: 14px;
} }
/* line 548, ../../scss/_base.scss */ /* line 568, ../../scss/_base.scss */
.btn { .btn {
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
display: block; display: block;
@ -729,7 +751,7 @@ section > * + * {
cursor: pointer; cursor: pointer;
} }
/* line 553, ../../scss/_base.scss */ /* line 573, ../../scss/_base.scss */
.btn-primary { .btn-primary {
background: #025aa5; background: #025aa5;
color: #fff; color: #fff;
@ -740,7 +762,7 @@ section > * + * {
color: #fff; color: #fff;
} }
/* line 554, ../../scss/_base.scss */ /* line 574, ../../scss/_base.scss */
.btn-success { .btn-success {
background: #449d44; background: #449d44;
color: #fff; color: #fff;

52
allauth_ens/templates/allauth_ens/block-form.html
View file

@ -2,24 +2,44 @@
{% csrf_token %} {% csrf_token %}
{% for field in form %} {% for field in form.visible_fields %}
{% with widget=field|widget_type %} {% with widget_type=field|widget_type %}
{% if widget == "checkboxinput" %} <div class="input-wrapper {% if field.errors %}input-error{% endif %}" data-widget-type="{{ widget_type }}">
<div li class="input-wrapper input-skip {% if field.errors %}input-error{% endif %}"> {% if widget_type == "checkboxinput" %}
<label for="{{ field.id_for_label }}"> <div>
{{ field.label }} <label>{{ field.label }}</label>
<div class="widget-checkbox"> <div class="buttons-choices">
{% render_field field class+="field" %} <button type="button" class="choice-yes {% if field.initial %}selected{% endif %}">Oui</button>
<button type="button" class="choice-yes">Oui</button> <button type="button" class="choice-no {% if not field.initial %}selected{% endif %}">Non</button>
<button type="button" class="choice-no focus">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> </div>
</label>
{% else %} {% else %}
<div class="input-wrapper{% if field.errors %} input-error{% endif %}"> <div class="transform-label">
<label for="{{ field.id_for_label }}">{{ field.label }}</label> <label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class+="field" size="" autocomplete="off" autocapitalize="none" placeholder="" %} {% render_field field class+="field" size="" autocomplete="off" autocapitalize="none" placeholder="" %}
</div>
{% endif %} {% endif %}
<div class="infos-spacer"></div> <div class="messages-spacer"></div>
<ul class="messages"> <ul class="messages">
{% if field.help_text %} {% if field.help_text %}
<li>{{ field.help_text|safe }}</li> <li>{{ field.help_text|safe }}</li>
@ -31,3 +51,9 @@
</div> </div>
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}
<div class="hidden">
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
</div>