Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add default wysiwyg file #174

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Add default wysiwyg file #174

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
40c0c30
Add default wysiwyg file
LucasBgt Mar 27, 2024
08df2d9
Remove blockquote line-height property
LucasBgt Mar 28, 2024
7395a43
Remove display and color properties on `<a>` tag
LucasBgt Mar 28, 2024
c9eab8b
Remove specific line-height for ul, ol and p
LucasBgt Mar 28, 2024
7c056ed
Reset caption above table
LucasBgt Mar 28, 2024
c00c2d3
Remove iframe default aspect-ratio
LucasBgt Mar 28, 2024
a6016cf
Remove irrevelant blockquote default style
LucasBgt Mar 28, 2024
67dd991
Reset default browser styles for ul and ol
LucasBgt Mar 28, 2024
2c498c8
Remove style properties for th, td
LucasBgt Mar 28, 2024
fae0c2a
Set generic spacing rule + Move link color settings into wysiwyg file
LucasBgt Mar 28, 2024
ebbb20d
Set iframe full width if no width & height specific html attributes
LucasBgt Mar 28, 2024
92ba51b
Reset custom list markers
LucasBgt Mar 28, 2024
e870171
Horizontally align iframe
LucasBgt Mar 28, 2024
38e298a
Merge branch 'master' into feature/wysiwyg
devenini Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 48 additions & 226 deletions assets/styles/components/_wysiwyg.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@
// ==========================================================================

.c-wysiwyg {

// ==========================================================================
// Margins
// ==========================================================================
& > * + * {
margin-bottom: size-clamp('md');
}
Comment on lines +10 to +12
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
& > * + * {
margin-bottom: size-clamp('md');
}
& > * + * {
margin-top: size-clamp('md');
}


&-first-element,
>:first-child {
margin-top: 0 !important;
Expand All @@ -24,139 +29,25 @@
// @include text;
// @include body-large;

// ==========================================================================
// Paragraph
// ==========================================================================
p,
iframe,
img,
table {
margin-bottom: rem(30px);
& + p,
& + ul,
& + ol {
margin-top: 1em;
margin-bottom: rem(30px);
}

& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6 {
margin-top: rem(60px);
}
}

ul, ol, p {
line-height: 1.5;
}


// ==========================================================================
// Headings
// ==========================================================================
b, strong {

}

h1,h2,h3,h4,h5,h6 {
// @include heading;
font-weight: normal;
margin-top: 1.5em;
margin-bottom: 1em;
}

h1 {
// @include heading-h3;
margin-top: size-clamp('lg');
margin-bottom: rem(40px);

& + p,
& + ul,
& + ol,
& + table,
& + figure {
margin-top: rem(40px);
}

& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6 {
margin-top: size-clamp('md');
}
}

h2 {
// @include heading-h3;
margin-top: size-clamp('lg');
margin-bottom: size-clamp('md');

& + p,
& + ul,
& + ol,
& + table,
& + figure {
margin-top: size-clamp('md');
}

& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6 {
margin-top: size-clamp('md');
}
}

h3 {
// @include heading-h4;
margin-top: size-clamp('lg');
margin-bottom: size-clamp('md');

& + p,
& + ul,
& + ol,
& + table,
& + figure {
margin-top: size-clamp('md');
}

& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6 {
margin-top: size-clamp('md');
}
}

h4,
h5,
h6 {
margin-top: size-clamp('lg');
margin-bottom: size-clamp('sm');

& + p,
& + ul,
& + ol,
& + table,
& + figure {
margin-top: size-clamp('sm');
}

& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6 {
margin-top: size-clamp('sm');
}
}

h4 {
Expand All @@ -171,57 +62,45 @@
// @include heading-h6;
}


// ==========================================================================
// Lists
// ==========================================================================
ul,
ol {
position: relative;
margin: size-clamp('md') 0;
list-style: none;
padding-left: 0;

>li {
padding-left: rem(30px);
> li {
position: relative;
padding-left: 1.5em;
}
}

ul {
& > li {
position: relative;

& + li {
margin-top: 0;
}

> li {
&::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 8px;
top: calc(50% - 3px);
width: 6px;
height: 6px;
background-color: currentColor;
border-radius: 100%;
border-radius: 50%;
}
}
}

ol {
counter-reset: counter;

& > li {
> li {
counter-increment: counter;
position: relative;


& + li {
margin-top: 0;
}

&::before {
content: counter(counter);
position: absolute;
left: 0;
content: counter(counter);
}
}
}
Expand All @@ -230,14 +109,16 @@
// Link
// ==========================================================================
a {
display: inline;
text-decoration: underline;
text-decoration-thickness: 1px;
color: currentColor;
word-wrap: break-word;
color: $color-link;

&:hover {
text-decoration-thickness: 2px;
&:focus-visible {
color: $color-link-focus;
}

@media (hover: hover) {
&:hover {
color: $color-link-hover;
}
}
}

Expand All @@ -246,66 +127,36 @@
// ==========================================================================
img {
width: 100%;
margin: size-clamp('lg') 0;
}

// ==========================================================================
// iFrame
// ==========================================================================
iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: size-clamp('lg') 0;
display: block;
margin-left: auto;
margin-right: auto;

&:not([width]) {
width: 100%;
}

&:not([height]) {
height: auto;
}
}

// ==========================================================================
// Table
// ==========================================================================
table {
width: 100%;
margin: size-clamp('lg') 0;

& + p,
& + ul,
& + ol {
margin-top: 1em;
}

& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6 {
margin-top: 1em;
}
}

thead {

}

th {
vertical-align: top;
text-align: left;
padding: 20px 10px;
border-bottom: solid 1px currentColor;
}

tr {
}

td {
border-bottom: solid 1px currentColor;
padding: 10px;
vertical-align: top;
}

caption {
padding: 10px;
caption-side: bottom;
font-style: italic;
// @include text;
// @include body-small;
margin: 1em 0;
}

// ==========================================================================
Expand All @@ -314,50 +165,21 @@
blockquote {
// @include heading;
// @include heading-h3;
quotes: "“" "”" "’" "’";
padding: 0;
color: currentColor;
line-height: 1;
padding: 0;
padding-top: rem(80px);
margin-left: 0;
margin-top: size-clamp('lg');
margin-bottom: size-clamp('lg');
position: relative;

&::before {
content:'“';
position: absolute;
top: 0;
left: 0;
width: 100%;
color: currentColor;
font-weight: $font-weight-normal;

@media (min-width: $from-md) {
font-size: rem(140px);
p {
&::before {
content: open-quote;
}

@media (max-width: $to-md) {
font-size: rem(90px);
&::after {
content: close-quote;
}
}

* {
line-height: 1;
}

& + p {
padding-top: 0;
}

& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6,
& + blockquote {
margin-top: 0;
}
}
}
Loading