Mercurial > zeropaste

comparison app/assets/stylesheets/application.scss @ 395:26f8c634052c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Complete rework.
author nanaya <me@myconan.net>
date Sat, 27 Jun 2015 14:46:01 +0900
parents 433bc70e1781
children 851432f21603
comparison
equal deleted inserted replaced
394:6feb8c2574a1 395:26f8c634052c
1 @import "variables"; 1 $spacing: 10px;
2 @import "components"; 2 $screen-sm: 600px;
3 @import "layout"; 3
4 4 $bg: #fff;
5 @import "new-paste"; 5 $gray: #eee;
6 @import "show-paste"; 6 $gray-dark: darken($gray, 20%);
7 $danger: scale-color(#f00, $lightness: 90%);
8 $danger-dark: darken($danger, 60%);
9 $info: scale-color(#0f0, $lightness: 90%);
10 $info-dark: darken($info, 60%);
11 $primary: scale-color(#06f, $lightness: 90%);
12
13 $monospace: Consolas, monospace;
14
15 *, ::before, ::after {
16 position: relative;
17 box-sizing: border-box;
18 }
19
20 body, button, input, textarea {
21 font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
22 font-size: 12px;
23 }
24
25 p, h1 {
26 margin: 0px;
27 }
28
29 html {
30 height: 100%;
31 }
32
33 body {
34 height: 100%;
35 margin: 0px;
36 display: flex;
37 flex-direction: column;
38 }
39
40 .input-url1 { display: none !important; }
41
42 .monospaced {
43 font-family: $monospace;
44 }
45
46 .header {
47 background-color: $gray;
48 display: flex;
49 justify-content: space-between;
50 align-items: center;
51 padding: $spacing;
52 flex: none;
53 }
54
55 .main {
56 display: flex;
57 flex: 1 0 auto;
58 padding: $spacing;
59 flex-direction: column;
60 }
61
62 .main-form {
63 flex: 1;
64 display: flex;
65 flex-direction: column;
66 }
67
68 .main-textarea-container {
69 flex: 1 0 auto;
70 display: flex;
71 }
72
73 .main-textarea {
74 width: 100%;
75 }
76
77 .settings {
78 display: flex;
79 margin: $spacing (-$spacing/2) 0px;
80 }
81
82 .settings-item {
83 display: flex;
84 flex-direction: column;
85 flex: 1;
86 margin: 0px $spacing/2;
87
88 @media (min-width: $screen-sm) {
89 flex: none;
90 }
91 }
92
93 .settings-label {
94 margin-bottom: $spacing/2;
95 }
96
97 .actions {
98 display: flex;
99 }
100
101 .action {
102 flex: 1;
103 @media (min-width: $screen-sm) {
104 flex: none;
105 }
106 margin: 0px $spacing/2;
107 }
108
109 .alert {
110 padding: $spacing;
111 flex: none;
112 }
113
114 .alert-danger {
115 background-color: $danger;
116 }
117
118 .alert-info {
119 background-color: $info;
120 }
121
122 .field_with_errors {
123 display: flex;
124 width: 100%;
125 border: 1px solid $danger-dark;
126 }
127
128 .paste-content {
129 flex: 1 0 auto;
130 display: flex;
131 flex-direction: column;
132 }
133
134 .paste-nav {
135 display: flex;
136 justify-content: space-between;
137 margin: 0px (-$spacing/2);
138 }
139
140 .paste-nav-item {
141 flex: 1 1 0px;
142 text-align: center;
143 border: 1px solid $gray-dark;
144 margin: 0px $spacing/2 $spacing;
145 padding: $spacing;
146
147 &:hover {
148 background-color: $gray-dark;
149 }
150 }
151
152 .active {
153 background-color: $gray;
154 }
155
156 .paste-plain {
157 background-color: $gray;
158 margin: 0px;
159 border: 1px solid $gray-dark;
160 flex: none;
161 }
162
163 .line {
164 background-color: $bg;
165 flex: 1;
166 }
167
168 .paste-nav--bottom {
169 margin-top: $spacing;
170 margin-bottom: 0px;
171 }
172
173 .settings-item--inline {
174 flex-direction: row;
175 flex: 1;
176 }
177
178 .action--horizontal-minimum {
179 margin: 0px;
180 flex: none;
181 }
182
183 .settings-group {
184 display: flex;
185 flex-direction: column;
186 width: 100%;
187
188 @media (min-width: $screen-sm) {
189 flex-direction: row;
190 justify-content: space-between;
191 }
192 }
193
194 .btn {
195 box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.1) inset;
196 border: 0px;
197 background-color: $gray;
198 cursor: pointer;
199 padding: $spacing ($spacing*2);
200 }
201
202 @mixin btn-color($color) {
203 background-color: $color;
204
205 &:hover {
206 background-color: darken($color, 10%);
207 }
208
209 &:focus {
210 background-color: darken($color, 20%);
211 }
212 }
213
214 .btn--primary {
215 @include btn-color($primary);
216 }
217
218 .btn--danger {
219 @include btn-color($danger);
220 }
221
222 .btn--min-width {
223 flex: none;
224 }