Commit 1862fe4c authored by Kevin Paxman's avatar Kevin Paxman
Browse files

Merge branch 'feature/ISTWCMS-5061-m26lebla-style-form-items-wcms2' into '3.0.x'

ISTWCMS-5061 m26lebla style form items wcms2

See merge request !97
parents 67f8d8fd b90a578b
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -3,21 +3,9 @@
$button-border-radius: 0 !default;
$button-background-color: gesso-color(button, default, background) !default;
$button-background-color-active: gesso-color(
button,
default,
background-active
) !default;
$button-background-color-disabled: gesso-color(
button,
disabled,
background
) !default;
$button-background-color-hover: gesso-color(
button,
default,
background-hover
) !default;
$button-background-color-active: gesso-color( button, default, background-active) !default;
$button-background-color-disabled: gesso-color( button, disabled, background) !default;
$button-background-color-hover: gesso-color( button, default, background-hover) !default;
$button-background-image: none !default;
$button-text-color: gesso-color(button, default, text) !default;
$button-text-color-active: gesso-color(button, default, text-active) !default;
......@@ -48,7 +36,7 @@ $button-font-size: gesso-font-size(1) !default;
display: inline-block;
font-family: gesso-font-family(condensedbook);
font-size: gesso-font-size(1);
font-weight: gesso-font-weight(bold);
font-weight: gesso-font-weight(regular);
letter-spacing: 0.055rem;
line-height: gesso-line-height(base);
max-width:18.125rem;
......
......@@ -67,6 +67,18 @@ $test-color-12: #f00;
right: 0;
width: 100%;
}
@mixin uw-contained-width-reset() {
margin-left:inherit;
margin-right: inherit;
max-width:inherit;
padding: inherit;
@include xl{
padding-left:inherit;
padding-right:inherit;
}
}
// Flexbox display
@mixin flexbox {
......
......@@ -68,6 +68,12 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
color: $uw-black !important;
}
}
.pager__item a{
&:hover,
&:focus{
color:$uw-black !important;
}
}
}
// Else run the loop on the faculties.
@else {
......
......@@ -4,12 +4,32 @@ $form-font-family: gesso-font-family(book) !default;
$form-label-font-family: gesso-font-family(condensedbook) !default;
$form-legend-font-family: gesso-font-family(book) !default;
$form-input-font-family: gesso-font-family(system) !default;
$form-description-color: gesso-grayscale(gray-5) !default;
$form-gap: gesso-spacing(xs);
form{
font-family:$form-font-family;
font-size: gesso-font-size(-1);
font-weight:400;
}
[data-drupal-selector="edit-moderation-state-wrapper"]{
background-color:#ffebc5;
padding:1rem;
.form-item-moderation-state-0-current{
font-style:italic;
label{
font-size:gesso-font-size(0);
font-style:normal;
margin-bottom:0;
}
}
}
// Login screen making width 35rem.
.user-login-form{
margin:0;
max-width:35rem;
}
// Don’t style button elements, since they’re often styled as links for
// accessible widgets. Use the .button class in components/button.
button {
......@@ -43,6 +63,7 @@ fieldset {
// partials/components/button.
input {
line-height: normal;
}
// input[type='button'] {}
......@@ -71,6 +92,7 @@ input {
label,
.label,
.uw-label{
display:block;
font-family: $form-label-font-family;
font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
......@@ -82,18 +104,27 @@ label,
}
.desription{
.desription,
.webform-element-description{
color:$form-description-color;
font-family: $form-font-family;
font-size: gesso-font-size(-1);
font-style: italic;
margin: .25rem 0;
}
// uw custon label css
.webform-client-form {
margin-top: 0.75rem;
}
//.required::after {
// content: "*";
//}
.form-required::after {
color:#e00;
content: "*";
display:inline-block;
font-family:gesso-font-family(system);
font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
margin-left:0.125rem;
}
.option {
display: inline;
......@@ -152,9 +183,7 @@ textarea {
border-top:1px solid gesso-color(ui, generic, background);
bottom: 0;
box-shadow: gesso-box-shadow(6);
display:block;
grid-template-columns:auto;
grid-template-rows:auto;
display:flex;
height:auto;
left: 0;
margin: 0;
......@@ -162,19 +191,19 @@ textarea {
position: fixed;
width: 100%;
z-index: gesso-z-index(overlay);
[data-drupal-selector="edit-preview-toggle"]{
order:10;
}
.button{
margin:0.25rem 0;
max-width:7rem;
}
@include medium {
.button{
margin-bottom:1rem ;
}
column-gap: 0.5rem;
display:grid;
grid-template-columns:8rem 8rem 8rem 12rem 10rem;
grid-template-rows:auto;
gap:$form-gap;
height:4rem;
row-gap: 1rem;
}
.form-item-toggle-content-preview {
......@@ -190,6 +219,18 @@ textarea {
}
}
.webform-submission-form{
.form-actions{
display:flex;
gap:1rem;
margin:0.25rem 0;
.button{
@include button();
height:inherit;
margin:inherit;
}
}
}
// custom form actions
.layout-region-node-footer__content .form-actions{
.button[data-drupal-selector="edit-cancel"]{
......
......@@ -7,13 +7,27 @@ $uw-input-box-shadow-focus: gesso-color(form, input, input-border) !default;
$uw-input-font-family: gesso-font-family(systemmedium) !default;
$uw-input-font-size: gesso-font-size(0) !default;
$uw-input-text-color: gesso-color(form, input, input-color) !default;
$uw-input-padding: rem(gesso-spacing(xs));
$uw-input-padding: 0.46667rem;
.uw-input,
.form-text{
.form-text,
.form-email,
.form-color,
.form-date,
.form-email,
.form-month,
.form-number,
.form-password,
.form-search,
.form-tel,
.form-text,
.form-textarea,
.form-time,
.form-url,
.form-week{
background-color:$uw-input-background-color;
border: 1px solid $uw-input-border-color;
border-radius: 3px;
......@@ -25,14 +39,81 @@ $uw-input-padding: rem(gesso-spacing(xs));
max-width:inherit;
padding: $uw-input-padding;
transition: border-color;
width: auto;
width: 100%;
&:focus {
border: 1px solid $uw-input-border-color-focus;
border: 1px solid $uw-input-border-color-focus !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 0 5px rgba(104,104,104,.7);
outline:$uw-input-border-color-focus;
}
&--submit {
@include button();
font-weight:200 !important;
}
// make the input after prefix be inline
}
.webform-has-field-prefix,
.webform-has-field-suffix,
.captcha {
.form-text{
width:auto !important;
}
}
.bef-toggle{
display:block;
margin:1rem 0;
}
.form-select{
background-color:$uw-input-background-color;
border: 1px solid $uw-input-border-color;
border-radius: 3px;
box-shadow: inset 0 1px 3px $uw-input-border-color;
box-sizing: border-box;
color: $uw-input-text-color;
font-family: $uw-input-font-family;
font-size: $uw-input-font-size;
padding: $uw-input-padding;
transition: border-color;
width: 100%;
.form-item-moderation-state-0-state &{
width:auto;
}
}
input[size="60"] {
max-width: 100%;
width: 100%;
}
// Autocomplete
/* stylelint-disable */
.js {
input {
&.form-autocomplete {
background-position: 99.5% center;
}
}
}
/* stylelint-enable */// Autocomplete ul li a.
.ui-autocomplete {
.ui-menu-item{
.ui-menu-item-wrapper,
a{
color:$uw-black !important;
display: block;
font-family:$uw-input-font-family !important;
margin-right:0.4rem;
text-decoration:none;
&:hover,
&:focus,
&:active{
background:gesso-brand('org-default', uw-gold, lvl1);
}
}
}
}
{% include '@base/02-html-elements/27-input/input.twig' with {
'type': type,
'value': value,
'classes': 'uw-input--submit'
} %}
\ No newline at end of file
'classes': classes,
} %}
......@@ -28,27 +28,22 @@
.entity-meta__header {
background-color: #fffbda;
}
// overlay popuup
.ui-dialog .ui-dialog-title {
font-family: gesso-font-family(condensedbook);
font-size: rem(gesso-font-size(4));
font-weight: 400;
}
.js-media-library-view {
background: gesso-color(form, fieldset, fieldset-background);
border: 1px solid #bfbfbf;
border-radius: 2px;
padding: rem(gesso-spacing(sm));
}
// button in popup
.ui-dialog-buttonpane {
box-shadow: gesso-box-shadow(6);
}
.ui-dialog {
// Reset the widths put from default size values.
input[size="60"],
......@@ -156,7 +151,6 @@
}
}
// Token dialog popup.
.token-tree-dialog {
font-family: $form-font-family;
......@@ -165,12 +159,10 @@
padding: rem(gesso-spacing(xs)) rem(gesso-spacing(sm));
}
}
// Makes the flex basis accomodate more characters.
.js .paragraph-type-title {
flex-basis: 35%;
}
.tabledrag-changed.warning {
color: #e00 !important;
}
......
......@@ -84,9 +84,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
gap:inherit;
padding: $card-padding;
width: 100%;
p:last-child {
margin-bottom: 0;
}
}
.card__content {
//background:$test-color-9;
......
......@@ -17,7 +17,7 @@ $details-font-family: gesso-font-family(primary);
border: 1px solid #bfbfbf;
border-bottom: 1px solid $card-accent-border-color;
border-radius: inherit;
box-shadow: gesso-box-shadow(1);
box-shadow: gesso-box-shadow(0);
margin: rem(gesso-spacing(md)) 0;
transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
width:100%;
......@@ -25,10 +25,10 @@ $details-font-family: gesso-font-family(primary);
color: gesso-brand(org-default,uw-black,'primary');
}
&:hover {
box-shadow: gesso-box-shadow(3);
box-shadow: gesso-box-shadow(1);
}
&:focus-within {
box-shadow: gesso-box-shadow(3);
box-shadow: gesso-box-shadow(1);
}
&:first-child{
margin-top: 0;
......@@ -126,6 +126,6 @@ $details-font-family: gesso-font-family(primary);
padding: 1rem;
.uw-input,
.form-text{
width:100% !important;
width:100%;
}
}
......@@ -7,6 +7,10 @@ $fieldset-background-color: gesso-color(form, fieldset, fieldset-background) !de
$fieldset-legend-background-color: gesso-color(form, border) !default;
fieldset,
.fieldset {
background:transparent;
&:not(.fieldgroup) {
background:$fieldset-background-color;
}
border: $fieldset-border-color solid 1px;
clear: both;
margin-bottom: rem(gesso-spacing(md));
......
......@@ -11,7 +11,9 @@ $form-text-size: gesso-base-font-size() !default;
.form-item {
margin: 0 0 rem(gesso-spacing(sm));
.form--inline .form-checkboxes &{
margin:inherit;
}
}
.form-item__label {
display: block;
......@@ -29,18 +31,18 @@ $form-text-size: gesso-base-font-size() !default;
// .form-item__legend {}
.form-item__description {
color: gesso-color(text, secondary);
font-size: rem(gesso-font-size(-1));
> :last-child {
margin-bottom: 0;
}
}
.form-item__required-marker::before {
content: '*';
}
//.form-item__description {
// color: gesso-color(text, secondary);
// font-size: rem(gesso-font-size(-1));
//
// > :last-child {
// margin-bottom: 0;
// }
//}
//
//.form-item__required-marker::before {
// content: '*';
//}
%form-item__box,
.form-item__color,
......@@ -57,20 +59,20 @@ $form-text-size: gesso-base-font-size() !default;
.form-item__time,
.form-item__url,
.form-item__week {
appearance: none;
background-color: $form-background-color;
border: 1px solid $form-border-color;
border-radius: 0;
display: inline-block;
font-size: rem($form-text-size);
height: rem(44px);
line-height: (22px / $form-text-size);
margin: 0.2em 0;
max-width: 100%;
padding: em(10px, $form-text-size) em(7px, $form-text-size);
transition-duration: gesso-duration(short);
transition-property: background-color, border;
transition-timing-function: gesso-easing(ease-in-out);
//appearance: none;
//background-color: $form-background-color;
//border: 1px solid $form-border-color;
//border-radius: 0;
//display: inline-block;
//font-size: rem($form-text-size);
//height: rem(44px);
//line-height: (22px / $form-text-size);
//margin: 0.2em 0;
//max-width: 100%;
//padding: em(10px, $form-text-size) em(7px, $form-text-size);
//transition-duration: gesso-duration(short);
//transition-property: background-color, border;
//transition-timing-function: gesso-easing(ease-in-out);
&:focus {
@include focus();
......
......@@ -35,7 +35,21 @@ $form-range-track-height: 10px !default;
width: 100%;
}
.form-item--range {
.form-item--range,
.form-type-range {
> label{
margin-bottom:gesso-spacing(md);
}
margin-bottom:gesso-spacing(xl);
output{
&[data-display="above"]{
}
&[data-display="below"]{
}
}
.form-range,
.form-item__range {
appearance: none;
background: transparent;
......@@ -108,7 +122,8 @@ $form-range-track-height: 10px !default;
}
}
&.is-full-width > .form-item__range {
&.is-full-width > .form-item__range,
&.is-full-width > .form-range{
width: 100%;
}
}
.uw-mailman {
padding: rem(gesso-spacing(sm)) 0;
width: 100%;
form{
@include uw-contained-width-reset();
width: 100%;
}
&__label {
display: block;
margin-bottom: rem(gesso-spacing(xs));
&--email {
font-family: gesso-font-family(condensedbook);
font-size:rem(gesso-font-size(3));
font-weight: gesso-font-weight(regular);
}
&__email {
display:grid;
gap:$form-gap;
grid-template-columns: auto 6rem;
@include medium{
grid-template-columns: auto 9rem;
}
}
&__servername {
text-align: center;
}
}
.uw-mailmain__email{
.uw-input--submit{
font-size:rem(gesso-font-size(0));
font-weight: gesso-font-weight(regular);
max-width:8.5rem;
}
}
......@@ -11,7 +11,8 @@
} %}
{% include '@base/02-html-elements/27-input/input--submit.twig' with {
'type': 'submit',
'value': 'Subscribe'
'value': 'Subscribe',
'classes': 'uw-input--submit button--medium'
} %}
</div>
</form>
......
......@@ -2,3 +2,4 @@ mailman:
server: 'lists.uwaterloo.ca (a.k.a. mailman.uwaterloo.ca)'
servername: 'uwweb'
uniqueid: '1111111'
classes: 'uw-input--submit button--medium'
......@@ -79,7 +79,7 @@ $pager-bp: 600px !default;
&:hover,