Combine rules #2955

Combine rules #2955

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

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

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

@import (multiple) '../../theme.config';

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

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

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

  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;
}

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

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

.ui.cards {
  display: @groupDisplay;
  margin: @groupMargin;
  flex-wrap: wrap;
}

.ui.cards > .card {
  display: @groupCardDisplay;
  margin: @groupCardMargin;
  float: @groupCardFloat;
}

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

/* Consecutive Card Groups Preserve Row Spacing */
.ui.cards ~ .ui.cards {
  margin-top: @consecutiveGroupDistance;
}

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

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

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

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

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

.ui.cards > .card > .image,
.ui.card > .image {
  position: relative;
  display: block;
  flex: 0 0 auto;
  padding: @imagePadding;
  background: @imageBackground;
}
.ui.cards > .card > .image > img,
.ui.card > .image > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.ui.cards > .card > .image:not(.ui) > img,
.ui.card > .image:not(.ui) > img {
  border: @imageBorder;
}

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

.ui.cards > .card > .content,
.ui.card > .content {
  flex-grow: 1;
  border: @contentBorder;
  border-top: @contentDivider;
  background: @contentBackground;
  margin: @contentMargin;
  padding: @contentPadding;
  box-shadow: @contentBoxShadow;
  font-size: @contentFontSize;
  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 Content
-----------------*/

.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;
}

/*--------------
     Aligned
---------------*/

.ui.cards > .card  [class*="left aligned"],
.ui.card [class*="left aligned"] {
  text-align: left;
}
.ui.cards > .card [class*="center aligned"],
.ui.card [class*="center aligned"] {
  text-align: center;
}
.ui.cards > .card [class*="right aligned"],
.ui.card [class*="right aligned"] {
  text-align: 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,
.ui.card > .buttons,
.ui.cards > .card > .button,
.ui.card > .button {
  margin: @buttonMargin;
  width: @buttonWidth;
}

/*--------------
      Dimmer
---------------*/

.ui.cards > .card .dimmer,
.ui.card .dimmer {
  background-color: @dimmerColor;
  z-index: @dimmerZIndex;
}

/*--------------
     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;
  flex-grow: 0;
  border-top: @extraDivider !important;
  position: @extraPosition;
  background: @extraBackground;
  width: @extraWidth;
  margin: @extraMargin;
  padding: @extraPadding;
  top: @extraTop;
  left: @extraLeft;
  color: @extraColor;
  box-shadow: @extraBoxShadow;
  transition: @extraTransition;
}
.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
*******************************/

/*-------------------
       Raised
--------------------*/

.ui.raised.cards > .card,
.ui.raised.card {
  box-shadow: @raisedShadow;
}

/*-------------------
       Centered
--------------------*/

.ui.centered.cards {
  justify-content: center;
}
.ui.centered.card {
  margin-left: auto;
  margin-right: auto;
}

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

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

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

.ui.cards a.card,
.ui.link.cards .card,
a.ui.card,
.ui.link.card {
  transform: none;
}

.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;
  transform: @linkHoverTransform;
}

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

/* Red */
.ui.red.cards > .card,
.ui.cards > .red.card,
.ui.red.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @red,
    @shadowBoxShadow
  ;
}
.ui.red.cards > .card:hover,
.ui.cards > .red.card:hover,
.ui.red.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @redHover,
    @shadowHoverBoxShadow
  ;
}

/* Orange */
.ui.orange.cards > .card,
.ui.cards > .orange.card,
.ui.orange.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @orange,
    @shadowBoxShadow
  ;
}
.ui.orange.cards > .card:hover,
.ui.cards > .orange.card:hover,
.ui.orange.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @orangeHover,
    @shadowHoverBoxShadow
  ;
}

/* Yellow */
.ui.yellow.cards > .card,
.ui.cards > .yellow.card,
.ui.yellow.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @yellow,
    @shadowBoxShadow
  ;
}
.ui.yellow.cards > .card:hover,
.ui.cards > .yellow.card:hover,
.ui.yellow.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @yellowHover,
    @shadowHoverBoxShadow
  ;
}

/* Olive */
.ui.olive.cards > .card,
.ui.cards > .olive.card,
.ui.olive.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @olive,
    @shadowBoxShadow
  ;
}
.ui.olive.cards > .card:hover,
.ui.cards > .olive.card:hover,
.ui.olive.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @oliveHover,
    @shadowHoverBoxShadow
  ;
}

