ionic-framework/core/src/components/spinner/spinner.ionic.scss at 55cac74c956e79b26441ace20d9df791cc9ce14e · 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
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./spinner.common";

// Ionic Spinner
// --------------------------------------------------

:host {
  --color: #{globals.$ion-primitives-neutral-800};

  width: globals.$ion-scale-700;
  height: globals.$ion-scale-700;
}

:host(.ion-color-medium) {
  color: #{globals.ion-color(medium, contrast, $subtle: true)};
}

// Spinner: lines / lines-small / lines-sharp / lines-sharp-small
// --------------------------------------------------

:host(.spinner-lines) line,
:host(.spinner-lines-small) line {
  stroke-width: globals.$ion-scale-150;
}

:host(.spinner-lines-sharp) line,
:host(.spinner-lines-sharp-small) line {
  stroke-width: globals.$ion-scale-100;
}

// Sizes
// --------------------------------------------------

/* Extra Small */
:host(.spinner-xsmall) {
  width: globals.$ion-scale-600;
  height: globals.$ion-scale-600;
}

/* Small */
:host(.spinner-small) {
  width: globals.$ion-scale-800;
  height: globals.$ion-scale-800;
}

/* Medium */
:host(.spinner-medium) {
  width: globals.$ion-scale-1000;
  height: globals.$ion-scale-1000;
}

/* Large */
:host(.spinner-large) {
  width: globals.$ion-scale-1200;
  height: globals.$ion-scale-1200;
}

/* Extra Large */
:host(.spinner-xlarge) {
  width: globals.$ion-scale-1400;
  height: globals.$ion-scale-1400;
}