hikari-components 0.3.12

Core UI components (buttons, inputs, tables, modals) for the Hikari design system
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

// NumberInput Component Styles
// Uses InputWrapper for layout, only number-input-specific styles here

@use '../../../../theme/styles/variables.scss' as vars;

// ============================================
// NumberInput Wrapper
// ============================================

.hi-number-input-wrapper {
  display: inline-flex;

  // NumberInput should have fixed width for content
  .hi-input-wrapper {
    width: auto;
    min-width: 100px;

    // Input should be centered and have fixed width
    .hi-input-wrapper-input {
      flex: 0 0 auto;
      width: 60px;
      min-width: 60px;

      input {
        text-align: center;
        padding: 0 4px;
      }
    }
  }
}

// ============================================
// Dark Theme Support
// ============================================

[data-theme="dark"] .hi-number-input-wrapper,
[data-theme="tairitsu"] .hi-number-input-wrapper {
  // Inherits from InputWrapper dark theme
}