ohayolibs/packages/theme/system/utils/_color.less

Ohayo is a set of essential modules for ohayojp.

/**
 * 白色背景
 * White background
 */
.bg-white {
  background-color: #fff !important;
}
/**
 * 透明背景
 * Transparent background
 */
.bg-transparent {
  background-color: transparent !important;
}
/**
 * 白色文本
 * White text
 */
.text-white {
  color: #fff !important;
}
/**
 * 鼠标悬停文本主颜色
 * Mouse hover text primary color
 */
.text-hover {
  cursor: pointer;
  &:hover {
    color: @primary-color !important;
  }
}

.for-each(@colors, {
  .bg-@{adKey}-light       { background-color: extract(@adItem, @color-light-position) !important; }
  .bg-@{adKey}             { background-color: extract(@adItem, @color-basic-position) !important; }
  .bg-@{adKey}-dark        { background-color: extract(@adItem, @color-dark-position) !important; }

  .bg-@{adKey}-light-h     { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-light-position) !important; } }
  .bg-@{adKey}-h           { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-basic-position) !important; } }
  .bg-@{adKey}-dark-h      { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-dark-position) !important; } }

  .text-@{adKey}-light     { color: extract(@adItem, @color-light-position) !important; }
  .text-@{adKey}           { color: extract(@adItem, @color-basic-position) !important; }
  .text-@{adKey}-dark      { color: extract(@adItem, @color-dark-position) !important; }
});

.for-each(@aliasColors, {
  .bg-@{adKey}-light  { background-color: ~`getColor('@{colors}', '@{adValue}', @{color-light-position})` !important; }
  .bg-@{adKey}        { background-color: ~`getColor('@{colors}', '@{adValue}', @{color-basic-position})` !important; }
  .bg-@{adKey}-dark   { background-color: ~`getColor('@{colors}', '@{adValue}', @{color-dark-position})` !important; }

  .bg-@{adKey}-light-h  { transition: background-color 300ms; &:hover { background-color: ~`getColor('@{colors}', '@{adValue}', @{color-light-position})` !important; } }
  .bg-@{adKey}-h        { transition: background-color 300ms; &:hover { background-color: ~`getColor('@{colors}', '@{adValue}', @{color-basic-position})` !important; } }
  .bg-@{adKey}-dark-h   { transition: background-color 300ms; &:hover { background-color: ~`getColor('@{colors}', '@{adValue}', @{color-dark-position})` !important; } }

  .text-@{adKey}-light  { color: ~`getColor('@{colors}', '@{adValue}', @{color-light-position})` !important; }
  .text-@{adKey}        { color: ~`getColor('@{colors}', '@{adValue}', @{color-basic-position})` !important; }
  .text-@{adKey}-dark   { color: ~`getColor('@{colors}', '@{adValue}', @{color-dark-position})` !important; }
});

// grey
.for-each(@greyColorer, {
  .bg-grey-@{adKey}     { background-color: @adValue !important; }
  .bg-grey-@{adKey}-h   { &:hover { background-color: @adValue !important; } }
  .text-grey-@{adKey}   { color: @adValue !important; }
});

.all-colors-minin(@enabled) when (@enabled = true) {
  .loop-no(@adKey, @adValue, @i: 1) when (@i =< length(@color-no-list)) {
    // @color-no-list
    @name: '@{adKey}-@{i}';
    .bg-@{adKey}-@{i} {
      background-color: @@name !important;
    }
    .bg-@{adKey}-@{i}-h {
      transition: background-color 300ms;
      &:hover {
        background-color: @@name !important;
      }
    }
    .text-@{adKey}-@{i} {
      color: @@name !important;
    }
    .loop-no(@adKey, @adValue, @i + 1);
  }

  .for-each(@colors, {
    .loop-no(@adKey, @adValue, 1);
  });
}
.all-colors-minin(@enable-all-colors);