diff --git a/DancingGoat/Areas/Admin/Models/MessageModel.cs b/DancingGoat/Areas/Admin/Models/MessageModel.cs index 149519a9..10b083ab 100644 --- a/DancingGoat/Areas/Admin/Models/MessageModel.cs +++ b/DancingGoat/Areas/Admin/Models/MessageModel.cs @@ -10,7 +10,6 @@ public class MessageModel public enum MessageType { Info, - Warning, Error } } \ No newline at end of file diff --git a/DancingGoat/Areas/Admin/Views/SelfConfig/Index.cshtml b/DancingGoat/Areas/Admin/Views/SelfConfig/Index.cshtml index 546271e9..dd07fec5 100644 --- a/DancingGoat/Areas/Admin/Views/SelfConfig/Index.cshtml +++ b/DancingGoat/Areas/Admin/Views/SelfConfig/Index.cshtml @@ -1,19 +1,18 @@ -@using DancingGoat.Helpers.Extensions -@model DancingGoat.Areas.Admin.Models.IndexViewModel +@model DancingGoat.Areas.Admin.Models.IndexViewModel @{ - ViewBag.Title = "Sample Site—Configuration"; + ViewBag.Title = "Sample Site — Configuration"; } @inject IOptionsSnapshot Config
-
-

@ViewBag.Title

-

For your sample app to work, you should have a Kentico Kontent project containing content. Your app should be then configured with its project ID. You can either get it by signing in using your Kentico Kontent credentials or by signing up for a trial. Later, it will be converted to a free plan.

+
+

@ViewBag.Title

+

For your sample app to work, you should have a Kentico Kontent project containing content. Your app should be then configured with its project ID. You can either get it by signing in using your Kentico Kontent credentials or by signing up for a trial. Later, it will be converted to a free plan.

-@{ await Html.RenderPartialAsync("~/Areas/Admin/Views/Shared/_MessagesPartial.cshtml");} +@{ await Html.RenderPartialAsync("~/Areas/Admin/Views/Shared/_MessagesPartial.cshtml"); } -
-

Get a Project ID

-

You may wish to either select from existing projects or create a new sample project. The app will be configured with its project ID.

- - @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post, new { id = "set-configuration-from-kc" })) - { - @Html.HiddenFor(m => m.ProjectGuid, new { id = "project-guid-from-kc" }) - @Html.HiddenFor(m => m.EndAt, new { id = "end-at-from-kc" }) - @Html.HiddenFor(m => m.NewlyGeneratedProject, new { id = "newly-generated-project-from-kc" }) - } -
- -
-
- @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post)) +
+
+

Get a Project ID

+

You may wish to either select from existing projects or create a new sample project. The app will be configured with its project ID.

+ + @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post, new { id = "set-configuration-from-kc" })) { -

Set A Project ID Manually

-

Alternatively, you can configure your app manually by submitting a project ID below.

-
- @Html.ValidatedEditorFor(vm => vm.ProjectGuid) - -
- } -
-
-

Use the Shared Project

-

Alternatively, you may wish to use the shared project (project ID "@(Config.Value.DefaultDeliveryOptions.ProjectId)").

-

Note: You cannot edit content in the shared project.

- @using (Html.BeginForm("UseShared", "SelfConfig")) - { - + @Html.HiddenFor(m => m.ProjectGuid, new { id = "project-guid-from-kc" }) + @Html.HiddenFor(m => m.EndAt, new { id = "end-at-from-kc" }) + @Html.HiddenFor(m => m.NewlyGeneratedProject, new { id = "newly-generated-project-from-kc" }) }
+ +
+
+
+ @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post)) + { +

Set A Project ID Manually

+

Alternatively, you can configure your app manually by submitting a project ID below.

+
+ @Html.EditorFor(vm => vm.ProjectGuid, new { htmlAttributes = new { aria_label = "Project ID", autocomplete = "off", @class = "project-id-form__input", placeholder = "Project ID" } }) + @Html.ValidationMessageFor(vm => vm.ProjectGuid) + +
+ } +
+
+

Use the Shared Project

+

Alternatively, you may wish to use the shared project (project ID "@(Config.Value.DefaultDeliveryOptions.ProjectId)").

+

Note: You cannot edit content in the shared project.

+ @using (Html.BeginForm("UseShared", "SelfConfig")) + { + + } +
+
+
\ No newline at end of file diff --git a/DancingGoat/Areas/Admin/Views/SelfConfig/Wait.cshtml b/DancingGoat/Areas/Admin/Views/SelfConfig/Wait.cshtml index 3c1462be..153243f8 100644 --- a/DancingGoat/Areas/Admin/Views/SelfConfig/Wait.cshtml +++ b/DancingGoat/Areas/Admin/Views/SelfConfig/Wait.cshtml @@ -3,9 +3,8 @@ }
-
-

Waiting for the sample project to become ready...

-

+
+

Waiting for the sample project to become ready...

@await Html.PartialAsync("~/Areas/Admin/Views/Shared/_MessagesPartial.cshtml") diff --git a/DancingGoat/Areas/Admin/Views/Shared/Error.cshtml b/DancingGoat/Areas/Admin/Views/Shared/Error.cshtml index fa91cab1..f94b9d3e 100644 --- a/DancingGoat/Areas/Admin/Views/Shared/Error.cshtml +++ b/DancingGoat/Areas/Admin/Views/Shared/Error.cshtml @@ -1,8 +1,8 @@ @model DancingGoat.Areas.Admin.Models.MessageModel
-
-

Error: @Html.DisplayFor(vm => vm.Caption)

-

@Html.DisplayFor(vm => vm.Message)

+
+

Error: @Html.DisplayFor(vm => vm.Caption)

+

@Html.DisplayFor(vm => vm.Message)

