Scrollbar

In case you want to style the default browser scrollbar to fit the schoolkit design system, you can use the following CSS class .styled-checkbox on your components:

Here's an example of how it looks like:

Example Usage

Example

• Dummy Content 1
• Dummy Content 2
• Dummy Content 3
• Dummy Content 4
• Dummy Content 5
• Dummy Content 6
• Dummy Content 7
• Dummy Content 8
• Dummy Content 9
• Dummy Content 10
• Dummy Content 11
• Dummy Content 12
• Dummy Content 13
• Dummy Content 14
• Dummy Content 15
• Dummy Content 16
• Dummy Content 17
• Dummy Content 18
• Dummy Content 19
• Dummy Content 20
• Dummy Content 21
• Dummy Content 22
• Dummy Content 23
• Dummy Content 24
• Dummy Content 25
• Dummy Content 26
• Dummy Content 27
• Dummy Content 28
• Dummy Content 29
• Dummy Content 30
• Dummy Content 31
• Dummy Content 32
• Dummy Content 33
• Dummy Content 34
• Dummy Content 35
• Dummy Content 36
• Dummy Content 37
• Dummy Content 38
• Dummy Content 39
• Dummy Content 40
• Dummy Content 41
• Dummy Content 42
• Dummy Content 43
• Dummy Content 44
• Dummy Content 45
• Dummy Content 46
• Dummy Content 47
• Dummy Content 48
• Dummy Content 49
• Dummy Content 50

<template>
  <div class="h-64 overflow-y-auto styled-scrollbar">
    <ul>
      <!-- dummy list content -->
      <li v-for="i in 50" :key="i">Dummy Content {{ i }}</li>
    </ul>
  </div>
</template>