108 lines
4.0 KiB
CSS
108 lines
4.0 KiB
CSS
/* https://stackoverflow.com/questions/62107074/how-to-hide-a-text-and-make-it-accessible-by-screen-reader */
|
|
.visually-hidden {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: absolute !important;
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
outline: none;
|
|
box-shadow: none;
|
|
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
|
|
clip: rect(1px, 1px, 1px, 1px); /* maybe deprecated but we need to support legacy browsers */
|
|
clip-path: inset(50%); /* modern browsers, clip-path works inwards from each corner */
|
|
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space) */
|
|
}
|
|
|
|
|
|
.margin_top_small {
|
|
margin-top: 10px;
|
|
}
|
|
.margin_bottom_small {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.margin_top_big {
|
|
margin-top: 50px;
|
|
}
|
|
.margin_bottom_big {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
|
|
/*
|
|
DATA-FLEX
|
|
|
|
direction width childrens childrens childrens
|
|
position main axis cross axis
|
|
|
|
[/]-horizontal [/]-parent [/]-center [/]-pack [/]-fit
|
|
[/] vertical [/] content [/] left [/]-wrap [/] stretch
|
|
[/] right [/] nowrap
|
|
[/] top [/] grow
|
|
[/] bottom [/] space
|
|
[/] spread
|
|
[/] gap
|
|
-> for GAP, you can custom the value with 'style="--gap:?px;"'
|
|
*/
|
|
[data-flex] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: auto;
|
|
flex-wrap: nowrap;
|
|
}
|
|
[data-flex] > * {
|
|
flex-grow: 0;
|
|
}
|
|
/*
|
|
direction : -horizontal- vertical
|
|
*/
|
|
[data-flex~="horizontal"] { flex-direction: row; }
|
|
[data-flex~="vertical"] { flex-direction: column; }
|
|
/*
|
|
width : -parent- content
|
|
*/
|
|
[data-flex~="parent"] {
|
|
width: 100%;
|
|
width: -moz-available; /* WebKit-based browsers will ignore this. */
|
|
width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
|
|
width: fill-available;
|
|
}
|
|
[data-flex~="content"] { width: fit-content; }
|
|
/*
|
|
position : -center- left right top bottom
|
|
*/
|
|
[data-flex~="left"] ,[data-flex~="vertical"][data-flex~="left"] { align-items: flex-start; text-align: left; }
|
|
[data-flex~="right"] ,[data-flex~="vertical"][data-flex~="right"] { align-items: flex-end; text-align: right; }
|
|
[data-flex~="top"] ,[data-flex~="vertical"][data-flex~="top"] { justify-content: flex-start; }
|
|
[data-flex~="bottom"] ,[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
|
|
[data-flex~="center"] ,[data-flex~="vertical"][data-flex~="center"] { align-items: center; text-align: center; }
|
|
[data-flex~="horizontal"][data-flex~="left"] { justify-content: flex-start; }
|
|
[data-flex~="horizontal"][data-flex~="right"] { justify-content: flex-end; }
|
|
[data-flex~="horizontal"][data-flex~="top"] { align-items: flex-start; }
|
|
[data-flex~="horizontal"][data-flex~="bottom"] { align-items: flex-end; }
|
|
[data-flex~="horizontal"][data-flex~="center"] { }
|
|
/*
|
|
main axis : -pack- space spread grow wrap gap
|
|
*/
|
|
[data-flex~="pack"] > * ,[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
|
|
[data-flex~="space"] ,[data-flex~="vertical"][data-flex~="space"] { justify-content: space-around; }
|
|
[data-flex~="spread"] ,[data-flex~="vertical"][data-flex~="spread"] { justify-content: space-between; }
|
|
[data-flex~="grow"] > * ,[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
|
|
[data-flex~="horizontal"][data-flex~="pack"] > * { flex-grow: 0; }
|
|
[data-flex~="horizontal"][data-flex~="space"] { justify-content: space-around; }
|
|
[data-flex~="horizontal"][data-flex~="spread"] { justify-content: space-between; }
|
|
[data-flex~="horizontal"][data-flex~="grow"] > * { flex-grow: 1; }
|
|
[data-flex~="wrap"] { flex-wrap: wrap; }
|
|
/*
|
|
cross axis : -fit- stretch
|
|
*/
|
|
[data-flex~="horizontal"][data-flex~="fit"],
|
|
[data-flex~="vertical"][data-flex~="fit"] { }
|
|
[data-flex~="horizontal"][data-flex~="stretch"],
|
|
[data-flex~="vertical"][data-flex~="stretch"] { align-items: stretch; }
|
|
|
|
|