\ No newline at end of file diff --git a/DancingGoat/Areas/Admin/Views/Shared/_Layout.cshtml b/DancingGoat/Areas/Admin/Views/Shared/_Layout.cshtml index f10d6a11..036cd068 100644 --- a/DancingGoat/Areas/Admin/Views/Shared/_Layout.cshtml +++ b/DancingGoat/Areas/Admin/Views/Shared/_Layout.cshtml @@ -1,6 +1,6 @@  - + @ViewBag.Title @@ -8,15 +8,11 @@ @RenderSection("headers", false) - -
-
-
- - Kentico Kontent logo - -
-
+ +
+ + +
@RenderBody() @RenderSection("Scripts", required: false) diff --git a/DancingGoat/Areas/Admin/Views/Shared/_MessagesPartial.cshtml b/DancingGoat/Areas/Admin/Views/Shared/_MessagesPartial.cshtml index 7c9324ce..2043e2e6 100644 --- a/DancingGoat/Areas/Admin/Views/Shared/_MessagesPartial.cshtml +++ b/DancingGoat/Areas/Admin/Views/Shared/_MessagesPartial.cshtml @@ -1,35 +1,36 @@ -@{ - const string imagePathPattern = "~/images/Admin/{0}.svg"; +@using DancingGoat.Areas.Admin.Models +@{ var routeDataMessageBody = Context.Request.Query["MessageBody"].FirstOrDefault(); var routeDataMessageType = Context.Request.Query["MessageType"].FirstOrDefault(); - DancingGoat.Areas.Admin.Models.MessageModel viewBagMessage = null; + MessageModel viewBagMessage = null; string imageName = null; - string imagePath = null; - if (!string.IsNullOrEmpty(ViewBag.Message)) + if (ViewBag.Message != null) { viewBagMessage = ViewBag.Message; - imageName = viewBagMessage.MessageType.ToString().ToLowerInvariant(); - imagePath = string.Format(imagePathPattern, imageName); + imageName = CreateImageNameFromMessageType(viewBagMessage.MessageType); } if (!string.IsNullOrEmpty(routeDataMessageType)) { - imageName = routeDataMessageType.ToString().ToLowerInvariant(); - imagePath = string.Format(imagePathPattern, imageName); + imageName = routeDataMessageType.ToLowerInvariant(); } } -@{ - void MessageImage(string source, string altText) +@functions +{ + static string CreateImageNameFromMessageType(MessageType messageType) + => messageType.ToString().ToLowerInvariant(); + + void MessageImage(string imageName) { - @altText +
} } @if ((!string.IsNullOrEmpty(ViewBag.ErrorMessage)) || (!string.IsNullOrEmpty(routeDataMessageBody))) { -
+
@{ if (viewBagMessage != null) @@ -37,7 +38,7 @@
- @{ MessageImage(Url.Content(imagePath), string.Empty); } + @{ MessageImage(imageName); }

@@ -53,7 +54,7 @@
- @{ MessageImage(Url.Content(imagePath), string.Empty); } + @{ MessageImage(imageName); }

@@ -73,7 +74,7 @@ else
- @{ MessageImage(Url.Content(string.Format(imagePathPattern, "error")), "Error"); } + @{ MessageImage(CreateImageNameFromMessageType(MessageType.Error)); }

diff --git a/DancingGoat/DancingGoat.csproj b/DancingGoat/DancingGoat.csproj index e5fa1ee9..d189b113 100644 --- a/DancingGoat/DancingGoat.csproj +++ b/DancingGoat/DancingGoat.csproj @@ -36,6 +36,10 @@ + + + + %WINDIR%\System32\WindowsPowerShell\v1.0\powershell.exe diff --git a/DancingGoat/Helpers/Extensions/HtmlHelperExtensions.cs b/DancingGoat/Helpers/Extensions/HtmlHelperExtensions.cs index 747539a9..ce48a5dc 100644 --- a/DancingGoat/Helpers/Extensions/HtmlHelperExtensions.cs +++ b/DancingGoat/Helpers/Extensions/HtmlHelperExtensions.cs @@ -20,49 +20,5 @@ public static IHtmlContent DateTimeFormattedFor(this IHtmlHelper { return htmlHelper.DisplayFor(expression, "DateTime", new DateTimeFormatterParameters { FormatCharacter = format }); } - - /// - /// Returns an HTML input element with a label and validation fields for each property in the object that is represented by the expression. - /// - /// The type of the model. - /// The type of the value. - /// The HTML helper instance that this method extends. - /// An expression that identifies the object that contains the displayed properties. - /// An explanation text describing usage of the rendered field. - public static IHtmlContent ValidatedEditorFor(this IHtmlHelper html, Expression> expression, string explanationText = "", string id = "") - { - IHtmlContent label; - IHtmlContent editor; - - if (!string.IsNullOrEmpty(id)) - { - label = html.LabelFor(expression, new { @for = id }); - editor = html.EditorFor(expression, new { id }); - } - else - { - label = html.LabelFor(expression); - editor = html.EditorFor(expression); - } - - var explanationTextHtml = ""; - - if (!string.IsNullOrEmpty(explanationText)) - { - explanationTextHtml = "
" + explanationText + "
"; - } - - var builder = new HtmlContentBuilder(); - builder.AppendHtml(@"
"); - builder.AppendHtml(label); - builder.AppendHtml(@"
"); - builder.AppendHtml(editor); - builder.AppendHtml(explanationTextHtml); - builder.AppendHtml(@"
"); - builder.AppendHtml(html.ValidationMessageFor(expression)); - builder.AppendHtml(@"
"); - - return builder; - } } } diff --git a/DancingGoat/Styles/admin/Admin.less b/DancingGoat/Styles/admin/Admin.less index 3112bc5a..62d45733 100644 --- a/DancingGoat/Styles/admin/Admin.less +++ b/DancingGoat/Styles/admin/Admin.less @@ -1,488 +1,112 @@ -@import "./variables.less"; -@import "./UserMessage.less"; +@import "./tokens/decision/border"; +@import "./tokens/decision/colors"; +@import "./tokens/decision/spacing"; +@import "./tokens/quarks/colors"; +@import "./tokens/quarks/gradients"; +@import "./tokens/quarks/typography"; +@import "./Button"; +@import "./fonts"; +@import "./layout"; +@import "./UserMessage"; + +*, *::before, *::after { + box-sizing: border-box; +} html, body { - height: 100%; - border: none; + color: @color-text-default-on-light; margin: 0; padding: 0; } -body { - #font; - background-color: @gray-main; - color: @gray-texts; - display: table; - width: 100%; +h1, h2, h3, h4, h5, h6 { + margin: 0; } p { - font-size: 1em; - font-weight: 400; - line-height: 1.55em; -} - -h1 { - #heading; - font-size: @h1-font-size; -} - -h2 { - #heading; - font-size: @h2-font-size; -} - -h3 { - #heading; - font-size: @h3-font-size; -} - -a:link, -a:active, -a:hover, -a:focus { - text-decoration: underline; -} - -a:link, a:visited { - color: @blue-main; -} - -header a:link, header a:visited { - color: #FFFFFF; -} - -a:active, -a:hover, -a:focus { - color: @link-hover; -} - -#font() { - font-family: 'Source Sans Pro'; -} - -#heading() { - font-weight: 300; - line-height: 1.2em; -} - -.content { - margin: 0 auto 0 auto; - max-width: 1140px; - overflow: visible; - padding-left: 30px; - padding-right: 30px; -} - -#header() { - background-color: @blue-main; - color: #FFFFFF; - overflow: auto; -} - -header { - #header; - padding-bottom: 4em; -} - - -section { - .content; - background-color: @gray-main; - padding-top: 1em; - padding-bottom: 1em; -} - -.sections-secondary { - padding-top: 3em; - padding-bottom: 3em; -} - -.sections-secondary::after, -.inline-controls::after { - content: ""; - clear: both; - display: block; -} - -@media only screen and (min-width: 768px) { - section.section-secondary { - float: left; - padding-left: 0; - padding-right: 6em; - width: 36%; - } -} - -@media only screen and (max-width: 767px) { - section.section-secondary { - float: none; - padding: 0; - } -} - -section.messages { - padding-top: 3em; - .content; -} - -.logotype-row { - #header; -} - -.logotype { - background-color: @button-primary-body; - display: inline-block; - width: 132px; - padding: 16px; -} - -.logotype-link { - display: block; - overflow: visible; - height: 44px; -} - -.inline-controls div, -.inline-controls p, -.inline-controls input { - display: block; - float: left; -} - -input[type="submit"] { - #textbox-button; - border-bottom-style: solid; - border-bottom-width: 4px; - color: @gray-main; - margin: 0.55em 0 0.55em 0; - text-transform: uppercase; -} - -input[type="submit"].button-primary { - background-color: @button-primary-body; - border-color: @button-primary-shadow; -} - -input[type="submit"].button-primary:active, -input[type="submit"].button-primary:hover, -input[type="submit"].button-primary:focus { - background-color: @button-primary-shadow; - border-color: @button-primary-shadow; -} - -input[type="submit"].button-secondary { - background-color: @button-secondary-body; - border-color: @button-secondary-shadow; -} - -input[type="submit"].button-secondary:active, -input[type="submit"].button-secondary:hover, -input[type="submit"].button-secondary:focus { - background-color: @button-secondary-shadow; - border-color: @button-secondary-shadow; -} - -input[type="submit"].button-tertiary { - background-color: @button-tertiary-body; - border-color: @button-tertiary-shadow; -} - -input[type="submit"].button-tertiary:active, -input[type="submit"].button-tertiary:hover, -input[type="submit"].button-tertiary:focus { - background-color: @button-tertiary-shadow; - border-color: @button-tertiary-shadow; -} - -.text-gray { - color: @gray-texts; -} - -#textbox-button() { - border-width: 0; - font-size: 0.888em; - font-weight: 300; - letter-spacing: 0.05em; - padding: 0.75em 0.75em 0.5em 0.75em; -} - -input[type="email"], -input[type="file"], -input[type="month"], -input[type="number"], -input[type="password"], -input[type="search"], -input[type="tel"], -input[type="text"], -input[type="time"], -input[type="url"], -input[type="week"], -textarea { - #textbox-button; - background-color: @gray-darkest; - border-bottom-width: 4px; - border-left-width: 4px; - border-style: solid; - border-color: @gray-darkest; - color: @gray-texts; -} - -input[type="email"]:focus, -input[type="file"]:focus, -input[type="month"]:focus, -input[type="number"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="text"]:focus, -input[type="time"]:focus, -input[type="url"]:focus, -input[type="week"]:focus, -textarea { - border-left-color: @blue-main; -} - -#checkbox-radio() { - background-position: left top; - background-repeat: no-repeat; - display: block; - height: 1em; - left: 0; - min-height: 18px; - min-width: 18px; - position: relative; - top: 9px; - width: 18px; -} - -.styled-checkbox, -.styled-radio { - background-color: #FFFFFF; - margin: 1em 0 1em 0; - padding: 0 1em 0 1em; - vertical-align: top; -} - -.styled-checkbox > input[type="checkbox"], -.styled-radio > input[type="radio"] { - position: absolute; - left: -999em; -} - -.styled-checkbox > label, -.styled-radio > label { - background-color: transparent; - display: block; - left: 0; - padding-left: 30px; - position: relative; - top: -10px; -} - -.styled-checkbox > input[type="checkbox"] + span { - #checkbox-radio; - background-image: url('/images/Admin/checkbox-unchecked.svg'); -} - -.styled-checkbox > input[type="checkbox"]:checked + span { - #checkbox-radio; - background-image: url('/images/Admin/checkbox-checked.svg'); -} - -.styled-radio > input[type="radio"] + span { - #checkbox-radio; - background-image: url('/images/Admin/radio-button.svg'); -} - -.styled-radio > input[type="radio"]:checked + span { - #checkbox-radio; - background-image: url('/images/Admin/radio-button-checked.svg'); -} - -.text-input-validation { - border-left: 4px solid @validation-message-color; -} - -form.form-panel .text-input { - // Mixins? - background-color: @gray-main; -} - -.form-panel-group { - width: 50%; -} - -.form-panel-group form h1, -.form-panel-group form h2, -.form-panel-group form h3 { - display: none; -} - -.tab { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - padding-bottom: 0.5em; - padding-top: 0.5em; - text-align: center; -} - -.tab-inactive { - background-color: @gray-darker; -} - -.tab-active { - background-color: #FFFFFF; -} - -.form-panel-tabs h1 a, -.form-panel-tabs h2 a, -.form-panel-tabs h3 a { - color: @gray-texts; - display: block; - text-decoration: none; - margin: auto; -} - -.form-panels, -.form-panel-tabs { - background-color: #FFFFFF; - display: block; margin: 0; - min-width: 20em; - padding: 0; + .typography-styles-ui-paragraph(); } -.form-panels { - background-color: #FFFFFF; - overflow: visible; +.headline-large { + .typography-styles-headline-large(); } -.form-panel { - padding: 2em; +.headline-medium { + .typography-styles-headline-medium(); } -.form-panel input:not([type="submit"]) { - width: 90%; +.gradient-desk { + .gradient-desk(); + min-height: 100vh; } -.form-group { - padding: 0.5em 0 0.5em 0; +.color-alert-text { + color: @color-alert-text; } -.field-validation-error, -#selectProjectValidation, -#termsAcceptedValidation { - color: @validation-message-color; - display: inherit; - padding: 1em 0 1em 0; +.paper { + background: @color-white; + border-radius: @border-radius-card; + padding: @spacing-xl; } -#selectProject .form-group { - max-height: 50em; - overflow: auto; +.margin-top-l { + margin-top: @spacing-l; } -#selectProject input[type="submit"] { - margin-top: 2em; +.margin-top-xl { + margin-top: @spacing-xl; } -label:not(.visible) { - display: none; +.padding-bottom-xl { + padding-bottom: @spacing-xl; } -.hidden { - display: none; -} - -.detached { - margin-top: 3em; -} - -.divided::before { - background-color: @gray-darker; - content: ""; +.logo-link { + text-decoration: none; display: block; - height: 2px; - .content; -} - -.padded-top-bottom { - padding-top: 1em; - padding-bottom: 1em; } -.no-left-padding { - padding-left: 0; +.logo { + height: @size-l; + margin: @spacing-xxl 0 @spacing-3xl; } -.full-height { - height: 100%; -} +.project-id-form { + display: flex; -.spinner-overlay { - background-color: rgba(0, 0, 0, 0.5); - height: 100%; - left: 0; - overflow: hidden; - position: fixed; - top: 0; - width: 100%; - z-index: 10000; -} + &__input { + .typography-styles-body-medium(); + line-height: normal; + border-radius: @border-radius-input; + border: @border-width-default solid @color-border-default; + padding: 0 @spacing-l; + min-width: 20ch; + width: 100%; + max-width: 40ch; -#centered() { - position: fixed; - left: 50%; - top: 50%; -} + @media (min-width: @screen-width-lg) { + max-width: none; + } -.percentage { - #centered; - color: #FFFFFF; - text-align: center; - vertical-align: middle; - line-height: 82px; - height: 82px; - width: 82px; - margin-left: -26px; - margin-top: -26px; -} + &::placeholder { + color: @color-text-hint; + opacity: 1; + } -.spinner { - #centered; - animation: spin 2s linear infinite; - border: 16px solid @gray-darkest; - border-radius: 50%; - border-top: 16px solid @blue-main; - height: 50px; - margin-left: -25px; - margin-top: -25px; - overflow: auto; - width: 50px; - //z-index: 10002; - -webkit-animation: spin 2s linear infinite; -} + &:hover { + border-color: @color-border-hover; + } -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); + &:focus { + border-color: @color-border-active; + outline: none; + } } - 100% { - -webkit-transform: rotate(360deg); + &__submit-button { + margin-left: @spacing-s; } } - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} \ No newline at end of file diff --git a/DancingGoat/Styles/admin/Button.less b/DancingGoat/Styles/admin/Button.less new file mode 100644 index 00000000..79145fe3 --- /dev/null +++ b/DancingGoat/Styles/admin/Button.less @@ -0,0 +1,49 @@ +@import "./tokens/decision/border"; +@import "./tokens/decision/colors"; +@import "./tokens/decision/focus"; +@import "./tokens/decision/spacing"; +@import "./tokens/quarks/colors"; +@import "./tokens/quarks/typography"; + +@primary-button-shadow: 0 8px 14px 2px rgba(@color-kentico-orange50, 0.14), 0 6px 20px 5px rgba(@color-kentico-orange50, 0.12), 0 8px 10px -5px rgba(@color-kentico-orange50, 0.2); +.shadow-focus-styles(@base-shadow: 0 0) { + @inner-shadow-focus: inset 0 0 3px 0 @color-focus; + @outer-shadow-focus: 0 0 0 @width-focus @color-focus; + box-shadow: @outer-shadow-focus, @inner-shadow-focus, @base-shadow; +} + +.borderless-button-style(@bgColor, @bgColorHover, @bgColorDisabled, @shadow: 0 0) { + background: @bgColor; + box-shadow: @shadow; + + &:focus { + .shadow-focus-styles(@shadow); + } + + &.active, + &:active, + &:hover { + background: @bgColorHover; + } + + &.disabled, + &[disabled] { + color: @color-text-disabled; + background: @bgColorDisabled; + box-shadow: none; + } +} + +.button { + .typography-styles-action-medium(); + border: 0; + border-radius: @border-radius-pill; + padding: @spacing-m @spacing-xl; + cursor: pointer; + text-transform: uppercase; +} + +.button-primary { + .borderless-button-style(@color-product, @color-product-hover, @color-background-disabled, @primary-button-shadow); + color: @color-text-default-on-dark; +} diff --git a/DancingGoat/Styles/admin/UserMessage.less b/DancingGoat/Styles/admin/UserMessage.less index 5e19c626..c7120b8f 100644 --- a/DancingGoat/Styles/admin/UserMessage.less +++ b/DancingGoat/Styles/admin/UserMessage.less @@ -1,34 +1,39 @@ -@import "./variables.less"; +@import "./tokens/decision/border"; +@import "./tokens/decision/colors"; +@import "./tokens/quarks/colors"; +@import "./tokens/quarks/icon-size"; -.user-message { - background-repeat: no-repeat; - background-position: 28px 28px; - background-size: 2em 2em; - border-collapse: separate; - color: #FFFFFF; - padding: 2em; +.hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } -.message-info { - background-color: @message-info-background; -} +.user-message { + margin-top: @spacing-xl; -.message-warning { - background-color: @message-warning-background; + & td { + padding: 0; + } } -.message-error { - background-color: @message-error-background; -} +.user-message__img { + height: @icon-size-m; + width: @icon-size-m; + margin-right: @spacing-s; + margin-top: 2px; -.user-message img, .user-message p { - margin: 0; -} + &--error { + background: url("/images/Admin/error-red.svg") no-repeat center center; + } -.user-message p { - padding: 0 0 0 20px; + &--info { + background: url("/images/Admin/info-black.svg") no-repeat center center; + } } - -table.user-message td { - vertical-align: top; -} \ No newline at end of file diff --git a/DancingGoat/Styles/admin/fonts.less b/DancingGoat/Styles/admin/fonts.less new file mode 100644 index 00000000..cdf80b70 --- /dev/null +++ b/DancingGoat/Styles/admin/fonts.less @@ -0,0 +1,31 @@ +@font-face { + font-family: "GT Walsheim Pro"; + font-style: normal; + font-weight: 400; + src: url("/fonts/GT-Walsheim-Regular.woff2") format("woff2"); + font-display: swap; +} + +@font-face { + font-family: "GT Walsheim Pro"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("/fonts/GT-Walsheim-Medium.woff2") format("woff2"); +} + +@font-face { + font-family: "GT Walsheim Pro"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url("/fonts/GT-Walsheim-Bold.woff2") format("woff2"); +} + +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("/fonts/Inter-Regular.woff2") format("woff2"); +} diff --git a/DancingGoat/Styles/admin/layout.less b/DancingGoat/Styles/admin/layout.less new file mode 100644 index 00000000..c81096f3 --- /dev/null +++ b/DancingGoat/Styles/admin/layout.less @@ -0,0 +1,27 @@ +@import "./tokens/quarks/spacing"; + +.kk-container { + margin: 0 auto; + padding: 0 @spacing-xl; + max-width: (1000px + 2 * @spacing-xl); +} + +.col { + flex: 1; +} + +@screen-width-lg: 900px; + +@media (min-width: @screen-width-lg) { + .row-lg { + display: flex; + } + + .row-lg--align-start { + align-items: flex-start; + } + + .col + .col { + margin-left: @spacing-xl; + } +} diff --git a/DancingGoat/Styles/admin/tokens/decision/border.less b/DancingGoat/Styles/admin/tokens/decision/border.less new file mode 100644 index 00000000..9b08ec43 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/border.less @@ -0,0 +1,10 @@ +@import "./spacing"; +@import "../quarks/border"; + +@border-radius-input: (@size-m / 2); +@border-width-default: 1px; +@border-width-input: @border-width-default; +@border-width-commented-element: (@border-width-default * 4); +@border-radius-card: @border-radius-l; +@border-radius-bar-item: @border-radius-m; +@border-radius-sidebar: @border-radius-l; diff --git a/DancingGoat/Styles/admin/tokens/decision/box-shadow.less b/DancingGoat/Styles/admin/tokens/decision/box-shadow.less new file mode 100644 index 00000000..c8ecb221 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/box-shadow.less @@ -0,0 +1 @@ +@box-shadow-sidebar: @box-shadow-l; diff --git a/DancingGoat/Styles/admin/tokens/decision/colors.less b/DancingGoat/Styles/admin/tokens/decision/colors.less new file mode 100644 index 00000000..82ea9334 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/colors.less @@ -0,0 +1,124 @@ +@color-link: @color-sky-blue70; +@color-link-hover: @color-sky-blue90; +@color-icon-default: @color-black; +@color-icon-large-default: @color-gray80; +@color-icon-default-on-dark: @color-white; + +@color-focus: @color-symbio-blue; + +@color-background-dragged: @color-background-disabled; +@color-background-hover: fade(@color-gray100, 10%); +@color-table-row-background-hover: overlay(@color-background-hover, @color-white); +@color-background-highlighted: @color-yellow10; +@color-background-selected: @color-kentico-orange10; +@color-background-selected-hover: @color-kentico-orange20; + +// Background color for text selection highlight - transparent to be able to combine with other text highlights (e.g. comments) +@color-background-text-selection: fade(@color-xperience-blue50, 30%); +// Background color for text selection highlight - not transparent to properly override the underlying element background instead of mixing with it +@color-background-block-selection: @color-xperience-blue20; + +@color-product: @color-kentico-orange55; +@color-product-hover: @color-kentico-orange70; +@color-product-hover-complementary: @color-kentico-orange10; +@color-product-selected: @color-kentico-orange70; +@color-product-disabled: @color-kentico-orange30; + +@color-success-text: @color-persian-green60; +@color-success-icon: @color-persian-green50; +@color-success-background-high-emphasis: @color-persian-green60; + +@color-info-background-low-emphasis: @color-navy-blue10; +@color-info-background-high-emphasis: @color-navy-blue60; +@color-info-text: @color-navy-blue60; +@color-info-icon: @color-navy-blue50; + +@color-warning-background-low-emphasis: @color-yellow10; +@color-warning-background-high-emphasis: @color-yellow40; +@color-warning-text: @color-yellow60; +@color-warning-icon: @color-yellow50; + +@color-alert-background-low-emphasis: @color-red10; +@color-alert-background-high-emphasis: @color-red60; +@color-alert-text: @color-red60; +@color-alert-icon: @color-red50; + +@color-alert-hover: @color-red70; +@color-alert-focus: @color-red60; +@color-alert-active: @color-alert-hover; + +@color-folder-icon: @color-yellow30; +@color-folder-icon-active: @color-yellow40; + +@color-background-disabled: @color-gray20; +@color-background-disabled-complementary: @color-gray30; +@color-background-element-disabled: @color-gray10; +@color-icon-disabled: @color-gray50; + +@color-background-block-selection: @color-xperience-blue20; + +@color-border-default: @color-gray40; +@color-border-alert: @color-alert-text; +@color-border-disabled: @color-gray30; +@color-border-active: @color-cool-gray100; +@color-border-hover: @color-border-active; + +@color-input-background: transparent; +@color-input-border: @color-border-default; + +@color-forbidden-content: @color-border-alert; +@color-forbidden-formatting-background: rgba(@color-red40, 0.35); + +@color-skeleton-background: @color-cool-gray10; +.color-skeleton-content() { + .gradient-cool-gray-very-light(); +} + +@color-text-default-on-light: @color-gray100; +@color-text-default-on-dark: @color-white; +@color-text-disabled: @color-gray50; +@color-text-hint: @color-gray60; +@color-text-low-emphasis: @color-gray70; +@color-text-hint-hover: @color-cool-gray100; +@color-text-hint-selected: @color-text-default-on-light; + +@color-toggle-icon-selected: @color-icon-large-default; +@color-toggle-text-selected: @color-text-default-on-light; +@color-toggle-text: @color-gray70; +@color-toggle-icon: @color-gray60; + +@color-comment-background-highlighted: @color-yellow20; +@color-comment-background-selected: @color-yellow30; +@color-suggestion-background-highlighted: @color-purple20; +@color-suggestion-background-selected: @color-purple30; + +@color-overlay-background: fade(@color-navy-blue70, 40%); + +@color-sidebar-background: rgba(@color-navy-blue30, 0.2); + +@color-divider-default: @color-cool-gray20; +@color-divider-table: @color-navy-blue30; +@color-divider-disabled: @color-gray40; + +@color-monospace-background: rgba(@color-gray50, 0.35); + +@guard-gradients-angle-to-right: 90; +@guard-gradients-angle-to-left: 270; +@guard-gradients-angle-to-up: 360; +@guard-gradients-angle-to-bottom: 180; + +.compose-guard-color(@angle) { + background-image: linear-gradient(@angle, @color-xperience-blue10, transparent); +} + +@color-diff-format: @color-sky-blue20; +@color-diff-format-border: @color-sky-blue60; +@color-diff-negative: @color-red20; +@color-diff-negative-border: @color-red60; +@color-diff-positive: @color-neon-green10; +@color-diff-positive-border: @color-neon-green60; + +@color-bar-item-background: @color-navy-blue20; +@color-bar-item-background-hover: @color-navy-blue30; +@color-bar-item-background-expansion: @color-white; +@color-bar-item-title: @color-text-low-emphasis; diff --git a/DancingGoat/Styles/admin/tokens/decision/decision.less b/DancingGoat/Styles/admin/tokens/decision/decision.less new file mode 100644 index 00000000..bf5421d0 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/decision.less @@ -0,0 +1,7 @@ +@import "border.less"; +@import "box-shadow.less"; +@import "colors.less"; +@import "focus.less"; +@import "spacing.less"; +@import "transitions.less"; +@import "typography.less"; diff --git a/DancingGoat/Styles/admin/tokens/decision/focus.less b/DancingGoat/Styles/admin/tokens/decision/focus.less new file mode 100644 index 00000000..1e0b4d55 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/focus.less @@ -0,0 +1,2 @@ +@width-focus: 2px; +@radius-focus: @border-radius-s; diff --git a/DancingGoat/Styles/admin/tokens/decision/spacing.less b/DancingGoat/Styles/admin/tokens/decision/spacing.less new file mode 100644 index 00000000..2fcea461 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/spacing.less @@ -0,0 +1,64 @@ +@import "../quarks/spacing"; + +@size-xs: @spacing-xl; +@size-s: @spacing-xxl; +@size-m: @spacing-3xl; +@size-l: @spacing-4xl; +@size-xl: @spacing-5xl; + +@spacing-element-label: (1.25 * @grid-unit); +@spacing-element-caption: @spacing-s; +@spacing-element-edge-vertical: @spacing-l; + +@spacing-popup-distance: @spacing-xs; + +@spacing-input-small: @spacing-s; +@spacing-input-large: @spacing-l; + +@size-input-height: @size-m; + +@spacing-between-buttons-horizontal: @spacing-s; +@spacing-between-buttons-vertical: @spacing-l; +@spacing-between-tags: @spacing-xs; + +@spacing-hierarchy-indent: @spacing-xl; + +@spacing-toggle-vertical: @spacing-s; +@spacing-toggle-horizontal: @spacing-m; + +@spacing-card: @spacing-xl; + +@spacing-element-edge-horizontal: @spacing-l; + +@size-guard: (12 * @grid-unit); + +@size-navigation-bar-width: (12 * @grid-unit); + +@spacing-main-layout-left: @spacing-l; +@spacing-main-layout-top: @spacing-xl; +@spacing-main-layout-right: @spacing-xl; +@spacing-main-layout-bottom: @spacing-5xl; +@spacing-vertical-tabs-right: @spacing-l; +@spacing-status-bar-vertical: @spacing-l; + +@size-button-icon-quinary: 16px; +@size-button-icon: 20px; + +@size-menu-item-leading-element: (3.5 * @grid-unit); +@size-menu-item-trailing-element: (2.5 * @grid-unit); + +@size-sidebar-placeholder-width: @size-s; +@size-sidebar-width: (46 * @grid-unit); + +@size-tag-height: @size-xs; + +@size-assigment-status-width: 6px; + +@size-bar-item-bar: @size-l; +@size-bar-item-bar-expanded: @size-xl; +@spacing-bar-item-vertical: @spacing-m; +@spacing-bar-item-content-horizontal: @spacing-s; +@spacing-bar-item-content-horizontal-compact: @spacing-xs; +@spacing-bar-item-expansion: @spacing-card; + +@spacing-content-group-tabs: 1px; diff --git a/DancingGoat/Styles/admin/tokens/decision/transitions.less b/DancingGoat/Styles/admin/tokens/decision/transitions.less new file mode 100644 index 00000000..a1ade4bb --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/transitions.less @@ -0,0 +1,3 @@ +@import "../quarks/transitions.less"; + +@transition-bg-hover: @transition-250; diff --git a/DancingGoat/Styles/admin/tokens/decision/typography.less b/DancingGoat/Styles/admin/tokens/decision/typography.less new file mode 100644 index 00000000..9d561839 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/decision/typography.less @@ -0,0 +1,3 @@ +.typography-card-headline() { + .typography-styles-headline-large(); +} diff --git a/DancingGoat/Styles/admin/tokens/quarks/border.less b/DancingGoat/Styles/admin/tokens/quarks/border.less new file mode 100644 index 00000000..d4c777dc --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/border.less @@ -0,0 +1,7 @@ +@import "./spacing"; + +@border-radius-none: 0; +@border-radius-s: (0.5 * @grid-unit); +@border-radius-m: @grid-unit; +@border-radius-l: (2 * @grid-unit); +@border-radius-pill: 5000px; diff --git a/DancingGoat/Styles/admin/tokens/quarks/box-shadow.less b/DancingGoat/Styles/admin/tokens/quarks/box-shadow.less new file mode 100644 index 00000000..cbb93b05 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/box-shadow.less @@ -0,0 +1,9 @@ +@base-box-shadow-color: @color-black; +@additional-box-shadow-color: @color-navy-blue90; + +@base-box-shadow: 0 0 @grid-unit 0 fade(@base-box-shadow-color, 3%); + +@box-shadow-xs: @base-box-shadow; +@box-shadow-s: @base-box-shadow, 0 @grid-unit (1.75 * @grid-unit) 0 fade(@additional-box-shadow-color, 8%); +@box-shadow-m: @base-box-shadow, 0 @grid-unit (1.75 * @grid-unit) 0 fade(@additional-box-shadow-color, 16%); +@box-shadow-l: @base-box-shadow, 0 @grid-unit (4 * @grid-unit) 0 fade(@additional-box-shadow-color, 24%); diff --git a/DancingGoat/Styles/admin/tokens/quarks/colors.less b/DancingGoat/Styles/admin/tokens/quarks/colors.less new file mode 100644 index 00000000..e5e87abd --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/colors.less @@ -0,0 +1,127 @@ +@color-black: #000000; +@color-cool-gray10: #F3F4F5; +@color-cool-gray20: #DDE0E4; +@color-cool-gray30: #C2C7CF; +@color-cool-gray40: #A1A9B6; +@color-cool-gray50: #868F9D; +@color-cool-gray60: #69707C; +@color-cool-gray70: #4D535C; +@color-cool-gray80: #363940; +@color-cool-gray90: #23262B; +@color-cool-gray100: #141619; +@color-gray10: #F3F3F3; +@color-gray20: #DFDFDF; +@color-gray30: #C6C6C6; +@color-gray40: #A8A8A8; +@color-gray50: #8C8C8C; +@color-gray60: #6F6F6F; +@color-gray70: #525252; +@color-gray80: #393939; +@color-gray90: #262626; +@color-gray100: #151515; +@color-kentico-orange10: #FFF0EF; +@color-kentico-orange20: #FFD6D1; +@color-kentico-orange30: #FFB4A9; +@color-kentico-orange40: #FF866D; +@color-kentico-orange50: #F45C23; +@color-kentico-orange60: #C64300; +@color-kentico-orange70: #953000; +@color-kentico-orange80: #6A2000; +@color-kentico-orange90: #491400; +@color-kentico-orange100: #2E0900; +@color-kentico-orange-original: #F05A22; +@color-kentico-orange55: #DB3C00; +@color-navy-blue10: #EEF3FC; +@color-navy-blue20: #D3DFF3; +@color-navy-blue30: #AFC5E9; +@color-navy-blue40: #86A5DA; +@color-navy-blue50: #6B8BC2; +@color-navy-blue60: #506E9F; +@color-navy-blue70: #37517C; +@color-navy-blue80: #253756; +@color-navy-blue90: #10213C; +@color-navy-blue100: #040E20; +@color-neon-green10: #D9FFC0; +@color-neon-green20: #9BF800; +@color-neon-green30: #89DC00; +@color-neon-green40: #74BB00; +@color-neon-green50: #609D00; +@color-neon-green60: #4B7C00; +@color-neon-green70: #365C00; +@color-neon-green80: #254000; +@color-neon-green90: #172B00; +@color-neon-green100: #0B1900; +@color-persian-green10: #CAFFEB; +@color-persian-green20: #00FDC7; +@color-persian-green30: #00E0B1; +@color-persian-green40: #00BF96; +@color-persian-green50: #00A07D; +@color-persian-green60: #007F63; +@color-persian-green70: #005E49; +@color-persian-green80: #004232; +@color-persian-green90: #002C20; +@color-persian-green100: #001A12; +@color-purple10: #F6EEFB; +@color-purple20: #E7D1F5; +@color-purple30: #D3ACEC; +@color-purple40: #BC7DE3; +@color-purple50: #A654D9; +@color-purple60: #8A2BC5; +@color-purple70: #672092; +@color-purple80: #461664; +@color-purple90: #2C0E3F; +@color-purple100: #15061D; +@color-red10: #FFEBEB; +@color-red20: #FEC7C7; +@color-red30: #FE9A9A; +@color-red40: #FD6262; +@color-red50: #FD3030; +@color-red60: #DB0000; +@color-red70: #B10202; +@color-red80: #790101; +@color-red90: #4C0101; +@color-red100: #230000; +@color-rose10: #FEECF5; +@color-rose20: #FCCAE2; +@color-rose30: #F99FCB; +@color-rose40: #F66AAE; +@color-rose50: #EE508A; +@color-rose60: #D30D6D; +@color-rose70: #A80B57; +@color-rose80: #73073B; +@color-rose90: #480525; +@color-rose100: #220211; +@color-sky-blue10: #E8F5FF; +@color-sky-blue20: #BDE5FF; +@color-sky-blue30: #74D1FF; +@color-sky-blue40: #00B6EB; +@color-sky-blue50: #0099C7; +@color-sky-blue60: #00799D; +@color-sky-blue70: #005975; +@color-sky-blue80: #003E53; +@color-sky-blue90: #002938; +@color-sky-blue100: #001822; +@color-symbio-blue: #0093ff; +@color-transparent: transparent; +@color-white: #ffffff; +@color-xperience-blue10: #EEF3FC; +@color-xperience-blue20: #D1D9F5; +@color-xperience-blue30: #ABBAED; +@color-xperience-blue40: #7D95E3; +@color-xperience-blue50: #5875D5; +@color-xperience-blue60: #3655BA; +@color-xperience-blue70: #283F8A; +@color-xperience-blue80: #1C2B5F; +@color-xperience-blue90: #111B3B; +@color-xperience-blue100: #00081F; +@color-xperience-original: #3553b8; +@color-yellow10: #FFF1EA; +@color-yellow20: #FFD8C2; +@color-yellow30: #FFB784; +@color-yellow40: #F49100; +@color-yellow50: #CD7900; +@color-yellow60: #A35F00; +@color-yellow70: #7A4600; +@color-yellow80: #563000; +@color-yellow90: #3B1F00; +@color-yellow100: #241100; diff --git a/DancingGoat/Styles/admin/tokens/quarks/font-family.less b/DancingGoat/Styles/admin/tokens/quarks/font-family.less new file mode 100644 index 00000000..7c407c6b --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/font-family.less @@ -0,0 +1,2 @@ +@font-family-product-primary: "GT Walsheim Pro", sans-serif; +@font-family-product-secondary: Inter, sans-serif; diff --git a/DancingGoat/Styles/admin/tokens/quarks/font-size.less b/DancingGoat/Styles/admin/tokens/quarks/font-size.less new file mode 100644 index 00000000..f1377337 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/font-size.less @@ -0,0 +1,7 @@ +@font-size-xs: 11px; +@font-size-s: 12px; +@font-size-m: 14px; +@font-size-l: 16px; +@font-size-xl: 24px; + +@font-size-element: 17.5px; diff --git a/DancingGoat/Styles/admin/tokens/quarks/font-weight.less b/DancingGoat/Styles/admin/tokens/quarks/font-weight.less new file mode 100644 index 00000000..045c0be3 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/font-weight.less @@ -0,0 +1,3 @@ +@font-weight-regular: 400; +@font-weight-medium: 500; +@font-weight-bold: 700; diff --git a/DancingGoat/Styles/admin/tokens/quarks/gradients.less b/DancingGoat/Styles/admin/tokens/quarks/gradients.less new file mode 100644 index 00000000..3963832a --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/gradients.less @@ -0,0 +1,121 @@ +@gradient-angle-to-left: 270deg; +@gradient-angle-to-right: 90deg; +@gradient-angle-to-bottom: 180deg; +@gradient-angle-to-bottom-right: 135deg; + + +.create-linear-gradient-to-bottom(@color-from, @color-to) { + background-image: linear-gradient(@gradient-angle-to-bottom, @color-from, @color-to); +} + +.create-linear-gradient-to-right(@color-from, @color-to) { + background-image: linear-gradient(@gradient-angle-to-right, @color-from, @color-to); +} + +.create-linear-gradient-to-bottom-right(@color-from, @color-to) { + background-image: linear-gradient(@gradient-angle-to-bottom-right, @color-from, @color-to); +} + +.gradient-cool-gray-dark() { + .create-linear-gradient-to-bottom(@color-cool-gray70, @color-cool-gray60); +} + +.gradient-gray-dark() { + .create-linear-gradient-to-bottom(@color-gray70, @color-gray60); +} + +.gradient-desk() { + .create-linear-gradient-to-bottom-right(@color-cool-gray10, @color-navy-blue20); +} + +.gradient-kentico-orange-dark() { + .create-linear-gradient-to-bottom(@color-kentico-orange70, @color-kentico-orange60); +} + +.gradient-red-dark() { + .create-linear-gradient-to-bottom(@color-red70, @color-red60); +} + +.gradient-yellow-dark() { + .create-linear-gradient-to-bottom(@color-yellow70, @color-yellow60); +} + +.gradient-navy-blue-dark() { + .create-linear-gradient-to-bottom(@color-navy-blue70, @color-navy-blue60); +} + +.gradient-neon-green-dark() { + .create-linear-gradient-to-bottom(@color-neon-green70, @color-neon-green60); +} + +.gradient-persian-green-dark() { + .create-linear-gradient-to-bottom(@color-persian-green70, @color-persian-green60); +} + +.gradient-sky-blue-dark() { + .create-linear-gradient-to-bottom(@color-sky-blue70, @color-sky-blue60); +} + +.gradient-xperience-blue-dark() { + .create-linear-gradient-to-bottom(@color-xperience-blue70, @color-xperience-blue60); +} + +.gradient-purple-dark() { + .create-linear-gradient-to-bottom(@color-purple70, @color-purple60); +} + +.gradient-rose-dark() { + .create-linear-gradient-to-bottom(@color-rose70, @color-rose60); +} + +.gradient-cool-gray-light() { + .create-linear-gradient-to-bottom(@color-cool-gray40, @color-cool-gray30); +} + +.gradient-navy-blue-light() { + .create-linear-gradient-to-bottom(@color-navy-blue40, @color-navy-blue30); +} + +.gradient-gray-light() { + .create-linear-gradient-to-bottom(@color-gray40, @color-gray30); +} + +.gradient-kentico-orange-light() { + .create-linear-gradient-to-bottom(@color-kentico-orange40, @color-kentico-orange30); +} + +.gradient-red-light() { + .create-linear-gradient-to-bottom(@color-red40, @color-red30); +} + +.gradient-yellow-light() { + .create-linear-gradient-to-bottom(@color-yellow40, @color-yellow30); +} + +.gradient-neon-green-light() { + .create-linear-gradient-to-bottom(@color-neon-green40, @color-neon-green30); +} + +.gradient-persian-green-light() { + .create-linear-gradient-to-bottom(@color-persian-green40, @color-persian-green30); +} + +.gradient-sky-blue-light() { + .create-linear-gradient-to-bottom(@color-sky-blue40, @color-sky-blue30); +} + +.gradient-xperience-blue-light() { + .create-linear-gradient-to-bottom(@color-xperience-blue40, @color-xperience-blue30); +} + +.gradient-purple-light() { + .create-linear-gradient-to-bottom(@color-purple40, @color-purple30); +} + +.gradient-rose-light() { + .create-linear-gradient-to-bottom(@color-rose40, @color-rose30); +} + +.gradient-cool-gray-very-light() { + .create-linear-gradient-to-right(@color-cool-gray30, @color-cool-gray20); +} diff --git a/DancingGoat/Styles/admin/tokens/quarks/icon-size.less b/DancingGoat/Styles/admin/tokens/quarks/icon-size.less new file mode 100644 index 00000000..b3b7b782 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/icon-size.less @@ -0,0 +1,7 @@ +@import "./spacing"; + +@icon-size-xs: (1.5 * @grid-unit); +@icon-size-s: (2 * @grid-unit); +@icon-size-m: (2.5 * @grid-unit); +@icon-size-l: (3 * @grid-unit); +@icon-size-xl: (4 * @grid-unit); diff --git a/DancingGoat/Styles/admin/tokens/quarks/line-height.less b/DancingGoat/Styles/admin/tokens/quarks/line-height.less new file mode 100644 index 00000000..b0367f0f --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/line-height.less @@ -0,0 +1,6 @@ +@line-height-xs: 11px; +@line-height-s: 14px; +@line-height-m: 16px; +@line-height-l: 20px; +@line-height-xl: 24px; +@line-height-xxl: 32px; diff --git a/DancingGoat/Styles/admin/tokens/quarks/quarks.less b/DancingGoat/Styles/admin/tokens/quarks/quarks.less new file mode 100644 index 00000000..8590e400 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/quarks.less @@ -0,0 +1,14 @@ +@import "border.less"; +@import "box-shadow.less"; +@import "colors.less"; +@import "font-family.less"; +@import "font-size.less"; +@import "font-weight.less"; +@import "gradients.less"; +@import "icon-size.less"; +@import "line-height.less"; +@import "shadow.less"; +@import "spacing.less"; +@import "transitions.less"; +@import "typography.less"; +@import "z-index.less"; diff --git a/DancingGoat/Styles/admin/tokens/quarks/shadow.less b/DancingGoat/Styles/admin/tokens/quarks/shadow.less new file mode 100644 index 00000000..64b9a4a4 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/shadow.less @@ -0,0 +1,33 @@ +@primary-button-shadow: 0 8px 14px 2px rgba(@color-kentico-orange50, 0.14), 0 6px 20px 5px rgba(@color-kentico-orange50, 0.12), 0 8px 10px -5px rgba(@color-kentico-orange50, 0.2); +@not-focus-visible: ~":not(.focus-visible)"; + +.shadow-focus-styles(@base-shadow: 0 0) { + @inner-shadow-focus: inset 0 0 3px 0 @color-focus; + @outer-shadow-focus: 0 0 0 @width-focus @color-focus; + box-shadow: @outer-shadow-focus, @inner-shadow-focus, @base-shadow; + + .js-focus-visible &:focus@{not-focus-visible} { + box-shadow: @base-shadow; + } +} + +/* use only in cases where overflow: hidden is unavoidable */ +.shadow-focus-styles-inner-only(@base-shadow: 0 0) { + @inner-shadow-blur: inset 0 0 3px 2px @color-focus; + @inner-shadow-outline: inset 0 0 0 @width-focus @color-focus; + box-shadow: @inner-shadow-outline, @inner-shadow-blur, @base-shadow; + + .js-focus-visible &:focus@{not-focus-visible} { + box-shadow: @base-shadow; + } +} + +.remove-shadow-focus-styles(@base-shadow: none) { + .js-focus-visible & { + box-shadow: @base-shadow; + } +} + +.primary-button-shadow() { + box-shadow: @primary-button-shadow; +} diff --git a/DancingGoat/Styles/admin/tokens/quarks/spacing.less b/DancingGoat/Styles/admin/tokens/quarks/spacing.less new file mode 100644 index 00000000..4f4cca8b --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/spacing.less @@ -0,0 +1,13 @@ +@grid-unit: 8px; + +@spacing-micro: (0.25 * @grid-unit); +@spacing-xs: (0.5 * @grid-unit); +@spacing-s: (1 * @grid-unit); +@spacing-m: (1.5 * @grid-unit); +@spacing-l: (2 * @grid-unit); +@spacing-xl: (3 * @grid-unit); +@spacing-xxl: (4 * @grid-unit); +@spacing-3xl: (5 * @grid-unit); +@spacing-4xl: (6 * @grid-unit); +@spacing-5xl: (7 * @grid-unit); +@spacing-6xl: (8 * @grid-unit); diff --git a/DancingGoat/Styles/admin/tokens/quarks/transitions.less b/DancingGoat/Styles/admin/tokens/quarks/transitions.less new file mode 100644 index 00000000..a8d95fa5 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/transitions.less @@ -0,0 +1,2 @@ +@easing: cubic-bezier(0.23, 1, 0.32, 1); +@transition-250: 250ms @easing 50ms; diff --git a/DancingGoat/Styles/admin/tokens/quarks/typography.less b/DancingGoat/Styles/admin/tokens/quarks/typography.less new file mode 100644 index 00000000..9f08a525 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/typography.less @@ -0,0 +1,137 @@ +@import "../quarks/font-family"; +@import "../quarks/font-size"; +@import "../quarks/font-weight"; +@import "../quarks/line-height"; + +.create-typography-style(@font-family, @font-size, @font-weight, @line-height) { + font-family: @font-family; + font-size: @font-size; + font-weight: @font-weight; + line-height: @line-height; +} + +.create-action-style(@font-family, @font-size, @font-weight, @line-height) { + font-family: @font-family; + font-size: @font-size; + font-weight: @font-weight; + line-height: @line-height; + letter-spacing: @letter-spacing-l; + text-transform: uppercase; +} + +@letter-spacing-l: 0.1ch; + +.typography-styles-headline-large() { + .create-typography-style(@font-family-product-primary, @font-size-xl, @font-weight-bold, @line-height-xxl); +} + +.typography-styles-headline-medium() { + .create-typography-style(@font-family-product-primary, @font-size-l, @font-weight-bold, @line-height-xl); +} + +.typography-styles-headline-small() { + .create-typography-style(@font-family-product-primary, @font-size-m, @font-weight-bold, @line-height-m); +} + +.typography-styles-subheadline() { + .create-typography-style(@font-family-product-primary, @font-size-m, @font-weight-regular, @line-height-m); +} + +.typography-styles-subheadline-large() { + .create-typography-style(@font-family-product-primary, @font-size-l, @font-weight-regular, @line-height-l); +} + +.typography-styles-title-large() { + .create-typography-style(@font-family-product-primary, @font-size-m, @font-weight-medium, @line-height-m); +} + +.typography-styles-title-medium() { + .create-typography-style(@font-family-product-primary, @font-size-s, @font-weight-medium, @line-height-m); +} + +.typography-styles-title-small() { + .create-typography-style(@font-family-product-primary, @font-size-xs, @font-weight-medium, @line-height-s); +} + +.typography-styles-body-large() { + .create-typography-style(@font-family-product-secondary, @font-size-l, @font-weight-regular, @line-height-xl); +} + +.typography-styles-body-medium() { + .create-typography-style(@font-family-product-secondary, @font-size-m, @font-weight-regular, @line-height-l); +} + +.typography-styles-body-small() { + .create-typography-style(@font-family-product-secondary, @font-size-s, @font-weight-regular, @line-height-m); +} + +.typography-styles-body-large-emphasis() { + .create-typography-style(@font-family-product-secondary, @font-size-l, @font-weight-medium, @line-height-xl); +} + +.typography-styles-body-medium-emphasis() { + .create-typography-style(@font-family-product-secondary, @font-size-m, @font-weight-medium, @line-height-l); +} + +.typography-styles-body-small-emphasis() { + .create-typography-style(@font-family-product-secondary, @font-size-s, @font-weight-medium, @line-height-m); +} + +.typography-styles-label-large() { + .create-typography-style(@font-family-product-primary, @font-size-m, @font-weight-regular, @line-height-m); +} + +.typography-styles-label-medium() { + .create-typography-style(@font-family-product-primary, @font-size-s, @font-weight-regular, @line-height-m); +} + +.typography-styles-label-small() { + .create-typography-style(@font-family-product-primary, @font-size-xs, @font-weight-regular, @line-height-xs); +} + +.typography-styles-label-large-emphasis() { + .create-typography-style(@font-family-product-primary, @font-size-m, @font-weight-medium, @line-height-m); +} + +.typography-styles-label-medium-emphasis() { + .create-typography-style(@font-family-product-primary, @font-size-s, @font-weight-medium, @line-height-m); +} + +.typography-styles-label-small-emphasis() { + .create-typography-style(@font-family-product-primary, @font-size-xs, @font-weight-medium, @line-height-xs); +} + +.typography-styles-caption() { + .create-typography-style(@font-family-product-primary, @font-size-xs, @font-weight-regular, @line-height-xs); +} + +.typography-styles-action-large() { + .create-action-style(@font-family-product-primary, @font-size-m, @font-weight-bold, @line-height-xl); +} + +.typography-styles-action-medium() { + .create-action-style(@font-family-product-primary, @font-size-s, @font-weight-bold, @line-height-m); +} + +.typography-styles-action-small() { + .create-action-style(@font-family-product-primary, @font-size-s, @font-weight-medium, @line-height-m); +} + +.typography-styles-ui-paragraph() { + .create-typography-style(@font-family-product-primary, @font-size-l, @font-weight-regular, @line-height-xl); +} + +.typography-styles-font-icon(@icon-size) { + font-family: "kentico-icons-reskin"; + font-size: @icon-size; + // Better Font Rendering on OSX + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-style: normal; + font-weight: @font-weight-regular; + font-variant: normal; + line-height: 1; + letter-spacing: normal; + text-transform: none; + speak: none; +} diff --git a/DancingGoat/Styles/admin/tokens/quarks/z-index.less b/DancingGoat/Styles/admin/tokens/quarks/z-index.less new file mode 100644 index 00000000..92aff3f4 --- /dev/null +++ b/DancingGoat/Styles/admin/tokens/quarks/z-index.less @@ -0,0 +1,12 @@ +@z-index-one: 1; +@z-index-two: 2; +@z-index-one-hundred: 100; +@z-index-two-hundred: 200; +@z-index-five-hundred: 500; +@z-index-six-hundred: 600; +@z-index-seven-hundred: 700; +@z-index-eight-hundred: 800; +@z-index-nine-hundred: 900; +@z-index-two-thousand-four-hundred: 2400; +@z-index-9999: 9999; // z-index of tippy https://atomiks.github.io/tippyjs/v6/all-props/#zindex +@z-index-ten-thousand: 10000; // we need to place some modals over all other elements included tippy components and it's z-index is 9999 diff --git a/DancingGoat/Styles/admin/variables.less b/DancingGoat/Styles/admin/variables.less deleted file mode 100644 index 1d5dad0a..00000000 --- a/DancingGoat/Styles/admin/variables.less +++ /dev/null @@ -1,26 +0,0 @@ -@blue-main: #008AE1; -@gray-main: #F7F7F7; -@gray-darker: #E5E5E5; -@gray-darkest: #EBEBEB; -@gray-textbox-hint: #A3A2A2; -@gray-texts: #4F4D4B; - -@message-error-background: #F38480; -@message-warning-background: #FF9776; -@message-info-background: #89CFFA; -@validation-message-color: #F05D4E; - -@button-primary-body: #EF5A22; -@button-primary-shadow: #DB531F; -@button-secondary-body: #008AE1; -@button-secondary-shadow: #0077C2; -@button-tertiary-body: #79B751; -@button-tertiary-shadow: #62A644; - -@link-hover: #F05A22; - -@base-unit: 18px; -@h1-font-size: 2.827em; -@h2-font-size: 1.999em; -@h3-font-size: 1.414em; -@button-font-size: 0.888em; \ No newline at end of file diff --git a/DancingGoat/Styles/site/Site.less b/DancingGoat/Styles/site/Site.less index f009eaf3..ccdbaafb 100644 --- a/DancingGoat/Styles/site/Site.less +++ b/DancingGoat/Styles/site/Site.less @@ -9,7 +9,7 @@ @import "./Gallery.less"; @import "./YourAccount.less"; @import "./EditMode.less"; -@import "../admin/UserMessage.less"; +@import "./UserMessage"; /*# Page wrap #*/ html, body { diff --git a/DancingGoat/Styles/site/UserMessage.less b/DancingGoat/Styles/site/UserMessage.less new file mode 100644 index 00000000..49831ada --- /dev/null +++ b/DancingGoat/Styles/site/UserMessage.less @@ -0,0 +1,44 @@ +@message-error-background: #F38480; +@message-info-background: #89CFFA; + +.user-message { + background-repeat: no-repeat; + background-position: 28px 28px; + background-size: 2em 2em; + border-collapse: separate; + color: #FFFFFF; + padding: 2em; +} + +.message-info { + background-color: @message-info-background; +} + +.message-error { + background-color: @message-error-background; +} + +.user-message__img { + height: 44px; + width: 44px; + + &--error { + background: url("/images/error-white.svg") no-repeat center center; + } + + &--info { + background: url("/images/info-white.svg") no-repeat center center; + } +} + +.user-message p { + margin: 0; +} + +.user-message p { + padding: 0 0 0 20px; +} + +table.user-message td { + vertical-align: top; +} \ No newline at end of file diff --git a/DancingGoat/wwwroot/fonts/GT-Walsheim-Bold.woff2 b/DancingGoat/wwwroot/fonts/GT-Walsheim-Bold.woff2 new file mode 100644 index 00000000..3845bf60 Binary files /dev/null and b/DancingGoat/wwwroot/fonts/GT-Walsheim-Bold.woff2 differ diff --git a/DancingGoat/wwwroot/fonts/GT-Walsheim-Medium.woff2 b/DancingGoat/wwwroot/fonts/GT-Walsheim-Medium.woff2 new file mode 100644 index 00000000..e23d21ee Binary files /dev/null and b/DancingGoat/wwwroot/fonts/GT-Walsheim-Medium.woff2 differ diff --git a/DancingGoat/wwwroot/fonts/GT-Walsheim-Regular.woff2 b/DancingGoat/wwwroot/fonts/GT-Walsheim-Regular.woff2 new file mode 100644 index 00000000..f1ebea96 Binary files /dev/null and b/DancingGoat/wwwroot/fonts/GT-Walsheim-Regular.woff2 differ diff --git a/DancingGoat/wwwroot/fonts/Inter-Regular.woff2 b/DancingGoat/wwwroot/fonts/Inter-Regular.woff2 new file mode 100644 index 00000000..d5ffd2a1 Binary files /dev/null and b/DancingGoat/wwwroot/fonts/Inter-Regular.woff2 differ diff --git a/DancingGoat/wwwroot/images/Admin/error-red.svg b/DancingGoat/wwwroot/images/Admin/error-red.svg new file mode 100644 index 00000000..d0626c04 --- /dev/null +++ b/DancingGoat/wwwroot/images/Admin/error-red.svg @@ -0,0 +1 @@ +error \ No newline at end of file diff --git a/DancingGoat/wwwroot/images/Admin/info-black.svg b/DancingGoat/wwwroot/images/Admin/info-black.svg new file mode 100644 index 00000000..75be94c1 --- /dev/null +++ b/DancingGoat/wwwroot/images/Admin/info-black.svg @@ -0,0 +1 @@ +info \ No newline at end of file diff --git a/DancingGoat/wwwroot/images/Admin/kk-logo-hor-white-neg-rgb.svg b/DancingGoat/wwwroot/images/Admin/kk-logo-hor-white-neg-rgb.svg deleted file mode 100644 index a1b4cfdf..00000000 --- a/DancingGoat/wwwroot/images/Admin/kk-logo-hor-white-neg-rgb.svg +++ /dev/null @@ -1 +0,0 @@ -kk-logo-hor-white-neg-rgb \ No newline at end of file diff --git a/DancingGoat/wwwroot/images/Admin/kk-logo.svg b/DancingGoat/wwwroot/images/Admin/kk-logo.svg new file mode 100644 index 00000000..78e0eef2 --- /dev/null +++ b/DancingGoat/wwwroot/images/Admin/kk-logo.svg @@ -0,0 +1 @@ +kk-logo-hor-color-pos-rgb \ No newline at end of file diff --git a/DancingGoat/wwwroot/images/Admin/error.svg b/DancingGoat/wwwroot/images/error-white.svg similarity index 100% rename from DancingGoat/wwwroot/images/Admin/error.svg rename to DancingGoat/wwwroot/images/error-white.svg diff --git a/DancingGoat/wwwroot/images/Admin/info.svg b/DancingGoat/wwwroot/images/info-white.svg similarity index 100% rename from DancingGoat/wwwroot/images/Admin/info.svg rename to DancingGoat/wwwroot/images/info-white.svg