Skip to content
Snippets Groups Projects
Commit 2dd49e08 authored by Eric Bremner's avatar Eric Bremner
Browse files

Merge branch 'feature/ISTWCMS-5631-m26lebla-menu-ohana' into '1.0.x' 

ISTWCMS-5631: presentation layer css for menu

See merge request !16
parents b8ce4e91 d412c61b
No related branches found
No related tags found
1 merge request!16ISTWCMS-5631: presentation layer css for menu
Hide whitespace changes
Inline Side-by-side
Showing
with 91 additions and 126 deletions
src/patterns/01-core/elements/_blockquote.scss
+ 1
− 9
View file @ 2dd49e08
......@@ -2,15 +2,7 @@
// Blockquote styles.
:where(blockquote) {
//border-inline-start-width: var(--border-size-3);
//display: grid;
//gap: var(--size-3);
//margin: 0 0 var(--size-5);
//max-inline-size: var(--size-content-2);
//padding-block: var(--size-3);
//padding-inline: var(--size-4);
* + & {
* + & {
margin-top: var(--size-5);
}
......
src/patterns/01-core/elements/_definition-list.scss
+ 0
− 1
View file @ 2dd49e08
......@@ -3,7 +3,6 @@
:where(dd) {
margin-bottom: var(--size-1);
}
:where(dt) {
......
src/patterns/01-core/elements/_details.scss
+ 9
− 10
View file @ 2dd49e08
......@@ -7,20 +7,20 @@
@include uw-no-breakout();
background: var(--gray-2);
border: var(--size-xs) solid #bfbfbf;
border-bottom:var(--size-xs) solid var(--uw-black-primary);
border-bottom: var(--size-xs) solid var(--uw-black-primary);
border-radius: var(--radius-1);
box-shadow: var(--shadow-1);
color: var(--uw-black-primary);
font-family: var(--font-serif);
margin: var(--size-3) 0;
transition: box-shadow 300ms ease;
width:100%;
width: 100%;
&[open] > .seven-details__summary {
color: var(--uw-black-primary);
}
[open] > & {
@include svg-background(mobile-arrow-up);
width:100%;
width: 100%;
}
&[open] > summary {
......@@ -55,7 +55,7 @@
border-radius: var(--radius-1);
color: var(--uw-black-primary);
cursor: pointer;
display:block;
display: block;
font-family: var(--font-book);
font-size: var(--font-size-00);
font-weight: var(--font-weight-3300);
......@@ -67,11 +67,11 @@
touch-action: manipulation;
[open] > & {
@include svg-background(mobile-arrow-up);
width:100%;
width: 100%;
}
&:hover,
&:focus{
color:var(--uw-black-primary);
color: var(--uw-black-primary);
}
&:first-child{
margin-top: 0;
......@@ -98,7 +98,7 @@
margin-bottom: 0;
}
.uw-label{
margin-bottom:0;
margin-bottom: 0;
margin-top: var(--size-2);
}
}
......@@ -107,7 +107,6 @@
color: var(--uw-black-primary);
font-size: var(--font-size-00);
margin-bottom: var(--size-2);
> :last-child {
margin-bottom: 0;
}
......@@ -115,7 +114,7 @@
.node--type{
&-uw-ct-contact{
.details {
max-width:600px;
max-width: 600px;
}
}
}
......@@ -123,6 +122,6 @@
padding: var(--size-2);
.uw-input,
.form-text{
width:100%;
width: 100%;
}
}
src/patterns/01-core/elements/_fieldset.scss
+ 8
− 11
View file @ 2dd49e08
......@@ -3,10 +3,10 @@
:where(fieldset),
.fieldset {
background:transparent;
background: transparent;
border: var(--gray-3) solid var(--size-xs);
clear: both;
margin-bottom:var(--size-4);
margin-bottom: var(--size-4);
padding: var(--size-2);
position: relative;
legend {
......@@ -26,14 +26,13 @@
background: var(--gray-1);
padding: var(--size-2);
> legend{
border-radius: 2px;
font-family: var(--font-condensedbook);
margin: var(--size-2) 0;
min-width:0;
padding:0;
min-width: 0;
padding: 0;
position: relative;
top:0;
top: 0;
}
}
......@@ -48,15 +47,13 @@
> legend {
margin-bottom: 0.7rem;
padding-top: var(--size-2);
}
}
> legend {
font-weight:400;
font-weight: 400;
margin-bottom: 0.7rem;
padding-top:var(--size-2);
padding-top: var(--size-2);
}
}
.fieldset-wrapper {
......@@ -68,7 +65,7 @@
}
}
.captcha {
margin: rem(gesso-spacing(md)) 0;
margin: var(--size-3) 0;
}
.layout-builder-configure-section {
......
src/patterns/01-core/elements/_figure.scss
+ 3
− 3
View file @ 2dd49e08
// @file
// Figure element styles.
:where(figure) {
margin: 0 0 var(--size-2);
}
:where(figure) {
margin: 0 0 var(--size-2);
}
src/patterns/01-core/elements/_form.scss
+ 19
− 21
View file @ 2dd49e08
......@@ -3,14 +3,14 @@
@use '../../01-core' as *;
:where(form) {
font-family: var(--font-book);
font-size: var(--font-size-0);
@media(min-width: $screen-md) {
font-size: var(--font-size-00);
}
font-weight:400;
}
:where(form) {
font-family: var(--font-book);
font-size: var(--font-size-0);
@media(min-width: $screen-md) {
font-size: var(--font-size-00);
}
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.
button {
......@@ -28,36 +28,34 @@ button {
[data-drupal-selector="edit-moderation-state-wrapper"]{
background-color:#ffebc5;
background-color: #ffebc5;
padding: var(--size-2);
.form-item-moderation-state-0-current{
font-style:italic;
font-style: italic;
label{
font-size: var(--font-size-0);
font-style:normal;
margin-bottom:0;
font-style: normal;
margin-bottom: 0;
}
}
}
// Login screen making width 35rem.
.user-login-form{
margin:0;
max-width:35rem;
margin: 0;
max-width: 35rem;
}
// uw custon label css
.webform-client-form {
margin-top:var(--size-105);
margin-top: var(--size-105);
}
.form-required::after {
color:#e00;
color: #e00;
content: "*";
display:inline-block;
display: inline-block;
font-family: var(--font-system);
font-size: var(--font-size-2);
font-weight:300;
font-size: var(--font-size-2);
font-weight: 300;
margin-left: var(--size-sm);
}
......
src/patterns/01-core/elements/_html.scss
+ 0
− 2
View file @ 2dd49e08
......@@ -6,7 +6,6 @@
--caret-color: var(--blue-6);
--scrollbar-color: var(--gray-7);
--text-0: var(--gray-7);
accent-color: var(--accent-color);
background-color: white;
block-size: 100%;
......@@ -15,7 +14,6 @@
min-height: 100%;
scrollbar-color: var(--scrollbar-color) transparent;
text-size-adjust: 100%;
@media screen and (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
......
src/patterns/01-core/elements/_inline-elements.scss
+ 1
− 1
View file @ 2dd49e08
......@@ -132,7 +132,7 @@
}
:where(small) {
font-size: max(.5em, var(--font-size-0));
font-size: max(0.5em, var(--font-size-0));
max-inline-size: var(--size-content-1);
}
......
src/patterns/01-core/elements/_input.scss
+ 3
− 6
View file @ 2dd49e08
......@@ -8,16 +8,15 @@ $uw-input-padding: 0.46667rem;
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-family:var(--font-systemmedium);
font-family: var(--font-systemmedium);
font-size: var(--font-size-0);
font: inherit;
letter-spacing: inherit;
padding: $uw-input-padding;
max-width:inherit;
max-width: inherit;
touch-action: manipulation;
&:focus {
border: var(--size-xs) solid var(--gray-5) !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 0 5px rgba(104,104,104,.7);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
outline: var(--gray-5);
}
}
......@@ -52,7 +51,6 @@ $uw-input-padding: 0.46667rem;
:where(input[type="file"])::-webkit-file-upload-button {
color: inherit;
font-size: inherit;
font: inherit;
letter-spacing: inherit;
}
......@@ -72,7 +70,6 @@ $uw-input-padding: 0.46667rem;
:where(input[type="search"]) {
appearance: textfield;
outline-offset: -2px;
&::-webkit-search-decoration {
appearance: none;
}
......
src/patterns/01-core/elements/_label.scss
+ 6
− 7
View file @ 2dd49e08
// @file
// Label element styles.
:where(label) {
font-family: var(--font-condensedbook);
}
:where(label) {
font-family: var(--font-condensedbook);
}
label,
.label,
.uw-label{
display:block;
display: block;
font-family: var(--font-condensedbook);
font-size: var(--font-size-2);
font-weight:normal;
font-weight: normal;
form &{
margin-bottom: var(--size-1);
}
abbr {
display: inline;
font-size: var(--font-size-1);
font-size: var(--font-size-1);
}
}
src/patterns/01-core/elements/_list-item.scss
+ 0
− 2
View file @ 2dd49e08
......@@ -2,10 +2,8 @@
// List item styles.
:where(li) {
font-size: var(--font-size-0);
margin-bottom: var(--size-1);
padding-inline-start: var(--size-1);
&:last-child {
margin-bottom: 0;
}
......
src/patterns/01-core/elements/_menu.scss
+ 3
− 3
View file @ 2dd49e08
// @file
// Menu element styles.
:where(menu) {
}
//:where(menu) {
//
//}
src/patterns/01-core/elements/_option.scss
+ 9
− 9
View file @ 2dd49e08
// @file
// Options element styles.
:where(option) {
display: inline;
font-family:gesso-font-family(book);
font-size: gesso-font-size(0);
font-weight: gesso-font-weight(regular);
letter-spacing:inherit;
margin-left: 0.2rem;
padding-left:0.25rem;
}
:where(option) {
display: inline;
font-family: var(--font-book);
font-size: var(--font-size-0);
font-weight: var(--font-weight-400);
letter-spacing: inherit;
margin-left: 0.2rem;
padding-left: 0.25rem;
}
:where(optgroup) {
font-family: inherit;
......
src/patterns/01-core/elements/_ordered-list.scss
+ 5
− 6
View file @ 2dd49e08
......@@ -2,13 +2,12 @@
// Ordered list styles.
:where(ol) {
font-size: var(--font-size-0);
padding-inline-start: var(--size-4);
margin: 0 0 var(--size-2);
ol{
list-style-type: lower-alpha;
margin: (var(--size-2) / 2) 0 0;
li ol {
li ol {
list-style-type: lower-roman;
}
}
......@@ -16,25 +15,25 @@
.lower-alpha {
list-style-type: lower-alpha;
li ol {
li ol {
list-style-type: lower-alpha;
}
}
.upper-alpha{
list-style-type: upper-alpha;
li ol {
li ol {
list-style-type: upper-alpha;
}
}
.lower-roman {
list-style-type: lower-roman;
li ol {
li ol {
list-style-type: lower-roman;
}
}
.upper-roman{
list-style-type: upper-roman;
li ol {
li ol {
list-style-type: upper-roman;
}
}
......
src/patterns/01-core/elements/_select.scss
+ 1
− 1
View file @ 2dd49e08
......@@ -17,7 +17,7 @@
letter-spacing: inherit;
//padding-block: .75ch;
//padding-inline: 1.25ch 0;
padding-right:10px; // LTR
padding-right: 10px; // LTR
touch-action: manipulation;
&:-moz-focusring {
color: transparent;
......
src/patterns/01-core/elements/_table.scss
+ 4
− 4
View file @ 2dd49e08
......@@ -4,9 +4,8 @@
:where(caption) {
color: var(--gray-5);
font-size: var(--font-size-0);
font-style:italic;
font-style: italic;
padding: var(--size-1);
}
:where(table) {
......@@ -31,7 +30,7 @@ tfoot {
th {
background-color: var(--gray-2);
border: var(--size-xs) solid var(--gray-3);
font-style:italic;
font-style: italic;
padding: var(--size-1);
text-align: left;
&[scope="row"] {
......@@ -48,8 +47,9 @@ thead {
td {
background-color: var(--uw-white);
border: var(--size-xs) solid var(--gray-3);
padding: var(--size-1)
padding: var(--size-1);
}
:where(thead) {
@media print {
display: table-header-group;
......
src/patterns/01-core/elements/_textarea.scss
+ 1
− 2
View file @ 2dd49e08
......@@ -6,9 +6,8 @@
color: inherit;
cursor: pointer;
font-size: inherit;
font: inherit;
letter-spacing: inherit;
overflow:auto;
overflow: auto;
padding-block: var(--size-1);
padding-inline: var(--size-2);
resize: block;
......
src/patterns/01-core/elements/_unordered-list.scss
+ 0
− 7
View file @ 2dd49e08
......@@ -2,8 +2,6 @@
// Unordered list styles.
:where(ul) {
font-size: var(--font-size-0);
list-style-type: disc;
margin: 0 0 var(--size-2);
padding: 0 0 0 var(--size-4); // LTR
......@@ -12,16 +10,13 @@
margin: (var(--size-2) / 2) 0 0;
li > ul {
list-style-type: disc;
}
}
//padding-inline-start: var(--size-4);
}
.disc {
list-style: disc;
ul {
list-style-type: disc;
li > ul {
list-style-type: disc;
}
......@@ -31,7 +26,6 @@
list-style: square;
ul {
list-style-type: square;
li > ul {
list-style-type: square;
}
......@@ -41,7 +35,6 @@
list-style-type: circle;
ul {
list-style-type: circle;
li > ul {
list-style-type: circle;
}
......
src/patterns/01-core/mixins/_button.scss
+ 17
− 19
View file @ 2dd49e08
......@@ -27,10 +27,10 @@ $button-font-size: var(--font-size-1) !default;
$font-size: $button-font-size
) {
background-color: $color-background;
background-image:$button-background-image;
background-image: $button-background-image;
border: 0;
border-radius: $border-radius;
box-shadow:none;
box-shadow: none;
color: $color-text;
cursor: pointer;
display: inline-block;
......@@ -39,16 +39,16 @@ $button-font-size: var(--font-size-1) !default;
font-weight: var(--font-weight-300);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
max-width:18.125rem;
max-width: 18.125rem;
padding: var(--size-2) var(--size-4);
text-align: center;
text-decoration: none;
text-shadow:$button-text-shadow;
text-transform:uppercase;
text-shadow: $button-text-shadow;
text-transform: uppercase;
transition: background 200ms ease-in;
vertical-align: top;
white-space: normal;
width:100%;
width: 100%;
&:visited {
color: $color-text;
}
......@@ -56,25 +56,24 @@ $button-font-size: var(--font-size-1) !default;
&:hover,
&:focus {
background-color: $color-background-hover;
background-image:$button-background-image;
background-image: $button-background-image;
border: 0;
box-shadow: none !important;
color: $color-text-hover;
outline: none !important;
text-decoration: none;
}
&:active {
background-color: $color-background-active;
background-image:$button-background-image;
background-image: $button-background-image;
color: $color-text-active;
outline: none !important;
}
&[disabled] {
background-color: $color-background-disabled;
background-image:$button-background-image;
background-image: $button-background-image;
color: $color-text-disabled;
cursor: default;
pointer-events: none;
......@@ -95,15 +94,15 @@ $button-font-size: var(--font-size-1) !default;
$font-size: inherit
) {
background-color: $color-background;
background-image:$button-background-image;
background-image: $button-background-image;
border: 0;
border-radius: $border-radius;
box-shadow:none;
box-shadow: none;
color: $color-text;
cursor: pointer;
display: inherit;
font-family: inherit;
font-size: $font-size;
font-size: $font-size;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
......@@ -111,8 +110,8 @@ $button-font-size: var(--font-size-1) !default;
padding: 0;
text-align: inherit;
text-decoration: inherit;
text-shadow:inherit;
text-transform:inherit;
text-shadow: inherit;
text-transform: inherit;
transition: inherit;
vertical-align: inherit;
white-space: inherit;
......@@ -124,25 +123,24 @@ $button-font-size: var(--font-size-1) !default;
&:hover,
&:focus {
background-color: $color-background-hover;
background-image:$button-background-image;
background-image: $button-background-image;
border: 0;
box-shadow: none !important;
color: $color-text-hover;
outline: none !important;
text-decoration: none;
}
&:active {
background-color: $color-background-active;
background-image:$button-background-image;
background-image: $button-background-image;
color: $color-text-active;
outline: none !important;
}
&[disabled] {
background-color: $color-background-disabled;
background-image:$button-background-image;
background-image: $button-background-image;
color: $color-text-disabled;
cursor: default;
pointer-events: none;
......
src/patterns/01-core/mixins/_headings.scss
+ 1
− 2
View file @ 2dd49e08
......@@ -13,7 +13,6 @@
orphans: 3;
page-break-after: avoid;
widows: 3;
&::after {
display: inline-block;
}
......@@ -33,7 +32,7 @@
@mixin heading-1 {
@include heading-base;
line-height: var(--font-lineheight-1);
font-size: var( --font-size-8);
font-size: var(--font-size-8);
}
@mixin heading-2 {
......
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