Reprocess CSS to be not minimised.
This commit is contained in:
@@ -240,7 +240,7 @@ mixin colour-samples(colors, theid)
|
||||
notes= colors[i].note
|
||||
- }
|
||||
|
||||
div.tab-group(id= theid )
|
||||
tabset(id= theid order= taborder)
|
||||
- csstab = csstab == undefined ? "css" : csstab
|
||||
- scsstab = scsstab == undefined ? "scss" : scsstab
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ block content
|
||||
|
||||
p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.
|
||||
|
||||
tabset#breakpoints
|
||||
tabset#breakpoints(order= taborder)
|
||||
div(tab="scss")
|
||||
+h(3)
|
||||
pre.language-sass.
|
||||
|
||||
@@ -1 +1,53 @@
|
||||
header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}
|
||||
header {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-rows: 1.75rem 3.5rem;
|
||||
grid-template-rows: 1.75rem 3.5rem;
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-column: 2/4;
|
||||
overflow: hidden;
|
||||
}
|
||||
header svg {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1/-1;
|
||||
-ms-grid-row-align: stretch;
|
||||
-ms-grid-column-align: stretch;
|
||||
place-self: stretch;
|
||||
}
|
||||
header svg text {
|
||||
-webkit-transform: translate(-1rem, 7.25rem);
|
||||
-ms-transform: translate(-1rem, 7.25rem);
|
||||
transform: translate(-1rem, 7.25rem);
|
||||
font-size: 10rem;
|
||||
font-weight: 1000;
|
||||
font-family: sans-serif;
|
||||
fill: var(--colour-grey-xxl);
|
||||
}
|
||||
header > div {
|
||||
-ms-grid-row: 2;
|
||||
grid-row: 2;
|
||||
grid-column: 1/-1;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-column-gap: 1rem;
|
||||
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
|
||||
-ms-grid-columns: auto max-content max-content;
|
||||
grid-template-columns: auto -webkit-max-content -webkit-max-content;
|
||||
grid-template-columns: auto max-content max-content;
|
||||
}
|
||||
header > div .header-title h1 {
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
header > div .header-title h1 a, header > div .header-title h1 a:visited {
|
||||
border-bottom: none;
|
||||
color: var(--colour-black);
|
||||
font-family: sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -12,7 +12,7 @@ block content
|
||||
+h(2)
|
||||
p Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the #[code.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system.
|
||||
|
||||
tabset#header
|
||||
tabset#header(order= taborder)
|
||||
pre.language-html(tab="html")
|
||||
// create temp variables and store the design system values
|
||||
- var tmpsite= site
|
||||
|
||||
@@ -49,7 +49,7 @@ block content
|
||||
- return count;
|
||||
- }
|
||||
|
||||
div.tab-group#status-report
|
||||
tabset#status-report(order= taborder)
|
||||
div.status-report.status-report-structure(data-tab="by structure")
|
||||
table.custom(role="presentation")
|
||||
tbody
|
||||
|
||||
@@ -15,7 +15,7 @@ block content
|
||||
p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements".
|
||||
|
||||
|
||||
tabset#sticky-note
|
||||
tabset#sticky-note(order= taborder)
|
||||
pre.language-html(tab="html")
|
||||
include _sticky-note.pug
|
||||
pre.language-pug(tab="pug")
|
||||
|
||||
@@ -1 +1,125 @@
|
||||
sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(255,255,221.2)),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,rgb(255,255,200.8)),to(rgb(255,255,185.5)));background:linear-gradient(180deg,rgb(255,255,221.2) 0%,#ffffd3 2%,#ffffd3 12%,rgb(255,255,200.8) 75%,rgb(255,255,185.5) 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(156.5265625,220.9484375,235.6734375)),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,rgb(139.4734375,215.0515625,232.3265625)),to(rgb(126.68359375,210.62890625,229.81640625)));background:linear-gradient(180deg,rgb(156.5265625,220.9484375,235.6734375) 0%,#94daea 2%,#94daea 12%,rgb(139.4734375,215.0515625,232.3265625) 75%,rgb(126.68359375,210.62890625,229.81640625) 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(250.3493150685,123.8506849315,147.104109589)),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,rgb(249.6506849315,104.1493150685,130.895890411)),to(rgb(249.1267123288,89.3732876712,118.7397260274)));background:linear-gradient(180deg,rgb(250.3493150685,123.8506849315,147.104109589) 0%,#fa728b 2%,#fa728b 12%,rgb(249.6506849315,104.1493150685,130.895890411) 75%,rgb(249.1267123288,89.3732876712,118.7397260274) 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(196.6333333333,251.5666666667,200.925)),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,rgb(177.3666666667,250.4333333333,183.075)),to(rgb(162.9166666667,249.5833333333,169.6875)));background:linear-gradient(180deg,rgb(196.6333333333,251.5666666667,200.925) 0%,#bbfbc0 2%,#bbfbc0 12%,rgb(177.3666666667,250.4333333333,183.075) 75%,rgb(162.9166666667,249.5833333333,169.6875) 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}
|
||||
sticky-note-wrapper {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 0.5rem;
|
||||
position: relative;
|
||||
width: 0.5rem;
|
||||
}
|
||||
sticky-note-wrapper * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
sticky-note-wrapper sticky-note {
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
float: left;
|
||||
font-size: 1rem;
|
||||
height: 13rem;
|
||||
left: 0;
|
||||
place-items: stretch;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 13rem;
|
||||
z-index: 100;
|
||||
}
|
||||
sticky-note-wrapper sticky-note:active {
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
sticky-note-wrapper sticky-note.right {
|
||||
float: right;
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div {
|
||||
-ms-grid-row: 1;
|
||||
grid-row: 1;
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(1) {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
-webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
margin: 2rem 1rem 0.25rem 0.36rem;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
clip-path: url(#stickyClip);
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
font-family: "Kalam", cursive;
|
||||
font-style: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.25rem;
|
||||
padding: 1rem;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) > * {
|
||||
font-family: "Kalam", cursive !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
max-width: 13rem;
|
||||
min-width: 13rem;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
font-size: 1.75rem;
|
||||
max-width: 21rem;
|
||||
min-height: 21rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
font-size: 2.5rem;
|
||||
max-width: 26rem;
|
||||
min-height: 26rem;
|
||||
}
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 221.2)), color-stop(2%, #ffffd3), color-stop(12%, #ffffd3), color-stop(75%, rgb(255, 255, 200.8)), to(rgb(255, 255, 185.5)));
|
||||
background: linear-gradient(180deg, rgb(255, 255, 221.2) 0%, #ffffd3 2%, #ffffd3 12%, rgb(255, 255, 200.8) 75%, rgb(255, 255, 185.5) 100%);
|
||||
}
|
||||
sticky-note-wrapper sticky-note.blue > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(156.5265625, 220.9484375, 235.6734375)), color-stop(2%, #94daea), color-stop(12%, #94daea), color-stop(75%, rgb(139.4734375, 215.0515625, 232.3265625)), to(rgb(126.68359375, 210.62890625, 229.81640625)));
|
||||
background: linear-gradient(180deg, rgb(156.5265625, 220.9484375, 235.6734375) 0%, #94daea 2%, #94daea 12%, rgb(139.4734375, 215.0515625, 232.3265625) 75%, rgb(126.68359375, 210.62890625, 229.81640625) 100%);
|
||||
}
|
||||
sticky-note-wrapper sticky-note.pink > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(250.3493150685, 123.8506849315, 147.104109589)), color-stop(2%, #fa728b), color-stop(12%, #fa728b), color-stop(75%, rgb(249.6506849315, 104.1493150685, 130.895890411)), to(rgb(249.1267123288, 89.3732876712, 118.7397260274)));
|
||||
background: linear-gradient(180deg, rgb(250.3493150685, 123.8506849315, 147.104109589) 0%, #fa728b 2%, #fa728b 12%, rgb(249.6506849315, 104.1493150685, 130.895890411) 75%, rgb(249.1267123288, 89.3732876712, 118.7397260274) 100%);
|
||||
}
|
||||
sticky-note-wrapper sticky-note.green > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(196.6333333333, 251.5666666667, 200.925)), color-stop(2%, #bbfbc0), color-stop(12%, #bbfbc0), color-stop(75%, rgb(177.3666666667, 250.4333333333, 183.075)), to(rgb(162.9166666667, 249.5833333333, 169.6875)));
|
||||
background: linear-gradient(180deg, rgb(196.6333333333, 251.5666666667, 200.925) 0%, #bbfbc0 2%, #bbfbc0 12%, rgb(177.3666666667, 250.4333333333, 183.075) 75%, rgb(162.9166666667, 249.5833333333, 169.6875) 100%);
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note:hover) {
|
||||
background-color: #ffffd3;
|
||||
border: 1px solid black;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.yellow:hover) {
|
||||
background-color: #ffffd3;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.blue:hover) {
|
||||
background-color: #94daea;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.pink:hover) {
|
||||
background-color: #fa728b;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.green:hover) {
|
||||
background-color: #bbfbc0;
|
||||
}
|
||||
@@ -20,7 +20,7 @@ block content
|
||||
label(for="example-switch") Switch label (states the on state)
|
||||
span#example-switch(role="switch")
|
||||
|
||||
div#switches.tab-group
|
||||
tabset#switches(order= taborder)
|
||||
pre.language-html(tab="html")
|
||||
include _switch.pug
|
||||
pre.language-pug(tab="pug")
|
||||
|
||||
@@ -1 +1,26 @@
|
||||
[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}
|
||||
[role=switch] {
|
||||
display: -ms-inline-grid;
|
||||
display: inline-grid;
|
||||
border: 1px solid #2e51a1;
|
||||
background-color: #d8d8d8;
|
||||
border-radius: 0.75rem;
|
||||
height: 1.5rem;
|
||||
width: 3rem;
|
||||
-webkit-transition: all 500ms;
|
||||
transition: all 500ms;
|
||||
}
|
||||
[role=switch] > span {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
margin: 2%;
|
||||
width: calc(1.5rem - 2%);
|
||||
-webkit-transition: all 500ms;
|
||||
transition: all 500ms;
|
||||
}
|
||||
[role=switch][aria-checked=true] {
|
||||
background-color: #2e51a1;
|
||||
}
|
||||
[role=switch][aria-checked=true] > span {
|
||||
margin-left: calc(1.5rem - 5%);
|
||||
}
|
||||
@@ -33,7 +33,7 @@ block content
|
||||
include _tooltip.pug
|
||||
|
||||
|
||||
tabset#tooltip
|
||||
tabset#tooltip(order= taborder)
|
||||
pre.language-html(tab="html")
|
||||
include _tooltip.pug
|
||||
pre.language-pug(tab="pug")
|
||||
|
||||
@@ -1 +1,157 @@
|
||||
[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;display:none;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{display:block;opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}
|
||||
/* Position Options
|
||||
- top / block-start
|
||||
- right / inline-end
|
||||
- bottom / block-end
|
||||
- left / inline-start
|
||||
*/
|
||||
[role=tooltip] {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
color: #000;
|
||||
display: none;
|
||||
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
|
||||
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
inline-size: -webkit-max-content;
|
||||
inline-size: -moz-max-content;
|
||||
inline-size: max-content;
|
||||
line-height: initial;
|
||||
margin: 0;
|
||||
max-inline-size: 25rem;
|
||||
opacity: 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-align: start;
|
||||
-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||||
-ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||||
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||||
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
|
||||
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
will-change: filter;
|
||||
z-index: 10;
|
||||
}
|
||||
[role=tooltip]::before {
|
||||
clip-path: inset(50%);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
content: "; Has tooltip: ";
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
[role=tooltip]::after {
|
||||
background: #fff;
|
||||
content: "";
|
||||
inset: 0;
|
||||
-webkit-mask: var(--tooltip-pointer);
|
||||
mask: var(--tooltip-pointer);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=top],
|
||||
[tip-position=block-start],
|
||||
:not([tip-position]),
|
||||
[tip-position=bottom],
|
||||
[tip-position=block-end]) {
|
||||
text-align: center;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=top],
|
||||
[tip-position=block-start],
|
||||
:not([tip-position])) {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-end: calc(100% + 0.75rem + 1rem);
|
||||
--tooltip-x: calc(50% * -1);
|
||||
}
|
||||
[role=tooltip]:is([tip-position=top],
|
||||
[tip-position=block-start],
|
||||
:not([tip-position]))::after {
|
||||
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
|
||||
inset-block-end: -1rem;
|
||||
-webkit-border-after: 1rem solid transparent;
|
||||
border-block-end: 1rem solid transparent;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=right],
|
||||
[tip-position=inline-end]) {
|
||||
inset-inline-start: calc(100% + 1.5rem + 1rem);
|
||||
inset-block-end: 50%;
|
||||
--tooltip-y: 50%;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=right],
|
||||
[tip-position=inline-end])::after {
|
||||
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
|
||||
inset-inline-start: -1rem;
|
||||
-webkit-border-start: 1rem solid transparent;
|
||||
border-inline-start: 1rem solid transparent;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=bottom],
|
||||
[tip-position=block-end]) {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: calc(100% + 0.75rem + 1rem);
|
||||
--tooltip-x: calc(50% * -1);
|
||||
}
|
||||
[role=tooltip]:is([tip-position=bottom],
|
||||
[tip-position=block-end])::after {
|
||||
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
|
||||
inset-block-start: -1rem;
|
||||
-webkit-border-before: 1rem solid transparent;
|
||||
border-block-start: 1rem solid transparent;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=left],
|
||||
[tip-position=inline-start]) {
|
||||
inset-inline-end: calc(100% + 1.5rem + 1rem);
|
||||
inset-block-end: 50%;
|
||||
--tooltip-y: 50%;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=left],
|
||||
[tip-position=inline-start])::after {
|
||||
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
|
||||
inset-inline-end: -1rem;
|
||||
-webkit-border-end: 1rem solid transparent;
|
||||
border-inline-end: 1rem solid transparent;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[role=tooltip] {
|
||||
background: #1f2127;
|
||||
color: #fff;
|
||||
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
|
||||
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
|
||||
}
|
||||
[role=tooltip]::after {
|
||||
background: #1f2127;
|
||||
}
|
||||
}
|
||||
|
||||
:has(> [role=tooltip]) {
|
||||
position: relative;
|
||||
}
|
||||
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 300ms;
|
||||
transition-delay: 300ms;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-y: 3px;
|
||||
}
|
||||
:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-x: calc(-1 * -3px * -1);
|
||||
}
|
||||
:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-y: -3px;
|
||||
}
|
||||
:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-x: calc(-1 * 3px * -1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user