Skip to content
Snippets Groups Projects
Commit dfc61533 authored by M Miller's avatar M Miller
Browse files

update it-osu-pl-drupal

parent 6b5be2d7
No related branches found
No related tags found
2 merge requests!3Theme in progress.,!2Feature/documentation
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 702 additions and 578 deletions
composer.json
+ 3
− 3
View file @ dfc61533
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
"composer/installers": "^1.7", "composer/installers": "^1.7",
"oomphinc/composer-installers-extender": "^1.1", "oomphinc/composer-installers-extender": "^1.1",
"drupal/bamboo_twig": "^5.0", "drupal/bamboo_twig": "^5.0",
"drupal/components": "^1.1" "drupal/components": "^1.1",
"it-osu-web/it-osu-pl-drupal": "^1.0"
}, },
"require-dev": { "require-dev": {
"drupal/twig_vardumper": "^1.2", "drupal/twig_vardumper": "^1.2"
"it-osu-web/it-osu-pl-drupal": "^1.0@beta"
}, },
"extra": { "extra": {
"installer-types": [ "installer-types": [
......
composer.lock
+ 547
− 319
View file @ dfc61533
This diff is collapsed.
libraries/it-osu-pl-drupal/00-base/global/01-colors/_color-vars.scss
+ 5
− 8
View file @ dfc61533
// Neutrals. // Neutrals.
$clear: rgba(0, 0, 0, 0); $clear: rgba(0, 0, 0, 0);
$white: #fff; $white: #fff;
$near-white: #f2f2f2; $near-white: #efefef;
$gray-light: #ccc; $gray-light: #c2c2c2;
$gray: #666; $gray: #666;
$gray-dark: #3c3c3c; $gray-dark: #333;
$near-black: #202022; $near-black: #1e1e1e;
$black: #000; $black: #000;
// Colors. // Colors.
$red: #b00; $red: #b00;
$red-dark: #830000; $red-dark: #830000;
$orange: #d65828; $orange: #d65828;
$orange-dark: #ab4620; $orange-dark: #b54a22;
$green: #909738; $green: #909738;
$green-dark: #656927; $green-dark: #656927;
$teal: #26686d; $teal: #26686d;
$purple: #442369; $purple: #442369;
$blue: #667b96; $blue: #667b96;
$violet: #851e5e; $violet: #851e5e;
// Other.
$gray-border: #ddd;
libraries/it-osu-pl-drupal/00-base/global/01-colors/_colors-used.scss 0 → 100644
+ 4
− 0
View file @ dfc61533
$gray-border: #d2d2d2;
$color-link: $red;
$color-link--hover: $teal;
\ No newline at end of file
libraries/it-osu-pl-drupal/00-base/global/02-typography/typography.twig
+ 6
− 40
View file @ dfc61533
<div class="sg-typography"> <div class="sg-typography">
{% for item in items %} {% for item in items %}
<div class="sg-typography__group">
<div class="sg-typography__group"> {% for weight in item.weights %}
<div class="sg-info"> <p style="font-family: {{ item.value }}; font-style: {{ item.style }}; font-weight: {{ weight }}">{{ item.name }} {{ weight }}</p>
<span style="font-weight: 100; font-family: {{item.value}}">{{item.name}} 100</span> {% endfor %}
</div> </div>
<div class="sg-info">
<span style="font-weight: 300; font-family: {{item.value}}">{{item.name}} 300</span>
</div>
<div class="sg-info">
<span style="font-weight: 400; font-family: {{item.value}}">{{item.name}} 400</span>
</div>
<div class="sg-info">
<span style="font-weight: 600; font-family: {{item.value}}">{{item.name}} 600</span>
</div>
<div class="sg-info">
<span style="font-weight: 700; font-family: {{item.value}}">{{item.name}} 700</span>
</div>
</div>
<div class="sg-typography__group">
<div class="sg-info">
<span style="font-weight: 100; font-style: italic; font-family: {{item.value}}">{{item.name}} 100 italic</span>
</div>
<div class="sg-info">
<span style="font-weight: 300; font-style: italic; font-family: {{item.value}}">{{item.name}} 300 italic</span>
</div>
<div class="sg-info">
<span style="font-weight: 400; font-style: italic; font-family: {{item.value}}">{{item.name}} 400 italic</span>
</div>
<div class="sg-info">
<span style="font-weight: 600; font-style: italic; font-family: {{item.value}}">{{item.name}} 600 italic</span>
</div>
<div class="sg-info">
<span style="font-weight: 700; font-style: italic; font-family: {{item.value}}">{{item.name}} 700 italic</span>
</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
{% if meta %}
<p> <small>{{ meta.description }}</small> </p>
{% endif %}
libraries/it-osu-pl-drupal/00-base/mixins/_00-mixins.scss 0 → 100644
+ 13
− 0
View file @ dfc61533
// General Mixins
/// Mixin - Clearfix.
/// Adds clearfix based on http://bourbon.io/docs/#clearfix
/// use example = @include cleafix
@mixin clearfix {
&::after {
clear: both;
content: '';
display: table;
}
}
libraries/it-osu-pl-drupal/01-atoms/01-links/link/_link.scss → libraries/it-osu-pl-drupal/00-base/mixins/_01-links.scss
+ 1
− 20
View file @ dfc61533
/// Link
$color-link: $red;
$color-link--hover: $teal;
@mixin link { @mixin link {
color: $color-link; color: $color-link;
text-decoration: underline; text-decoration: underline;
...@@ -15,19 +11,4 @@ $color-link--hover: $teal; ...@@ -15,19 +11,4 @@ $color-link--hover: $teal;
outline: 1px dotted $color-link--hover; outline: 1px dotted $color-link--hover;
outline-offset: 2px; outline-offset: 2px;
} }
} }
\ No newline at end of file
a {
@include link;
}
span.ext {
margin-left: 4px;
}
//fixes extlink buttons in Chrome
a.button {
span.link-content {
float: left;
}
}
libraries/it-osu-pl-drupal/00-base/mixins/_02-buttons.scss 0 → 100644
+ 47
− 0
View file @ dfc61533
@mixin button-std($bg: $red, $color: $white) {
background-color: $bg;
color: $color;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
text-decoration: none;
padding: 11px 16px 10px;
margin-bottom: 16px;
display: inline-block;
position: relative;
cursor: pointer;
&:active {
background-color: darken($bg, 5%) !important;
}
&:hover {
background-color: lighten($bg, 3%);
}
&:focus {
background-color: lighten($bg, 3%);
outline: 2px dotted $near-black;
outline-offset: 0;
}
}
@mixin button-rev($bg: $white, $color: $red) {
background-color: $bg;
color: $color;
border: 1px solid $color;
padding: 11px 16px 10px;
&:active {
background-color: darken($color, 5%) !important;
}
&:hover {
background-color: $color;
}
&:focus {
background-color: $color;
}
}
libraries/it-osu-pl-drupal/00-base/mixins/_03-lists.scss 0 → 100644
+ 6
− 0
View file @ dfc61533
// Reset list item defaults when no margin, padding, list styles needed
@mixin list-reset {
list-style: none;
margin: 0;
padding: 0;
}
libraries/it-osu-pl-drupal/00-base/mixins/_04-layout.scss 0 → 100644
+ 11
− 0
View file @ dfc61533
// Use the breakout mixin to extend a background color or image edge-to-edge.
// Even when a parent container has the 'grid-container' class.
@mixin breakout() {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
// Use when internal elements of a breakout should respect the grid-container alignment.
@mixin breakout-inner() {
@extend .grid-container;
}
libraries/it-osu-pl-drupal/00-base/utils/_01-variables.scss
+ 3
− 0
View file @ dfc61533
...@@ -22,6 +22,9 @@ $space-y-quarter: $space-y / 4; ...@@ -22,6 +22,9 @@ $space-y-quarter: $space-y / 4;
// Horizontal spacing (x). // Horizontal spacing (x).
$space-x: rem-calc(26); $space-x: rem-calc(26);
// More space.
$space-x-double: $space-x * 2;
// Less space. // Less space.
$space-x-half: $space-x / 2; $space-x-half: $space-x / 2;
$space-x-third: $space-x / 3; $space-x-third: $space-x / 3;
......
libraries/it-osu-pl-drupal/00-base/utils/_03-mixins.scss deleted 100644 → 0
+ 0
− 83
View file @ 6b5be2d7
/////////////////////
// General Mixins (put specific ones in component files where applicable)
/// Mixin - Clearfix.
/// Adds clearfix based on http://bourbon.io/docs/#clearfix
/// use example = @include cleafix
@mixin clearfix {
&::after {
clear: both;
content: '';
display: table;
}
}
/// Mixin - list-reset
/// Reset list item defaults when no margin, padding, list styles needed
@mixin list-reset {
list-style: none;
margin: 0;
padding: 0;
}
/// Mixin - With Icon
/// Precede Text with SVG icon
@mixin with-icon {
background-size: cover;
content: '';
display: inline-block;
margin-right: 0.1em;
padding: 0.8em;
}
/// Mixin - Wrapper
/// Outer container mixin for large screens
@mixin wrapper(
$container-max-width: $max-width,
$outer-container-break: $small,
$v-margin: 0,
$v-padding: 0,
$h-padding: 4%,
$h-padding-large: $h-padding
) {
max-width: #{$container-max-width};
width: 100%;
margin: #{$v-margin} auto;
padding: #{$v-padding} #{$h-padding};
@include breakpoint($outer-container-break) {
padding: #{$v-padding} #{$h-padding-large};
}
@include breakpoint($container-max-width) {
padding-left: calc(
#{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2))
);
padding-right: calc(
#{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2))
);
}
}
/// Use the breakout mixin for elements that should be edge-to-edge
/// Even when a parent container uses the wrapper mixin
@mixin breakout($v-padding: 5rem) {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding-left: calc(#{$v-padding} + calc(-50vw + 50%));
padding-right: calc(#{$v-padding} + calc(-50vw + 50%));
}
/// Mixin - Standard Margin
@mixin margin {
margin-bottom: 1em;
}
@mixin no-bottom {
margin-bottom: 0;
}
@mixin short-bottom {
margin-bottom: 0.25em;
}
libraries/it-osu-pl-drupal/00-base/utils/_pl-base.scss
+ 5
− 0
View file @ dfc61533
...@@ -80,6 +80,10 @@ ...@@ -80,6 +80,10 @@
padding: 1em 0.25em; padding: 1em 0.25em;
min-width: 40%; min-width: 40%;
p {
font-size: rem-calc(28);
}
.sg-info { .sg-info {
padding: 10px; padding: 10px;
font-size: 30px; font-size: 30px;
...@@ -87,6 +91,7 @@ ...@@ -87,6 +91,7 @@
} }
} }
#viewall-base-mixins,
#viewall-base-utils { #viewall-base-utils {
display: none; display: none;
} }
libraries/it-osu-pl-drupal/01-atoms/00-text/00-headings/_heading.twig
+ 1
− 1
View file @ dfc61533
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<h{{ heading_level }}> <h{{ heading_level }}>
{% if heading_url %} {% if heading_url %}
{% include "@atoms/01-links/link/link.twig" with { {% include "@atoms/01-links/00-link/link.twig" with {
"link_content": heading, "link_content": heading,
"link_url": heading_url, "link_url": heading_url,
"link_attributes": heading_link_attributes, "link_attributes": heading_link_attributes,
......
libraries/it-osu-pl-drupal/01-atoms/00-text/02-blockquote/_blockquote.scss
+ 9
− 35
View file @ dfc61533
.blockquote { blockquote {
border-left: solid 3px $gray-light;
margin: 2em 0 2em 2em;
padding-left: 1em;
padding-right: 3em;
p {
line-height: 1.6;
}
}
blockquote:not(.pull-quote) {
@extend .blockquote;
}
.pull-quote {
border: 0;
padding: 2em;
padding-right: 4em;
margin: 2em 0;
position: relative;
}
.pull-quote__icon {
color: $gray-light;
position: absolute;
top: 0.8em;
}
.pull-quote__text {
font-family: $capita; font-family: $capita;
font-style: italic; font-size: rem-calc(17);
font-weight: 300; font-weight: 300;
font-size: 115%; font-style: italic;
padding: 0; margin: $space-y-double 0 $space-y-double $space-x;
padding-left: 3.5em;
p { cite {
line-height: 1.6; font-family: $proxima;
font-weight: 600;
font-style: normal;
padding-top: $space-y-quarter;
} }
} }
libraries/it-osu-pl-drupal/01-atoms/00-text/02-blockquote/blockquote.twig
+ 3
− 36
View file @ dfc61533
{# <blockquote>
/** {{ blockquote_content }}
* Available variables: <cite>{{ blockquote_citation }}</cite>
* - blockquote_base_class - the base classname
* - blockquote_modifiers - array of modifiers to add to the base classname
* - blockquote_content - the content of the blockquote (typically text)
*
* Available blocks:
* - blockquote_content - used to replace the content of the blockquote with something other than text
* for example: A formatted text field in Drupal
*/
#}
{% set blockquote_base_class = blockquote_base_class|default('blockquote') %}
{% set classes_array = [blockquote_base_class] %}
{% if blockquote_modifiers is defined %}
{% for blockquote_modifier in blockquote_modifiers %}
{% set classes_array = classes_array|merge(["#{blockquote_base_class}--#{blockquote_modifier}"]) %}
{% endfor %}
{% set blockquote_classes = classes_array|join(' ') %}
{% else %}
{% set blockquote_classes = blockquote_base_class %}
{% endif %}
<blockquote class="{{ blockquote_classes }}">
{% block blockquote_content %}
{% if blockquote_base_class == 'pull-quote' %}
<div class="pull-quote__icon"><i class="fas fa-quote-left fa-3x"></i></div>
<div class="pull-quote__text"><p>{{ blockquote_content }}</p></div>
{% else %}
<p>{{ blockquote_content }}</p>
{% endif %}
{% endblock %}
</blockquote> </blockquote>
libraries/it-osu-pl-drupal/01-atoms/00-text/04-paragraph/_paragraph.scss
+ 2
− 7
View file @ dfc61533
p,
.paragraph {
line-height: 1.4;
}
.paragraph--center { .paragraph--center {
text-align: center; text-align: center;
width: 85%; width: 90%;
margin-right: auto !important; margin-right: auto !important;
margin-left: auto !important; margin-left: auto !important;
} }
...@@ -15,5 +10,5 @@ p, ...@@ -15,5 +10,5 @@ p,
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-size: rem-calc(20); font-size: rem-calc(20);
line-height: 1.75; line-height: 1.7;
} }
libraries/it-osu-pl-drupal/01-atoms/00-text/05-text/00-inline-elements.twig
+ 22
− 22
View file @ dfc61533
...@@ -5,45 +5,45 @@ ...@@ -5,45 +5,45 @@
*/ */
#} #}
<div class="text"> <div class="text">
<p class="paragraph"><a class="link" href="#">This is a text link</a></p> <p><a class="link" href="#">This is a text link</a></p>
<p class="paragraph"><strong>Strong is used to indicate strong importance</strong></p> <p><strong>Strong is used to indicate strong importance</strong></p>
<p class="paragraph"><em>This text has added emphasis</em></p> <p><em>This text has added emphasis</em></p>
<p class="paragraph">The <b>b element</b> is stylistically different text from normal text, without any special importance</p> <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p class="paragraph">The <i>i element</i> is text that is set off from the normal text</p> <p>The <i>i element</i> is text that is set off from the normal text</p>
<p class="paragraph">The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p> <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p class="paragraph"><del>This text is deleted</del> and <ins>This text is inserted</ins></p> <p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p class="paragraph"><s>This text has a strikethrough</s></p> <p><s>This text has a strikethrough</s></p>
<p class="paragraph">Superscript<sup>®</sup></p> <p>Superscript<sup>®</sup></p>
<p class="paragraph">Subscript for things like H<sub>2</sub>O</p> <p>Subscript for things like H<sub>2</sub>O</p>
<p class="paragraph"><small>This text is small for fine print, etc.</small></p> <p><small>This text is small for fine print, etc.</small></p>
<p class="paragraph">Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p> <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p class="paragraph">Keybord input: <kbd>Cmd</kbd></p> <p>Keybord input: <kbd>Cmd</kbd></p>
<p class="paragraph"><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p> <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p class="paragraph"><cite>This is a citation</cite></p> <p><cite>This is a citation</cite></p>
<p class="paragraph">The <dfn>dfn element</dfn> indicates a definition.</p> <p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p class="paragraph">The <mark>mark element</mark> indicates a highlight</p> <p>The <mark>mark element</mark> indicates a highlight</p>
<p class="paragraph"><code>This is what inline code looks like.</code></p> <p><code>This is what inline code looks like.</code></p>
<p class="paragraph"><samp>This is sample output from a computer program</samp></p> <p><samp>This is sample output from a computer program</samp></p>
<p class="paragraph">The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p> <p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
<p class="paragraph">The span class "pipe" can be used to separate elements such as, Element 1 <span class="pipe"> | </span> Element 2. <p>The span class "pipe" can be used to separate elements such as, Element 1 <span class="pipe"> | </span> Element 2.
</div><!--end .text--> </div>
libraries/it-osu-pl-drupal/01-atoms/00-text/05-text/_text.scss
+ 0
− 4
View file @ dfc61533
...@@ -3,7 +3,3 @@ ...@@ -3,7 +3,3 @@
color: $red; color: $red;
font-weight: 700; font-weight: 700;
} }
code {
font-size: 0.875em;
}
libraries/it-osu-pl-drupal/01-atoms/01-links/00-link/_link.scss 0 → 100644
+ 14
− 0
View file @ dfc61533
a {
@include link;
}
// span.ext {
// margin-left: 4px;
// }
// //fixes extlink buttons in Chrome
// a.button {
// span.link-content {
// float: left;
// }
// }
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