@import "variables";

.github-Accordion {
  cursor: default;
  user-select: none;

  &-header {
    font-weight: 600;
    color: @text-color-subtle;
    padding: @component-padding/2;
    border-bottom: 1px solid @base-border-color;
  }

  &-content {
    // Add an "Empty" label for empty items
    &:empty::before {
      content: "Empty";
      display: block;
      font-style: italic;
      text-align: center;
      color: @text-color-subtle;
    }
  }

  &-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &[open] &-header {
    color: @text-color-highlight;
  }

  &-listItem {
    display: flex;
    align-items: center;
    padding: @component-padding / 4;
    border-bottom: 1px solid @base-border-color;
    background-color: @base-background-color;

    &:active {
      background-color: @background-color-highlight;
    }
  }

}

Make arrow icon more subtle

@import "variables";

.github-Accordion {
  cursor: default;
  user-select: none;

  &-header {
    font-weight: 600;
    color: @text-color-subtle;
    padding: @component-padding/2;
    border-bottom: 1px solid @base-border-color;

    &::-webkit-details-marker {
      color: @text-color-subtle;
    }
  }

  &-content {
    // Add an "Empty" label for empty items
    &:empty::before {
      content: "Empty";
      display: block;
      font-style: italic;
      text-align: center;
      color: @text-color-subtle;
    }
  }

  &-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &[open] &-header {
    color: @text-color-highlight;
  }

  &-listItem {
    display: flex;
    align-items: center;
    padding: @component-padding / 4;
    border-bottom: 1px solid @base-border-color;
    background-color: @base-background-color;

    &:active {
      background-color: @background-color-highlight;
    }
  }

}


#title-bar-container {
  margin-top: 20px;
  margin-left: 20px;

  .panel {
    background: none;
  }
  .panel-heading {
    cursor: pointer;
    padding: 1px 9px;
    border-radius: 5px;

    h5 {
      display: inline-block;
      .collapsed {
        margin: 0;
      }
    }

    .icon-icon-forward {
      position: absolute;
      top: 27px;
      right: 15px;
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    &.open {
      .icon-icon-forward {
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
    }
  }

  .show-button {
    .show-button;
  }

  .panel-body {
    position: relative;
    margin-top: 3px;
    background-color: white;
    border-radius: 5px;
    padding: 8px 15px;

    .show-button {
      top: 8px;
    }
  }

}

Adjust title bar elements positioning

#title-bar-container {
  margin-top: 20px;
  margin-left: 20px;
  width: 270px;

  .panel {
    background: none;
  }
  .panel-heading {
    position: relative;
    cursor: pointer;
    padding: 1px 9px;
    border-radius: 5px;

    h5 {
      display: inline-block;
      .collapsed {
        margin: 0;
      }
    }

    .icon-icon-forward {
      position: absolute;
      top: 5px;
      right: 15px;
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    &.open {
      .icon-icon-forward {
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
    }
  }

  .panel-body {
    position: relative;
    margin-top: 3px;
    background-color: white;
    border-radius: 5px;
    padding: 8px 15px;

    .show-button {
      .show-button;
      top: 8px;
      right: 12px;
    }
  }

}


#edit {
    padding: 88px 0 0 0;

    a.add {
        display: block;
        width: 95%;
        height: 44px;

        margin: 15px 2.5% 20px 2.5%;
        border: 1px dashed @highlight;
        background-color: transparent;

        color: @highlight;
        font-size: 2em;
        text-align: center;
        text-decoration: none;
    }

    #blocks {
        position: absolute;
        top: 160px;
        transform: scale(0.95, 1.0);

        div, a {
            display: block;
            border: 1px dashed @highlight;
            margin-bottom: 15px;
            text-decoration: none;

            img {
                margin-bottom: -4px;
            }
        }
    }
}

Use transform-origin on blocks element in edit mode

#edit {
    padding: 88px 0 0 0;

    a.add {
        display: block;
        width: 95%;
        height: 44px;

        margin: 15px 2.5% 20px 2.5%;
        border: 1px dashed @highlight;
        background-color: transparent;

        color: @highlight;
        font-size: 2em;
        text-align: center;
        text-decoration: none;
    }

    #blocks {
        position: absolute;
        top: 160px;
        transform: scale(0.95, 0.95);
        transform-origin: 50% top;

        div, a {
            display: block;
            border: 1px dashed @highlight;
            margin-bottom: 15px;
            text-decoration: none;

            img {
                margin-bottom: -4px;
            }
        }
    }
}


// UI stylings and overides

// tags
a.tag {
    color: #fff;
}

input#id_remember {
    margin-left: 0
}

.btn-vote{
    display: inline-block;
    font-size: 1.2em;
    cursor: pointer;

    &.active{
        color: @junction-color-1;

        &:not(.can-remove-vote){
          cursor: default;
        }
    }
}

// Proposal Status
// ----------------------------------------------------------------------------
.status {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: @label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-left: 5px;
}

.status-2 {
  .label-variant(@label-default-bg);
}

.status-3, .status-1 {
  .label-variant(@label-success-bg);
}

.status-4 {
  .label-variant(@label-info-bg);
}

// Breadcrumb
// ----------------------------------------------------------------------------
.breadcrumb--fixed .container-fluid{
    margin-top: 27px;
}
.breadcrumb--fixed .breadcrumb {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 90000;
    border-radius: 0;
}

.green {
    color:"green"
}

Add missing semi-colon and remove extra quotes

// UI stylings and overides

// tags
a.tag {
    color: #fff;
}

input#id_remember {
    margin-left: 0
}

.btn-vote{
    display: inline-block;
    font-size: 1.2em;
    cursor: pointer;

    &.active{
        color: @junction-color-1;

        &:not(.can-remove-vote){
          cursor: default;
        }
    }
}

// Proposal Status
// ----------------------------------------------------------------------------
.status {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: @label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-left: 5px;
}

.status-2 {
  .label-variant(@label-default-bg);
}

.status-3, .status-1 {
  .label-variant(@label-success-bg);
}

.status-4 {
  .label-variant(@label-info-bg);
}

// Breadcrumb
// ----------------------------------------------------------------------------
.breadcrumb--fixed .container-fluid{
    margin-top: 27px;
}
.breadcrumb--fixed .breadcrumb {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 90000;
    border-radius: 0;
}

.green {
    color: green;
}


/* === Relation between toolbar/navbar types and pages === */
.page, .view{
    >.navbar, >.toolbar {
        position: absolute;
    }
}
.navbar-through {
    .page-content {
        padding-top: 44px;
    }
}
.toolbar-through {
    .page-content {
        padding-bottom: 44px;
    }
}
.navbar-fixed .page-content {
    padding-top: 44px;
}
.toolbar-fixed .page-content {
    padding-bottom: 44px;
}
// Page Hidden Navbar
.hidden-navbar {
    .navbar {
        .transition(400ms);
        .translate3d(0,-100%,0);
    }
}
.hiding-navbar {
    .navbar {
        .transition(400ms);
        .translate3d(0,0,0);
    }
}
.page.no-navbar .page-content {
    padding-top: 0;
}
// Page Hidden Toolbar
.hidden-toolbar {
    .toolbar {
        .transition(400ms);
        .translate3d(0,100%,0);
    }
}
.hiding-toolbar {
    .toolbar {
        .transition(400ms);
        .translate3d(0,0,0);
    }
}
.page.no-toolbar .page-content {
    padding-bottom: 0;
}

Fix toolbar when it is views' children

/* === Relation between toolbar/navbar types and pages === */
.page, .view, .views{
    >.navbar, >.toolbar {
        position: absolute;
    }
}
.navbar-through {
    .page-content {
        padding-top: 44px;
    }
}
.toolbar-through {
    .page-content {
        padding-bottom: 44px;
    }
}
.navbar-fixed .page-content {
    padding-top: 44px;
}
.toolbar-fixed .page-content {
    padding-bottom: 44px;
}
// Page Hidden Navbar
.hidden-navbar {
    .navbar {
        .transition(400ms);
        .translate3d(0,-100%,0);
    }
}
.hiding-navbar {
    .navbar {
        .transition(400ms);
        .translate3d(0,0,0);
    }
}
.page.no-navbar .page-content {
    padding-top: 0;
}
// Page Hidden Toolbar
.hidden-toolbar {
    .toolbar {
        .transition(400ms);
        .translate3d(0,100%,0);
    }
}
.hiding-toolbar {
    .toolbar {
        .transition(400ms);
        .translate3d(0,0,0);
    }
}
.page.no-toolbar .page-content {
    padding-bottom: 0;
}


#account-settings {
  line-height: 1.5em;

  .account-top {
    box-shadow: 0 -1px @grayBoxBorder inset;
  }

  .nav {
    border: none; // BS RESET
    &.nav-tabs {
      .active a {
        background: none; // BS RESET
        color: @link-color; // BS RESET
        box-shadow: 0 -1px @link-color inset,
                    0  1px @link-color;
      }
    }
    li {
      margin: 0; // BS RESET
    }

    a {
      color: @grayLight;
      line-height: 1em;
      padding: 2em 1em 2em;
      border: none; // BS RESET
      margin: 0; // BS RESET

      &:hover {
        background: none; // BS RESET
        color: @link-color; // BS RESET
        box-shadow: 0 -1px @link-color inset,
                    0  1px @link-color;
      }
    }
  }
}

.plans-accounts {
  margin-top: 2em;
}

.settings-item {
  padding: 2em 1.4em;

  label {
    padding-left: 2em;
  }

  .plans-accounts {
    margin-top: 2em;
  }
}

@import "settings/notification.less";
@import "settings/api.less";
@import "settings/beta.less";

Fix spacing around plans accounts items

#account-settings {
  line-height: 1.5em;

  .account-top {
    box-shadow: 0 -1px @grayBoxBorder inset;
  }

  .nav {
    border: none; // BS RESET
    &.nav-tabs {
      .active a {
        background: none; // BS RESET
        color: @link-color; // BS RESET
        box-shadow: 0 -1px @link-color inset,
                    0  1px @link-color;
      }
    }
    li {
      margin: 0; // BS RESET
    }

    a {
      color: @grayLight;
      line-height: 1em;
      padding: 2em 1em 2em;
      border: none; // BS RESET
      margin: 0; // BS RESET

      &:hover {
        background: none; // BS RESET
        color: @link-color; // BS RESET
        box-shadow: 0 -1px @link-color inset,
                    0  1px @link-color;
      }
    }
  }
}

.settings-item {
  padding: 2em 1.4em;

  label {
    padding-left: 2em;
  }

  .plans-accounts {
    margin-top: 2em;
    > div .account-plan-pricing-org-link {
      padding-left: 4px;
    }
  }
}

@import "settings/notification.less";
@import "settings/api.less";
@import "settings/beta.less";


//
// Panels
// --------------------------------------------------

.panel {
  color: @panel-default-text;
  box-shadow: none;
}

