Cerulean theme from Bootswatch version 4

Notes: the difference between version 4 and version 3 is not very
remarkable.

src/theme-configs/bootswatch-v4/cerulean.theme.config

@@ -0,0 +1,92 @@
+/*
+
+████████╗██╗  ██╗███████╗███╗   ███╗███████╗███████╗
+╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝██╔════╝
+   ██║   ███████║█████╗  ██╔████╔██║█████╗  ███████╗
+   ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝  ╚════██║
+   ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗███████║
+   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝╚══════╝
+
+*/
+
+/*******************************
+        Theme Selection
+*******************************/
+
+/* To override a theme for an individual element
+   specify theme name below
+*/
+
+/* Global */
+@site       : 'bootswatch-v4/cerulean';
+@reset      : 'default';
+
+/* Elements */
+@button     : 'bootswatch-v4/cerulean';
+@container  : 'default';
+@divider    : 'default';
+@flag       : 'default';
+@header     : 'default';
+@icon       : 'default';
+@image      : 'default';
+@input      : 'default';
+@label      : 'default';
+@list       : 'default';
+@loader     : 'default';
+@rail       : 'default';
+@reveal     : 'default';
+@segment    : 'default';
+@step       : 'bootswatch-v4/cerulean';
+
+/* Collections */
+@breadcrumb : 'bootswatch-v4/cerulean';
+@form       : 'default';
+@grid       : 'default';
+@menu       : 'bootswatch-v4/cerulean';
+@message    : 'bootswatch-v4/cerulean';
+@table      : 'default';
+
+/* Modules */
+@accordion  : 'bootswatch-v4/cerulean';
+@checkbox   : 'default';
+@dimmer     : 'default';
+@dropdown   : 'bootswatch-v4/cerulean';
+@embed      : 'default';
+@modal      : 'default';
+@nag        : 'default';
+@popup      : 'default';
+@progress   : 'default';
+@rating     : 'default';
+@search     : 'default';
+@shape      : 'default';
+@sidebar    : 'default';
+@sticky     : 'default';
+@tab        : 'default';
+@transition : 'default';
+
+/* Views */
+@ad         : 'default';
+@card       : 'default';
+@comment    : 'default';
+@feed       : 'default';
+@item       : 'default';
+@statistic  : 'default';
+
+/*******************************
+            Folders
+*******************************/
+
+/* Path to theme packages */
+@themesFolder : 'themes';
+
+/* Path to site override folder */
+@siteFolder   : 'site/';
+
+
+/*******************************
+         Import Theme
+*******************************/
+
+@import "theme.less";
+
+/* End Config */

src/themes/bootswatch-v4/cerulean/collections/breadcrumb.overrides

@@ -0,0 +1,55 @@
+#gradient {
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: -o-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-repeat: no-repeat;
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+}
+
+.button-shadow(@color) {
+  #gradient
+    > .vertical-three-colors(lighten(@color, 8%), @color, 60%, darken(@color, 4%));
+  filter: none;
+  border: 1px solid darken(@color, 10%);
+  border-radius: 4px;
+}
+
+.ui.breadcrumb {
+  .button-shadow(@primaryColor);
+  padding: 0.6em;
+
+  .section {
+    color: darken(@white, 10%);
+
+    &:hover {
+      color: darken(@white, 15%);
+    }
+
+    &.active {
+      color: @white;
+      &:hover {
+        color: darken(@white, 5%);
+      }
+    }
+  }
+}

src/themes/bootswatch-v4/cerulean/collections/breadcrumb.variables

@@ -0,0 +1 @@
+@dividerColor: #fff;

src/themes/bootswatch-v4/cerulean/collections/menu.overrides

