b219e26ea6
* Added members library inc. gateway refs #10213 * Added the auth pages and build steps for them refs #10213 * Cleaned up logs * Updated gruntfile to run yarn for member auth * Design refinements on members popups * UI refinements * Updated backend call to trigger only if frontend validation passes * Design refinements for error messages * Added error message for email failure * Updated request-password-reset to not attempt to send headers twice * Updated preact publicPath to relative path * Build auth pages on init
638 lines
25 KiB
CSS
638 lines
25 KiB
CSS
/* Layout Utitlities */
|
|
/* ------------------------------------------------------------
|
|
|
|
These are generic CSS classes that can be used on containers
|
|
that have the single purpose of setting up layout.
|
|
|
|
*/
|
|
|
|
|
|
/* Flexbox */
|
|
/* ------------------------------------------------------------ */
|
|
|
|
.flex { display: flex; }
|
|
.inline-flex { display: inline-flex; }
|
|
|
|
/* 1. Fix for Chrome 44 bug.
|
|
* https://code.google.com/p/chromium/issues/detail?id=506893 */
|
|
.flex-auto {
|
|
flex: 1 1 auto;
|
|
min-width: 0; /* 1 */
|
|
min-height: 0; /* 1 */
|
|
}
|
|
|
|
.flex-none { flex: none; }
|
|
|
|
.flex-column { flex-direction: column; }
|
|
.flex-row { flex-direction: row; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
.flex-nowrap { flex-wrap: nowrap; }
|
|
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
|
.flex-column-reverse { flex-direction: column-reverse; }
|
|
.flex-row-reverse { flex-direction: row-reverse; }
|
|
|
|
.items-start { align-items: flex-start; }
|
|
.items-end { align-items: flex-end; }
|
|
.items-center { align-items: center; }
|
|
.items-baseline { align-items: baseline; }
|
|
.items-stretch { align-items: stretch; }
|
|
|
|
.self-start { align-self: flex-start; }
|
|
.self-end { align-self: flex-end; }
|
|
.self-center { align-self: center; }
|
|
.self-baseline { align-self: baseline; }
|
|
.self-stretch { align-self: stretch; }
|
|
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-around { justify-content: space-around; }
|
|
|
|
.content-start { align-content: flex-start; }
|
|
.content-end { align-content: flex-end; }
|
|
.content-center { align-content: center; }
|
|
.content-between { align-content: space-between; }
|
|
.content-around { align-content: space-around; }
|
|
.content-stretch { align-content: stretch; }
|
|
|
|
.order-0 { order: 0; }
|
|
.order-1 { order: 1; }
|
|
.order-2 { order: 2; }
|
|
.order-3 { order: 3; }
|
|
.order-4 { order: 4; }
|
|
.order-5 { order: 5; }
|
|
.order-6 { order: 6; }
|
|
.order-7 { order: 7; }
|
|
.order-8 { order: 8; }
|
|
.order-last { order: 99999; }
|
|
|
|
.flex-grow-0 { flex-grow: 0; }
|
|
.flex-grow-1 { flex-grow: 1; }
|
|
|
|
.flex-shrink-0 { flex-shrink: 0; }
|
|
.flex-shrink-1 { flex-shrink: 1; }
|
|
|
|
|
|
/* Margins and paddings */
|
|
/* ------------------------------------------------------------ */
|
|
:root {
|
|
--grid-size: 0.4rem;
|
|
}
|
|
|
|
.pa0 { padding: 0; }
|
|
.pa1 { padding: calc(var(--grid-size) * 1); }
|
|
.pa2 { padding: calc(var(--grid-size) * 2); }
|
|
.pa3 { padding: calc(var(--grid-size) * 3); }
|
|
.pa4 { padding: calc(var(--grid-size) * 4); }
|
|
.pa5 { padding: calc(var(--grid-size) * 5); }
|
|
.pa6 { padding: calc(var(--grid-size) * 6); }
|
|
.pa7 { padding: calc(var(--grid-size) * 7); }
|
|
.pa8 { padding: calc(var(--grid-size) * 8); }
|
|
.pa9 { padding: calc(var(--grid-size) * 9); }
|
|
.pa10 { padding: calc(var(--grid-size) * 10); }
|
|
.pa11 { padding: calc(var(--grid-size) * 11); }
|
|
.pa12 { padding: calc(var(--grid-size) * 12); }
|
|
.pa13 { padding: calc(var(--grid-size) * 13); }
|
|
.pa14 { padding: calc(var(--grid-size) * 14); }
|
|
.pa15 { padding: calc(var(--grid-size) * 15); }
|
|
.pa16 { padding: calc(var(--grid-size) * 16); }
|
|
.pa17 { padding: calc(var(--grid-size) * 17); }
|
|
.pa18 { padding: calc(var(--grid-size) * 18); }
|
|
.pa19 { padding: calc(var(--grid-size) * 19); }
|
|
.pa20 { padding: calc(var(--grid-size) * 20); }
|
|
.pa25 { padding: calc(var(--grid-size) * 25); }
|
|
.pa30 { padding: calc(var(--grid-size) * 30); }
|
|
.pa40 { padding: calc(var(--grid-size) * 40); }
|
|
.pa50 { padding: calc(var(--grid-size) * 50); }
|
|
|
|
.pr0 { padding-right: 0; }
|
|
.pr1 { padding-right: calc(var(--grid-size) * 1); }
|
|
.pr2 { padding-right: calc(var(--grid-size) * 2); }
|
|
.pr3 { padding-right: calc(var(--grid-size) * 3); }
|
|
.pr4 { padding-right: calc(var(--grid-size) * 4); }
|
|
.pr5 { padding-right: calc(var(--grid-size) * 5); }
|
|
.pr6 { padding-right: calc(var(--grid-size) * 6); }
|
|
.pr7 { padding-right: calc(var(--grid-size) * 7); }
|
|
.pr8 { padding-right: calc(var(--grid-size) * 8); }
|
|
.pr9 { padding-right: calc(var(--grid-size) * 9); }
|
|
.pr10 { padding-right: calc(var(--grid-size) * 10); }
|
|
.pr11 { padding-right: calc(var(--grid-size) * 11); }
|
|
.pr12 { padding-right: calc(var(--grid-size) * 12); }
|
|
.pr13 { padding-right: calc(var(--grid-size) * 13); }
|
|
.pr14 { padding-right: calc(var(--grid-size) * 14); }
|
|
.pr15 { padding-right: calc(var(--grid-size) * 15); }
|
|
.pr16 { padding-right: calc(var(--grid-size) * 16); }
|
|
.pr17 { padding-right: calc(var(--grid-size) * 17); }
|
|
.pr18 { padding-right: calc(var(--grid-size) * 18); }
|
|
.pr19 { padding-right: calc(var(--grid-size) * 19); }
|
|
.pr20 { padding-right: calc(var(--grid-size) * 20); }
|
|
.pr25 { padding-right: calc(var(--grid-size) * 25); }
|
|
.pr30 { padding-right: calc(var(--grid-size) * 30); }
|
|
.pr40 { padding-right: calc(var(--grid-size) * 40); }
|
|
.pr50 { padding-right: calc(var(--grid-size) * 50); }
|
|
|
|
.pb0 { padding-bottom: 0; }
|
|
.pb1 { padding-bottom: calc(var(--grid-size) * 1); }
|
|
.pb2 { padding-bottom: calc(var(--grid-size) * 2); }
|
|
.pb3 { padding-bottom: calc(var(--grid-size) * 3); }
|
|
.pb4 { padding-bottom: calc(var(--grid-size) * 4); }
|
|
.pb5 { padding-bottom: calc(var(--grid-size) * 5); }
|
|
.pb6 { padding-bottom: calc(var(--grid-size) * 6); }
|
|
.pb7 { padding-bottom: calc(var(--grid-size) * 7); }
|
|
.pb8 { padding-bottom: calc(var(--grid-size) * 8); }
|
|
.pb9 { padding-bottom: calc(var(--grid-size) * 9); }
|
|
.pb10 { padding-bottom: calc(var(--grid-size) * 10); }
|
|
.pb11 { padding-bottom: calc(var(--grid-size) * 11); }
|
|
.pb12 { padding-bottom: calc(var(--grid-size) * 12); }
|
|
.pb13 { padding-bottom: calc(var(--grid-size) * 13); }
|
|
.pb14 { padding-bottom: calc(var(--grid-size) * 14); }
|
|
.pb15 { padding-bottom: calc(var(--grid-size) * 15); }
|
|
.pb16 { padding-bottom: calc(var(--grid-size) * 16); }
|
|
.pb17 { padding-bottom: calc(var(--grid-size) * 17); }
|
|
.pb18 { padding-bottom: calc(var(--grid-size) * 18); }
|
|
.pb19 { padding-bottom: calc(var(--grid-size) * 19); }
|
|
.pb20 { padding-bottom: calc(var(--grid-size) * 20); }
|
|
.pb25 { padding-bottom: calc(var(--grid-size) * 25); }
|
|
.pb30 { padding-bottom: calc(var(--grid-size) * 30); }
|
|
.pb40 { padding-bottom: calc(var(--grid-size) * 40); }
|
|
.pb50 { padding-bottom: calc(var(--grid-size) * 50); }
|
|
|
|
.pl0 { padding-left: 0; }
|
|
.pl1 { padding-left: calc(var(--grid-size) * 1); }
|
|
.pl2 { padding-left: calc(var(--grid-size) * 2); }
|
|
.pl3 { padding-left: calc(var(--grid-size) * 3); }
|
|
.pl4 { padding-left: calc(var(--grid-size) * 4); }
|
|
.pl5 { padding-left: calc(var(--grid-size) * 5); }
|
|
.pl6 { padding-left: calc(var(--grid-size) * 6); }
|
|
.pl7 { padding-left: calc(var(--grid-size) * 7); }
|
|
.pl8 { padding-left: calc(var(--grid-size) * 8); }
|
|
.pl9 { padding-left: calc(var(--grid-size) * 9); }
|
|
.pl10 { padding-left: calc(var(--grid-size) * 10); }
|
|
.pl11 { padding-left: calc(var(--grid-size) * 11); }
|
|
.pl12 { padding-left: calc(var(--grid-size) * 12); }
|
|
.pl13 { padding-left: calc(var(--grid-size) * 13); }
|
|
.pl14 { padding-left: calc(var(--grid-size) * 14); }
|
|
.pl15 { padding-left: calc(var(--grid-size) * 15); }
|
|
.pl16 { padding-left: calc(var(--grid-size) * 16); }
|
|
.pl17 { padding-left: calc(var(--grid-size) * 17); }
|
|
.pl18 { padding-left: calc(var(--grid-size) * 18); }
|
|
.pl19 { padding-left: calc(var(--grid-size) * 19); }
|
|
.pl20 { padding-left: calc(var(--grid-size) * 20); }
|
|
.pl25 { padding-left: calc(var(--grid-size) * 25); }
|
|
.pl30 { padding-left: calc(var(--grid-size) * 30); }
|
|
.pl40 { padding-left: calc(var(--grid-size) * 40); }
|
|
.pl50 { padding-left: calc(var(--grid-size) * 50); }
|
|
|
|
.pt0 { padding-top: 0; }
|
|
.pt1 { padding-top: calc(var(--grid-size) * 1); }
|
|
.pt2 { padding-top: calc(var(--grid-size) * 2); }
|
|
.pt3 { padding-top: calc(var(--grid-size) * 3); }
|
|
.pt4 { padding-top: calc(var(--grid-size) * 4); }
|
|
.pt5 { padding-top: calc(var(--grid-size) * 5); }
|
|
.pt6 { padding-top: calc(var(--grid-size) * 6); }
|
|
.pt7 { padding-top: calc(var(--grid-size) * 7); }
|
|
.pt8 { padding-top: calc(var(--grid-size) * 8); }
|
|
.pt9 { padding-top: calc(var(--grid-size) * 9); }
|
|
.pt10 { padding-top: calc(var(--grid-size) * 10); }
|
|
.pt11 { padding-top: calc(var(--grid-size) * 11); }
|
|
.pt12 { padding-top: calc(var(--grid-size) * 12); }
|
|
.pt13 { padding-top: calc(var(--grid-size) * 13); }
|
|
.pt14 { padding-top: calc(var(--grid-size) * 14); }
|
|
.pt15 { padding-top: calc(var(--grid-size) * 15); }
|
|
.pt16 { padding-top: calc(var(--grid-size) * 16); }
|
|
.pt17 { padding-top: calc(var(--grid-size) * 17); }
|
|
.pt18 { padding-top: calc(var(--grid-size) * 18); }
|
|
.pt19 { padding-top: calc(var(--grid-size) * 19); }
|
|
.pt20 { padding-top: calc(var(--grid-size) * 20); }
|
|
.pt25 { padding-top: calc(var(--grid-size) * 25); }
|
|
.pt30 { padding-top: calc(var(--grid-size) * 30); }
|
|
.pt40 { padding-top: calc(var(--grid-size) * 40); }
|
|
.pt50 { padding-top: calc(var(--grid-size) * 50); }
|
|
|
|
.ma0 { margin: 0; }
|
|
.ma1 { margin: calc(var(--grid-size) * 1); }
|
|
.ma2 { margin: calc(var(--grid-size) * 2); }
|
|
.ma3 { margin: calc(var(--grid-size) * 3); }
|
|
.ma4 { margin: calc(var(--grid-size) * 4); }
|
|
.ma5 { margin: calc(var(--grid-size) * 5); }
|
|
.ma6 { margin: calc(var(--grid-size) * 6); }
|
|
.ma7 { margin: calc(var(--grid-size) * 7); }
|
|
.ma8 { margin: calc(var(--grid-size) * 8); }
|
|
.ma9 { margin: calc(var(--grid-size) * 9); }
|
|
.ma10 { margin: calc(var(--grid-size) * 10); }
|
|
.ma11 { margin: calc(var(--grid-size) * 11); }
|
|
.ma12 { margin: calc(var(--grid-size) * 12); }
|
|
.ma13 { margin: calc(var(--grid-size) * 13); }
|
|
.ma14 { margin: calc(var(--grid-size) * 14); }
|
|
.ma15 { margin: calc(var(--grid-size) * 15); }
|
|
.ma16 { margin: calc(var(--grid-size) * 16); }
|
|
.ma17 { margin: calc(var(--grid-size) * 17); }
|
|
.ma18 { margin: calc(var(--grid-size) * 18); }
|
|
.ma19 { margin: calc(var(--grid-size) * 19); }
|
|
.ma20 { margin: calc(var(--grid-size) * 20); }
|
|
.ma25 { margin: calc(var(--grid-size) * 25); }
|
|
.ma30 { margin: calc(var(--grid-size) * 30); }
|
|
.ma40 { margin: calc(var(--grid-size) * 40); }
|
|
.ma50 { margin: calc(var(--grid-size) * 50); }
|
|
|
|
.mr0 { margin-right: 0; }
|
|
.mr1 { margin-right: calc(var(--grid-size) * 1); }
|
|
.mr2 { margin-right: calc(var(--grid-size) * 2); }
|
|
.mr3 { margin-right: calc(var(--grid-size) * 3); }
|
|
.mr4 { margin-right: calc(var(--grid-size) * 4); }
|
|
.mr5 { margin-right: calc(var(--grid-size) * 5); }
|
|
.mr6 { margin-right: calc(var(--grid-size) * 6); }
|
|
.mr7 { margin-right: calc(var(--grid-size) * 7); }
|
|
.mr8 { margin-right: calc(var(--grid-size) * 8); }
|
|
.mr9 { margin-right: calc(var(--grid-size) * 9); }
|
|
.mr10 { margin-right: calc(var(--grid-size) * 10); }
|
|
.mr11 { margin-right: calc(var(--grid-size) * 11); }
|
|
.mr12 { margin-right: calc(var(--grid-size) * 12); }
|
|
.mr13 { margin-right: calc(var(--grid-size) * 13); }
|
|
.mr14 { margin-right: calc(var(--grid-size) * 14); }
|
|
.mr15 { margin-right: calc(var(--grid-size) * 15); }
|
|
.mr16 { margin-right: calc(var(--grid-size) * 16); }
|
|
.mr17 { margin-right: calc(var(--grid-size) * 17); }
|
|
.mr18 { margin-right: calc(var(--grid-size) * 18); }
|
|
.mr19 { margin-right: calc(var(--grid-size) * 19); }
|
|
.mr20 { margin-right: calc(var(--grid-size) * 20); }
|
|
.mr25 { margin-right: calc(var(--grid-size) * 25); }
|
|
.mr30 { margin-right: calc(var(--grid-size) * 30); }
|
|
.mr40 { margin-right: calc(var(--grid-size) * 40); }
|
|
.mr50 { margin-right: calc(var(--grid-size) * 50); }
|
|
|
|
.mb0 { margin-bottom: 0; }
|
|
.mb1 { margin-bottom: calc(var(--grid-size) * 1); }
|
|
.mb2 { margin-bottom: calc(var(--grid-size) * 2); }
|
|
.mb3 { margin-bottom: calc(var(--grid-size) * 3); }
|
|
.mb4 { margin-bottom: calc(var(--grid-size) * 4); }
|
|
.mb5 { margin-bottom: calc(var(--grid-size) * 5); }
|
|
.mb6 { margin-bottom: calc(var(--grid-size) * 6); }
|
|
.mb7 { margin-bottom: calc(var(--grid-size) * 7); }
|
|
.mb8 { margin-bottom: calc(var(--grid-size) * 8); }
|
|
.mb9 { margin-bottom: calc(var(--grid-size) * 9); }
|
|
.mb10 { margin-bottom: calc(var(--grid-size) * 10); }
|
|
.mb11 { margin-bottom: calc(var(--grid-size) * 11); }
|
|
.mb12 { margin-bottom: calc(var(--grid-size) * 12); }
|
|
.mb13 { margin-bottom: calc(var(--grid-size) * 13); }
|
|
.mb14 { margin-bottom: calc(var(--grid-size) * 14); }
|
|
.mb15 { margin-bottom: calc(var(--grid-size) * 15); }
|
|
.mb16 { margin-bottom: calc(var(--grid-size) * 16); }
|
|
.mb17 { margin-bottom: calc(var(--grid-size) * 17); }
|
|
.mb18 { margin-bottom: calc(var(--grid-size) * 18); }
|
|
.mb19 { margin-bottom: calc(var(--grid-size) * 19); }
|
|
.mb20 { margin-bottom: calc(var(--grid-size) * 20); }
|
|
.mb25 { margin-bottom: calc(var(--grid-size) * 25); }
|
|
.mb30 { margin-bottom: calc(var(--grid-size) * 30); }
|
|
.mb40 { margin-bottom: calc(var(--grid-size) * 40); }
|
|
.mb50 { margin-bottom: calc(var(--grid-size) * 50); }
|
|
|
|
.ml0 { margin-left: 0; }
|
|
.ml1 { margin-left: calc(var(--grid-size) * 1); }
|
|
.ml2 { margin-left: calc(var(--grid-size) * 2); }
|
|
.ml3 { margin-left: calc(var(--grid-size) * 3); }
|
|
.ml4 { margin-left: calc(var(--grid-size) * 4); }
|
|
.ml5 { margin-left: calc(var(--grid-size) * 5); }
|
|
.ml6 { margin-left: calc(var(--grid-size) * 6); }
|
|
.ml7 { margin-left: calc(var(--grid-size) * 7); }
|
|
.ml8 { margin-left: calc(var(--grid-size) * 8); }
|
|
.ml9 { margin-left: calc(var(--grid-size) * 9); }
|
|
.ml10 { margin-left: calc(var(--grid-size) * 10); }
|
|
.ml11 { margin-left: calc(var(--grid-size) * 11); }
|
|
.ml12 { margin-left: calc(var(--grid-size) * 12); }
|
|
.ml13 { margin-left: calc(var(--grid-size) * 13); }
|
|
.ml14 { margin-left: calc(var(--grid-size) * 14); }
|
|
.ml15 { margin-left: calc(var(--grid-size) * 15); }
|
|
.ml16 { margin-left: calc(var(--grid-size) * 16); }
|
|
.ml17 { margin-left: calc(var(--grid-size) * 17); }
|
|
.ml18 { margin-left: calc(var(--grid-size) * 18); }
|
|
.ml19 { margin-left: calc(var(--grid-size) * 19); }
|
|
.ml20 { margin-left: calc(var(--grid-size) * 20); }
|
|
.ml25 { margin-left: calc(var(--grid-size) * 25); }
|
|
.ml30 { margin-left: calc(var(--grid-size) * 30); }
|
|
.ml40 { margin-left: calc(var(--grid-size) * 40); }
|
|
.ml50 { margin-left: calc(var(--grid-size) * 50); }
|
|
|
|
.mt0 { margin-top: 0; }
|
|
.mt1 { margin-top: calc(var(--grid-size) * 1); }
|
|
.mt2 { margin-top: calc(var(--grid-size) * 2); }
|
|
.mt3 { margin-top: calc(var(--grid-size) * 3); }
|
|
.mt4 { margin-top: calc(var(--grid-size) * 4); }
|
|
.mt5 { margin-top: calc(var(--grid-size) * 5); }
|
|
.mt6 { margin-top: calc(var(--grid-size) * 6); }
|
|
.mt7 { margin-top: calc(var(--grid-size) * 7); }
|
|
.mt8 { margin-top: calc(var(--grid-size) * 8); }
|
|
.mt9 { margin-top: calc(var(--grid-size) * 9); }
|
|
.mt10 { margin-top: calc(var(--grid-size) * 10); }
|
|
.mt11 { margin-top: calc(var(--grid-size) * 11); }
|
|
.mt12 { margin-top: calc(var(--grid-size) * 12); }
|
|
.mt13 { margin-top: calc(var(--grid-size) * 13); }
|
|
.mt14 { margin-top: calc(var(--grid-size) * 14); }
|
|
.mt15 { margin-top: calc(var(--grid-size) * 15); }
|
|
.mt16 { margin-top: calc(var(--grid-size) * 16); }
|
|
.mt17 { margin-top: calc(var(--grid-size) * 17); }
|
|
.mt18 { margin-top: calc(var(--grid-size) * 18); }
|
|
.mt19 { margin-top: calc(var(--grid-size) * 19); }
|
|
.mt20 { margin-top: calc(var(--grid-size) * 20); }
|
|
.mt25 { margin-top: calc(var(--grid-size) * 25); }
|
|
.mt30 { margin-top: calc(var(--grid-size) * 30); }
|
|
.mt40 { margin-top: calc(var(--grid-size) * 40); }
|
|
.mt50 { margin-top: calc(var(--grid-size) * 50); }
|
|
|
|
.na0 { margin: 0; }
|
|
.na1 { margin: calc(-1 * var(--grid-size) * 1); }
|
|
.na2 { margin: calc(-1 * var(--grid-size) * 2); }
|
|
.na3 { margin: calc(-1 * var(--grid-size) * 3); }
|
|
.na4 { margin: calc(-1 * var(--grid-size) * 4); }
|
|
.na5 { margin: calc(-1 * var(--grid-size) * 5); }
|
|
.na6 { margin: calc(-1 * var(--grid-size) * 6); }
|
|
.na7 { margin: calc(-1 * var(--grid-size) * 7); }
|
|
.na8 { margin: calc(-1 * var(--grid-size) * 8); }
|
|
.na9 { margin: calc(-1 * var(--grid-size) * 9); }
|
|
.na10 { margin: calc(-1 * var(--grid-size) * 10); }
|
|
.na11 { margin: calc(-1 * var(--grid-size) * 11); }
|
|
.na12 { margin: calc(-1 * var(--grid-size) * 12); }
|
|
.na13 { margin: calc(-1 * var(--grid-size) * 13); }
|
|
.na14 { margin: calc(-1 * var(--grid-size) * 14); }
|
|
.na15 { margin: calc(-1 * var(--grid-size) * 15); }
|
|
.na16 { margin: calc(-1 * var(--grid-size) * 16); }
|
|
.na17 { margin: calc(-1 * var(--grid-size) * 17); }
|
|
.na18 { margin: calc(-1 * var(--grid-size) * 18); }
|
|
.na19 { margin: calc(-1 * var(--grid-size) * 19); }
|
|
.na20 { margin: calc(-1 * var(--grid-size) * 20); }
|
|
.na25 { margin: calc(-1 * var(--grid-size) * 25); }
|
|
.na30 { margin: calc(-1 * var(--grid-size) * 30); }
|
|
.na40 { margin: calc(-1 * var(--grid-size) * 40); }
|
|
.na50 { margin: calc(-1 * var(--grid-size) * 50); }
|
|
|
|
.nr0 { margin-right: 0; }
|
|
.nr1 { margin-right: calc(-1 * var(--grid-size) * 1); }
|
|
.nr2 { margin-right: calc(-1 * var(--grid-size) * 2); }
|
|
.nr3 { margin-right: calc(-1 * var(--grid-size) * 3); }
|
|
.nr4 { margin-right: calc(-1 * var(--grid-size) * 4); }
|
|
.nr5 { margin-right: calc(-1 * var(--grid-size) * 5); }
|
|
.nr6 { margin-right: calc(-1 * var(--grid-size) * 6); }
|
|
.nr7 { margin-right: calc(-1 * var(--grid-size) * 7); }
|
|
.nr8 { margin-right: calc(-1 * var(--grid-size) * 8); }
|
|
.nr9 { margin-right: calc(-1 * var(--grid-size) * 9); }
|
|
.nr10 { margin-right: calc(-1 * var(--grid-size) * 10); }
|
|
.nr11 { margin-right: calc(-1 * var(--grid-size) * 11); }
|
|
.nr12 { margin-right: calc(-1 * var(--grid-size) * 12); }
|
|
.nr13 { margin-right: calc(-1 * var(--grid-size) * 13); }
|
|
.nr14 { margin-right: calc(-1 * var(--grid-size) * 14); }
|
|
.nr15 { margin-right: calc(-1 * var(--grid-size) * 15); }
|
|
.nr16 { margin-right: calc(-1 * var(--grid-size) * 16); }
|
|
.nr17 { margin-right: calc(-1 * var(--grid-size) * 17); }
|
|
.nr18 { margin-right: calc(-1 * var(--grid-size) * 18); }
|
|
.nr19 { margin-right: calc(-1 * var(--grid-size) * 19); }
|
|
.nr20 { margin-right: calc(-1 * var(--grid-size) * 20); }
|
|
.nr25 { margin-right: calc(-1 * var(--grid-size) * 25); }
|
|
.nr30 { margin-right: calc(-1 * var(--grid-size) * 30); }
|
|
.nr40 { margin-right: calc(-1 * var(--grid-size) * 40); }
|
|
.nr50 { margin-right: calc(-1 * var(--grid-size) * 50); }
|
|
|
|
.nb0 { margin-bottom: 0; }
|
|
.nb1 { margin-bottom: calc(-1 * var(--grid-size) * 1); }
|
|
.nb2 { margin-bottom: calc(-1 * var(--grid-size) * 2); }
|
|
.nb3 { margin-bottom: calc(-1 * var(--grid-size) * 3); }
|
|
.nb4 { margin-bottom: calc(-1 * var(--grid-size) * 4); }
|
|
.nb5 { margin-bottom: calc(-1 * var(--grid-size) * 5); }
|
|
.nb6 { margin-bottom: calc(-1 * var(--grid-size) * 6); }
|
|
.nb7 { margin-bottom: calc(-1 * var(--grid-size) * 7); }
|
|
.nb8 { margin-bottom: calc(-1 * var(--grid-size) * 8); }
|
|
.nb9 { margin-bottom: calc(-1 * var(--grid-size) * 9); }
|
|
.nb10 { margin-bottom: calc(-1 * var(--grid-size) * 10); }
|
|
.nb11 { margin-bottom: calc(-1 * var(--grid-size) * 11); }
|
|
.nb12 { margin-bottom: calc(-1 * var(--grid-size) * 12); }
|
|
.nb13 { margin-bottom: calc(-1 * var(--grid-size) * 13); }
|
|
.nb14 { margin-bottom: calc(-1 * var(--grid-size) * 14); }
|
|
.nb15 { margin-bottom: calc(-1 * var(--grid-size) * 15); }
|
|
.nb16 { margin-bottom: calc(-1 * var(--grid-size) * 16); }
|
|
.nb17 { margin-bottom: calc(-1 * var(--grid-size) * 17); }
|
|
.nb18 { margin-bottom: calc(-1 * var(--grid-size) * 18); }
|
|
.nb19 { margin-bottom: calc(-1 * var(--grid-size) * 19); }
|
|
.nb20 { margin-bottom: calc(-1 * var(--grid-size) * 20); }
|
|
.nb25 { margin-bottom: calc(-1 * var(--grid-size) * 25); }
|
|
.nb30 { margin-bottom: calc(-1 * var(--grid-size) * 30); }
|
|
.nb40 { margin-bottom: calc(-1 * var(--grid-size) * 40); }
|
|
.nb50 { margin-bottom: calc(-1 * var(--grid-size) * 50); }
|
|
|
|
.nl0 { margin-left: 0; }
|
|
.nl1 { margin-left: calc(-1 * var(--grid-size) * 1); }
|
|
.nl2 { margin-left: calc(-1 * var(--grid-size) * 2); }
|
|
.nl3 { margin-left: calc(-1 * var(--grid-size) * 3); }
|
|
.nl4 { margin-left: calc(-1 * var(--grid-size) * 4); }
|
|
.nl5 { margin-left: calc(-1 * var(--grid-size) * 5); }
|
|
.nl6 { margin-left: calc(-1 * var(--grid-size) * 6); }
|
|
.nl7 { margin-left: calc(-1 * var(--grid-size) * 7); }
|
|
.nl8 { margin-left: calc(-1 * var(--grid-size) * 8); }
|
|
.nl9 { margin-left: calc(-1 * var(--grid-size) * 9); }
|
|
.nl10 { margin-left: calc(-1 * var(--grid-size) * 10); }
|
|
.nl11 { margin-left: calc(-1 * var(--grid-size) * 11); }
|
|
.nl12 { margin-left: calc(-1 * var(--grid-size) * 12); }
|
|
.nl13 { margin-left: calc(-1 * var(--grid-size) * 13); }
|
|
.nl14 { margin-left: calc(-1 * var(--grid-size) * 14); }
|
|
.nl15 { margin-left: calc(-1 * var(--grid-size) * 15); }
|
|
.nl16 { margin-left: calc(-1 * var(--grid-size) * 16); }
|
|
.nl17 { margin-left: calc(-1 * var(--grid-size) * 17); }
|
|
.nl18 { margin-left: calc(-1 * var(--grid-size) * 18); }
|
|
.nl19 { margin-left: calc(-1 * var(--grid-size) * 19); }
|
|
.nl20 { margin-left: calc(-1 * var(--grid-size) * 20); }
|
|
.nl25 { margin-left: calc(-1 * var(--grid-size) * 25); }
|
|
.nl30 { margin-left: calc(-1 * var(--grid-size) * 30); }
|
|
.nl40 { margin-left: calc(-1 * var(--grid-size) * 40); }
|
|
.nl50 { margin-left: calc(-1 * var(--grid-size) * 50); }
|
|
|
|
.nt0 { margin-top: 0; }
|
|
.nt1 { margin-top: calc(-1 * var(--grid-size) * 1); }
|
|
.nt2 { margin-top: calc(-1 * var(--grid-size) * 2); }
|
|
.nt3 { margin-top: calc(-1 * var(--grid-size) * 3); }
|
|
.nt4 { margin-top: calc(-1 * var(--grid-size) * 4); }
|
|
.nt5 { margin-top: calc(-1 * var(--grid-size) * 5); }
|
|
.nt6 { margin-top: calc(-1 * var(--grid-size) * 6); }
|
|
.nt7 { margin-top: calc(-1 * var(--grid-size) * 7); }
|
|
.nt8 { margin-top: calc(-1 * var(--grid-size) * 8); }
|
|
.nt9 { margin-top: calc(-1 * var(--grid-size) * 9); }
|
|
.nt10 { margin-top: calc(-1 * var(--grid-size) * 10); }
|
|
.nt11 { margin-top: calc(-1 * var(--grid-size) * 11); }
|
|
.nt12 { margin-top: calc(-1 * var(--grid-size) * 12); }
|
|
.nt13 { margin-top: calc(-1 * var(--grid-size) * 13); }
|
|
.nt14 { margin-top: calc(-1 * var(--grid-size) * 14); }
|
|
.nt15 { margin-top: calc(-1 * var(--grid-size) * 15); }
|
|
.nt16 { margin-top: calc(-1 * var(--grid-size) * 16); }
|
|
.nt17 { margin-top: calc(-1 * var(--grid-size) * 17); }
|
|
.nt18 { margin-top: calc(-1 * var(--grid-size) * 18); }
|
|
.nt19 { margin-top: calc(-1 * var(--grid-size) * 19); }
|
|
.nt20 { margin-top: calc(-1 * var(--grid-size) * 20); }
|
|
.nt25 { margin-top: calc(-1 * var(--grid-size) * 25); }
|
|
.nt30 { margin-top: calc(-1 * var(--grid-size) * 30); }
|
|
.nt40 { margin-top: calc(-1 * var(--grid-size) * 40); }
|
|
.nt50 { margin-top: calc(-1 * var(--grid-size) * 50); }
|
|
|
|
|
|
/* Nudging */
|
|
/* ------------------------------------------------------------ */
|
|
.nudge-top--1 {
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
.nudge-top--2 {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.nudge-top--3 {
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
.nudge-top--4 {
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
.nudge-top--5 {
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
.nudge-top--6 {
|
|
position: relative;
|
|
top: 6px;
|
|
}
|
|
.nudge-top--7 {
|
|
position: relative;
|
|
top: 7px;
|
|
}
|
|
.nudge-top--8 {
|
|
position: relative;
|
|
top: 8px;
|
|
}
|
|
.nudge-top--9 {
|
|
position: relative;
|
|
top: 9px;
|
|
}
|
|
.nudge-top--10 {
|
|
position: relative;
|
|
top: 10px;
|
|
}
|
|
|
|
.nudge-right--1 {
|
|
position: relative;
|
|
right: 1px;
|
|
}
|
|
.nudge-right--2 {
|
|
position: relative;
|
|
right: 2px;
|
|
}
|
|
.nudge-right--3 {
|
|
position: relative;
|
|
right: 3px;
|
|
}
|
|
.nudge-right--4 {
|
|
position: relative;
|
|
right: 4px;
|
|
}
|
|
.nudge-right--5 {
|
|
position: relative;
|
|
right: 5px;
|
|
}
|
|
.nudge-right--6 {
|
|
position: relative;
|
|
right: 6px;
|
|
}
|
|
.nudge-right--7 {
|
|
position: relative;
|
|
right: 7px;
|
|
}
|
|
.nudge-right--8 {
|
|
position: relative;
|
|
right: 8px;
|
|
}
|
|
.nudge-right--9 {
|
|
position: relative;
|
|
right: 9px;
|
|
}
|
|
.nudge-right--10 {
|
|
position: relative;
|
|
right: 10px;
|
|
}
|
|
|
|
.nudge-bottom--1 {
|
|
position: relative;
|
|
bottom: 1px;
|
|
}
|
|
.nudge-bottom--2 {
|
|
position: relative;
|
|
bottom: 2px;
|
|
}
|
|
.nudge-bottom--3 {
|
|
position: relative;
|
|
bottom: 3px;
|
|
}
|
|
.nudge-bottom--4 {
|
|
position: relative;
|
|
bottom: 4px;
|
|
}
|
|
.nudge-bottom--5 {
|
|
position: relative;
|
|
bottom: 5px;
|
|
}
|
|
.nudge-bottom--6 {
|
|
position: relative;
|
|
bottom: 6px;
|
|
}
|
|
.nudge-bottom--7 {
|
|
position: relative;
|
|
bottom: 7px;
|
|
}
|
|
.nudge-bottom--8 {
|
|
position: relative;
|
|
bottom: 8px;
|
|
}
|
|
.nudge-bottom--9 {
|
|
position: relative;
|
|
bottom: 9px;
|
|
}
|
|
.nudge-bottom--10 {
|
|
position: relative;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.nudge-left--1 {
|
|
position: relative;
|
|
left: 1px;
|
|
}
|
|
.nudge-left--2 {
|
|
position: relative;
|
|
left: 2px;
|
|
}
|
|
.nudge-left--3 {
|
|
position: relative;
|
|
left: 3px;
|
|
}
|
|
.nudge-left--4 {
|
|
position: relative;
|
|
left: 4px;
|
|
}
|
|
.nudge-left--5 {
|
|
position: relative;
|
|
left: 5px;
|
|
}
|
|
.nudge-left--6 {
|
|
position: relative;
|
|
left: 6px;
|
|
}
|
|
.nudge-left--7 {
|
|
position: relative;
|
|
left: 7px;
|
|
}
|
|
.nudge-left--8 {
|
|
position: relative;
|
|
left: 8px;
|
|
}
|
|
.nudge-left--9 {
|
|
position: relative;
|
|
left: 9px;
|
|
}
|
|
.nudge-left--10 {
|
|
position: relative;
|
|
left: 10px;
|
|
} |