add new less mixins

add new less mixins

.transition(@d) {
    -webkit-transition-duration: @d;
    transition-duration: @d;
}
.delay(@d) {
    -webkit-transition-delay: @d;
    transition-delay: @d;
}
.transform(@t) {
    -webkit-transform: @t;
    transform: @t;
}
.transform-origin(@to) {
    -webkit-transform-origin: @to;
    transform-origin: @to;
}
.translate3d(@x:0, @y:0, @z:0) {
    -webkit-transform: translate3d(@x,@y,@z);
    transform: translate3d(@x,@y,@z);
}
.animation(@a) {
    -webkit-animation: @a;
    animation: @a;
}
.scrollable(){
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.flexbox() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flexbox-inline() {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.flex-wrap(@fw) when (@fw = nowrap) {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex-wrap(@fw) when (@fw = wrap) {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap(@fw) when not (@fw = wrap) and not (@fw = nowrap) {
    -webkit-flex-wrap: @fw;
    -ms-flex-wrap: @fw;
    flex-wrap: @fw;
}
.flex-shrink(@fs) {
    -webkit-flex-shrink: @fs;
    -ms-flex: 0 @fs auto;
    flex-shrink: @fs;
}
.justify-content(@jc) when (@jc = flex-start) {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.justify-content(@jc) when (@jc = flex-end) {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content(@jc) when (@jc = space-between) {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.justify-content(@jc) when not (@jc = flex-start) and not (@jc = flex-end) and not (@jc = space-between) {
    -webkit-box-pack: @jc;
    -ms-flex-pack: @jc;
    -webkit-justify-content: @jc;
    justify-content: @jc;
}
.align-items(@ai) when (@ai = flex-start) {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items(@ai) when (@ai = flex-end) {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items(@ai) when not (@ai = flex-start) and not (@ai = flex-end) {
    -webkit-box-align: @ai;
    -ms-flex-align: @ai;
    -webkit-align-items: @ai;
    align-items: @ai;
}
.align-content(@ai) {
    -ms-flex-line-pack: @ai;
    -webkit-align-content: @ai;
    align-content: @ai;
}
.align-self(@as) {
    -ms-flex-item-align: @as;
    -webkit-align-self: @as;
    align-self: @as;
}
.clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}
.hairline(@position, @color) when (@position = top) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(50% 0%);
        html.pixel-ratio-2 & {
            .transform(scaleY(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleY(0.33));
        }
    }
}
.hairline(@position, @color) when (@position = left) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(0% 50%);
        html.pixel-ratio-2 & {
            .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleX(0.33));
        }
    }
}
.hairline(@position, @color) when (@position = bottom) {
    &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: auto;
        top: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(50% 100%);
        html.pixel-ratio-2 & {
            .transform(scaleY(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleY(0.33));
        }
    }
}
.hairline(@position, @color) when (@position = right) {
    &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        left: auto;
        bottom: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(100% 50%);
        html.pixel-ratio-2 & {
            .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleX(0.33));
        }
    }
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
    &:after {
        display: none;
    }
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
    &:before {
        display: none;
    }
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
    &:after {
        background-color: @color;
    }
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
    &:before {
        background-color: @color;
    }
}

// Encoded SVG Background
.encoded-svg-background(@svg) {
    @url: `encodeURIComponent(@{svg})`;
    background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

// Backdrop Blur
.backdrop-blur(@blur) {
    -webkit-backdrop-filter: blur(@blur);
    backdrop-filter: blur(@blur);
}

// Preserve3D
.preserve3d() {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

// No Scrollbar
.no-scrollbar() {
    &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        opacity: 0 !important;
    }
}
// Bars Input
.bars-input() {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    display: block;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border-radius: 5px;
    font-family: inherit;
    color:#000;
    font-size: 14px;
    font-weight: normal;
    padding: 0 8px;
    background-color: #fff;
}
.no-hairlines() {
    &.no-hairlines, &.no-hairlines ul, &.no-hairlines .content-block-inner {
        .hairline-remove(top);
        .hairline-remove(bottom);
    }
}
.no-hairlines-between() {
    &.no-hairlines-between {
        .item-inner, .list-button, .item-divider, .list-group-title, .list-group-title {
            .hairline-remove(bottom);
        }
    }
}

error: pathspec 'src/libs/layout/_mixins.less' did not match any file(s) known to git


fix Safari text flicking

fix Safari text flicking

/**
 *    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/>.
 */

.js-accordion {
  display: flex;
  flex-direction: column;
  // turn gpu acceleration on in Safari for slideup/down.
  // Firefox animates faster without forcing 3d translate.
  // Chrome doesn't care
  // Applying translateZ(0) onto &__item will cause too many layers in Safari.
  transform: translateZ(0);
  -moz-transform: none;
  -webkit-font-smoothing: antialiased; // fixes font flickering in Safari while animating

  &__item-body {
    // display: none; // slideDown is called on this element
    // max-height: 0px;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
  }
}

/**
 *    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/>.
 */

.js-accordion {
  display: flex;
  flex-direction: column;
  // turn gpu acceleration on in Safari for slideup/down.
  // Firefox animates faster without forcing 3d translate.
  // Chrome doesn't care
  // Applying translateZ(0) onto &__item will cause too many layers in Safari.
  transform: translateZ(0);
  -moz-transform: none;

  &__item-body {
    // display: none; // slideDown is called on this element
    // max-height: 0px;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
  }
}


Add flex wrap vendor mixin

Add flex wrap vendor mixin

fatal: unable to access 'https://github.com/sonatra/sonatra-theme-gluon.git/': The requested URL returned error: 403


Added CSS for article images.

Added CSS for article images.

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/hobarrera/www.git/'


#66 Style page sections in send donation page

@import "../colors/colors";
@import "../layout/responsive";
@import "../layout/mixins";

p{
  line-height:25px;
}
.donate-form-title {
  .title-strap{
    color:@darker-grey;
    padding: 0;
    margin: 0px;
    line-height: normal;
  }
}

 .donate-heading {
    color: @link-primary;
    .font-size(15);
    margin-bottom: 0px;
    font-weight: bold;
    padding-top:10px;
  }

.donate-form-content {

  .form-group {
    #id_is_indian{
      color:@darker-grey;
      padding: 0;
      line-height: normal;
    }
   input {

   }
  }
  .btn {
    .font-size(16);
    border-radius: 0;
    background: @text-color-footer;
    color: @bg-light;
    padding:10px 50px;
    font-weight: 500;
    &:hover {
      background: @link-primary;
    }
  }
  .notify-info {
    line-height: 22px;
    color: @text-color-footer;
    .font-size(12);
  }
  .payment-powered-by{
    p{
      margin-bottom: 0;
    }
    img{
      height: 21px;
      opacity: 0.4;
    }
  }
}

.donate-form-section {
  padding:0px;
  margin-top: 20px;
  border-top: @grey 1px solid;

  .special-bullets {
    li:before {
      margin-top: 0;
    }

    li {
      margin-bottom: 10px;
    }
    .account-details{
      margin-left: 40px;
    }
  }
  .donate-heading {
    a{
      color: @link-primary
    }
  }
}

error: pathspec 'core/static/css/v2/pages/donate_form.less' did not match any file(s) known to git


fix(v4skin): fixed the margin of inline table help blocks

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/artemeon/core.git/'


global overriding for bootstrap elements

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/Digipalvelutehdas/APIKA.git/'


Add start of CSS

Add start of CSS

@charset "UTF-8";

@import "lib/lesshat.less";

@import "lib/breakpoints.less";
@import "lib/colors.less";
@import "lib/fonts.less";

#monthwidget {

    caption {
        background-color: mix(@ui09, @page-background, 95%);
        color: #fff;

        a {
            color:#fff;
        }
    }

    td, th {
        text-align:center;
        text-transform:uppercase;
    }

}

h4 {
    background-color: mix(@ui09, @page-background, 95%);
    color: #fff;

    a {
        color:#fff;
    }
}

error: pathspec 'www/templates/default/html/less/events.less' did not match any file(s) known to git


SW-11280 - Fixed product navigation scroll issue on tablet

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/simkli/shopware.git/'


add min-height to compatibility.less

add min-height to compatibility.less

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/Julienedies/est.git/'


[fix] reconcile style difference with 2.2 branch

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/anthonyfuentes/hubzero-cms.git/'


devilry_theme3: added some simple styles for table rendering.

.devilry-qualifiesforexam-cellbase {
  border-top: 1px solid #dddddd;
  padding-left: 8px;
  text-align: center;
}

.devilry-qualifiesforexam-table {
  .devilry-qualifiesforexam-cellbase;
  border-collapse: collapse;
  width: 100%;

  tr:nth-child(even) {
    background-color: #eeeeee;
  }

  th {
    .devilry-qualifiesforexam-cellbase;
  }

  tr:hover {
    // Only change color on table data, not headers
    td {
      background-color: #dddddd;
    }
  }
}

.devilry-qualifiesforexam-cell-studentinfo {
  .devilry-qualifiesforexam-cellbase;
  text-align: left;
}

.devilry-qualifiesforexam-cell-qualify {
  .devilry-qualifiesforexam-cellbase;
  text-align: center;
}

.devilry-qualifiesforexam-cell-assignmentinfo {
  .devilry-qualifiesforexam-cellbase;
  text-align: center;
}

error: pathspec 'devilry/devilry_theme3/staticsources/devilry_theme3/styles/cradmin_theme_devilry_mainpages/views/devilry_qualifiesforexam/qualifies_table.less' did not match any file(s) known to git


updated

updated

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/ICJIA/icjia-public-website.git/'


corrected .yellow.card css

corrected .yellow.card css

 /*
 * # Semantic - Item
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'view';
@element : 'card';

@import '../../theme.config';

/*******************************
            Standard
*******************************/

/*--------------
      Cards
---------------*/

.ui.cards {
  margin: @groupCardsMargin;
}

.ui.cards > .card {
  display: @groupDisplay;
  margin: @groupCardMargin;
  float: @groupFloat;
}

.ui.cards:first-child,
.ui.card:first-child {
  margin-top: 0em;
}
.ui.cards:last-child,
.ui.card:last-child {
  margin-bottom: 0em;
}

/* Clearing */
.ui.cards:after,
.ui.card:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

/*--------------
      Card
---------------*/

.ui.cards > .card,
.ui.card {
  max-width: 100%;
  position: relative;
  display: @display;

  width: @width;
  min-height: @minHeight;
  background: @background;
  padding: @padding;

  border: @border;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  transition: @transition;
  z-index: @zIndex;
}
.ui.card {
  margin: @margin;
}

.ui.cards > .card a,
.ui.card a {
  cursor: pointer;
}

/*--------------
  Rounded Edges
---------------*/

.ui.cards > .card > :first-child,
.ui.card > :first-child {
  border-radius: @borderRadius @borderRadius 0em 0em !important;
}

.ui.cards > .card > :last-child,
.ui.card > :last-child {
  border-radius: 0em 0em @borderRadius @borderRadius !important;
}

/*--------------
     Images
---------------*/

.ui.cards > .card > .image,
.ui.card > .image {
  display: block;
  position: relative;
  padding: @imagePadding;
  background: @imageBackground;
}
.ui.cards > .card > .image > img,
.ui.card > .image > img,
.ui.card > .content  .image   {
  display: block;
  width: 100%;
  height: auto;
  border-radius: @imageBorderRadius;
  border: @imageBorder;
}

.ui.cards > .card > .image:only-child > img,
.ui.card > .image:only-child > img {
  border-radius: @borderRadius;
}

/*--------------
     Content
---------------*/

.ui.cards > .card > .content,
.ui.card > .content {

}
.ui.cards > .card > .content,
.ui.card > .content {
  background: @contentBackground;
  margin: @contentMargin;
  padding: @contentPadding;
  box-shadow: @contentBoxShadow;
  font-size: @contentFontSize;
  border: @contentBorder;
  border-radius: @contentBorderRadius;
}

.ui.cards > .card > .content:after,
.ui.card > .content:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
  display: block;
  margin: @headerMargin;
  font-family: @headerFont;
  color: @headerColor;
}