h1.xwikipaneltitle {
  .panel-title;
  margin: @padding-small-vertical @padding-large-horizontal @padding-large-vertical;
  padding: 0 0 @padding-large-vertical;
  background-color: @panel-bg;
  color: @xwiki-panel-header-text;
  border-bottom: @border-width solid @xwiki-page-content-bg;
  box-shadow: 0 @border-width 0 @border-color;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xwikipanelcontents {
  padding: 0 @padding-large-horizontal @padding-base-vertical;
  overflow: hidden;
}

// Lists inside panels ====================================================

.panel {
  ul {
    list-style-type: none;
    padding: 0;
  }
  dl {
    margin-bottom: 0;
  }
}

Make a clear distinction between bootstrap and xwiki variables in LESS files.

//
// Panels
// --------------------------------------------------

.panel {
  color: @panel-default-text;
  box-shadow: none;
}

h1.xwikipaneltitle {
  .panel-title;
  margin: @padding-small-vertical @padding-large-horizontal @padding-large-vertical;
  padding: 0 0 @padding-large-vertical;
  background-color: @panel-bg;
  color: @xwiki-panel-header-text;
  border-bottom: @border-width solid @xwiki-page-content-bg;
  box-shadow: 0 @border-width 0 @xwiki-border-color;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xwikipanelcontents {
  padding: 0 @padding-large-horizontal @padding-base-vertical;
  overflow: hidden;
}

// Lists inside panels ====================================================

.panel {
  ul {
    list-style-type: none;
    padding: 0;
  }
  dl {
    margin-bottom: 0;
  }
}


@import (reference) '../../../assets/stylesheets/shared/osio.less';
.spaces-page {
  position: relative;
  margin-top: 20px;
  >main {
    .user-attributes {
      list-style: none;
      text-align: center;
      img {
        height: 250px;
        max-width: 100%;
      }
    }
    >section {
      position: relative;
      align-items: stretch;
      height: 100vh;
      .row {
        margin-right: 0;
        margin-left: 0;
      }
      .contents {
        overflow: auto;
        align-items: stretch;
      }
    }
  }
}
.spaces-list-page {
  padding-top: 20px;
  .spaces-list-wrap {
    overflow-y: scroll;
    width: 100%;
    margin-bottom: 0;

    @media (min-width: @screen-lg-min) { height: 600px; }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { height: 600px; }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: 600px; }
    @media (max-width: @screen-xs-min) { height: 500px; }

    .space-item {
      border-top: 1px solid;
      border-top-color: @color-pf-black-300;
    }
  }
}

Remove unecessary whitespace, simplify css

@import (reference) '../../../assets/stylesheets/shared/osio.less';
.spaces-page {
  position: relative;
  margin-top: 15px;
  >main {
    .user-attributes {
      list-style: none;
      text-align: center;
      img {
        height: 250px;
        max-width: 100%;
      }
    }
    >section {
      position: relative;
      align-items: stretch;
      .row {
        margin-right: 0;
        margin-left: 0;
      }
      .contents {
        overflow: auto;
        align-items: stretch;
      }
    }
  }
}
.spaces-list-page {
  padding-top: 20px;
  .spaces-list-wrap {
    overflow-y: scroll;
    width: 100%;
    margin-bottom: 0;

    height: 600px;
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: 600px; }
    @media (max-width: @screen-xs-min) { height: 500px; }

    .space-item {
      border-top: 1px solid;
      border-top-color: @color-pf-black-300;
    }
  }
}


/* DataTable */

.pnl-DataTable {
    width: 100%;
}

.pnl-DataTable th,
.pnl-DataTable td {
    padding: 6px;
}

.pnl-DataTable td {
    border-top: 1px solid #f0f0f0;
}

.pnl-DataTable th {
    text-align: left;
}

.pnl-DataTable th a {
    color: #333;
    text-decoration: none;
}

/* Toolbars */

.pnl-ToolbarPanel {
  padding: 0 @h-padding;
}

.pnl-ToolbarPanel-left {
  float: left;
}

.pnl-ToolbarPanel-right {
  float: right;
}

Clear fix on data table toolbars

/* DataTable */

.pnl-DataTable {
    width: 100%;
}

.pnl-DataTable th,
.pnl-DataTable td {
    padding: 6px;
}

.pnl-DataTable td {
    border-top: 1px solid #f0f0f0;
}

.pnl-DataTable th {
    text-align: left;
}

.pnl-DataTable th a {
    color: #333;
    text-decoration: none;
}

/* Toolbars */

.pnl-ToolbarPanel {
  padding: 0 @h-padding;
}

.pnl-ToolbarPanel:after {
  content: " ";
  display: table;
  clear: both;
}

.pnl-ToolbarPanel-left {
  float: left;
}

.pnl-ToolbarPanel-right {
  float: right;
}


*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  background-color: #DDD;
  font-family: Input, monospace;
}

header,
main {
  max-width: 560px;
  margin: 0 auto;
}

.post {
  margin-bottom: 3rem;
}

Make the replace pattern work with olderbcrypt versions


html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Poiret One', cursive;
	font-size: 1.3em;
	text-align: center;
}

body {
	transition: all 1s ease-in-out;
	overflow: hidden;
}

section {
	height: 100%;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: space-around;
	align-items: center;

	> *:first-child {
		margin-top: 0;
	}

	> *:last-child {
		margin-bottom: 0;
	}

	h1 {
		font-size: 2em;
		font-variant: small-caps;
		text-transform: lowercase;
	}

	a {
		display: inline-block;
		color: black;
		text-decoration: none;
		transition: all 1s;

		&:after {
			content: "";
			display: block;
			width: 100%;
			height: 1px;
			background-color: #000;
			transform: scaleX(0);
			transition: all 1s;
		}

		&:hover:after {
			transform: scaleX(1);
		}
	}
}

Make the underlining effect height dynamic

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Poiret One', cursive;
	font-size: 1.3em;
	text-align: center;
}

body {
	transition: all 1s ease-in-out;
	overflow: hidden;
}

section {
	height: 100%;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: space-around;
	align-items: center;

	> *:first-child {
		margin-top: 0;
	}

	> *:last-child {
		margin-bottom: 0;
	}

	h1 {
		font-size: 2em;
		font-variant: small-caps;
		text-transform: lowercase;
	}

	a {
		display: inline-block;
		color: black;
		text-decoration: none;
		transition: all 1s;

		&:after {
			content: "";
			display: block;
			width: 100%;
			height: 0.03em;
			background-color: #000;
			transform: scaleX(0);
			transition: all 1s;
		}

		&:hover:after {
			transform: scaleX(1);
		}
	}
}


.asciinema-terminal {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  overflow: hidden;
  padding: 0;
  margin: 0px;
  display: block;
  white-space: pre;
  border: 0;
  word-wrap: normal;
  word-break: normal;
  border-radius: 0;
  border-style: solid;
  cursor: text;
  border-width: 0.75em;

  .terminal-font;

  .line {
    display: block;
    width: 200%;

    .cursor-a {
      display: inline-block;
    }

    .cursor-b {
      display: none;
    }

    .blink {
      visibility: hidden;
    }
  }

  &.cursor {
    .line {
      .cursor-a {
        display: none;
      }

      .cursor-b {
        display: inline-block;
      }
    }
  }

  &.blink {
    .line {
      .blink {
        visibility: visible;
      }
    }
  }

  .bright {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
  }

  .italic {
    font-style: italic;
  }

  .strikethrough {
    text-decoration: line-through;
  }

  &.font-small {
    font-size: 12px;
  }

  &.font-medium {
    font-size: 18px;
  }

  &.font-big {
    font-size: 24px;
  }
}

Add tiny border-radius to cursor block

.asciinema-terminal {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  overflow: hidden;
  padding: 0;
  margin: 0px;
  display: block;
  white-space: pre;
  border: 0;
  word-wrap: normal;
  word-break: normal;
  border-radius: 0;
  border-style: solid;
  cursor: text;
  border-width: 0.75em;

  .terminal-font;

  .line {
    display: block;
    width: 200%;

    .cursor-a {
      display: inline-block;
    }

    .cursor-b {
      display: none;
      border-radius: 0.05em;
    }

    .blink {
      visibility: hidden;
    }
  }

  &.cursor {
    .line {
      .cursor-a {
        display: none;
      }

      .cursor-b {
        display: inline-block;
      }
    }
  }

  &.blink {
    .line {
      .blink {
        visibility: visible;
      }
    }
  }

  .bright {
    font-weight: bold;
  }

  .underline {
    text-decoration: underline;
  }

  .italic {
    font-style: italic;
  }

  .strikethrough {
    text-decoration: line-through;
  }

  &.font-small {
    font-size: 12px;
  }

  &.font-medium {
    font-size: 18px;
  }

  &.font-big {
    font-size: 24px;
  }
}


/*!
 * ${copyright}
 */

@import "../sap_belize/library.source.less";
@import "../../../../../sap/ui/core/themes/sap_belize_plus/base.less";

Fix reference to core/base.less in belize plus theme of sap.tnt

/*!
 * ${copyright}
 */

@import "../sap_belize/library.source.less";
@import "../../../../sap/ui/core/themes/sap_belize_plus/base.less";


// Docks ------------------------------

// Make handles not take up any space when dock is open
.atom-dock-resize-handle {
  position: absolute;
  z-index: 11; // same as toggle buttons

  &.left {
    top: 0;
    right: 0;
    bottom: 0;
  }
  &.right {
    top: 0;
    left: 0;
    bottom: 0;
  }
  &.bottom {
    top: 0;
    left: 0;
    right: 0;
  }
}

// Add borders
.atom-dock-inner.atom-dock-open.left {
  border-right: 1px solid @base-border-color;
}
.atom-dock-inner.atom-dock-open.right {
  border-left: 1px solid @base-border-color;
}

// Make toggle buttons cover ^ border
.atom-dock-toggle-button.left {
  margin-left: -1px;
}
.atom-dock-toggle-button.right {
  margin-right: -1px;
}

Fix dock toggle button position

// Docks ------------------------------

// Make handles not take up any space when dock is open
.atom-dock-resize-handle {
  position: absolute;
  z-index: 11; // same as toggle buttons

  &.left {
    top: 0;
    right: 0;
    bottom: 0;
  }
  &.right {
    top: 0;
    left: 0;
    bottom: 0;
  }
  &.bottom {
    top: 0;
    left: 0;
    right: 0;
  }
}

// Add borders
.atom-dock-inner.atom-dock-open.left {
  border-right: 1px solid @base-border-color;
}
.atom-dock-inner.atom-dock-open.right {
  border-left: 1px solid @base-border-color;
}

// Make toggle buttons cover ^ border
.atom-dock-toggle-button.left {
  margin-left: -2px;
}
.atom-dock-toggle-button.right {
  margin-right: -2px;
}
.atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom {
  margin-bottom: -1px;
}


.linter-highlight {
  &.badge {
    background-color: @seti-primary;
    color: @seti-primary-text;
  }
}

linter-panel {
  .badge {
    color: @white;
  }
  linter-message-line {

  }
  .linter-message-link {
    .link-color();
  }
}

linter-bottom-tab {
  background: @black;
  color: @grey;
  &.active {
    background: @seti-primary;
    color: @seti-primary-text;
  }
}

Fix Linter rule link badge

.linter-highlight {
  &.badge {
    background-color: @seti-primary;
    color: @seti-primary-text;
  }
}

.linter-message-item .badge {
  background: @seti-primary-text;
  color: @seti-primary;
}

linter-panel {
  .badge {
    color: @white;
  }
  linter-message-line {

  }
  .linter-message-link {
    .link-color();
  }
}

linter-bottom-tab {
  background: @black;
  color: @grey;
  &.active {
    background: @seti-primary;
    color: @seti-primary-text;
  }
}


.calendar
{
    @today-color: #ff3b30;

    table
    {
        table-layout: fixed;
        width: 100%;

        caption
        {
            color: @today-color;
            font-size: 19px;
            line-height: 40px;
            height: 40px;
            padding: 0;
            padding-left: 8px;
            margin: 0;
        }

        td
        {
            text-align: center;
            border-bottom: 1px solid @border-color;

            &.weekday-6, &.weekday-7
            {
                color: @secondary-color;
            }
        }

        thead
        {
            tr
            {
                height: 24px;
                font-size: @font-size-small;
            }
        }

        tbody
        {
            tr
            {
                height: 48px;

                td
                {
                    font-size: 17px;

                    span
                    {
                        display: block;
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 50%;
                    }
                }

                td.today
                {
                    span
                    {
                        color: @today-color;
                        font-weight: bold;
                    }

                    &.active
                    {
                        span
                        {
                            color: white !important;
                            background-color: @today-color !important;
                        }
                    }
                }

                td.active
                {
                    span
                    {
                        color: white;
                        font-weight: bold;
                        background-color: #222;
                    }
                }
            }
        }
    }
}

Adjust the position of table's caption.

.calendar
{
    @today-color: #ff3b30;

    table
    {
        table-layout: fixed;
        width: 100%;

        caption
        {
            color: @today-color;
            font-size: 19px;
            line-height: 40px;
            height: 40px;
            padding: 0;
            padding-left: 12px;
            margin: 0;
        }

        td
        {
            text-align: center;
            border-bottom: 1px solid @border-color;

            &.weekday-6, &.weekday-7
            {
                color: @secondary-color;
            }
        }

        thead
        {
            tr
            {
                height: 24px;
                font-size: @font-size-small;
            }
        }

        tbody
        {
            tr
            {
                height: 48px;

                td
                {
                    font-size: 17px;

                    span
                    {
                        display: block;
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 50%;
                    }
                }

                td.today
                {
                    span
                    {
                        color: @today-color;
                        font-weight: bold;
                    }

                    &.active
                    {
                        span
                        {
                            color: white !important;
                            background-color: @today-color !important;
                        }
                    }
                }

                td.active
                {
                    span
                    {
                        color: white;
                        font-weight: bold;
                        background-color: #222;
                    }
                }
            }
        }
    }
}


// Mixins
.box-shadow (@hor, @vert, @blur, @spread, @color) {
  -webkit-box-shadow: @hor @vert @blur @spread @color;
  -moz-box-shadow: @hor @vert @blur @spread @color;
  -o-box-shadow: @hor @vert @blur @spread @color;
  box-shadow: @hor @vert @blur @spread @color;
}

.border-radius (@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// Variables
@base_gray: #ccc;

body {
  width: 480px;
  padding-top: 100px;
  margin: 0 auto 0 auto;
  background: @base_gray;
}
canvas {
  background: #fff;
  .box-shadow;
}

Remove canvas box-shadow, use borders instead

// Mixins
.box-shadow (@hor, @vert, @blur, @spread, @color) {
  -webkit-box-shadow: @hor @vert @blur @spread @color;
  -moz-box-shadow: @hor @vert @blur @spread @color;
  -o-box-shadow: @hor @vert @blur @spread @color;
  box-shadow: @hor @vert @blur @spread @color;
}

.border-radius (@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// Variables
@base_gray: #ccc;

body {
  width: 480px;
  padding-top: 100px;
  margin: 0 auto 0 auto;
  background: @base_gray;
}
canvas {
  background: #fff;
  border-left: 1px solid darken(@base_gray, 13%);
  border-right: 1px solid darken(@base_gray, 13%);
  border-bottom: 1px solid darken(@base_gray, 30%);
}


input[type='date'],
input[type='email'],
input[type='number'],
input[type='text'],
textarea {
  &.ng-dirty {

    &.ng-valid {
      border-color: @success-color;
    }

    &.ng-invalid {
      border-color: @error-color;
    }
  }
}

.timepicker.ng-dirty {
  &.ng-valid-time input {
    border: 1px solid @success-color !important;
  }

  &.ng-invalid-time input {
    border: 1px solid @error-color !important;
  }
}

legend::after{
  width: 50% !important;
}

.padding input[type=number]{
  width:75px;
}

.padding {
  margin-left: 10px;
}

.icon-group {
  padding-right:1em;
}

@media (max-width: 1200px) {
  .padding {
      margin-left: 0px;
  }
}

Fix responsiveness issue for floating element on edit-form

input[type='date'],
input[type='email'],
input[type='number'],
input[type='text'],
textarea {
  &.ng-dirty {

    &.ng-valid {
      border-color: @success-color;
    }

    &.ng-invalid {
      border-color: @error-color;
    }
  }
}

.timepicker.ng-dirty {
  &.ng-valid-time input {
    border: 1px solid @success-color !important;
  }

  &.ng-invalid-time input {
    border: 1px solid @error-color !important;
  }
}

legend::after{
  width: 50% !important;
}

legend.hidden-lg{
  clear: both;
}

.padding input[type=number]{
  width:75px;
}

.padding {
  margin-left: 10px;
}

.icon-group {
  padding-right:1em;
}

@media (max-width: 1200px) {
  .padding {
      margin-left: 0px;
  }
}


// Global Markdown Preview styles

.markdown-preview {
  atom-text-editor {
    // only show scrollbars on hover
    .scrollbars-visible-always & {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: hidden;
      }
    }
    .scrollbars-visible-always &:hover {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: visible;
      }
    }
  }

  // move task list checkboxes
  .task-list-item-checkbox {
    position: absolute;
    margin: .25em 0 0 -1.4em;
  }
}

.markdown-spinner {
  margin: auto;
  background-image: url(images/octocat-spinner-128.gif);
  background-repeat: no-repeat;
  background-size: 64px;
  background-position: top center;
  padding-top: 70px;
  text-align: center;
}

Hide bullet in task lists

// Global Markdown Preview styles

.markdown-preview {
  atom-text-editor {
    // only show scrollbars on hover
    .scrollbars-visible-always & {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: hidden;
      }
    }
    .scrollbars-visible-always &:hover {
      .vertical-scrollbar,
      .horizontal-scrollbar {
        visibility: visible;
      }
    }
  }

  // move task list checkboxes
  .task-list-item-checkbox {
    position: absolute;
    margin: .25em 0 0 -1.4em;
  }

  // hide bullet for task lists
  // TODO: Use more specific selector once https://github.com/gjtorikian/task-lists-js/issues/5 gets fixed
  ul label {
    vertical-align: top;
  }
}

.markdown-spinner {
  margin: auto;
  background-image: url(images/octocat-spinner-128.gif);
  background-repeat: no-repeat;
  background-size: 64px;
  background-position: top center;
  padding-top: 70px;
  text-align: center;
}


@import "syntax-variables";
.choose-pane {
  background-color: rgba(112,182,101,.1);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: @syntax-text-color;
  font-size: 10em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11;
  width: 100%;
  &::after {
    font-size: 14px;
  }
  &.active {
    background-color: rgba(0,0,0,0.5);
    color: fade(@syntax-text-color,50);
  }
  &.last-focused {
  }
}

#choose-pane-editor {
  background-color: inherit;
  border: none;
  width: 100%;
  height: 0px;
  font-weight: normal;
  line-height: 1.28;
  cursor: default;
  white-space: nowrap;
  padding-left: 10px;
  &.is-focused {
    box-shadow: none;
  }
}

Revert last focused behaviour to underline

@import "syntax-variables";
.choose-pane {
  background-color: rgba(112,182,101,.1);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: @syntax-text-color;
  font-size: 10em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11;
  width: 100%;
  &::after {
    font-size: 14px;
  }
  &.active {
    background-color: rgba(0,0,0,0.5);
    color: fade(@syntax-text-color,50);
  }
  &.last-focused {
    text-decoration: underline;
  }
}

#choose-pane-editor {
  background-color: inherit;
  border: none;
  width: 100%;
  height: 0px;
  font-weight: normal;
  line-height: 1.28;
  cursor: default;
  white-space: nowrap;
  padding-left: 10px;
  &.is-focused {
    box-shadow: none;
  }
}


/* Custom Bootstrap Variable Values + Overrides */

Modify text sizes for h4,5,6

@import "../bootstrap/less/variables.less";

@font-size-h4: ceil((@font-size-base * 1.5));
@font-size-h5: ceil((@font-size-base * 1.25));
@font-size-h6: @font-size-base;


@import "./vendor/bootstrap/bootstrap";
@icon-font-path: "/static/fonts/";

.navbar {
	margin-bottom: 50px;
}

.price {
	&.undiscounted {
		text-decoration: line-through;
	}
}

.address-details {
	border-bottom: 1px dashed;
	color: #3a87ad;
	cursor: pointer;
}

.popover {
	min-width: 200px;
}

.product-gallery {
	margin-top: @grid-gutter-width;
}

.product-related {
	.active {
		border: 1px solid @btn-primary-border;
		box-shadow: 0 0 5px @btn-primary-border;
	}
}

.product-form {
	.btn-group {
		display: block;
		overflow: hidden;

		.btn-default.active {
			.btn-primary;
		}
	}
}

Add styling for required fields

@import "./vendor/bootstrap/bootstrap";
@icon-font-path: "/static/fonts/";

.navbar {
	margin-bottom: 50px;
}

.price {
	&.undiscounted {
		text-decoration: line-through;
	}
}

.address-details {
	border-bottom: 1px dashed;
	color: #3a87ad;
	cursor: pointer;
}

.popover {
	min-width: 200px;
}

.product-gallery {
	margin-top: @grid-gutter-width;
}

.product-related {
	.active {
		border: 1px solid @btn-primary-border;
		box-shadow: 0 0 5px @btn-primary-border;
	}
}

.product-form {
	.btn-group {
		display: block;
		overflow: hidden;

		.btn-default.active {
			.btn-primary;
		}
	}
}

.form-group.required .control-label:after{
    content: '*';
}


// Import from the syntax theme's variables with a fallback to ./variables/syntax-variables.less
@import "./variables/syntax-variables";
@import "syntax-variables";

// Import from the ui theme's variables with a fallback to ./variables/ui-variables.less
@import "./variables/ui-variables";
@import "ui-variables";

@import "octicon-utf-codes";
@import "octicon-mixins";

@import "workspace-view";
@import "bootstrap-overrides";
@import "badges";
@import "buttons";
@import "icons";
@import "links";
@import "panes";
@import "panels";
@import "sections";
@import "lists";
@import "popover-list";
@import "messages";
@import "markdown";
@import "text-editor-light";
@import "select-list";
@import "syntax";
@import "text";
@import "utilities";
@import "octicons";
@import "white-cursor";

Update import file for new cursor file name

// Import from the syntax theme's variables with a fallback to ./variables/syntax-variables.less
@import "./variables/syntax-variables";
@import "syntax-variables";

// Import from the ui theme's variables with a fallback to ./variables/ui-variables.less
@import "./variables/ui-variables";
@import "ui-variables";

@import "octicon-utf-codes";
@import "octicon-mixins";

@import "workspace-view";
@import "bootstrap-overrides";
@import "badges";
@import "buttons";
@import "icons";
@import "links";
@import "panes";
@import "panels";
@import "sections";
@import "lists";
@import "popover-list";
@import "messages";
@import "markdown";
@import "text-editor-light";
@import "select-list";
@import "syntax";
@import "text";
@import "utilities";
@import "octicons";
@import "cursorsr";


// This stylesheet is loaded when Atom starts up and is reloaded automatically
// when it is changed.

// Zen coding, courtesy of @as-cii 🧘♂💻
//
// Focus on your content and avoid visual noise. When you're viewing/editing a
// file, reduce the opacity of other Atom components, including the docks, the
// status bar, and inactive tabs. When you focus any of those components or
// hover over them, restore their full opacity.
atom-dock, status-bar, .tab-bar .tab {
  opacity: 0.3;
  transition: 0.2s;
  &:hover, &:focus-within {
    opacity: 1.0;
  }
}
.tab-bar .tab.active {
  opacity: 1;
}

// De-emphasize inactive panes, in order to make it easy to quickly see which
// pane is active.
//
// Credit: http://discuss.atom.io/t/how-to-know-which-pane-is-focused/10577/2
atom-pane:not(.active) {
  opacity: 0.75;
}

.results-view {
  font-size: 13px;
}

.search-result .highlight-info {
  color: #000;
  background-color: yellow;
}

Fix opacity when Atom opens with only one pane

// This stylesheet is loaded when Atom starts up and is reloaded automatically
// when it is changed.

// Zen coding, courtesy of @as-cii 🧘♂💻
//
// Focus on your content and avoid visual noise. When you're viewing/editing a
// file, reduce the opacity of other Atom components, including the docks, the
// status bar, and inactive tabs. When you focus any of those components or
// hover over them, restore their full opacity.
atom-dock, status-bar, .tab-bar .tab {
  opacity: 0.3;
  transition: 0.2s;
  &:hover, &:focus-within {
    opacity: 1.0;
  }
}
.tab-bar .tab.active {
  opacity: 1;
}

// De-emphasize inactive panes, in order to make it easy to quickly see which
// pane is active.
//
// Credit: http://discuss.atom.io/t/how-to-know-which-pane-is-focused/10577/2
atom-pane:only-of-type {
  opacity: 1 !important;
}

atom-pane:not(.active) {
  opacity: 0.75;
}

.results-view {
  font-size: 13px;
}

.search-result .highlight-info {
  color: #000;
  background-color: yellow;
}


/* ==========================================================================
   Masonry styles
   ========================================================================== */

.l-masonry {
  column-count: 4;

  // Remove box-shadow break while using columns in CSS(Webkit bug)
  padding: @g-size-space-base/4;
  margin: -@g-size-space-base/4 -@g-size-space-base/4 0 -@g-size-space-base/4;
}

.l-masonry__item {
  width: 100%;
  break-inside: avoid;
  display: inline-block;

  margin-top: @g-size-space-base/4; // Remove box-shadow break while using columns in CSS(Webkit bug)
}

@media @g-media-query-widescreen {
  .l-masonry {
    column-count: 5;
  }
}

@media @g-media-query-desktop {
  .l-masonry {
    column-count: 3;
  }
}

@media @g-media-query-tablet {
  .l-masonry {
    column-count: 2;
  }
}

@media @g-media-query-phone {
  .l-masonry {
    column-count: 1;
  }
}

Change workaround for webkit bug - 14137, due to new bug in chrome 53

/* ==========================================================================
   Masonry styles
   ========================================================================== */

.l-masonry {
  column-count: 4;

  // Work around for webkit bug - https://bugs.webkit.org/show_bug.cgi?id=14137
  position: relative;
  &:after {
    content:'';
    display:block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: @g-color-grey-lighter;
  }
}

.l-masonry__item {
  width: 100%;
  break-inside: avoid;
}

@media @g-media-query-widescreen {
  .l-masonry {
    column-count: 5;
  }
}

@media @g-media-query-desktop {
  .l-masonry {
    column-count: 3;
  }
}

@media @g-media-query-tablet {
  .l-masonry {
    column-count: 2;
  }
}

@media @g-media-query-phone {
  .l-masonry {
    column-count: 1;
  }
}


@import "ui-variables";
@import "syntax-variables";

#aec-status-bar-tile {
	cursor: pointer;
	box-sizing: border-box;
}

atom-text-editor.editor .ecfg-wrap-guide {
	height: 100%;
	width: 1px;
	z-index: 3;
	position: absolute;
	top: 0;
	background-color: @syntax-wrap-guide-color;
	-webkit-transform: translateZ(0);
}

