Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
WCMS
uw_wcms_gesso
Commits
989b96b8
Commit
989b96b8
authored
Sep 21, 2021
by
Martin Leblanc
Committed by
Kevin Paxman
Oct 08, 2021
Browse files
additional css for form range and css/yml for the mailman form
parent
9cfb715d
Changes
15
Expand all
Hide whitespace changes
Inline
Side-by-side
css/styles.css
View file @
989b96b8
This diff is collapsed.
Click to expand it.
css/styles.min.css
View file @
989b96b8
This diff is collapsed.
Click to expand it.
js/component_scripts.min.js
View file @
989b96b8
/**
* @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
*/
...
...
@@ -64,6 +47,76 @@
* @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
*/
...
...
@@ -179,76 +232,6 @@
};
})(
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
*/
...
...
source/_patterns/00-config/01-mixins/_mixins.button.scss
View file @
989b96b8
...
...
@@ -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
;
...
...
source/_patterns/00-config/01-mixins/_mixins.uw.scss
View file @
989b96b8
...
...
@@ -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
{
...
...
source/_patterns/00-config/_design-tokens.artifact.scss
View file @
989b96b8
...
...
@@ -503,4 +503,4 @@ $gesso: (
xxl
:
96px
,
)
,
gutter-width
:
40px
,
);
\ No newline at end of file
);
source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
View file @
989b96b8
...
...
@@ -5,7 +5,7 @@ $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
);
...
...
@@ -202,7 +202,7 @@ textarea {
.button
{
margin-bottom
:
1rem
;
}
gap
:
1rem
;
gap
:
$form-gap
;
height
:
4rem
;
}
...
...
source/_patterns/02-base/02-html-elements/27-input/_input.scss
View file @
989b96b8
...
...
@@ -47,7 +47,7 @@ $uw-input-padding: 0.46667rem;
}
&
--submit
{
@include
button
();
font-weight
:
200
!
important
;
}
// make the input after prefix be inline
...
...
@@ -78,7 +78,7 @@ $uw-input-padding: 0.46667rem;
width
:auto
;
}
}
//
input[size="60"] {
//
max-width: 100%;
//
width: 100%;
//
}
input
[
size
=
"60"
]
{
max-width
:
100%
;
width
:
100%
;
}
source/_patterns/02-base/02-html-elements/27-input/input--submit.twig
View file @
989b96b8
{%
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
,
}
%}
source/_patterns/04-components/form-item/_form-item.scss
View file @
989b96b8
...
...
@@ -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
;
...
...
source/_patterns/04-components/form-item/form-item--range/_form-item--range.scss
View file @
989b96b8
...
...
@@ -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%
;
}
}
source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss
View file @
989b96b8
.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
;
}
}
source/_patterns/04-components/mailman-subscription/mailman-subscription.twig
View file @
989b96b8
...
...
@@ -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>
...
...
source/_patterns/04-components/mailman-subscription/mailman-subscription.yml
View file @
989b96b8
...
...
@@ -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'
source/_patterns/04-components/view/view-filter/_view-filter.scss
View file @
989b96b8
...
...
@@ -21,6 +21,7 @@
margin-right
:
0
.25rem
;
}
form
{
width
:
100%
;
ul
,
li
{
list-style
:
none
;
margin
:
0
;
...
...
@@ -31,11 +32,12 @@
font-size
:gesso-font-size
(
-1
)
;
font-weight
:
200
;
letter-spacing
:inherit
;
padding-left
:
0
.25rem
;
padding-left
:
gesso-spacing
(
sm
)
;
}
width
:
100%
;
.uw-input
,
.form-text
,
select
{
width
:
inherit
;
width
:
100%
;
}
.button
,
.image-button
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment