npm-debug.log npm icon on tree-view

npm-debug.log npm icon on tree-view

@import "icon-colors";
@import "icon-font";

// - - - - - - - - - - - - - - -
// ICONS BASED ON FILE EXTENSION
// - - - - - - - - - - - - - - -

// PROJECT / REPO
.name.icon.icon-repo {

  // TEXT
  font-weight: bold;
  padding: 0px 0px 0px 5px;
  position: relative;
  display: inline-block;
  top: -1px;

  // ICON
  &:before {
    color: #29A8DE;
    content: '\e601';
    display: inline-block;
    font-family: icomoon;
    font-size: 20px;
    left: -5px;
    position: relative;
    top: 5px;
  }

}

// OPEN/CLOSE SLECTOR OF FOLDERS
.header.list-item:before {
  color: @color-default;
}

// DIRECTORY ICONS
.name.icon.icon-file-directory {

  // TEXT
  background: none;
  border: none;
  color: @color-default;
  display: inline-block;
  font-weight: bold;
  padding: 0px 0px 0px 2px;
  position: relative;
  top: -1px;

  // ICON
  &:before {
    color: @color-default;
    content: '\e613';
    display: inline-block;
    font-family: icomoon;
    font-size: 13px;
    left: -2px;
    position: relative;
    top: 1px;
  }
}

// DEFAULT / FALLBACK ICON
.name.icon {
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: '\e612';
    font-size: 18px;
    display: inline-block;
    position: relative;
    top: 4px;
    left: -4px;
    color: @color-default;
  }

}

// CSS
.name.icon[data-name*=".css"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e614';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-css;
  }

}

// HANDLEBARS
.name.icon[data-name*=".hbs"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60f';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-handlebars;
  }
}

// HIDDEN FILES - .GITIGNORE, CONFIG, DS_STORE
.name.icon[data-name*=".gitignore"], .name.icon[data-name*=".config"], .name.icon[data-name*=".DS_Store"],{
  position: relative;
  display: inline-block;
  top:-5px;
  padding: 0;
  color: @color-hidden;

  &:before {
    font-family: icomoon;
    content: '\e615';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-hidden;
  }
}

// HTML
.name.icon[data-name*=".html"], .name.icon[data-name*=".htm"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60e';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-html;
  }
}

// IMAGES
.name.icon[data-name*=".ai"],
.name.icon[data-name*=".gif"],
.name.icon[data-name*=".jpeg"],
.name.icon[data-name*=".jpg"],
.name.icon[data-name*=".png"],
.name.icon[data-name*=".psd"],
.name.icon[data-name*=".svg"],
.name.icon[data-name*=".svgx"] {

  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: '\e60d';
    font-size: 18px;
    position: relative;
    top: 5px;
    left: -2px;
    color: @color-img;
  }
}

// JADE
.name.icon[data-name*=".jade"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60e';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-jade;
  }
}

// JAVASCRIPT
.name.icon[data-name*=".js"],
.name.icon[data-name*=".coffee"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60c';
    font-size: 22px;
    position: relative;
    top: 7px;
    left: -5px;
    color: @color-js;
  }
}

/*

// COFFEESCRIPT
.name.icon[data-name*=".coffee"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e61b';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-coffee;
  }
}

*/

// JSON
.name.icon[data-name*=".json"],
.name.icon[data-name*=".cson"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60b';
    font-size: 22px;
    position: relative;
    top: 7px;
    left: -5px;
    color: @color-json;
  }
}

// LESS
.name.icon[data-name*=".less"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e614';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-less;
  }

}

// MARKDOWN
.name.icon[data-name*=".md"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: '\e609';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-md;
  }
}

// MUSTACHE
.name.icon[data-name*=".mustache"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60f';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-mustache;
  }
}

// PHP
.name.icon[data-name*=".php"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e608';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-php;
  }
}

// PYTHON
.name.icon[data-name*=".py"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e606';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-python;
  }
}

// RUBY
.name.icon[data-name*=".rb"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e604';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-ruby;
  }
}

// SASS
.name.icon[data-name*=".scss"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e603';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-sass;
  }
}

// STYLUS
.name.icon[data-name*=".styl"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e600';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-styl;
  }
}

// - - - - - - - - - - - - - - - - -
//  ICONS BASED ON NAME VS EXTENSION
// - - - - - - - - - - - - - - - - -

// BOWER
.name.icon[data-name*="BOWER.json"],
.name.icon[data-name*="Bower.json"],
.name.icon[data-name*="bower.json"],
.name.icon[data-name*="BOWER.cson"],
.name.icon[data-name*="Bower.cson"],
.name.icon[data-name*="bower.cson"] {

  display: inline-block;
  padding: 0;
  position: relative;
  top: -6px;

  &.icon-file-text:before {
    color: @color-bower;
    content: '\e61a';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// GRUNT
.name.icon[data-name*="GRUNTFILE.js"],
.name.icon[data-name*="Gruntfile.js"],
.name.icon[data-name*="gruntfile.js"],
.name.icon[data-name*="GRUNTFILE.coffee"],
.name.icon[data-name*="Gruntfile.coffee"],
.name.icon[data-name*="gruntfile.coffee"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e611';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-grunt;
  }
}

// GULP
.name.icon[data-name*="GULPFILE.js"],
.name.icon[data-name*="Gulpfile.js"],
.name.icon[data-name*="gulpfile.js"],
.name.icon[data-name*="GULPFILE.coffee"],
.name.icon[data-name*="Gulpfile.coffee"],
.name.icon[data-name*="gulpfile.coffee"] {

  position: relative;
  display: inline-block;
  top: -5px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e610';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-gulp;
  }
}

