📦 ionic-team / ionic-framework

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Material Design Default Theme
// --------------------------------------------------
// This file should only contain variables that are
// used to theme the application colors for Material
// Design.

// Material Design General Colors
// --------------------------------------------------
$backdrop-md-color:                         var(--ion-backdrop-color, #000);
$border-md-color:                           var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd)));
$overlay-md-background-color:               var(--ion-overlay-background-color, var(--ion-background-color, #fff));

// Material Design Tabs & Tab bar
// --------------------------------------------------
$tabbar-md-background:                      var(--ion-tab-bar-background, $background-color);
$tabbar-md-background-focused:              var(--ion-tab-bar-background-focused, get-color-shade(#fff));
$tabbar-md-border-color:                    var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .07)))));
$tabbar-md-color:                           var(--ion-tab-bar-color, $text-color-step-350);
$tabbar-md-color-selected:                  var(--ion-tab-bar-color-selected, ion-color(primary, base));

// Material Design Toolbar
// --------------------------------------------------
$toolbar-md-background:                     var(--ion-toolbar-background, $background-color);
$toolbar-md-border-color:                   var(--ion-toolbar-border-color, $border-md-color);
$toolbar-md-color:                          var(--ion-toolbar-color, var(--ion-text-color, #424242));

// Material Design List & List Items
// --------------------------------------------------
$item-md-background:                        var(--ion-item-background, $background-color);
$item-md-border-color:                      var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .13)))));
$item-md-color:                             var(--ion-item-color, $text-color);

// Material Design Card
// --------------------------------------------------
$card-md-background:                        var(--ion-card-background, $item-md-background);
$card-md-color:                             var(--ion-card-color, var(--ion-item-color, $text-color-step-450));

// Material Design Form Controls
// --------------------------------------------------
/// This value comes from the Material Design spec:
/// https://m3.material.io/components/text-fields/specs
$form-control-md-disabled-opacity:          0.38;