Skip to content

GitLab

U
uw_wcms_gesso
Commit 7b460491 authored by m26lebla's avatar m26lebla
Browse files
Options

css for the presentation of paragraphs in layout builder dialog

parent 5cc9dcca
Hide whitespace changes
Inline Side-by-side
Showing with 516 additions and 135 deletions
css/styles.css
View file @ 7b460491
......@@ -708,7 +708,6 @@ optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0; }
button,
......@@ -1146,7 +1145,9 @@ thead th {
page-break-inside: avoid; } }
form {
font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; }
font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 14.22224px;
font-weight: 400; }
button {
overflow: visible; }
......@@ -1163,6 +1164,8 @@ fieldset {
padding: 0;
position: relative;
top: 0; }
fieldset:not(.fieldgroup) {
padding: 1rem; }
input {
line-height: normal; }
......@@ -1185,9 +1188,6 @@ label,
.webform-client-form {
margin-top: 0.75rem; }
.required::after {
content: "*"; }
.option {
display: inline;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
......@@ -1898,6 +1898,32 @@ svg:not(:root) {
padding: 0;
width: 100%; }
.layout.uw-contained-width {
margin-left: auto;
margin-right: auto;
max-width: 63.1875rem;
padding: 0 16px; }
@media (min-width: 80rem) {
.layout.uw-contained-width {
padding-left: 0;
padding-right: 0; } }
.layout--uwtwocol {
display: grid; }
.layout--uwtwocol .layout__region--first {
grid-column: 1 / 2; }
.layout--uwtwocol .layout__region--second {
grid-column: 2 / 3; }
.layout--uwtwocol.larger-left {
grid-template-columns: 67% 33%; }
.layout--uwtwocol.larger-right {
grid-template-columns: 33% 67%; }
.layout--uwtwocol.even-split {
grid-template-columns: 50% 50%; }
.l-media {
display: flex;
flex-direction: column; }
......@@ -2061,7 +2087,6 @@ svg:not(:root) {
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
.layout-builder-form,
.node-form,
.admin-list,
.js-media-library-view,
......@@ -2078,7 +2103,6 @@ form {
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
.layout-builder-form,
.node-form,
.admin-list,
.js-media-library-view,
......@@ -2092,7 +2116,6 @@ form {
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
.layout-builder-form,
.node-form,
.admin-list,
.js-media-library-view,
......@@ -2105,9 +2128,10 @@ form {
.entity-meta__header {
background-color: #fffbda; }
.ui-dialog-titlebar {
.ui-dialog .ui-dialog-title {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 20.256px; }
font-size: 1.602rem;
font-weight: 400; }
.js-media-library-view {
background: #fafafa;
......@@ -2115,14 +2139,13 @@ form {
border-radius: 2px;
padding: 1rem; }
.media-library-widget__toggle-weight {
top: 2rem; }
.ui-dialog-buttonpane {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) ,0 0 0 rgba(0, 0, 0, 0.3); }
.ui-dialog label {
font-size: 18px; }
.ui-dialog input[size="60"],
.ui-dialog input[size="120"] {
max-width: 100%;
width: 100%; }
.ui-dialog .media-library-widget .fieldset-wrapper {
display: block; }
......@@ -2134,6 +2157,264 @@ form {
.ui-dialog .views-display-link {
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
.ui-dialog form {
margin-left: auto;
margin-right: auto;
max-width: 63.1875rem;
padding: 0 16px;
padding: 0 !important; }
@media (min-width: 80rem) {
.ui-dialog form {
padding-left: 0;
padding-right: 0; } }
.ui-dialog .field--widget-entity-reference-paragraphs {
padding: 1rem; }
.ui-dialog .field--widget-entity-reference-paragraphs .field--widget-entity-reference-paragraphs {
padding: 0 !important; }
.ui-dialog .field--name-field-uw-ec-items {
background: inherit;
padding: inherit; }
.ui-dialog .field--widget-entity-reference-paragraphs td {
background: inherit;
border: 1px solid #ccc;
padding: 1rem; }
.ui-dialog .field--widget-entity-reference-paragraphs .field-label {
border-width: 1px 1px 0; }
.ui-dialog .field--widget-entity-reference-paragraphs .field-label .label {
font-size: 18px; }
.ui-dialog .paragraph-type--uw-para-fact-figure .tabledrag-handle .handle {
margin: 0; }
.ui-dialog .draggable .tabledrag-handle {
cursor: move;
float: inherit;
height: inherit;
margin-left: inherit;
overflow: inherit;
text-decoration: none; }
.ui-dialog .draggable .tabledrag-handle .handle {
float: left;
height: 2rem;
padding: 0;
width: 2rem; }
.ui-dialog .tabledrag-hide {
border-width: 1px 1px 0;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 18px;
font-weight: 400;
margin: 0;
padding: 0 1rem;
text-align: center; }
.ui-dialog .odd .form-item,
.ui-dialog .even .form-item {
margin-bottom: 0 !important; }
.ui-dialog .field-multiple-table {
min-width: inherit; }
.ui-dialog .media-library-item--grid {
padding-bottom: 2.5rem; }
.token-tree-dialog {
font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; }
.token-tree-dialog table td {
padding: 0.5rem 1rem; }
.js .paragraph-type-title {
flex-basis: 35%; }
.tabledrag-changed.warning {
color: #e00 !important; }
.layout-builder-form .button,
.form-actions .button, .layout-builder-form
button,
.form-actions
button {
font-size: 0.79rem;
height: 2.5rem;
line-height: 2.75;
max-width: inherit;
padding: 0.25rem 0.25rem; }
.layout-builder-form .button:hover, .layout-builder-form .button:focus,
.form-actions .button:hover,
.form-actions .button:focus, .layout-builder-form
button:hover, .layout-builder-form
button:focus,
.form-actions
button:hover,
.form-actions
button:focus {
padding: 0.25rem 0.25rem; }
.media-library-content .button,
.paragraphs-actions .button,
.paragraph-type-top .button,
.paragraphs-dropbutton-wrapper .button, .media-library-content
button,
.paragraphs-actions
button,
.paragraph-type-top
button,
.paragraphs-dropbutton-wrapper
button {
font-size: 0.79rem;
font-weight: 200;
height: inherit;
max-width: 12rem;
padding: 0.5rem 1rem;
width: 100%; }
.media-library-content .button:hover, .media-library-content .button:focus,
.paragraphs-actions .button:hover,
.paragraphs-actions .button:focus,
.paragraph-type-top .button:hover,
.paragraph-type-top .button:focus,
.paragraphs-dropbutton-wrapper .button:hover,
.paragraphs-dropbutton-wrapper .button:focus, .media-library-content
button:hover, .media-library-content
button:focus,
.paragraphs-actions
button:hover,
.paragraphs-actions
button:focus,
.paragraph-type-top
button:hover,
.paragraph-type-top
button:focus,
.paragraphs-dropbutton-wrapper
button:hover,
.paragraphs-dropbutton-wrapper
button:focus {
padding: 0.5rem 1rem; }
.ui-dialog .button, .ui-dialog
button {
margin: 0.5rem 0 0 0; }
.ui-dialog-buttonset.form-actions .button, .ui-dialog-buttonset.form-actions
button {
max-width: 10rem; }
.user-login-form .form-actions .button, .user-login-form .form-actions
button {
background-color: #757575;
background-image: none;
border: 0;
border-radius: 0;
box-shadow: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 18px;
font-weight: 600;
height: auto;
letter-spacing: 0.055rem;
line-height: 1.45;
max-width: 18.125rem;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: 100%; }
.user-login-form .form-actions .button:visited, .user-login-form .form-actions
button:visited {
color: #fff; }
.user-login-form .form-actions .button:hover, .user-login-form .form-actions .button:focus, .user-login-form .form-actions
button:hover, .user-login-form .form-actions
button:focus {
background-color: #eee;
background-image: none;
border: 0;
box-shadow: none !important;
color: #4e4e4e;
outline: none !important;
text-decoration: none; }
.user-login-form .form-actions .button:active, .user-login-form .form-actions
button:active {
background-color: #757575;
background-image: none;
color: #fff;
outline: none !important; }
.user-login-form .form-actions .button[disabled], .user-login-form .form-actions
button[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
.tabledrag-toggle-weight-wrapper .button, .tabledrag-toggle-weight-wrapper
button {
font-size: 12.64px;
font-weight: 200;
max-width: 10rem;
padding: 0;
text-align: inherit;
width: inherit; }
.tabledrag-toggle-weight-wrapper .button:hover, .tabledrag-toggle-weight-wrapper .button:focus, .tabledrag-toggle-weight-wrapper
button:hover, .tabledrag-toggle-weight-wrapper
button:focus {
background: none;
font-size: 12.64px;
font-weight: 200;
max-width: 10rem;
padding: 0;
text-align: inherit;
width: inherit; }
.media-library-widget__toggle-weight {
font-size: 12.64px !important;
font-weight: 200;
max-width: 10rem;
padding: 0;
text-align: inherit;
width: inherit; }
.media-library-widget__toggle-weight:hover, .media-library-widget__toggle-weight:focus {
background: none;
font-size: 12.64px;
font-weight: 200;
max-width: 10rem;
padding: 0;
text-align: inherit;
width: inherit; }
.layouts-dashboards-3 .drow > div,
.layouts-dashboards-2 .drow > div,
.layouts-dashboards-1 .drow > div {
box-shadow: none; }
.uw-admin-label {
background-color: #757575 !important;
color: #fff;
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-size: 12.64px;
left: -1px;
padding: 0.2rem 1rem;
position: absolute;
top: -1.5rem !important; }
.layout-builder__region {
padding: 0.25rem; }
.contextual .trigger {
color: #f03;
width: inherit; }
.contextual .trigger:focus {
color: #25ffcc;
width: inherit; }
/* stylelint-disable-next-line selector-no-qualifying-type */
ul.toolbar-menu {
font-size: 0.79rem; }
......@@ -2301,81 +2582,6 @@ button {
color: #A2A2A2;
cursor: default;
pointer-events: none; }
.layout-builder-form .button,
.form-actions .button, .layout-builder-form
button,
.form-actions
button {
font-size: 0.79rem;
height: 2.5rem;
line-height: 2.75;
max-width: inherit;
padding: 0.25rem 0.25rem; }
.layout-builder-form .button:hover, .layout-builder-form .button:focus,
.form-actions .button:hover,
.form-actions .button:focus, .layout-builder-form
button:hover, .layout-builder-form
button:focus,
.form-actions
button:hover,
.form-actions
button:focus {
padding: 0.25rem 0.25rem; }
.ui-dialog-buttonset.form-actions .button, .ui-dialog-buttonset.form-actions
button {
max-width: 10rem; }
.user-login-form .form-actions .button, .user-login-form .form-actions
button {
background-color: #757575;
background-image: none;
border: 0;
border-radius: 0;
box-shadow: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 18px;
font-weight: 600;
height: auto;
letter-spacing: 0.055rem;
line-height: 1.45;
max-width: 18.125rem;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: 100%; }
.user-login-form .form-actions .button:visited, .user-login-form .form-actions
button:visited {
color: #fff; }
.user-login-form .form-actions .button:hover, .user-login-form .form-actions .button:focus, .user-login-form .form-actions
button:hover, .user-login-form .form-actions
button:focus {
background-color: #eee;
background-image: none;
border: 0;
box-shadow: none !important;
color: #4e4e4e;
outline: none !important;
text-decoration: none; }
.user-login-form .form-actions .button:active, .user-login-form .form-actions
button:active {
background-color: #757575;
background-image: none;
color: #fff;
outline: none !important; }
.user-login-form .form-actions .button[disabled], .user-login-form .form-actions
button[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
.button--danger {
background-color: #e31c3d;
......
source/_patterns/02-base/01-normalize/_normalize.scss
View file @ 7b460491
......@@ -57,7 +57,6 @@ optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
......
source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
View file @ 7b460491
......@@ -7,6 +7,8 @@ $form-input-font-family: gesso-font-family(system) !default;
form{
font-family:$form-font-family;
font-size: gesso-font-size(-1);
font-weight:400;
}
// Don’t style button elements, since they’re often styled as links for
// accessible widgets. Use the .button class in components/button.
......@@ -29,6 +31,9 @@ fieldset {
position: relative;
top:0;
}
&:not(.fieldgroup) {
padding:rem(gesso-spacing(sm));
}
}
// form {}
......@@ -85,9 +90,9 @@ label,
margin-top: 0.75rem;
}
.required::after {
content: "*";
}
//.required::after {
// content: "*";
//}
.option {
display: inline;
......
source/_patterns/02-base/02-html-elements/27-input/_input.scss
View file @ 7b460491
......@@ -35,4 +35,4 @@ $uw-input-padding: rem(gesso-spacing(xs));
@include button();
}
}
\ No newline at end of file
}
source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
View file @ 7b460491
......@@ -6,7 +6,6 @@
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
.layout-builder-form,
.node-form,
.admin-list,
.js-media-library-view,
......@@ -20,6 +19,7 @@ form {
padding:rem(gesso-spacing(sm)) 0;
}
}
// righ column on edit
.entity-meta__header{
background-color:#fffbda;
......@@ -28,9 +28,10 @@ form {
// overlay popuup
.ui-dialog-titlebar{
.ui-dialog .ui-dialog-title{
font-family:gesso-font-family(condensedbook);
font-size: gesso-font-size(2);
font-size: rem(gesso-font-size(4));
font-weight:400;
}
.js-media-library-view{
background: gesso-color(form, fieldset, fieldset-background);
......@@ -38,27 +39,20 @@ form {
border-radius: 2px;
padding:rem(gesso-spacing(sm));
}
.views-element-container{
}
.media-library-widget__toggle-weight{
top:2rem;
}
// button in popup
.ui-dialog-buttonpane{
box-shadow: gesso-box-shadow(6);
}
.ui-dialog{
label {
font-size: gesso-font-size(1);
}
//.fieldset-wrapper{
// display:flex;
// .form-type-select{
// flex:1;
// }
//}
// Reset the widths put from default size values.
input[size="60"],
input[size="120"]{
max-width: 100%;
width: 100%;
}
.media-library-widget{
.fieldset-wrapper{
display:block;
......@@ -71,4 +65,204 @@ form {
.views-display-link{
font-family: $uw-input-font-family;
}
form{
@include uw-contained-width;
padding:0 !important;
}
.field--widget-entity-reference-paragraphs{
padding:1rem;
.field--widget-entity-reference-paragraphs{
padding:0 !important;
}
}
.field--name-field-uw-ec-items{
background:inherit;
padding:inherit;
}
// Adjusting the presentation of the tables.
.field--widget-entity-reference-paragraphs td{
background:inherit;
border:1px solid gesso-grayscale('gray-3');
padding:rem(gesso-spacing(sm));
}
.field--widget-entity-reference-paragraphs .field-label{
border-width:1px 1px 0;
.label{
font-size: gesso-font-size(1);
}
}
// Adjusting the drag handles ion the draggable tables.
.paragraph-type--uw-para-fact-figure .tabledrag-handle .handle {
margin:0;
}
.draggable .tabledrag-handle{
cursor: move;
float:inherit;
height:inherit;
margin-left: inherit;
overflow: inherit;
text-decoration: none;
.handle{
float:left;
height:2rem;
padding:0;
width:2rem;
}
}
.tabledrag-hide{
border-width: 1px 1px 0;
font-family:gesso-font-family(condensedbook);
font-size: gesso-font-size(1);
font-weight: 400;
margin:0;
padding:0 rem(gesso-spacing(sm));
text-align:center;
}
// Removes gap at bottom of editor in dialogue
.odd .form-item,
.even .form-item{
margin-bottom:0 !important;
}
// Resets the min width.
.field-multiple-table{
min-width:inherit;
}