/* Green */
.ui.green.cards > .card,
.ui.cards > .green.card,
.ui.green.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @green,
    @shadowBoxShadow
  ;
}
.ui.green.cards > .card:hover,
.ui.cards > .green.card:hover,
.ui.green.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @greenHover,
    @shadowHoverBoxShadow
  ;
}

/* Teal */
.ui.teal.cards > .card,
.ui.cards > .teal.card,
.ui.teal.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @teal,
    @shadowBoxShadow
  ;
}
.ui.teal.cards > .card:hover,
.ui.cards > .teal.card:hover,
.ui.teal.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @tealHover,
    @shadowHoverBoxShadow
  ;
}

/* Blue */
.ui.blue.cards > .card,
.ui.cards > .blue.card,
.ui.blue.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @blue,
    @shadowBoxShadow
  ;
}
.ui.blue.cards > .card:hover,
.ui.cards > .blue.card:hover,
.ui.blue.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @blueHover,
    @shadowHoverBoxShadow
  ;
}

/* Violet */
.ui.violet.cards > .card,
.ui.cards > .violet.card,
.ui.violet.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @violet,
    @shadowBoxShadow
  ;
}
.ui.violet.cards > .card:hover,
.ui.cards > .violet.card:hover,
.ui.violet.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @violetHover,
    @shadowHoverBoxShadow
  ;
}

/* Purple */
.ui.purple.cards > .card,
.ui.cards > .purple.card,
.ui.purple.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @purple,
    @shadowBoxShadow
  ;
}
.ui.purple.cards > .card:hover,
.ui.cards > .purple.card:hover,
.ui.purple.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @purpleHover,
    @shadowHoverBoxShadow
  ;
}

/* Pink */
.ui.pink.cards > .card,
.ui.cards > .pink.card,
.ui.pink.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @pink,
    @shadowBoxShadow
  ;
}
.ui.pink.cards > .card:hover,
.ui.cards > .pink.card:hover,
.ui.pink.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @pinkHover,
    @shadowHoverBoxShadow
  ;
}

/* Brown */
.ui.brown.cards > .card,
.ui.cards > .brown.card,
.ui.brown.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @brown,
    @shadowBoxShadow
  ;
}
.ui.brown.cards > .card:hover,
.ui.cards > .brown.card:hover,
.ui.brown.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @brownHover,
    @shadowHoverBoxShadow
  ;
}

/* Grey */
.ui.grey.cards > .card,
.ui.cards > .grey.card,
.ui.grey.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @grey,
    @shadowBoxShadow
  ;
}
.ui.grey.cards > .card:hover,
.ui.cards > .grey.card:hover,
.ui.grey.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @greyHover,
    @shadowHoverBoxShadow
  ;
}

/* Black */
.ui.black.cards > .card,
.ui.cards > .black.card,
.ui.black.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @black,
    @shadowBoxShadow
  ;
}
.ui.black.cards > .card:hover,
.ui.cards > .black.card:hover,
.ui.black.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @blackHover,
    @shadowHoverBoxShadow
  ;
}

/*--------------
   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.three.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.three.cards > .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}

.ui.four.cards {
  margin-left: @fourCardOffset;
  margin-right: @fourCardOffset;
}
.ui.four.cards > .card {
  width: @fourCard;
  margin-left: @fourCardSpacing;
  margin-right: @fourCardSpacing;
}

.ui.five.cards {
  margin-left: @fiveCardOffset;
  margin-right: @fiveCardOffset;
}
.ui.five.cards > .card {
  width: @fiveCard;
  margin-left: @fiveCardSpacing;
  margin-right: @fiveCardSpacing;
}

.ui.six.cards {
  margin-left: @sixCardOffset;
  margin-right: @sixCardOffset;
}
.ui.six.cards > .card {
  width: @sixCard;
  margin-left: @sixCardSpacing;
  margin-right: @sixCardSpacing;
}

.ui.seven.cards {
  margin-left: @sevenCardOffset;
  margin-right: @sevenCardOffset;
}
.ui.seven.cards > .card {
  width: @sevenCard;
  margin-left: @sevenCardSpacing;
  margin-right: @sevenCardSpacing;
}

.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.nine.cards {
  margin-left: @nineCardOffset;
  margin-right: @nineCardOffset;
}
.ui.nine.cards > .card {
  width: @nineCard;
  margin-left: @nineCardSpacing;
  margin-right: @nineCardSpacing;
  font-size: 10px;
}

.ui.ten.cards {
  margin-left: @tenCardOffset;
  margin-right: @tenCardOffset;
}
.ui.ten.cards > .card {
  width: @tenCard;
  margin-left: @tenCardSpacing;
  margin-right: @tenCardSpacing;
}

/*-------------------
      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();

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

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

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

@import (multiple) '../../theme.config';

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

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

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

  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;
}

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

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

.ui.cards {
  display: @groupDisplay;
  margin: @groupMargin;
  flex-wrap: wrap;
}

.ui.cards > .card {
  display: @groupCardDisplay;
  margin: @groupCardMargin;
  float: @groupCardFloat;
}

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

/* Consecutive Card Groups Preserve Row Spacing */
.ui.cards ~ .ui.cards {
  margin-top: @consecutiveGroupDistance;
}

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

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

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

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

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

