JavaScript.com/client/stylesheets/structures/_inlineConsole.sass at node-upgrade · Azbar-coder/JavaScript.com · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// *************************************
//
//   Inline Console
//   -> Single-line console input
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .inlineConsole(correct|incorrect)
//
//   .inlineConsole-icon
//   .inlineConsole-input
//
// *************************************

.inlineConsole
  position: relative

// -------------------------------------
//   States
// -------------------------------------

// ----- Correct ----- //

.inlineConsole.is-correct

  .inlineConsole-btn
    background: $btn--c-background
    opacity: 1
    transform: translateX(0)
    visibility: visible

  .inlineConsole-icon--caret
    opacity: 0
    visibility: hidden

  .inlineConsole-icon--check
    opacity: 1
    transform: translateY(-50%)
    visibility: visible

  .inlineConsole-input
    background: $inlineConsole-correct-background
    padding-left: $b-space-l

// ----- Incorrect ----- //

.inlineConsole.is-incorrect

  .inlineConsole-input
    background: $inlineConsole-incorrect-background

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Button ----- //

.inlineConsole-btn
  left: 0
  line-height: 2.5
  opacity: 0
  padding: 0 $b-space
  position: absolute
  top: 110%
  transform: translateX(-20%)
  transition: $inlineConsole-transition-duration ($inlineConsole-transition-duration - 0.3) ease-in-out, background 0.3s ease-in-out
  visibility: hidden

  +respond-to($g-s)
    left: auto
    right: 3px // FIXME: Magic number!
    top: 3px // FIXME: Magic number!

// ----- Card ----- //

.inlineConsole-card
  padding-bottom: $b-space-l + 2em // FIXME: Magic number!

  +respond-to($g-s)
    padding-bottom: $b-space

// ----- Icon ----- //

.inlineConsole-icon
  color: $c-text-invert
  display: inline-block
  font-weight: bold
  left: $b-space
  position: absolute
  top: 50%
  transition: $inlineConsole-transition-duration ($inlineConsole-transition-duration - 0.3) ease-in-out
  vertical-align: middle
  z-index: 1

// Icon: Caret

.inlineConsole-icon--caret
  color: $c-subdue
  transform: translateY(-50%)

  &::before
    content: '>'

// Icon: Check

.inlineConsole-icon--check
  opacity: 0
  transform: translateY(0)
  visibility: hidden

  &::before
    content: '✓'

// ----- Input ----- //

.inlineConsole-input
  background: $inlineConsole-input-background
  border-color: transparent
  color: $c-text-invert
  font-family: $b-fontFamily-mono
  padding-left: $b-space-l
  transition: $inlineConsole-transition

  &:focus
    background-color: $inlineConsole-input-background
    border-color: transparent
    color: $c-text-invert