/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
  font-weight: @headerFontWeight;
  font-size: @headerFontSize;
  margin-top: @headerLineHeightOffset;
  line-height: @headerLineHeight;
}

.ui.cards > .card > .content > .meta + .description,
.ui.cards > .card > .content > .header + .description,
.ui.card > .content > .meta + .description,
.ui.card > .content > .header + .description  {
  margin-top: @descriptionDistance;
}

/*--------------
     Floated
---------------*/

.ui.cards > .card  [class*="left floated"],
.ui.card [class*="left floated"] {
  float: left;
}
.ui.cards > .card [class*="right floated"],
.ui.card [class*="right floated"] {
  float: right;
}

/*--------------
  Content Image
---------------*/

.ui.cards > .card .content img,
.ui.card .content img {
  display: inline-block;
  vertical-align: @contentImageVerticalAlign;
  width: @contentImageWidth;
}
.ui.cards > .card img.avatar,
.ui.cards > .card .avatar img,
.ui.card img.avatar,
.ui.card .avatar img {
  width: @avatarSize;
  height: @avatarSize;
  border-radius: @avatarBorderRadius;
}

/*--------------
   Description
---------------*/

.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
  clear: both;
  color: @descriptionColor;
}

/*--------------
    Paragraph
---------------*/

.ui.cards > .card > .content p,
.ui.card > .content p {
  margin: 0em 0em @paragraphDistance;
}
.ui.cards > .card > .content p:last-child,
.ui.card > .content p:last-child {
  margin-bottom: 0em;
}

/*--------------
      Meta
---------------*/

.ui.cards > .card .meta,
.ui.card .meta {
  font-size: @metaFontSize;
  color: @metaColor;
}
.ui.cards > .card .meta *,
.ui.card .meta * {
  margin-right: @metaSpacing;
}
.ui.cards > .card .meta :last-child,
.ui.card .meta :last-child {
  margin-right: 0em;
}

.ui.cards > .card .meta [class*="right floated"],
.ui.card .meta [class*="right floated"] {
  margin-right: 0em;
  margin-left: @metaSpacing;
}

/*--------------
      Links
---------------*/

/* Generic */
.ui.cards > .card > .content a:not(.ui),
.ui.card > .content a:not(.ui) {
  color: @contentLinkColor;
  transition: @contentLinkTransition;
}
.ui.cards > .card > .content a:not(.ui):hover,
.ui.card > .content a:not(.ui):hover {
  color: @contentLinkHoverColor;
}

/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
  color: @headerLinkColor;
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
  color: @headerLinkHoverColor;
}

/* Meta */
.ui.cards > .card .meta > a:not(.ui),
.ui.card .meta > a:not(.ui) {
  color: @metaLinkColor;
}
.ui.cards > .card .meta > a:not(.ui):hover,
.ui.card .meta > a:not(.ui):hover {
  color: @metaLinkHoverColor;
}

/*--------------
     Buttons
---------------*/

.ui.cards > .card > .buttons:last-child,
.ui.card > .buttons:last-child,
.ui.cards > .card > .button:last-child,
.ui.card > .button:last-child {
  margin: @buttonMargin;
  width: @buttonWidth;
}

/*--------------
     Labels
---------------*/

/*-----Star----- */

/* Icon */
.ui.cards > .card > .content .star.icon,
.ui.card > .content .star.icon {
  cursor: pointer;
  opacity: @actionOpacity;
  transition: @actionTransition;
}
.ui.cards > .card > .content .star.icon:hover,
.ui.card > .content .star.icon:hover {
  opacity: @actionHoverOpacity;
  color: @starColor;
}
.ui.cards > .card > .content .active.star.icon,
.ui.card > .content .active.star.icon {
  color: @starActiveColor;
}

/*-----Like----- */

/* Icon */
.ui.cards > .card > .content .like.icon,
.ui.card > .content .like.icon {
  cursor: pointer;
  opacity: @actionOpacity;
  transition: @actionTransition;
}
.ui.cards > .card > .content .like.icon:hover,
.ui.card > .content .like.icon:hover {
  opacity: @actionHoverOpacity;
  color: @likeColor;
}
.ui.cards > .card > .content .active.like.icon,
.ui.card > .content .active.like.icon {
  color: @likeActiveColor;
}

