tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CSS elevation helpers

Browse Source
This commit is contained in:
mkpaz 2022-09-28 20:14:54 +04:00
parent a238eb62e4
commit a71ed61b22
6 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Card.java
View File

@ -20,7 +20,6 @@ public class Card extends VBox {
public static final String CSS = """
.card {
-fx-background-color: -color-bg-default;
-fx-effect: dropshadow(three-pass-box, -color-shadow-default, 8, 0.5, 0, 2);
}
.card > .subtitle {
-fx-text-fill: -color-fg-muted;

7
sampler/src/main/java/atlantafx/sampler/page/showcase/widget/CardSample.java
View File

@ -50,6 +50,7 @@ public class CardSample extends HBox {
private Card textFooterCard() {
var card = new Card();
card.getStyleClass().add(Styles.ELEVATED_1);
card.setMinWidth(CARD_WIDTH);
card.setMaxWidth(CARD_WIDTH);
@ -67,6 +68,7 @@ public class CardSample extends HBox {
private Card imageTextCard() {
var card = new Card();
card.getStyleClass().add(Styles.ELEVATED_4);
card.setMinWidth(CARD_WIDTH);
card.setMaxWidth(CARD_WIDTH);
@ -83,10 +85,11 @@ public class CardSample extends HBox {
private Card titleTextCard() {
var card = new Card();
card.getStyleClass().add(Styles.INTERACTIVE);
card.setMinWidth(CARD_WIDTH);
card.setMaxWidth(CARD_WIDTH);
card.setTitle("Title");
card.setTitle("Interactive");
card.setSubtitle("Subtitle");
var text = new Text(FAKER.lorem().paragraph());
@ -97,6 +100,7 @@ public class CardSample extends HBox {
private Card titleImageCard() {
var card = new Card();
card.getStyleClass().add(Styles.ELEVATED_2);
card.setMinWidth(CARD_WIDTH);
card.setMaxWidth(CARD_WIDTH);
@ -115,6 +119,7 @@ public class CardSample extends HBox {
private Card quoteCard() {
var card = new Card();
card.getStyleClass().add(Styles.ELEVATED_3);
card.setMinWidth(CARD_WIDTH);
card.setMaxWidth(CARD_WIDTH);

10
styles/src/components/_titled-pane.scss
View File

@ -10,18 +10,14 @@ $padding-y: 10px !default;
$margin-arrow: 10px !default;
$margin-content: 20px !default;
// for elevation darker than bg color should be used for both light and dark modes
$elevation-color: -color-shadow-default !default;
$elevation-interactive: map-get(cfg.$elevation, 2) !default;
.titled-pane {
-fx-background-color: -color-bg-default;
-fx-text-fill: -color-fg-default;
-fx-effect: none;
@each $level,$radius in cfg.$elevation {
@each $level, $radius in cfg.$elevation {
&.elevated-#{$level} {
@include effects.shadow($elevation-color, $radius);
@include effects.shadow(cfg.$elevation-color, $radius);
}
}
@ -90,7 +86,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
}
&.interactive:hover {
@include effects.shadow($elevation-color, $elevation-interactive);
@include effects.shadow(cfg.$elevation-color, cfg.$elevation-interactive);
}
&:show-mnemonics>.mnemonic-underline {

14
styles/src/general/_extras.scss Normal file
View File

@ -0,0 +1,14 @@
// SPDX-License-Identifier: MIT
@use "../settings/config" as cfg;
@use "../settings/effects";
@each $level, $radius in cfg.$elevation {
.elevated-#{$level} {
@include effects.shadow(cfg.$elevation-color, $radius);
}
}
.interactive:hover {
@include effects.shadow(cfg.$elevation-color, cfg.$elevation-interactive);
}

1
styles/src/general/_index.scss
View File

@ -2,3 +2,4 @@
@forward "root";
@forward "text";
@forward "extras";

2
styles/src/settings/_config.scss
View File

@ -38,6 +38,8 @@ $icon-size: 18px !default;
// elevation (level : radius)
$elevation: (1: 2px, 2: 8px, 3: 16px, 4: 20px) !default;
$elevation-color: -color-shadow-default !default;
$elevation-interactive: map-get($elevation, 2) !default;
// check box, radio button
$checkbox-mark-size: 0.75em !default;