diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 0612c911..2664becd 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -184,8 +184,7 @@ fieldset[disabled] .bulma-control-extend { } .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 9999px; border-right-color: transparent; @@ -326,9 +325,7 @@ html { overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - text-size-adjust: 100%; + text-size-adjust: 100%; } article, @@ -454,15 +451,6 @@ table th { color: #363636; } -@-webkit-keyframes spinAround { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); - } -} - @keyframes spinAround { from { transform: rotate(0deg); @@ -4459,14 +4447,10 @@ div.icon-text { } .progress:indeterminate { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-name: moveIndeterminate; - animation-name: moveIndeterminate; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; background-color: #ededed; background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%); background-position: top left; @@ -4498,15 +4482,6 @@ div.icon-text { height: 1.5rem; } -@-webkit-keyframes moveIndeterminate { - from { - background-position: 200% 0; - } - to { - background-position: -200% 0; - } -} - @keyframes moveIndeterminate { from { background-position: 200% 0; @@ -12559,14 +12534,1911 @@ label.panel-block:hover { } } +.grid { + --grid-gap: 1.5rem; + --column-count: 12; + --grid-gap-count: calc(var(--column-count) - 1); + --grid-column-min: calc(calc(100% / var(--column-count)) -calc(var(--grid-gap-count) / var(--column-count) * var(--grid-column-gap, var(--grid-gap)))); + --cell-column-span: 1; + --cell-row-span: 1; + display: grid; + grid-gap: var(--grid-gap); + grid-column-gap: var(--grid-column-gap, var(--grid-gap)); + grid-row-gap: var(--grid-row-gap, var(--grid-gap)); + grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min), 1fr)); + grid-template-rows: auto; +} + +@media screen and (max-width: 768px) { + .grid { + --column-count: 2; + } +} + +@media screen and (min-width: 769px), print { + .grid { + --column-count: 4; + } +} + +@media screen and (min-width: 1024px) { + .grid { + --column-count: 8; + } +} + +@media screen and (min-width: 1216px) { + .grid { + --column-count: 12; + } +} + +@media screen and (min-width: 1408px) { + .grid { + --column-count: 16; + } +} + +.cell { + grid-column-end: span var(--cell-column-span); + grid-column-start: var(--cell-column-start); + grid-row-end: span var(--cell-row-span); + grid-row-start: var(--cell-row-start); +} + +.cell.is-col-start-end { + --cell-column-start: -1; +} + +.cell.is-row-start-end { + --cell-row-start: -1; +} + +.cell.is-col-start-1 { + --cell-column-start: 1; +} + +.cell.is-col-from-end-1 { + --cell-column-start: -1; +} + +.cell.is-col-span-1 { + --cell-column-span: 1; +} + +.cell.is-row-start-1 { + --cell-row-start: 1; +} + +.cell.is-row-from-end-1 { + --cell-row-start: -1; +} + +.cell.is-row-span-1 { + --cell-row-span: 1; +} + +.cell.is-col-start-2 { + --cell-column-start: 2; +} + +.cell.is-col-from-end-2 { + --cell-column-start: -2; +} + +.cell.is-col-span-2 { + --cell-column-span: 2; +} + +.cell.is-row-start-2 { + --cell-row-start: 2; +} + +.cell.is-row-from-end-2 { + --cell-row-start: -2; +} + +.cell.is-row-span-2 { + --cell-row-span: 2; +} + +.cell.is-col-start-3 { + --cell-column-start: 3; +} + +.cell.is-col-from-end-3 { + --cell-column-start: -3; +} + +.cell.is-col-span-3 { + --cell-column-span: 3; +} + +.cell.is-row-start-3 { + --cell-row-start: 3; +} + +.cell.is-row-from-end-3 { + --cell-row-start: -3; +} + +.cell.is-row-span-3 { + --cell-row-span: 3; +} + +.cell.is-col-start-4 { + --cell-column-start: 4; +} + +.cell.is-col-from-end-4 { + --cell-column-start: -4; +} + +.cell.is-col-span-4 { + --cell-column-span: 4; +} + +.cell.is-row-start-4 { + --cell-row-start: 4; +} + +.cell.is-row-from-end-4 { + --cell-row-start: -4; +} + +.cell.is-row-span-4 { + --cell-row-span: 4; +} + +.cell.is-col-start-5 { + --cell-column-start: 5; +} + +.cell.is-col-from-end-5 { + --cell-column-start: -5; +} + +.cell.is-col-span-5 { + --cell-column-span: 5; +} + +.cell.is-row-start-5 { + --cell-row-start: 5; +} + +.cell.is-row-from-end-5 { + --cell-row-start: -5; +} + +.cell.is-row-span-5 { + --cell-row-span: 5; +} + +.cell.is-col-start-6 { + --cell-column-start: 6; +} + +.cell.is-col-from-end-6 { + --cell-column-start: -6; +} + +.cell.is-col-span-6 { + --cell-column-span: 6; +} + +.cell.is-row-start-6 { + --cell-row-start: 6; +} + +.cell.is-row-from-end-6 { + --cell-row-start: -6; +} + +.cell.is-row-span-6 { + --cell-row-span: 6; +} + +.cell.is-col-start-7 { + --cell-column-start: 7; +} + +.cell.is-col-from-end-7 { + --cell-column-start: -7; +} + +.cell.is-col-span-7 { + --cell-column-span: 7; +} + +.cell.is-row-start-7 { + --cell-row-start: 7; +} + +.cell.is-row-from-end-7 { + --cell-row-start: -7; +} + +.cell.is-row-span-7 { + --cell-row-span: 7; +} + +.cell.is-col-start-8 { + --cell-column-start: 8; +} + +.cell.is-col-from-end-8 { + --cell-column-start: -8; +} + +.cell.is-col-span-8 { + --cell-column-span: 8; +} + +.cell.is-row-start-8 { + --cell-row-start: 8; +} + +.cell.is-row-from-end-8 { + --cell-row-start: -8; +} + +.cell.is-row-span-8 { + --cell-row-span: 8; +} + +.cell.is-col-start-9 { + --cell-column-start: 9; +} + +.cell.is-col-from-end-9 { + --cell-column-start: -9; +} + +.cell.is-col-span-9 { + --cell-column-span: 9; +} + +.cell.is-row-start-9 { + --cell-row-start: 9; +} + +.cell.is-row-from-end-9 { + --cell-row-start: -9; +} + +.cell.is-row-span-9 { + --cell-row-span: 9; +} + +.cell.is-col-start-10 { + --cell-column-start: 10; +} + +.cell.is-col-from-end-10 { + --cell-column-start: -10; +} + +.cell.is-col-span-10 { + --cell-column-span: 10; +} + +.cell.is-row-start-10 { + --cell-row-start: 10; +} + +.cell.is-row-from-end-10 { + --cell-row-start: -10; +} + +.cell.is-row-span-10 { + --cell-row-span: 10; +} + +.cell.is-col-start-11 { + --cell-column-start: 11; +} + +.cell.is-col-from-end-11 { + --cell-column-start: -11; +} + +.cell.is-col-span-11 { + --cell-column-span: 11; +} + +.cell.is-row-start-11 { + --cell-row-start: 11; +} + +.cell.is-row-from-end-11 { + --cell-row-start: -11; +} + +.cell.is-row-span-11 { + --cell-row-span: 11; +} + +.cell.is-col-start-12 { + --cell-column-start: 12; +} + +.cell.is-col-from-end-12 { + --cell-column-start: -12; +} + +.cell.is-col-span-12 { + --cell-column-span: 12; +} + +.cell.is-row-start-12 { + --cell-row-start: 12; +} + +.cell.is-row-from-end-12 { + --cell-row-start: -12; +} + +.cell.is-row-span-12 { + --cell-row-span: 12; +} + +.cell.is-col-start-13 { + --cell-column-start: 13; +} + +.cell.is-col-from-end-13 { + --cell-column-start: -13; +} + +.cell.is-col-span-13 { + --cell-column-span: 13; +} + +.cell.is-row-start-13 { + --cell-row-start: 13; +} + +.cell.is-row-from-end-13 { + --cell-row-start: -13; +} + +.cell.is-row-span-13 { + --cell-row-span: 13; +} + +.cell.is-col-start-14 { + --cell-column-start: 14; +} + +.cell.is-col-from-end-14 { + --cell-column-start: -14; +} + +.cell.is-col-span-14 { + --cell-column-span: 14; +} + +.cell.is-row-start-14 { + --cell-row-start: 14; +} + +.cell.is-row-from-end-14 { + --cell-row-start: -14; +} + +.cell.is-row-span-14 { + --cell-row-span: 14; +} + +.cell.is-col-start-15 { + --cell-column-start: 15; +} + +.cell.is-col-from-end-15 { + --cell-column-start: -15; +} + +.cell.is-col-span-15 { + --cell-column-span: 15; +} + +.cell.is-row-start-15 { + --cell-row-start: 15; +} + +.cell.is-row-from-end-15 { + --cell-row-start: -15; +} + +.cell.is-row-span-15 { + --cell-row-span: 15; +} + +.cell.is-col-start-16 { + --cell-column-start: 16; +} + +.cell.is-col-from-end-16 { + --cell-column-start: -16; +} + +.cell.is-col-span-16 { + --cell-column-span: 16; +} + +.cell.is-row-start-16 { + --cell-row-start: 16; +} + +.cell.is-row-from-end-16 { + --cell-row-start: -16; +} + +.cell.is-row-span-16 { + --cell-row-span: 16; +} + +@media screen and (max-width: 768px) { + .cell.is-col-start-1-mobile { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-mobile { + --cell-column-start: -1; + } + .cell.is-col-span-1-mobile { + --cell-column-span: 1; + } + .cell.is-row-start-1-mobile { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-mobile { + --cell-row-start: -1; + } + .cell.is-row-span-1-mobile { + --cell-row-span: 1; + } + .cell.is-col-start-2-mobile { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-mobile { + --cell-column-start: -2; + } + .cell.is-col-span-2-mobile { + --cell-column-span: 2; + } + .cell.is-row-start-2-mobile { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-mobile { + --cell-row-start: -2; + } + .cell.is-row-span-2-mobile { + --cell-row-span: 2; + } + .cell.is-col-start-3-mobile { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-mobile { + --cell-column-start: -3; + } + .cell.is-col-span-3-mobile { + --cell-column-span: 3; + } + .cell.is-row-start-3-mobile { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-mobile { + --cell-row-start: -3; + } + .cell.is-row-span-3-mobile { + --cell-row-span: 3; + } + .cell.is-col-start-4-mobile { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-mobile { + --cell-column-start: -4; + } + .cell.is-col-span-4-mobile { + --cell-column-span: 4; + } + .cell.is-row-start-4-mobile { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-mobile { + --cell-row-start: -4; + } + .cell.is-row-span-4-mobile { + --cell-row-span: 4; + } + .cell.is-col-start-5-mobile { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-mobile { + --cell-column-start: -5; + } + .cell.is-col-span-5-mobile { + --cell-column-span: 5; + } + .cell.is-row-start-5-mobile { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-mobile { + --cell-row-start: -5; + } + .cell.is-row-span-5-mobile { + --cell-row-span: 5; + } + .cell.is-col-start-6-mobile { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-mobile { + --cell-column-start: -6; + } + .cell.is-col-span-6-mobile { + --cell-column-span: 6; + } + .cell.is-row-start-6-mobile { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-mobile { + --cell-row-start: -6; + } + .cell.is-row-span-6-mobile { + --cell-row-span: 6; + } + .cell.is-col-start-7-mobile { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-mobile { + --cell-column-start: -7; + } + .cell.is-col-span-7-mobile { + --cell-column-span: 7; + } + .cell.is-row-start-7-mobile { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-mobile { + --cell-row-start: -7; + } + .cell.is-row-span-7-mobile { + --cell-row-span: 7; + } + .cell.is-col-start-8-mobile { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-mobile { + --cell-column-start: -8; + } + .cell.is-col-span-8-mobile { + --cell-column-span: 8; + } + .cell.is-row-start-8-mobile { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-mobile { + --cell-row-start: -8; + } + .cell.is-row-span-8-mobile { + --cell-row-span: 8; + } + .cell.is-col-start-9-mobile { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-mobile { + --cell-column-start: -9; + } + .cell.is-col-span-9-mobile { + --cell-column-span: 9; + } + .cell.is-row-start-9-mobile { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-mobile { + --cell-row-start: -9; + } + .cell.is-row-span-9-mobile { + --cell-row-span: 9; + } + .cell.is-col-start-10-mobile { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-mobile { + --cell-column-start: -10; + } + .cell.is-col-span-10-mobile { + --cell-column-span: 10; + } + .cell.is-row-start-10-mobile { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-mobile { + --cell-row-start: -10; + } + .cell.is-row-span-10-mobile { + --cell-row-span: 10; + } + .cell.is-col-start-11-mobile { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-mobile { + --cell-column-start: -11; + } + .cell.is-col-span-11-mobile { + --cell-column-span: 11; + } + .cell.is-row-start-11-mobile { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-mobile { + --cell-row-start: -11; + } + .cell.is-row-span-11-mobile { + --cell-row-span: 11; + } + .cell.is-col-start-12-mobile { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-mobile { + --cell-column-start: -12; + } + .cell.is-col-span-12-mobile { + --cell-column-span: 12; + } + .cell.is-row-start-12-mobile { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-mobile { + --cell-row-start: -12; + } + .cell.is-row-span-12-mobile { + --cell-row-span: 12; + } + .cell.is-col-start-13-mobile { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-mobile { + --cell-column-start: -13; + } + .cell.is-col-span-13-mobile { + --cell-column-span: 13; + } + .cell.is-row-start-13-mobile { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-mobile { + --cell-row-start: -13; + } + .cell.is-row-span-13-mobile { + --cell-row-span: 13; + } + .cell.is-col-start-14-mobile { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-mobile { + --cell-column-start: -14; + } + .cell.is-col-span-14-mobile { + --cell-column-span: 14; + } + .cell.is-row-start-14-mobile { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-mobile { + --cell-row-start: -14; + } + .cell.is-row-span-14-mobile { + --cell-row-span: 14; + } + .cell.is-col-start-15-mobile { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-mobile { + --cell-column-start: -15; + } + .cell.is-col-span-15-mobile { + --cell-column-span: 15; + } + .cell.is-row-start-15-mobile { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-mobile { + --cell-row-start: -15; + } + .cell.is-row-span-15-mobile { + --cell-row-span: 15; + } + .cell.is-col-start-16-mobile { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-mobile { + --cell-column-start: -16; + } + .cell.is-col-span-16-mobile { + --cell-column-span: 16; + } + .cell.is-row-start-16-mobile { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-mobile { + --cell-row-start: -16; + } + .cell.is-row-span-16-mobile { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 769px), print { + .cell.is-col-start-1-tablet { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-tablet { + --cell-column-start: -1; + } + .cell.is-col-span-1-tablet { + --cell-column-span: 1; + } + .cell.is-row-start-1-tablet { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-tablet { + --cell-row-start: -1; + } + .cell.is-row-span-1-tablet { + --cell-row-span: 1; + } + .cell.is-col-start-2-tablet { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-tablet { + --cell-column-start: -2; + } + .cell.is-col-span-2-tablet { + --cell-column-span: 2; + } + .cell.is-row-start-2-tablet { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-tablet { + --cell-row-start: -2; + } + .cell.is-row-span-2-tablet { + --cell-row-span: 2; + } + .cell.is-col-start-3-tablet { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-tablet { + --cell-column-start: -3; + } + .cell.is-col-span-3-tablet { + --cell-column-span: 3; + } + .cell.is-row-start-3-tablet { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-tablet { + --cell-row-start: -3; + } + .cell.is-row-span-3-tablet { + --cell-row-span: 3; + } + .cell.is-col-start-4-tablet { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-tablet { + --cell-column-start: -4; + } + .cell.is-col-span-4-tablet { + --cell-column-span: 4; + } + .cell.is-row-start-4-tablet { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-tablet { + --cell-row-start: -4; + } + .cell.is-row-span-4-tablet { + --cell-row-span: 4; + } + .cell.is-col-start-5-tablet { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-tablet { + --cell-column-start: -5; + } + .cell.is-col-span-5-tablet { + --cell-column-span: 5; + } + .cell.is-row-start-5-tablet { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-tablet { + --cell-row-start: -5; + } + .cell.is-row-span-5-tablet { + --cell-row-span: 5; + } + .cell.is-col-start-6-tablet { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-tablet { + --cell-column-start: -6; + } + .cell.is-col-span-6-tablet { + --cell-column-span: 6; + } + .cell.is-row-start-6-tablet { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-tablet { + --cell-row-start: -6; + } + .cell.is-row-span-6-tablet { + --cell-row-span: 6; + } + .cell.is-col-start-7-tablet { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-tablet { + --cell-column-start: -7; + } + .cell.is-col-span-7-tablet { + --cell-column-span: 7; + } + .cell.is-row-start-7-tablet { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-tablet { + --cell-row-start: -7; + } + .cell.is-row-span-7-tablet { + --cell-row-span: 7; + } + .cell.is-col-start-8-tablet { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-tablet { + --cell-column-start: -8; + } + .cell.is-col-span-8-tablet { + --cell-column-span: 8; + } + .cell.is-row-start-8-tablet { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-tablet { + --cell-row-start: -8; + } + .cell.is-row-span-8-tablet { + --cell-row-span: 8; + } + .cell.is-col-start-9-tablet { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-tablet { + --cell-column-start: -9; + } + .cell.is-col-span-9-tablet { + --cell-column-span: 9; + } + .cell.is-row-start-9-tablet { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-tablet { + --cell-row-start: -9; + } + .cell.is-row-span-9-tablet { + --cell-row-span: 9; + } + .cell.is-col-start-10-tablet { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-tablet { + --cell-column-start: -10; + } + .cell.is-col-span-10-tablet { + --cell-column-span: 10; + } + .cell.is-row-start-10-tablet { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-tablet { + --cell-row-start: -10; + } + .cell.is-row-span-10-tablet { + --cell-row-span: 10; + } + .cell.is-col-start-11-tablet { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-tablet { + --cell-column-start: -11; + } + .cell.is-col-span-11-tablet { + --cell-column-span: 11; + } + .cell.is-row-start-11-tablet { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-tablet { + --cell-row-start: -11; + } + .cell.is-row-span-11-tablet { + --cell-row-span: 11; + } + .cell.is-col-start-12-tablet { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-tablet { + --cell-column-start: -12; + } + .cell.is-col-span-12-tablet { + --cell-column-span: 12; + } + .cell.is-row-start-12-tablet { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-tablet { + --cell-row-start: -12; + } + .cell.is-row-span-12-tablet { + --cell-row-span: 12; + } + .cell.is-col-start-13-tablet { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-tablet { + --cell-column-start: -13; + } + .cell.is-col-span-13-tablet { + --cell-column-span: 13; + } + .cell.is-row-start-13-tablet { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-tablet { + --cell-row-start: -13; + } + .cell.is-row-span-13-tablet { + --cell-row-span: 13; + } + .cell.is-col-start-14-tablet { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-tablet { + --cell-column-start: -14; + } + .cell.is-col-span-14-tablet { + --cell-column-span: 14; + } + .cell.is-row-start-14-tablet { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-tablet { + --cell-row-start: -14; + } + .cell.is-row-span-14-tablet { + --cell-row-span: 14; + } + .cell.is-col-start-15-tablet { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-tablet { + --cell-column-start: -15; + } + .cell.is-col-span-15-tablet { + --cell-column-span: 15; + } + .cell.is-row-start-15-tablet { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-tablet { + --cell-row-start: -15; + } + .cell.is-row-span-15-tablet { + --cell-row-span: 15; + } + .cell.is-col-start-16-tablet { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-tablet { + --cell-column-start: -16; + } + .cell.is-col-span-16-tablet { + --cell-column-span: 16; + } + .cell.is-row-start-16-tablet { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-tablet { + --cell-row-start: -16; + } + .cell.is-row-span-16-tablet { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1024px) { + .cell.is-col-start-1-desktop { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-desktop { + --cell-column-start: -1; + } + .cell.is-col-span-1-desktop { + --cell-column-span: 1; + } + .cell.is-row-start-1-desktop { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-desktop { + --cell-row-start: -1; + } + .cell.is-row-span-1-desktop { + --cell-row-span: 1; + } + .cell.is-col-start-2-desktop { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-desktop { + --cell-column-start: -2; + } + .cell.is-col-span-2-desktop { + --cell-column-span: 2; + } + .cell.is-row-start-2-desktop { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-desktop { + --cell-row-start: -2; + } + .cell.is-row-span-2-desktop { + --cell-row-span: 2; + } + .cell.is-col-start-3-desktop { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-desktop { + --cell-column-start: -3; + } + .cell.is-col-span-3-desktop { + --cell-column-span: 3; + } + .cell.is-row-start-3-desktop { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-desktop { + --cell-row-start: -3; + } + .cell.is-row-span-3-desktop { + --cell-row-span: 3; + } + .cell.is-col-start-4-desktop { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-desktop { + --cell-column-start: -4; + } + .cell.is-col-span-4-desktop { + --cell-column-span: 4; + } + .cell.is-row-start-4-desktop { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-desktop { + --cell-row-start: -4; + } + .cell.is-row-span-4-desktop { + --cell-row-span: 4; + } + .cell.is-col-start-5-desktop { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-desktop { + --cell-column-start: -5; + } + .cell.is-col-span-5-desktop { + --cell-column-span: 5; + } + .cell.is-row-start-5-desktop { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-desktop { + --cell-row-start: -5; + } + .cell.is-row-span-5-desktop { + --cell-row-span: 5; + } + .cell.is-col-start-6-desktop { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-desktop { + --cell-column-start: -6; + } + .cell.is-col-span-6-desktop { + --cell-column-span: 6; + } + .cell.is-row-start-6-desktop { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-desktop { + --cell-row-start: -6; + } + .cell.is-row-span-6-desktop { + --cell-row-span: 6; + } + .cell.is-col-start-7-desktop { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-desktop { + --cell-column-start: -7; + } + .cell.is-col-span-7-desktop { + --cell-column-span: 7; + } + .cell.is-row-start-7-desktop { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-desktop { + --cell-row-start: -7; + } + .cell.is-row-span-7-desktop { + --cell-row-span: 7; + } + .cell.is-col-start-8-desktop { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-desktop { + --cell-column-start: -8; + } + .cell.is-col-span-8-desktop { + --cell-column-span: 8; + } + .cell.is-row-start-8-desktop { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-desktop { + --cell-row-start: -8; + } + .cell.is-row-span-8-desktop { + --cell-row-span: 8; + } + .cell.is-col-start-9-desktop { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-desktop { + --cell-column-start: -9; + } + .cell.is-col-span-9-desktop { + --cell-column-span: 9; + } + .cell.is-row-start-9-desktop { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-desktop { + --cell-row-start: -9; + } + .cell.is-row-span-9-desktop { + --cell-row-span: 9; + } + .cell.is-col-start-10-desktop { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-desktop { + --cell-column-start: -10; + } + .cell.is-col-span-10-desktop { + --cell-column-span: 10; + } + .cell.is-row-start-10-desktop { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-desktop { + --cell-row-start: -10; + } + .cell.is-row-span-10-desktop { + --cell-row-span: 10; + } + .cell.is-col-start-11-desktop { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-desktop { + --cell-column-start: -11; + } + .cell.is-col-span-11-desktop { + --cell-column-span: 11; + } + .cell.is-row-start-11-desktop { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-desktop { + --cell-row-start: -11; + } + .cell.is-row-span-11-desktop { + --cell-row-span: 11; + } + .cell.is-col-start-12-desktop { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-desktop { + --cell-column-start: -12; + } + .cell.is-col-span-12-desktop { + --cell-column-span: 12; + } + .cell.is-row-start-12-desktop { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-desktop { + --cell-row-start: -12; + } + .cell.is-row-span-12-desktop { + --cell-row-span: 12; + } + .cell.is-col-start-13-desktop { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-desktop { + --cell-column-start: -13; + } + .cell.is-col-span-13-desktop { + --cell-column-span: 13; + } + .cell.is-row-start-13-desktop { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-desktop { + --cell-row-start: -13; + } + .cell.is-row-span-13-desktop { + --cell-row-span: 13; + } + .cell.is-col-start-14-desktop { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-desktop { + --cell-column-start: -14; + } + .cell.is-col-span-14-desktop { + --cell-column-span: 14; + } + .cell.is-row-start-14-desktop { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-desktop { + --cell-row-start: -14; + } + .cell.is-row-span-14-desktop { + --cell-row-span: 14; + } + .cell.is-col-start-15-desktop { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-desktop { + --cell-column-start: -15; + } + .cell.is-col-span-15-desktop { + --cell-column-span: 15; + } + .cell.is-row-start-15-desktop { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-desktop { + --cell-row-start: -15; + } + .cell.is-row-span-15-desktop { + --cell-row-span: 15; + } + .cell.is-col-start-16-desktop { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-desktop { + --cell-column-start: -16; + } + .cell.is-col-span-16-desktop { + --cell-column-span: 16; + } + .cell.is-row-start-16-desktop { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-desktop { + --cell-row-start: -16; + } + .cell.is-row-span-16-desktop { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1216px) { + .cell.is-col-start-1-widescreen { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-widescreen { + --cell-column-start: -1; + } + .cell.is-col-span-1-widescreen { + --cell-column-span: 1; + } + .cell.is-row-start-1-widescreen { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-widescreen { + --cell-row-start: -1; + } + .cell.is-row-span-1-widescreen { + --cell-row-span: 1; + } + .cell.is-col-start-2-widescreen { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-widescreen { + --cell-column-start: -2; + } + .cell.is-col-span-2-widescreen { + --cell-column-span: 2; + } + .cell.is-row-start-2-widescreen { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-widescreen { + --cell-row-start: -2; + } + .cell.is-row-span-2-widescreen { + --cell-row-span: 2; + } + .cell.is-col-start-3-widescreen { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-widescreen { + --cell-column-start: -3; + } + .cell.is-col-span-3-widescreen { + --cell-column-span: 3; + } + .cell.is-row-start-3-widescreen { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-widescreen { + --cell-row-start: -3; + } + .cell.is-row-span-3-widescreen { + --cell-row-span: 3; + } + .cell.is-col-start-4-widescreen { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-widescreen { + --cell-column-start: -4; + } + .cell.is-col-span-4-widescreen { + --cell-column-span: 4; + } + .cell.is-row-start-4-widescreen { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-widescreen { + --cell-row-start: -4; + } + .cell.is-row-span-4-widescreen { + --cell-row-span: 4; + } + .cell.is-col-start-5-widescreen { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-widescreen { + --cell-column-start: -5; + } + .cell.is-col-span-5-widescreen { + --cell-column-span: 5; + } + .cell.is-row-start-5-widescreen { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-widescreen { + --cell-row-start: -5; + } + .cell.is-row-span-5-widescreen { + --cell-row-span: 5; + } + .cell.is-col-start-6-widescreen { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-widescreen { + --cell-column-start: -6; + } + .cell.is-col-span-6-widescreen { + --cell-column-span: 6; + } + .cell.is-row-start-6-widescreen { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-widescreen { + --cell-row-start: -6; + } + .cell.is-row-span-6-widescreen { + --cell-row-span: 6; + } + .cell.is-col-start-7-widescreen { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-widescreen { + --cell-column-start: -7; + } + .cell.is-col-span-7-widescreen { + --cell-column-span: 7; + } + .cell.is-row-start-7-widescreen { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-widescreen { + --cell-row-start: -7; + } + .cell.is-row-span-7-widescreen { + --cell-row-span: 7; + } + .cell.is-col-start-8-widescreen { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-widescreen { + --cell-column-start: -8; + } + .cell.is-col-span-8-widescreen { + --cell-column-span: 8; + } + .cell.is-row-start-8-widescreen { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-widescreen { + --cell-row-start: -8; + } + .cell.is-row-span-8-widescreen { + --cell-row-span: 8; + } + .cell.is-col-start-9-widescreen { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-widescreen { + --cell-column-start: -9; + } + .cell.is-col-span-9-widescreen { + --cell-column-span: 9; + } + .cell.is-row-start-9-widescreen { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-widescreen { + --cell-row-start: -9; + } + .cell.is-row-span-9-widescreen { + --cell-row-span: 9; + } + .cell.is-col-start-10-widescreen { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-widescreen { + --cell-column-start: -10; + } + .cell.is-col-span-10-widescreen { + --cell-column-span: 10; + } + .cell.is-row-start-10-widescreen { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-widescreen { + --cell-row-start: -10; + } + .cell.is-row-span-10-widescreen { + --cell-row-span: 10; + } + .cell.is-col-start-11-widescreen { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-widescreen { + --cell-column-start: -11; + } + .cell.is-col-span-11-widescreen { + --cell-column-span: 11; + } + .cell.is-row-start-11-widescreen { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-widescreen { + --cell-row-start: -11; + } + .cell.is-row-span-11-widescreen { + --cell-row-span: 11; + } + .cell.is-col-start-12-widescreen { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-widescreen { + --cell-column-start: -12; + } + .cell.is-col-span-12-widescreen { + --cell-column-span: 12; + } + .cell.is-row-start-12-widescreen { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-widescreen { + --cell-row-start: -12; + } + .cell.is-row-span-12-widescreen { + --cell-row-span: 12; + } + .cell.is-col-start-13-widescreen { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-widescreen { + --cell-column-start: -13; + } + .cell.is-col-span-13-widescreen { + --cell-column-span: 13; + } + .cell.is-row-start-13-widescreen { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-widescreen { + --cell-row-start: -13; + } + .cell.is-row-span-13-widescreen { + --cell-row-span: 13; + } + .cell.is-col-start-14-widescreen { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-widescreen { + --cell-column-start: -14; + } + .cell.is-col-span-14-widescreen { + --cell-column-span: 14; + } + .cell.is-row-start-14-widescreen { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-widescreen { + --cell-row-start: -14; + } + .cell.is-row-span-14-widescreen { + --cell-row-span: 14; + } + .cell.is-col-start-15-widescreen { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-widescreen { + --cell-column-start: -15; + } + .cell.is-col-span-15-widescreen { + --cell-column-span: 15; + } + .cell.is-row-start-15-widescreen { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-widescreen { + --cell-row-start: -15; + } + .cell.is-row-span-15-widescreen { + --cell-row-span: 15; + } + .cell.is-col-start-16-widescreen { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-widescreen { + --cell-column-start: -16; + } + .cell.is-col-span-16-widescreen { + --cell-column-span: 16; + } + .cell.is-row-start-16-widescreen { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-widescreen { + --cell-row-start: -16; + } + .cell.is-row-span-16-widescreen { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1408px) { + .cell.is-col-start-1-fullhd { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-fullhd { + --cell-column-start: -1; + } + .cell.is-col-span-1-fullhd { + --cell-column-span: 1; + } + .cell.is-row-start-1-fullhd { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-fullhd { + --cell-row-start: -1; + } + .cell.is-row-span-1-fullhd { + --cell-row-span: 1; + } + .cell.is-col-start-2-fullhd { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-fullhd { + --cell-column-start: -2; + } + .cell.is-col-span-2-fullhd { + --cell-column-span: 2; + } + .cell.is-row-start-2-fullhd { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-fullhd { + --cell-row-start: -2; + } + .cell.is-row-span-2-fullhd { + --cell-row-span: 2; + } + .cell.is-col-start-3-fullhd { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-fullhd { + --cell-column-start: -3; + } + .cell.is-col-span-3-fullhd { + --cell-column-span: 3; + } + .cell.is-row-start-3-fullhd { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-fullhd { + --cell-row-start: -3; + } + .cell.is-row-span-3-fullhd { + --cell-row-span: 3; + } + .cell.is-col-start-4-fullhd { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-fullhd { + --cell-column-start: -4; + } + .cell.is-col-span-4-fullhd { + --cell-column-span: 4; + } + .cell.is-row-start-4-fullhd { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-fullhd { + --cell-row-start: -4; + } + .cell.is-row-span-4-fullhd { + --cell-row-span: 4; + } + .cell.is-col-start-5-fullhd { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-fullhd { + --cell-column-start: -5; + } + .cell.is-col-span-5-fullhd { + --cell-column-span: 5; + } + .cell.is-row-start-5-fullhd { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-fullhd { + --cell-row-start: -5; + } + .cell.is-row-span-5-fullhd { + --cell-row-span: 5; + } + .cell.is-col-start-6-fullhd { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-fullhd { + --cell-column-start: -6; + } + .cell.is-col-span-6-fullhd { + --cell-column-span: 6; + } + .cell.is-row-start-6-fullhd { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-fullhd { + --cell-row-start: -6; + } + .cell.is-row-span-6-fullhd { + --cell-row-span: 6; + } + .cell.is-col-start-7-fullhd { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-fullhd { + --cell-column-start: -7; + } + .cell.is-col-span-7-fullhd { + --cell-column-span: 7; + } + .cell.is-row-start-7-fullhd { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-fullhd { + --cell-row-start: -7; + } + .cell.is-row-span-7-fullhd { + --cell-row-span: 7; + } + .cell.is-col-start-8-fullhd { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-fullhd { + --cell-column-start: -8; + } + .cell.is-col-span-8-fullhd { + --cell-column-span: 8; + } + .cell.is-row-start-8-fullhd { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-fullhd { + --cell-row-start: -8; + } + .cell.is-row-span-8-fullhd { + --cell-row-span: 8; + } + .cell.is-col-start-9-fullhd { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-fullhd { + --cell-column-start: -9; + } + .cell.is-col-span-9-fullhd { + --cell-column-span: 9; + } + .cell.is-row-start-9-fullhd { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-fullhd { + --cell-row-start: -9; + } + .cell.is-row-span-9-fullhd { + --cell-row-span: 9; + } + .cell.is-col-start-10-fullhd { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-fullhd { + --cell-column-start: -10; + } + .cell.is-col-span-10-fullhd { + --cell-column-span: 10; + } + .cell.is-row-start-10-fullhd { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-fullhd { + --cell-row-start: -10; + } + .cell.is-row-span-10-fullhd { + --cell-row-span: 10; + } + .cell.is-col-start-11-fullhd { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-fullhd { + --cell-column-start: -11; + } + .cell.is-col-span-11-fullhd { + --cell-column-span: 11; + } + .cell.is-row-start-11-fullhd { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-fullhd { + --cell-row-start: -11; + } + .cell.is-row-span-11-fullhd { + --cell-row-span: 11; + } + .cell.is-col-start-12-fullhd { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-fullhd { + --cell-column-start: -12; + } + .cell.is-col-span-12-fullhd { + --cell-column-span: 12; + } + .cell.is-row-start-12-fullhd { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-fullhd { + --cell-row-start: -12; + } + .cell.is-row-span-12-fullhd { + --cell-row-span: 12; + } + .cell.is-col-start-13-fullhd { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-fullhd { + --cell-column-start: -13; + } + .cell.is-col-span-13-fullhd { + --cell-column-span: 13; + } + .cell.is-row-start-13-fullhd { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-fullhd { + --cell-row-start: -13; + } + .cell.is-row-span-13-fullhd { + --cell-row-span: 13; + } + .cell.is-col-start-14-fullhd { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-fullhd { + --cell-column-start: -14; + } + .cell.is-col-span-14-fullhd { + --cell-column-span: 14; + } + .cell.is-row-start-14-fullhd { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-fullhd { + --cell-row-start: -14; + } + .cell.is-row-span-14-fullhd { + --cell-row-span: 14; + } + .cell.is-col-start-15-fullhd { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-fullhd { + --cell-column-start: -15; + } + .cell.is-col-span-15-fullhd { + --cell-column-span: 15; + } + .cell.is-row-start-15-fullhd { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-fullhd { + --cell-row-start: -15; + } + .cell.is-row-span-15-fullhd { + --cell-row-span: 15; + } + .cell.is-col-start-16-fullhd { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-fullhd { + --cell-column-start: -16; + } + .cell.is-col-span-16-fullhd { + --cell-column-span: 16; + } + .cell.is-row-start-16-fullhd { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-fullhd { + --cell-row-start: -16; + } + .cell.is-row-span-16-fullhd { + --cell-row-span: 16; + } +} + .tile { align-items: stretch; display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; - min-height: -webkit-min-content; - min-height: -moz-min-content; min-height: min-content; } @@ -17199,7 +19071,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { .bd-anchors { padding: var(--docs-side-padding); - position: -webkit-sticky; position: sticky; top: 0; } @@ -17638,7 +19509,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { max-height: 100vh; overflow-y: auto; padding: var(--docs-side-padding); - position: -webkit-sticky; position: sticky; top: 0; } @@ -21232,8 +23102,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { --device-md-width: 24px; --device-lg-height: 40px; --device-lg-width: 48px; - -webkit-animation: bdDeviceBounce 3.5s infinite; - animation: bdDeviceBounce 3.5s infinite; + animation: bdDeviceBounce 3.5s infinite; border: 0 solid hsl(var(--device-deg), 100%, 53%); border-width: var(--device-y) var(--device-x); border-radius: 0.375em; @@ -21278,44 +23147,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { color: #333333; } -@-webkit-keyframes bdDeviceBounce { - 0% { - --device-deg: var(--device-sm-deg); - height: var(--device-sm-height); - width: var(--device-sm-width); - } - 28% { - --device-deg: var(--device-sm-deg); - height: var(--device-sm-height); - width: var(--device-sm-width); - } - 33% { - --device-deg: var(--device-md-deg); - height: var(--device-md-height); - width: var(--device-md-width); - } - 62% { - --device-deg: var(--device-md-deg); - height: var(--device-md-height); - width: var(--device-md-width); - } - 67% { - --device-deg: var(--device-lg-deg); - height: var(--device-lg-height); - width: var(--device-lg-width); - } - 95% { - --device-deg: var(--device-lg-deg); - height: var(--device-lg-height); - width: var(--device-lg-width); - } - 100% { - --device-deg: var(--device-sm-deg); - height: var(--device-sm-height); - width: var(--device-sm-width); - } -} - @keyframes bdDeviceBounce { 0% { --device-deg: var(--device-sm-deg); @@ -21354,15 +23185,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdGrow { - from { - transform: scale(0); - } - to { - transform: scale(1); - } -} - @keyframes bdGrow { from { transform: scale(0); @@ -21372,17 +23194,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdSlideDown { - from { - opacity: 0; - transform: translateY(-1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideDown { from { opacity: 0; @@ -21394,17 +23205,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdSlideUp { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideUp { from { opacity: 0; @@ -21417,96 +23217,67 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); - animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); + animation-duration: 500ms; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); transform-origin: center center; } .bd-focus-item .title { - -webkit-animation-name: bdSlideDown; - animation-name: bdSlideDown; + animation-name: bdSlideDown; } .bd-focus-item .subtitle { - -webkit-animation-name: bdSlideUp; - animation-name: bdSlideUp; + animation-name: bdSlideUp; } .bd-focus-item:nth-child(1) .title { - -webkit-animation-delay: 0; - animation-delay: 0; + animation-delay: 0; } .bd-focus-item:nth-child(1) .subtitle { - -webkit-animation-delay: 125ms; - animation-delay: 125ms; + animation-delay: 125ms; } .bd-focus-item:nth-child(2) .title { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; + animation-delay: 500ms; } .bd-focus-item:nth-child(2) .subtitle { - -webkit-animation-delay: 625ms; - animation-delay: 625ms; + animation-delay: 625ms; } .bd-focus-item:nth-child(3) .title { - -webkit-animation-delay: 1000ms; - animation-delay: 1000ms; + animation-delay: 1000ms; } .bd-focus-item:nth-child(3) .subtitle { - -webkit-animation-delay: 1125ms; - animation-delay: 1125ms; + animation-delay: 1125ms; } .bd-focus-item:nth-child(4) .title { - -webkit-animation-delay: 1500ms; - animation-delay: 1500ms; + animation-delay: 1500ms; } .bd-focus-item:nth-child(4) .subtitle { - -webkit-animation-delay: 1625ms; - animation-delay: 1625ms; + animation-delay: 1625ms; } .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop { - -webkit-animation-name: bdGrow; - animation-name: bdGrow; + animation-name: bdGrow; transform-origin: bottom center; } .bd-focus-mobile { - -webkit-animation-delay: 0; - animation-delay: 0; + animation-delay: 0; } .bd-focus-tablet { - -webkit-animation-delay: 250ms; - animation-delay: 250ms; + animation-delay: 250ms; } .bd-focus-desktop { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; -} - -@-webkit-keyframes bdCube1 { - 0% { - transform: translate3d(0, -50px, 0); - opacity: 0; - } - 25%, - 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } + animation-delay: 500ms; } @keyframes bdCube1 { @@ -21521,18 +23292,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdCube2 { - 0% { - transform: translate3d(-40px, 30px, 0); - opacity: 0; - } - 25%, - 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube2 { 0% { transform: translate3d(-40px, 30px, 0); @@ -21545,18 +23304,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdCube3 { - 0% { - transform: translate3d(40px, 30px, 0); - opacity: 0; - } - 25%, - 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube3 { 0% { transform: translate3d(40px, 30px, 0); @@ -21570,42 +23317,24 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 { - -webkit-animation-direction: alternate; - animation-direction: alternate; - -webkit-animation-duration: 2000ms; - animation-duration: 2000ms; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; + animation-direction: alternate; + animation-duration: 2000ms; + animation-iteration-count: infinite; } .bd-focus-cube-1 { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; - -webkit-animation-name: bdCube1; - animation-name: bdCube1; + animation-delay: 500ms; + animation-name: bdCube1; } .bd-focus-cube-2 { - -webkit-animation-name: bdCube2; - animation-name: bdCube2; - -webkit-animation-delay: 750ms; - animation-delay: 750ms; + animation-name: bdCube2; + animation-delay: 750ms; } .bd-focus-cube-3 { - -webkit-animation-name: bdCube3; - animation-name: bdCube3; - -webkit-animation-delay: 1000ms; - animation-delay: 1000ms; -} - -@-webkit-keyframes bdFadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } + animation-name: bdCube3; + animation-delay: 1000ms; } @keyframes bdFadeIn { @@ -21617,17 +23346,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdSlowIn { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdSlowIn { from { opacity: 0; @@ -21639,17 +23357,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdScaleIn { - from { - opacity: 0; - transform: scale(0); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdScaleIn { from { opacity: 0; @@ -21662,103 +23369,14 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bd-focus-css3 { - -webkit-animation-delay: 1000ms; - animation-delay: 1000ms; - -webkit-animation-name: bdScaleIn; - animation-name: bdScaleIn; + animation-delay: 1000ms; + animation-name: bdScaleIn; } .bd-focus-github { - -webkit-animation-delay: 1500ms; - animation-delay: 1500ms; - -webkit-animation-duration: 1500ms; - animation-duration: 1500ms; - -webkit-animation-name: bdJellyPop; - animation-name: bdJellyPop; -} - -@-webkit-keyframes bdJellyPop { - 0% { - opacity: 0; - transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 3.4% { - opacity: 1; - transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 4.7% { - transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 6.81% { - transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 9.41% { - transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 10.21% { - transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 13.61% { - transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 14.11% { - transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 17.52% { - transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 18.72% { - transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 21.32% { - transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 24.32% { - transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 25.23% { - transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.03% { - transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.93% { - transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 35.54% { - transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 36.74% { - transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 41.04% { - transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 44.44% { - transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 52.15% { - transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 59.86% { - transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 63.26% { - transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 75.28% { - transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 85.49% { - transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 90.69% { - transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 100% { - opacity: 1; - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } + animation-delay: 1500ms; + animation-duration: 1500ms; + animation-name: bdJellyPop; } @keyframes bdJellyPop { @@ -21854,23 +23472,18 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { .bd-best-list { align-items: stretch; - -webkit-animation-duration: 93.6s; - animation-duration: 93.6s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + animation-duration: 93.6s; + animation-iteration-count: infinite; + animation-timing-function: linear; display: flex; left: 0; position: absolute; top: 1.5rem; - -webkit-animation-name: bdBestCarousel; - animation-name: bdBestCarousel; + animation-name: bdBestCarousel; } .bd-best-list:hover { - -webkit-animation-play-state: paused; - animation-play-state: paused; + animation-play-state: paused; } .bd-best-item { @@ -21918,12 +23531,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { width: auto; } -@-webkit-keyframes bdBestCarousel { - 100% { - transform: translateX(calc(-100% + 3120px)); - } -} - @keyframes bdBestCarousel { 100% { transform: translateX(calc(-100% + 3120px)); @@ -22897,8 +24504,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bulma-loader-mixin { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 9999px; border-right-color: transparent; @@ -23139,5 +24745,3 @@ fieldset[disabled] .bulma-control-mixin { background: blue; } } - -/*# sourceMappingURL=bulma-docs.css.map */ \ No newline at end of file diff --git a/docs/css/bulma.css b/docs/css/bulma.css index 2c5a3c13..6a0b450c 100644 --- a/docs/css/bulma.css +++ b/docs/css/bulma.css @@ -1,4 +1,4 @@ -/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */ +/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ /* Bulma Utilities */ .button, .input, .textarea, .select select, .file-cta, .file-name, .pagination-previous, @@ -2812,7 +2812,7 @@ div.icon-text { } .table th:not([align]) { - text-align: inherit; + text-align: left; } .table tr.is-selected { @@ -8847,6 +8847,3253 @@ label.panel-block:hover { } } +.grid { + --grid-gap: 1.5rem; + --column-count: 12; + --grid-gap-count: calc(var(--column-count) - 1); + --grid-column-min: calc(calc(100% / var(--column-count)) - calc(var(--grid-gap-count) / var(--column-count) * var(--grid-column-gap, var(--grid-gap)))); + --cell-column-span: 1; + --cell-row-span: 1; + display: grid; + grid-gap: var(--grid-gap); + grid-column-gap: var(--grid-column-gap, var(--grid-gap)); + grid-row-gap: var(--grid-row-gap, var(--grid-gap)); + grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min), 1fr)); + grid-template-rows: auto; +} + +@media screen and (max-width: 768px) { + .grid { + --column-count: 2; + } +} + +@media screen and (min-width: 769px), print { + .grid { + --column-count: 4; + } +} + +@media screen and (min-width: 1024px) { + .grid { + --column-count: 8; + } +} + +@media screen and (min-width: 1216px) { + .grid { + --column-count: 12; + } +} + +@media screen and (min-width: 1408px) { + .grid { + --column-count: 16; + } +} + +.cell { + background-color: lavender; + border-radius: 1em; + grid-column-end: span var(--cell-column-span); + grid-column-start: var(--cell-column-start); + grid-row-end: span var(--cell-row-span); + grid-row-start: var(--cell-row-start); + padding: 0.75em; +} + +.cell.is-col-start-end { + --cell-column-start: -1; +} + +.cell.is-row-start-end { + --cell-row-start: -1; +} + +.cell.is-col-start-1 { + --cell-column-start: 1; +} + +.cell.is-col-from-end-1 { + --cell-column-start: -1; +} + +.cell.is-col-span-1 { + --cell-column-span: 1; +} + +.cell.is-row-start-1 { + --cell-row-start: 1; +} + +.cell.is-row-from-end-1 { + --cell-row-start: -1; +} + +.cell.is-row-span-1 { + --cell-row-span: 1; +} + +.cell.is-col-start-2 { + --cell-column-start: 2; +} + +.cell.is-col-from-end-2 { + --cell-column-start: -2; +} + +.cell.is-col-span-2 { + --cell-column-span: 2; +} + +.cell.is-row-start-2 { + --cell-row-start: 2; +} + +.cell.is-row-from-end-2 { + --cell-row-start: -2; +} + +.cell.is-row-span-2 { + --cell-row-span: 2; +} + +.cell.is-col-start-3 { + --cell-column-start: 3; +} + +.cell.is-col-from-end-3 { + --cell-column-start: -3; +} + +.cell.is-col-span-3 { + --cell-column-span: 3; +} + +.cell.is-row-start-3 { + --cell-row-start: 3; +} + +.cell.is-row-from-end-3 { + --cell-row-start: -3; +} + +.cell.is-row-span-3 { + --cell-row-span: 3; +} + +.cell.is-col-start-4 { + --cell-column-start: 4; +} + +.cell.is-col-from-end-4 { + --cell-column-start: -4; +} + +.cell.is-col-span-4 { + --cell-column-span: 4; +} + +.cell.is-row-start-4 { + --cell-row-start: 4; +} + +.cell.is-row-from-end-4 { + --cell-row-start: -4; +} + +.cell.is-row-span-4 { + --cell-row-span: 4; +} + +.cell.is-col-start-5 { + --cell-column-start: 5; +} + +.cell.is-col-from-end-5 { + --cell-column-start: -5; +} + +.cell.is-col-span-5 { + --cell-column-span: 5; +} + +.cell.is-row-start-5 { + --cell-row-start: 5; +} + +.cell.is-row-from-end-5 { + --cell-row-start: -5; +} + +.cell.is-row-span-5 { + --cell-row-span: 5; +} + +.cell.is-col-start-6 { + --cell-column-start: 6; +} + +.cell.is-col-from-end-6 { + --cell-column-start: -6; +} + +.cell.is-col-span-6 { + --cell-column-span: 6; +} + +.cell.is-row-start-6 { + --cell-row-start: 6; +} + +.cell.is-row-from-end-6 { + --cell-row-start: -6; +} + +.cell.is-row-span-6 { + --cell-row-span: 6; +} + +.cell.is-col-start-7 { + --cell-column-start: 7; +} + +.cell.is-col-from-end-7 { + --cell-column-start: -7; +} + +.cell.is-col-span-7 { + --cell-column-span: 7; +} + +.cell.is-row-start-7 { + --cell-row-start: 7; +} + +.cell.is-row-from-end-7 { + --cell-row-start: -7; +} + +.cell.is-row-span-7 { + --cell-row-span: 7; +} + +.cell.is-col-start-8 { + --cell-column-start: 8; +} + +.cell.is-col-from-end-8 { + --cell-column-start: -8; +} + +.cell.is-col-span-8 { + --cell-column-span: 8; +} + +.cell.is-row-start-8 { + --cell-row-start: 8; +} + +.cell.is-row-from-end-8 { + --cell-row-start: -8; +} + +.cell.is-row-span-8 { + --cell-row-span: 8; +} + +.cell.is-col-start-9 { + --cell-column-start: 9; +} + +.cell.is-col-from-end-9 { + --cell-column-start: -9; +} + +.cell.is-col-span-9 { + --cell-column-span: 9; +} + +.cell.is-row-start-9 { + --cell-row-start: 9; +} + +.cell.is-row-from-end-9 { + --cell-row-start: -9; +} + +.cell.is-row-span-9 { + --cell-row-span: 9; +} + +.cell.is-col-start-10 { + --cell-column-start: 10; +} + +.cell.is-col-from-end-10 { + --cell-column-start: -10; +} + +.cell.is-col-span-10 { + --cell-column-span: 10; +} + +.cell.is-row-start-10 { + --cell-row-start: 10; +} + +.cell.is-row-from-end-10 { + --cell-row-start: -10; +} + +.cell.is-row-span-10 { + --cell-row-span: 10; +} + +.cell.is-col-start-11 { + --cell-column-start: 11; +} + +.cell.is-col-from-end-11 { + --cell-column-start: -11; +} + +.cell.is-col-span-11 { + --cell-column-span: 11; +} + +.cell.is-row-start-11 { + --cell-row-start: 11; +} + +.cell.is-row-from-end-11 { + --cell-row-start: -11; +} + +.cell.is-row-span-11 { + --cell-row-span: 11; +} + +.cell.is-col-start-12 { + --cell-column-start: 12; +} + +.cell.is-col-from-end-12 { + --cell-column-start: -12; +} + +.cell.is-col-span-12 { + --cell-column-span: 12; +} + +.cell.is-row-start-12 { + --cell-row-start: 12; +} + +.cell.is-row-from-end-12 { + --cell-row-start: -12; +} + +.cell.is-row-span-12 { + --cell-row-span: 12; +} + +.cell.is-col-start-13 { + --cell-column-start: 13; +} + +.cell.is-col-from-end-13 { + --cell-column-start: -13; +} + +.cell.is-col-span-13 { + --cell-column-span: 13; +} + +.cell.is-row-start-13 { + --cell-row-start: 13; +} + +.cell.is-row-from-end-13 { + --cell-row-start: -13; +} + +.cell.is-row-span-13 { + --cell-row-span: 13; +} + +.cell.is-col-start-14 { + --cell-column-start: 14; +} + +.cell.is-col-from-end-14 { + --cell-column-start: -14; +} + +.cell.is-col-span-14 { + --cell-column-span: 14; +} + +.cell.is-row-start-14 { + --cell-row-start: 14; +} + +.cell.is-row-from-end-14 { + --cell-row-start: -14; +} + +.cell.is-row-span-14 { + --cell-row-span: 14; +} + +.cell.is-col-start-15 { + --cell-column-start: 15; +} + +.cell.is-col-from-end-15 { + --cell-column-start: -15; +} + +.cell.is-col-span-15 { + --cell-column-span: 15; +} + +.cell.is-row-start-15 { + --cell-row-start: 15; +} + +.cell.is-row-from-end-15 { + --cell-row-start: -15; +} + +.cell.is-row-span-15 { + --cell-row-span: 15; +} + +.cell.is-col-start-16 { + --cell-column-start: 16; +} + +.cell.is-col-from-end-16 { + --cell-column-start: -16; +} + +.cell.is-col-span-16 { + --cell-column-span: 16; +} + +.cell.is-row-start-16 { + --cell-row-start: 16; +} + +.cell.is-row-from-end-16 { + --cell-row-start: -16; +} + +.cell.is-row-span-16 { + --cell-row-span: 16; +} + +@media screen and (max-width: 768px) { + .cell.is-col-start-1-mobile { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-mobile { + --cell-column-start: -1; + } + .cell.is-col-span-1-mobile { + --cell-column-span: 1; + } + .cell.is-row-start-1-mobile { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-mobile { + --cell-row-start: -1; + } + .cell.is-row-span-1-mobile { + --cell-row-span: 1; + } + .cell.is-col-start-2-mobile { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-mobile { + --cell-column-start: -2; + } + .cell.is-col-span-2-mobile { + --cell-column-span: 2; + } + .cell.is-row-start-2-mobile { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-mobile { + --cell-row-start: -2; + } + .cell.is-row-span-2-mobile { + --cell-row-span: 2; + } + .cell.is-col-start-3-mobile { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-mobile { + --cell-column-start: -3; + } + .cell.is-col-span-3-mobile { + --cell-column-span: 3; + } + .cell.is-row-start-3-mobile { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-mobile { + --cell-row-start: -3; + } + .cell.is-row-span-3-mobile { + --cell-row-span: 3; + } + .cell.is-col-start-4-mobile { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-mobile { + --cell-column-start: -4; + } + .cell.is-col-span-4-mobile { + --cell-column-span: 4; + } + .cell.is-row-start-4-mobile { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-mobile { + --cell-row-start: -4; + } + .cell.is-row-span-4-mobile { + --cell-row-span: 4; + } + .cell.is-col-start-5-mobile { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-mobile { + --cell-column-start: -5; + } + .cell.is-col-span-5-mobile { + --cell-column-span: 5; + } + .cell.is-row-start-5-mobile { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-mobile { + --cell-row-start: -5; + } + .cell.is-row-span-5-mobile { + --cell-row-span: 5; + } + .cell.is-col-start-6-mobile { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-mobile { + --cell-column-start: -6; + } + .cell.is-col-span-6-mobile { + --cell-column-span: 6; + } + .cell.is-row-start-6-mobile { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-mobile { + --cell-row-start: -6; + } + .cell.is-row-span-6-mobile { + --cell-row-span: 6; + } + .cell.is-col-start-7-mobile { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-mobile { + --cell-column-start: -7; + } + .cell.is-col-span-7-mobile { + --cell-column-span: 7; + } + .cell.is-row-start-7-mobile { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-mobile { + --cell-row-start: -7; + } + .cell.is-row-span-7-mobile { + --cell-row-span: 7; + } + .cell.is-col-start-8-mobile { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-mobile { + --cell-column-start: -8; + } + .cell.is-col-span-8-mobile { + --cell-column-span: 8; + } + .cell.is-row-start-8-mobile { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-mobile { + --cell-row-start: -8; + } + .cell.is-row-span-8-mobile { + --cell-row-span: 8; + } + .cell.is-col-start-9-mobile { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-mobile { + --cell-column-start: -9; + } + .cell.is-col-span-9-mobile { + --cell-column-span: 9; + } + .cell.is-row-start-9-mobile { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-mobile { + --cell-row-start: -9; + } + .cell.is-row-span-9-mobile { + --cell-row-span: 9; + } + .cell.is-col-start-10-mobile { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-mobile { + --cell-column-start: -10; + } + .cell.is-col-span-10-mobile { + --cell-column-span: 10; + } + .cell.is-row-start-10-mobile { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-mobile { + --cell-row-start: -10; + } + .cell.is-row-span-10-mobile { + --cell-row-span: 10; + } + .cell.is-col-start-11-mobile { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-mobile { + --cell-column-start: -11; + } + .cell.is-col-span-11-mobile { + --cell-column-span: 11; + } + .cell.is-row-start-11-mobile { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-mobile { + --cell-row-start: -11; + } + .cell.is-row-span-11-mobile { + --cell-row-span: 11; + } + .cell.is-col-start-12-mobile { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-mobile { + --cell-column-start: -12; + } + .cell.is-col-span-12-mobile { + --cell-column-span: 12; + } + .cell.is-row-start-12-mobile { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-mobile { + --cell-row-start: -12; + } + .cell.is-row-span-12-mobile { + --cell-row-span: 12; + } + .cell.is-col-start-13-mobile { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-mobile { + --cell-column-start: -13; + } + .cell.is-col-span-13-mobile { + --cell-column-span: 13; + } + .cell.is-row-start-13-mobile { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-mobile { + --cell-row-start: -13; + } + .cell.is-row-span-13-mobile { + --cell-row-span: 13; + } + .cell.is-col-start-14-mobile { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-mobile { + --cell-column-start: -14; + } + .cell.is-col-span-14-mobile { + --cell-column-span: 14; + } + .cell.is-row-start-14-mobile { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-mobile { + --cell-row-start: -14; + } + .cell.is-row-span-14-mobile { + --cell-row-span: 14; + } + .cell.is-col-start-15-mobile { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-mobile { + --cell-column-start: -15; + } + .cell.is-col-span-15-mobile { + --cell-column-span: 15; + } + .cell.is-row-start-15-mobile { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-mobile { + --cell-row-start: -15; + } + .cell.is-row-span-15-mobile { + --cell-row-span: 15; + } + .cell.is-col-start-16-mobile { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-mobile { + --cell-column-start: -16; + } + .cell.is-col-span-16-mobile { + --cell-column-span: 16; + } + .cell.is-row-start-16-mobile { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-mobile { + --cell-row-start: -16; + } + .cell.is-row-span-16-mobile { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 769px), print { + .cell.is-col-start-1-tablet { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-tablet { + --cell-column-start: -1; + } + .cell.is-col-span-1-tablet { + --cell-column-span: 1; + } + .cell.is-row-start-1-tablet { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-tablet { + --cell-row-start: -1; + } + .cell.is-row-span-1-tablet { + --cell-row-span: 1; + } + .cell.is-col-start-2-tablet { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-tablet { + --cell-column-start: -2; + } + .cell.is-col-span-2-tablet { + --cell-column-span: 2; + } + .cell.is-row-start-2-tablet { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-tablet { + --cell-row-start: -2; + } + .cell.is-row-span-2-tablet { + --cell-row-span: 2; + } + .cell.is-col-start-3-tablet { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-tablet { + --cell-column-start: -3; + } + .cell.is-col-span-3-tablet { + --cell-column-span: 3; + } + .cell.is-row-start-3-tablet { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-tablet { + --cell-row-start: -3; + } + .cell.is-row-span-3-tablet { + --cell-row-span: 3; + } + .cell.is-col-start-4-tablet { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-tablet { + --cell-column-start: -4; + } + .cell.is-col-span-4-tablet { + --cell-column-span: 4; + } + .cell.is-row-start-4-tablet { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-tablet { + --cell-row-start: -4; + } + .cell.is-row-span-4-tablet { + --cell-row-span: 4; + } + .cell.is-col-start-5-tablet { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-tablet { + --cell-column-start: -5; + } + .cell.is-col-span-5-tablet { + --cell-column-span: 5; + } + .cell.is-row-start-5-tablet { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-tablet { + --cell-row-start: -5; + } + .cell.is-row-span-5-tablet { + --cell-row-span: 5; + } + .cell.is-col-start-6-tablet { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-tablet { + --cell-column-start: -6; + } + .cell.is-col-span-6-tablet { + --cell-column-span: 6; + } + .cell.is-row-start-6-tablet { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-tablet { + --cell-row-start: -6; + } + .cell.is-row-span-6-tablet { + --cell-row-span: 6; + } + .cell.is-col-start-7-tablet { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-tablet { + --cell-column-start: -7; + } + .cell.is-col-span-7-tablet { + --cell-column-span: 7; + } + .cell.is-row-start-7-tablet { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-tablet { + --cell-row-start: -7; + } + .cell.is-row-span-7-tablet { + --cell-row-span: 7; + } + .cell.is-col-start-8-tablet { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-tablet { + --cell-column-start: -8; + } + .cell.is-col-span-8-tablet { + --cell-column-span: 8; + } + .cell.is-row-start-8-tablet { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-tablet { + --cell-row-start: -8; + } + .cell.is-row-span-8-tablet { + --cell-row-span: 8; + } + .cell.is-col-start-9-tablet { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-tablet { + --cell-column-start: -9; + } + .cell.is-col-span-9-tablet { + --cell-column-span: 9; + } + .cell.is-row-start-9-tablet { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-tablet { + --cell-row-start: -9; + } + .cell.is-row-span-9-tablet { + --cell-row-span: 9; + } + .cell.is-col-start-10-tablet { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-tablet { + --cell-column-start: -10; + } + .cell.is-col-span-10-tablet { + --cell-column-span: 10; + } + .cell.is-row-start-10-tablet { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-tablet { + --cell-row-start: -10; + } + .cell.is-row-span-10-tablet { + --cell-row-span: 10; + } + .cell.is-col-start-11-tablet { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-tablet { + --cell-column-start: -11; + } + .cell.is-col-span-11-tablet { + --cell-column-span: 11; + } + .cell.is-row-start-11-tablet { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-tablet { + --cell-row-start: -11; + } + .cell.is-row-span-11-tablet { + --cell-row-span: 11; + } + .cell.is-col-start-12-tablet { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-tablet { + --cell-column-start: -12; + } + .cell.is-col-span-12-tablet { + --cell-column-span: 12; + } + .cell.is-row-start-12-tablet { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-tablet { + --cell-row-start: -12; + } + .cell.is-row-span-12-tablet { + --cell-row-span: 12; + } + .cell.is-col-start-13-tablet { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-tablet { + --cell-column-start: -13; + } + .cell.is-col-span-13-tablet { + --cell-column-span: 13; + } + .cell.is-row-start-13-tablet { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-tablet { + --cell-row-start: -13; + } + .cell.is-row-span-13-tablet { + --cell-row-span: 13; + } + .cell.is-col-start-14-tablet { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-tablet { + --cell-column-start: -14; + } + .cell.is-col-span-14-tablet { + --cell-column-span: 14; + } + .cell.is-row-start-14-tablet { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-tablet { + --cell-row-start: -14; + } + .cell.is-row-span-14-tablet { + --cell-row-span: 14; + } + .cell.is-col-start-15-tablet { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-tablet { + --cell-column-start: -15; + } + .cell.is-col-span-15-tablet { + --cell-column-span: 15; + } + .cell.is-row-start-15-tablet { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-tablet { + --cell-row-start: -15; + } + .cell.is-row-span-15-tablet { + --cell-row-span: 15; + } + .cell.is-col-start-16-tablet { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-tablet { + --cell-column-start: -16; + } + .cell.is-col-span-16-tablet { + --cell-column-span: 16; + } + .cell.is-row-start-16-tablet { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-tablet { + --cell-row-start: -16; + } + .cell.is-row-span-16-tablet { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .cell.is-col-start-1-tablet-only { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-tablet-only { + --cell-column-start: -1; + } + .cell.is-col-span-1-tablet-only { + --cell-column-span: 1; + } + .cell.is-row-start-1-tablet-only { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-tablet-only { + --cell-row-start: -1; + } + .cell.is-row-span-1-tablet-only { + --cell-row-span: 1; + } + .cell.is-col-start-2-tablet-only { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-tablet-only { + --cell-column-start: -2; + } + .cell.is-col-span-2-tablet-only { + --cell-column-span: 2; + } + .cell.is-row-start-2-tablet-only { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-tablet-only { + --cell-row-start: -2; + } + .cell.is-row-span-2-tablet-only { + --cell-row-span: 2; + } + .cell.is-col-start-3-tablet-only { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-tablet-only { + --cell-column-start: -3; + } + .cell.is-col-span-3-tablet-only { + --cell-column-span: 3; + } + .cell.is-row-start-3-tablet-only { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-tablet-only { + --cell-row-start: -3; + } + .cell.is-row-span-3-tablet-only { + --cell-row-span: 3; + } + .cell.is-col-start-4-tablet-only { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-tablet-only { + --cell-column-start: -4; + } + .cell.is-col-span-4-tablet-only { + --cell-column-span: 4; + } + .cell.is-row-start-4-tablet-only { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-tablet-only { + --cell-row-start: -4; + } + .cell.is-row-span-4-tablet-only { + --cell-row-span: 4; + } + .cell.is-col-start-5-tablet-only { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-tablet-only { + --cell-column-start: -5; + } + .cell.is-col-span-5-tablet-only { + --cell-column-span: 5; + } + .cell.is-row-start-5-tablet-only { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-tablet-only { + --cell-row-start: -5; + } + .cell.is-row-span-5-tablet-only { + --cell-row-span: 5; + } + .cell.is-col-start-6-tablet-only { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-tablet-only { + --cell-column-start: -6; + } + .cell.is-col-span-6-tablet-only { + --cell-column-span: 6; + } + .cell.is-row-start-6-tablet-only { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-tablet-only { + --cell-row-start: -6; + } + .cell.is-row-span-6-tablet-only { + --cell-row-span: 6; + } + .cell.is-col-start-7-tablet-only { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-tablet-only { + --cell-column-start: -7; + } + .cell.is-col-span-7-tablet-only { + --cell-column-span: 7; + } + .cell.is-row-start-7-tablet-only { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-tablet-only { + --cell-row-start: -7; + } + .cell.is-row-span-7-tablet-only { + --cell-row-span: 7; + } + .cell.is-col-start-8-tablet-only { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-tablet-only { + --cell-column-start: -8; + } + .cell.is-col-span-8-tablet-only { + --cell-column-span: 8; + } + .cell.is-row-start-8-tablet-only { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-tablet-only { + --cell-row-start: -8; + } + .cell.is-row-span-8-tablet-only { + --cell-row-span: 8; + } + .cell.is-col-start-9-tablet-only { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-tablet-only { + --cell-column-start: -9; + } + .cell.is-col-span-9-tablet-only { + --cell-column-span: 9; + } + .cell.is-row-start-9-tablet-only { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-tablet-only { + --cell-row-start: -9; + } + .cell.is-row-span-9-tablet-only { + --cell-row-span: 9; + } + .cell.is-col-start-10-tablet-only { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-tablet-only { + --cell-column-start: -10; + } + .cell.is-col-span-10-tablet-only { + --cell-column-span: 10; + } + .cell.is-row-start-10-tablet-only { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-tablet-only { + --cell-row-start: -10; + } + .cell.is-row-span-10-tablet-only { + --cell-row-span: 10; + } + .cell.is-col-start-11-tablet-only { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-tablet-only { + --cell-column-start: -11; + } + .cell.is-col-span-11-tablet-only { + --cell-column-span: 11; + } + .cell.is-row-start-11-tablet-only { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-tablet-only { + --cell-row-start: -11; + } + .cell.is-row-span-11-tablet-only { + --cell-row-span: 11; + } + .cell.is-col-start-12-tablet-only { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-tablet-only { + --cell-column-start: -12; + } + .cell.is-col-span-12-tablet-only { + --cell-column-span: 12; + } + .cell.is-row-start-12-tablet-only { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-tablet-only { + --cell-row-start: -12; + } + .cell.is-row-span-12-tablet-only { + --cell-row-span: 12; + } + .cell.is-col-start-13-tablet-only { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-tablet-only { + --cell-column-start: -13; + } + .cell.is-col-span-13-tablet-only { + --cell-column-span: 13; + } + .cell.is-row-start-13-tablet-only { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-tablet-only { + --cell-row-start: -13; + } + .cell.is-row-span-13-tablet-only { + --cell-row-span: 13; + } + .cell.is-col-start-14-tablet-only { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-tablet-only { + --cell-column-start: -14; + } + .cell.is-col-span-14-tablet-only { + --cell-column-span: 14; + } + .cell.is-row-start-14-tablet-only { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-tablet-only { + --cell-row-start: -14; + } + .cell.is-row-span-14-tablet-only { + --cell-row-span: 14; + } + .cell.is-col-start-15-tablet-only { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-tablet-only { + --cell-column-start: -15; + } + .cell.is-col-span-15-tablet-only { + --cell-column-span: 15; + } + .cell.is-row-start-15-tablet-only { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-tablet-only { + --cell-row-start: -15; + } + .cell.is-row-span-15-tablet-only { + --cell-row-span: 15; + } + .cell.is-col-start-16-tablet-only { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-tablet-only { + --cell-column-start: -16; + } + .cell.is-col-span-16-tablet-only { + --cell-column-span: 16; + } + .cell.is-row-start-16-tablet-only { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-tablet-only { + --cell-row-start: -16; + } + .cell.is-row-span-16-tablet-only { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1024px) { + .cell.is-col-start-1-desktop { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-desktop { + --cell-column-start: -1; + } + .cell.is-col-span-1-desktop { + --cell-column-span: 1; + } + .cell.is-row-start-1-desktop { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-desktop { + --cell-row-start: -1; + } + .cell.is-row-span-1-desktop { + --cell-row-span: 1; + } + .cell.is-col-start-2-desktop { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-desktop { + --cell-column-start: -2; + } + .cell.is-col-span-2-desktop { + --cell-column-span: 2; + } + .cell.is-row-start-2-desktop { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-desktop { + --cell-row-start: -2; + } + .cell.is-row-span-2-desktop { + --cell-row-span: 2; + } + .cell.is-col-start-3-desktop { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-desktop { + --cell-column-start: -3; + } + .cell.is-col-span-3-desktop { + --cell-column-span: 3; + } + .cell.is-row-start-3-desktop { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-desktop { + --cell-row-start: -3; + } + .cell.is-row-span-3-desktop { + --cell-row-span: 3; + } + .cell.is-col-start-4-desktop { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-desktop { + --cell-column-start: -4; + } + .cell.is-col-span-4-desktop { + --cell-column-span: 4; + } + .cell.is-row-start-4-desktop { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-desktop { + --cell-row-start: -4; + } + .cell.is-row-span-4-desktop { + --cell-row-span: 4; + } + .cell.is-col-start-5-desktop { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-desktop { + --cell-column-start: -5; + } + .cell.is-col-span-5-desktop { + --cell-column-span: 5; + } + .cell.is-row-start-5-desktop { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-desktop { + --cell-row-start: -5; + } + .cell.is-row-span-5-desktop { + --cell-row-span: 5; + } + .cell.is-col-start-6-desktop { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-desktop { + --cell-column-start: -6; + } + .cell.is-col-span-6-desktop { + --cell-column-span: 6; + } + .cell.is-row-start-6-desktop { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-desktop { + --cell-row-start: -6; + } + .cell.is-row-span-6-desktop { + --cell-row-span: 6; + } + .cell.is-col-start-7-desktop { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-desktop { + --cell-column-start: -7; + } + .cell.is-col-span-7-desktop { + --cell-column-span: 7; + } + .cell.is-row-start-7-desktop { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-desktop { + --cell-row-start: -7; + } + .cell.is-row-span-7-desktop { + --cell-row-span: 7; + } + .cell.is-col-start-8-desktop { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-desktop { + --cell-column-start: -8; + } + .cell.is-col-span-8-desktop { + --cell-column-span: 8; + } + .cell.is-row-start-8-desktop { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-desktop { + --cell-row-start: -8; + } + .cell.is-row-span-8-desktop { + --cell-row-span: 8; + } + .cell.is-col-start-9-desktop { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-desktop { + --cell-column-start: -9; + } + .cell.is-col-span-9-desktop { + --cell-column-span: 9; + } + .cell.is-row-start-9-desktop { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-desktop { + --cell-row-start: -9; + } + .cell.is-row-span-9-desktop { + --cell-row-span: 9; + } + .cell.is-col-start-10-desktop { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-desktop { + --cell-column-start: -10; + } + .cell.is-col-span-10-desktop { + --cell-column-span: 10; + } + .cell.is-row-start-10-desktop { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-desktop { + --cell-row-start: -10; + } + .cell.is-row-span-10-desktop { + --cell-row-span: 10; + } + .cell.is-col-start-11-desktop { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-desktop { + --cell-column-start: -11; + } + .cell.is-col-span-11-desktop { + --cell-column-span: 11; + } + .cell.is-row-start-11-desktop { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-desktop { + --cell-row-start: -11; + } + .cell.is-row-span-11-desktop { + --cell-row-span: 11; + } + .cell.is-col-start-12-desktop { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-desktop { + --cell-column-start: -12; + } + .cell.is-col-span-12-desktop { + --cell-column-span: 12; + } + .cell.is-row-start-12-desktop { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-desktop { + --cell-row-start: -12; + } + .cell.is-row-span-12-desktop { + --cell-row-span: 12; + } + .cell.is-col-start-13-desktop { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-desktop { + --cell-column-start: -13; + } + .cell.is-col-span-13-desktop { + --cell-column-span: 13; + } + .cell.is-row-start-13-desktop { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-desktop { + --cell-row-start: -13; + } + .cell.is-row-span-13-desktop { + --cell-row-span: 13; + } + .cell.is-col-start-14-desktop { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-desktop { + --cell-column-start: -14; + } + .cell.is-col-span-14-desktop { + --cell-column-span: 14; + } + .cell.is-row-start-14-desktop { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-desktop { + --cell-row-start: -14; + } + .cell.is-row-span-14-desktop { + --cell-row-span: 14; + } + .cell.is-col-start-15-desktop { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-desktop { + --cell-column-start: -15; + } + .cell.is-col-span-15-desktop { + --cell-column-span: 15; + } + .cell.is-row-start-15-desktop { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-desktop { + --cell-row-start: -15; + } + .cell.is-row-span-15-desktop { + --cell-row-span: 15; + } + .cell.is-col-start-16-desktop { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-desktop { + --cell-column-start: -16; + } + .cell.is-col-span-16-desktop { + --cell-column-span: 16; + } + .cell.is-row-start-16-desktop { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-desktop { + --cell-row-start: -16; + } + .cell.is-row-span-16-desktop { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .cell.is-col-start-1-desktop-only { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-desktop-only { + --cell-column-start: -1; + } + .cell.is-col-span-1-desktop-only { + --cell-column-span: 1; + } + .cell.is-row-start-1-desktop-only { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-desktop-only { + --cell-row-start: -1; + } + .cell.is-row-span-1-desktop-only { + --cell-row-span: 1; + } + .cell.is-col-start-2-desktop-only { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-desktop-only { + --cell-column-start: -2; + } + .cell.is-col-span-2-desktop-only { + --cell-column-span: 2; + } + .cell.is-row-start-2-desktop-only { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-desktop-only { + --cell-row-start: -2; + } + .cell.is-row-span-2-desktop-only { + --cell-row-span: 2; + } + .cell.is-col-start-3-desktop-only { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-desktop-only { + --cell-column-start: -3; + } + .cell.is-col-span-3-desktop-only { + --cell-column-span: 3; + } + .cell.is-row-start-3-desktop-only { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-desktop-only { + --cell-row-start: -3; + } + .cell.is-row-span-3-desktop-only { + --cell-row-span: 3; + } + .cell.is-col-start-4-desktop-only { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-desktop-only { + --cell-column-start: -4; + } + .cell.is-col-span-4-desktop-only { + --cell-column-span: 4; + } + .cell.is-row-start-4-desktop-only { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-desktop-only { + --cell-row-start: -4; + } + .cell.is-row-span-4-desktop-only { + --cell-row-span: 4; + } + .cell.is-col-start-5-desktop-only { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-desktop-only { + --cell-column-start: -5; + } + .cell.is-col-span-5-desktop-only { + --cell-column-span: 5; + } + .cell.is-row-start-5-desktop-only { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-desktop-only { + --cell-row-start: -5; + } + .cell.is-row-span-5-desktop-only { + --cell-row-span: 5; + } + .cell.is-col-start-6-desktop-only { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-desktop-only { + --cell-column-start: -6; + } + .cell.is-col-span-6-desktop-only { + --cell-column-span: 6; + } + .cell.is-row-start-6-desktop-only { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-desktop-only { + --cell-row-start: -6; + } + .cell.is-row-span-6-desktop-only { + --cell-row-span: 6; + } + .cell.is-col-start-7-desktop-only { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-desktop-only { + --cell-column-start: -7; + } + .cell.is-col-span-7-desktop-only { + --cell-column-span: 7; + } + .cell.is-row-start-7-desktop-only { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-desktop-only { + --cell-row-start: -7; + } + .cell.is-row-span-7-desktop-only { + --cell-row-span: 7; + } + .cell.is-col-start-8-desktop-only { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-desktop-only { + --cell-column-start: -8; + } + .cell.is-col-span-8-desktop-only { + --cell-column-span: 8; + } + .cell.is-row-start-8-desktop-only { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-desktop-only { + --cell-row-start: -8; + } + .cell.is-row-span-8-desktop-only { + --cell-row-span: 8; + } + .cell.is-col-start-9-desktop-only { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-desktop-only { + --cell-column-start: -9; + } + .cell.is-col-span-9-desktop-only { + --cell-column-span: 9; + } + .cell.is-row-start-9-desktop-only { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-desktop-only { + --cell-row-start: -9; + } + .cell.is-row-span-9-desktop-only { + --cell-row-span: 9; + } + .cell.is-col-start-10-desktop-only { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-desktop-only { + --cell-column-start: -10; + } + .cell.is-col-span-10-desktop-only { + --cell-column-span: 10; + } + .cell.is-row-start-10-desktop-only { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-desktop-only { + --cell-row-start: -10; + } + .cell.is-row-span-10-desktop-only { + --cell-row-span: 10; + } + .cell.is-col-start-11-desktop-only { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-desktop-only { + --cell-column-start: -11; + } + .cell.is-col-span-11-desktop-only { + --cell-column-span: 11; + } + .cell.is-row-start-11-desktop-only { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-desktop-only { + --cell-row-start: -11; + } + .cell.is-row-span-11-desktop-only { + --cell-row-span: 11; + } + .cell.is-col-start-12-desktop-only { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-desktop-only { + --cell-column-start: -12; + } + .cell.is-col-span-12-desktop-only { + --cell-column-span: 12; + } + .cell.is-row-start-12-desktop-only { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-desktop-only { + --cell-row-start: -12; + } + .cell.is-row-span-12-desktop-only { + --cell-row-span: 12; + } + .cell.is-col-start-13-desktop-only { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-desktop-only { + --cell-column-start: -13; + } + .cell.is-col-span-13-desktop-only { + --cell-column-span: 13; + } + .cell.is-row-start-13-desktop-only { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-desktop-only { + --cell-row-start: -13; + } + .cell.is-row-span-13-desktop-only { + --cell-row-span: 13; + } + .cell.is-col-start-14-desktop-only { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-desktop-only { + --cell-column-start: -14; + } + .cell.is-col-span-14-desktop-only { + --cell-column-span: 14; + } + .cell.is-row-start-14-desktop-only { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-desktop-only { + --cell-row-start: -14; + } + .cell.is-row-span-14-desktop-only { + --cell-row-span: 14; + } + .cell.is-col-start-15-desktop-only { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-desktop-only { + --cell-column-start: -15; + } + .cell.is-col-span-15-desktop-only { + --cell-column-span: 15; + } + .cell.is-row-start-15-desktop-only { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-desktop-only { + --cell-row-start: -15; + } + .cell.is-row-span-15-desktop-only { + --cell-row-span: 15; + } + .cell.is-col-start-16-desktop-only { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-desktop-only { + --cell-column-start: -16; + } + .cell.is-col-span-16-desktop-only { + --cell-column-span: 16; + } + .cell.is-row-start-16-desktop-only { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-desktop-only { + --cell-row-start: -16; + } + .cell.is-row-span-16-desktop-only { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1216px) { + .cell.is-col-start-1-widescreen { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-widescreen { + --cell-column-start: -1; + } + .cell.is-col-span-1-widescreen { + --cell-column-span: 1; + } + .cell.is-row-start-1-widescreen { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-widescreen { + --cell-row-start: -1; + } + .cell.is-row-span-1-widescreen { + --cell-row-span: 1; + } + .cell.is-col-start-2-widescreen { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-widescreen { + --cell-column-start: -2; + } + .cell.is-col-span-2-widescreen { + --cell-column-span: 2; + } + .cell.is-row-start-2-widescreen { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-widescreen { + --cell-row-start: -2; + } + .cell.is-row-span-2-widescreen { + --cell-row-span: 2; + } + .cell.is-col-start-3-widescreen { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-widescreen { + --cell-column-start: -3; + } + .cell.is-col-span-3-widescreen { + --cell-column-span: 3; + } + .cell.is-row-start-3-widescreen { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-widescreen { + --cell-row-start: -3; + } + .cell.is-row-span-3-widescreen { + --cell-row-span: 3; + } + .cell.is-col-start-4-widescreen { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-widescreen { + --cell-column-start: -4; + } + .cell.is-col-span-4-widescreen { + --cell-column-span: 4; + } + .cell.is-row-start-4-widescreen { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-widescreen { + --cell-row-start: -4; + } + .cell.is-row-span-4-widescreen { + --cell-row-span: 4; + } + .cell.is-col-start-5-widescreen { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-widescreen { + --cell-column-start: -5; + } + .cell.is-col-span-5-widescreen { + --cell-column-span: 5; + } + .cell.is-row-start-5-widescreen { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-widescreen { + --cell-row-start: -5; + } + .cell.is-row-span-5-widescreen { + --cell-row-span: 5; + } + .cell.is-col-start-6-widescreen { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-widescreen { + --cell-column-start: -6; + } + .cell.is-col-span-6-widescreen { + --cell-column-span: 6; + } + .cell.is-row-start-6-widescreen { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-widescreen { + --cell-row-start: -6; + } + .cell.is-row-span-6-widescreen { + --cell-row-span: 6; + } + .cell.is-col-start-7-widescreen { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-widescreen { + --cell-column-start: -7; + } + .cell.is-col-span-7-widescreen { + --cell-column-span: 7; + } + .cell.is-row-start-7-widescreen { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-widescreen { + --cell-row-start: -7; + } + .cell.is-row-span-7-widescreen { + --cell-row-span: 7; + } + .cell.is-col-start-8-widescreen { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-widescreen { + --cell-column-start: -8; + } + .cell.is-col-span-8-widescreen { + --cell-column-span: 8; + } + .cell.is-row-start-8-widescreen { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-widescreen { + --cell-row-start: -8; + } + .cell.is-row-span-8-widescreen { + --cell-row-span: 8; + } + .cell.is-col-start-9-widescreen { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-widescreen { + --cell-column-start: -9; + } + .cell.is-col-span-9-widescreen { + --cell-column-span: 9; + } + .cell.is-row-start-9-widescreen { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-widescreen { + --cell-row-start: -9; + } + .cell.is-row-span-9-widescreen { + --cell-row-span: 9; + } + .cell.is-col-start-10-widescreen { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-widescreen { + --cell-column-start: -10; + } + .cell.is-col-span-10-widescreen { + --cell-column-span: 10; + } + .cell.is-row-start-10-widescreen { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-widescreen { + --cell-row-start: -10; + } + .cell.is-row-span-10-widescreen { + --cell-row-span: 10; + } + .cell.is-col-start-11-widescreen { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-widescreen { + --cell-column-start: -11; + } + .cell.is-col-span-11-widescreen { + --cell-column-span: 11; + } + .cell.is-row-start-11-widescreen { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-widescreen { + --cell-row-start: -11; + } + .cell.is-row-span-11-widescreen { + --cell-row-span: 11; + } + .cell.is-col-start-12-widescreen { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-widescreen { + --cell-column-start: -12; + } + .cell.is-col-span-12-widescreen { + --cell-column-span: 12; + } + .cell.is-row-start-12-widescreen { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-widescreen { + --cell-row-start: -12; + } + .cell.is-row-span-12-widescreen { + --cell-row-span: 12; + } + .cell.is-col-start-13-widescreen { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-widescreen { + --cell-column-start: -13; + } + .cell.is-col-span-13-widescreen { + --cell-column-span: 13; + } + .cell.is-row-start-13-widescreen { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-widescreen { + --cell-row-start: -13; + } + .cell.is-row-span-13-widescreen { + --cell-row-span: 13; + } + .cell.is-col-start-14-widescreen { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-widescreen { + --cell-column-start: -14; + } + .cell.is-col-span-14-widescreen { + --cell-column-span: 14; + } + .cell.is-row-start-14-widescreen { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-widescreen { + --cell-row-start: -14; + } + .cell.is-row-span-14-widescreen { + --cell-row-span: 14; + } + .cell.is-col-start-15-widescreen { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-widescreen { + --cell-column-start: -15; + } + .cell.is-col-span-15-widescreen { + --cell-column-span: 15; + } + .cell.is-row-start-15-widescreen { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-widescreen { + --cell-row-start: -15; + } + .cell.is-row-span-15-widescreen { + --cell-row-span: 15; + } + .cell.is-col-start-16-widescreen { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-widescreen { + --cell-column-start: -16; + } + .cell.is-col-span-16-widescreen { + --cell-column-span: 16; + } + .cell.is-row-start-16-widescreen { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-widescreen { + --cell-row-start: -16; + } + .cell.is-row-span-16-widescreen { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .cell.is-col-start-1-widescreen-only { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-widescreen-only { + --cell-column-start: -1; + } + .cell.is-col-span-1-widescreen-only { + --cell-column-span: 1; + } + .cell.is-row-start-1-widescreen-only { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-widescreen-only { + --cell-row-start: -1; + } + .cell.is-row-span-1-widescreen-only { + --cell-row-span: 1; + } + .cell.is-col-start-2-widescreen-only { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-widescreen-only { + --cell-column-start: -2; + } + .cell.is-col-span-2-widescreen-only { + --cell-column-span: 2; + } + .cell.is-row-start-2-widescreen-only { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-widescreen-only { + --cell-row-start: -2; + } + .cell.is-row-span-2-widescreen-only { + --cell-row-span: 2; + } + .cell.is-col-start-3-widescreen-only { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-widescreen-only { + --cell-column-start: -3; + } + .cell.is-col-span-3-widescreen-only { + --cell-column-span: 3; + } + .cell.is-row-start-3-widescreen-only { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-widescreen-only { + --cell-row-start: -3; + } + .cell.is-row-span-3-widescreen-only { + --cell-row-span: 3; + } + .cell.is-col-start-4-widescreen-only { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-widescreen-only { + --cell-column-start: -4; + } + .cell.is-col-span-4-widescreen-only { + --cell-column-span: 4; + } + .cell.is-row-start-4-widescreen-only { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-widescreen-only { + --cell-row-start: -4; + } + .cell.is-row-span-4-widescreen-only { + --cell-row-span: 4; + } + .cell.is-col-start-5-widescreen-only { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-widescreen-only { + --cell-column-start: -5; + } + .cell.is-col-span-5-widescreen-only { + --cell-column-span: 5; + } + .cell.is-row-start-5-widescreen-only { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-widescreen-only { + --cell-row-start: -5; + } + .cell.is-row-span-5-widescreen-only { + --cell-row-span: 5; + } + .cell.is-col-start-6-widescreen-only { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-widescreen-only { + --cell-column-start: -6; + } + .cell.is-col-span-6-widescreen-only { + --cell-column-span: 6; + } + .cell.is-row-start-6-widescreen-only { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-widescreen-only { + --cell-row-start: -6; + } + .cell.is-row-span-6-widescreen-only { + --cell-row-span: 6; + } + .cell.is-col-start-7-widescreen-only { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-widescreen-only { + --cell-column-start: -7; + } + .cell.is-col-span-7-widescreen-only { + --cell-column-span: 7; + } + .cell.is-row-start-7-widescreen-only { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-widescreen-only { + --cell-row-start: -7; + } + .cell.is-row-span-7-widescreen-only { + --cell-row-span: 7; + } + .cell.is-col-start-8-widescreen-only { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-widescreen-only { + --cell-column-start: -8; + } + .cell.is-col-span-8-widescreen-only { + --cell-column-span: 8; + } + .cell.is-row-start-8-widescreen-only { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-widescreen-only { + --cell-row-start: -8; + } + .cell.is-row-span-8-widescreen-only { + --cell-row-span: 8; + } + .cell.is-col-start-9-widescreen-only { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-widescreen-only { + --cell-column-start: -9; + } + .cell.is-col-span-9-widescreen-only { + --cell-column-span: 9; + } + .cell.is-row-start-9-widescreen-only { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-widescreen-only { + --cell-row-start: -9; + } + .cell.is-row-span-9-widescreen-only { + --cell-row-span: 9; + } + .cell.is-col-start-10-widescreen-only { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-widescreen-only { + --cell-column-start: -10; + } + .cell.is-col-span-10-widescreen-only { + --cell-column-span: 10; + } + .cell.is-row-start-10-widescreen-only { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-widescreen-only { + --cell-row-start: -10; + } + .cell.is-row-span-10-widescreen-only { + --cell-row-span: 10; + } + .cell.is-col-start-11-widescreen-only { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-widescreen-only { + --cell-column-start: -11; + } + .cell.is-col-span-11-widescreen-only { + --cell-column-span: 11; + } + .cell.is-row-start-11-widescreen-only { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-widescreen-only { + --cell-row-start: -11; + } + .cell.is-row-span-11-widescreen-only { + --cell-row-span: 11; + } + .cell.is-col-start-12-widescreen-only { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-widescreen-only { + --cell-column-start: -12; + } + .cell.is-col-span-12-widescreen-only { + --cell-column-span: 12; + } + .cell.is-row-start-12-widescreen-only { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-widescreen-only { + --cell-row-start: -12; + } + .cell.is-row-span-12-widescreen-only { + --cell-row-span: 12; + } + .cell.is-col-start-13-widescreen-only { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-widescreen-only { + --cell-column-start: -13; + } + .cell.is-col-span-13-widescreen-only { + --cell-column-span: 13; + } + .cell.is-row-start-13-widescreen-only { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-widescreen-only { + --cell-row-start: -13; + } + .cell.is-row-span-13-widescreen-only { + --cell-row-span: 13; + } + .cell.is-col-start-14-widescreen-only { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-widescreen-only { + --cell-column-start: -14; + } + .cell.is-col-span-14-widescreen-only { + --cell-column-span: 14; + } + .cell.is-row-start-14-widescreen-only { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-widescreen-only { + --cell-row-start: -14; + } + .cell.is-row-span-14-widescreen-only { + --cell-row-span: 14; + } + .cell.is-col-start-15-widescreen-only { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-widescreen-only { + --cell-column-start: -15; + } + .cell.is-col-span-15-widescreen-only { + --cell-column-span: 15; + } + .cell.is-row-start-15-widescreen-only { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-widescreen-only { + --cell-row-start: -15; + } + .cell.is-row-span-15-widescreen-only { + --cell-row-span: 15; + } + .cell.is-col-start-16-widescreen-only { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-widescreen-only { + --cell-column-start: -16; + } + .cell.is-col-span-16-widescreen-only { + --cell-column-span: 16; + } + .cell.is-row-start-16-widescreen-only { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-widescreen-only { + --cell-row-start: -16; + } + .cell.is-row-span-16-widescreen-only { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1408px) { + .cell.is-col-start-1-fullhd { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-fullhd { + --cell-column-start: -1; + } + .cell.is-col-span-1-fullhd { + --cell-column-span: 1; + } + .cell.is-row-start-1-fullhd { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-fullhd { + --cell-row-start: -1; + } + .cell.is-row-span-1-fullhd { + --cell-row-span: 1; + } + .cell.is-col-start-2-fullhd { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-fullhd { + --cell-column-start: -2; + } + .cell.is-col-span-2-fullhd { + --cell-column-span: 2; + } + .cell.is-row-start-2-fullhd { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-fullhd { + --cell-row-start: -2; + } + .cell.is-row-span-2-fullhd { + --cell-row-span: 2; + } + .cell.is-col-start-3-fullhd { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-fullhd { + --cell-column-start: -3; + } + .cell.is-col-span-3-fullhd { + --cell-column-span: 3; + } + .cell.is-row-start-3-fullhd { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-fullhd { + --cell-row-start: -3; + } + .cell.is-row-span-3-fullhd { + --cell-row-span: 3; + } + .cell.is-col-start-4-fullhd { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-fullhd { + --cell-column-start: -4; + } + .cell.is-col-span-4-fullhd { + --cell-column-span: 4; + } + .cell.is-row-start-4-fullhd { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-fullhd { + --cell-row-start: -4; + } + .cell.is-row-span-4-fullhd { + --cell-row-span: 4; + } + .cell.is-col-start-5-fullhd { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-fullhd { + --cell-column-start: -5; + } + .cell.is-col-span-5-fullhd { + --cell-column-span: 5; + } + .cell.is-row-start-5-fullhd { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-fullhd { + --cell-row-start: -5; + } + .cell.is-row-span-5-fullhd { + --cell-row-span: 5; + } + .cell.is-col-start-6-fullhd { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-fullhd { + --cell-column-start: -6; + } + .cell.is-col-span-6-fullhd { + --cell-column-span: 6; + } + .cell.is-row-start-6-fullhd { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-fullhd { + --cell-row-start: -6; + } + .cell.is-row-span-6-fullhd { + --cell-row-span: 6; + } + .cell.is-col-start-7-fullhd { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-fullhd { + --cell-column-start: -7; + } + .cell.is-col-span-7-fullhd { + --cell-column-span: 7; + } + .cell.is-row-start-7-fullhd { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-fullhd { + --cell-row-start: -7; + } + .cell.is-row-span-7-fullhd { + --cell-row-span: 7; + } + .cell.is-col-start-8-fullhd { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-fullhd { + --cell-column-start: -8; + } + .cell.is-col-span-8-fullhd { + --cell-column-span: 8; + } + .cell.is-row-start-8-fullhd { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-fullhd { + --cell-row-start: -8; + } + .cell.is-row-span-8-fullhd { + --cell-row-span: 8; + } + .cell.is-col-start-9-fullhd { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-fullhd { + --cell-column-start: -9; + } + .cell.is-col-span-9-fullhd { + --cell-column-span: 9; + } + .cell.is-row-start-9-fullhd { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-fullhd { + --cell-row-start: -9; + } + .cell.is-row-span-9-fullhd { + --cell-row-span: 9; + } + .cell.is-col-start-10-fullhd { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-fullhd { + --cell-column-start: -10; + } + .cell.is-col-span-10-fullhd { + --cell-column-span: 10; + } + .cell.is-row-start-10-fullhd { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-fullhd { + --cell-row-start: -10; + } + .cell.is-row-span-10-fullhd { + --cell-row-span: 10; + } + .cell.is-col-start-11-fullhd { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-fullhd { + --cell-column-start: -11; + } + .cell.is-col-span-11-fullhd { + --cell-column-span: 11; + } + .cell.is-row-start-11-fullhd { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-fullhd { + --cell-row-start: -11; + } + .cell.is-row-span-11-fullhd { + --cell-row-span: 11; + } + .cell.is-col-start-12-fullhd { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-fullhd { + --cell-column-start: -12; + } + .cell.is-col-span-12-fullhd { + --cell-column-span: 12; + } + .cell.is-row-start-12-fullhd { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-fullhd { + --cell-row-start: -12; + } + .cell.is-row-span-12-fullhd { + --cell-row-span: 12; + } + .cell.is-col-start-13-fullhd { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-fullhd { + --cell-column-start: -13; + } + .cell.is-col-span-13-fullhd { + --cell-column-span: 13; + } + .cell.is-row-start-13-fullhd { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-fullhd { + --cell-row-start: -13; + } + .cell.is-row-span-13-fullhd { + --cell-row-span: 13; + } + .cell.is-col-start-14-fullhd { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-fullhd { + --cell-column-start: -14; + } + .cell.is-col-span-14-fullhd { + --cell-column-span: 14; + } + .cell.is-row-start-14-fullhd { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-fullhd { + --cell-row-start: -14; + } + .cell.is-row-span-14-fullhd { + --cell-row-span: 14; + } + .cell.is-col-start-15-fullhd { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-fullhd { + --cell-column-start: -15; + } + .cell.is-col-span-15-fullhd { + --cell-column-span: 15; + } + .cell.is-row-start-15-fullhd { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-fullhd { + --cell-row-start: -15; + } + .cell.is-row-span-15-fullhd { + --cell-row-span: 15; + } + .cell.is-col-start-16-fullhd { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-fullhd { + --cell-column-start: -16; + } + .cell.is-col-span-16-fullhd { + --cell-column-span: 16; + } + .cell.is-row-start-16-fullhd { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-fullhd { + --cell-row-start: -16; + } + .cell.is-row-span-16-fullhd { + --cell-row-span: 16; + } +} + +.has-1-cols { + --column-count: 1; +} + +.has-2-cols { + --column-count: 2; +} + +.has-3-cols { + --column-count: 3; +} + +.has-4-cols { + --column-count: 4; +} + +.has-5-cols { + --column-count: 5; +} + +.has-6-cols { + --column-count: 6; +} + +.has-7-cols { + --column-count: 7; +} + +.has-8-cols { + --column-count: 8; +} + +.has-9-cols { + --column-count: 9; +} + +.has-10-cols { + --column-count: 10; +} + +.has-11-cols { + --column-count: 11; +} + +.has-12-cols { + --column-count: 12; +} + +.has-13-cols { + --column-count: 13; +} + +.has-14-cols { + --column-count: 14; +} + +.has-15-cols { + --column-count: 15; +} + +.has-16-cols { + --column-count: 16; +} + +@media screen and (max-width: 768px) { + .has-1-cols-mobile { + --column-count: 1; + } + .has-2-cols-mobile { + --column-count: 2; + } + .has-3-cols-mobile { + --column-count: 3; + } + .has-4-cols-mobile { + --column-count: 4; + } + .has-5-cols-mobile { + --column-count: 5; + } + .has-6-cols-mobile { + --column-count: 6; + } + .has-7-cols-mobile { + --column-count: 7; + } + .has-8-cols-mobile { + --column-count: 8; + } + .has-9-cols-mobile { + --column-count: 9; + } + .has-10-cols-mobile { + --column-count: 10; + } + .has-11-cols-mobile { + --column-count: 11; + } + .has-12-cols-mobile { + --column-count: 12; + } + .has-13-cols-mobile { + --column-count: 13; + } + .has-14-cols-mobile { + --column-count: 14; + } + .has-15-cols-mobile { + --column-count: 15; + } + .has-16-cols-mobile { + --column-count: 16; + } +} + +@media screen and (min-width: 769px), print { + .has-1-cols-tablet { + --column-count: 1; + } + .has-2-cols-tablet { + --column-count: 2; + } + .has-3-cols-tablet { + --column-count: 3; + } + .has-4-cols-tablet { + --column-count: 4; + } + .has-5-cols-tablet { + --column-count: 5; + } + .has-6-cols-tablet { + --column-count: 6; + } + .has-7-cols-tablet { + --column-count: 7; + } + .has-8-cols-tablet { + --column-count: 8; + } + .has-9-cols-tablet { + --column-count: 9; + } + .has-10-cols-tablet { + --column-count: 10; + } + .has-11-cols-tablet { + --column-count: 11; + } + .has-12-cols-tablet { + --column-count: 12; + } + .has-13-cols-tablet { + --column-count: 13; + } + .has-14-cols-tablet { + --column-count: 14; + } + .has-15-cols-tablet { + --column-count: 15; + } + .has-16-cols-tablet { + --column-count: 16; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-1-cols-tablet-only { + --column-count: 1; + } + .has-2-cols-tablet-only { + --column-count: 2; + } + .has-3-cols-tablet-only { + --column-count: 3; + } + .has-4-cols-tablet-only { + --column-count: 4; + } + .has-5-cols-tablet-only { + --column-count: 5; + } + .has-6-cols-tablet-only { + --column-count: 6; + } + .has-7-cols-tablet-only { + --column-count: 7; + } + .has-8-cols-tablet-only { + --column-count: 8; + } + .has-9-cols-tablet-only { + --column-count: 9; + } + .has-10-cols-tablet-only { + --column-count: 10; + } + .has-11-cols-tablet-only { + --column-count: 11; + } + .has-12-cols-tablet-only { + --column-count: 12; + } + .has-13-cols-tablet-only { + --column-count: 13; + } + .has-14-cols-tablet-only { + --column-count: 14; + } + .has-15-cols-tablet-only { + --column-count: 15; + } + .has-16-cols-tablet-only { + --column-count: 16; + } +} + +@media screen and (min-width: 1024px) { + .has-1-cols-desktop { + --column-count: 1; + } + .has-2-cols-desktop { + --column-count: 2; + } + .has-3-cols-desktop { + --column-count: 3; + } + .has-4-cols-desktop { + --column-count: 4; + } + .has-5-cols-desktop { + --column-count: 5; + } + .has-6-cols-desktop { + --column-count: 6; + } + .has-7-cols-desktop { + --column-count: 7; + } + .has-8-cols-desktop { + --column-count: 8; + } + .has-9-cols-desktop { + --column-count: 9; + } + .has-10-cols-desktop { + --column-count: 10; + } + .has-11-cols-desktop { + --column-count: 11; + } + .has-12-cols-desktop { + --column-count: 12; + } + .has-13-cols-desktop { + --column-count: 13; + } + .has-14-cols-desktop { + --column-count: 14; + } + .has-15-cols-desktop { + --column-count: 15; + } + .has-16-cols-desktop { + --column-count: 16; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-1-cols-desktop-only { + --column-count: 1; + } + .has-2-cols-desktop-only { + --column-count: 2; + } + .has-3-cols-desktop-only { + --column-count: 3; + } + .has-4-cols-desktop-only { + --column-count: 4; + } + .has-5-cols-desktop-only { + --column-count: 5; + } + .has-6-cols-desktop-only { + --column-count: 6; + } + .has-7-cols-desktop-only { + --column-count: 7; + } + .has-8-cols-desktop-only { + --column-count: 8; + } + .has-9-cols-desktop-only { + --column-count: 9; + } + .has-10-cols-desktop-only { + --column-count: 10; + } + .has-11-cols-desktop-only { + --column-count: 11; + } + .has-12-cols-desktop-only { + --column-count: 12; + } + .has-13-cols-desktop-only { + --column-count: 13; + } + .has-14-cols-desktop-only { + --column-count: 14; + } + .has-15-cols-desktop-only { + --column-count: 15; + } + .has-16-cols-desktop-only { + --column-count: 16; + } +} + +@media screen and (min-width: 1216px) { + .has-1-cols-widescreen { + --column-count: 1; + } + .has-2-cols-widescreen { + --column-count: 2; + } + .has-3-cols-widescreen { + --column-count: 3; + } + .has-4-cols-widescreen { + --column-count: 4; + } + .has-5-cols-widescreen { + --column-count: 5; + } + .has-6-cols-widescreen { + --column-count: 6; + } + .has-7-cols-widescreen { + --column-count: 7; + } + .has-8-cols-widescreen { + --column-count: 8; + } + .has-9-cols-widescreen { + --column-count: 9; + } + .has-10-cols-widescreen { + --column-count: 10; + } + .has-11-cols-widescreen { + --column-count: 11; + } + .has-12-cols-widescreen { + --column-count: 12; + } + .has-13-cols-widescreen { + --column-count: 13; + } + .has-14-cols-widescreen { + --column-count: 14; + } + .has-15-cols-widescreen { + --column-count: 15; + } + .has-16-cols-widescreen { + --column-count: 16; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-1-cols-widescreen-only { + --column-count: 1; + } + .has-2-cols-widescreen-only { + --column-count: 2; + } + .has-3-cols-widescreen-only { + --column-count: 3; + } + .has-4-cols-widescreen-only { + --column-count: 4; + } + .has-5-cols-widescreen-only { + --column-count: 5; + } + .has-6-cols-widescreen-only { + --column-count: 6; + } + .has-7-cols-widescreen-only { + --column-count: 7; + } + .has-8-cols-widescreen-only { + --column-count: 8; + } + .has-9-cols-widescreen-only { + --column-count: 9; + } + .has-10-cols-widescreen-only { + --column-count: 10; + } + .has-11-cols-widescreen-only { + --column-count: 11; + } + .has-12-cols-widescreen-only { + --column-count: 12; + } + .has-13-cols-widescreen-only { + --column-count: 13; + } + .has-14-cols-widescreen-only { + --column-count: 14; + } + .has-15-cols-widescreen-only { + --column-count: 15; + } + .has-16-cols-widescreen-only { + --column-count: 16; + } +} + +@media screen and (min-width: 1408px) { + .has-1-cols-fullhd { + --column-count: 1; + } + .has-2-cols-fullhd { + --column-count: 2; + } + .has-3-cols-fullhd { + --column-count: 3; + } + .has-4-cols-fullhd { + --column-count: 4; + } + .has-5-cols-fullhd { + --column-count: 5; + } + .has-6-cols-fullhd { + --column-count: 6; + } + .has-7-cols-fullhd { + --column-count: 7; + } + .has-8-cols-fullhd { + --column-count: 8; + } + .has-9-cols-fullhd { + --column-count: 9; + } + .has-10-cols-fullhd { + --column-count: 10; + } + .has-11-cols-fullhd { + --column-count: 11; + } + .has-12-cols-fullhd { + --column-count: 12; + } + .has-13-cols-fullhd { + --column-count: 13; + } + .has-14-cols-fullhd { + --column-count: 14; + } + .has-15-cols-fullhd { + --column-count: 15; + } + .has-16-cols-fullhd { + --column-count: 16; + } +} + .tile { align-items: stretch; display: block; diff --git a/docs/cyp/grid/grid.html b/docs/cyp/grid/grid.html new file mode 100644 index 00000000..46c8c698 --- /dev/null +++ b/docs/cyp/grid/grid.html @@ -0,0 +1,27 @@ +--- +layout: cypress +title: Grid/Grid +--- + +
+
#1
+
#2
+
#3
+
#4
+
#5
+
#6
+
#7
+
#8
+
#9
+
#10
+
#11
+
#12
+
#13
+
#14
+
#15
+
#16
+
#17
+
#18
+
#19
+
#20
+
\ No newline at end of file diff --git a/sass/grid/_all.sass b/sass/grid/_all.sass index 0b5ed310..c4e71801 100644 --- a/sass/grid/_all.sass +++ b/sass/grid/_all.sass @@ -2,4 +2,5 @@ @charset "utf-8" @import "columns" +@import "grid" @import "tiles" diff --git a/sass/grid/grid.sass b/sass/grid/grid.sass new file mode 100644 index 00000000..f533cbd6 --- /dev/null +++ b/sass/grid/grid.sass @@ -0,0 +1,105 @@ +$max-column-count: 16 + +.grid + --grid-gap: 1.5rem + --column-count: 12 + --grid-gap-count: calc(var(--column-count) - 1) + --grid-column-min: calc(calc(100% / var(--column-count)) - calc(var(--grid-gap-count) / var(--column-count) * var(--grid-column-gap, var(--grid-gap)))) + --cell-column-span: 1 + --cell-row-span: 1 + display: grid + grid-gap: var(--grid-gap) + grid-column-gap: var(--grid-column-gap, var(--grid-gap)) + grid-row-gap: var(--grid-row-gap, var(--grid-gap)) + grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min), 1fr)) + grid-template-rows: auto + +mobile + --column-count: 2 + +tablet + --column-count: 4 + +desktop + --column-count: 8 + +widescreen + --column-count: 12 + +fullhd + --column-count: 16 + +=cell-properties($suffix: '') + @for $i from 1 through $max-column-count + $name: $i + $suffix + &.is-col-start-#{$name} + --cell-column-start: #{$i} + &.is-col-from-end-#{$name} + --cell-column-start: #{$i * -1} + &.is-col-span-#{$name} + --cell-column-span: #{$i} + &.is-row-start-#{$name} + --cell-row-start: #{$i} + &.is-row-from-end-#{$name} + --cell-row-start: #{$i * -1} + &.is-row-span-#{$name} + --cell-row-span: #{$i} + +.cell + background-color: lavender + border-radius: 1em + grid-column-end: span var(--cell-column-span) + grid-column-start: var(--cell-column-start) + grid-row-end: span var(--cell-row-span) + grid-row-start: var(--cell-row-start) + padding: 0.75em + // Sizes + &.is-col-start-end + --cell-column-start: -1 + &.is-row-start-end + --cell-row-start: -1 + +cell-properties + +mobile + +cell-properties('-mobile') + +tablet + +cell-properties('-tablet') + +tablet-only + +cell-properties('-tablet-only') + +desktop + +cell-properties('-desktop') + +desktop-only + +cell-properties('-desktop-only') + +widescreen + +cell-properties('-widescreen') + +widescreen-only + +cell-properties('-widescreen-only') + +fullhd + +cell-properties('-fullhd') + +=grid-properties($suffix: '') + .has-1-cols#{$suffix} + --column-count: 1 + @for $i from 2 through $max-column-count + .has-#{$i}-cols#{$suffix} + --column-count: #{$i} + ++grid-properties + ++mobile + +grid-properties('-mobile') + ++tablet + +grid-properties('-tablet') + ++tablet-only + +grid-properties('-tablet-only') + ++desktop + +grid-properties('-desktop') + ++desktop-only + +grid-properties('-desktop-only') + ++widescreen + +grid-properties('-widescreen') + ++widescreen-only + +grid-properties('-widescreen-only') + ++fullhd + +grid-properties('-fullhd')