@font-face {
	font-family: 'Editorconfig';
	src: url('atom://editorconfig/fonts/AtomEditorconfig-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

[class*='aec-icon'] {
	font-family: 'Editorconfig';
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.aec-icon-mouse:before { content:'\0041'; }

Fix missing `max_line_length` by adding deprecated shadow-selector

@import "ui-variables";
@import "syntax-variables";

#aec-status-bar-tile {
	cursor: pointer;
	box-sizing: border-box;
}

atom-text-editor, atom-text-editor::shadow {
	.ecfg-wrap-guide {
		height: 100%;
		width: 1px;
		z-index: 3;
		position: absolute;
		top: 0;
		background-color: @syntax-wrap-guide-color;
		-webkit-transform: translateZ(0);
	}
}

@font-face {
	font-family: 'Editorconfig';
	src: url('atom://editorconfig/fonts/AtomEditorconfig-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

[class*='aec-icon'] {
	font-family: 'Editorconfig';
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.aec-icon-mouse:before { content:'\0041'; }


.navbar-menu {
  .navbar-item:hover, .navbar-link:hover {
    background: #F7F5F0 - 15 !important;
  }

  .navbar-item.active {
    background: #F7F5F0 - 25 !important;
  }
}

a.logo:hover {
  background: #F7F5F0;
}

aside.sidebar {
  border-right: 1px solid #F7F5F0 - 15;
  min-height: 1000px;
  padding-top: 24px;
  position: static;

  a.active {
    background: #F5F5F5 - 15;
  }
}

.content {
  padding: 24px !important;
}

Remove min-height on sidebar so mobile works OK.

.navbar-menu {
  .navbar-item:hover, .navbar-link:hover {
    background: #F7F5F0 - 15 !important;
  }

  .navbar-item.active {
    background: #F7F5F0 - 25 !important;
  }
}

a.logo:hover {
  background: #F7F5F0;
}

aside.sidebar {
  border-right: 1px solid #F7F5F0 - 15;
  padding-bottom: 24px;
  padding-top: 24px;

  a.active {
    background: #F5F5F5 - 15;
  }
}

.content {
  padding: 24px !important;
}


// Categories view
#content > .categories {
  padding-top: 0;
}

.categories {
  li {
    background: @link;
    border: 2px solid @linkHover;
    list-style: none;
  }

}

Use anchor to style category instead of li

// Categories view
#content > .categories {
  padding-top: 0;
}

.categories {
  a {
    display: block;
    background: @link;
    border: 2px solid @linkHover;
    margin-bottom: 15px;
  }

  li {
    list-style: none;
  }

}


.fucking-eu-cookies {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	background: Menu;
	align-items: center;
	font-family: 'Arial', 'Helvetica', sans-serif;
	font-size: 12px;
	color: GrayText;
	padding: 5px;
	span{
		padding-right: 5px;
		a, a:hover, a:visited, a:active, a:focus {
			color: GrayText;
			text-decoration: underline;
		}
	}
	button {
		flex-shrink: 0;
		cursor: pointer;
		font-weight: 0.9em;
	}
}

Fix layout with any positioned boxes in layout

.fucking-eu-cookies {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	background: Menu;
	align-items: center;
	font-family: 'Arial', 'Helvetica', sans-serif;
	font-size: 12px;
	color: GrayText;
	padding: 5px;
	z-index: 1000;
    position: relative;
	span{
		padding-right: 5px;
		a, a:hover, a:visited, a:active, a:focus {
			color: GrayText;
			text-decoration: underline;
		}
	}
	button {
		flex-shrink: 0;
		cursor: pointer;
		font-weight: 0.9em;
	}
}


.tips-for-success {

  &:before {
    height: 35px;
    content: attr(data-label);
    background: @tutor-quaternary url("icon-light-bulb.svg");
    color: @tutor-black;
    background-repeat: no-repeat;
    display: table-cell;
    text-indent: 30px;
    background-position: 10px 5px;
    background-size: 25px 25px;
    padding: 0 10px;
    margin: 0;
  }
  > ul:first-child {
    padding-top: 10px;
    border-top: 1px solid @tutor-neutral-light;

    list-style: none;

    > li {
      &:before {
        content: "";

        width: .5em;
        height: .5em;
        background-color: @tutor-secondary;
        float: left;
        margin: .8em 1em 0;
        border-radius: 50%;
      }
      ol {
        margin-left: 1.2em;
      }
    }
  }
}

Document decision to use table-cell

.tips-for-success {

  &:before {
    height: 35px;
    content: attr(data-label);
    background: @tutor-quaternary url("icon-light-bulb.svg");
    color: @tutor-black;
    background-repeat: no-repeat;
    // table cell is chosen since it needs to be only as wide as the text,
    // yet still break to a new line after the content
    display: table-cell;
    text-indent: 30px;
    background-position: 10px 5px;
    background-size: 25px 25px;
    padding: 0 10px;
    margin: 0;
  }
  > ul:first-child {
    padding-top: 10px;
    border-top: 1px solid @tutor-neutral-light;
    list-style: none;

    > li {
      &:before {
        content: "";

        width: .5em;
        height: .5em;
        background-color: @tutor-secondary;
        float: left;
        margin: .8em 1em 0;
        border-radius: 50%;
      }
      ol {
        margin-left: 1.2em;
      }
    }
  }
}


h1 {
  font-size: 42px;
  letter-spacing: 1px;
}

h2 {
  font-size: 20px;
  letter-spacing: 1px;
}

h3 {
  font-size: 14px;
  letter-spacing: 1px;
}

h4 {
  font-size: 12px;
  letter-spacing: 1px;
}

Fix right/left margin for list in RTL

h1 {
  font-size: 42px;
  letter-spacing: 1px;
}

h2 {
  font-size: 20px;
  letter-spacing: 1px;
}

h3 {
  font-size: 14px;
  letter-spacing: 1px;
}

h4 {
  font-size: 12px;
  letter-spacing: 1px;
}

ul, ol {
  margin: 0px 25px 10px 0px;
}


// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

atom-workspace .horizontal .vertical {
  position: relative;
}

background-tips {
  display: block;

  ul {
    -webkit-user-select: none;
    cursor: default;

    li {
      opacity: 0;
      padding: 0 30px;
      transition: opacity .3s;

      .keystroke {
        border: 2px solid;
        padding: 0 @component-padding/2;
        border-radius: @component-border-radius * 3;
        font-family: Helvetica, Arial, sans-serif;
      }
    }
  }

  .fade-in {
    opacity: 1;
  }
}

Fix link to UI variables stylesheet

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

atom-workspace .horizontal .vertical {
  position: relative;
}

background-tips {
  display: block;

  ul {
    -webkit-user-select: none;
    cursor: default;

    li {
      opacity: 0;
      padding: 0 30px;
      transition: opacity .3s;

      .keystroke {
        border: 2px solid;
        padding: 0 @component-padding/2;
        border-radius: @component-border-radius * 3;
        font-family: Helvetica, Arial, sans-serif;
      }
    }
  }

  .fade-in {
    opacity: 1;
  }
}


/* This file is not included when sl-components is imported as an ember-addon */

@import 'vendor/sl-bootstrap/dist/less/theme.less';

@import 'sl-components.less';

Fix path to Bootstrap's theme.less

/* This file is not included when sl-components is imported as an ember-addon */

@import 'vendor/sl-bootstrap/less/theme.less';

@import 'sl-components.less';


@import (inline) "../vendor/jquery-ui-1.11.2/css/all.css";
@import (inline) "../vendor/jqrangeslider/classic.css";

@slick-grid: "../vendor/slick-grid-2.1.0";
@import (inline) "@{slick-grid}/controls/slick.columnpicker.css";
@import (inline) "@{slick-grid}/controls/slick.pager.css";
@import (inline) "@{slick-grid}/plugins/slick.headerbuttons.css";
@import (inline) "@{slick-grid}/plugins/slick.headermenu.css";
@import (inline) "@{slick-grid}/slick-default-theme.css";
@import (inline) "@{slick-grid}/slick.grid.css";

Fix imports of jquery-ui's CSS files

@jquery-ui: "../vendor/jquery-ui-1.11.2/css";

@import (inline) "@{jquery-ui}/core.css";
@import (inline) "@{jquery-ui}/accordion.css";
@import (inline) "@{jquery-ui}/autocomplete.css";
@import (inline) "@{jquery-ui}/button.css";
@import (inline) "@{jquery-ui}/datepicker.css";
@import (inline) "@{jquery-ui}/dialog.css";
@import (inline) "@{jquery-ui}/draggable.css";
@import (inline) "@{jquery-ui}/menu.css";
@import (inline) "@{jquery-ui}/progressbar.css";
@import (inline) "@{jquery-ui}/resizable.css";
@import (inline) "@{jquery-ui}/selectable.css";
@import (inline) "@{jquery-ui}/selectmenu.css";
@import (inline) "@{jquery-ui}/sortable.css";
@import (inline) "@{jquery-ui}/slider.css";
@import (inline) "@{jquery-ui}/spinner.css";
@import (inline) "@{jquery-ui}/tabs.css";
@import (inline) "@{jquery-ui}/tooltip.css";
@import (inline) "@{jquery-ui}/theme.css";

@slick-grid: "../vendor/slick-grid-2.1.0";
@import (inline) "@{slick-grid}/controls/slick.columnpicker.css";
@import (inline) "@{slick-grid}/controls/slick.pager.css";
@import (inline) "@{slick-grid}/plugins/slick.headerbuttons.css";
@import (inline) "@{slick-grid}/plugins/slick.headermenu.css";
@import (inline) "@{slick-grid}/slick-default-theme.css";
@import (inline) "@{slick-grid}/slick.grid.css";

@import (inline) "../vendor/jqrangeslider/classic.css";


@font-sans: "Helvetica Neue", "Helvetica", Verdana, sans-serif;

body {
	font-family: @font-sans;
}

.text-uppercase {
	text-transform: uppercase;
}

h1 {
	.text-uppercase;
}

Add a demo font in assets

@font-face{
	font-family: 'Some Static Font';
	src: url('../fonts/some_static_font.woff2') format('woff2'),
		 url('../fonts/some_static_font.woff') format('woff');
}

@font-sans: "Helvetica Neue", "Helvetica", Verdana, sans-serif;
@font-some: "Some Static Font", serif;

body {
	font-family: @font-sans;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-styled {
	font-family: @font-some;
}

h1 {
	.text-uppercase;
}


.media {
  // Proper spacing between instances of .media
  margin-top: 15px;

  // Proper spacing of .media-right
  .media-right,
  .pull-right {
    padding-left: 10px;
  }

  // Proper spacing of .media-left
  .media-left,
  .pull-left {
    padding-right: 10px;
  }

  &:first-child {
    margin-top: 0;
  }

  .media-left,
  .media-right,
  .media-body {
    display: table-cell;
    vertical-align: top;
  }

  .media-middle {
    vertical-align: middle;
  }

  .media-bottom {
    vertical-align: bottom;
  }
}

// Reset margins on headings for tighter default spacing
.media-heading {
  margin: 0 0 5px 0;
}

// Media list variation
// -------------------------

// Undo default ul/ol styles
.media-list {
  padding-left: 0;
  list-style: none;
}

Fix up margins and unnest code

.media {
  // Proper spacing between instances of .media
  margin-top: 15px;

  &:first-child {
    margin-top: 0;
  }
}

.media-right,
.media > .pull-right {
  padding-left: 10px;
}

.media-left,
.media > .pull-left {
  padding-right: 10px;
}

.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}

.media-middle {
  vertical-align: middle;
}

.media-bottom {
  vertical-align: bottom;
}

// Reset margins on headings for tighter default spacing
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

// Media list variation
//
// Undo default ul/ol styles
.media-list {
  padding-left: 0;
  list-style: none;
}


// Docks ------------------------------

// Make handles not take up any space when dock is open
.atom-dock-resize-handle {
  position: absolute;
  z-index: 11; // same as toggle buttons

  &.left {
    top: 0;
    right: 0;
    bottom: 0;
  }
  &.right {
    top: 0;
    left: 0;
    bottom: 0;
  }
  &.bottom {
    top: 0;
    left: 0;
    right: 0;
  }
}

// Add borders
.atom-dock-inner.atom-dock-open.left {
  border-right: 1px solid @base-border-color;
}
.atom-dock-inner.atom-dock-open.right {
  border-left: 1px solid @base-border-color;
}

// Make toggle buttons cover ^ border
.atom-dock-toggle-button.left {
  margin-left: -2px;
}
.atom-dock-toggle-button.right {
  margin-right: -2px;
}
.atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom {
  margin-bottom: -1px;
}

Make the dock border only 1px

// Docks ------------------------------

// Make handles not take up any space when dock is open
.atom-dock-resize-handle {
  position: absolute;
  z-index: 11; // same as toggle buttons

  &.left {
    top: 0;
    right: 0;
    bottom: 0;
  }
  &.right {
    top: 0;
    left: 0;
    bottom: 0;
  }
  &.bottom {
    top: 0;
    left: 0;
    right: 0;
  }
}

// Add borders
.atom-dock-inner.atom-dock-open.left {
  border-right: 1px solid @base-border-color;
}
.atom-dock-inner.atom-dock-open.right {
  border-left: 1px solid @base-border-color;
}

// Make toggle buttons cover ^ border
.atom-dock-toggle-button.left {
  margin-left: -1px;
}
.atom-dock-toggle-button.right {
  margin-right: -1px;
}


@lookup-background: #e4b9b9;
@lookup-list-item-hover-background: #5f4834;
@hyperlink-item-hover: #fff;
@hyperlink-text-colour: #757575;

custom-lookup {
  input {
    width: 100%;
  }
  ul {
    background: @lookup-background;
    padding: 0 5px;
    list-style: none;
    position: relative;
    display: list-item;
    li {
      &:hover {
        background: @lookup-list-item-hover-background;
        a {
          color: @hyperlink-item-hover;
        }
      }
      a {
        color: @hyperlink-text-colour;
        text-decoration: none;
      }
    }
  }
}

Update the lookup items styling.

custom-lookup {
  input {
    width: 100%;
  }
  ul {
    background: #fff;
    padding: 0 5px;
    list-style: none;
    position: relative;
    display: list-item;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
    &:before {
      content: '';
      display: inline-block;
      border-right: 7px solid transparent;
      border-bottom: 7px solid rgba(0, 0, 0, 0.2);
      border-left: 7px solid transparent;
    }
    &:after {
      content: '';
      display: inline-block;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #fff;
    }
    li {
      display: block;
      a {
        color: #676767
        text-decoration: none;
        padding: 7px 11px;
        &:hover {
          background: #f6f6f6;
        }
      }
    }
  }
}


html, body {
  width: 100%;
  height: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-family: Roboto,Noto,Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 0;
  color: #212121;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
}

main {
  padding-top: 56px;
}

section {
  margin: 32px 0;
  padding: 0 16px;
  box-sizing: border-box;

  main > &:last-child {
    margin-bottom: 0;
  }

  p > a {
    text-decoration: none;
    color: @main_color;
  }
}

p {
  margin: 16px 0 0 0;
}
.overlay {
  display: none;
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .2;
  overflow: hidden;
}

Reset a styles for android

html, body {
  width: 100%;
  height: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-family: Roboto,Noto,Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 0;
  color: #212121;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
}

main {
  padding-top: 56px;
}

a, a:active, a:visited, a:focus {
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  color: initial;
}

section {
  margin: 32px 0;
  padding: 0 16px;
  box-sizing: border-box;

  main > &:last-child {
    margin-bottom: 0;
  }

  p > a {
    text-decoration: none;
    color: @main_color;
  }
}

p {
  margin: 16px 0 0 0;
}
.overlay {
  display: none;
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .2;
  overflow: hidden;
}


@import "variables";
@import "elements";
@import "mixins";

.width(@cols) {
  // TODO
}

Add column max-width from frameless

@import "variables";
@import "elements";
@import "mixins";

@font-size: @base-font-size;
@em: @font-size * 1em;

@column: 50;
@gutter: 30;

.width(@cols: 1) {
  max-width: (@cols * (@column + @gutter) - @gutter) / @em;
}


//
// Disclosure Arrow
// ==============================

.disclosure-arrow {
	border-left:  0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-top:   0.3em dashed;
	display: inline-block;
	height: 0;
	margin-top: -0.1em; // whilst vertically centered, it appears to be too low because of lowercase chars next to it
	vertical-align: middle;
	width: 0;

	// add spacing
	&:first-child { margin-right: 0.5em; }
	&:last-child { margin-left: 0.5em; }

	// special case when beside an icon
	// margins of inline-block boxes do not collapse (not even with their in-flow children)
	.octicon + & {
		margin-left: 0;
	}
}

Fix Safari style bug in the dropdown component

//
// Disclosure Arrow
// ==============================

.disclosure-arrow {
	border-left:  0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-top:   0.3em solid;
	display: inline-block;
	height: 0;
	margin-top: -0.1em; // whilst vertically centered, it appears to be too low because of lowercase chars next to it
	vertical-align: middle;
	width: 0;

	// add spacing
	&:first-child { margin-right: 0.5em; }
	&:last-child { margin-left: 0.5em; }

	// special case when beside an icon
	// margins of inline-block boxes do not collapse (not even with their in-flow children)
	.octicon + & {
		margin-left: 0;
	}
}


@import "../../bower_components/bootstrap/less/bootstrap.less";

@blog-background: #2e3436;
@blog-foreground: #eeeeec;

// FIXME: port more from o-blog
pre.src, pre.example, .modal-body > pre {
    .resizable(both);
    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
    border: 1px solid @gray-lighter;
    background: @blog-background;
    color: @blog-foreground;
}

Add current implement less source

//@import "../../bower_components/bootstrap/less/reset.less";

//@import "../../bower_components/bootstrap/less/bootstrap.less";

@import "../../bower_components/bootstrap/less/variables.less";
@import "../../bower_components/bootstrap/less/mixins.less";

@import "../../bower_components/bootstrap/less/modals.less";

@blog-background: #2e3436;
@blog-foreground: #eeeeec;

// FIXME: port more from o-blog
pre.src, pre.example, .modal-body > pre {
    .resizable(both);
    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
//    border: 1px solid @gray-lighter;
    background: @blog-background;
    color: @blog-foreground;
}


//--------------------------------------------------------------------------//
//  $MIXINS
//--------------------------------------------------------------------------//
//  Used to consolidate all the individual mixins
//--------------------------------------------------------------------------//

//--------------------------------------------------------------------------//
//  $BASE - IMPORTS
//--------------------------------------------------------------------------//
@import "core/_defaults.less";
@import "theme/_vars.less";

// Utilities
@import "mixins/_rem-size.less";
@import "mixins/_hide-text.less";
@import "mixins/_opacity.less";
@import "mixins/_image.less";
@import "mixins/_reset-filter.less";
@import "mixins/_resize.less";
@import "mixins/_responsive-visibility.less";
@import "mixins/_size.less";
@import "mixins/_tab-focus.less";
@import "mixins/_text-emphasis.less";
@import "mixins/_text-overflow.less";
@import "mixins/_vendor-prefixes.less";
@import "mixins/_font-size.less";
@import "mixins/_border-radius.less";

// Components
@import "mixins/_pagination.less";
@import "mixins/_nav-divider.less";
@import "mixins/_forms.less";

// Skins
@import "mixins/_gradients.less";

// Layout
@import "mixins/_clearfix.less";
@import "mixins/_center-block.less";
@import "mixins/_nav-vertical-align.less";
@import "mixins/_grid-framework.less";
@import "mixins/_grid.less";

Fix some import issues in mixins

//--------------------------------------------------------------------------//
//  $MIXINS
//--------------------------------------------------------------------------//
//  Used to consolidate all the individual mixins
//--------------------------------------------------------------------------//

//--------------------------------------------------------------------------//
//  $BASE - IMPORTS
//--------------------------------------------------------------------------//
@import "core/_defaults.less";
@import "theme/_vars.less";

// Utilities
@import "mixins/_rem-size.less";
@import "mixins/_hide-text.less";
@import "mixins/_opacity.less";
@import "mixins/_image.less";
@import "mixins/_reset-filter.less";
@import "mixins/_resize.less";
@import "mixins/_responsive-visibility.less";
@import "mixins/_size.less";
@import "mixins/_tab-focus.less";
@import "mixins/_background-variant.less";
@import "mixins/_text-variant.less";
@import "mixins/_text-overflow.less";
@import "mixins/_vendor-prefixes.less";
@import "mixins/_font-size.less";
@import "mixins/_border-radius.less";

// Components
@import "mixins/_pagination.less";
@import "mixins/_nav-divider.less";
@import "mixins/_forms.less";

// Skins
@import "mixins/_gradients.less";

// Layout
@import "mixins/_clearfix.less";
@import "mixins/_center-block.less";
@import "mixins/_nav-vertical-align.less";
@import "mixins/_grid-framework.less";
@import "mixins/_grid.less";


#discover {
    .header-space;
}

#discover ul {
    margin: 0 0 @header-height 0; //Bottom margin as much as bottom tabbar.
    padding: 0;
}

#discover lh {
    display: block;
    padding: 10px;

    color: @black;
    font-weight: 400;
    font-size: 0.8em;
    border-bottom: 1px solid @lightGrey;
}

