Browse Source

Adds raised card varaition, darkens floating shadow slightly

pull/4046/head
Jack Lukic 8 years ago
parent
commit
fc518a3e34
4 changed files with 29 additions and 4 deletions
  1. 1
      RELEASE-NOTES.md
  2. 10
      src/definitions/views/card.less
  3. 8
      src/themes/default/globals/site.variables
  4. 14
      src/themes/default/views/card.variables

1
RELEASE-NOTES.md

@ -92,6 +92,7 @@
- **Project** - NPM depenendencies have all been updated to latest stable releases - **Project** - NPM depenendencies have all been updated to latest stable releases
- **Button** - Added variables for configuring `disabled` background image and box shadow. - **Button** - Added variables for configuring `disabled` background image and box shadow.
- **Site** - Added colored box shadow defaults. `ui message` now includes individual colored border shadows based on new site defaults. - **Site** - Added colored box shadow defaults. `ui message` now includes individual colored border shadows based on new site defaults.
- **Card** - Added `raised` card variation **Thanks @yoris** #2955
- **Dropdown** - Adds new setting `minCharacters` which sets the minimum number of characters required to start filtering results #3886 - **Dropdown** - Adds new setting `minCharacters` which sets the minimum number of characters required to start filtering results #3886
- **Dropdown** - Added `1px` offset for current text so that the text position cursor does not overlap first pixel of text. - **Dropdown** - Added `1px` offset for current text so that the text position cursor does not overlap first pixel of text.
- **Dropdown** - Dropdown will now automatically focus on `search` inside of a menu after it is opened. - **Dropdown** - Dropdown will now automatically focus on `search` inside of a menu after it is opened.

10
src/definitions/views/card.less

@ -429,7 +429,17 @@
.ui.raised.card { .ui.raised.card {
box-shadow: @raisedShadow; box-shadow: @raisedShadow;
} }
.ui.raised.cards a.card:hover,
.ui.link.cards .raised.card:hover,
a.ui.raised.card:hover,
.ui.link.raised.card:hover {
box-shadow: @raisedShadowHover;
}
.ui.raised.cards > .card,
.ui.raised.card {
box-shadow: @raisedShadow;
}
/*------------------- /*-------------------
Centered Centered
--------------------*/ --------------------*/

8
src/themes/default/globals/site.variables

@ -305,7 +305,7 @@
; ;
@floatingShadow: @floatingShadow:
0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 4px 0px rgba(34, 36, 38, 0.12),
0px 2px 10px 0px rgba(34, 36, 38, 0.08)
0px 2px 10px 0px rgba(34, 36, 38, 0.15)
; ;
/******************************* /*******************************
@ -699,6 +699,12 @@
Hover Hover
--------------------*/ --------------------*/
/*--- Shadows ---*/
@floatingShadowHover:
0px 2px 4px 0px rgba(34, 36, 38, 0.15),
0px 2px 10px 0px rgba(34, 36, 38, 0.25)
;
/*--- Colors ---*/ /*--- Colors ---*/
@primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative); @primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative);
@secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative); @secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative);

14
src/themes/default/views/card.variables

@ -10,9 +10,6 @@
@shadowDistance: 1px; @shadowDistance: 1px;
@shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor; @shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor;
/* Raised Shadow */
@raisedShadow: @floatingShadow;
/* Card */ /* Card */
@fontFamily: @pageFont; @fontFamily: @pageFont;
@display: flex; @display: flex;
@ -163,6 +160,17 @@
@borderShadow @borderShadow
; ;
/* Raised */
@raisedShadow:
@borderShadow,
@floatingShadow
;
@raisedShadowHover:
@borderShadow,
@floatingShadowHover
;
/* Card Count */ /* Card Count */
@wideCardSpacing: 1em; @wideCardSpacing: 1em;
@cardSpacing: 0.75em; @cardSpacing: 0.75em;

Loading…
Cancel
Save