.ui.cards > .card > .image,
.ui.card > .image {
  position: relative;
  display: block;
  flex: 0 0 auto;
  padding: @imagePadding;
  background: @imageBackground;
}
.ui.cards > .card > .image > img,
.ui.card > .image > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.ui.cards > .card > .image:not(.ui) > img,
.ui.card > .image:not(.ui) > img {
  border: @imageBorder;
}

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

.ui.cards > .card > .content,
.ui.card > .content {
  flex-grow: 1;
  border: @contentBorder;
  border-top: @contentDivider;
  background: @contentBackground;
  margin: @contentMargin;
  padding: @contentPadding;
  box-shadow: @contentBoxShadow;
  font-size: @contentFontSize;
  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 Content
-----------------*/

.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;
}

/*--------------
     Aligned
---------------*/

.ui.cards > .card  [class*="left aligned"],
.ui.card [class*="left aligned"] {
  text-align: left;
}
.ui.cards > .card [class*="center aligned"],
.ui.card [class*="center aligned"] {
  text-align: center;
}
.ui.cards > .card [class*="right aligned"],
.ui.card [class*="right aligned"] {
  text-align: 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,
.ui.card > .buttons,
.ui.cards > .card > .button,
.ui.card > .button {
  margin: @buttonMargin;
  width: @buttonWidth;
}

/*--------------
      Dimmer
---------------*/

.ui.cards > .card .dimmer,
.ui.card .dimmer {
  background-color: @dimmerColor;
  z-index: @dimmerZIndex;
}

/*--------------
     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;
  flex-grow: 0;
  border-top: @extraDivider !important;
  position: @extraPosition;
  background: @extraBackground;
  width: @extraWidth;
  margin: @extraMargin;
  padding: @extraPadding;
  top: @extraTop;
  left: @extraLeft;
  color: @extraColor;
  box-shadow: @extraBoxShadow;
  transition: @extraTransition;
}
.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
*******************************/

/*-------------------
       Raised
--------------------*/

.ui.raised.cards > .card {
  box-shadow: @raisedShadow;
}
.ui.raised.card {
  box-shadow: @raisedShadow;
}

/*-------------------
       Centered
--------------------*/

.ui.centered.cards {
  justify-content: center;
}
.ui.centered.card {
  margin-left: auto;
  margin-right: auto;
}

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

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

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

.ui.cards a.card,
.ui.link.cards .card,
a.ui.card,
.ui.link.card {
  transform: none;
}

.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;
  transform: @linkHoverTransform;
}

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

/* Red */
.ui.red.cards > .card,
.ui.cards > .red.card,
.ui.red.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @red,
    @shadowBoxShadow
  ;
}
.ui.red.cards > .card:hover,
.ui.cards > .red.card:hover,
.ui.red.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @redHover,
    @shadowHoverBoxShadow
  ;
}

/* Orange */
.ui.orange.cards > .card,
.ui.cards > .orange.card,
.ui.orange.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @orange,
    @shadowBoxShadow
  ;
}
.ui.orange.cards > .card:hover,
.ui.cards > .orange.card:hover,
.ui.orange.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @orangeHover,
    @shadowHoverBoxShadow
  ;
}

/* Yellow */
.ui.yellow.cards > .card,
.ui.cards > .yellow.card,
.ui.yellow.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @yellow,
    @shadowBoxShadow
  ;
}
.ui.yellow.cards > .card:hover,
.ui.cards > .yellow.card:hover,
.ui.yellow.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @yellowHover,
    @shadowHoverBoxShadow
  ;
}

/* Olive */
.ui.olive.cards > .card,
.ui.cards > .olive.card,
.ui.olive.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @olive,
    @shadowBoxShadow
  ;
}
.ui.olive.cards > .card:hover,
.ui.cards > .olive.card:hover,
.ui.olive.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @oliveHover,
    @shadowHoverBoxShadow
  ;
}

/* Green */
.ui.green.cards > .card,
.ui.cards > .green.card,
.ui.green.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @green,
    @shadowBoxShadow
  ;
}
.ui.green.cards > .card:hover,
.ui.cards > .green.card:hover,
.ui.green.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @greenHover,
    @shadowHoverBoxShadow
  ;
}

/* Teal */
.ui.teal.cards > .card,
.ui.cards > .teal.card,
.ui.teal.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @teal,
    @shadowBoxShadow
  ;
}
.ui.teal.cards > .card:hover,
.ui.cards > .teal.card:hover,
.ui.teal.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @tealHover,
    @shadowHoverBoxShadow
  ;
}

/* Blue */
.ui.blue.cards > .card,
.ui.cards > .blue.card,
.ui.blue.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @blue,
    @shadowBoxShadow
  ;
}
.ui.blue.cards > .card:hover,
.ui.cards > .blue.card:hover,
.ui.blue.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @blueHover,
    @shadowHoverBoxShadow
  ;
}

/* Violet */
.ui.violet.cards > .card,
.ui.cards > .violet.card,
.ui.violet.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @violet,
    @shadowBoxShadow
  ;
}
.ui.violet.cards > .card:hover,
.ui.cards > .violet.card:hover,
.ui.violet.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @violetHover,
    @shadowHoverBoxShadow
  ;
}

/* Purple */
.ui.purple.cards > .card,
.ui.cards > .purple.card,
.ui.purple.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @purple,
    @shadowBoxShadow
  ;
}
.ui.purple.cards > .card:hover,
.ui.cards > .purple.card:hover,
.ui.purple.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @purpleHover,
    @shadowHoverBoxShadow
  ;
}

/* Pink */
.ui.pink.cards > .card,
.ui.cards > .pink.card,
.ui.pink.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @pink,
    @shadowBoxShadow
  ;
}
.ui.pink.cards > .card:hover,
.ui.cards > .pink.card:hover,
.ui.pink.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @pinkHover,
    @shadowHoverBoxShadow
  ;
}

/* Brown */
.ui.brown.cards > .card,
.ui.cards > .brown.card,
.ui.brown.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @brown,
    @shadowBoxShadow
  ;
}
.ui.brown.cards > .card:hover,
.ui.cards > .brown.card:hover,
.ui.brown.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @brownHover,
    @shadowHoverBoxShadow
  ;
}

/* Grey */
.ui.grey.cards > .card,
.ui.cards > .grey.card,
.ui.grey.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @grey,
    @shadowBoxShadow
  ;
}
.ui.grey.cards > .card:hover,
.ui.cards > .grey.card:hover,
.ui.grey.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @greyHover,
    @shadowHoverBoxShadow
  ;
}

/* Black */
.ui.black.cards > .card,
.ui.cards > .black.card,
.ui.black.card {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @black,
    @shadowBoxShadow
  ;
}
.ui.black.cards > .card:hover,
.ui.cards > .black.card:hover,
.ui.black.card:hover {
  box-shadow:
    @borderShadow,
    0px @coloredShadowDistance 0px 0px @blackHover,
    @shadowHoverBoxShadow
  ;
}

/*--------------
   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.three.cards {
  margin-left: @threeCardOffset;
  margin-right: @threeCardOffset;
}
.ui.three.cards > .card {
  width: @threeCard;
  margin-left: @threeCardSpacing;
  margin-right: @threeCardSpacing;
}

.ui.four.cards {
  margin-left: @fourCardOffset;
  margin-right: @fourCardOffset;
}
.ui.four.cards > .card {
  width: @fourCard;
  margin-left: @fourCardSpacing;
  margin-right: @fourCardSpacing;
}

.ui.five.cards {
  margin-left: @fiveCardOffset;
  margin-right: @fiveCardOffset;
}
.ui.five.cards > .card {
  width: @fiveCard;
  margin-left: @fiveCardSpacing;
  margin-right: @fiveCardSpacing;
}

.ui.six.cards {
  margin-left: @sixCardOffset;
  margin-right: @sixCardOffset;
}
.ui.six.cards > .card {
  width: @sixCard;
  margin-left: @sixCardSpacing;
  margin-right: @sixCardSpacing;
}

.ui.seven.cards {
  margin-left: @sevenCardOffset;
  margin-right: @sevenCardOffset;
}
.ui.seven.cards > .card {
  width: @sevenCard;
  margin-left: @sevenCardSpacing;
  margin-right: @sevenCardSpacing;
}

.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.nine.cards {
  margin-left: @nineCardOffset;
  margin-right: @nineCardOffset;
}
.ui.nine.cards > .card {
  width: @nineCard;
  margin-left: @nineCardSpacing;
  margin-right: @nineCardSpacing;
  font-size: 10px;
}

.ui.ten.cards {
  margin-left: @tenCardOffset;
  margin-right: @tenCardOffset;
}
.ui.ten.cards > .card {
  width: @tenCard;
  margin-left: @tenCardSpacing;
  margin-right: @tenCardSpacing;
}

/*-------------------
      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();


style(global): highlight tile while dragging

body, html {
  background-color: @alabaster !important;
  font-family: 'Source Sans Pro', Helvetica, 'Open Sans', sans-serif;
}

hr {
  border-top: 5px solid @gallery;
}

router-view {
  height: 100%;
}

p {
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.5em;
  color: @emperor;
}

.btn-primary:active, .btn-primary:focus, .btn:hover, .btn-primary:active:focus {
  background: @butterfly-bush !important;
  color: @white !important;
}

.btn-primary {
  background-color: @white;
  border-radius: 4px;
  border: 1px solid @butterfly-bush;
  color: @butterfly-bush;
  font-size: 14px;
  font-weight: 400;
}

.list-group-item {
  &.selected {
    background-color: @seashell;
  }
}

.gu-transit {
  .default-tile {
    background: repeating-linear-gradient(
      45deg,
      @iron,
      @iron 10px,
      #d0d0d0 10px,
      #d0d0d0 20px
    );
  }
}

.default-tile {
  border: 1px solid @iron;
  border-radius: 5px;
  background-color: @alabaster;

  box-shadow: @tile-shadow;

  &:hover {
    background-color: @alabaster-hover;
  }

  &.irrelevant {
    background: repeating-linear-gradient(
      45deg,
      @iron,
      @iron 10px,
      #d0d0d0 10px,
      #d0d0d0 20px
    );
  }
}

.plugin-title-container {
  border-bottom: 5px solid rgba(0, 0, 0, .1);

  .plugin-title {
    color: @butterfly-bush;
  }

  .project-title-plugin {
    color: @butterfly-bush;
  }
}

tree-list {
  ul {
    padding-left: 0;
  }
}

tree-list {
  > tree-node {
    > ul {
      > li {
        > div {
          background-color: @iron;
        }
      }
    }
  }
}

.splitter {
  background-color: @lightgrey;
}

.title {
  color: @violet-red;
}

.main-header {
  color: @butterfly-bush;
}

body, html {
  background-color: @alabaster !important;
  font-family: 'Source Sans Pro', Helvetica, 'Open Sans', sans-serif;
}

hr {
  border-top: 5px solid @gallery;
}

router-view {
  height: 100%;
}

p {
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.5em;
  color: @emperor;
}

.btn-primary:active, .btn-primary:focus, .btn:hover, .btn-primary:active:focus {
  background: @butterfly-bush !important;
  color: @white !important;
}

.btn-primary {
  background-color: @white;
  border-radius: 4px;
  border: 1px solid @butterfly-bush;
  color: @butterfly-bush;
  font-size: 14px;
  font-weight: 400;
}

.list-group-item {
  &.selected {
    background-color: @seashell;
  }
}

.default-tile {
  border: 1px solid @iron;
  border-radius: 5px;
  background-color: @alabaster;

  box-shadow: @tile-shadow;

  &:hover {
    background-color: @alabaster-hover;
  }

  &.irrelevant {
    background: repeating-linear-gradient(
      45deg,
      @iron,
      @iron 10px,
      #d0d0d0 10px,
      #d0d0d0 20px
    );
  }
}

.plugin-title-container {
  border-bottom: 5px solid rgba(0, 0, 0, .1);

  .plugin-title {
    color: @butterfly-bush;
  }

  .project-title-plugin {
    color: @butterfly-bush;
  }
}

tree-list {
  ul {
    padding-left: 0;
  }
}

tree-list {
  > tree-node {
    > ul {
      > li {
        > div {
          background-color: @iron;
        }
      }
    }
  }
}

.splitter {
  background-color: @lightgrey;
}

.title {
  color: @violet-red;
}

.main-header {
  color: @butterfly-bush;
}


change grid.less

change grid.less

fatal: unable to access 'https://github.com/mob-framework/mob.git/': The requested URL returned error: 403


INBOX-25 fix toolbar button selection state

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/heroandtn3/openpaas-esn.git/'


use extend-all for breadcrumb

use extend-all for breadcrumb

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/svijee/theme-default.git/'


Delete path.less

Delete path.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/micklosm/ConstellationGallery-.git/'


Updates for Form-Rendering and Skeletons of Company / Location / Address Entities

//#seedunit-models {
//	form {
//		.form-horizontal();
//
//		.form-group {
//			label {
//
//
//
//
//			}
//		}
//	}
//}

error: pathspec 'src/Elektra/SiteBundle/Resources/private/less/theme/forms.less' did not match any file(s) known to git


Update and rename theme_material_design/static/src/less/options to theme_material_design/static/src/less/options/bg_color_04.less

body {
    background-color:  @color-yellow-dark;
}

@text-color:        white;
@headings-color:    white;

.text-muted {
    color: @gray-lighter;
}

#wrapwrap {
    background-color: fade(black, 20%);
}

/* oe_structure */
.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before {
    color: white;
}

error: pathspec 'theme_material_design/static/src/less/options/bg_color_04.less' did not match any file(s) known to git


CONTACT-332 Fix the overlay twitter icon color


button position

button position

fatal: unable to access 'https://github.com/Digipalvelutehdas/APIKA.git/': The requested URL returned error: 403


Make style.css into .less file.

Make style.css into .less file.

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


Create jumbotron.less

Create jumbotron.less

//
// Jumbotron
// --------------------------------------------------

.jumbotron {
  padding: @jumbotron-padding;
  margin-bottom: @jumbotron-padding;
  color: @jumbotron-color;
  background-color: @jumbotron-bg;

  h1,
  .h1 {
    color: @jumbotron-heading-color;
  }
  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 200;
  }

  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }

  .container & {
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: @screen-sm-min) {
    padding-top:    (@jumbotron-padding * 1.6);
    padding-bottom: (@jumbotron-padding * 1.6);

    .container & {
      padding-left:  (@jumbotron-padding * 2);
      padding-right: (@jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: (@font-size-base * 4.5);
    }
  }
}

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


fixed alternative login css

fixed alternative login css

fatal: unable to access 'https://github.com/cablelabs/dev-portal.git/': The requested URL returned error: 403


Added more icons for buttons with icons

Added more icons for buttons with icons

//
// @package     hubzero-cms
// @file        media/system/less/icons.less
// @copyright   Copyright 2005-2013 Purdue University. All rights reserved.
// @license     http://www.gnu.org/licenses/lgpl-3.0.html LGPLv3
//

//
// Icons
// --------------------------------------------------
	*[class^="icon-"]:before,
	*[class*=" icon-"]:before {
		font-family: "Fontcons";
		margin-right: 0.2em;
	}
	.icon-file:before     { content: "\@{iconFile}"; }
	.icon-cart:before     { content: "\@{iconShoppingCart}"; }
	.icon-basket:before   { content: "\@{iconBasket}"; }
	.icon-warning:before  { content: "\@{iconWarning}"; }
	.icon-success:before  { content: "\@{iconSuccess}"; }
	.icon-info:before     { content: "\@{iconInfo}"; }
	.icon-error:before,
	.icon-danger:before   { content: "\@{iconError}"; }
	.icon-email:before    { content: "\@{iconEnvelope}"; }
	.icon-add:before      { content: "\@{iconPlusSign}"; }
	.icon-delete:before   { content: "\@{iconTrash}"; }
	.icon-edit:before     { content: "\@{iconPencil}"; }
	.icon-comments:before { content: "\@{iconComments}"; }
	.icon-comment:before  { content: "\@{iconComment}"; }
	.icon-category:before,
	.icon-folder:before   { content: "\@{iconFolderClose}"; }
	.icon-search:before   { content: "\@{iconSearch}"; }
	.icon-stats:before    { content: "\@{iconLineGraph}"; }
	.icon-tags:before     { content: "\@{iconTags}"; }
	.icon-tag:before      { content: "\@{iconTag}"; }
	.icon-user:before     { content: "\@{iconUser}"; }
	.icon-group:before    { content: "\@{iconGroup}"; }
	.icon-archive:before  { content: "\@{iconArchive}"; }
	.icon-config:before   { content: "\@{iconCog}"; }
	.icon-abuse:before    { content: "\@{iconBanCircle}"; }
	.icon-tag:before      { content: "\@{iconTag}"; }
	.icon-feed:before     { content: "\@{iconFeed}"; }
	.icon-browse:before   { content: "\@{iconThList}"; }
	.icon-history:before,
	.icon-time:before     { content: "\@{iconTime}"; }
	.icon-reply:before    { content: "\@{iconReply}"; }
	.icon-date:before     { content: "\@{iconCalendar}"; }
	.icon-prev:before     { content: "\@{iconArrowLeft}"; }
	.icon-next:before     { content: "\@{iconArrowRight}"; }
	.icon-main:before     { content: "\@{iconHeirarchy}"; }
	.icon-points:before   { content: "\@{iconCoins}"; }
	.icon-upload:before   { content: "\@{iconCloudUpload}"; }


Ticket #268 - Minor fixes.

Ticket #268 - Minor fixes.

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/camperjz/una.git/'


Make nav el portable

Make nav el portable

fatal: unable to access 'https://github.com/hevnly/asset-bazaar.git/': The requested URL returned error: 403


Simplify style

Simplify style

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/ocrampete16/dotfiles.git/'


Add missing less file for tests

Add missing less file for tests

fatal: unable to access 'https://github.com/atomify/atomify-css.git/': The requested URL returned error: 403


fix style

fix style

fatal: unable to access 'https://github.com/hjin-me/ant-design.git/': The requested URL returned error: 403


Fixing blue close icon.

Fixing blue close icon.

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/JesseLeite/earthsung-by-jackson-syntax-atom.git/'


fix: Change style by integration secondary navbar

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/mxabierto/dgm.git/'


feat(Alert): add z-index for backdrops

feat(Alert): add z-index for backdrops

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/seekinternational/seek-asia-style-guide.git/'


Add main stylesheet

Add main stylesheet

/////////////////////
// Main style file //
/////////////////////

//// Layout
body {
    position: relative;
    width: 960px;
    // max-width: 960px; // For maximum-width layout
    margin: 0 auto;

    font-family: "Open Sans", sans-serif;
    font-size: 13px;
}

// Navigation
.main-nav {
    .nav;
    .nav-tabs;
}

// Account box
#account-box {
    position: absolute;
    right: @gutter-width/2 * 1px;
    padding: 2px 10px;
    line-height: 2;
    color: white;
    background-color: black;

    a {
        color: white;
    }
}

error: pathspec 'src/UCP/AbsenceBundle/Resources/public/css/main.less' did not match any file(s) known to git


Update material.less

Update material.less

@import "variables.less";
@import "mixins.less";
@import "icons-material-design.less";
@import "shadows.less";

body {
  background-color: #EEEEEE;
  &.inverse {
    background: #333333;
    &, .form-control {
      color: @darkbg-text;
    }
  }
}

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, Wenquanyi Microhei, sans-serif;
  font-weight: 300;
}

h5, h6{
  font-weight: 400;
}

// Well and Jumbotrons
@import "welljumbo.less";

// Buttons
@import "buttons.less";

// Checkboxes
@import "checkboxes.less";

// Toggle buttons
@import "togglebutton.less";

// Radios
@import "radios.less";

// Text inputs
@import "inputs.less";

legend {
  border-bottom: 0;
}

// Lists
@import "lists.less";

// Navbar
@import "navbar.less";

.dropdown-menu {
  border: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  .divider {
    background-color: rgba(229, 229, 229, 0.12);
  }
  li {
    overflow: hidden;
    position: relative;
    a:hover {
      background-color: transparent;
      color: @primary;
    }
  }
  .variations(~" li a:hover", color, @primary);
}

// Alerts
@import "alerts.less";

// Progress bar
@import "progress.less";

// Typography
.text-warning {
  color: @btn-warning;
}
.text-primary {
  color: @btn-primary;
}
.text-danger {
  color: @btn-danger;
}
.text-success {
  color: @btn-success;
}
.text-info {
  color: @btn-info;
}

@import "tabs.less";

@import "popups.less";

@import "icons.less";

@import "cards.less";

@import "dialogs.less";

@import "labels.less";

@import "panels.less";

// Prevent highlight on mobile
* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
  &:focus {
    outline: 0;
  }
}

@import "footer.less";

// External plugins
@import "plugin-snackbarjs.less";
@import "plugin-nouislider.less";
@import "plugin-selectize.less";
@import "plugin-dropdownjs.less";

@import "variables.less";
@import "mixins.less";
@import "icons-material-design.less";
@import "shadows.less";

body {
  background-color: #EEEEEE;
  &.inverse {
    background: #333333;
    &, .form-control {
      color: @darkbg-text;
    }
  }
}

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

