css-snippets

checkbox.scss

:where(label) {
  display: flex;
  place-items: center;
  margin-right: 1rem;
  gap: 0.3rem;
  cursor: pointer;
  height: auto;

  :where([type="checkbox"]) {
    appearance: none;
    -webkit-appearance: none;
    border: 0.15rem solid transparent;
    cursor: pointer;

    &::before {
      content: "";
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border: 0.15rem solid lightgrey;
      border-radius: 0;
      background-color: whitesmoke;
    }

    &:checked::before {
      background-color: gray;
    }
  }
}

clamp.css

.clamp {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

css-snippets.md

CSS/SCSS snippets

custom-dropdown.html

<div class="d-flex align-items-center" style="height: 80vh">
  <div class="container">
    <p>Custom Dropdown</p>
    <div id="dropdown-component" class="wrapper form-group border-1 bg-light">
      <div class="d-flex aligh-items-center">
        <div class="dropdown-arrow">
          <i></i>
        </div>
        <input
          type="text"
          class="form-control custom-dropdown rounded-0"
          id="drop-down"
          placeholder="Search list"
        />
      </div>
      <div class="dropdown-list d-none bg-light dl-hide">
        <div class="list-unstyled">
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value="First checkbox"
              id="defaultCheck1"
            />
            <label class="form-check-label" for="defaultCheck1"> Open </label>
          </div>
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value="Second checkbox"
              id="defaultCheck2"
            />
            <label class="form-check-label" for="defaultCheck2">
              In progress
            </label>
          </div>
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value="Third Checkbox"
              id="defaultCheck2"
            />
            <label class="form-check-label" for="defaultCheck3">
              Reopened
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div></div>
</div>

custom-dropdown.scss

@mixin clip-arrow($border-color: #c9c9c9) {
  &::after {
    content: "";
    border-style: solid;
    border-width: 8px 7px 0 7px;
    border-color: $border-color transparent transparent transparent;
    // filter: brightness(0.6);
  }
}

.dropdown-list {
  z-index: 99;
  position: absolute;
  padding: 0.3rem 1rem;
  left: 0;
  right: 0;
  border: 1px lightgray solid;
  border-top: none;
  opacity: 1;
  transition: 2s opacity, 1s;
  .form-check {
    padding: 0.5rem 1rem;
  }
}

.dl-hide {
  opacity: 0;
}

.wrapper {
  position: relative;
}
// comments
.custom-dropdown {
  &::placeholder {
    font-size: 1rem;
    color: lightgray;
  }
  &:focus {
    border-color: lightgray;
    box-shadow: none;
  }
}

.dropdown-arrow {
  position: absolute;
  display: block;
  align-items: center;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  &:hover {
    cursor: pointer;
  }
  i {
    display: flex;
    align-items: center;
    height: 100%;
    @include clip-arrow();
    &:hover {
      @include clip-arrow(darken(#c9c9c9, 20));
    }
  }
}

responsive-page-font.css

html {
  font-size: var(--page-fs, 100%);

  @media screen and (max-width: calc(768rem / 16)) {
    font-size: var(--page-fs-xs, 82%);
  }

  @media screen and (max-width: calc(992rem / 16)) and (min-width: calc(768rem / 16)) {
    font-size: var(--page-fs-sm, 87%);
  }

  @media screen and (max-width: calc(1280rem / 16)) and (min-width: calc(992rem / 16)) {
    font-size: var(--page-fs-md, 90%);
  }

  @media screen and (max-width: calc(1400rem / 16)) and (min-width: calc(1280rem / 16)) {
    font-size: var(--page-fs-lg, 95%);
  }
}


html {
  scroll-behavior: smooth;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 90%
}

@media(min-width: 980px) {
  html {
      font-size:98%
  }
}


/* set media to queries to min980 max 1600 */
@media screen and (min-width: 980px) and (max-width: 1600px) {
  html {
    font-size: 100%;
  }
}

@media(min-width: 1600px) {
  html {
      font-size:110%
  }
}

responsive-page-fonts.css

html {
  font-size: 100%;

  @media screen and (max-width: calc(768rem / 16)) {
    font-size: 80%;
  }

  @media screen and (max-width: calc(992rem / 16)) and (min-width: calc(768rem / 16)) {
    font-size: 85%;
  }

  @media screen and (max-width: calc(1280rem / 16)) and (min-width: calc(992rem / 16)) {
    font-size: 90%;
  }

  @media screen and (max-width: calc(1400rem / 16)) and (min-width: calc(1280rem / 16)) {
    font-size: 95%;
  }
}

scrollbar.scss

.account-list::-webkit-scrollbar {
  width: .5em;
}

.account-list::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.account-list::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}