@@ -0,0 +1,69 @@
+#gradient {
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: -o-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-repeat: no-repeat;
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+}
+
+.button-shadow(@color) {
+  #gradient
+    > .vertical-three-colors(lighten(@color, 8%), @color, 60%, darken(@color, 4%));
+  filter: none;
+}
+
+.text-shadow {
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.ui.menu {
+  .button-shadow(@primaryColor);
+  .active.item, .item:hover {
+    .button-shadow(darken(@primaryColor, 5%));
+  }
+}
+
+.ui.menu .item {
+  .text-shadow;
+}
+
+.ui.secondary.menu .item {
+  color: @secondaryItemColor;
+}
+
+.ui.menu .item .input {
+  color: darken(#fff, 10%);
+  input {
+    color: #fff;
+  }
+}
+
+.ui.text.menu .item:hover {
+  color: lighten(#000, 10%);
+}
+
+.ui.inverted.menu .item:hover {
+  color: #fff;
+}

src/themes/bootswatch-v4/cerulean/collections/menu.variables

@@ -0,0 +1,42 @@
+@itemTextColor: #fff;
+@background: @primaryColor;
+
+@border: 0;
+@borderRadius: 0;
+@fontWeight: 400;
+
+@dividerSize: 0;
+
+@hoverItemTextColor: #fff;
+@hoverItemBackground: darken(@primaryColor, 10%);
+@activeItemTextColor: #fff;
+@activeHoverItemColor: #fff;
+@activeItemBackground: darken(@primaryColor, 10%);
+
+@labelTextColor: #fff;
+@labelBackground: darken(@primaryColor, 15%);
+
+@dropdownHoveredItemColor: #fff;
+@dropdownHoveredItemBackground: darken(@primaryColor, 10%);
+@dropdownBackground: #fff;
+
+@invertedItemTextColor: rgba(0,0,0,0.8);
+@invertedBorder: darken(@infoColor, 5%);
+
+@invertedHoverBackground: darken(@infoColor, 5%);
+@invertedActiveColor: #fff;
+@invertedActiveBackground: darken(@infoColor, 5%);
+
+@paginationActiveTextColor: #999;
+@paginationActiveBackground: #f5f5f5;
+
+@boxShadow: (0 1px 10px rgba(0, 0, 0, 0.1));
+@subMenuActiveTextColor: #000;
+
+@verticalBackground: @background;
+
+@tabularTextColor: lighten(#000, 10%);
+@tabularHoveredTextColor: lighten(#000, 15%);
+
+@textMenuItemColor: darken(#fff, 30%);
+@textMenuActiveItemColor: #000;

src/themes/bootswatch-v4/cerulean/collections/message.overrides

@@ -0,0 +1,3 @@
+.ui.message {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}

src/themes/bootswatch-v4/cerulean/collections/message.variables

@@ -0,0 +1 @@
+@boxShadow: none;

src/themes/bootswatch-v4/cerulean/elements/button.overrides

@@ -0,0 +1,69 @@
+#gradient {
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: -o-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-repeat: no-repeat;
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+}
+
+.button-shadow(@color) {
+  #gradient
+    > .vertical-three-colors(lighten(@color, 8%), @color, 60%, darken(@color, 4%));
+  filter: none;
+  border: 1px solid darken(@color, 10%);
+}
+
+.text-shadow {
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.ui.button {
+  .button-shadow(#fff);
+  .text-shadow;
+
+  &.primary {
+    .button-shadow(@primaryColor);
+  }
+
+  &.positive {
+    .button-shadow(@positiveColor);
+  }
+
+  &.info {
+    .button-shadow(@infoColor);
+  }
+
+  &.warning {
+    .button-shadow(@warningColor);
+  }
+
+  &.negative {
+    .button-shadow(@negativeColor);
+  }
+}
+
+// left border of the first button in buttons group
+.ui.buttons .button:first-child {
+  border-left: 1px solid darken(#fff, 10%);
+  margin-left: 1px;
+}

src/themes/bootswatch-v4/cerulean/elements/button.variables

@@ -0,0 +1,5 @@
+@textColor: #555;
+@basicBorder: rgba(0, 0, 0, 0.1);
+@textShadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+@orBackgroundColor: darken(#fff, 10%);
+@borderRadius: 0.25rem;

src/themes/bootswatch-v4/cerulean/elements/header.variables

@@ -0,0 +1 @@
+@textColor: @primaryColor;

src/themes/bootswatch-v4/cerulean/elements/step.overrides

@@ -0,0 +1,44 @@
+#gradient {
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: -o-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-repeat: no-repeat;
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+}
+
+.button-shadow(@color) {
+  #gradient
+    > .vertical-three-colors(lighten(@color, 8%), @color, 60%, darken(@color, 4%));
+  filter: none;
+  border: 0px solid darken(@color, 10%);
+}
+
+.ui.steps .step {
+  .button-shadow(@primaryColor);
+  &.active {
+    .button-shadow(darken(@primaryColor, 20%));
+    &:after {
+      background-color: darken(@primaryColor, 20%);
+    }
+  }
+}