Tweak appCell / app list styles. Resolves GH-170

#discover {
    .header-space;
}

#discover ul {
    margin: 0 0 @header-height 0; //Bottom margin as much as bottom tabbar.
    padding: 0;
}

#discover lh {
    display: block;
    padding: 10px;

    color: @darkGrey;
    font-weight: 600;
    font-size: 0.8em;
    border-bottom: 1px solid @lightGrey;
}


@import "~bootstrap/less/bootstrap";
@import "~react-fa/node_modules/font-awesome/css/font-awesome.css";
@import "~plexus-form/node_modules/react-date-picker/index.css";

@import "./editor.less";
@import "./layout.less";

Use LESS instead of CSS styles from Font Awesome

@import "~bootstrap/less/bootstrap";
@import "~react-fa/node_modules/font-awesome/less/font-awesome";
@import "~plexus-form/node_modules/react-date-picker/index.css";

@import "./editor.less";
@import "./layout.less";


@import './variables/paths';

//@import 'katex.css';

@import './vendor-variables';

@import 'variables';

@import (reference) './mixins/generic';

@import '~openstax-react-components/resources/styles/main.less';

// @import './global/tutor-bootstrap';
@import "@{bootstrap-path}/navs";
@import "@{bootstrap-path}/navbar";
@import "@{bootstrap-path}/buttons";
@import "@{bootstrap-path}/button-groups";

// @answer-correct: #34b27d;
// @answer-incorrect: #cb4d4d;

html { font-size: 12px; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #efefef;
  padding: 10px;
}

.exercise-editor {

  .mpq-toggle label {
    width: 140px;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 12px;
    justify-content: flex-start;
    text-align: center;
    input { margin: 0; }
  }

  @import './tags';
  @import './attachments';
  @import './question';

}

Set tab content to be white with border

@import './variables/paths';

//@import 'katex.css';

@import './vendor-variables';

@import 'variables';

@import (reference) './mixins/generic';

@import '~openstax-react-components/resources/styles/main.less';

// @import './global/tutor-bootstrap';
@import "@{bootstrap-path}/navs";
@import "@{bootstrap-path}/navbar";
@import "@{bootstrap-path}/buttons";
@import "@{bootstrap-path}/button-groups";

// @answer-correct: #34b27d;
// @answer-incorrect: #cb4d4d;

html { font-size: 12px; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #efefef;
  padding: 10px;
}

.exercise-editor {

  .mpq-toggle label {
    width: 140px;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 12px;
    justify-content: flex-start;
    text-align: center;
    input { margin: 0; }
  }

  .tab-pane {
    background-color: white;
    border-left: 1px solid @nav-tabs-border-color;
    border-right: 1px solid @nav-tabs-border-color;
    border-bottom: 1px solid @nav-tabs-border-color;
  }
  @import './tags';
  @import './attachments';
  @import './question';

}


/* Base Application Styles */
@import "~bootstrap/less/variables";

html,
body {
  height: 100%;
}

#app {
  /*
   For Medium devices (desktops, 992px and up), no page level scroll
  */
  @media (min-width: @screen-md-min) {
    height: 100%;
  }
  .showpreper-container {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    height: 100%;
    .navbar {
      margin-bottom: 0px;
    }
    .showpreper-content {
      flex: 1;
      display: flex;
      flex-flow: row;
      align-items: stretch;
      overflow: hidden;
      .slide-deck {
        flex: 0 1 200px;
        overflow: auto;
        // mitigate Chrome bug; see http://stackoverflow.com/questions/34325439
        z-index: 2;
      }
      .slide-editor {
        flex: 1 1 auto;
        position: relative;
        overflow: auto;
      }
    }
  }
}

Adjust brand drop-down menu position.

/* Base Application Styles */
@import "~bootstrap/less/variables";

html,
body {
  height: 100%;
}

#app {
  /*
   For Medium devices (desktops, 992px and up), no page level scroll
  */
  @media (min-width: @screen-md-min) {
    height: 100%;
  }
  .showpreper-container {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    height: 100%;
    .navbar {
      margin-bottom: 0px;
      .navbar-header  .dropdown {
        float: left;
      }
    }
    .showpreper-content {
      flex: 1;
      display: flex;
      flex-flow: row;
      align-items: stretch;
      overflow: hidden;
      .slide-deck {
        flex: 0 1 200px;
        overflow: auto;
        // mitigate Chrome bug; see http://stackoverflow.com/questions/34325439
        z-index: 2;
      }
      .slide-editor {
        flex: 1 1 auto;
        position: relative;
        overflow: auto;
      }
    }
  }
}


.qn-Button {
  background-color: @color-Interactive--150;
  border: none;
  box-shadow: inset 0 0 0 0.15em @color-Interactive--400;
  border-radius: 0.25em;
  color: @color-Interactive--750;
  padding: 0.75em;
  text-decoration: none;
  text-shadow: 0 0.05em 0 @color-White;

  &:hover,
  &:focus {
    background-color: @color-Interactive--400;
    color: @color-White;
    text-shadow: 0 0.05em 0 @color-Interactive--750;
  }

  &:active {
    position: relative;
    top: 0.1em;
  }

  &[disabled],
  &--disabled {
    background-color: @color-Interactive--100;
    box-shadow: inset 0 0 0 0.15em @color-Interactive--150;
    color: @color-Interactive--400;
    text-shadow: inherit;
  }

  &--primary {
    background-color: @color-Interactive--750;
    box-shadow: inset 0 0 0 0.15em @color-Interactive--750;
    color: @color-White;
    text-shadow: none;

    &:hover,
    &:focus {
      background-color: @color-White;
      color: @color-Interactive--750;
      text-shadow: inherit;
    }
  }
}

Fix primary button disabled styles on hover and focus

.qn-Button {
  background-color: @color-Interactive--150;
  border: none;
  box-shadow: inset 0 0 0 0.15em @color-Interactive--400;
  border-radius: 0.25em;
  color: @color-Interactive--750;
  padding: 0.75em;
  text-decoration: none;
  text-shadow: 0 0.05em 0 @color-White;

  &:hover,
  &:focus {
    background-color: @color-Interactive--400;
    color: @color-White;
    text-shadow: 0 0.05em 0 @color-Interactive--750;
  }

  &:active {
    position: relative;
    top: 0.1em;
  }

  &[disabled],
  &--disabled {
    box-shadow: inset 0 0 0 0.15em @color-Interactive--150;
    text-shadow: inherit;
    .disabled();
  }

  &--primary {
    background-color: @color-Interactive--750;
    box-shadow: inset 0 0 0 0.15em @color-Interactive--750;
    color: @color-White;
    text-shadow: none;

    &:hover,
    &:focus {
      background-color: @color-White;
      color: @color-Interactive--750;
      text-shadow: inherit;
    }

    &[disabled],
    &--disabled {
      .disabled();
    }
  }

  .disabled() {
    background-color: @color-Interactive--100;
    color: @color-Interactive--400;
  }
}


//
// # Labels
//
// No styleguide reference.

// Library
// -----------------------------------------------------------------------------
@import (reference) "@{bootstrap}/labels";

// Extensions
// -----------------------------------------------------------------------------

.Tag {
  &:extend(.label);
  &:extend(.label-default);
}

.Tag-Closed {
  &:extend(.label-danger);
}

.Tag-Announcement {
  &:extend(.label-info);
}

.Note.Closed {
  display: inline-block;
  font-size: @font-size-base;
  font-weight: 400;
  line-height: @line-height-base;
  &:extend(.label);
  &:extend(.label-danger);
  &:extend(.glyphicon-ban-circle all);

  &:before {
    margin-right: 5px;
    vertical-align: top;
    line-height: @line-height-computed;
    &:extend(.glyphicon);
  }
}

.HasNew {
  &:extend(.label);
  &:extend(.label-warning);
}

Fix discussion foot label for signed out users

//
// # Labels
//
// No styleguide reference.

// Library
// -----------------------------------------------------------------------------
@import (reference) "@{bootstrap}/labels";

// Extensions
// -----------------------------------------------------------------------------

.Tag {
  &:extend(.label);
  &:extend(.label-default);
}

.Tag-Closed {
  &:extend(.label-danger);
}

.Tag-Announcement {
  &:extend(.label-info);
}

.Note.Closed {
  display: inline-block;
  font-size: @font-size-base;
  font-weight: 400;
  line-height: @line-height-base;
  &:extend(.label);
  &:extend(.label-danger);
  &:extend(.glyphicon-ban-circle all);

  &:before {
    margin-right: 5px;
    vertical-align: top;
    line-height: @line-height-computed;
    &:extend(.glyphicon);
  }

  &.SignInOrRegister {
    &:extend(.label-primary);

    a {
      color: @label-color;
    }
  }
}

.HasNew {
  &:extend(.label);
  &:extend(.label-warning);
}


/** @define HoverIcon */

@import 'shared/branding/colors.less';

.HoverIcon {
  @media screen and (max-width: 571px) {
    &--onlyLarge {
        .HoverIcon-icon--opacity {
          opacity: 1;
        }
        .HoverIcon-icon--height {
          height: 22px;
        }
    }
  }
  &-icon {
    width: auto;
    &--color {
      g, path {
          transition: fill 0.15s ease-out;
      }
    }
    &--opacity {
      transition: opacity 0.3s ease-out;
      opacity: 0;
    }
    &--height {
      transition: height 0.2s ease-out;
      height: 0;
    }
  }
  &:hover {
    .HoverIcon-icon {
      &--opacity {
        opacity: 1;
      }
      &--height {
        height: 22px;
      }
      &--color {
        path, g {
            fill: @ansible-red;
        }
      }
    }
  }
}

