From 5eb6a489b32d1df2fc863c3904f318d0d8312068 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 11 Jun 2015 17:30:44 -0400 Subject: [PATCH] FSearch: Fixes border radius, matching box shadow with global, increases vertical padding --- src/definitions/modules/search.less | 31 +++++++++++++++++++-- src/themes/default/modules/search.variables | 22 ++++++++------- 2 files changed, 41 insertions(+), 12 deletions(-) diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index f749bffd6..cb1d77d52 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -80,8 +80,15 @@ border-radius: @resultsBorderRadius; box-shadow: @resultsBoxShadow; + border: @resultsBorder; z-index: @resultsZIndex; } +.ui.search > .results :first-child { + border-radius: @resultsBorderRadius @resultsBorderRadius 0em 0em; +} +.ui.search > .results :last-child { + border-radius: 0em 0em @resultsBorderRadius @resultsBorderRadius; +} /*-------------- Result @@ -176,6 +183,16 @@ States *******************************/ +/*-------------------- + Focus +---------------------*/ + +.ui.search > .prompt:focus { + border-color: @promptFocusBorderColor; + background: @promptFocusBackground; + color: @promptFocusColor; +} + /*-------------------- Loading ---------------------*/ @@ -232,10 +249,10 @@ Active ---------------*/ -.ui.search > .results .category.active { +.ui.category.search > .results .category.active { background: @categoryActiveBackground; } -.ui.search > .results .category.active > .name { +.ui.category.search > .results .category.active > .name { color: @categoryNameActiveColor; } @@ -272,10 +289,20 @@ border-bottom: @categoryDivider; transition: @categoryTransition; } + +/* Last Category */ .ui.category.search > .results .category:last-child { border-bottom: none; } +/* First / Last */ +.ui.category.search > .results .category:first-child .name + .result { + border-radius: 0em @resultsBorderRadius 0em 0em; +} +.ui.category.search > .results .category:last-child .result:last-child { + border-radius: 0em 0em @resultsBorderRadius 0em; +} + /* Category Result */ .ui.category.search > .results .category .result { background: @categoryResultBackground; diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables index f41533ff3..b871a38b6 100644 --- a/src/themes/default/modules/search.variables +++ b/src/themes/default/modules/search.variables @@ -25,11 +25,12 @@ @resultsBackground: #FFFFFF; @resultsDistance: 0.5em; @resultsBorderRadius: @defaultBorderRadius; -@resultsBoxShadow: 0px 1px 3px 1px @borderColor; +@resultsBorder: 1px solid @solidBorderColor; +@resultsBoxShadow: @floatingShadow; /* Result */ @resultFontSize: 1em; -@resultVerticalPadding: @relativeMini; +@resultVerticalPadding: @relativeTiny; @resultHorizontalPadding: @relativeLarge; @resultPadding: @resultVerticalPadding @resultHorizontalPadding; @resultTextColor: @textColor; @@ -84,6 +85,11 @@ States *******************************/ +/* Focus */ +@promptFocusBackground: @promptBackground; +@promptFocusBorderColor: @selectedBorderColor; +@promptFocusColor: @selectedTextColor; + /* Hover */ @resultHoverBackground: @offWhite; @actionHoverBackground: #E0E0E0; @@ -99,7 +105,7 @@ @categoryNameActiveColor: @textColor; /* Active Result */ -@resultActiveBorderLeft: transparent; +@resultActiveBorderLeft: @internalBorderColor; @resultActiveBackground: @darkWhite; @resultActiveBoxShadow: none; @resultActiveTitleColor: @darkTextColor; @@ -114,10 +120,10 @@ /* Category */ @categoryBackground: @darkWhite; @categoryBoxShadow: none; -@categoryDivider: 1px solid @borderColor; +@categoryDivider: 1px solid @internalBorderColor; @categoryTransition: - background 0.2s ease, - border-color 0.2s ease + background @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing ; @categoryResultsWidth: 28em; @@ -137,7 +143,3 @@ @categoryNamePadding: 0.4em 1em; @categoryNameFontWeight: bold; @categoryNameColor: @lightTextColor; - -/* Sizes */ -@medium: 1em; -@large: 1.1em;