/*----------------
  Extra Content
-----------------*/

.ui.cards > .card > .extra,
.ui.card > .extra {
  max-width: 100%;
  min-height: 0em !important;
  position: @extraPosition;
  background: @extraBackground;
  width: @extraWidth;
  margin: @extraMargin;
  padding: @extraPadding;
  top: @extraTop;
  left: @extraLeft;
  color: @extraColor;
  box-shadow: @extraBoxShadow;
  transition: @extraTransition;
  border-top: @extraDivider;
}
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
  color: @extraLinkColor;
}
.ui.cards > .card > .extra a:not(.ui):hover,
.ui.card > .extra a:not(.ui):hover {
  color: @extraLinkHoverColor;
}

/*******************************
           Variations
*******************************/
/*-------------------
        Fluid
--------------------*/

.ui.fluid.card {
  width: 100%;
  max-width: 9999px;
}

/*-------------------
        Link
--------------------*/

.ui.cards a.card:hover,
.ui.link.cards .card:hover,
a.ui.card:hover,
.ui.link.card:hover {
  cursor: pointer;
  z-index: @linkHoverZIndex;
  background: @linkHoverBackground;
  border: @linkHoverBorder;
  box-shadow: @linkHoverBoxShadow;
}

/*--------------
   Card Count
---------------*/

.ui.one.cards {
  margin-left: @oneCardOffset;
  margin-right: @oneCardOffset;
}
.ui.one.cards > .card {
  width: @oneCard;
}

.ui.two.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.two.cards > .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.two.cards > .card:nth-child(2n+1) {
  clear: left;
}

.ui.three.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.three.cards > .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.three.cards > .card:nth-child(3n+1) {
  clear: left;
}

.ui.four.cards {
  margin-left: @fourCardOffset;
  margin-right: @fourCardOffset;
}
.ui.four.cards > .card {
  width: @fourCard;
  margin-left: @fourCardSpacing;
  margin-right: @fourCardSpacing;
}
.ui.four.cards > .card:nth-child(4n+1) {
  clear: left;
}

.ui.five.cards {
  margin-left: @fiveCardOffset;
  margin-right: @fiveCardOffset;
}
.ui.five.cards > .card {
  width: @fiveCard;
  margin-left: @fiveCardSpacing;
  margin-right: @fiveCardSpacing;
}
.ui.five.cards > .card:nth-child(5n+1) {
  clear: left;
}

.ui.six.cards {
  margin-left: @sixCardOffset;
  margin-right: @sixCardOffset;
}
.ui.six.cards > .card {
  width: @sixCard;
  margin-left: @sixCardSpacing;
  margin-right: @sixCardSpacing;
}
.ui.six.cards > .card:nth-child(6n+1) {
  clear: left;
}

.ui.seven.cards {
  margin-left: @sevenCardOffset;
  margin-right: @sevenCardOffset;
}
.ui.seven.cards > .card {
  width: @sevenCard;
  margin-left: @sevenCardSpacing;
  margin-right: @sevenCardSpacing;
}
.ui.seven.cards > .card:nth-child(7n+1) {
  clear: left;
}

.ui.eight.cards {
  margin-left: @eightCardOffset;
  margin-right: @eightCardOffset;
}
.ui.eight.cards > .card {
  width: @eightCard;
  margin-left: @eightCardSpacing;
  margin-right: @eightCardSpacing;
  font-size: 11px;
}
.ui.eight.cards > .card:nth-child(8n+1) {
  clear: left;
}

.ui.nine.cards {
  margin-left: @nineCardOffset;
  margin-right: @nineCardOffset;
}
.ui.nine.cards > .card {
  width: @nineCard;
  margin-left: @nineCardSpacing;
  margin-right: @nineCardSpacing;
  font-size: 10px;
}
.ui.nine.cards > .card:nth-child(9n+1) {
  clear: left;
}

.ui.ten.cards {
  margin-left: @tenCardOffset;
  margin-right: @tenCardOffset;
}
.ui.ten.cards > .card {
  width: @tenCard;
  margin-left: @tenCardSpacing;
  margin-right: @tenCardSpacing;
}
.ui.ten.cards > .card:nth-child(10n+1) {
  clear: left;
}

/*-------------------
      Doubling
--------------------*/

/* Mobily Only */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.two.doubling.cards {
    margin-left: @oneCardOffset;
    margin-right: @oneCardOffset;
  }
  .ui.two.doubling.cards .card {
    width: @oneCard;
    margin-left: @oneCardSpacing;
    margin-right: @oneCardSpacing;
  }
  .ui.three.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.three.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.four.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.four.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.five.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.five.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.six.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.six.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.seven.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.seven.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.eight.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.nine.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.nine.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.ten.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.ten.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
}

/* Tablet Only */
@media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) {
  .ui.two.doubling.cards {
    margin-left: @oneCardOffset;
    margin-right: @oneCardOffset;
  }
  .ui.two.doubling.cards .card {
    width: @oneCard;
    margin-left: @oneCardSpacing;
    margin-right: @oneCardSpacing;
  }
  .ui.three.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.three.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.four.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.four.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.five.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.five.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.six.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.six.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.eight.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @fourCardOffset;
    margin-right: @fourCardOffset;
  }
  .ui.eight.doubling.cards .card {
    width: @fourCard;
    margin-left: @fourCardSpacing;
    margin-right: @fourCardSpacing;
  }
  .ui.nine.doubling.cards {
    margin-left: @fourCardOffset;
    margin-right: @fourCardOffset;
  }
  .ui.nine.doubling.cards .card {
    width: @fourCard;
    margin-left: @fourCardSpacing;
    margin-right: @fourCardSpacing;
  }
  .ui.ten.doubling.cards {
    margin-left: @fiveCardOffset;
    margin-right: @fiveCardOffset;
  }
  .ui.ten.doubling.cards .card {
    width: @fiveCard;
    margin-left: @fiveCardSpacing;
    margin-right: @fiveCardSpacing;
  }
}

/*-------------------
      Stackable
--------------------*/

@media only screen and (max-width : @largestMobileScreen) {
  .ui.stackable.cards {
    display: block !important;
  }
  .ui.stackable.cards .card:first-child {
    margin-top: 0em !important;
  }
  .ui.stackable.cards > .card {
    display: block !important;
    height: auto !important;
    margin: @stackableRowSpacing @stackableCardSpacing;
    padding: 0 !important;
    width: @stackableMargin !important;
  }
}

/*--------------
      Size
---------------*/

.ui.cards > .card {
  font-size: @medium;
}

.loadUIOverrides();

/*-------------------
       Colors
--------------------*/

@coloredBorderSize: 2px;
.ui.black.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @black;
  border: 1px solid @solidBorderColor;
}
.ui.blue.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @blue;
  border: 1px solid @solidBorderColor;
}
.ui.green.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @green;
  border: 1px solid @solidBorderColor;
}
.ui.orange.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @orange;
  border: 1px solid @solidBorderColor;
}
.ui.pink.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @pink;
  border: 1px solid @solidBorderColor;
}
.ui.purple.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @purple;
  border: 1px solid @solidBorderColor;
}
.ui.red.card:not(.inverted) {
  box-shadow: 0px @shadowDistance 0px 0px @red;
  border: 1px solid @solidBorderColor;
}
.ui.teal.card:not(.inverted) {
  box-shadow: 0px @shadowDistance 0px 0px @teal;
  border: 1px solid @solidBorderColor;
}
.ui.yellow.card:not(.inverted) {
  box-shadow: 0px @shadowDistance 0px 0px @yellow;
  border: 1px solid @solidBorderColor;
}

/*-------------------
   Inverted Colors
--------------------*/

