473 lines
19 KiB
TOML
473 lines
19 KiB
TOML
|
version = 1
|
||
|
|
title = 'Style Inlining'
|
||
|
|
|
||
|
|
[[modules]]
|
||
|
|
plugin = 'source.text'
|
||
|
|
data.contents = '''
|
||
|
|
# hey did you know your peripheral vision is made up
|
||
|
|
|
||
|
|
this box will change to a random color every five seconds. if you get it in your periphery just right, you should be able to see a color that just straight up isn't there! isn't that weird!
|
||
|
|
|
||
|
|
<!-- Array.from({length: 100}, (_, i) => `rgb(${Math.random() * 256}, ${Math.random() * 256}, ${Math.random() * 256}) ${i}% ${i + 1}%`).join(", ") -->
|
||
|
|
<div id=window>
|
||
|
|
<div id=switch-colors></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
[inspired by this two-tweet thread](https://x.com/greenTetra_/status/1725964511574708588?s=20)'''
|
||
|
|
data.language = 'html'
|
||
|
|
sends = [2]
|
||
|
|
|
||
|
|
[[modules]]
|
||
|
|
plugin = 'source.text'
|
||
|
|
data.contents = '''
|
||
|
|
#switch-colors {
|
||
|
|
height: calc(100 * 100vh);
|
||
|
|
background: linear-gradient(to bottom,
|
||
|
|
rgb(198.60226452135691, 224.26966998789203, 246.9071903485053) 0% 1%, rgb(45.72602022666916, 190.55860589377102, 190.7884576317398) 1% 2%, rgb(174.40730836178, 44.36649286573629, 86.34563689570786) 2% 3%, rgb(32.52442485272411, 232.65013485794634, 15.810875885127018) 3% 4%, rgb(11.548032390773812, 88.54035529938261, 198.67204542934968) 4% 5%, rgb(241.47181503420944, 168.87943798014328, 182.12108874774094) 5% 6%, rgb(125.30357023440024, 142.06327119614855, 115.8347321191336) 6% 7%, rgb(175.91413333265848, 253.96597692769467, 220.73759634872255) 7% 8%, rgb(253.4571185403264, 202.54787960906043, 11.569160033446394) 8% 9%, rgb(97.2422981427851, 27.39018080215567, 23.637464284388102) 9% 10%, rgb(241.22525000269093, 140.19968922899807, 216.1884962594063) 10% 11%, rgb(165.52508372306744, 200.05019256230514, 158.54229581371982) 11% 12%, rgb(240.26897129555186, 173.62288705319668, 218.32563871557977) 12% 13%, rgb(148.23720978976525, 178.9544368514728, 94.21906959308308) 13% 14%, rgb(229.46029779030033, 178.01538196878283, 82.59509348046703) 14% 15%, rgb(56.498927222742964, 88.04941402908776, 35.31089058365882) 15% 16%, rgb(6.88047762327858, 7.3250468959248, 49.39282808767166) 16% 17%, rgb(167.0301381573264, 181.98837704882698, 197.36898322627093) 17% 18%, rgb(61.682626372921845, 95.59776775995493, 239.05427708946036) 18% 19%, rgb(179.51101721376494, 209.19880840088518, 15.202436150904134) 19% 20%, rgb(146.56241757359084, 1.1797061648239833, 64.8424629522957) 20% 21%, rgb(142.9779909867064, 63.05798162672528, 55.17765889766724) 21% 22%, rgb(9.574524127290601, 156.99345806247413, 114.76437088038091) 22% 23%, rgb(68.23482251240938, 203.72219816189687, 145.64914299667976) 23% 24%, rgb(195.8896973119733, 133.20043462074625, 225.01991746840685) 24% 25%, rgb(67.03921976519365, 208.2602370147887, 140.84061045941598) 25% 26%, rgb(151.5819638974374, 3.0235319462410075, 195.87743107804488) 26% 27%, rgb(152.91695259309182, 237.36138037897211, 212.12410374440088) 27% 28%, rgb(243.1054928714205, 224.86315248540063, 118.81608260752733) 28% 29%, rgb(35.55434292636198, 180.90624639151565, 7.803819734417743) 29% 30%, rgb(207.90834006802748, 64.88267621624419, 230.90888713373835) 30% 31%, rgb(217.70378109679223, 142.25792516703734, 210.94303953993455) 31% 32%, rgb(135.92525808495645, 137.04177428371196, 74.27674157950207) 32% 33%, rgb(136.97919603746425, 27.843989538077608, 20.978409748793126) 33% 34%, rgb(146.1503483075868, 223.90052333232558, 123.65952186659922) 34% 35%, rgb(39.18806499157267, 3.6747855191998724, 203.15005299210344) 35% 36%, rgb(211.80456868153692, 211.5981993017453, 181.33260214421682) 36% 37%, rgb(107.98040929007703, 20.27663551708912, 218.8923842126407) 37% 38%, rgb(106.17046028813445, 145.42926426344678, 61.99486621868891) 38% 39%, rgb(22.317679734112915, 37.51297166046277, 133.14998518884727) 39% 40%, rgb(87.40011498473706, 163.26646244728056, 85.882679195999) 40% 41%, rgb(165.9169410835134, 250.48642092557174, 175.4019757439139) 41% 42%, rgb(65.1504540726591, 5.599729043233594, 228.16756064713422) 42% 43%, rgb(170.9610075080252, 33.64527696089914, 17.91231092577226) 43% 44%, rgb(122.71259438748774, 82.37171089695107, 138.6186717111591) 44% 45%, rgb(61.76748335611177, 149.81412154909304, 62.990588058631204) 45% 46%, rgb(102.64989632925318, 64.77600391083377, 65.0943726863702) 46% 47%, rgb(239.41903480411173, 12.433094276998077, 200.96225499535882) 47% 48%, rgb(206.8789570125271, 222.98143482948302, 211.04607427958348) 48% 49%, rgb(11.546234903457048, 137.1059972771098, 79.44274304894924) 49% 50%, rgb(238.07437616265867, 154.62699076652495, 195.49571893239988) 50% 51%, rgb(48.61521640569674, 54.64937654410784, 149.5605339651218) 51% 52%, rgb(12.999410610082577, 138.77374502597172, 98.43227819686496) 52% 53%, rgb(119.34541701555389, 72.56977434785728, 173.8827994057525) 53% 54%, rgb(214.5153565349745, 0.40061891294715224, 11.12987873153969) 54% 55%, rgb(32.17673247053375, 229.06673599640266, 57.330993224376584) 55% 56%, rgb(249.14926593190103, 144.50882922889843, 98.76693861190512) 56% 57%, rgb(78
|
||
|
|
transform: translateY(-100%);
|
||
|
|
animation-timing-function: steps(100);
|
||
|
|
animation-name: spin;
|
||
|
|
animation-duration: 500s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-delay: 0s;
|
||
|
|
animation-direction: reverse;
|
||
|
|
animation-play-state: running;
|
||
|
|
}
|
||
|
|
|
||
|
|
#window {
|
||
|
|
height: 50vh;
|
||
|
|
aspect-ratio: 1;
|
||
|
|
//outline: 1px solid red;
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow: hidden;
|
||
|
|
}'''
|
||
|
|
data.language = 'css'
|
||
|
|
sends = [2]
|
||
|
|
|
||
|
|
[[modules]]
|
||
|
|
plugin = 'transform.style-inliner'
|
||
|
|
data.mode = 'attr'
|
||
|
|
sends = [3]
|
||
|
|
|
||
|
|
[[modules]]
|
||
|
|
plugin = 'transform.svg-to-background'
|
||
|
|
data.useSvgo = true
|
||
|
|
sends = ['output']
|
||
|
|
|
||
|
|
[[modules]]
|
||
|
|
plugin = 'source.sass'
|
||
|
|
data.contents = '''
|
||
|
|
@font-face { font-family: "League Mono";
|
||
|
|
src: url("../src/fonts/LeagueMono-VF.woff") format("woff");
|
||
|
|
font-weight: 100 900;
|
||
|
|
font-stretch: 50% 200%;
|
||
|
|
font-display: swap;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Papyrus";
|
||
|
|
src: local("Papyrus"), url("../src/fonts/Papyrus.woff") format("woff"),
|
||
|
|
url("../src/fonts/Papyrus.woff2") format("woff2");
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin display {
|
||
|
|
font-family: "League Mono", serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin body {
|
||
|
|
font-family: "Atkinson Hyperlegible", sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.headline {
|
||
|
|
@include display;
|
||
|
|
font-size: 2.25rem;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subhed {
|
||
|
|
@include display;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-body {
|
||
|
|
@include body;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-body-thin {
|
||
|
|
@include body;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
/* source-code-pro-cyrillic-ext-400-normal */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Source Code Pro';
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(./files/source-code-pro-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-cyrillic-ext-400-normal.woff) format('woff');
|
||
|
|
unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* source-code-pro-cyrillic-400-normal */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Source Code Pro';
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(./files/source-code-pro-cyrillic-400-normal.woff2) format('woff2'), url(./files/source-code-pro-cyrillic-400-normal.woff) format('woff');
|
||
|
|
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* source-code-pro-greek-ext-400-normal */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Source Code Pro';
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(./files/source-code-pro-greek-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-greek-ext-400-normal.woff) format('woff');
|
||
|
|
unicode-range: U+1F00-1FFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* source-code-pro-greek-400-normal */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Source Code Pro';
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(./files/source-code-pro-greek-400-normal.woff2) format('woff2'), url(./files/source-code-pro-greek-400-normal.woff) format('woff');
|
||
|
|
unicode-range: U+0370-03FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* source-code-pro-vietnamese-400-normal */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Source Code Pro';
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(./files/source-code-pro-vietnamese-400-normal.woff2) format('woff2'), url(./files/source-code-pro-vietnamese-400-normal.woff) format('woff');
|
||
|
|
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* source-code-pro-latin-ext-400-normal */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Source Code Pro';
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(./files/source-code-pro-latin-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-latin-ext-400-normal.woff) format('woff');
|
||
|
|
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* source-code-pro-latin-400-normal */
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Source Code Pro';
|
||
|
|
font-style: normal;
|
||
|
|
font-display: swap;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url(./files/source-code-pro-latin-400-normal.woff2) format('woff2'), url(./files/source-code-pro-latin-400-normal.woff) format('woff');
|
||
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||
|
|
}
|
||
|
|
|
||
|
|
@tailwind base;
|
||
|
|
@tailwind components;
|
||
|
|
@tailwind utilities;
|
||
|
|
|
||
|
|
@layer base {
|
||
|
|
[type="text"],
|
||
|
|
[type="email"],
|
||
|
|
[type="url"],
|
||
|
|
[type="password"],
|
||
|
|
[type="number"],
|
||
|
|
[type="date"],
|
||
|
|
[type="datetime-local"],
|
||
|
|
[type="month"],
|
||
|
|
[type="search"],
|
||
|
|
[type="tel"],
|
||
|
|
[type="time"],
|
||
|
|
[type="week"],
|
||
|
|
[multiple],
|
||
|
|
textarea,
|
||
|
|
select {
|
||
|
|
@apply bg-notWhite text-notBlack placeholder-gray-700;
|
||
|
|
}
|
||
|
|
|
||
|
|
*:focus {
|
||
|
|
// outline: 3px solid rebeccapurple;
|
||
|
|
@apply outline outline-4 outline-foreground;
|
||
|
|
@apply ring-foreground #{!important};
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Remove :focus styling for browsers that do support :focus-visible */
|
||
|
|
*:focus:not(:focus-visible) {
|
||
|
|
@apply outline-none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Add focus styling back in browsers that do support :focus-visible */
|
||
|
|
*:focus-visible {
|
||
|
|
@apply outline outline-4 outline-foreground;
|
||
|
|
@apply ring-foreground #{!important};
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
@apply antialiased;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
--font-sans: theme("fontFamily.sans");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
// TODO: clean up use of h* elements everywhere so we don't have to use
|
||
|
|
// classes for heading styles
|
||
|
|
.h1 {
|
||
|
|
@apply font-league text-8xl font-semibold tracking-[-0.07em];
|
||
|
|
font-stretch: 200%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h2 {
|
||
|
|
@apply font-league text-6xl font-normal tracking-[-0.07em];
|
||
|
|
font-stretch: 150%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h3 {
|
||
|
|
@apply font-atkinson text-5xl;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h4 {
|
||
|
|
@apply font-atkinson text-4xl font-bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h5 {
|
||
|
|
@apply font-league text-2xl tracking-tighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h6 {
|
||
|
|
@apply font-league text-xl font-semibold leading-6 tracking-tighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle-1 {
|
||
|
|
@apply font-atkinson text-base;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle-2 {
|
||
|
|
@apply font-atkinson text-sm font-bold tracking-wide;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body-1 {
|
||
|
|
@apply font-atkinson text-base;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body-2 {
|
||
|
|
@apply font-atkinson text-sm;
|
||
|
|
}
|
||
|
|
|
||
|
|
[type="radio"] {
|
||
|
|
@apply appearance-none border-2 border-foreground checked:bg-foreground
|
||
|
|
checked:focus:bg-foreground;
|
||
|
|
}
|
||
|
|
|
||
|
|
[id$="footnote-label"] {
|
||
|
|
@apply sr-only;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="checkbox"] {
|
||
|
|
@apply bg-notWhite text-cherry disabled:cursor-not-allowed disabled:text-cherry-300;
|
||
|
|
|
||
|
|
&.rounded-checkbox {
|
||
|
|
@apply h-6 w-6 rounded-lg border-2 border-foreground text-foreground focus:ring-foreground;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div[data-post-preview] hr:first-of-type {
|
||
|
|
@apply overflow-visible;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: "read more";
|
||
|
|
|
||
|
|
@apply relative left-4 top-[-1rem];
|
||
|
|
@apply bg-white px-2 text-sm font-bold text-gray-700;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer utilities {
|
||
|
|
.mask {
|
||
|
|
mask-size: contain;
|
||
|
|
mask-repeat: no-repeat;
|
||
|
|
mask-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask-squircle {
|
||
|
|
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask-roundrect {
|
||
|
|
@apply rounded-[12.5%];
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask-circle {
|
||
|
|
@apply rounded-full;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask-egg {
|
||
|
|
mask-image: url("../client/images/icons/egg.svg");
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask-capsule-big {
|
||
|
|
mask-image: url("../client/images/icons/capsule-big.svg");
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask-capsule-small {
|
||
|
|
mask-image: url("../client/images/icons/capsule-small.svg");
|
||
|
|
}
|
||
|
|
|
||
|
|
svg.cohost-shadow-light {
|
||
|
|
filter: drop-shadow(0px 4px 5px rgba(25, 25, 25, 0.14))
|
||
|
|
drop-shadow(0px 1px 10px rgba(25, 25, 25, 0.12))
|
||
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
||
|
|
}
|
||
|
|
|
||
|
|
.cohost-shadow-light {
|
||
|
|
&.mask {
|
||
|
|
filter: drop-shadow(0px 4px 5px rgba(25, 25, 25, 0.14))
|
||
|
|
drop-shadow(0px 1px 10px rgba(25, 25, 25, 0.12))
|
||
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cohost-shadow-dark {
|
||
|
|
&.mask {
|
||
|
|
filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
|
||
|
|
drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12))
|
||
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
svg.cohost-shadow-dark {
|
||
|
|
filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
|
||
|
|
drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12))
|
||
|
|
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
||
|
|
}
|
||
|
|
|
||
|
|
:not(svg):not(.mask).cohost-shadow-light {
|
||
|
|
box-shadow: 0px 4px 5px rgba(25, 25, 25, 0.14),
|
||
|
|
0px 1px 10px rgba(25, 25, 25, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
:not(svg):not(.mask).cohost-shadow-dark {
|
||
|
|
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14),
|
||
|
|
0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.duotone-wrapper {
|
||
|
|
@apply relative flex h-full overflow-hidden bg-mango;
|
||
|
|
flex: 1 1 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.duotone-wrapper div {
|
||
|
|
@apply relative h-full w-full max-w-full mix-blend-multiply contrast-100 grayscale will-change-transform;
|
||
|
|
flex: 1 0 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.duotone-wrapper::before {
|
||
|
|
@apply absolute inset-0 z-[1] h-full w-full bg-cherry mix-blend-lighten;
|
||
|
|
content: "";
|
||
|
|
}
|
||
|
|
|
||
|
|
.styled-scrollbars-light {
|
||
|
|
scrollbar-color: rgb(var(--color-mango)) rgb(var(--color-notWhite));
|
||
|
|
}
|
||
|
|
|
||
|
|
.styled-scrollbars-dark {
|
||
|
|
scrollbar-color: rgb(var(--color-mango)) rgb(var(--color-notBlack));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin base-button(
|
||
|
|
$border-width,
|
||
|
|
$border-line-style: none,
|
||
|
|
$border-color: currentcolor
|
||
|
|
) {
|
||
|
|
align-items: center;
|
||
|
|
border: $border-width $border-line-style $border-color;
|
||
|
|
border-radius: 200px;
|
||
|
|
display: flex;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 1.25;
|
||
|
|
// so the button works out the same height no matter the border width
|
||
|
|
padding: calc(0.5rem - #{$border-width}) 1rem;
|
||
|
|
|
||
|
|
svg:first-child {
|
||
|
|
// leave some extra space to the right of an icon, if one's present
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
///////////////////////////////////////////////////////////////////////////////
|
||
|
|
// common styles
|
||
|
|
///////////////////////////////////////////////////////////////////////////////
|
||
|
|
.button-bar {
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
|
||
|
|
.spacer {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
* ~ .spacer {
|
||
|
|
margin-right: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spacer ~ * {
|
||
|
|
margin-left: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// bring these in from the freshdesk widget so we don't have a loadbearing crime
|
||
|
|
// dependency on that
|
||
|
|
@keyframes slideupright {
|
||
|
|
0% {
|
||
|
|
transform: scale(0);
|
||
|
|
transform-origin: bottom right;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(1);
|
||
|
|
transform-origin: bottom right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideupleft {
|
||
|
|
0% {
|
||
|
|
transform: scale(0);
|
||
|
|
transform-origin: bottom left;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(1);
|
||
|
|
transform-origin: bottom left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
'''
|
||
|
|
data.syntax = 'scss'
|
||
|
|
sends = [2]
|
||
|
|
graphPos = [-456, 120]
|
||
|
|
|
||
|
|
[[modules]]
|
||
|
|
plugin = 'source.sass'
|
||
|
|
data.contents = ''
|
||
|
|
data.syntax = 'scss'
|
||
|
|
|
||
|
|
[[modules]]
|
||
|
|
plugin = 'source.sass'
|
||
|
|
data.contents = ''
|
||
|
|
data.syntax = 'scss'
|