1
0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00

14 Commits

Author SHA1 Message Date
Deven Caron
38e298a70e Merge branch 'master' into feature/wysiwyg 2024-04-03 08:34:12 -04:00
Lucas Bigot
e8701712b6 Horizontally align iframe 2024-03-28 11:17:17 -04:00
Lucas Bigot
92ba51bef1 Reset custom list markers 2024-03-28 11:00:07 -04:00
Lucas Bigot
ebbb20d0e3 Set iframe full width if no width & height specific html attributes 2024-03-28 10:51:31 -04:00
Lucas Bigot
fae0c2a6dc Set generic spacing rule + Move link color settings into wysiwyg file 2024-03-28 10:32:53 -04:00
Lucas Bigot
2c498c88a0 Remove style properties for th, td
Remove empty style for thead and tr
2024-03-27 21:15:16 -04:00
Lucas Bigot
67dd991e97 Reset default browser styles for ul and ol 2024-03-27 21:04:45 -04:00
Lucas Bigot
a6016cfe57 Remove irrevelant blockquote default style 2024-03-27 20:55:22 -04:00
Lucas Bigot
c00c2d346f Remove iframe default aspect-ratio 2024-03-27 20:43:15 -04:00
Lucas Bigot
7c056ed809 Reset caption above table 2024-03-27 20:38:33 -04:00
Lucas Bigot
c9eab8bf49 Remove specific line-height for ul, ol and p 2024-03-27 20:37:43 -04:00
Lucas Bigot
7395a431fe Remove display and color properties on <a> tag 2024-03-27 20:36:56 -04:00
Lucas Bigot
08df2d9ac4 Remove blockquote line-height property 2024-03-27 20:34:16 -04:00
Lucas Bigot
40c0c30672 Add default wysiwyg file 2024-03-27 18:05:06 -04:00
4 changed files with 188 additions and 10 deletions

View File

@@ -0,0 +1,185 @@
// ==========================================================================
// Components / Wysiwyg
// ==========================================================================
.c-wysiwyg {
// ==========================================================================
// Margins
// ==========================================================================
& > * + * {
margin-bottom: size-clamp('md');
}
&-first-element,
>:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
&-last-element,
>:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
// ==========================================================================
// Default
// ==========================================================================
// @include text;
// @include body-large;
// ==========================================================================
// Headings
// ==========================================================================
h1,h2,h3,h4,h5,h6 {
// @include heading;
margin-top: 1.5em;
margin-bottom: 1em;
}
h1 {
// @include heading-h3;
}
h2 {
// @include heading-h3;
}
h3 {
// @include heading-h4;
}
h4 {
// @include heading-h5;
}
h5 {
// @include heading-h6;
}
h6 {
// @include heading-h6;
}
// ==========================================================================
// Lists
// ==========================================================================
ul,
ol {
list-style: none;
padding-left: 0;
> li {
position: relative;
padding-left: 1.5em;
}
}
ul {
> li {
&::before {
content: "";
position: absolute;
left: 0;
top: calc(50% - 3px);
width: 6px;
height: 6px;
background-color: currentColor;
border-radius: 50%;
}
}
}
ol {
counter-reset: counter;
> li {
counter-increment: counter;
&::before {
content: counter(counter);
position: absolute;
left: 0;
}
}
}
// ==========================================================================
// Link
// ==========================================================================
a {
color: $color-link;
&:focus-visible {
color: $color-link-focus;
}
@media (hover: hover) {
&:hover {
color: $color-link-hover;
}
}
}
// ==========================================================================
// Image
// ==========================================================================
img {
width: 100%;
}
// ==========================================================================
// iFrame
// ==========================================================================
iframe {
display: block;
margin-left: auto;
margin-right: auto;
&:not([width]) {
width: 100%;
}
&:not([height]) {
height: auto;
}
}
// ==========================================================================
// Table
// ==========================================================================
table {
width: 100%;
}
caption {
// @include text;
// @include body-small;
margin: 1em 0;
}
// ==========================================================================
// Blockquote
// ==========================================================================
blockquote {
// @include heading;
// @include heading-h3;
quotes: "" "" "" "";
padding: 0;
p {
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
& + p {
padding-top: 0;
}
}
}

View File

@@ -53,11 +53,3 @@ body {
color: $color-selection-text; color: $color-selection-text;
text-shadow: none; text-shadow: none;
} }
a {
color: $color-link;
@include u-hocus {
color: $color-link-hover;
}
}

View File

@@ -57,6 +57,7 @@
@import "components/text"; @import "components/text";
@import "components/button"; @import "components/button";
@import "components/form"; @import "components/form";
@import "components/wysiwyg";
// Utilities // Utilities
// ========================================================================== // ==========================================================================

View File

@@ -49,8 +49,8 @@ $color-link-focus: color(primary);
$color-link-hover: darken(color(primary), 10%); $color-link-hover: darken(color(primary), 10%);
// Selection // Selection
$color-selection-text: color(darkest); $color-selection-text: color(lightest);
$color-selection-background: color(lightest); $color-selection-background: color(darkest);
// Socials // Socials
$color-facebook: #3B5998; $color-facebook: #3B5998;