.ui.inverted.card *,
.ui.inverted.black.card * {
  background-color: @black !important;
  color: @white !important;
}
.ui.inverted.card,
.ui.inverted.black card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@black, 20%);
}
.ui.inverted.blue.card * {
  background-color: @blue !important;
  color: @white !important;
}
.ui.inverted.blue.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@blue, 20%);
}
.ui.inverted.green.card * {
  background-color: @green !important;
  color: @white !important;
}
.ui.inverted.green.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@green, 20%);
}
.ui.inverted.orange.card * {
  background-color: @orange !important;
  color: @white !important;
}
.ui.inverted.orange.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@orange, 20%);
}
.ui.inverted.pink.card * {
  background-color: @pink !important;
  color: @white !important;
}
.ui.inverted.pink.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@pink, 20%);
}
.ui.inverted.purple.card * {
  background-color: @purple !important;
  color: @white !important;
}
.ui.inverted.purple.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@purple, 20%);
}
.ui.inverted.red.card * {
  background-color: @red !important;
  color: @white !important;
}
.ui.inverted.red.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@red, 20%);
}
.ui.inverted.teal.card * {
  background-color: @teal !important;
  color: @white !important;
}
.ui.inverted.teal.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@teal, 20%);
}
.ui.inverted.yellow.card * {
 background-color: @yellow !important;
  color: @white !important;
}
.ui.inverted.yellow.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@yellow, 20%);
}

 /*
 * # Semantic - Item
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'view';
@element : 'card';

@import '../../theme.config';

/*******************************
            Standard
*******************************/

/*--------------
      Cards
---------------*/

.ui.cards {
  margin: @groupCardsMargin;
}

.ui.cards > .card {
  display: @groupDisplay;
  margin: @groupCardMargin;
  float: @groupFloat;
}

.ui.cards:first-child,
.ui.card:first-child {
  margin-top: 0em;
}
.ui.cards:last-child,
.ui.card:last-child {
  margin-bottom: 0em;
}

/* Clearing */
.ui.cards:after,
.ui.card:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

/*--------------
      Card
---------------*/

.ui.cards > .card,
.ui.card {
  max-width: 100%;
  position: relative;
  display: @display;

  width: @width;
  min-height: @minHeight;
  background: @background;
  padding: @padding;

  border: @border;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  transition: @transition;
  z-index: @zIndex;
}
.ui.card {
  margin: @margin;
}

.ui.cards > .card a,
.ui.card a {
  cursor: pointer;
}

/*--------------
  Rounded Edges
---------------*/

.ui.cards > .card > :first-child,
.ui.card > :first-child {
  border-radius: @borderRadius @borderRadius 0em 0em !important;
}

.ui.cards > .card > :last-child,
.ui.card > :last-child {
  border-radius: 0em 0em @borderRadius @borderRadius !important;
}

/*--------------
     Images
---------------*/

.ui.cards > .card > .image,
.ui.card > .image {
  display: block;
  position: relative;
  padding: @imagePadding;
  background: @imageBackground;
}
.ui.cards > .card > .image > img,
.ui.card > .image > img,
.ui.card > .content  .image   {
  display: block;
  width: 100%;
  height: auto;
  border-radius: @imageBorderRadius;
  border: @imageBorder;
}

.ui.cards > .card > .image:only-child > img,
.ui.card > .image:only-child > img {
  border-radius: @borderRadius;
}

/*--------------
     Content
---------------*/

.ui.cards > .card > .content,
.ui.card > .content {

}
.ui.cards > .card > .content,
.ui.card > .content {
  background: @contentBackground;
  margin: @contentMargin;
  padding: @contentPadding;
  box-shadow: @contentBoxShadow;
  font-size: @contentFontSize;
  border: @contentBorder;
  border-radius: @contentBorderRadius;
}

.ui.cards > .card > .content:after,
.ui.card > .content:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
  display: block;
  margin: @headerMargin;
  font-family: @headerFont;
  color: @headerColor;
}

/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
  font-weight: @headerFontWeight;
  font-size: @headerFontSize;
  margin-top: @headerLineHeightOffset;
  line-height: @headerLineHeight;
}

.ui.cards > .card > .content > .meta + .description,
.ui.cards > .card > .content > .header + .description,
.ui.card > .content > .meta + .description,
.ui.card > .content > .header + .description  {
  margin-top: @descriptionDistance;
}

/*--------------
     Floated
---------------*/

.ui.cards > .card  [class*="left floated"],
.ui.card [class*="left floated"] {
  float: left;
}
.ui.cards > .card [class*="right floated"],
.ui.card [class*="right floated"] {
  float: right;
}

/*--------------
  Content Image
---------------*/

.ui.cards > .card .content img,
.ui.card .content img {
  display: inline-block;
  vertical-align: @contentImageVerticalAlign;
  width: @contentImageWidth;
}
.ui.cards > .card img.avatar,
.ui.cards > .card .avatar img,
.ui.card img.avatar,
.ui.card .avatar img {
  width: @avatarSize;
  height: @avatarSize;
  border-radius: @avatarBorderRadius;
}

/*--------------
   Description
---------------*/

.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
  clear: both;
  color: @descriptionColor;
}

/*--------------
    Paragraph
---------------*/

.ui.cards > .card > .content p,
.ui.card > .content p {
  margin: 0em 0em @paragraphDistance;
}
.ui.cards > .card > .content p:last-child,
.ui.card > .content p:last-child {
  margin-bottom: 0em;
}

/*--------------
      Meta
---------------*/

.ui.cards > .card .meta,
.ui.card .meta {
  font-size: @metaFontSize;
  color: @metaColor;
}
.ui.cards > .card .meta *,
.ui.card .meta * {
  margin-right: @metaSpacing;
}
.ui.cards > .card .meta :last-child,
.ui.card .meta :last-child {
  margin-right: 0em;
}

.ui.cards > .card .meta [class*="right floated"],
.ui.card .meta [class*="right floated"] {
  margin-right: 0em;
  margin-left: @metaSpacing;
}

/*--------------
      Links
---------------*/

/* Generic */
.ui.cards > .card > .content a:not(.ui),
.ui.card > .content a:not(.ui) {
  color: @contentLinkColor;
  transition: @contentLinkTransition;
}
.ui.cards > .card > .content a:not(.ui):hover,
.ui.card > .content a:not(.ui):hover {
  color: @contentLinkHoverColor;
}

/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
  color: @headerLinkColor;
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
  color: @headerLinkHoverColor;
}

/* Meta */
.ui.cards > .card .meta > a:not(.ui),
.ui.card .meta > a:not(.ui) {
  color: @metaLinkColor;
}
.ui.cards > .card .meta > a:not(.ui):hover,
.ui.card .meta > a:not(.ui):hover {
  color: @metaLinkHoverColor;
}

/*--------------
     Buttons
---------------*/

.ui.cards > .card > .buttons:last-child,
.ui.card > .buttons:last-child,
.ui.cards > .card > .button:last-child,
.ui.card > .button:last-child {
  margin: @buttonMargin;
  width: @buttonWidth;
}

/*--------------
     Labels
---------------*/

/*-----Star----- */

/* Icon */
.ui.cards > .card > .content .star.icon,
.ui.card > .content .star.icon {
  cursor: pointer;
  opacity: @actionOpacity;
  transition: @actionTransition;
}
.ui.cards > .card > .content .star.icon:hover,
.ui.card > .content .star.icon:hover {
  opacity: @actionHoverOpacity;
  color: @starColor;
}
.ui.cards > .card > .content .active.star.icon,
.ui.card > .content .active.star.icon {
  color: @starActiveColor;
}

/*-----Like----- */

/* Icon */
.ui.cards > .card > .content .like.icon,
.ui.card > .content .like.icon {
  cursor: pointer;
  opacity: @actionOpacity;
  transition: @actionTransition;
}
.ui.cards > .card > .content .like.icon:hover,
.ui.card > .content .like.icon:hover {
  opacity: @actionHoverOpacity;
  color: @likeColor;
}
.ui.cards > .card > .content .active.like.icon,
.ui.card > .content .active.like.icon {
  color: @likeActiveColor;
}

/*----------------
  Extra Content
-----------------*/

.ui.cards > .card > .extra,
.ui.card > .extra {
  max-width: 100%;
  min-height: 0em !important;
  position: @extraPosition;
  background: @extraBackground;
  width: @extraWidth;
  margin: @extraMargin;
  padding: @extraPadding;
  top: @extraTop;
  left: @extraLeft;
  color: @extraColor;
  box-shadow: @extraBoxShadow;
  transition: @extraTransition;
  border-top: @extraDivider;
}
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
  color: @extraLinkColor;
}
.ui.cards > .card > .extra a:not(.ui):hover,
.ui.card > .extra a:not(.ui):hover {
  color: @extraLinkHoverColor;
}