// LICENSE
.name.icon[data-name*="LICENSE"],
.name.icon[data-name*="License"],
.name.icon[data-name*="license"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    color: @color-license;
    content: '\e60a';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// NPM
.name.icon[data-name*="npm-debug.log"],
.name.icon[data-name*=".npmignore"] {

  display: inline-block;
  padding: 0;
  position: relative;
  top: -6px;

  &.icon-file-text:before {
    color: @color-npm;
    content: '\e616';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// PROCFILE
.name.icon[data-name*="PROCFILE"],
.name.icon[data-name*="Procfile"],
.name.icon[data-name*="procfile"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e607';
    font-size: 20px;
    position: relative;
    top: 5px;
    left: -3px;
    color: @color-procfile;
  }
}

// XML
.name.icon[data-name*=".xml"] {

  display: inline-block;
  padding: 0;
  position: relative;
  top: -6px;

  &.icon-file-text:before {
    color: @color-xml;
    content: '\e619';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// - - - - - - -
// STATUS COLORS
// - - - - - - -

// STATUS: ADDED
.directory.entry.list-nested-item.status-added {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-added;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-added;

    // ICON
    &:before {
      color: @color-status-added;
    }
  }

}

  .file.entry.list-item.status-added {

    .name.icon {

      // TEXT
      color: @color-status-added;

      // ICON
      &:before {
        color: @color-status-added !important;
      }

      &.icon-file-text:before {
        color: @color-status-added;
      }
    }
  }

// STATUS: MODIFIED
.directory.entry.list-nested-item.status-modified {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-modified;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-modified;

    // ICON
    &:before {
      color: @color-status-modified;
    }
  }

}

  .file.entry.list-item.status-modified {
    .name.icon {

      // TEXT
      color: @color-status-modified;

      // ICON
      &:before {
        color: @color-status-modified;
      }
    }
  }

// STATUS: IGNORED
.directory.entry.list-nested-item.status-ignored {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-ignored;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-ignored;

    // ICON
    &:before {
      color: @color-status-ignored;
    }
  }

}

  .file.entry.list-item.status-ignored {
    .name.icon {

      // TEXT
      color: @color-status-ignored;

      // ICON
      &:before {
        color: @color-status-ignored;
      }
    }
  }

// STATUS: REMOVED
.directory.entry.list-nested-item.status-removed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-removed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-removed;

    // ICON
    &:before {
      color: @color-status-removed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-removed {
    .name.icon {

      // TEXT
      color: @color-status-removed;

      // ICON
      &:before {
        color: @color-status-removed;
      }
    }
  }

// STATUS: RENAMED
.directory.entry.list-nested-item.status-renamed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-renamed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-renamed;

    // ICON
    &:before {
      color: @color-status-renamed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-renamed {
    .name.icon {

      // TEXT
      color: @color-status-renamed;

      // ICON
      &:before {
        color: @color-status-renamed;
      }
    }
  }

@import "icon-colors";
@import "icon-font";

// - - - - - - - - - - - - - - -
// ICONS BASED ON FILE EXTENSION
// - - - - - - - - - - - - - - -

// PROJECT / REPO
.name.icon.icon-repo {

  // TEXT
  font-weight: bold;
  padding: 0px 0px 0px 5px;
  position: relative;
  display: inline-block;
  top: -1px;

  // ICON
  &:before {
    color: #29A8DE;
    content: '\e601';
    display: inline-block;
    font-family: icomoon;
    font-size: 20px;
    left: -5px;
    position: relative;
    top: 5px;
  }

}

// OPEN/CLOSE SLECTOR OF FOLDERS
.header.list-item:before {
  color: @color-default;
}

// DIRECTORY ICONS
.name.icon.icon-file-directory {

  // TEXT
  background: none;
  border: none;
  color: @color-default;
  display: inline-block;
  font-weight: bold;
  padding: 0px 0px 0px 2px;
  position: relative;
  top: -1px;

  // ICON
  &:before {
    color: @color-default;
    content: '\e613';
    display: inline-block;
    font-family: icomoon;
    font-size: 13px;
    left: -2px;
    position: relative;
    top: 1px;
  }
}

// DEFAULT / FALLBACK ICON
.name.icon {
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: '\e612';
    font-size: 18px;
    display: inline-block;
    position: relative;
    top: 4px;
    left: -4px;
    color: @color-default;
  }

}

// CSS
.name.icon[data-name*=".css"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e614';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-css;
  }

}

// HANDLEBARS
.name.icon[data-name*=".hbs"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60f';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-handlebars;
  }
}

// HIDDEN FILES - .GITIGNORE, CONFIG, DS_STORE
.name.icon[data-name*=".gitignore"], .name.icon[data-name*=".config"], .name.icon[data-name*=".DS_Store"],{
  position: relative;
  display: inline-block;
  top:-5px;
  padding: 0;
  color: @color-hidden;

  &:before {
    font-family: icomoon;
    content: '\e615';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-hidden;
  }
}

// HTML
.name.icon[data-name*=".html"], .name.icon[data-name*=".htm"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60e';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-html;
  }
}

// IMAGES
.name.icon[data-name*=".ai"],
.name.icon[data-name*=".gif"],
.name.icon[data-name*=".jpeg"],
.name.icon[data-name*=".jpg"],
.name.icon[data-name*=".png"],
.name.icon[data-name*=".psd"],
.name.icon[data-name*=".svg"],
.name.icon[data-name*=".svgx"] {

  position: relative;
  display: inline-block;
  top: -2px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: '\e60d';
    font-size: 18px;
    position: relative;
    top: 5px;
    left: -2px;
    color: @color-img;
  }
}

// JADE
.name.icon[data-name*=".jade"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60e';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-jade;
  }
}

// JAVASCRIPT
.name.icon[data-name*=".js"],
.name.icon[data-name*=".coffee"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60c';
    font-size: 22px;
    position: relative;
    top: 7px;
    left: -5px;
    color: @color-js;
  }
}

/*

// COFFEESCRIPT
.name.icon[data-name*=".coffee"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e61b';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-coffee;
  }
}

*/

// JSON
.name.icon[data-name*=".json"],
.name.icon[data-name*=".cson"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60b';
    font-size: 22px;
    position: relative;
    top: 7px;
    left: -5px;
    color: @color-json;
  }
}

// LESS
.name.icon[data-name*=".less"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e614';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-less;
  }

}

// MARKDOWN
.name.icon[data-name*=".md"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &:before {
    font-family: icomoon;
    content: '\e609';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-md;
  }
}

// MUSTACHE
.name.icon[data-name*=".mustache"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e60f';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-mustache;
  }
}

// PHP
.name.icon[data-name*=".php"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e608';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-php;
  }
}

// PYTHON
.name.icon[data-name*=".py"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e606';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-python;
  }
}

// RUBY
.name.icon[data-name*=".rb"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e604';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-ruby;
  }
}

// SASS
.name.icon[data-name*=".scss"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e603';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-sass;
  }
}

// STYLUS
.name.icon[data-name*=".styl"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e600';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-styl;
  }
}

// - - - - - - - - - - - - - - - - -
//  ICONS BASED ON NAME VS EXTENSION
// - - - - - - - - - - - - - - - - -

// BOWER
.name.icon[data-name*="BOWER.json"],
.name.icon[data-name*="Bower.json"],
.name.icon[data-name*="bower.json"],
.name.icon[data-name*="BOWER.cson"],
.name.icon[data-name*="Bower.cson"],
.name.icon[data-name*="bower.cson"] {

  display: inline-block;
  padding: 0;
  position: relative;
  top: -6px;

  &.icon-file-text:before {
    color: @color-bower;
    content: '\e61a';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// GRUNT
.name.icon[data-name*="GRUNTFILE.js"],
.name.icon[data-name*="Gruntfile.js"],
.name.icon[data-name*="gruntfile.js"],
.name.icon[data-name*="GRUNTFILE.coffee"],
.name.icon[data-name*="Gruntfile.coffee"],
.name.icon[data-name*="gruntfile.coffee"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e611';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-grunt;
  }
}

// GULP
.name.icon[data-name*="GULPFILE.js"],
.name.icon[data-name*="Gulpfile.js"],
.name.icon[data-name*="gulpfile.js"],
.name.icon[data-name*="GULPFILE.coffee"],
.name.icon[data-name*="Gulpfile.coffee"],
.name.icon[data-name*="gulpfile.coffee"] {

  position: relative;
  display: inline-block;
  top: -5px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e610';
    font-size: 22px;
    position: relative;
    top: 6px;
    left: -5px;
    color: @color-gulp;
  }
}

