.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex { display: flex; } .flex-1 { flex: 1; } .flex-center { @extend .flex; justify-content: center; align-items: center; } .flex-between { @extend .flex; justify-content: space-between; align-items: center; } .flex-around { @extend .flex; justify-content: space-around; align-items: center; } .flex-start { @extend .flex; justify-content: flex-start; align-items: center; } .flex-end { @extend .flex; justify-content: flex-end; align-items: center; } .flex-around { @extend .flex; justify-content: space-around; align-items: center; } .flex-wrap { @extend .flex; flex-wrap: wrap; } .flex-column { @extend .flex; flex-direction: column; } .fullWH { width: 100%; height: 100%; } .w100 { width: 100%; padding: 0 20px; box-sizing: border-box; } /* gap */ @for $i from 0 through 1000 { .gap-#{$i} { gap: #{$i}px; } } /* width */ @for $i from 0 through 1000 { .w-#{$i} { width: #{$i}+ "%"; } .w-p-#{$i} { width: #{$i}px; } } /* height */ @for $i from 0 through 100 { .h-#{$i} { height: #{$i}+ "%"; } } @for $i from 0 through 1000 { .h-p-#{$i} { height: #{$i}px; } } /* margin */ @for $i from 0 through 100 { .margin-#{$i} { margin: #{$i}px; } .margin-t-#{$i} { margin-top: #{$i}px; } .margin-b-#{$i} { margin-bottom: #{$i}px; } .margin-l-#{$i} { margin-left: #{$i}px; } .margin-r-#{$i} { margin-right: #{$i}px; } } /* padding */ @for $i from 0 through 100 { .padding-#{$i} { padding: #{$i}px; } .padding-t-#{$i} { padding-top: #{$i}px; } .padding-b-#{$i} { padding-bottom: #{$i}px; } .padding-l-#{$i} { padding-left: #{$i}px; } .padding-r-#{$i} { padding-right: #{$i}px; } } ::-webkit-scrollbar { width: 6px !important; height: 6px !important; background-color: transparent; border-radius: 0; width: 0 !important; background-color: transparent !important; } ::-webkit-scrollbar-thumb { border-radius: 6px; background-color: rgba(76, 169, 206, 0.5); }