/*******************************
           Variations
*******************************/
/*-------------------
        Fluid
--------------------*/

.ui.fluid.card {
  width: 100%;
  max-width: 9999px;
}

/*-------------------
        Link
--------------------*/

.ui.cards a.card:hover,
.ui.link.cards .card:hover,
a.ui.card:hover,
.ui.link.card:hover {
  cursor: pointer;
  z-index: @linkHoverZIndex;
  background: @linkHoverBackground;
  border: @linkHoverBorder;
  box-shadow: @linkHoverBoxShadow;
}

/*--------------
   Card Count
---------------*/

.ui.one.cards {
  margin-left: @oneCardOffset;
  margin-right: @oneCardOffset;
}
.ui.one.cards > .card {
  width: @oneCard;
}

.ui.two.cards {
  margin-left: @twoCardOffset;
  margin-right: @twoCardOffset;
}
.ui.two.cards > .card {
  width: @twoCard;
  margin-left: @twoCardSpacing;
  margin-right: @twoCardSpacing;
}
.ui.two.cards > .card:nth-child(2n+1) {
  clear: left;
}

.ui.three.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.three.cards > .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}
.ui.three.cards > .card:nth-child(3n+1) {
  clear: left;
}

.ui.four.cards {
  margin-left: @fourCardOffset;
  margin-right: @fourCardOffset;
}
.ui.four.cards > .card {
  width: @fourCard;
  margin-left: @fourCardSpacing;
  margin-right: @fourCardSpacing;
}
.ui.four.cards > .card:nth-child(4n+1) {
  clear: left;
}

.ui.five.cards {
  margin-left: @fiveCardOffset;
  margin-right: @fiveCardOffset;
}
.ui.five.cards > .card {
  width: @fiveCard;
  margin-left: @fiveCardSpacing;
  margin-right: @fiveCardSpacing;
}
.ui.five.cards > .card:nth-child(5n+1) {
  clear: left;
}

.ui.six.cards {
  margin-left: @sixCardOffset;
  margin-right: @sixCardOffset;
}
.ui.six.cards > .card {
  width: @sixCard;
  margin-left: @sixCardSpacing;
  margin-right: @sixCardSpacing;
}
.ui.six.cards > .card:nth-child(6n+1) {
  clear: left;
}

.ui.seven.cards {
  margin-left: @sevenCardOffset;
  margin-right: @sevenCardOffset;
}
.ui.seven.cards > .card {
  width: @sevenCard;
  margin-left: @sevenCardSpacing;
  margin-right: @sevenCardSpacing;
}
.ui.seven.cards > .card:nth-child(7n+1) {
  clear: left;
}

.ui.eight.cards {
  margin-left: @eightCardOffset;
  margin-right: @eightCardOffset;
}
.ui.eight.cards > .card {
  width: @eightCard;
  margin-left: @eightCardSpacing;
  margin-right: @eightCardSpacing;
  font-size: 11px;
}
.ui.eight.cards > .card:nth-child(8n+1) {
  clear: left;
}

.ui.nine.cards {
  margin-left: @nineCardOffset;
  margin-right: @nineCardOffset;
}
.ui.nine.cards > .card {
  width: @nineCard;
  margin-left: @nineCardSpacing;
  margin-right: @nineCardSpacing;
  font-size: 10px;
}
.ui.nine.cards > .card:nth-child(9n+1) {
  clear: left;
}

.ui.ten.cards {
  margin-left: @tenCardOffset;
  margin-right: @tenCardOffset;
}
.ui.ten.cards > .card {
  width: @tenCard;
  margin-left: @tenCardSpacing;
  margin-right: @tenCardSpacing;
}
.ui.ten.cards > .card:nth-child(10n+1) {
  clear: left;
}

/*-------------------
      Doubling
--------------------*/

/* Mobily Only */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.two.doubling.cards {
    margin-left: @oneCardOffset;
    margin-right: @oneCardOffset;
  }
  .ui.two.doubling.cards .card {
    width: @oneCard;
    margin-left: @oneCardSpacing;
    margin-right: @oneCardSpacing;
  }
  .ui.three.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.three.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.four.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.four.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.five.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.five.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.six.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.six.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.seven.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.seven.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.eight.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.nine.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.nine.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.ten.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.ten.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
}

/* Tablet Only */
@media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) {
  .ui.two.doubling.cards {
    margin-left: @oneCardOffset;
    margin-right: @oneCardOffset;
  }
  .ui.two.doubling.cards .card {
    width: @oneCard;
    margin-left: @oneCardSpacing;
    margin-right: @oneCardSpacing;
  }
  .ui.three.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.three.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.four.doubling.cards {
    margin-left: @twoCardOffset;
    margin-right: @twoCardOffset;
  }
  .ui.four.doubling.cards .card {
    width: @twoCard;
    margin-left: @twoCardSpacing;
    margin-right: @twoCardSpacing;
  }
  .ui.five.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.five.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.six.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.six.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @threeCardOffset;
    margin-right: @threeCardOffset;
  }
  .ui.eight.doubling.cards .card {
    width: @threeCard;
    margin-left: @threeCardSpacing;
    margin-right: @threeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @fourCardOffset;
    margin-right: @fourCardOffset;
  }
  .ui.eight.doubling.cards .card {
    width: @fourCard;
    margin-left: @fourCardSpacing;
    margin-right: @fourCardSpacing;
  }
  .ui.nine.doubling.cards {
    margin-left: @fourCardOffset;
    margin-right: @fourCardOffset;
  }
  .ui.nine.doubling.cards .card {
    width: @fourCard;
    margin-left: @fourCardSpacing;
    margin-right: @fourCardSpacing;
  }
  .ui.ten.doubling.cards {
    margin-left: @fiveCardOffset;
    margin-right: @fiveCardOffset;
  }
  .ui.ten.doubling.cards .card {
    width: @fiveCard;
    margin-left: @fiveCardSpacing;
    margin-right: @fiveCardSpacing;
  }
}

/*-------------------
      Stackable
--------------------*/

@media only screen and (max-width : @largestMobileScreen) {
  .ui.stackable.cards {
    display: block !important;
  }
  .ui.stackable.cards .card:first-child {
    margin-top: 0em !important;
  }
  .ui.stackable.cards > .card {
    display: block !important;
    height: auto !important;
    margin: @stackableRowSpacing @stackableCardSpacing;
    padding: 0 !important;
    width: @stackableMargin !important;
  }
}

/*--------------
      Size
---------------*/

.ui.cards > .card {
  font-size: @medium;
}

.loadUIOverrides();

/*-------------------
       Colors
--------------------*/

@coloredBorderSize: 2px;
.ui.black.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @black;
  border: 1px solid @solidBorderColor;
}
.ui.blue.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @blue;
  border: 1px solid @solidBorderColor;
}
.ui.green.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @green;
  border: 1px solid @solidBorderColor;
}
.ui.orange.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @orange;
  border: 1px solid @solidBorderColor;
}
.ui.pink.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @pink;
  border: 1px solid @solidBorderColor;
}
.ui.purple.card:not(.inverted) {
    box-shadow: 0px @shadowDistance 0px 0px @purple;
  border: 1px solid @solidBorderColor;
}
.ui.red.card:not(.inverted) {
  box-shadow: 0px @shadowDistance 0px 0px @red;
  border: 1px solid @solidBorderColor;
}
.ui.teal.card:not(.inverted) {
  box-shadow: 0px @shadowDistance 0px 0px @teal;
  border: 1px solid @solidBorderColor;
}
.ui.yellow.card:not(.inverted) {
  border-bottom: @coloredBorderSize solid @yellow;
}

/*-------------------
   Inverted Colors
--------------------*/

