summaryrefslogtreecommitdiff
path: root/src/web/app/desktop/ui.styl
blob: 058271876b0889a157b70bde166c229e2114e1f8 (plain)
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
@import "../../const"

button
	font-family sans-serif

	*
		pointer-events none

button.ui
.button.ui
	display inline-block
	cursor pointer
	padding 0 14px
	margin 0
	min-width 100px
	line-height 38px
	font-size 14px
	color #888
	text-decoration none
	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
	border solid 1px #e2e2e2
	border-radius 4px
	outline none

	&:focus
		&:after
			content ""
			pointer-events none
			position absolute
			top -5px
			right -5px
			bottom -5px
			left -5px
			border 2px solid rgba($theme-color, 0.3)
			border-radius 8px

	&:disabled
		opacity 0.7
		cursor default

	&:hover
		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
		border-color #dcdcdc

	&:active
		background #ececec
		border-color #dcdcdc

	&.primary
		color $theme-color-foreground
		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
		border solid 1px lighten($theme-color, 15%)

		&:not(:disabled)
			font-weight bold

		&:hover:not(:disabled)
			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
			border-color $theme-color

		&:active:not(:disabled)
			background $theme-color
			border-color $theme-color

input:not([type]).ui
input[type='text'].ui
input[type='password'].ui
input[type='email'].ui
input[type='date'].ui
input[type='number'].ui
textarea.ui
	display block
	padding 10px
	width 100%
	height 40px
	font-family sans-serif
	font-size 16px
	color #55595c
	border solid 1px #dadada
	border-radius 4px

	&:hover
		border-color #b0b0b0

	&:focus
		border-color $theme-color

textarea.ui
	min-width 100%
	max-width 100%
	min-height 64px

.ui.info
	display block
	margin 1em 0
	padding 0 1em
	font-size 90%
	color rgba(#000, 0.87)
	background #f8f8f9
	border solid 1px rgba(34, 36, 38, 0.22)
	border-radius 4px

	> p
		opacity 0.8

		> [data-fa]:first-child
			margin-right 0.25em

	&.warn
		color #573a08
		background #FFFAF3
		border-color #C9BA9B

.ui.from.group
	display block
	margin 16px 0

	> p:first-child
		margin 0 0 6px 0
		font-size 90%
		font-weight bold
		color rgba(#373a3c, 0.9)