/** * Rex.css * Provide custom layout and form element styles ONLY for elements inside the :is(.rex, .rex-forms, .forms) class. * And colorizes elements with a light and dark style. * Add 'light' or 'dark' attributes to the tag. * It's recommended to use javascript to set this attribute from prefers-color-scheme on page load. * * TODO: Phase out .grouped in place of .group, and .pad-tiny-small in projects. * TODO: Phase out these classes: .btn * TODO: Support more elements from https://preview.tabler.io/form-elements.html * TODO: Need more consistent borders and outlines. * TODO: flex1, flex2, flex3, etc. instead of expand? Also fixed width classes? * * Possible names besides forms.css: * FlexFlow, RowCols, Energy.css, FlexFusion.cs, FlexBoss, FlexCraft, FlexMatrix. FlexWarp. Glide.css * DivCrafter * Rex.css - taking a bite out of bad layouts. * Rectangles.css - Because your whole UI is made of rectangles. */ /* ┌─────────────────╮ * |Variables | * └─────────────────╯*/ :root { /* Dimensions */ --micro: .125rem; --tiny: .25rem; --small: .5rem; --normal: 1rem; --big: 1.5rem; --huge: 3rem; --input-small: 18px; --input-normal: 24px; --input-big: 32px; --input-huge: 44px; --border-width: 1px; --border-radius: 3px; --icon-size: 20px; --tablet: 768px; --desktop: 992px; /* Buttons */ --primary-background: var(--primary); --primary-border: var(--border-width) solid var(--primary); --primary-background-hover: var(--primary2); --primary-border-hover: var(--border-width) solid var(--primary2); --secondary-background: var(--secondary); --secondary-border: var(--border-width) solid var(--secondary); } :root, :root[light] { /* Palette */ --text: #333; --background: white; --invert: black; --shade1: #e4e8ed; --shade2: #cbcfd7; --shade3: #c0c6cf; /* Unused? */ --shade4: #aeb3be; --primary: #07c; --primary2: #08e; --invalid: #900; --shadow: 0 0 5px #0006; /* Elements */ --primary-text: white; --primary-border-focus: black; --secondary: var(--shade2); --secondary-background-hover: var(--shade4); --secondary-border-hover: var(--shade4); --input-background: white; --input-border: var(--shade2); --card-background: white; --card-border: none; --border: var(--border-width) solid var(--shade2); --border-focus: var(--border-width) solid var(--primary2); /* Table */ --table-header-background: var(--shade1); --table-border: 1px solid var(--shade1); --table-background: white; --table-padding: 4px 8px; } :root[dark] { /* Palette */ --text: #bcc3c8; --background: black; --invert: white; --shade1: #06090c; --shade2: #0f1318; --shade3: #2a3239; --shade4: #3d474f; --primary: #048; --primary2: #05a; --invalid: #900; --shadow: 0 0 12px #000f; /** Elements */ --primary-text: white; --primary-border-focus: white; --secondary: var(--shade3); --secondary-background-hover: var(--shade4); --secondary-border-hover: var(--shade4); --input-background: var(--shade1); --input-border: var(--shade3); --card-background: var(--shade2); --card-border: var(--border); --border: var(--border-width) solid var(--shade3); --border-focus: var(--border-width) solid var(--primary2); /* Table */ --table-header-background:var(--shade3); --table-border: 1px solid var(--shade3); --table-background: var(--shade2); --table-padding: 4px 8px; } /* ┌─────────────────╮ * |Normalize | * └─────────────────╯*/ :is(.rex, .rex-forms, .forms) :is(button, input, optgroup, select, textarea) { font-family: inherit; font-size: 100% } /** * Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ :is(.rex, .rex-forms, .forms) sub, sup { font-size: 75%; line-height: 0; position: relative } :is(.rex, .rex-forms, .forms) sub { bottom: -0.25em } :is(.rex, .rex-forms, .forms) sup { top: -0.5em} :is(.rex, .rex-forms, .forms) dialog { z-index: 1000 } :is(.rex, .rex-forms, .forms) dialog::backdrop { background: #0008 } /* ┌─────────────────╮ * |Misc | * └─────────────────╯*/ /* Scrollbars */ :is(:root[dark]:is(.rex, .rex-forms, .forms), :root[dark] :is(.rex, .rex-forms, .forms)) { /*noinspection CssInvalidPropertyValue*/scrollbar-color: dark } :is(:root[dark]:is(.rex, .rex-forms, .forms), :root[dark] :is(.rex, .rex-forms, .forms)) ::-webkit-scrollbar { background: transparent; width: 12px; height: 12px } :is(:root[dark]:is(.rex, .rex-forms, .forms), :root[dark] :is(.rex, .rex-forms, .forms)) ::-webkit-scrollbar-track, :is(:root[dark]:is(.rex, .rex-forms, .forms), :root[dark] :is(.rex, .rex-forms, .forms)) ::-webkit-scrollbar-corner { background: transparent } :is(:root[dark]:is(.rex, .rex-forms, .forms), :root[dark] :is(.rex, .rex-forms, .forms)) ::-webkit-scrollbar-thumb { background: var(--shade3); border-radius: var(--border-radius) } /* Form validation. Hide fields used by validate.js */ :is(.rex, .rex-forms, .forms) :is(.invalid) { border-color: var(--invalid) !important; outline-color: var(--invalid) !important } :is(.rex, .rex-forms, .forms) :is( [data-pattern], [data-min], [data-max], [data-minlength], [data-maxlength], [data-required], [data-step], [data-type], [data-validate]:not(input, .input, select, .select, textarea), [data-validate2], [data-validate3], [data-validate4]) { color: var(--invalid); display: none } /* Misc */ :is(.rex, .rex-forms, .forms) .little { font-size: 80%; line-height: 1.1 } :is(.rex, .rex-forms, .forms) :is(.muted,.faint) { opacity: .66; } /* faint is deprecated */ :is(.rex, .rex-forms, .forms) .icon { font-size: var(--icon-size); width: var(--icon-size); height: var(--icon-size); cursor: pointer } :is(.rex, .rex-forms, .forms) .icon:not(.disabled):is(:hover,.selected) { color: var(--primary) } :is(.rex, .rex-forms, .forms) .warning { color: var(--invalid) } :is(.rex, .rex-forms, .forms) a:focus-visible { outline: var(--border-focus) } :is(.rex, .rex-forms, .forms) :focus-visible { outline: none } /* Remove browser's default outline */ :is(.rex, .rex-forms, .forms) hr { border: none; border-bottom: var(--border) } :is(.rex, .rex-forms, .forms) .noselect { user-select: none } /* Placeholder + Contenteditable placeholder */ :is(.rex, .rex-forms, .forms) ::placeholder { color: inherit; opacity: .6 } :is(.rex, .rex-forms, .forms) [placeholder]:empty:before { content: attr(placeholder); opacity: .6; white-space: nowrap; cursor: text } :is(.rex, .rex-forms, .forms) [placeholder]:empty:is(:focus,.focus):before { content: '' } /* menu-item */ /* A combination of: class="row pad-h-small pad-v-micro gap-small btn primary flat center-v" */ :is(.rex, .rex-forms, .forms) .menu-item { display: flex; align-items: center; padding: 4px 8px; gap: 8px; color: var(--text); user-select: none; cursor: pointer; } :is(.rex, .rex-forms, .forms) .menu-item:hover { background: var(--primary-background); color: var(--primary-text) } /* Card * Must appear before row/col so those can override the display to be flex. */ :is(.rex, .rex-forms, .forms) .card { box-sizing: border-box; background: var(--card-background); box-shadow: var(--shadow) } :is(.rex, .rex-forms, .forms) .card:not(.square) { border-radius: var(--border-radius) } :is(.rex, .rex-forms, .forms) .card:not(.flat) { border: var(--card-border) } /* ┌─────────────────╮ * |Input+Btn Height | * └─────────────────╯*/ /* Height */ :is(.rex, .rex-forms, .forms) :is( input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range]), .input:not([contenteditable]), select, button, .button, .btn) { /** TODO: .btn is deprecated */ box-sizing: border-box; padding-top: 0; padding-bottom: 0; min-height: var(--input-normal) } :is(.rex, .rex-forms, .forms) :is(textarea, [contenteditable].input) { box-sizing: border-box; min-height: var(--input-normal); padding-top: calc((var(--input-normal) - 1lh) / 2) /* Make text line up vertically with inputs. Top half of the diff between input height and text height*/ } /* ┌─────────────────╮ * |Input | * └─────────────────╯*/ :is(.rex, .rex-forms, .forms) :is(.input, select, textarea, input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit])) { min-width: 0; color: var(--text) } :is(.rex, .rex-forms, .forms) :is(.input, select, textarea, input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit])):not(.square, .flat) { border-radius: var(--border-radius) } :is(.rex, .rex-forms, .forms) :is(.input, select, textarea, input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]) ):not(.flat) { background: var(--input-background); border: var(--border-width) solid var(--input-border); vertical-align: top; padding-left: var(--tiny); padding-right: var(--tiny); } /* Input focus */ :is(.rex, .rex-forms, .forms) :is( input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]), .input, select, textarea):not(.flat):is(:focus-within,.focus) { outline: var(--border-focus); outline-offset: -1px; z-index: 2 /* z-index lets it the border be on top when inside .grouped */ } :is(.rex, .rex-forms, .forms) input[type=file]:is(:focus-within, .focus) { outline: var(--border-focus) } /* Can't style file, but at least make the focus look similar. */ /* Input focus:invalid */ :is(.rex, .rex-forms, .forms) :is( input:not([type=checkbox],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]), .input, select, textarea):not(.flat):is(:focus-within,.focus):invalid { outline-color: red } /* ┌─────────────────╮ * |Alerts | * └─────────────────╯*/ :is(.rex, .rex-forms, .forms) .success { background: #cfd; color: #374; padding: 8px 16px; margin-top: 16px; margin-bottom: 16px } :is(.rex, .rex-forms, .forms) .warning { background: #fec; color: #863; padding: 8px 16px; margin-top: 16px; margin-bottom: 16px } /* ┌─────────────────╮ * |Buttons | * └─────────────────╯*/ :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])) { box-sizing: border-box; user-select: none; text-align: center; color: var(--text); display: inline-flex; align-items: center } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):not([disabled]) { cursor: pointer } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):not(.square, .flat) { border-radius: var(--border-radius) } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):not(.flat) { padding-left: var(--normal); padding-right: var(--normal); line-height: normal; border: var(--secondary-border); background: var(--secondary-background) } /* Button Hover/Focus */ :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):not([disabled],.flat):is(:hover,.hover,.selected) { background: var(--secondary-background-hover); border: var(--border-width) solid var(--secondary-border-hover); color: var(--invert)} :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):is(:focus-visible,.focus) { outline: var(--border-focus); outline-offset: -1px; z-index: 2 } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):is([disabled]) { cursor: default; opacity: .5 } /* Button Primary */ :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).primary:not(.flat) { background: var(--primary-background); border: var(--primary-border) } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).primary:not(.flat) { color: var(--primary-text) } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).primary:is(:active,:hover,.active,.hover,.selected):not([disabled]) { background: var(--primary-background-hover); border: var(--primary-border-hover); color: var(--primary-text) } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).primary:is(:focus-visible,.focus){ outline: var(--border-width) solid var(--primary-border-focus); outline-offset: -1px; z-index: 2 } :is(.rex, .rex-forms, .forms) a:is(.button, .btn, .button:hover, .btn:hover) { text-decoration: none } /* ┌─────────────────╮ * |Button Status | * └─────────────────╯*/ /* TODO: Let inputs have status also. */ :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):is(.progress,.error,.complete) { position: relative } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):is(.progress,.error,.complete):after { position: relative; margin-right: -16px; top: 1px; left: 1px; } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])):is(.progress,.error,.complete).primary:after { filter: invert(100%) } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).progress:after { content: url('data:image/svg+xml,'); } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).complete:after { content: url('data:image/svg+xml,'); } :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).error:after { content: url('data:image/svg+xml,'); } /* ┌─────────────────╮ * |Button+Input Sizes * └─────────────────╯*/ /* Small buttons + inputs. */ /* We calculate how much vertical padding space is left after using line height and border: */ :is(.rex, .rex-forms, .forms) :is(.button, .btn, button, input:is([type=button],[type=submit],[type=reset])).small { min-height: var(--input-small); padding: calc((var(--input-small) - 1lh) / 2 - var(--border-width)) calc(var(--input-small) / 2) } :is(.rex, .rex-forms, .forms) :is( input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]), .input, select, textarea).small { min-height: var(--input-small); padding: calc((var(--input-small) - 1lh) / 2 - var(--border-width)) calc(var(--input-small) / 4); } :is(.rex, .rex-forms, .forms) :is(button, .button, .btn, input, select).small { height: var(--input-small); /* Needed for that renders as a table cell. */ :is(.rex, .rex-forms, .forms) .data-table :is(th,.th), :is(.rex, .rex-forms, .forms) .data-table :is(td,.td):not(.wt) { border-left: var(--table-border) } :is(.rex, .rex-forms, .forms) .data-table :is(td,.td):not(.wt) { padding: var(--table-padding); border-bottom: var(--table-border); vertical-align: top } :is(.rex, .rex-forms, .forms) .data-table :is(th,.th):last-child, :is(.rex, .rex-forms, .forms) .data-table :is(td,.td):last-child { border-right: var(--table-border) } /* ┌─────────────────╮ * |Experimental | * └─────────────────╯*/ /* These may change in the future. */ /* drop-menu */ /* A menu with expandable sub-items. */ :is(.rex, .rex-forms, .forms) .drop-menu ul { list-style: none; margin: 0; padding: 0 } :is(.rex, .rex-forms, .forms) .drop-menu ul a { display: block } :is(.rex, .rex-forms, .forms) .drop-menu ul li { position: relative } :is(.rex, .rex-forms, .forms) .drop-menu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 1 } :is(.rex, .rex-forms, .forms) .drop-menu ul:not(:hover) ul { transition: visibility 0s; transition-delay: .6s } :is(.rex, .rex-forms, .forms) .drop-menu ul:hover > ul:not(:hover) { transition: visibility 0s; transition-delay: 0s; display: none } :is(.rex, .rex-forms, .forms) .drop-menu ul ul ul { top: 0; left: 100% } :is(.rex, .rex-forms, .forms) .drop-menu ul li:hover > ul { visibility: visible; transition-delay: 0s } /* ┌─────────────────╮ * |Grid | * └─────────────────╯*/ /* Rows and column layout. These can occor on the same element with :is(.rex, .rex-forms, .forms) * Unlike bootstrap, a col class will stack each of its children into a column, * and having a col class for each item in a row isn't necessary.*/ :is(.rex, .rex-layout, .forms) .row { display: flex; align-items: start } /* align-items: start prevents stretching to available height */ :is(.rex, .rex-layout, .forms) .col { display: flex; flex-direction: column; align-items: start } /* Gaps */ :is(.rex, .rex-layout, .forms) .gap-micro { gap: var(--micro) } :is(.rex, .rex-layout, .forms) .gap-tiny { gap: var(--tiny) } :is(.rex, .rex-layout, .forms) .gap-small { gap: var(--small) } :is(.rex, .rex-layout, .forms) .gap { gap: var(--normal) } :is(.rex, .rex-layout, .forms) .gap-big { gap: var(--big) } :is(.rex, .rex-layout, .forms) .gap-huge { gap: var(--huge) } /* Pad */ /* We need both :not(#wt) to override input pad-left and pad-right above */ :is(.rex, .rex-layout, .forms) :not(#wt).pad-micro { padding: var(--micro) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-tiny { padding: var(--tiny) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-small { padding: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad { padding: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-big { padding: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-huge { padding: var(--huge) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-tiny { padding-left: var(--tiny); padding-right: var(--tiny) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-small { padding-left: var(--small); padding-right: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h { padding-left: var(--normal); padding-right: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-big { padding-left: var(--big); padding-right: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-huge { padding-left: var(--huge); padding-right: var(--huge) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-tiny { padding-top: var(--tiny); padding-bottom: var(--tiny) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-small { padding-top: var(--small); padding-bottom: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v { padding-top: var(--normal); padding-bottom: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-big { padding-top: var(--big); padding-bottom: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-huge { padding-top: var(--huge); padding-bottom: var(--huge) } /* Alignment */ :is(.rex, .rex-layout, .forms) .row:is(.center, .center-h) { justify-content: center } :is(.rex, .rex-layout, .forms) .col:is(.center, .center-h) { align-items: center } :is(.rex, .rex-layout, .forms) .row:is(.center, .center-v) { align-items: center } :is(.rex, .rex-layout, .forms) .col:is(.center, .center-v) { justify-content: center } :is(.rex, .rex-layout, .forms) .row.left { justify-content: start } :is(.rex, .rex-layout, .forms) .col.left { align-items: start } :is(.rex, .rex-layout, .forms) .row.right { justify-content: end } :is(.rex, .rex-layout, .forms) .col.right { align-items: end } :is(.rex, .rex-layout, .forms) .row.top { align-items: start } :is(.rex, .rex-layout, .forms) .col.top { justify-content: start } :is(.rex, .rex-layout, .forms) .row.bottom { align-items: end } :is(.rex, .rex-layout, .forms) .col.bottom { justify-content: end } :is(.rex, .rex-layout, .forms) :is(.row,.col).stretch { align-items: stretch } :is(.rex, .rex-layout, .forms) :is(.row,.col).stretch > * { flex: 1 } :is(.rex, .rex-layout, .forms) .row.stretch-h > * { flex: 1 } :is(.rex, .rex-layout, .forms) .row.stretch-v { align-items: stretch } :is(.rex, .rex-layout, .forms) .col.stretch-h { align-items: stretch } :is(.rex, .rex-layout, .forms) .col.stretch-v > * { flex: 1 } /* Spacing */ :is(.rex, .rex-layout, .forms) .space-between { justify-content: space-between } :is(.rex, .rex-layout, .forms) .space-around { justify-content: space-around } :is(.rex, .rex-layout, .forms) .space-evenly { justify-content: space-evenly } /* Wrap */ :is(.rex, .rex-layout, .forms) .wrap { flex-wrap: wrap } :is(.rex, .rex-layout, .forms) .nowrap { flex-wrap: nowrap; white-space: nowrap } /* Labels */ :is(.rex, .rex-layout, .forms) .label { font-size :85%; font-weight: bold; user-select: none } :is(.rex, .rex-layout, .forms) .side-label-tiny { min-width: 4rem; max-width: 4rem; user-select: none } :is(.rex, .rex-layout, .forms) .side-label-small { min-width: 6rem; max-width: 6rem; user-select: none } :is(.rex, .rex-layout, .forms) .side-label { min-width: 8rem; max-width: 8rem; user-select: none } :is(.rex, .rex-layout, .forms) .side-label-big { min-width: 10rem; max-width: 10rem; user-select: none } :is(.rex, .rex-layout, .forms) .side-label-huge { min-width: 14rem; max-width: 14rem; user-select: none } /* Fixed widths and heights */ :is(.rex, .rex-layout, .forms) .w1 { width: clamp(1rem, 1rem, 1rem) } :is(.rex, .rex-layout, .forms) .w2 { width: clamp(2rem, 2rem, 2rem) } :is(.rex, .rex-layout, .forms) .w3 { width: clamp(3rem, 3rem, 3rem) } :is(.rex, .rex-layout, .forms) .w4 { width: clamp(4rem, 4rem, 4rem) } :is(.rex, .rex-layout, .forms) .w5 { width: clamp(5rem, 5rem, 5rem) } :is(.rex, .rex-layout, .forms) .w6 { width: clamp(6rem, 6rem, 6rem) } :is(.rex, .rex-layout, .forms) .w7 { width: clamp(7rem, 7rem, 7rem) } :is(.rex, .rex-layout, .forms) .w8 { width: clamp(8rem, 8rem, 8rem) } :is(.rex, .rex-layout, .forms) .w9 { width: clamp(9rem, 9rem, 9rem) } :is(.rex, .rex-layout, .forms) .w10 { width: clamp(10rem, 10rem, 10rem) } :is(.rex, .rex-layout, .forms) .w11 { width: clamp(11rem, 11rem, 11rem) } :is(.rex, .rex-layout, .forms) .w12 { width: clamp(12rem, 12rem, 12rem) } :is(.rex, .rex-layout, .forms) .w13 { width: clamp(13rem, 13rem, 13rem) } :is(.rex, .rex-layout, .forms) .w14 { width: clamp(14rem, 14rem, 14rem) } :is(.rex, .rex-layout, .forms) .w15 { width: clamp(15rem, 15rem, 15rem) } :is(.rex, .rex-layout, .forms) .w16 { width: clamp(16rem, 16rem, 16rem) } :is(.rex, .rex-layout, .forms) .w17 { width: clamp(17rem, 17rem, 17rem) } :is(.rex, .rex-layout, .forms) .w18 { width: clamp(18rem, 18rem, 18rem) } :is(.rex, .rex-layout, .forms) .w19 { width: clamp(19rem, 19rem, 19rem) } :is(.rex, .rex-layout, .forms) .w20 { width: clamp(20rem, 20rem, 20rem) } :is(.rex, .rex-layout, .forms) .w21 { width: clamp(21rem, 21rem, 21rem) } :is(.rex, .rex-layout, .forms) .w22 { width: clamp(22rem, 22rem, 22rem) } :is(.rex, .rex-layout, .forms) .w23 { width: clamp(23rem, 23rem, 23rem) } :is(.rex, .rex-layout, .forms) .w24 { width: clamp(24rem, 24rem, 24rem) } /* TODO make mobile versions of this. What if we want to expand only on tablet? .no-expand-desktop */ :is(.rex, .rex-layout, .forms) :is(.expand, .flex1) { flex: 1 } :is(.rex, .rex-layout, .forms) .flex2 { flex: 2 } :is(.rex, .rex-layout, .forms) .flex3 { flex: 3 } :is(.rex, .rex-layout, .forms) .flex4 { flex: 4 } :is(.rex, .rex-layout, .forms) .flex5 { flex: 5 } :is(.rex, .rex-layout, .forms) .flex6 { flex: 6 } :is(.rex, .rex-layout, .forms) .flex7 { flex: 7 } :is(.rex, .rex-layout, .forms) .flex8 { flex: 8 } :is(.rex, .rex-layout, .forms) .flex9 { flex: 9 } :is(.rex, .rex-layout, .forms) .flex10 { flex: 10 } :is(.rex, .rex-layout, .forms) .flex11 { flex: 11 } :is(.rex, .rex-layout, .forms) .flex12 { flex: 12 } :is(.rex, .rex-layout, .forms) .flex13 { flex: 13 } :is(.rex, .rex-layout, .forms) .flex14 { flex: 14 } :is(.rex, .rex-layout, .forms) .flex15 { flex: 15 } :is(.rex, .rex-layout, .forms) .flex16 { flex: 16 } :is(.rex, .rex-layout, .forms) .flex17 { flex: 17 } :is(.rex, .rex-layout, .forms) .flex18 { flex: 18 } :is(.rex, .rex-layout, .forms) .flex19 { flex: 19 } :is(.rex, .rex-layout, .forms) .flex20 { flex: 20 } :is(.rex, .rex-layout, .forms) .flex21 { flex: 21 } :is(.rex, .rex-layout, .forms) .flex22 { flex: 22 } :is(.rex, .rex-layout, .forms) .flex23 { flex: 23 } :is(.rex, .rex-layout, .forms) .flex24 { flex: 24 } /* ┌─────────────────╮ * |Grid Tablet+ | * └─────────────────╯*/ @media (min-width: 768px) { /** * To have big padding on desktop, normal on tablet, and none on mobile, do: * style="padding-left: var(--big-desktop, var(--normal-tablet))" */ :root { --micro-tablet: var(--micro); --tiny-tablet: var(--tiny); --small-tablet: var(--small); --normal-tablet: var(--normal); --big-tablet: var(--big); --huge-tablet: var(--huge); } /* Row/Col */ :is(.rex, .rex-layout, .forms) .row-tablet { display: flex; flex-direction: row; align-items: start; justify-content: start } :is(.rex, .rex-layout, .forms) .col-tablet { display: flex; flex-direction: column; align-items: start; justify-content: start } /* Gaps */ :is(.rex, .rex-layout, .forms) .gap-tiny-tablet { gap: var(--micro) } :is(.rex, .rex-layout, .forms) .gap-small-tablet { gap: var(--small) } :is(.rex, .rex-layout, .forms) .gap-tablet { gap: var(--normal) } :is(.rex, .rex-layout, .forms) .gap-big-tablet { gap: var(--big) } :is(.rex, .rex-layout, .forms) .gap-huge-tablet { gap: var(--huge) } /* Pad */ :is(.rex, .rex-layout, .forms) :not(#wt).pad-tiny-tablet { padding: var(--micro) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-small-tablet { padding: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-tablet { padding: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-big-tablet { padding: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-huge-tablet { padding: var(--huge) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-tiny-tablet { padding-left: var(--tiny); padding-right: var(--tiny) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-small-tablet { padding-left: var(--small); padding-right: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-tablet { padding-left: var(--normal); padding-right: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-big-tablet { padding-left: var(--big); padding-right: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-huge-tablet { padding-left: var(--huge); padding-right: var(--huge) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-tiny-tablet { padding-top: var(--tiny); padding-bottom: var(--tiny) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-small-tablet { padding-top: var(--small); padding-bottom: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-tablet { padding-top: var(--normal); padding-bottom: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-big-tablet { padding-top: var(--big); padding-bottom: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-huge-tablet { padding-top: var(--huge); padding-bottom: var(--huge) } /* Alignment */ :is(.rex, .rex-layout, .forms) .row-tablet:is(.center-tablet, .center-h-tablet) { justify-content: center } :is(.rex, .rex-layout, .forms) .col-tablet:is(.center-tablet, .center-h-tablet) { align-items: center } :is(.rex, .rex-layout, .forms) .row-tablet:is(.center-tablet, .center-v-tablet) { align-items: center } :is(.rex, .rex-layout, .forms) .col-tablet:is(.center-tablet, .center-v-tablet) { justify-content: center } :is(.rex, .rex-layout, .forms) .row-tablet.left-tablet { justify-content: start } :is(.rex, .rex-layout, .forms) .col-tablet.left-tablet { align-items: start } :is(.rex, .rex-layout, .forms) .row-tablet.right-tablet { justify-content: end } :is(.rex, .rex-layout, .forms) .col-tablet.right-tablet { align-items: end } :is(.rex, .rex-layout, .forms) .row-tablet.top-tablet { align-items: start } :is(.rex, .rex-layout, .forms) .col-tablet.top-tablet { justify-content: start } :is(.rex, .rex-layout, .forms) .row-tablet.bottom-tablet { align-items: end } :is(.rex, .rex-layout, .forms) .col-tablet.bottom-tablet { justify-content: end } :is(.rex, .rex-layout, .forms) :is(.row-tablet,.col-tablet).stretch-tablet { align-items: stretch } :is(.rex, .rex-layout, .forms) :is(.row-tablet,.col-tablet).stretch-tablet > * { flex: 1 } :is(.rex, .rex-layout, .forms) .row-tablet.stretch-h-tablet > * { flex: 1 } :is(.rex, .rex-layout, .forms) .row-tablet.stretch-v-tablet { align-items: stretch } :is(.rex, .rex-layout, .forms) .col-tablet.stretch-h-tablet { align-items: stretch } :is(.rex, .rex-layout, .forms) .col-tablet.stretch-v-tablet > * { flex: 1 } /* Spacing */ /* We use :not(.wt) so this can override .col.center w/ a selector weight of 3 above. */ :is(.rex, .rex-layout, .forms) .space-between-tablet:not(.wt) { justify-content: space-between } :is(.rex, .rex-layout, .forms) .space-around-tablet:not(.wt) { justify-content: space-around } :is(.rex, .rex-layout, .forms) .space-evenly-tablet:not(.wt) { justify-content: space-evenly } /* Wrap */ :is(.rex, .rex-layout, .forms) .wrap-tablet { flex-wrap: wrap } :is(.rex, .rex-layout, .forms) .nowrap-tablet { flex-wrap: nowrap; white-space: nowrap } } /* ┌─────────────────╮ * |Grid Desktop+ | * └─────────────────╯*/ @media (min-width: 992px) { :root { --micro-desktop: var(--micro); --tiny-desktop: var(--tiny); --small-desktop: var(--small); --normal-desktop: var(--normal); --big-desktop: var(--big); --huge-desktop: var(--huge); } /* Row/Col */ :is(.rex, .rex-layout, .forms) .row-desktop { display: flex; flex-direction: row; align-items: start; justify-content: start } :is(.rex, .rex-layout, .forms) .col-desktop { display: flex; flex-direction: column; align-items: start; justify-content: start } /* Gaps */ :is(.rex, .rex-layout, .forms) .gap-tiny-desktop { gap: var(--micro) } :is(.rex, .rex-layout, .forms) .gap-small-desktop { gap: var(--small) } :is(.rex, .rex-layout, .forms) .gap-desktop { gap: var(--normal) } :is(.rex, .rex-layout, .forms) .gap-big-desktop { gap: var(--big) } :is(.rex, .rex-layout, .forms) .gap-huge-desktop { gap: var(--huge) } /* Pad */ :is(.rex, .rex-layout, .forms) :not(#wt).pad-tiny-desktop { padding: var(--micro) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-small-desktop { padding: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-desktop { padding: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-big-desktop { padding: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-huge-desktop { padding: var(--huge) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-tiny-desktop { padding-left: var(--tiny); padding-right: var(--tiny) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-small-desktop { padding-left: var(--small); padding-right: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-desktop { padding-left: var(--normal); padding-right: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-big-desktop { padding-left: var(--big); padding-right: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-h-huge-desktop { padding-left: var(--huge); padding-right: var(--huge) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-tiny-desktop { padding-top: var(--tiny); padding-bottom: var(--tiny) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-small-desktop { padding-top: var(--small); padding-bottom: var(--small) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-desktop { padding-top: var(--normal); padding-bottom: var(--normal) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-big-desktop { padding-top: var(--big); padding-bottom: var(--big) } :is(.rex, .rex-layout, .forms) :not(#wt).pad-v-huge-desktop { padding-top: var(--huge); padding-bottom: var(--huge) } /* Alignment */ :is(.rex, .rex-layout, .forms) .row-desktop:is(.center-desktop, .center-h-desktop) { justify-content: center } :is(.rex, .rex-layout, .forms) .col-desktop:is(.center-desktop, .center-h-desktop) { align-items: center } :is(.rex, .rex-layout, .forms) .row-desktop:is(.center-desktop, .center-v-desktop) { align-items: center } :is(.rex, .rex-layout, .forms) .col-desktop:is(.center-desktop, .center-v-desktop) { justify-content: center } :is(.rex, .rex-layout, .forms) .row-desktop.left-desktop { justify-content: start } :is(.rex, .rex-layout, .forms) .col-desktop.left-desktop { align-items: start } :is(.rex, .rex-layout, .forms) .row-desktop.right-desktop { justify-content: end } :is(.rex, .rex-layout, .forms) .col-desktop.right-desktop { align-items: end } :is(.rex, .rex-layout, .forms) .row-desktop.top-desktop { align-items: start } :is(.rex, .rex-layout, .forms) .col-desktop.top-desktop { justify-content: start } :is(.rex, .rex-layout, .forms) .row-desktop.bottom-desktop { align-items: end } :is(.rex, .rex-layout, .forms) .col-desktop.bottom-desktop { justify-content: end } :is(.rex, .rex-layout, .forms) :is(.row-desktop,.col-desktop).stretch-desktop { align-items: stretch } :is(.rex, .rex-layout, .forms) :is(.row-desktop,.col-desktop).stretch-desktop > * { flex: 1 } :is(.rex, .rex-layout, .forms) .row-desktop.stretch-h-desktop > * { flex: 1 } :is(.rex, .rex-layout, .forms) .row-desktop.stretch-v-desktop { align-items: stretch } :is(.rex, .rex-layout, .forms) .col-desktop.stretch-h-desktop { align-items: stretch } :is(.rex, .rex-layout, .forms) .col-desktop.stretch-v-desktop > * { flex: 1 } /* Spacing */ /* We use .sel-weight so this can override :is(.rex, .rex-layout, .forms) .col.center w/ a selector weight of 3 above. */ :is(.rex, .rex-layout, .forms) .space-between-desktop:not(.wt) { justify-content: space-between } :is(.rex, .rex-layout, .forms) .space-around-desktop:not(.wt) { justify-content: space-around } :is(.rex, .rex-layout, .forms) .space-evenly-desktop:not(.wt) { justify-content: space-evenly } /* Wrap */ :is(.rex, .rex-layout, .forms) .wrap-desktop { flex-wrap: wrap } :is(.rex, .rex-layout, .forms) .nowrap-desktop { flex-wrap: nowrap; white-space: nowrap } } /* ┌─────────────────╮ * |Grid Misc | * └─────────────────╯*/ :is(.rex, .rex-layout, .forms) .col hr { width: 100% } /* Show only for specific sizes. */ .mobile, .tablet, .desktop { display: none } @media (min-width: 992px) { .desktop { display: initial } } @media (min-width: 768px) and (max-width: 991px) { .tablet { display: initial } } @media (max-width: 767px) { .mobile { display: initial } } /* ┌─────────────────╮ * |Deprecated | * └─────────────────╯*/ /* These are deprecated, use pad-h and pad-v */ :is(.rex, .rex-forms, .forms) .pad-tiny-small, :is(.rex, .rex-forms, .forms).pad-tiny-small { padding: var(--tiny) var(--small) } :is(.rex, .rex-forms, .forms) .pad-small-normal, :is(.rex, .rex-forms, .forms).pad-small-normal { padding: var(--small) var(--normal) } :is(.rex, .rex-forms, .forms) :is(small, :is(a,b,i,s,p,u,span,div,ul,ol,li,.label):not([contenteditable]).small) { font-size: 80%; opacity: .65; line-height: 1.1 } /* .small is deprecated for .little and .muted */