.ui.inverted.card *,
.ui.inverted.black.card * {
  background-color: @black !important;
  color: @white !important;
}
.ui.inverted.card,
.ui.inverted.black card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@black, 20%);
}
.ui.inverted.blue.card * {
  background-color: @blue !important;
  color: @white !important;
}
.ui.inverted.blue.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@blue, 20%);
}
.ui.inverted.green.card * {
  background-color: @green !important;
  color: @white !important;
}
.ui.inverted.green.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@green, 20%);
}
.ui.inverted.orange.card * {
  background-color: @orange !important;
  color: @white !important;
}
.ui.inverted.orange.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@orange, 20%);
}
.ui.inverted.pink.card * {
  background-color: @pink !important;
  color: @white !important;
}
.ui.inverted.pink.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@pink, 20%);
}
.ui.inverted.purple.card * {
  background-color: @purple !important;
  color: @white !important;
}
.ui.inverted.purple.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@purple, 20%);
}
.ui.inverted.red.card * {
  background-color: @red !important;
  color: @white !important;
}
.ui.inverted.red.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@red, 20%);
}
.ui.inverted.teal.card * {
  background-color: @teal !important;
  color: @white !important;
}
.ui.inverted.teal.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@teal, 20%);
}
.ui.inverted.yellow.card * {
 background-color: @yellow !important;
  color: @white !important;
}
.ui.inverted.yellow.card {
  box-shadow: 0px @shadowDistance 0px 0px darken(@yellow, 20%);
}


cleanup button

cleanup button

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/aoimedia/uikit.git/'


let text wrap in navbar dropdown items

let text wrap in navbar dropdown items


More less, no less

More less, no less

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/wunderbyte/grunt-spiritual-dox.git/'


Add another case for bug2

Add another case for bug2

@media only screen and (max-width: 640px)
#folderNav+#content, #categoryNav+#content {
  padding-top: 50px;
}

error: pathspec 'src/test/resources/test-suite/bugs/bug2c.less' did not match any file(s) known to git


Wrap name replace

Wrap name replace

fatal: remote error: upload-pack: not our ref fa7e64ed9986d3ac993cd87d33861bee1ecc8d1c
fatal: the remote end hung up unexpectedly


Wip dashbard ui

Wip dashbard ui

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/tempo-project/tempo.git/'


add font family variable to less file

add font family variable to less file

//
// Checkboxes
// --------------------------------------------------

@font-family-icon: 'FontAwesome';

.checkbox-variant(@parent, @color) {
  .@{parent} input[type="checkbox"]:checked + label {
    &::before {
      background-color: @color;
      border-color: @color;
    }
    &::after {
      color: #fff;
    }
  }
}

.checkbox{
  padding-left: 20px;

  label{
    display: inline-block;
    position: relative;
    padding-left: 5px;

    &::before{
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid @input-border;
      border-radius: 3px;
      background-color: #fff;
      .transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
    }

    &::after{
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: @gray;
    }
  }

  input[type="checkbox"]{
    opacity: 0;
    z-index: 1;

    &:focus + label::before{
      .tab-focus();
    }

    &:checked + label::after{
      font-family: @font-family-icon;
      content: @fa-var-check;
    }

    &:disabled + label{
      opacity: 0.65;

      &::before{
        background-color: @gray-lighter;
        cursor: not-allowed;
      }
    }

  }

  &.checkbox-circle label::before{
    border-radius: 50%;
  }

  &.checkbox-single label{
    height: 17px;
  }

  &.checkbox-inline{
    margin-top: 0;
  }
}

.checkbox-variant(checkbox-primary, @brand-primary);
.checkbox-variant(checkbox-danger, @brand-danger);
.checkbox-variant(checkbox-info, @brand-info);
.checkbox-variant(checkbox-warning, @brand-warning);
.checkbox-variant(checkbox-success, @brand-success);

//
// Radios
// --------------------------------------------------

.radio-variant(@parent, @color) {
  .@{parent} input[type="radio"]{
    & + label{
      &::after{
        background-color: @color;
      }
    }
    &:checked + label{
      &::before {
        border-color: @color;
      }
      &::after{
        background-color: @color;
      }
    }
  }
}

.radio{
  padding-left: 20px;

  label{
    display: inline-block;
    position: relative;
    padding-left: 5px;

    &::before{
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid @input-border;
      border-radius: 50%;
      background-color: #fff;
      .transition(border 0.15s ease-in-out);
    }

    &::after{
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: @gray;
      .scale(0, 0);

      .transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
      //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
    }
  }

  input[type="radio"]{
    opacity: 0;
    z-index: 1;

    &:focus + label::before{
      .tab-focus();
    }

    &:checked + label::after{
      .scale(1, 1);
    }

    &:disabled + label{
      opacity: 0.65;

      &::before{
        cursor: not-allowed;
      }
    }

  }

  &.radio-inline{
    margin-top: 0;
  }

  &.radio-single label{
    height: 17px;
  }
}

.radio-variant(radio-primary, @brand-primary);
.radio-variant(radio-danger, @brand-danger);
.radio-variant(radio-info, @brand-info);
.radio-variant(radio-warning, @brand-warning);
.radio-variant(radio-success, @brand-success);

//
// Checkboxes
// --------------------------------------------------

.checkbox-variant(@parent, @color) {
  .@{parent} input[type="checkbox"]:checked + label {
    &::before {
      background-color: @color;
      border-color: @color;
    }
    &::after {
      color: #fff;
    }
  }
}

.checkbox{
  padding-left: 20px;

  label{
    display: inline-block;
    position: relative;
    padding-left: 5px;

    &::before{
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid @input-border;
      border-radius: 3px;
      background-color: #fff;
      .transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
    }

    &::after{
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: @gray;
    }
  }

  input[type="checkbox"]{
    opacity: 0;
    z-index: 1;

    &:focus + label::before{
      .tab-focus();
    }

    &:checked + label::after{
      font-family: 'FontAwesome';
      content: @fa-var-check;
    }

    &:disabled + label{
      opacity: 0.65;

      &::before{
        background-color: @gray-lighter;
        cursor: not-allowed;
      }
    }

  }

  &.checkbox-circle label::before{
    border-radius: 50%;
  }

  &.checkbox-single label{
    height: 17px;
  }

  &.checkbox-inline{
    margin-top: 0;
  }
}

.checkbox-variant(checkbox-primary, @brand-primary);
.checkbox-variant(checkbox-danger, @brand-danger);
.checkbox-variant(checkbox-info, @brand-info);
.checkbox-variant(checkbox-warning, @brand-warning);
.checkbox-variant(checkbox-success, @brand-success);

//
// Radios
// --------------------------------------------------

.radio-variant(@parent, @color) {
  .@{parent} input[type="radio"]{
    & + label{
      &::after{
        background-color: @color;
      }
    }
    &:checked + label{
      &::before {
        border-color: @color;
      }
      &::after{
        background-color: @color;
      }
    }
  }
}

.radio{
  padding-left: 20px;

  label{
    display: inline-block;
    position: relative;
    padding-left: 5px;

    &::before{
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid @input-border;
      border-radius: 50%;
      background-color: #fff;
      .transition(border 0.15s ease-in-out);
    }

    &::after{
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: @gray;
      .scale(0, 0);

      .transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
      //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
    }
  }

  input[type="radio"]{
    opacity: 0;
    z-index: 1;

    &:focus + label::before{
      .tab-focus();
    }

    &:checked + label::after{
      .scale(1, 1);
    }

    &:disabled + label{
      opacity: 0.65;

      &::before{
        cursor: not-allowed;
      }
    }

  }

  &.radio-inline{
    margin-top: 0;
  }

  &.radio-single label{
    height: 17px;
  }
}

.radio-variant(radio-primary, @brand-primary);
.radio-variant(radio-danger, @brand-danger);
.radio-variant(radio-info, @brand-info);
.radio-variant(radio-warning, @brand-warning);
.radio-variant(radio-success, @brand-success);


JENKINS-33930 focus color for delete

JENKINS-33930 focus color for delete

style only.

/*
 * Tab bar specific rules.
 */