h5, h6{
  font-weight: 400;
}

// Well and Jumbotrons
@import "welljumbo.less";

// Buttons
@import "buttons.less";

// Checkboxes
@import "checkboxes.less";

// Toggle buttons
@import "togglebutton.less";

// Radios
@import "radios.less";

// Text inputs
@import "inputs.less";

legend {
  border-bottom: 0;
}

// Lists
@import "lists.less";

// Navbar
@import "navbar.less";

.dropdown-menu {
  border: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  .divider {
    background-color: rgba(229, 229, 229, 0.12);
  }
  li {
    overflow: hidden;
    position: relative;
    a:hover {
      background-color: transparent;
      color: @primary;
    }
  }
  .variations(~" li a:hover", color, @primary);
}

// Alerts
@import "alerts.less";

// Progress bar
@import "progress.less";

// Typography
.text-warning {
  color: @btn-warning;
}
.text-primary {
  color: @btn-primary;
}
.text-danger {
  color: @btn-danger;
}
.text-success {
  color: @btn-success;
}
.text-info {
  color: @btn-info;
}

@import "tabs.less";

@import "popups.less";

@import "icons.less";

@import "cards.less";

@import "dialogs.less";

@import "labels.less";

@import "panels.less";

// Prevent highlight on mobile
* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
  &:focus {
    outline: 0;
  }
}

@import "footer.less";

// External plugins
@import "plugin-snackbarjs.less";
@import "plugin-nouislider.less";
@import "plugin-selectize.less";
@import "plugin-dropdownjs.less";


block样式文件

block样式文件

error: pathspec 'coms/zimoli/block.less' did not match any file(s) known to git


CAL-378 add a scroll in calender view

CAL-378 add a scroll in calender view

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/heroandtn3/openpaas-esn.git/'


Highlight selected tags.

Highlight selected tags.

fatal: unable to access 'https://github.com/dotKom/onlineweb4.git/': The requested URL returned error: 403


CRM-4019 collection rename fix

CRM-4019 collection rename fix

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/trustify/oroplatform.git/'


fix for popovers left/right

fix for popovers left/right

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/DellGDC/dell-ui-components.git/'


Added missing file.

Added missing file.

@media (min-width: 1200px) {
  .sidebar-nav .navbar-header {
    width: 100%;
  }

  .sidebar-nav .navbar-nav {
    width: 100%;
  }

  .sidebar-nav .navbar-nav li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }

  .sidebar-nav .navbar-nav li:last-child {
    width: 100%;
    border-bottom: none;
  }
 .sidebar-nav .dropdown-menu {
    position: unset;
    top: unset;
    left: unset;
    z-index: unset;
    display: unset;
    float: unset;
    min-width: unset;
    padding: unset;
    margin: unset;
    list-style: none;
    font-size: unset;
    text-align: unset;
    background-color: unset;
    border: unset;
    border: unset;
    border-radius: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    background-clip: unset;
  }

  .sidebar-nav .dropdown-menu > li > a {
    padding: 10px;
    padding-left: 30px;
  }

  .sidebar-nav .dropdown-menu > li > a:hover, .sidebar-nav .dropdown-menu > li > a:focus {
    background-color: unset;
    color: unset;
  }

  .sidebar-nav .dropdown-menu .label {
    float: right;
  }
}

error: pathspec 'app/assets/stylesheets/itsf/backend/application/bootstrap-vertical-navigation.css.less' did not match any file(s) known to git


adjusting product image

adjusting product image


Add content box styles

Add content box styles

.content-box {
  &__background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    fill: @excerpt-background;
    &--shadow {
      z-index: -2;
      top: 1rem;
      left: 1rem;
      fill: @shadow;
      transform: rotate(180deg);
    }
  }
  &--aside {
    .content-box__background {
      fill: @shadow;
    }
  }
  &--fb {
    .content-box__background {
      fill: @facebookBackground;
    }
  }
}

error: pathspec 'wp-content/themes/template/src/styles/components/content-box.less' did not match any file(s) known to git


fix sunburst full screen

fix sunburst full screen

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/bmesuere/uni-test.git/'


margin update to questions module

margin update to questions module

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/amazingBastard/infosite-cms.git/'


INBOX-479 Put a light gray for the folder boxe


Remove empty styling

Remove empty styling

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/kevinbrosamle/ticket-sherpa.git/'


Revert "change grid.less"

Revert "change grid.less"

This reverts commit 558d45a9979a05f1bd6d62ef58840e2589a19c9e.

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/mob-framework/mob.git/'