From 22b2dd270971f9d4fd047e8db0f535ab85b70218 Mon Sep 17 00:00:00 2001 From: Bingo Du Date: Wed, 27 Jun 2018 21:40:34 +0800 Subject: [PATCH] Cerulean theme from Bootswatch version 4 Notes: the difference between version 4 and version 3 is not very remarkable. --- .../bootswatch-v4/cerulean.theme.config | 92 +++++++++++++++++++ .../cerulean/collections/breadcrumb.overrides | 55 +++++++++++ .../cerulean/collections/breadcrumb.variables | 1 + .../cerulean/collections/menu.overrides | 69 ++++++++++++++ .../cerulean/collections/menu.variables | 42 +++++++++ .../cerulean/collections/message.overrides | 3 + .../cerulean/collections/message.variables | 1 + .../cerulean/elements/button.overrides | 69 ++++++++++++++ .../cerulean/elements/button.variables | 5 + .../cerulean/elements/header.variables | 1 + .../cerulean/elements/step.overrides | 44 +++++++++ .../cerulean/elements/step.variables | 15 +++ .../cerulean/globals/site.variables | 25 +++++ .../cerulean/modules/dropdown.variables | 5 + 14 files changed, 427 insertions(+) create mode 100644 src/theme-configs/bootswatch-v4/cerulean.theme.config create mode 100644 src/themes/bootswatch-v4/cerulean/collections/breadcrumb.overrides create mode 100644 src/themes/bootswatch-v4/cerulean/collections/breadcrumb.variables create mode 100644 src/themes/bootswatch-v4/cerulean/collections/menu.overrides create mode 100644 src/themes/bootswatch-v4/cerulean/collections/menu.variables create mode 100644 src/themes/bootswatch-v4/cerulean/collections/message.overrides create mode 100644 src/themes/bootswatch-v4/cerulean/collections/message.variables create mode 100644 src/themes/bootswatch-v4/cerulean/elements/button.overrides create mode 100644 src/themes/bootswatch-v4/cerulean/elements/button.variables create mode 100644 src/themes/bootswatch-v4/cerulean/elements/header.variables create mode 100644 src/themes/bootswatch-v4/cerulean/elements/step.overrides create mode 100644 src/themes/bootswatch-v4/cerulean/elements/step.variables create mode 100644 src/themes/bootswatch-v4/cerulean/globals/site.variables create mode 100644 src/themes/bootswatch-v4/cerulean/modules/dropdown.variables diff --git a/src/theme-configs/bootswatch-v4/cerulean.theme.config b/src/theme-configs/bootswatch-v4/cerulean.theme.config new file mode 100644 index 0000000..183c7cf --- /dev/null +++ b/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 */ diff --git a/src/themes/bootswatch-v4/cerulean/collections/breadcrumb.overrides b/src/themes/bootswatch-v4/cerulean/collections/breadcrumb.overrides new file mode 100644 index 0000000..3e051ba --- /dev/null +++ b/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%); + } + } + } +} diff --git a/src/themes/bootswatch-v4/cerulean/collections/breadcrumb.variables b/src/themes/bootswatch-v4/cerulean/collections/breadcrumb.variables new file mode 100644 index 0000000..62505a7 --- /dev/null +++ b/src/themes/bootswatch-v4/cerulean/collections/breadcrumb.variables @@ -0,0 +1 @@ +@dividerColor: #fff; diff --git a/src/themes/bootswatch-v4/cerulean/collections/menu.overrides b/src/themes/bootswatch-v4/cerulean/collections/menu.overrides new file mode 100644 index 0000000..a8f6a7f --- /dev/null +++ b/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; +} diff --git a/src/themes/bootswatch-v4/cerulean/collections/menu.variables b/src/themes/bootswatch-v4/cerulean/collections/menu.variables new file mode 100644 index 0000000..8c100fd --- /dev/null +++ b/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; diff --git a/src/themes/bootswatch-v4/cerulean/collections/message.overrides b/src/themes/bootswatch-v4/cerulean/collections/message.overrides new file mode 100644 index 0000000..187c159 --- /dev/null +++ b/src/themes/bootswatch-v4/cerulean/collections/message.overrides @@ -0,0 +1,3 @@ +.ui.message { + border: 1px solid rgba(0, 0, 0, 0.1); +} diff --git a/src/themes/bootswatch-v4/cerulean/collections/message.variables b/src/themes/bootswatch-v4/cerulean/collections/message.variables new file mode 100644 index 0000000..0dbd957 --- /dev/null +++ b/src/themes/bootswatch-v4/cerulean/collections/message.variables @@ -0,0 +1 @@ +@boxShadow: none; diff --git a/src/themes/bootswatch-v4/cerulean/elements/button.overrides b/src/themes/bootswatch-v4/cerulean/elements/button.overrides new file mode 100644 index 0000000..a3f5227 --- /dev/null +++ b/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; +} diff --git a/src/themes/bootswatch-v4/cerulean/elements/button.variables b/src/themes/bootswatch-v4/cerulean/elements/button.variables new file mode 100644 index 0000000..3109c7e --- /dev/null +++ b/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; diff --git a/src/themes/bootswatch-v4/cerulean/elements/header.variables b/src/themes/bootswatch-v4/cerulean/elements/header.variables new file mode 100644 index 0000000..55c4de7 --- /dev/null +++ b/src/themes/bootswatch-v4/cerulean/elements/header.variables @@ -0,0 +1 @@ +@textColor: @primaryColor; diff --git a/src/themes/bootswatch-v4/cerulean/elements/step.overrides b/src/themes/bootswatch-v4/cerulean/elements/step.overrides new file mode 100644 index 0000000..03f9837 --- /dev/null +++ b/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%); + } + } +} diff --git a/src/themes/bootswatch-v4/cerulean/elements/step.variables b/src/themes/bootswatch-v4/cerulean/elements/step.variables new file mode 100644 index 0000000..ad518b8 --- /dev/null +++ b/src/themes/bootswatch-v4/cerulean/elements/step.variables @@ -0,0 +1,15 @@ +@textColor: @white; +@titleColor: @white; +@downColor: @white; +@downBackground: darken(@primaryColor, 5%); +@descriptionColor: darken(@white, 5%); +@activeColor: @white; +@activeIconColor: @white; +@activeBackground: darken(@primaryColor, 10%); +@activeHoverBackground: darken(@primaryColor, 20%); +@hoverColor: @white; +@hoverBackground: @primaryColor; +@disabledColor: darken(@white, 5%); +@disabledBackground: darken(@white, 30%); +@arrowBackgroundColor: @primaryColor; +@verticalDivider: none; diff --git a/src/themes/bootswatch-v4/cerulean/globals/site.variables b/src/themes/bootswatch-v4/cerulean/globals/site.variables new file mode 100644 index 0000000..266c734 --- /dev/null +++ b/src/themes/bootswatch-v4/cerulean/globals/site.variables @@ -0,0 +1,25 @@ +@primaryColor: #2FA4E7; +@positiveColor: #73A839; +@infoColor: #033C73; +@warningColor: #DD5600; +@negativeColor: #C71C22; + +@textcolor: #495057; +@headerFont: @fontName; +@headerLineHeight: 1.2; + +@inputColor: #555; + +@disabledTextColor: #ddd; +@invertedDisabledTextColor: #ccc; + +@positiveTextColor: #468847; +@infoTextColor: #3a87ad; +@warningTextColor: #c09853; +@warningBorderColor: darken(spin(@warningBackgroundColor, -10), 3%); +@negativeTextColor: #b94a48; +@negativeBorderColor: darken(spin(@negativeBackgroundColor, -10), 3%); + +@pageFont: "Helvetica Neue", Arial, Helvetica, sans-serif; +@headerFont: "Helvetica Neue", Arial, Helvetica, sans-serif; +@importGoogleFonts: false; diff --git a/src/themes/bootswatch-v4/cerulean/modules/dropdown.variables b/src/themes/bootswatch-v4/cerulean/modules/dropdown.variables new file mode 100644 index 0000000..b11f720 --- /dev/null +++ b/src/themes/bootswatch-v4/cerulean/modules/dropdown.variables @@ -0,0 +1,5 @@ +@itemColor: @textColor; +@hoveredItemColor: #fff; +@hoveredItemBackground: @primaryColor; +@selectionTextUnderlayColor: lighten(#000, 10%); +@menuHeaderColor: #868e96;