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
- **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.
- **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** - 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.

10
src/definitions/views/card.less

@ -429,7 +429,17 @@
.ui.raised.card {
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
--------------------*/

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

@ -305,7 +305,7 @@
;
@floatingShadow:
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
--------------------*/
/*--- Shadows ---*/
@floatingShadowHover:
0px 2px 4px 0px rgba(34, 36, 38, 0.15),
0px 2px 10px 0px rgba(34, 36, 38, 0.25)
;
/*--- Colors ---*/
@primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative);
@secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative);

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

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

Loading…
Cancel
Save