settings-view.less

                                                                                                                                                                                                                                                                                                                                                                        /*
 views ⟩ settings ⟩ reduced-dark-ui


 author Tuomas Hatakka
  email tuomas.hatakka@gmail.com
      © 2016-2017 Tuomas Hatakka


↛ Namespace                                                                                                                                                                                                                                                                                                                                                                 */
.settings-view {

.text(normal);
font-size: @font-size;
background-color: @app-background-color;

                                                                                                                                                                                                                                                                                                                                                                            /*
↛ Local variables                                                                                                                                                                                                                                                                                                                                                                 */
@settings-gutter: 0.5rem;
@size-pkg-name: 6rem;


.breadcrumb {
  .text(caps);
  left: 0;
  right: 0;
  width: auto;
  position: absolute;
  padding: @component-padding;
  background-color: @app-background-color;
  z-index: 500;

  & > li,
  & > li + li::before {
    .icon("\f105");
    padding: 0 @component-padding 0 0;
    a {
      display: block;
      }}

  + * {
  margin-top: 4rem }}

// input[type="checkbox"]:checked {
//   background-color: var(--color-text-highlight, @text-color-highlight) }


                                                                                                                                                                                                                                                                                                                                                                            /*
↛ Alerts & notifications                                                                                                                                                                                                                                                                                                                                                                 */
.alert {
  border: 0;

  button.close {
    background: transparent;
    text-shadow: none;
    border: 0 !important;
    padding: 0 !important;
    opacity: 1;

    &:hover {
      background: transparent;

    &:hover::before {
      color: var(--color-text-highlight, @text-color-highlight) }

    &:before {
      margin-right: 0;
      color: inherit;
      transition: color @transition-time ease }}}

  .alert-info {
    color: var(--color-text-info, @text-color-info);
    background: mix(@text-color-info, @base-background-color, 2%) }

  .alert-danger {
    color: var(--color-text-error, @text-color-error);
    background: mix(@text-color-error, @base-background-color, 2%) }

  .setting-title,
  .setting-title.themes-label {
    .text(highlight) }

  label {
  .text(normal);

  &.control-label .theme-description {
      min-height: 36px }}}

                                                                                                                                                                                                                                                                                                                                                                                  /*
↛ Sections                                                                                                                                                                                                                                                                                                                                                                 */
.section {
  border-radius: @component-border-radius;
  margin: @settings-gutter 0 0;

  .section-heading {
    .h2 }

  .section-body {
    display: flex;
    max-width: none;
    flex-flow: row wrap;

    .control-group {
      flex: 1 0 25%;
      min-width: 20rem;
      padding: 0 @input-height 0 0;
      margin-bottom: @settings-gutter }

    .sub-section-body .control-group {
      padding: 0 }}

  .section-container {
    max-width: none }

  .sub-section {

    .sub-section-heading {
      .h3 }}

  .sub-section .sub-section {

    .sub-section-heading {
      .h4 }}}

.section:first-of-type {
  border-top: 0 }

.section .section-heading::before,
.section .sub-section-heading::before {
  margin-right: @component-padding;
  font-size: 1em;
  padding: 0;
  vertical-align: middle;
  line-height: 1.5rem }

                                                                                                                                                                                                                                                                                                                                                                                    /*
↛ Left-hand side menu                                                                                                                                                                                                                                                                                                                                                                 */
.config-menu {
  background-color: inherit;
  z-index: +1;
  border-right-width: 0;

  .button-area {
    margin: @component-padding /2 @component-padding /4;

    > .btn {
      padding: @component-padding /4 0 }}

  .nav > li {

    > a {
      transition: color @transition-time ease;
      &:hover { background: transparent }}

    &.active > a:hover {
      background: var(--color-background-selected, @background-color-selected) }}}


      /////////////////////////////
.sub-section {
  margin: 0;
  padding-bottom: @component-padding;

  .container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;

    & > * {
      display: block;
      flex: 1 0 25%;
      border-radius: @component-border-radius;
      border: 1px solid mix(@base-border-color, @app-background-color);
      margin: 0 2px 2px 0 }

    & > * > * {
      margin: 0 }}

  .row div {
    background-color: transparent }}



    /////////////////////////////
.package-config-view {
}


/////////////////////////////
.package-card {
  .text(normal);
  position: relative;
  background: var(--color-background-highlight, @background-color-highlight);
  border-width: 0px;
  border-radius: 2px;
  padding: @component-padding;
  transition: all @transition-time;

  &:hover {
    transform: translateY(-6px);
    z-index: 100;
    background-color: #19191b !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) }

  .card-name { .h4 }

  .meta-controls {

    .install-button,
    .uninstall-button {

      &.is-installing, &.is-uninstalling {
        background-image: none;
        -webkit-animation: none;

        &::before {
          -webkit-animation: spin 1s linear infinite;
          content: '\f087' }}}

    .btn-toolbar > .btn-group {
      border-radius: 0;
      position: static }

    .status-indicator {
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0;
      height: auto !important;
      width: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      border-width: 0 !important;
      min-width: 1px;
      z-index: 10000 }}}

.package-detail .package-card:hover {
  background-color: transparent }

.collapsed .package-container .row {
  border: 0 }


/////////////////////////////
.package-update-view {

  .thumbnail {
    background-color: @tool-panel-background-color !important }

  .package-status.icon-check {
    color: var(--color-text-success, @text-color-success) }

  .package-status.icon-cloud-download {
    color: var(--color-text-info, @text-color-info) }}

.package-readme {
  font-size: 1em;
  h1, h2, h3, h4 { .text(heading) }}


// Package details view
.package-detail-view {

  .package-card {
    flex: 1 0 100%;
    border-width: 0 !important;
    padding-bottom: 3em;
    background: transparent;

    .package-name {
      .h1;
      font-weight: 100;
      font-size: @size-pkg-name;
      letter-spacing: -0.075em }

    .package-name:hover {
      text-decoration: none }}

  > p,
  > .link {
    float: left;
    padding: @settings-gutter;
    margin: 0 !important }

  > .btn-wrap-group {
    .btn-group;

    clear: both;
    padding: @settings-gutter;

    .btn {
      margin: 0 1em 1em 0;
      padding: 0em 1.6em;
      display: inline-block }}}
}