<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 2.4rem;">Basic Button Styles</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Root class: <code class="fractal-code frctl-class-demo__class-name">o-btn</code></div>
<div class="frctl-section__entry">
<button class="o-btn">Default Button</button>
</div>
<div class="frctl-class-demo__text">Span Class: <code class="fractal-code frctl-class-demo__class-name">o-btn__icon</code></div>
<div class="frctl-section__entry">
<button class="o-btn">
Default Button with Icon
<span class="o-btn__icon" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__line" d="M0 8L20 8" stroke="black" />
<path class="u-ct-stroke u-cta-arrow__angle" d="M13 1L20 8L13 15" stroke="black" />
</svg>
</span>
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--expanding-arrow</code></div>
<div class="frctl-section__entry">
<button class="o-btn">
Expanding Arrow
<span class="o-btn__icon o-btn--expanding-arrow" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</button>
<p style="margin-top: 20px; font-size: 1.2rem;">Use only with the <code>cta-expanding-arrow</code> icon.</p>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--expanding-arrow</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--expanding-arrow">
<span class="o-btn__icon-left" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
Expanding Arrow Left
</button>
<p style="margin-top: 20px; font-size: 1.2rem;">Use only with the <code>cta-expanding-arrow</code> icon.</p>
</div>
</div>
</div>
<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 1.2rem;">Button Color Theme Styles</p>
<p class="f-text--small" style="margin-bottom: 2.4rem;">These classes rely on color theme css variables.</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--text-dark</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--text-dark">
Text in Dark Color Theme
<span class="o-btn__icon" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__line" d="M0 8L20 8" stroke="black" />
<path class="u-ct-stroke u-cta-arrow__angle" d="M13 1L20 8L13 15" stroke="black" />
</svg>
</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary</code></div>
<div class="frctl-section__entry">
<button href="#" class="o-btn o-btn--primary">Primary Button</button>
<p style="margin-top: 20px; font-size: 1.2rem;">This takes on the dark color of the current color theme.</p>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary-light</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary-light">Primary Button</button>
<p style="margin-top: 20px; font-size: 1.2rem;">This takes on the light color of the current color theme.</p>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary-inverse</code></div>
<div class="frctl-section__entry" style="background-color: var(--ct-dark); padding: 2rem;">
<button class="o-btn o-btn--primary-inverse">Primary Button</button>
<p style="margin-top: 20px; font-size: 1.2rem; color: var(--ct-text-on-dark)">Use for button on dark theme background.</p>
</div>
<div class="frctl-class-demo__text">Span Class: <code class="fractal-code frctl-class-demo__class-name">o-btn__icon</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary o-btn--expanding-arrow">
Button with Icon
<span class="o-btn__icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</button>
</div>
<div class="frctl-class-demo__text">Span Class: <code class="fractal-code frctl-class-demo__class-name">o-btn__icon-left</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary o-btn--expanding-arrow">
<span class="o-btn__icon-left" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
Button with Icon Left
</button>
</div>
</div>
</div>
<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 1.2rem;">Color Theme Buttons</p>
<p class="f-text--small" style="margin-bottom: 2.4rem;">These classes use specific color theme styles, rather than relying on the color theme css variables.</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--ocean</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--ocean">
Button Ocean Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--reef</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--reef">
Button Reef Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--teal</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--teal">
Button Teal Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--plum</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--plum">
Button Plum Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--navy</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--navy">
Button Navy Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--charcoal</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--charcoal">
Button Charcoal Theme
</button>
</div>
</div>
</div>
<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 2.4rem;">Icon Button Styles</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round">
<span class="o-btn__icon-center" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round o-btn--round--fill</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round o-btn--round--fill">
<span class="o-btn__icon-center" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round o-btn--round--hover-grow</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round o-btn--round--hover-grow">
<span class="o-btn__icon-center" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round o-btn--round--fill o-btn--round--hover-grow</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round o-btn--round--fill o-btn--round--hover-grow">
<span class="o-btn__icon-center" aria-hidden="true"><svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M0 8L20 8" />
<path class="u-ct-stroke" d="M13 1L20 8L13 15" />
</svg>
</span>
</button>
</div>
</div>
</div>
{# ------- Start Basic Buttons ------- #}
<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 2.4rem;">Basic Button Styles</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Root class: <code class="fractal-code frctl-class-demo__class-name">o-btn</code></div>
<div class="frctl-section__entry">
<button class="o-btn">Default Button</button>
</div>
<div class="frctl-class-demo__text">Span Class: <code class="fractal-code frctl-class-demo__class-name">o-btn__icon</code></div>
<div class="frctl-section__entry">
<button class="o-btn">
Default Button with Icon
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-arrow-right" %}</span>
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--expanding-arrow</code></div>
<div class="frctl-section__entry">
<button class="o-btn">
Expanding Arrow
<span class="o-btn__icon o-btn--expanding-arrow" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</button>
<p style="margin-top: 20px; font-size: 1.2rem;">Use only with the <code>cta-expanding-arrow</code> icon.</p>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--expanding-arrow</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--expanding-arrow">
<span class="o-btn__icon-left" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
Expanding Arrow Left
</button>
<p style="margin-top: 20px; font-size: 1.2rem;">Use only with the <code>cta-expanding-arrow</code> icon.</p>
</div>
</div>
</div>
{# -------- End Basic Buttons ------- #}
{# ------- Start Color Theme Buttons ------- #}
<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 1.2rem;">Button Color Theme Styles</p>
<p class="f-text--small" style="margin-bottom: 2.4rem;">These classes rely on color theme css variables.</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--text-dark</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--text-dark">
Text in Dark Color Theme
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-arrow-right" %}</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary</code></div>
<div class="frctl-section__entry">
<button href="#" class="o-btn o-btn--primary">Primary Button</button>
<p style="margin-top: 20px; font-size: 1.2rem;">This takes on the dark color of the current color theme.</p>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary-light</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary-light">Primary Button</button>
<p style="margin-top: 20px; font-size: 1.2rem;">This takes on the light color of the current color theme.</p>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary-inverse</code></div>
<div class="frctl-section__entry" style="background-color: var(--ct-dark); padding: 2rem;">
<button class="o-btn o-btn--primary-inverse">Primary Button</button>
<p style="margin-top: 20px; font-size: 1.2rem; color: var(--ct-text-on-dark)">Use for button on dark theme background.</p>
</div>
<div class="frctl-class-demo__text">Span Class: <code class="fractal-code frctl-class-demo__class-name">o-btn__icon</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary o-btn--expanding-arrow">
Button with Icon
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</button>
</div>
<div class="frctl-class-demo__text">Span Class: <code class="fractal-code frctl-class-demo__class-name">o-btn__icon-left</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary o-btn--expanding-arrow">
<span class="o-btn__icon-left" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
Button with Icon Left
</button>
</div>
</div>
</div>
{# -------- End Color Theme Buttons -------- #}
{# ------- Start Button Color Themes ------- #}
<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 1.2rem;">Color Theme Buttons</p>
<p class="f-text--small" style="margin-bottom: 2.4rem;">These classes use specific color theme styles, rather than relying on the color theme css variables.</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--ocean</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--ocean">
Button Ocean Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--reef</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--reef">
Button Reef Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--teal</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--teal">
Button Teal Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--plum</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--plum">
Button Plum Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--navy</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--navy">
Button Navy Theme
</button>
</div>
<div class="frctl-class-demo__text">Root Class: <code class="fractal-code frctl-class-demo__class-name">o-btn o-btn--primary--charcoal</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--primary--charcoal">
Button Charcoal Theme
</button>
</div>
</div>
</div>
{# -------- End Button Color Themes ------- #}
{# ------- Start Icon Buttons ------- #}
<div class="frctl-section frctl-class-demo frctl-class-demo--group">
<p style="margin-bottom: 2.4rem;">Icon Button Styles</p>
<div style="padding: 0 2.4rem;">
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round">
<span class="o-btn__icon-center" aria-hidden="true">{% include "03-icons/arrow-slider" %}</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round o-btn--round--fill</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round o-btn--round--fill">
<span class="o-btn__icon-center" aria-hidden="true">{% include "03-icons/arrow-slider" %}</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round o-btn--round--hover-grow</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round o-btn--round--hover-grow">
<span class="o-btn__icon-center" aria-hidden="true">{% include "03-icons/arrow-slider" %}</span>
</button>
</div>
<div class="frctl-class-demo__text">Class: <code class="fractal-code frctl-class-demo__class-name">o-btn--round o-btn--round--fill o-btn--round--hover-grow</code></div>
<div class="frctl-section__entry">
<button class="o-btn o-btn--round o-btn--round--fill o-btn--round--hover-grow">
<span class="o-btn__icon-center" aria-hidden="true">{% include "03-icons/arrow-slider" %}</span>
</button>
</div>
</div>
</div>
{# -------- End Icon Buttons ------- #}
{
"pageColorTheme": "teal"
}
.o-btn {
display: inline-flex;
align-items: center;
min-height: 4.4rem;
min-width: 4.4rem;
position: relative;
font-family: $f-sans;
font-weight: $f-bold;
font-size: 1.5rem;
line-height: 1.2;
letter-spacing: 0.05rem;
text-transform: uppercase;
&:hover {
.o-btn__icon {
transform: translate3d(0.6rem, 0, 0);
}
.o-btn__icon-left {
transform: translate3d(0.3rem, 0, 0);
}
}
}
@mixin primaryButtonStyles {
padding: 1.4rem 3.2rem;
}
@mixin ctaHoverEffect($colorText, $colorBkg, $hoverColorText, $hoverColorBkg: $c-white) {
background-color: $colorBkg;
color: $colorText;
text-align: center;
transition: color 0.3s $ease-standard-cubic;
overflow: hidden;
z-index: 1;
position: relative;
border: 0.1rem solid $colorBkg;
.u-ct-stroke {
stroke: $colorText;
transition: stroke 0.3s $ease-standard-cubic;
}
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background-color: $hoverColorBkg;
transform: translate3d(101%, 0, 0);
transition: all 0.3s $ease-standard-cubic;
z-index: -1;
}
&:hover {
color: $hoverColorText;
.u-ct-stroke {
stroke: $hoverColorText;
}
&:before {
transform: translate3d(0, 0, 0);
}
}
}
.o-btn--text-dark {
color: var(--ct-dark);
}
.o-btn--primary {
@include primaryButtonStyles;
@include ctaHoverEffect(var(--ct-text-on-dark), var(--ct-dark), var(--ct-dark));
}
@each $name, $value in $color-styles {
.o-btn--primary--#{$name} {
}
}
@each $themeName, $map in $color-theming {
.o-btn--primary--#{$themeName} {
@include primaryButtonStyles;
background-color: #{map-get($map, "dark")};
color: #{map-get($map, "textDark")};
@include ctaHoverEffect(#{map-get($map, "textDark")}, #{map-get($map, "dark")}, #{map-get($map, "dark")});
}
}
.o-btn--primary-inverse {
@include primaryButtonStyles;
@include ctaHoverEffect(var(--ct-dark), var(--ct-text-on-dark), var(--ct-text-on-dark), var(--ct-dark))
}
.o-btn--primary-light {
@include primaryButtonStyles;
@include ctaHoverEffect(var(--ct-text-on-light), var(--ct-light), var(--ct-text-on-light));
}
.o-btn--round {
width: 4.6rem;
height: 4.6rem;
&:before {
content: '';
width: 4.6rem;
height: 4.6rem;
display: block;
border-radius: 50%;
border: 0.1rem solid var(--ct-txt);
color: var(--ct-txt);
transition: all 0.3s $ease-standard-cubic;
}
}
.o-btn--round--hover-grow {
&:hover {
&:before {
transform: scale(1.75);
}
svg {
transform: scale(2);
}
}
}
.o-btn--round--fill {
&:hover {
color: var(--ct-text-on-dark);
&:before {
border-color: var(--ct-dark);
background-color: var(--ct-dark);
}
.u-ct-stroke {
color: var(--ct-text-on-dark);
}
}
}
.o-btn--round--on-dark {
color: var(--ct-text-on-dark);
transition: all 0.3s $ease-standard-cubic;
.u-ct-stroke {
transition: none;
color: var(--ct-text-on-dark);
}
&:before {
border-color: var(--ct-text-on-dark);
}
&:hover {
color: var(--ct-dark);
&:before {
background-color: var(--ct-text-on-dark);
}
.u-ct-stroke {
color: var(--ct-dark);
}
}
}
// ICONS
@mixin iconDefaults {
display: block;
transition: all 0.24s $easeInQuad;
svg {
display: block;
}
}
.o-btn__icon,
.o-btn__cta-arrow {
margin-left: 1.2rem;
@include iconDefaults;
}
.o-btn__icon-left {
margin-right: 1.2rem;
@include iconDefaults;
transform: translate3d(-0.3rem, 0, 0);
}
.o-btn__icon-center {
@include iconDefaults;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
svg {
transition: all 0.24s $easeInQuad;
}
&.o-btn__icon-180 {
transform: translate(-50%, -50%) rotate(180deg);
}
}
.o-btn--expanding-arrow {
@include ctaArrowHover;
.o-btn__icon-left {
margin-right: 0.4rem;
}
&:hover {
.o-btn__icon,
.o-btn__icon-left {
transform: translate3d(0, 0, 0);
}
}
}
No notes defined.