Semantic UI sandbox

by orjan

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<div class="resource-result-view">
  <div class="ui divided grid">
    <div class="three wide column filter-menu" id="result-filter-menu">
      <div class="ui sticky">
        <div class="column-description">
          Step 1
        </div>
        <div class="ui accordion">
          <div class="title">
            <i class="dropdown icon"></i> Groups
          </div>
          <div class="content">
            <div class="ui transparent left icon input">
              <input type="text" placeholder="Search...">
              <i class="small filter icon"></i>
            </div>
            <div class="ui divider">
            </div>
            <div class="ui text vertical menu" id="result-group-filter">
              <a class="item">
              All groups
            </a>
              <a class="item">
              Group 1
            </a>
              <a class="item">
              Group 2
            </a>
              <a class="item">
              Group 3
            </a>
              <a class="item">
              Group 4
            </a>
              <a class="item">
              Group 5
            </a>
              <a class="item">
              Group 6
            </a>
              <a class="item">
              Group 7
            </a>
              <a class="item">
              Group 8
            </a>
              <a class="item">
              Group 9
						</a>
              <a class="item">
              Group 10
            </a>
              <a class="item">
              Group 11
            </a>
              <a class="item">
              Group 12
            </a>
              <a class="item">
              Group 13
            </a>
              <a class="item">
              Group 14
            </a>
              <a class="item">
              Group 15
           ...

SCSS

body {
  padding: 1em;
 	max-width: 1140px;
  margin: 0 auto;
  background-color: #f0f0f0;
}

.resource-result-view {
	& > .ui.grid {
    min-height: 100vw;
  }
  .column-description {
    position: fixed;
    top: 675px;
    z-index: 100;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.1;
    font-size: 2em;
  }
  a {
    color: #007db8;
  }
  .filter-menu {
    background-color: #fafafa;
    padding-top: 0 !important;
  }
  .toc-menu {
    background-color: #fdfdfd;
    padding-top: 0 !important;
		.numbering {
			margin-right: 0.25em;
		}
    .ui.toggle.checkbox {
      padding: 1.5em 0.5em 0;
      label {
        font-size: 0.85em;
      }
    }
    .ui.divider+.ui.vertical.text.menu {
      padding-top: 0;
    }
    .ui.vertical.text.menu {
      font-size: 1.1em;
      padding-top: 0.75em;
      padding-bottom: 1em;
      .item:last-child {
        padding-bottom: 0;
      }
      .item:not(.dropdown)>.menu {
        margin-left: 1em;
        .menu .menu .menu .item {
          opacity: 0.5;
        }
        .menu .menu .menu a.item {
          opacity: 1;
        }
        .menu .menu .item,
        .menu .menu .menu .item {
          font-size: 1em;
        }
      }
    }
  }
  .component-content {
    padding: 1.65em 1.5em !important;
    background-color: #fff;
		
		.ui.header {
			.ui.label {
				margin-right: 0.5em;
			}
		}
  }
  .ui.vertical.text.menu {
    padding: 0 0.5em;
    .item {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    a.item,
    .item .menu a.item {
      color: #253746;
    }
    a.item:hover,
    a.item.active,
    .item .menu a.item:hover,
    .item .menu a.item.active {
      color: #007db8;
    }
  }
  .ui.table {
    border-radius: 0;
  }
  #result-filter-menu {
    .ui.accordion {
      padding-top: 1em;
      padding-bottom: 1em;
      .title:not(.ui) {
        font-weight: 600;
        &.active {
          color: #007db8;
        }
      }
      .ui.transparent[class*="left...

JavaScript

$('.ui.accordion').accordion();
$('.ui.sticky').sticky();
$('.ui.toggle').checkbox();

$('.ui.toggle').click(function() {
  var menu = $('.toc-menu').find('.ui.menu').find('.menu .menu .menu .menu');
  var result = menu.find('a');
  result.siblings('div').toggle();
});

$('.ui.toggle').click();