mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Compare commits
14 Commits
c434d0843f
...
feature/wy
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
38e298a70e | ||
|
|
e8701712b6 | ||
|
|
92ba51bef1 | ||
|
|
ebbb20d0e3 | ||
|
|
fae0c2a6dc | ||
|
|
2c498c88a0 | ||
|
|
67dd991e97 | ||
|
|
a6016cfe57 | ||
|
|
c00c2d346f | ||
|
|
7c056ed809 | ||
|
|
c9eab8bf49 | ||
|
|
7395a431fe | ||
|
|
08df2d9ac4 | ||
|
|
40c0c30672 |
185
assets/styles/components/_wysiwyg.scss
Normal file
185
assets/styles/components/_wysiwyg.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -53,11 +53,3 @@ body {
|
||||
color: $color-selection-text;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-link;
|
||||
|
||||
@include u-hocus {
|
||||
color: $color-link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,6 +57,7 @@
|
||||
@import "components/text";
|
||||
@import "components/button";
|
||||
@import "components/form";
|
||||
@import "components/wysiwyg";
|
||||
|
||||
// Utilities
|
||||
// ==========================================================================
|
||||
|
||||
@@ -49,8 +49,8 @@ $color-link-focus: color(primary);
|
||||
$color-link-hover: darken(color(primary), 10%);
|
||||
|
||||
// Selection
|
||||
$color-selection-text: color(darkest);
|
||||
$color-selection-background: color(lightest);
|
||||
$color-selection-text: color(lightest);
|
||||
$color-selection-background: color(darkest);
|
||||
|
||||
// Socials
|
||||
$color-facebook: #3B5998;
|
||||
|
||||
Reference in New Issue
Block a user