.jenkins-config-widgets {
  position: relative;
  border:1px solid @solid-border;
  border-bottom:none;
  background:@light-backgrond;
  min-height:2.5em;
  .border-radius-top(@radius);
  z-index:5;

  nav:before, nav:after {
    display: none;
  }

  :hover .noTabs{
    color:#bbb;
  }
  .noTabs:hover,
  .showTabs:hover {
    opacity: 0.8;
    background:#bbb;
    color:@light-backgrond;
    text-shadow:none
  }

  @find-container-width: 200px;
  .find-container {
    margin:0;
    display:none;
  }

  .showTabs,
  .noTabs {
    position: absolute;
    border-radius: @radius;
    right: 5px;
    top: 5px;
    cursor: pointer;
    color: @solid-border;
    text-shadow: @brightest 0 1px 2px;
    font-size: 0.85em;
    padding: 3px 7px;
    display:none;
  }

  .form-config.tabBarFrame {
    position: relative;
    border-bottom: solid 1px @solid-border;

    .config-section-activators {
      margin: 0;
      padding: 5px 0 0;
      display: block;
      list-style: none;
    }

    .tabBar {
      .tab {
        border: solid 1px transparent;
        color: #999;
        padding: 7px 10px;
        .border-radius-top(5px);
        cursor: pointer;
        margin: 1px 0 0 10px;
        text-decoration: none;
      }
      .tab:hover {
        background:#bbb; color:@brightest;
      }
      .tab.active {
        background: @bright;
        color: #000;
        font-weight: bold;
        z-index: 2;
        border:1px solid @solid-border;
        border-bottom:1px solid @bright
      }
    }

  }

  .form-config.tabBarFrame.mouse-over {
    .noTabs {
      display: inline;
    }
    .noTabs:hover {
      opacity: 0.8;
    }
  }

}
#jenkins{
  .jenkins-config {
    border:1px solid @solid-border;
    padding:10px;
    border-top:none;
    background:@bright;
    .border-radius-bottom(@radius);

    .showTabs{
      display:block;
      text-align:right;

    }

    table.config-table {
      .section-header-row {
        background: none;
        border-color: transparent
      }
      .section-header {
        margin-top: 10px;
      }
    }

    table {
      border-collapse:collapse;

      .bottom-sticker-edge {
        display:none;
      }
      .bottom-sticker-inner{
        padding: 20px 10px 25px 20px;
        border-top-right-radius: 10px;
        border: 1px solid @line-green;
        background: @pale-green-trans;
      }

      .bottom-sticker,
      #bottom-sticker{
        width: auto;
        margin-left: -10px;
        overflow: hidden;
        padding-bottom: 10px;
        margin: 30px 30px -25px -15px;
        z-index:9;

        .cover{
          position:absolute;
          top:0;
          bottom:0;
          left:0;
          right:0;
          z-index:2;
        }
        .yui-button.primary{
          button{
            background:@middle-blue;
            border-color:@dark-blue;
          }
        }
        .yui-button.yui-button-disabled{
          button{
            background:@light-backgrond;
            border-color:@solid-border;
            color:@solid-border;
          }
        }

        .yui-button{
          margin-right:10px;

          button{
            padding:5px 20px;
            background:@pale-blue;
            border-color:@line-blue;
          }
        }
      }

      .section-header{
        margin: 30px 0px 5px -10px;
        font-size: 1.5em;
        padding: 10px 15px;
        border: none;
        border-top: 1px solid #ddd;
      }
      .attach-previous {
        margin-left:3px;
      }
      .validation-error-area td{
        padding:0 5px;
      }

      .stapler-class-bag td {
        padding: 0px;
      }

      td.setting-name{
        line-height:29px;
      }
      td.setting-main{
        input[type='radio'],
        input[type='checkbox']{
          position:relative;
          top:.33em;
        }
      }
      td{
        padding:5px;

        textarea.setting-input {
          display:block;
        }

        .yui-button button,
        input[type='email'].setting-input,
        input[type='password'].setting-input,
        input[type='text'].setting-input{
          height:@input-line-height;
          line-height:@input-line-height;
          padding:0 5px;
          .border-radius(@radius);
        }
        .yui-button button{
          padding:0 10px;
          box-sizing:content-box;
        }

        .yui-button button.hetero-list-add{
          padding-right:25px;
        }

        select:not([multiple]){
          height:@input-line-height;
          line-height:@input-line-height;
        }
        select{
          border-radius:0;
          background:@brightest;
        }
        .help{
          background:@medium-translucent;
        }
        p,
        .help,
        .setting-description {
          font-size:1em;
          line-height:1.4;
        }
      }
      td[colspan="4"]:empty{
        display:none
      }
      td.setting-help{
        vertical-align:top;
        padding:5px 10px 5px 5px
      }
      td.setting-leftspace:after {
        content:' ';
        display:block;
        width:13px;
        height:1px;
      }
      .repeated-chunk,
      tr[nameref^="rowSetStart"],
      tr[nameref^="cb"],
      tr[nameref^="radio-block"] {
        background:@shade-hint;
        border-left:5px solid @shade
      }
      .hetero-list-container,
      .repeated-container,
      tr.optional-block-start,
      tr.radio-block-start {
        border-left:5px solid @shade;
        background:none;
      }
      tr.help-area {
        background:none !important;

        td {
          padding:0 5px
        }
      }
      .CodeMirror {
        background:@brightest;

      }
      .CodeMirror-scroll {
          border:1px solid @solid-border !important;
      }
      .repeated-container > .repeated-chunk {padding-top:15px;}
      .repeated-chunk.hover{
        border-color:@line-blue;
        box-shadow:0 2px 10px @shade, inset 0 200px 200px -200px @brightest;
        position:relative;
        z-index:2
      }
      .repeated-chunk.dragging{
        position:static;
      }
      .repeated-chunk{
        border:1px solid @shade;
        margin:2px;
        position:relative;
      }
      .repeatable-delete {
        position:absolute;
        top:-2px;
        right:35px;
        height:18px;
        width:32px;
        .border-radius-bottom(3px);
        overflow:hidden;

        button{
          padding:0;
          margin:0;
          text-indent:999em;
          background-color: @danger;
          color: @light-backgrond;
          border: 1px solid @danger-line;
        }
        button:focus,
        button:hover{
          background-color: @danger-dark;
          border-color:@danger-dark-line;
          color:@brightest;
        }
        button:before{
          content: 'X';
          font-weight: bold;
          text-indent: 0;
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          text-align: center;
          font-size: 12px;
          line-height: 18px;
        }

      }
    }

    span.highlight {
      background-color: #ffff00;
    }
  }
}
#ygddfdiv {
  background:@light-backgrond;
  border:1px solid @line-blue !important;
  opacity:.5;
}

.yui-skin-sam .yuimenu {
  z-index: 9999 !important
}

.yui-skin-sam .yui-button-disabled {
  opacity: .75
}

/*
 * Tab bar specific rules.
 */

