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="sixteen wide column filter-menu" id="component-menu">
      <div class="column-description">
        Step 1
      </div>
      <div class="ui sticky">
        <div class="ui vertical menu">
          <a class="active item">Quick check <i class="icon check"></i></a>
          <a class="item">Learning <i class="icon help"></i></a>
          <a class="item">Practice <i class="icon cubes"></i></a>
          <a class="item">Activity <i class="icon puzzle"></i></a>
          <a class="item">Exercise <i class="icon help"></i></a>
          <a class="item">Calculation exercise <i class="icon calculator"></i></a>
          <a class="item">Glossary <i class="icon list"></i></a>
          <a class="item">Laboration <i class="icon flask"></i></a>
          <a class="item">Video <i class="icon play"></i></a>
          <a class="item">Extra material <i class="icon book"></i></a>
          <a class="item">GeoGebra <i class="icon settings"></i></a>
        </div>
      </div>
    </div>
    <div class="four wide column toc-menu" style="display:none;">
      <div class="column-description">
        Step 2
      </div>
      <div class="ui sticky">
        <div class="ui text vertical menu">
          <div class="item">
            <div class="header">
							<span class="numbering">20</span> Chapter
            </div>
            <div class="menu">
              <div class="item">
                <div class="header">
								<span class="numbering">1</span> Section
                </div>
                <div class="menu">
                  <div class="item">
                    <div class="header">
										<span class="numbering">1</span> Exercise group
                    </div>
                    <div class="menu">
										<a...

SCSS

body {
  padding: 1em;
  max-width: 768px;
  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: 0 1.5em 1.5em !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(:first-child),
        &:not(:last-child) {
          padding-bottom: 0;
          margin-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;
    }
  }
  #component-menu {
    .ui.vertical.menu {
      padding-top: 1em;
      background-color: transparent;
      margin: 0;
      width:...

JavaScript

$('.ui.sticky').sticky();