ionic-framework/core/src/components/item-option/item-option.ionic.scss at 538870853510960f9ce5e60dc6ef6a434a2bb80e · ionic-team/ionic-framework · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./item-option.common";

// Ionic Item Option
// --------------------------------------------------

:host {
  @include globals.padding(0);
  @include globals.typography(globals.$ion-body-action-sm);
}

.button-native {
  @include globals.padding(globals.$ion-space-200);

  min-width: globals.$ion-scale-1600;
  height: globals.$ion-scale-1600;
}

::slotted([slot="top"]) {
  @include globals.margin(0, 0, globals.$ion-space-100, 0);
}

::slotted([slot="bottom"]) {
  @include globals.margin(globals.$ion-space-100, 0, 0, 0);
}

::slotted([slot="start"]) {
  @include globals.margin(0, globals.$ion-space-100, 0, 0);
}

::slotted([slot="end"]) {
  @include globals.margin(0, 0, 0, globals.$ion-space-100);
}

::slotted(ion-icon),
::slotted([slot="icon-only"]) {
  @include globals.margin(0);

  width: globals.$ion-scale-500;

  min-width: initial;
  height: globals.$ion-scale-500;
}

// Item Option Shapes
// --------------------------------------------------

/* Round */
:host(.item-option-round) {
  @include globals.border-radius(globals.$ion-border-radius-300);
}

/* Soft */
:host(.item-option-soft) {
  @include globals.border-radius(globals.$ion-border-radius-200);
}

/* Rectangular */
:host(.item-option-rectangular) {
  @include globals.border-radius(globals.$ion-border-radius-0);
}

// Item Option States
// --------------------------------------------------

/* Disabled */
:host(.item-option-disabled)::after {
  @include globals.disabled-state();
}

:host(.item-option-disabled) .button-native {
  opacity: 1;
}

// Subtle Item Option
// --------------------------------------------------

:host(.item-option-subtle) {
  --background: #{globals.ion-color(primary, base, $subtle: true)};
  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
  --color: #{globals.ion-color(primary, contrast, $subtle: true)};
}

:host(.item-option-subtle.ion-color) {
  background: globals.current-color(base, $subtle: true);
  color: globals.current-color(contrast, $subtle: true);
}

// Bold Item Option
// --------------------------------------------------

:host(.item-option-bold) {
  --background: #{globals.ion-color(primary, base)};
  --background-activated: #{globals.ion-color(primary, shade)};
  --color: #{globals.ion-color(primary, contrast)};
}

:host(.item-option-bold.ion-color) {
  background: globals.current-color(base);
  color: globals.current-color(contrast);
}

:host(.item-option-expand-threshold) {
  filter: brightness(0.92);
}