.jenkins-config-widgets {
  position: relative;
  border:1px solid @solid-border;
  border-bottom:none;
  background:@light-backgrond;
  min-height:2.5em;
  .border-radius-top(@radius);
  z-index:5;

  nav:before, nav:after {
    display: none;
  }

  :hover .noTabs{
    color:#bbb;
  }
  .noTabs:hover,
  .showTabs:hover {
    opacity: 0.8;
    background:#bbb;
    color:@light-backgrond;
    text-shadow:none
  }

  @find-container-width: 200px;
  .find-container {
    margin:0;
    display:none;
  }

  .showTabs,
  .noTabs {
    position: absolute;
    border-radius: @radius;
    right: 5px;
    top: 5px;
    cursor: pointer;
    color: @solid-border;
    text-shadow: @brightest 0 1px 2px;
    font-size: 0.85em;
    padding: 3px 7px;
    display:none;
  }

  .form-config.tabBarFrame {
    position: relative;
    border-bottom: solid 1px @solid-border;

    .config-section-activators {
      margin: 0;
      padding: 5px 0 0;
      display: block;
      list-style: none;
    }

    .tabBar {
      .tab {
        border: solid 1px transparent;
        color: #999;
        padding: 7px 10px;
        .border-radius-top(5px);
        cursor: pointer;
        margin: 1px 0 0 10px;
        text-decoration: none;
      }
      .tab:hover {
        background:#bbb; color:@brightest;
      }
      .tab.active {
        background: @bright;
        color: #000;
        font-weight: bold;
        z-index: 2;
        border:1px solid @solid-border;
        border-bottom:1px solid @bright
      }
    }

  }

  .form-config.tabBarFrame.mouse-over {
    .noTabs {
      display: inline;
    }
    .noTabs:hover {
      opacity: 0.8;
    }
  }

}
#jenkins{
  .jenkins-config {
    border:1px solid @solid-border;
    padding:10px;
    border-top:none;
    background:@bright;
    .border-radius-bottom(@radius);

    .showTabs{
      display:block;
      text-align:right;

    }

    table.config-table {
      .section-header-row {
        background: none;
        border-color: transparent
      }
      .section-header {
        margin-top: 10px;
      }
    }

    table {
      border-collapse:collapse;

      .bottom-sticker-edge {
        display:none;
      }
      .bottom-sticker-inner{
        padding: 20px 10px 25px 20px;
        border-top-right-radius: 10px;
        border: 1px solid @line-green;
        background: @pale-green-trans;
      }

      .bottom-sticker,
      #bottom-sticker{
        width: auto;
        margin-left: -10px;
        overflow: hidden;
        padding-bottom: 10px;
        margin: 30px 30px -25px -15px;
        z-index:9;

        .cover{
          position:absolute;
          top:0;
          bottom:0;
          left:0;
          right:0;
          z-index:2;
        }
        .yui-button.primary{
          button{
            background:@middle-blue;
            border-color:@dark-blue;
          }
        }
        .yui-button.yui-button-disabled{
          button{
            background:@light-backgrond;
            border-color:@solid-border;
            color:@solid-border;
          }
        }

        .yui-button{
          margin-right:10px;

          button{
            padding:5px 20px;
            background:@pale-blue;
            border-color:@line-blue;
          }
        }
      }

      .section-header{
        margin: 30px 0px 5px -10px;
        font-size: 1.5em;
        padding: 10px 15px;
        border: none;
        border-top: 1px solid #ddd;
      }
      .attach-previous {
        margin-left:3px;
      }
      .validation-error-area td{
        padding:0 5px;
      }

      .stapler-class-bag td {
        padding: 0px;
      }

      td.setting-name{
        line-height:29px;
      }
      td.setting-main{
        input[type='radio'],
        input[type='checkbox']{
          position:relative;
          top:.33em;
        }
      }
      td{
        padding:5px;

        textarea.setting-input {
          display:block;
        }

        .yui-button button,
        input[type='email'].setting-input,
        input[type='password'].setting-input,
        input[type='text'].setting-input{
          height:@input-line-height;
          line-height:@input-line-height;
          padding:0 5px;
          .border-radius(@radius);
        }
        .yui-button button{
          padding:0 10px;
          box-sizing:content-box;
        }

        .yui-button button.hetero-list-add{
          padding-right:25px;
        }

        select:not([multiple]){
          height:@input-line-height;
          line-height:@input-line-height;
        }
        select{
          border-radius:0;
          background:@brightest;
        }
        .help{
          background:@medium-translucent;
        }
        p,
        .help,
        .setting-description {
          font-size:1em;
          line-height:1.4;
        }
      }
      td[colspan="4"]:empty{
        display:none
      }
      td.setting-help{
        vertical-align:top;
        padding:5px 10px 5px 5px
      }
      td.setting-leftspace:after {
        content:' ';
        display:block;
        width:13px;
        height:1px;
      }
      .repeated-chunk,
      tr[nameref^="rowSetStart"],
      tr[nameref^="cb"],
      tr[nameref^="radio-block"] {
        background:@shade-hint;
        border-left:5px solid @shade
      }
      .hetero-list-container,
      .repeated-container,
      tr.optional-block-start,
      tr.radio-block-start {
        border-left:5px solid @shade;
        background:none;
      }
      tr.help-area {
        background:none !important;

        td {
          padding:0 5px
        }
      }
      .CodeMirror {
        background:@brightest;

      }
      .CodeMirror-scroll {
          border:1px solid @solid-border !important;
      }
      .repeated-container > .repeated-chunk {padding-top:15px;}
      .repeated-chunk.hover{
        border-color:@line-blue;
        box-shadow:0 2px 10px @shade, inset 0 200px 200px -200px @brightest;
        position:relative;
        z-index:2
      }
      .repeated-chunk.dragging{
        position:static;
      }
      .repeated-chunk{
        border:1px solid @shade;
        margin:2px;
        position:relative;
      }
      .repeatable-delete {
        position:absolute;
        top:-2px;
        right:35px;
        height:18px;
        width:32px;
        .border-radius-bottom(3px);
        overflow:hidden;

        button{
          padding:0;
          margin:0;
          text-indent:999em;
          background-color: @danger;
          color: @light-backgrond;
          border: 1px solid @danger-line;
        }
        button:hover{
          background-color: @danger-dark;
          border-color:@danger-dark-line;
        }
        button:before{
          content: 'X';
          font-weight: bold;
          text-indent: 0;
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          text-align: center;
          font-size: 12px;
          line-height: 18px;
        }

      }
    }

    span.highlight {
      background-color: #ffff00;
    }
  }
}
#ygddfdiv {
  background:@light-backgrond;
  border:1px solid @line-blue !important;
  opacity:.5;
}

.yui-skin-sam .yuimenu {
  z-index: 9999 !important
}

.yui-skin-sam .yui-button-disabled {
  opacity: .75
}


CCN-171 clarification via comments

CCN-171 clarification via comments

// typeahead block
.c-typeahead {
  // typeahead results element
  &__results {
    // display results
    .dropdown-menu {
      right: 0;
    }
    // display empty and loading modifier states in a dropdown UI to match typeahead results
    &--empty,
    &--loading {
      &:extend(.dropdown-menu);
      display: block;
      right: 0;
      span {
        &:extend(.dropdown-menu > li > a);
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    // loading modifer state
    &--loading {
      height: 50px;
      & ~ .dropdown-menu {
        display:none !important;
      }
    }
  }
}

// full screen modal with typeahead
.modal--full-screen {
  .modal-body {
    padding: 0;
  }
  .c-typeahead__form {
    padding: @grid-gutter-width @grid-gutter-width (@grid-gutter-width / 2);
  }
  .c-typeahead__results {
    // the dropdown menu provided by uib-typeahead
    // overriding bootstraps' default dropdown menu styles
    .dropdown-menu {
      padding: 0;
      margin: 0;
      position: relative;
      top: 0 !important;
      left: 0 !important;
      width: 100%;
      border-radius: 0;
      box-shadow: none;
      border: none;
      li {
        border-bottom: 1px solid @hr-border;
        a {
          padding-left: @grid-gutter-width;
          padding-right: @grid-gutter-width;
        }
        &.active {
          small {
            color: white;
          }
        }
      }
    }
    // display empty and loading modifier states in a dropdown UI that matches typeahead results
    &--empty,
    &--loading {
      &:extend(.modal--full-screen .c-typeahead__results .dropdown-menu);
      span {
        &:extend(.modal--full-screen .c-typeahead__results .dropdown-menu li a);
      }
    }
  }
}

// typeahead block
.c-typeahead {
  // typeahead results element
  &__results {
    // display results
    .dropdown-menu {
      right: 0;
    }
    // display empty and loading modifier states in a dropdown UI to match typeahead results
    &--empty,
    &--loading {
      &:extend(.dropdown-menu);
      display: block;
      right: 0;
      span {
        &:extend(.dropdown-menu > li > a);
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    // loading modifer state
    &--loading {
      height: 50px;
      & ~ .dropdown-menu {
        display:none !important;
      }
    }
  }
}

// full screen modal with typeahead
.modal--full-screen {
  .modal-body {
    padding: 0;
  }
  .c-typeahead__form {
    padding: @grid-gutter-width @grid-gutter-width (@grid-gutter-width / 2);
  }
  .c-typeahead__results {
    // the dropdown menu provided by uib-typeahead
    .dropdown-menu {
      padding: 0;
      margin: 0;
      position: relative;
      top: 0 !important;
      left: 0 !important;
      width: 100%;
      border-radius: 0;
      box-shadow: none;
      border: none;
      li {
        border-bottom: 1px solid @hr-border;
        a {
          padding-left: @grid-gutter-width;
          padding-right: @grid-gutter-width;
        }
        &.active {
          small {
            color: white;
          }
        }
      }
    }
    // display empty and loading modifier states in a dropdown UI that matches typeahead results
    &--empty,
    &--loading {
      &:extend(.modal--full-screen .c-typeahead__results .dropdown-menu);
      span {
        &:extend(.modal--full-screen .c-typeahead__results .dropdown-menu li a);
      }
    }
  }
}


fix(ui): break long frame titles (#10036)

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/'