$sizes: ( "auto": auto, "0": 0px, "1": 2px, "2": 5px, "3": 8px, "4": 10px, "5": 15px ); $directions: ( "s": "left", "e": "right", "t": "top", "b": "bottom" ); @each $size, $val in $sizes { .m-#{$size} { margin: $val; } .p-#{$size} { padding: $val; } @each $dir, $dir-val in $directions { .m#{$dir}-#{$size} { margin-#{$dir-val}: $val; } .p#{$dir}-#{$size} { padding-#{$dir-val}: $val; } } .mx-#{$size} { margin-left: $val; margin-right: $val; } .my-#{$size} { margin-top: $val; margin-bottom: $val; } .px-#{$size} { padding-left: $val; padding-right: $val; } .py-#{$size} { padding-top: $val; padding-bottom: $val; } } .m-auto { margin: auto; } .my-auto { margin-top: auto; margin-bottom: auto; } .mx-auto { margin-left: auto; margin-right: auto; } $w_h_sizes: ( '25': 25%, '50': 50%, '75': 75%, '80': 80%, '100': 100%, 'auto': auto, ); // Loop through the sizes and generate classes @each $name, $value in $w_h_sizes { .h-#{$name} { height: $value; } .w-#{$name} { width: $value; } } .d-flex { display: flex; } .d-flex-col { display: flex; flex-direction: column; } .d-block { display: block; } .cr-all { border-radius: $border-radius; } .cr-top { border-radius: $border-radius $border-radius 0px 0px; } .cr-right { border-radius: 0px $border-radius $border-radius 0px; } .cr-left { border-radius: $border-radius 0px 0px $border-radius; } .cr-bottom { border-radius: 0px 0px $border-radius $border-radius; } .t-s { text-align: start; } .t-e { text-align: end; } .t-m { text-align: center; } .btn-c-invert { color: var(--#{$prefix}-base) !important; } .btn-c-invert:hover { color: var(--#{$prefix}-text) !important; } .borderless-btn.btn-sm { padding: 4px 8px 4px 8px; } .borderless-btn { display: flex; color: var(--#{$prefix}-text); font-size: 1em; border: none; padding: 10px 15px 10px 15px; border-radius: 20px; background-color: var(--#{$prefix}-surface2); transition: all 0.1s linear; cursor: pointer; } .borderless-btn:hover { background-color: var(--#{$prefix}-overlay1); color: var(--#{$prefix}-nav-active-color); } table.table { color: var(--#{$prefix}-text); td { padding-right: 10px; } } table.table-striped { border-collapse: collapse; overflow: hidden; thead { background-color: var(--#{$prefix}-surface0); } tbody { tr { &.row_awaiting_processing { background-color: var(--#{$prefix}-base) !important; max-width: 0px; div { opacity: 0; max-height: 0px; } } div { display: block; overflow: hidden; max-height: 50px; transition: max-height 0.6s cubic-bezier(0.02, 0.15, 0.84, 0.98), opacity 0.5s ease-in; } max-width: 100%; transition: all 0.5s ease-in; &:nth-child(odd) { background-color: var(--#{$prefix}-crust); } &:nth-child(even) { background-color: var(--#{$prefix}-mantle); } } } .positive { color: var(--#{$prefix}-green); } .negative { color: var(--#{$prefix}-red); } } .popup-menu { width: max-content; height: max-content; position: absolute; top: 0; left: 0; font-size: 1em; background-color: var(--#{$prefix}-overlay0); color: var(--#{$prefix}-base); border-radius: 0px 0px $border-radius $border-radius; border-style: solid; border-color: var(--#{$prefix}-overlay2); border-width: thin; transition: max-height 0.2s linear; select { font-size: 1em; border: none; border-radius: $border-radius; background-color: var(--#{$prefix}-mantle); color: var(--#{$prefix}-text); } input { width: 5em; font-size: 1em; margin-left: 10px; margin-right: 10px; border-radius: $border-radius; border-style: solid; border-color: var(--#{$prefix}-text); } }