Commit 9cfb715d authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

css for wcms2 form look

parent 67f8d8fd
This diff is collapsed.
This diff is collapsed.
/**
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function (event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
}
})(jQuery, Drupal);
/**
* @file
*/
......@@ -47,76 +64,6 @@
* @file
*/
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.expandcollapse = {
attach: function (context, settings) {
$(document).ready(function () {
$('.uw-expand-collapse').each(function () {
// Get the id of the expand collapse.
var id = '#uw-expand-collapse-' + $(this).data('id');
// When the expand all button is clicked, expand all the items.
$(id + ' [data-type="expand-all"]').click(function () {
// Find each of the buttons, which are the titles and change
// aria-expanded and add class to show expanded.
$(id + ' .uw-expand-collapse__items button').each(function () {
$(this).attr('aria-expanded', true);
$(this).addClass('uw-expanded');
});
// Find each of the text and add css to display them.
$(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
$(this).css('display', 'block');
});
});
// When the collapse all button is clicked, collapse all the items.
$(id + ' [data-type="collapse-all"]').click(function () {
// Find each of the buttons, which are the titles and change
// aria-expanded and remove class to show collapsed.
$(id + ' .uw-expand-collapse__items button').each(function () {
$(this).attr('aria-expanded', true);
$(this).removeClass('uw-expanded');
});
// Find each of the text and add css to display them.
$(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
$(this).css('display', 'none');
});
});
// Step through each of the titles and add a click function.
$(id + ' .uw-expand-collapse__items button').click(function () {
// If this has an expanded class, remove it and change aria expanded to false.
// Otherwise add the expanded class and set aria-expanded to true.
if ($(this).hasClass('uw-expanded')) {
$(this).attr('aria-expanded', false);
$(this).removeClass('uw-expanded');
}
else {
$(this).attr('aria-expanded', true);
$(this).addClass('uw-expanded');
}
// Toggle the text to show/hide.
$(this).parent().parent().find('.uw-expand-collapse__text').toggle();
})
});
});
}
};
})(jQuery, Drupal);
/**
* @file
*/
......@@ -232,6 +179,76 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.expandcollapse = {
attach: function (context, settings) {
$(document).ready(function () {
$('.uw-expand-collapse').each(function () {
// Get the id of the expand collapse.
var id = '#uw-expand-collapse-' + $(this).data('id');
// When the expand all button is clicked, expand all the items.
$(id + ' [data-type="expand-all"]').click(function () {
// Find each of the buttons, which are the titles and change
// aria-expanded and add class to show expanded.
$(id + ' .uw-expand-collapse__items button').each(function () {
$(this).attr('aria-expanded', true);
$(this).addClass('uw-expanded');
});
// Find each of the text and add css to display them.
$(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
$(this).css('display', 'block');
});
});
// When the collapse all button is clicked, collapse all the items.
$(id + ' [data-type="collapse-all"]').click(function () {
// Find each of the buttons, which are the titles and change
// aria-expanded and remove class to show collapsed.
$(id + ' .uw-expand-collapse__items button').each(function () {
$(this).attr('aria-expanded', true);
$(this).removeClass('uw-expanded');
});
// Find each of the text and add css to display them.
$(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
$(this).css('display', 'none');
});
});
// Step through each of the titles and add a click function.
$(id + ' .uw-expand-collapse__items button').click(function () {
// If this has an expanded class, remove it and change aria expanded to false.
// Otherwise add the expanded class and set aria-expanded to true.
if ($(this).hasClass('uw-expanded')) {
$(this).attr('aria-expanded', false);
$(this).removeClass('uw-expanded');
}
else {
$(this).attr('aria-expanded', true);
$(this).addClass('uw-expanded');
}
// Toggle the text to show/hide.
$(this).parent().parent().find('.uw-expand-collapse__text').toggle();
})
});
});
}
};
})(jQuery, Drupal);
/**
* @file
*/
......
......@@ -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{
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:1rem;
height:4rem;
row-gap: 1rem;
}
.form-item-toggle-content-preview {
......@@ -189,7 +218,18 @@ textarea {
}
}
}
.webform-submission-form{
.form-actions{
display:flex;
gap:1rem;
margin:2rem 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,9 +39,9 @@ $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;
}
......@@ -35,4 +49,36 @@ $uw-input-padding: rem(gesso-spacing(xs));
@include button();
}
// make the input after prefix be inline
}
.webform-has-field-prefix,
.webform-has-field-suffix{
.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%;
//}
......@@ -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;
......
......@@ -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));
......
......@@ -29,18 +29,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 +57,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();
......
......@@ -79,7 +79,7 @@ $pager-bp: 600px !default;
&:hover,
&:focus {
background-color: $pager-background-color-hover;
color: $pager-link-color-active;
color: #fff;
}
&:active {
......
Supports Markdown
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