// LICENSE
.name.icon[data-name*="LICENSE"],
.name.icon[data-name*="License"],
.name.icon[data-name*="license"] {

  position: relative;
  display: inline-block;
  top: -6px;
  padding: 0;

  &.icon-file-text:before {
    color: @color-license;
    content: '\e60a';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// NPM
.name.icon[data-name*=".npmignore"] {

  display: inline-block;
  padding: 0;
  position: relative;
  top: -6px;

  &.icon-file-text:before {
    color: @color-npm;
    content: '\e616';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// PROCFILE
.name.icon[data-name*="PROCFILE"],
.name.icon[data-name*="Procfile"],
.name.icon[data-name*="procfile"] {

  position: relative;
  display: inline-block;
  top: -4px;
  padding: 0;

  &.icon-file-text:before {
    font-family: icomoon;
    content: '\e607';
    font-size: 20px;
    position: relative;
    top: 5px;
    left: -3px;
    color: @color-procfile;
  }
}

// XML
.name.icon[data-name*=".xml"] {

  display: inline-block;
  padding: 0;
  position: relative;
  top: -6px;

  &.icon-file-text:before {
    color: @color-xml;
    content: '\e619';
    font-family: icomoon;
    font-size: 22px;
    left: -5px;
    position: relative;
    top: 6px;
  }
}

// - - - - - - -
// STATUS COLORS
// - - - - - - -

// STATUS: ADDED
.directory.entry.list-nested-item.status-added {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-added;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-added;

    // ICON
    &:before {
      color: @color-status-added;
    }
  }

}

  .file.entry.list-item.status-added {

    .name.icon {

      // TEXT
      color: @color-status-added;

      // ICON
      &:before {
        color: @color-status-added !important;
      }

      &.icon-file-text:before {
        color: @color-status-added;
      }
    }
  }

// STATUS: MODIFIED
.directory.entry.list-nested-item.status-modified {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-modified;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-modified;

    // ICON
    &:before {
      color: @color-status-modified;
    }
  }

}

  .file.entry.list-item.status-modified {
    .name.icon {

      // TEXT
      color: @color-status-modified;

      // ICON
      &:before {
        color: @color-status-modified;
      }
    }
  }

// STATUS: IGNORED
.directory.entry.list-nested-item.status-ignored {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-ignored;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-ignored;

    // ICON
    &:before {
      color: @color-status-ignored;
    }
  }

}

  .file.entry.list-item.status-ignored {
    .name.icon {

      // TEXT
      color: @color-status-ignored;

      // ICON
      &:before {
        color: @color-status-ignored;
      }
    }
  }

// STATUS: REMOVED
.directory.entry.list-nested-item.status-removed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-removed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-removed;

    // ICON
    &:before {
      color: @color-status-removed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-removed {
    .name.icon {

      // TEXT
      color: @color-status-removed;

      // ICON
      &:before {
        color: @color-status-removed;
      }
    }
  }

// STATUS: RENAMED
.directory.entry.list-nested-item.status-renamed {

  // OPEN/CLOSE SELECTOR
  .header.list-item {
    &:before {
      color: @color-status-renamed;
    }
  }

  // DIRECTORY
  .name.icon.icon-file-directory {

    // TEXT
    color: @color-status-renamed;

    // ICON
    &:before {
      color: @color-status-renamed;
    }
  }

}

  // FILE
  .file.entry.list-item.status-renamed {
    .name.icon {

      // TEXT
      color: @color-status-renamed;

      // ICON
      &:before {
        color: @color-status-renamed;
      }
    }
  }


fixed underline in close button and button links ref #4151

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/alv-ch/alv-ch-ng.git/'


Base64 encode WOFF FuelUX font to reduce requests

Kept other versions the same.

@font-face {
	font-family: "fuelux";
	src:url("@{fueluxFontPath}fuelux.eot");
	src:url("@{fueluxFontPath}fuelux.eot?#iefix") format("embedded-opentype"),
	url("@{fueluxFontPath}fuelux.woff") format("woff"),
	url("@{fueluxFontPath}fuelux.ttf") format("truetype"),
	url("@{fueluxFontPath}fuelux.svg#fuelux") format("svg");
	font-weight: normal;
	font-style: normal;
}

//This could be an interesting addition...
//[data-icon]:before {
//	.iconBaseStyles();
//	content: attr(data-icon);
//}

[class^="fueluxicon-"]:before,
[class*=" fueluxicon-"]:before {
	.iconBaseStyles();
}

.fueluxicon-loader-full:before {
	content: "\e000";
}

.fueluxicon-loader-1:before {
	content: "\e001";
}

.fueluxicon-loader-2:before {
	content: "\e002";
}

.fueluxicon-loader-3:before {
	content: "\e003";
}

.fueluxicon-loader-4:before {
	content: "\e004";
}

.fueluxicon-loader-5:before {
	content: "\e005";
}

.fueluxicon-loader-6:before {
	content: "\e006";
}

.fueluxicon-loader-7:before {
	content: "\e007";
}

.fueluxicon-loader-8:before {
	content: "\e008";
}

//tree

.fueluxicon-bullet:before {
  content: "\e009";
}


Create _popup.less

Create _popup.less

New

#popups {
  opacity: 1;
}

.pum-overlay {

  .pum-container.popmake.active {
    max-width: 420px !important;

    .wpcf7 {
      img.cfheader {
        display: block;
        width: 100%;
        margin-bottom: 1.5rem;
      }
    }

    .pum-close {
      top: 1.3rem;
      right: 1.8rem;
      color: transparent;
      background-color: transparent !important;
      font-size: 0 !important;
      // border: 1px dashed blue !important;

      &:after {
        content: "\f00d";
        font-size: 2.5rem;
        // background-color: rgba(0,0,255,.05);
        // border: 1px dashed red;

        color: #bbb;
        .faw;
        border-radius: 0.5rem;
      }

      &:hover {
        &:after {
          color: #ccc;
        }
      }

    }

    .wpcf7-form-control-wrap {
      > input {
        margin-bottom: 0.8rem;
      }
    }
  }

}

.modal-content {
  max-width: 468px;
}

.dibl {
  display: block !important;
}

.fade {
  background-color: rgba(0,0,0,0.79) !important;
}

.modal-content {
  border-radius: 0 ;

  .modal-header {
    border-radius: 0;
    background-color: @red;

    h3 {
      color: #fff;
      font-weight: 900;
    }
  }

}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select,
.ginput_container input[type="text"],
.ginput_container input[type="email"],
.ginput_container textarea,
.ginput_container select,
.mymail-form input[type="text"],
.mymail-form input[type="email"],
.mymail-form textarea,
.mymail-form select {
  width: 100%;
  max-width: 100%;
}

error: pathspec 'assets/less/_popup.less' did not match any file(s) known to git


Responsive Carousel

Responsive Carousel

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Det-Kongelige-Bibliotek/rex.git/'


change button style for purchased, launchable apps (bug 777880)

@import 'lib';

a.arrow, .img.arrow {
    position: relative;
    &:after {
        .arrow;
        content: "";
        display: block;
        opacity: .7;
        position: absolute;
        top: 15px;
        right: 10px;
        height: 18px;
        width: 18px;
    }
    &:hover, &:active {
        &:after {
            opacity: 1;
        }
    }
}

.button, button {

    border: 0;
    color: white;
    display: inline-block;
    font: 600 16px/31px @open-stack;
    height: 32px;
    background-color: #267cc2;
    padding: 0 24px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
    white-space: nowrap;
    .border-radius(.5em);
    .box-shadow(0px 2px 1px fadeOut(#000,80%),
                inset 0px -1px 0px fadeOut(#000, 80%),
                inset 0px 1px 0px 0px fadeOut(#fff, 80%));
    .gradient-two-color(#42a5e1, #267cc2);
    .transition-property(~'-moz-box-shadow, -webkit-box-shadow, box-shadow, line-height');
    .transition-duration(~'.2s, .2s, .2s, .2s');

    &.product, &.theme-install, &.fat {
        height: 48px;
        padding: 0 32px;
        line-height: 47px;
        &:hover {
            line-height: 43px;
        }
        &:active, &.purchasing, &.installing {
            line-height: 49px;
        }
    }

    &.delete, &.manage, &.cancel, &.product.error {
        .gradient-two-color(#e45d56, #de4332);
    }

    &.product.error {
        color: #fff;
    }

    &:hover {

        .box-shadow(0px 4px 1px fadeOut(#000,80%),
                    inset 0px -3px 0px fadeOut(#000, 80%));
        line-height: 28px;
        text-decoration: none;

    }

    &:active {

        .box-shadow(inset 0px 2px 0px 0px fadeOut(#000,80%),
                    inset 0px 12px 24px 6px fadeOut(#000,80%),
                    inset 0px 0px 2px 2px fadeOut(#000,80%));
        .transition-duration(~'.1s, .1s, .1s, .1s');
        line-height: 34px;

    }

    &[disabled], &.disabled,
    &.purchasing, &.purchased:not(.launch),
    &.installing {
        color: #919497;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        pointer-events: none;
        background-color: @light-gray;
        .gradient-two-color(#ddd, @light-gray);
    }

    &.installed, &.purchased {

        pointer-events: auto;

    }

    &.good {
        .gradient-two-color(darken(#A2E456, 20%), darken(#86DE32, 20%));
    }

    &.arrow {
        padding-right: 34px;
        &:after {
            .arrow-big;
            content: "";
            display: inline-block;
            height: 19px;
            opacity: .7;
            position: relative;
            width: 18px;
            top: 3px;
            left: 14px;
        }
    }
}

@media (max-width: @4col) {
    .button, button {
        .border-radius(4px);
        &.fat {
            .border-box;
            display: block;
            width: 100%;
        }
    }
}

@import 'lib';

a.arrow, .img.arrow {
    position: relative;
    &:after {
        .arrow;
        content: "";
        display: block;
        opacity: .7;
        position: absolute;
        top: 15px;
        right: 10px;
        height: 18px;
        width: 18px;
    }
    &:hover, &:active {
        &:after {
            opacity: 1;
        }
    }
}

.button, button {

    border: 0;
    color: white;
    display: inline-block;
    font: 600 16px/31px @open-stack;
    height: 32px;
    background-color: #267cc2;
    padding: 0 24px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
    white-space: nowrap;
    .border-radius(.5em);
    .box-shadow(0px 2px 1px fadeOut(#000,80%),
                inset 0px -1px 0px fadeOut(#000, 80%),
                inset 0px 1px 0px 0px fadeOut(#fff, 80%));
    .gradient-two-color(#42a5e1, #267cc2);
    .transition-property(~'-moz-box-shadow, -webkit-box-shadow, box-shadow, line-height');
    .transition-duration(~'.2s, .2s, .2s, .2s');

    &.product, &.theme-install, &.fat {
        height: 48px;
        padding: 0 32px;
        line-height: 47px;
        &:hover {
            line-height: 43px;
        }
        &:active, &.purchasing, &.installing {
            line-height: 49px;
        }
    }

    &.delete, &.manage, &.cancel, &.product.error {
        .gradient-two-color(#e45d56, #de4332);
    }

    &.product.error {
        color: #fff;
    }

    &:hover {

        .box-shadow(0px 4px 1px fadeOut(#000,80%),
                    inset 0px -3px 0px fadeOut(#000, 80%));
        line-height: 28px;
        text-decoration: none;

    }

    &:active {

        .box-shadow(inset 0px 2px 0px 0px fadeOut(#000,80%),
                    inset 0px 12px 24px 6px fadeOut(#000,80%),
                    inset 0px 0px 2px 2px fadeOut(#000,80%));
        .transition-duration(~'.1s, .1s, .1s, .1s');
        line-height: 34px;

    }

    &[disabled], &.disabled,
    &.purchasing, &.purchased,
    &.installing, &.installed {

        color: #919497;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        pointer-events: none;
        background-color: @light-gray;
        .gradient-two-color(#ddd, @light-gray);

    }

    &.installed, &.purchased {

        pointer-events: auto;

    }

    &.good {
        .gradient-two-color(darken(#A2E456, 20%), darken(#86DE32, 20%));
    }

    &.arrow {
        padding-right: 34px;
        &:after {
            .arrow-big;
            content: "";
            display: inline-block;
            height: 19px;
            opacity: .7;
            position: relative;
            width: 18px;
            top: 3px;
            left: 14px;
        }
    }
}

@media (max-width: @4col) {
    .button, button {
        .border-radius(4px);
        &.fat {
            .border-box;
            display: block;
            width: 100%;
        }
    }
}


Add empty main.less because lineman insists

error: pathspec 'app/css/main.less' did not match any file(s) known to git


Add directory for remark.less files, incase someone would want to use a compiler with npm

fatal: unable to access 'https://github.com/sporto/hugo-remark.git/': The requested URL returned error: 403


Unify case for locale menu

Unify case for locale menu

Everything is lowercased.

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * container of this component should have its own stacking context otherwise
 * fun things will happen
 */
.nav-popup {
  @_top: nav-popup;
  @_menu-spacing: 30px;

  width: 100%;
  background-color: #222;
  background-size: cover;
  display: flex;
  z-index: 0; // component top level z-index

  @media @desktop {
    padding-left: (@padding-big - (@_menu-spacing / 2));
    min-height: @height--nav-popup;
    transition: height 120ms;
  }

  &--main {
    background-color: fade(#222, 95%);
  }

  &--sections {
    color: #999;

    flex-direction: column;
    @media @desktop {
      flex-direction: row;
    }
  }

  &__action {
    margin: 0 5px;
  }

  &__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  &__flags {
    margin: 10px -5px 20px;
  }

  &__flag {
    .default-border-radius();
    .default-box-shadow();
    height: 20px;
    margin: 0 5px;
  }

  &__form-input {
    .default-border-radius();
    border: none;
    outline: none;
    background-color: #222;
    padding: 10px 5px;

    margin: 5px;
    font-size: @font-size--phone-input;

    @media @desktop {
      width: calc(100% ~'-' 10px);
      margin: 0 5px;
      font-size: inherit;
    }

    &::placeholder {
      color: #777;
    }
  }

  &__link {
    .reset-input();
    color: @yellow;
    font-size: @font-size--nav-popup-link;
    margin: 2.5px 0;
    display: flex;

    &:focus,
    &:hover {
      text-decoration: none;
      color: #fff;
    }

    .@{_top}__menu--locale & {
      color: @purple;

      &:focus,
      &:hover {
        text-decoration: none;
        color: #fff;
      }
    }
  }

  &__link-marker {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    align-items: center;
    display: flex;
    margin-right: 10px;
    color: #555;
    opacity: 0;

    .@{_top}__link:focus &,
    .@{_top}__link:hover & {
      opacity: 1;
    }
  }

  &__menu {
    display: flex;
    flex-direction: column;
    text-transform: lowercase;
  }

  &__menu-head {
    color: #999;
    display: flex;
    padding: 5px (@_menu-spacing / 2) 10px;
    flex: none;

    &--active,
    &.js-menu--active,
    &:focus,
    &:hover {
      color: #fff;
      font-weight: 500;
      text-decoration: none;
    }
  }

  &__menu-head-bar {
    position: absolute;
    top: 0;
    width: calc(100% ~'-' @_menu-spacing);
    transition-duration: 80ms;
    transform: translateY(-100%);

    .@{_top}__menu-head--active &,
    .@{_top}__menu-head.js-menu--active &,
    .@{_top}__menu-head:focus &,
    .@{_top}__menu-head:hover & {
      transform: translateY(0%);
    }
  }

  &__menu-icon {
    width: 20px;
    margin-right: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  &__overlay {
    display: block;
    .full-size();
    background-color: fade(#000, 75%);
  }

  &__row {
    flex: none;
    margin: 0 0 10px;
    display: flex;

    &--actions {
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
    }

    &--error {
      color: @purple-light;
    }

    &--full {
      flex: 1;
    }

    &--title {
      color: #fff;
      font-size: @font-size--nav-popup-title;
      font-style: normal;
    }

    &--username {
      color: #fff;
      font-size: @font-size--nav-popup-title-large;
      font-style: italic;
      font-weight: 600;
    }

    &--with-gutter {
      margin-left: -5px;
      margin-right: 5px;
    }

    &--xs-vertical {
      @media @mobile {
        flex-direction: column;
      }
    }
  }

  &__section {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    font-size: @font-size--nav-popup-section;

    flex: none;
    @media @desktop {
      flex: 1;
    }

    &--blank {
      padding: 0;
    }

    &--login {
      background-color: #333;

      @media @desktop {
        max-width: 380px;
      }
    }

    &--user {
      flex: none;
      padding-top: 40px;
      padding-bottom: 30px;
    }

    &--user-overview {
      min-width: 180px;

      background-color: fade(#000, 50%);

      align-items: flex-end;
    }

    &--user-links {
      background-color: #222;
      padding-left: 40px;
    }

    &--register {
      background-color: #444;

      @media @desktop {
        max-width: 240px;
      }
    }
  }

  &__social {
    .circle(39px);
    .center-content();
    .link-plain();
    border: 2px solid #333;
    font-size: 18px;
    color: #fff;
    margin-left: 10px;

    .link-hover({
      background-color: #fff;
      border-color: #fff;
    });

    &--facebook {
      .link-hover({
        color: @facebook-colour;
      });
    }

    &--support {
      .link-hover({
        color: @pink;
      });
    }

    &--twitter {
      .link-hover({
        color: @twitter-colour;
      });
    }
  }

  &__socials {
    position: absolute;
    bottom: @bar-size;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #111;
    z-index: 2; // local context, above submenu
  }

  &__submenu-container {
    width: 0;
    flex: 1;
    display: flex;
    margin-left: (@_menu-spacing / 2);
  }

  &__submenu {
    position: absolute;
    padding-right: 20px;
    z-index: 1; // local context
    white-space: nowrap;
    height: 100%;
  }
}

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * container of this component should have its own stacking context otherwise
 * fun things will happen
 */
.nav-popup {
  @_top: nav-popup;
  @_menu-spacing: 30px;

  width: 100%;
  background-color: #222;
  background-size: cover;
  display: flex;
  z-index: 0; // component top level z-index

  @media @desktop {
    padding-left: (@padding-big - (@_menu-spacing / 2));
    min-height: @height--nav-popup;
    transition: height 120ms;
  }

  &--main {
    background-color: fade(#222, 95%);
  }

  &--sections {
    color: #999;

    flex-direction: column;
    @media @desktop {
      flex-direction: row;
    }
  }

  &__action {
    margin: 0 5px;
  }

  &__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  &__flags {
    margin: 10px -5px 20px;
  }

  &__flag {
    .default-border-radius();
    .default-box-shadow();
    height: 20px;
    margin: 0 5px;
  }

  &__form-input {
    .default-border-radius();
    border: none;
    outline: none;
    background-color: #222;
    padding: 10px 5px;

    margin: 5px;
    font-size: @font-size--phone-input;

    @media @desktop {
      width: calc(100% ~'-' 10px);
      margin: 0 5px;
      font-size: inherit;
    }

    &::placeholder {
      color: #777;
    }
  }

  &__link {
    .reset-input();
    color: @yellow;
    font-size: @font-size--nav-popup-link;
    margin: 2.5px 0;
    display: flex;

    &:focus,
    &:hover {
      text-decoration: none;
      color: #fff;
    }

    .@{_top}__menu--locale & {
      color: @purple;

      &:focus,
      &:hover {
        text-decoration: none;
        color: #fff;
      }
    }
  }

  &__link-marker {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    align-items: center;
    display: flex;
    margin-right: 10px;
    color: #555;
    opacity: 0;

    .@{_top}__link:focus &,
    .@{_top}__link:hover & {
      opacity: 1;
    }
  }

  &__menu {
    display: flex;
    flex-direction: column;
  }

  &__menu-head {
    color: #999;
    display: flex;
    padding: 5px (@_menu-spacing / 2) 10px;
    flex: none;

    &--active,
    &.js-menu--active,
    &:focus,
    &:hover {
      color: #fff;
      font-weight: 500;
      text-decoration: none;
    }
  }

  &__menu-head-bar {
    position: absolute;
    top: 0;
    width: calc(100% ~'-' @_menu-spacing);
    transition-duration: 80ms;
    transform: translateY(-100%);

    .@{_top}__menu-head--active &,
    .@{_top}__menu-head.js-menu--active &,
    .@{_top}__menu-head:focus &,
    .@{_top}__menu-head:hover & {
      transform: translateY(0%);
    }
  }

  &__menu-icon {
    width: 20px;
    margin-right: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  &__overlay {
    display: block;
    .full-size();
    background-color: fade(#000, 75%);
  }

  &__row {
    flex: none;
    margin: 0 0 10px;
    display: flex;

    &--actions {
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
    }

    &--error {
      color: @purple-light;
    }

    &--full {
      flex: 1;
    }

    &--title {
      color: #fff;
      font-size: @font-size--nav-popup-title;
      font-style: normal;
    }

    &--username {
      color: #fff;
      font-size: @font-size--nav-popup-title-large;
      font-style: italic;
      font-weight: 600;
    }

    &--with-gutter {
      margin-left: -5px;
      margin-right: 5px;
    }

    &--xs-vertical {
      @media @mobile {
        flex-direction: column;
      }
    }
  }

  &__section {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    font-size: @font-size--nav-popup-section;

    flex: none;
    @media @desktop {
      flex: 1;
    }

    &--blank {
      padding: 0;
    }

    &--login {
      background-color: #333;

      @media @desktop {
        max-width: 380px;
      }
    }

    &--user {
      flex: none;
      padding-top: 40px;
      padding-bottom: 30px;
    }

    &--user-overview {
      min-width: 180px;

      background-color: fade(#000, 50%);

      align-items: flex-end;
    }

    &--user-links {
      background-color: #222;
      padding-left: 40px;
    }

    &--register {
      background-color: #444;

      @media @desktop {
        max-width: 240px;
      }
    }
  }

  &__social {
    .circle(39px);
    .center-content();
    .link-plain();
    border: 2px solid #333;
    font-size: 18px;
    color: #fff;
    margin-left: 10px;

    .link-hover({
      background-color: #fff;
      border-color: #fff;
    });

    &--facebook {
      .link-hover({
        color: @facebook-colour;
      });
    }

    &--support {
      .link-hover({
        color: @pink;
      });
    }

    &--twitter {
      .link-hover({
        color: @twitter-colour;
      });
    }
  }

  &__socials {
    position: absolute;
    bottom: @bar-size;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #111;
    z-index: 2; // local context, above submenu
  }

  &__submenu-container {
    width: 0;
    flex: 1;
    display: flex;
    margin-left: (@_menu-spacing / 2);
  }

  &__submenu {
    position: absolute;
    padding-right: 20px;
    z-index: 1; // local context
    white-space: nowrap;
    height: 100%;
  }
}


Some padding when wrapped

Some padding when wrapped

/**
 *    Copyright 2015 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.page-mode {
  @_top: page-mode;

  background-color: @grey-3;
  color: @grey-c;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  min-height: @height--page-mode;
  padding: @spacing;
  list-style: none;
  flex-wrap: wrap;
  margin: 0;
  font-size: 15px;

  &__item {
    display: flex;
    line-height: 1;

    margin: (@spacing / 2) @spacing 0;

    .@{_top}--breadcrumb & {
      margin-left: (@spacing / 2);
      margin-right: (@spacing / 2);
    }

    // pls halp
    .@{_top}--breadcrumb & + &::before {
      content: '»';
      margin-right: @spacing;
    }
  }
}

/**
 *    Copyright 2015 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.page-mode {
  @_top: page-mode;

  background-color: @grey-3;
  color: @grey-c;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  min-height: @height--page-mode;
  padding: @spacing;
  list-style: none;
  flex-wrap: wrap;
  margin: 0;
  font-size: 15px;

  &__item {
    display: flex;
    line-height: 1;

    margin: 0 @spacing;

    .@{_top}--breadcrumb & {
      margin: 0 (@spacing / 2);
    }

    // pls halp
    .@{_top}--breadcrumb & + &::before {
      content: '»';
      margin-right: @spacing;
    }
  }
}


Add less template

Add less template

fatal: unable to access 'https://github.com/vidbina/Electron-React-Boilerplate.git/': The requested URL returned error: 403


老师弹层页卡

老师弹层页卡

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/XUEJS/xue-project.git/'


[FIX] sap.ui.layout.BlockLayout: Add missing sapContrast for Light background

Change-Id: Ia2675fdda5863b061123cecc8575e6ee70a29943
BCP: 1780229220

/* ========================================== */
/* CSS for control sap.ui.layout/BlockLayout  */
/* Belize theme                               */
/* ========================================== */

/* ============ Custom Cell Background Color ============== */
@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: darken(@sapUiAccent1,14);
@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: darken(@sapUiAccent1,18);
@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: darken(@sapUiAccent1,22);
@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: darken(@sapUiAccent1,26);

@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: darken(@sapUiAccent2,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: darken(@sapUiAccent2,16);
@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: darken(@sapUiAccent2,20);
@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: darken(@sapUiAccent2,24);

@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: darken(@sapUiAccent3,14);
@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: darken(@sapUiAccent3,18);
@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: darken(@sapUiAccent3,22);
@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: darken(@sapUiAccent3,26);

@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: darken(@sapUiAccent4,5);
@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: darken(@sapUiAccent4,10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: darken(@sapUiAccent4,15);
@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: darken(@sapUiAccent4,20);

@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: darken(@sapUiAccent5,8);
@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: darken(@sapUiAccent5,13);
@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: darken(@sapUiAccent5,16);
@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: darken(@sapUiAccent5,20);

@_sap_ui_layout_BlockLayout_BlockColorAccentType6A: darken(@sapUiAccent6,6);
@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: darken(@sapUiAccent6,10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: darken(@sapUiAccent6,14);
@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: darken(@sapUiAccent6,16);

@_sap_ui_layout_BlockLayout_BlockColorAccentType7A: darken(@sapUiAccent7,5);
@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: darken(@sapUiAccent7,9);
@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: darken(@sapUiAccent7,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: darken(@sapUiAccent7,16);

@_sap_ui_layout_BlockLayout_BlockColorAccentType8A: darken(@sapUiAccent8,8);
@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: darken(@sapUiAccent8,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: darken(@sapUiAccent8,16);
@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: darken(@sapUiAccent8,20);

@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: @sapUiGroupContentBackground;
@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: darken(@sapUiGroupContentBackground,2);
@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: darken(@sapUiGroupContentBackground,4);
@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: darken(@sapUiGroupContentBackground,6);

@_sap_ui_layout_BlockLayout_BlockColorAccentType10A: darken(@sapUiGroupContentBackground,8);
@_sap_ui_layout_BlockLayout_BlockColorAccentType10B: darken(@sapUiGroupContentBackground,10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType10C: darken(@sapUiGroupContentBackground,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType10D: darken(@sapUiGroupContentBackground,14);

@_sap_ui_layout_BlockLayout_BlockColorAccentType11A: @sapUiBaseColor;
@_sap_ui_layout_BlockLayout_BlockColorAccentType11B: darken(@sapUiBaseColor, 7);
@_sap_ui_layout_BlockLayout_BlockColorAccentType11C: darken(@sapUiBaseColor, 10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType11D: darken(@sapUiBaseColor, 14);

// Create classes which would just set background color of the BlockLayout cells
.generateCellColorSets (@backgroundColorSet, @backgroundColorShade) {
	@css-param: "@{backgroundColorSet}@{backgroundColorShade}"; // Concat the params
	@css-selector: ~"sapUiBlockLayoutCellColor@{css-param}"; // Create the css selector string
	@color-param: "_sap_ui_layout_BlockLayout_BlockColorAccentType@{css-param}"; // Build the color param name

	// Build the real CSS selector.
	// The output would be something like this: .sapUiBlockLayoutCellColor1A { background-color: "#996b00"; }
	.@{css-selector} {
		background-color: @@color-param;

		.sapUiBlockCellContent {
			color: contrast(@@color-param, @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);

			.sapMText, .sapMLabel, .sapUiBlockCellTitle {
				color: inherit;
			}
		}
	}
	.sapContrast.@{css-selector},
	.sapContrast .@{css-selector},
	.sapContrastPlus.@{css-selector},
	.sapContrastPlus .@{css-selector} {
		background-color: inherit; // Read from the

		.sapUiBlockCellContent {
			color: inherit;
		}
	}
}

//Define a loop and go trough 11 color sets and for each set apply 4 shades
.loop-cell-colors(@i: 1) when (@i =< 11) {
	.generateCellColorSets(@i, "A");
	.generateCellColorSets(@i, "B");
	.generateCellColorSets(@i, "C");
	.generateCellColorSets(@i, "D");

	.loop-cell-colors(@i + 1); // Execute next loop iteration
}

//Execute Loop through color sets
.loop-cell-colors(1);

/**
 * Mixin to set contrast containers for Light background
 */
.setLightContrastContainers (@evenCell, @oddCell) {
	// Match every even cell
	.sapUiBlockLayoutCell.sapContrast:nth-child(2n),
	.sapUiBlockLayoutCell.sapContrastPlus:nth-child(2n) {
		.sapUiBlockCellContent {
			background-color: @oddCell;
		}
	}

	.sapUiBlockLayoutCell.sapContrast:nth-child(2n+1),
	.sapUiBlockLayoutCell.sapContrastPlus:nth-child(2n+1) {
		.sapUiBlockCellContent {
			background-color: @evenCell;
		}
	}
}

/* ============ Background type: Light ============== */
.sapUiBlockLayoutBackgroundLight {
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3 {
		.setCellsColorDoubles(darken(@sapUiBaseColor, 10), @sapUiBaseColor);
		.setLightContrastContainers(darken(@sapUiBaseColor, 10), @sapUiBaseColor);
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1Inverted,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3Inverted {
		.setCellsColorDoubles(@sapUiBaseColor, darken(@sapUiBaseColor, 10));
		.setLightContrastContainers(@sapUiBaseColor, darken(@sapUiBaseColor, 10))
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
		.setCellsColorDoubles(darken(@sapUiBaseColor, 7), darken(@sapUiBaseColor, 14));
		.setLightContrastContainers(darken(@sapUiBaseColor, 7), darken(@sapUiBaseColor, 14))
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2Inverted,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4Inverted {
		.setCellsColorDoubles(darken(@sapUiBaseColor, 14), darken(@sapUiBaseColor, 7));
		.setLightContrastContainers(darken(@sapUiBaseColor, 14), darken(@sapUiBaseColor, 7))
	}
}

/* ============ Background type: Mixed ============== */
.sapUiBlockLayoutBackgroundMixed {
	.sapUiBlockLayoutBackgroundLight; // Use the same rules as in sapUiBlockLayoutBackgroundLight

	&.sapUiBlockLayoutSizeL, &.sapUiBlockLayoutSizeXL {
		.sapUiBlockLayoutRow {
			.sapContrast, .sapContrastPlus {
				&.sapUiBlockLayoutCell {
					background-color: darken(@sapUiBaseColor, 12);
				}

				&.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundContrast2 {
					background-color: darken(@sapUiBaseColor, 4);
				}
			}
		}
	}
}

/* ============ Background type: Accent ============== */
.sapUiBlockLayoutBackgroundAccent {
	.sapUiBlockCellContent,
	.sapUiBlockCellTitle,
	.sapUiBlockCellContent .sapMText {
		color: @sapUiContentContrastTextColor;
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1 {
		.setCellsColorDoubles(darken(@sapUiAccent7, 5), darken(@sapUiAccent7, 12)); // Colors A & B
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1Inverted {
		.setCellsColorDoubles(darken(@sapUiAccent7, 12), darken(@sapUiAccent7, 5)); // Colors B & A
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2 {
		.setCellsColorDoubles(darken(@sapUiAccent6, 6), darken(@sapUiAccent6, 12)); // Colors C & D
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2Inverted {
		.setCellsColorDoubles(darken(@sapUiAccent6, 12), darken(@sapUiAccent6, 6)); // Colors D & C
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3 {
		.setCellsColorDoubles(darken(@sapUiAccent5, 8), darken(@sapUiAccent5, 16)); // Colors E & F
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3Inverted {
		.setCellsColorDoubles(darken(@sapUiAccent5, 16), darken(@sapUiAccent5, 8)); // Colors F & E
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
		.setCellsColorDoubles(darken(@sapUiGroupContentBackground, 2), darken(@sapUiGroupContentBackground, 8)); // Colors G & H
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4Inverted {
		.setCellsColorDoubles(darken(@sapUiGroupContentBackground, 8), darken(@sapUiGroupContentBackground, 2)); // Colors H & G
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray1 {
			background-color: darken(@sapUiGroupContentBackground, 8); //color: H
		}

		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray2 {
			background-color: darken(@sapUiGroupContentBackground, 2); //color: G
		}
	}

	.sapUiBlockLayoutBackgroundColorSet4,
	.sapUiBlockLayoutBackgroundColorSet4Inverted,
	.sapUiBlockLayoutBackgroundColorSetGray1,
	.sapUiBlockLayoutBackgroundColorSetGray2 {
		.sapUiBlockCellContent,
		.sapUiBlockCellTitle,
		.sapUiBlockCellContent .sapMText {
			color: @sapUiGroupTitleTextColor;
		}
	}
}

/* ========================================== */
/* CSS for control sap.ui.layout/BlockLayout  */
/* Belize theme                               */
/* ========================================== */

/* ============ Custom Cell Background Color ============== */
@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: darken(@sapUiAccent1,14);
@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: darken(@sapUiAccent1,18);
@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: darken(@sapUiAccent1,22);
@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: darken(@sapUiAccent1,26);

@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: darken(@sapUiAccent2,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: darken(@sapUiAccent2,16);
@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: darken(@sapUiAccent2,20);
@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: darken(@sapUiAccent2,24);

@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: darken(@sapUiAccent3,14);
@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: darken(@sapUiAccent3,18);
@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: darken(@sapUiAccent3,22);
@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: darken(@sapUiAccent3,26);

@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: darken(@sapUiAccent4,5);
@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: darken(@sapUiAccent4,10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: darken(@sapUiAccent4,15);
@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: darken(@sapUiAccent4,20);

@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: darken(@sapUiAccent5,8);
@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: darken(@sapUiAccent5,13);
@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: darken(@sapUiAccent5,16);
@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: darken(@sapUiAccent5,20);

@_sap_ui_layout_BlockLayout_BlockColorAccentType6A: darken(@sapUiAccent6,6);
@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: darken(@sapUiAccent6,10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: darken(@sapUiAccent6,14);
@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: darken(@sapUiAccent6,16);

@_sap_ui_layout_BlockLayout_BlockColorAccentType7A: darken(@sapUiAccent7,5);
@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: darken(@sapUiAccent7,9);
@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: darken(@sapUiAccent7,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: darken(@sapUiAccent7,16);

@_sap_ui_layout_BlockLayout_BlockColorAccentType8A: darken(@sapUiAccent8,8);
@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: darken(@sapUiAccent8,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: darken(@sapUiAccent8,16);
@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: darken(@sapUiAccent8,20);

@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: @sapUiGroupContentBackground;
@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: darken(@sapUiGroupContentBackground,2);
@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: darken(@sapUiGroupContentBackground,4);
@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: darken(@sapUiGroupContentBackground,6);

@_sap_ui_layout_BlockLayout_BlockColorAccentType10A: darken(@sapUiGroupContentBackground,8);
@_sap_ui_layout_BlockLayout_BlockColorAccentType10B: darken(@sapUiGroupContentBackground,10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType10C: darken(@sapUiGroupContentBackground,12);
@_sap_ui_layout_BlockLayout_BlockColorAccentType10D: darken(@sapUiGroupContentBackground,14);

@_sap_ui_layout_BlockLayout_BlockColorAccentType11A: @sapUiBaseColor;
@_sap_ui_layout_BlockLayout_BlockColorAccentType11B: darken(@sapUiBaseColor, 7);
@_sap_ui_layout_BlockLayout_BlockColorAccentType11C: darken(@sapUiBaseColor, 10);
@_sap_ui_layout_BlockLayout_BlockColorAccentType11D: darken(@sapUiBaseColor, 14);

// Create classes which would just set background color of the BlockLayout cells
.generateCellColorSets (@backgroundColorSet, @backgroundColorShade) {
	@css-param: "@{backgroundColorSet}@{backgroundColorShade}"; // Concat the params
	@css-selector: ~"sapUiBlockLayoutCellColor@{css-param}"; // Create the css selector string
	@color-param: "_sap_ui_layout_BlockLayout_BlockColorAccentType@{css-param}"; // Build the color param name

	// Build the real CSS selector.
	// The output would be something like this: .sapUiBlockLayoutCellColor1A { background-color: "#996b00"; }
	.@{css-selector} {
		background-color: @@color-param;

		.sapUiBlockCellContent {
			color: contrast(@@color-param, @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);

			.sapMText, .sapMLabel, .sapUiBlockCellTitle {
				color: inherit;
			}
		}
	}
	.sapContrast.@{css-selector},
	.sapContrast .@{css-selector},
	.sapContrastPlus.@{css-selector},
	.sapContrastPlus .@{css-selector} {
		background-color: inherit; // Read from the

		.sapUiBlockCellContent {
			color: inherit;
		}
	}
}

//Define a loop and go trough 11 color sets and for each set apply 4 shades
.loop-cell-colors(@i: 1) when (@i =< 11) {
	.generateCellColorSets(@i, "A");
	.generateCellColorSets(@i, "B");
	.generateCellColorSets(@i, "C");
	.generateCellColorSets(@i, "D");

	.loop-cell-colors(@i + 1); // Execute next loop iteration
}

//Execute Loop through color sets
.loop-cell-colors(1);

/* ============ Background type: Light ============== */
.sapUiBlockLayoutBackgroundLight {
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3 {
		.setCellsColorDoubles(darken(@sapUiBaseColor, 10), @sapUiBaseColor);
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1Inverted,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3Inverted {
		.setCellsColorDoubles(@sapUiBaseColor, darken(@sapUiBaseColor, 10));
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
		.setCellsColorDoubles(darken(@sapUiBaseColor, 7), darken(@sapUiBaseColor, 14));
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2Inverted,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4Inverted {
		.setCellsColorDoubles(darken(@sapUiBaseColor, 14), darken(@sapUiBaseColor, 7));
	}
}

/* ============ Background type: Mixed ============== */
.sapUiBlockLayoutBackgroundMixed {
	.sapUiBlockLayoutBackgroundLight; // Use the same rules as in sapUiBlockLayoutBackgroundLight

	&.sapUiBlockLayoutSizeL, &.sapUiBlockLayoutSizeXL {
		.sapUiBlockLayoutRow {
			.sapContrast, .sapContrastPlus {
				&.sapUiBlockLayoutCell {
					background-color: darken(@sapUiBaseColor, 12);
				}

				&.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundContrast2 {
					background-color: darken(@sapUiBaseColor, 4);
				}
			}
		}
	}
}

/* ============ Background type: Accent ============== */
.sapUiBlockLayoutBackgroundAccent {
	.sapUiBlockCellContent,
	.sapUiBlockCellTitle,
	.sapUiBlockCellContent .sapMText {
		color: @sapUiContentContrastTextColor;
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1 {
		.setCellsColorDoubles(darken(@sapUiAccent7, 5), darken(@sapUiAccent7, 12)); // Colors A & B
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1Inverted {
		.setCellsColorDoubles(darken(@sapUiAccent7, 12), darken(@sapUiAccent7, 5)); // Colors B & A
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2 {
		.setCellsColorDoubles(darken(@sapUiAccent6, 6), darken(@sapUiAccent6, 12)); // Colors C & D
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2Inverted {
		.setCellsColorDoubles(darken(@sapUiAccent6, 12), darken(@sapUiAccent6, 6)); // Colors D & C
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3 {
		.setCellsColorDoubles(darken(@sapUiAccent5, 8), darken(@sapUiAccent5, 16)); // Colors E & F
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3Inverted {
		.setCellsColorDoubles(darken(@sapUiAccent5, 16), darken(@sapUiAccent5, 8)); // Colors F & E
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
		.setCellsColorDoubles(darken(@sapUiGroupContentBackground, 2), darken(@sapUiGroupContentBackground, 8)); // Colors G & H
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4Inverted {
		.setCellsColorDoubles(darken(@sapUiGroupContentBackground, 8), darken(@sapUiGroupContentBackground, 2)); // Colors H & G
	}

	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3,
	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray1 {
			background-color: darken(@sapUiGroupContentBackground, 8); //color: H
		}

		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray2 {
			background-color: darken(@sapUiGroupContentBackground, 2); //color: G
		}
	}

	.sapUiBlockLayoutBackgroundColorSet4,
	.sapUiBlockLayoutBackgroundColorSet4Inverted,
	.sapUiBlockLayoutBackgroundColorSetGray1,
	.sapUiBlockLayoutBackgroundColorSetGray2 {
		.sapUiBlockCellContent,
		.sapUiBlockCellTitle,
		.sapUiBlockCellContent .sapMText {
			color: @sapUiGroupTitleTextColor;
		}
	}
}


fix(ui): Remove unused clockwise animation css (#20458)

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/beeftornado/sentry.git/'