Mercurial > zeropaste

comparison app/assets/stylesheets/application.scss @ 398:851432f21603

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Nope, failing at redesigning.
author nanaya <me@myconan.net>
date Sun, 06 Sep 2015 03:52:52 +0900
parents 26f8c634052c
children 6bb805283daf
comparison
equal deleted inserted replaced
395:26f8c634052c 398:851432f21603
1 $spacing: 10px; 1 @import "bootstrap";
2 $screen-sm: 600px; 2 @import "highlightjs";
3
4 $bg: #fff;
5 $gray: #eee;
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 3
40 .input-url1 { display: none !important; } 4 .input-url1 { display: none !important; }
41 5
42 .monospaced { 6 .paste-paste {
43 font-family: $monospace; 7 resize: none;
8 font-family: $font-family-monospace;
44 } 9 }
45 10
46 .header { 11 .paste-show {
47 background-color: $gray; 12 padding: $grid-gutter-width/2;
48 display: flex; 13 margin-bottom: $grid-gutter-width/2;
49 justify-content: space-between;
50 align-items: center;
51 padding: $spacing;
52 flex: none;
53 }
54 14
55 .main { 15 border-width: 0px 1px 1px 1px;
56 display: flex; 16 border-style: solid;
57 flex: 1 0 auto; 17 border-color: $nav-tabs-active-link-hover-border-color;
58 padding: $spacing; 18 border-radius: 0px 0px $border-radius-base $border-radius-base;
59 flex-direction: column;
60 }
61 19
62 .main-form { 20 &__content {
63 flex: 1; 21 border: none;
64 display: flex; 22 background-color: #fff;
65 flex-direction: column; 23 padding: 0px;
66 } 24 margin: 0px;
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 } 25 }
91 } 26 }
92 27
93 .settings-label { 28 .zp-hl {
94 margin-bottom: $spacing/2; 29 background-color: #fff;
30 padding: 0px;
95 } 31 }
96 32
97 .actions { 33 .zp-header {
98 display: flex; 34 margin-top: 0px;
99 } 35 }
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 }