Use blue instead of red for icon hover

/** @define HoverIcon */

@import 'shared/branding/colors.less';

.HoverIcon {
  @media screen and (max-width: 571px) {
    &--onlyLarge {
        .HoverIcon-icon--opacity {
          opacity: 1;
        }
        .HoverIcon-icon--height {
          height: 22px;
        }
    }
  }
  &-icon {
    width: auto;
    &--color {
      g, path {
          transition: fill 0.15s ease-out;
      }
    }
    &--opacity {
      transition: opacity 0.3s ease-out;
      opacity: 0;
    }
    &--height {
      transition: height 0.2s ease-out;
      height: 0;
    }
  }
  &:hover {
    .HoverIcon-icon {
      &--opacity {
        opacity: 1;
      }
      &--height {
        height: 22px;
      }
      &--color {
        path, g {
            fill: @blue;
        }
      }
    }
  }
}


@keyframes scale-down {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes scale-up {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.dropdown {
  display: inline-block;
}

.dropdown-toggle {

  &:after {
    transition: transform 0.25s;

    .open & {
      transform: rotate(180deg);
    }

  }

}

.dropdown-menu {
  display: block !important;
  transform-origin: top center;
}

.dropdown-menu-enter {
  animation: fade-in 0.25s, scale-down 0.25s;
}

.dropdown-menu-leave {
  animation: fade-out 0.25s, scale-up 0.25s;
}

Add comment for usage of !important

@keyframes scale-down {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes scale-up {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.dropdown {
  display: inline-block;
}

.dropdown-toggle {

  &:after {
    transition: transform 0.25s;

    .open & {
      transform: rotate(180deg);
    }
  }
}

.dropdown-menu {
  // This can be removed when Canvas is updated to toggle visibility: visible
  display: block !important;
  transform-origin: top center;
}

.dropdown-menu-enter {
  animation: fade-in 0.25s, scale-down 0.25s;
}

.dropdown-menu-leave {
  animation: fade-out 0.25s, scale-up 0.25s;
}


.moon-light-panel {
	.client {
		opacity: 0;
		-webkit-transition: opacity 0.75s linear;
		transition: opacity 0.75s linear;

		&.populated {
			opacity: 1;
		}
	}

	// Base set of styling for scrim to prevent receiving user input while transitioning
	&:after {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	// Adding the content property here, instead of above, means that this element will only appear in
	// the DOM during ".transitioning". This was altered to improve marquee animation performance.
	// Pseudo-elements without a content property cannot receive styling.
	&.transitioning:after {
		content: '';
	}
}

Remove panels from layers, post-transition.

.moon-light-panel {
	.client {
		opacity: 0;
		-webkit-transition: opacity 0.75s linear;
		transition: opacity 0.75s linear;

		&.populated {
			opacity: 1;
		}
	}

	// Base set of styling for scrim to prevent receiving user input while transitioning
	&:after {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	// Adding the content property here, instead of above, means that this element will only appear in
	// the DOM during ".transitioning". This was altered to improve marquee animation performance.
	// Pseudo-elements without a content property cannot receive styling.
	&.transitioning {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);

		&:after {
			content: '';
		}
	}
}


//
// Blocks
// --------------------------------------------------

// Checkbox / Radio
// --------------------------------------------------

.block-control-fa-checkbox,
.block-control-fa-radio {
    display: inline-block;
    position: absolute;
    margin-top: -2px;
    width: 22px;
    height: 22px;
    font-size: 15px;
    color: @brand-primary;
    background-color: @input-bg;
    border: 1px dotted @input-border;

    &.checked {
        &:before {
            content: "\f00c";
            position: absolute;
            padding: 0 3px;
            margin-top: 3px;
        }
    }
}

.block-control-fa-radio {
    border-radius: 11px;
    font-size: 12px;

    &.checked {
        &:before {
            padding: 0 4px;
            margin-top: 5px;
        }
    }
}

.block-control-color(default);
.block-control-color(primary);
.block-control-color(accent);
.block-control-color(success);
.block-control-color(info);
.block-control-color(warning);
.block-control-color(danger);

Fix block label font weight

//
// Blocks
// --------------------------------------------------

// Checkbox / Radio
// --------------------------------------------------

.block-label {
    font-weight: @font-family-weight-bold;
}

.block-control-fa-checkbox,
.block-control-fa-radio {
    display: inline-block;
    position: absolute;
    margin-top: -2px;
    width: 22px;
    height: 22px;
    font-size: 15px;
    color: @brand-primary;
    background-color: @input-bg;
    border: 1px dotted @input-border;

    &.checked {
        &:before {
            content: "\f00c";
            position: absolute;
            padding: 0 3px;
            margin-top: 3px;
        }
    }
}

.block-control-fa-radio {
    border-radius: 11px;
    font-size: 12px;

    &.checked {
        &:before {
            padding: 0 4px;
            margin-top: 5px;
        }
    }
}

.block-control-color(default);
.block-control-color(primary);
.block-control-color(accent);
.block-control-color(success);
.block-control-color(info);
.block-control-color(warning);
.block-control-color(danger);


// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.beatmapset-watches {
  margin-top: 20px;

  &__table-container {
    overflow-x: auto;
  }

  &__col {
    &--cover {
      width: 70px;
      padding: 0;
    }

    && { // bootstrap override
      vertical-align: middle;
      border-top: 2px solid @osu-colour-b4;
    }
  }

  &__cover {
    .default-border-radius();
    width: 70px;
    height: 60px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  &__description {
    margin-bottom: 20px;
  }

  &__heading {
    border-top: none !important;
  }

  &__link {
    color: @osu-colour-l1;
    .link-hover({ color: white });
  }
}

Adjust beatmap modding watchlist styling

// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.beatmapset-watches {
  margin-top: 10px;
  font-size: @font-size--title-small;

  &__table-container {
    overflow-x: auto;
  }

  &__col {
    // bootstrap override
    && {
      vertical-align: middle;
      border-top: 2px solid @osu-colour-b4;
    }

    // bootstrap override
    &&--cover {
      width: 70px;
      padding: 0;
    }
  }

  &__cover {
    .default-border-radius();
    width: 80px;
    height: 50px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  &__description {
    margin-bottom: 10px;
  }

  &__heading {
    border-top: none !important;
  }

  &__link {
    color: @osu-colour-l1;
    .link-hover({ color: white });
  }
}


.at-Truncate {
    display: flex;
    align-items: center;

    .at-Truncate-text {
        font-family: monospace;
    }

    .at-Truncate-copy {
        color: @at-gray-dark-2x;
        cursor: pointer;
        margin-left: 10px;

        i:hover {
            color: @at-blue;
        }
    }

    .at-Truncate-textarea {
        background: transparent;
        border: none;
        box-shadow: none;
        height: 2em;
        left: 0px;
        outline: none;
        padding: 0px;
        position: fixed;
        top: 0px;
        width: 2em;
    }
}

Add font-family fallbacks for revision sha

.at-Truncate {
    display: flex;
    align-items: center;

    .at-Truncate-text {
        font-family: monospace, Courier, "Courier New", "Open Sans", sans-serif;
    }

    .at-Truncate-copy {
        color: @at-gray-dark-2x;
        cursor: pointer;
        margin-left: 10px;

        i:hover {
            color: @at-blue;
        }
    }

    .at-Truncate-textarea {
        background: transparent;
        border: none;
        box-shadow: none;
        height: 2em;
        left: 0px;
        outline: none;
        padding: 0px;
        position: fixed;
        top: 0px;
        width: 2em;
    }
}


/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

Add global transition text and block elements

/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

/* Global Transition ==================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
	.transition(all .2s ease);
}


html, body, #app, .hands-view-realistic {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  margin: 0 auto;
  width: 60em;
}
.hands-view-realistic {
  overflow: hidden;
}

.view-container {
  width: 75%;
  height: 100%;
  display: inline-block;
}

.controls {
  display: inline-block;
  vertical-align: top;
}

button {
  display: block;
  margin-top: 5px;
}

textarea {
  margin-top: 10px;
  width: 200px;
  height: 400px;
}

Fix test layout for realistic hands views

html, body, #app, .hands-view-realistic {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  margin: 0 auto;
  width: 60em;
}
.hands-view-realistic {
  overflow: hidden;
}

.view-container {
  width: 75%;
  height: 460px;
  display: inline-block;
}

.controls {
  display: inline-block;
  vertical-align: top;
}

button {
  display: block;
  margin-top: 5px;
}

textarea {
  margin-top: 10px;
  width: 200px;
  height: 400px;
}


@import "bootstrap/bootstrap";

@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;

body, label, .checkbox label {
	font-weight: 300;
}

Integrate Bootstrap from bower component folder.

@import "../../../bower_components/bootstrap/less/bootstrap";

@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;

body, label, .checkbox label {
	font-weight: 300;
}


.append-top(@value) {
  padding: 1rem 0 0 0;
  @media screen and (min-width: @screen-sm-min) {
    padding-top: @value;
  }
}
.secondary-headline() {
  font-family: @secondary-font;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
}

Increase letter spacing on H2

.append-top(@value) {
  padding: 1rem 0 0 0;
  @media screen and (min-width: @screen-sm-min) {
    padding-top: @value;
  }
}
.secondary-headline() {
  font-family: @secondary-font;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}


@import "../bootstrap/less/variables.less";
@import "custom-variables.less";

.page-header {
    margin: 0px;
    padding-top: 10px;
    border-bottom: none;
    background: linear-gradient(to bottom, @brand-primary, @brand-primary 90%, @gray-darker);
}

.navbar {
    border: none;
    margin-bottom: 0px;
}

.navbar:after {
    height: 15px;
    width: 100%;
    background: linear-gradient(to top, @body-bg, @gray-darker 80%, @gray-dark);
}

.navbar li a:active {
    text-decoration: underline;
}

form textarea {
    resize: vertical;
}

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger {
    padding: 10px;
}

.btn-centered {
    position: relative;
    top: 7px;
}

.thin-sides-margin {
    margin-left: 0px;
    margin-right: 0px;
}

.thin-sides-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.forceheight {
    overflow: hidden;
}

#post-navlinks {
    margin-bottom: 5px;
}

Use Ubunutu as default font

@import "../bootstrap/less/variables.less";
@import "custom-variables.less";

@import url(http://fonts.googleapis.com/css?family=Ubuntu);
@font-family-sans-serif: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;

.page-header {
    margin: 0px;
    padding-top: 10px;
    border-bottom: none;
    background: linear-gradient(to bottom, @brand-primary, @brand-primary 90%, @gray-darker);
}

.page-header h2 {
    font-size: ceil((@font-size-h1 * 1.1));
}

.navbar {
    border: none;
    margin-bottom: 0px;
}

.navbar:after {
    height: 15px;
    width: 100%;
    background: linear-gradient(to top, @body-bg, @gray-darker 80%, @gray-dark);
}

.navbar li a:active {
    text-decoration: underline;
}

form textarea {
    resize: vertical;
}

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger {
    padding: 10px;
}

.btn-centered {
    position: relative;
    top: 7px;
}

.thin-sides-margin {
    margin-left: 0px;
    margin-right: 0px;
}

.thin-sides-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.forceheight {
    overflow: hidden;
}

#post-navlinks {
    margin-bottom: 5px;
}


// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

atom-workspace .horizontal .vertical {
  position: relative;
}

background-tips {
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .background-message {
    -webkit-user-select: none;
    cursor: default;

    .message {
      padding: 0 @component-padding*3;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      &.fade-in {
        opacity: 1;
      }

      .keystroke {
        border: 2px solid;
        padding: 0 @component-padding/2;
        border-radius: @component-border-radius * 3;
        font-family: "Helvetica Neue", Arial, sans-serif;
      }
    }
  }
}

Remove position: relative on container

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

background-tips {
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .background-message {
    -webkit-user-select: none;
    cursor: default;

    .message {
      padding: 0 @component-padding*3;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      &.fade-in {
        opacity: 1;
      }

      .keystroke {
        border: 2px solid;
        padding: 0 @component-padding/2;
        border-radius: @component-border-radius * 3;
        font-family: "Helvetica Neue", Arial, sans-serif;
      }
    }
  }
}


@tab-width: 14em;
@close-icon-margin-right: 5%;

atom-pane-container {
  atom-pane {
    -webkit-flex-direction: row !important;
  }
}

.tab-bar {
  width: @tab-width !important;
  max-width: @tab-width !important;
  min-width: @tab-width !important;
  height: auto !important;
  padding: 0 !important;
  -webkit-flex-direction: column !important;

  .tab {
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    -webkit-flex: 0 0 auto !important;

    &.active {
      width: 100% !important;
      -webkit-flex: 0 0 auto !important;
    }

    .title {
      text-align: left !important;
    }

    .close-icon {
      margin-right: @close-icon-margin-right !important;
    }
  }

  .placeholder {
    position: relative !important;
    width: auto !important;
    height: 1px !important;
    margin: 0 !important;

    &:after {
      display: none !important;
    }
  }
}

Remove needless prefix and properties

@tab-width: 14em;
@close-icon-margin-right: 5%;

atom-pane-container {
  atom-pane {
    flex-direction: row !important;
  }
}

.tab-bar {
  width: @tab-width !important;
  max-width: @tab-width !important;
  min-width: @tab-width !important;
  height: auto !important;
  padding: 0 !important;
  flex-direction: column !important;

  .tab {
    width: 100% !important;
    height: auto !important;
    flex-grow: 0 !important;

    .title {
      text-align: left !important;
    }

    .close-icon {
      margin-right: @close-icon-margin-right !important;
    }
  }

  .placeholder {
    position: relative !important;
    width: auto !important;
    height: 1px !important;
    margin: 0 !important;

    &:after {
      display: none !important;
    }
  }
}


// Config: Palette
// Because naming colours is hard, use http://chir.ag/projects/name-that-color, and DO NOT question it.
@palette-bunker: #12161D;
@palette-ebonyClay: #1D222F;
@palette-springGreen: #00FF62;
@palette-mySin: #FFBC24;
@palette-pomegranate: #F83E1C;

// Dependencies
@import (css) './node_modules/normalize-css/normalize.css';

// Base styles
@import './ui/base/universal';
@import './ui/base/html';
@import './ui/base/body';
@import './ui/base/h';
@import './ui/base/a';
@import './ui/base/img';
@import './ui/base/lists';
@import './ui/base/textarea';

// Templates/Views
@import './components/Home/Home';
@import './components/Settings/Settings';

@font-face {
  font-family: 'K';
  font-weight: normal;
  src: url('./ui/fonts/Karla/Karla-Regular.ttf') format('truetype');
}

body {
  .fontSmoothing(on);
  font-family: 'K', sans-serif;
}

Update normalize-css import to inline.

// Config: Palette
// Because naming colours is hard, use http://chir.ag/projects/name-that-color, and DO NOT question it.
@palette-bunker: #12161D;
@palette-ebonyClay: #1D222F;
@palette-springGreen: #00FF62;
@palette-mySin: #FFBC24;
@palette-pomegranate: #F83E1C;

// Dependencies
@import (inline) './node_modules/normalize-css/normalize.css';

// Base styles
@import './ui/base/universal';
@import './ui/base/html';
@import './ui/base/body';
@import './ui/base/h';
@import './ui/base/a';
@import './ui/base/img';
@import './ui/base/lists';
@import './ui/base/textarea';

// Templates/Views
@import './components/Home/Home';
@import './components/Settings/Settings';

@font-face {
  font-family: 'K';
  font-weight: normal;
  src: url('./ui/fonts/Karla/Karla-Regular.ttf') format('truetype');
}

body {
  .fontSmoothing(on);
  font-family: 'K', sans-serif;
}


@import "../mixins/motion";
@import "motion/fade";
@import "motion/move";
@import "motion/other";
@import "motion/slide";
@import "motion/swing";
@import "motion/zoom";

// For common/openAnimation
.ant-motion-collapse {
  overflow: hidden;
  &-active {
    transition: height .12s, opacity .12s;
  }
}

Fix inline menu collapse animation

@import "../mixins/motion";
@import "motion/fade";
@import "motion/move";
@import "motion/other";
@import "motion/slide";
@import "motion/swing";
@import "motion/zoom";

// For common/openAnimation
.ant-motion-collapse {
  overflow: hidden;
  &-active {
    transition: height .12s, opacity .12s !important;
  }
}


@import "_colors.less";
@import "_variables.less";

.dialog {
  flex: 1;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;

  .window-title {
    padding: 4px 8px;
    background: @orange;
    color: @grey;
    line-height: 2.4em;
    [loaded] & {
      transition: background 0.3s ease;
    }
  }

  .window-main {
    flex: 1;
    position: relative;
    overflow: hidden;

    > .row {
      flex: 1;
      flex-direction: column;
      display: flex;
      position: absolute;
      height: 100%;
      width: 100%;
      margin: 0;
    }

    .tabs {
      overflow: hidden;
      background: transparent;
    }
    .settings-box {
      padding-top: 14px;
      flex: 1;
      overflow: auto;
      padding: 0 40px;
    }

    .color-square-wrapper {
      text-align: center;

      .color-square {
        width: 4em;
        height: 4em;
        display: inline-block;
        margin: 0.3em;
        cursor: pointer;
      }
    }

    .eq-slide-con {
      display: flex;

      label {
        position: static;
        margin-top: 12px;
        -webkit-column-width: 50px;
      }

      .eq-slide {
        margin-top: 16px;
        flex: 1;
        margin-left: 16px;
      }
    }
  }
}

Fix scrolling issue in the Desktop Settings panel

@import "_colors.less";
@import "_variables.less";

.dialog {
  flex: 1;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;

  .window-title {
    padding: 4px 8px;
    background: @orange;
    color: @grey;
    line-height: 2.4em;
    [loaded] & {
      transition: background 0.3s ease;
    }
  }

  .window-main {
    flex: 1;
    position: relative;
    overflow: hidden;

    > .row {
      flex: 1;
      flex-direction: column;
      display: flex;
      height: 100%;
      width: 100%;
      margin: 0;
    }

    .tabs {
      overflow: hidden;
      background: transparent;
    }
    .settings-box {
      padding-top: 14px;
      flex: 1;
      overflow: auto;
      padding: 0 40px;
    }

    .color-square-wrapper {
      text-align: center;

      .color-square {
        width: 4em;
        height: 4em;
        display: inline-block;
        margin: 0.3em;
        cursor: pointer;
      }
    }

    .eq-slide-con {
      display: flex;

      label {
        position: static;
        margin-top: 12px;
        -webkit-column-width: 50px;
      }

      .eq-slide {
        margin-top: 16px;
        flex: 1;
        margin-left: 16px;
      }
    }
  }
}


@import "ghost.less";

@wrapper-width: 1200px;
@gutter-width: 30px;
@total-columns: 12;

.wrapper {
  .wrapper();
}

.row {
  .row();
}

.spanX ( @index ) when ( @index > 0 ) {
  ( ~".span@{index}" ) {
    .span(@index);
  }
  .spanX( @index - 1 );
}

.spanX ( 0 ) {}

.spanX ( @total-columns );

Update legacy sheet to use new API

@import "ghost.less";

@wrapper-width: 1200px;
@gutter-width: 30px;
@total-columns: 12;

.wrapper {
  .wrapper();
}

.row {
  .row();
}

.columnX ( @index ) when ( @index > 0 ) {
  ( ~".column@{index}" ) {
    .column(@index);
  }
  .columnX( @index - 1 );
}

.columnX ( 0 ) {}

.columnX ( @total-columns );


* {
	box-sizing: border-box;
}

atom-workspace {
  background-color: @app-background-color;
}

// Scrollbars
.scrollbars-visible-always {
  ::-webkit-scrollbar {
		width: @component-padding;
		height: @component-padding;
	}

	::-webkit-scrollbar-track {
		background: @scrollbar-background-color;
	}

	::-webkit-scrollbar-thumb,
	::-webkit-scrollbar-corner {
		border-radius: @component-padding;
		border: 3px solid transparent;
		background: @scrollbar-color;
		background-clip: content-box;
	}

	::-webkit-scrollbar-thumb:active {
		border-radius: 0;
		border-left-width: 0;
		border-right-width: 0;
	}
}

Add /deep/ selector to scrollbars

* {
	box-sizing: border-box;
}

atom-workspace {
  background-color: @app-background-color;
}

// Scrollbars
.scrollbars-visible-always {
	/deep/ ::-webkit-scrollbar {
		width: @component-padding;
		height: @component-padding;
	}

	/deep/ ::-webkit-scrollbar-track {
		background: @scrollbar-background-color;
	}

	/deep/ ::-webkit-scrollbar-thumb,
	/deep/ ::-webkit-scrollbar-corner {
		border-radius: @component-padding;
		border: 3px solid transparent;
		background: @scrollbar-color;
		background-clip: content-box;
	}

	/deep/ ::-webkit-scrollbar-thumb:active {
		border-radius: 0;
		border-left-width: 0;
		border-right-width: 0;
	}
}


@import "variables";

.git-FileList {
  &:empty:before {
    content:'No changes';
    display: block;
    padding: @component-padding;
    text-align: center;
    color: @text-color-subtle;
    font-style: italic;
  }
}

.git-StagedChanges, .git-UnstagedChanges {
  &.is-focused {
    .git-FilePatch.is-selected {
      background: @background-color-highlight;
      color: @text-color-highlight;
      box-shadow: @pane-item-background-color 0 -1px 0;
      :focus & {
        background: @background-color-selected;
        color: @text-color-selected;
      }
    }
  }
}

Fix styling - FilePatch -> FilePatchListItem

@import "variables";

.git-FileList {
  &:empty:before {
    content:'No changes';
    display: block;
    padding: @component-padding;
    text-align: center;
    color: @text-color-subtle;
    font-style: italic;
  }
}

.git-StagedChanges, .git-UnstagedChanges {
  &.is-focused {
    .git-FilePatchListItem.is-selected {
      background: @background-color-highlight;
      color: @text-color-highlight;
      box-shadow: @pane-item-background-color 0 -1px 0;
      :focus & {
        background: @background-color-selected;
        color: @text-color-selected;
      }
    }
  }
}


@import '../common';

.oo-ui-panelLayout {
	position: relative;

	&-framed {
		overflow: hidden;
	}

	&-scrollable {
		overflow: auto;
	}

	&-expanded {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.theme-oo-ui-panelLayout();
}

Revert "Add overflow:hidden to framed panels"

@import '../common';

.oo-ui-panelLayout {
	position: relative;

	&-scrollable {
		overflow: auto;
	}

	&-expanded {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.theme-oo-ui-panelLayout();
}