22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 20:49
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
51 |
52 |
53 |
This is the second demo page showing an Android phone. This framework is meant for prototyping apps that are going to run on iOS and Android.
54 |
What changed? There is other markup for the system icons - also the data-os and data-device attributes changed.
55 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "clank-dev",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "",
6 | "main": "index.js",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git://github.com/Wolfr/clank.git"
13 | },
14 | "author": "",
15 | "license": "MIT",
16 | "bugs": {
17 | "url": "https://github.com/Wolfr/clank/issues"
18 | },
19 | "devDependencies": {
20 | "grunt": "~0.4.1",
21 | "grunt-webfont": "~0.1.10",
22 | "grunt-contrib-clean": "~0.5.0",
23 | "grunt-contrib-compass": "~0.6.0",
24 | "grunt-contrib-copy": "~0.4.1",
25 | "grunt-contrib-watch": "~0.5.3",
26 | "grunt-contrib-uglify": "~0.2.7",
27 | "grunt-contrib-concat": "~0.3.0",
28 | "grunt-contrib-cssmin": "~0.7.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/scss/clank.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Clank CSS framework
3 | ========================================================================== */
4 |
5 | @import "compass";
6 | @import "clank/vars";
7 | @import "clank/mixins";
8 | @import "clank/base";
9 |
10 | // Devices
11 | @import "clank/components/device_wraps";
12 |
13 | // Components
14 | @import "clank/components/article";
15 | @import "clank/components/base-layout";
16 | @import "clank/components/buttons";
17 | @import "clank/components/forms";
18 | @import "clank/components/alerts";
19 | @import "clank/components/data-table";
20 | @import "clank/components/toggles";
21 | @import "clank/components/sliders";
22 | @import "clank/components/loading";
23 | @import "clank/components/table-view";
24 | @import "clank/components/help-txt";
25 | @import "clank/components/utilities";
26 | @import "clank/components/popover";
27 | @import "clank/components/badge";
28 | @import "clank/components/tab-bar";
29 | @import "clank/components/close";
30 | @import "clank/components/alerts-alt"; // Bootstrap
31 | @import "clank/components/modal";
32 | @import "clank/components/animations";
33 |
34 | /* ==========================================================================
35 | Custom application CSS
36 | ========================================================================== */
37 |
38 | // App specific icons
39 | @import "clank/icon-fonts/app-icons";
40 |
41 | // Custom components (not part of Clank core)
42 | // List your components here
43 |
44 | // App specific screens (list your custom CSS per screen here)
45 |
--------------------------------------------------------------------------------
/scss/clank/_base.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Base
3 | ========================================================================== */
4 |
5 | body, html {
6 | margin: 0;
7 | padding: 0;
8 | }
9 |
10 | a {
11 | text-decoration: none;
12 | }
13 |
14 | [data-os="ios"] .cl-device-body {
15 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
16 | }
17 |
18 | [data-os="android"] .cl-device-body {
19 | font-family: 'Roboto', 'Droid Sans', sans-serif;
20 | }
21 |
22 | .cl-device-body {
23 | *, *:before, *:after {
24 | -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
25 | }
26 | }
27 |
28 |
29 | .cl-device-body {
30 | padding: 0;
31 | margin: 0 auto;
32 | padding: 0;
33 | height: 100%;
34 | width: 100%;
35 | margin: 0 auto;
36 | position: relative;
37 | overflow: hidden;
38 | -webkit-font-smoothing: antialiased;
39 | -webkit-text-size-adjust: none;
40 | & > .cl-bar-title,
41 | & > .cl-content,
42 | & > .cl-bar-footer {
43 | margin: 0 auto;
44 | }
45 | }
--------------------------------------------------------------------------------
/scss/clank/_mixins.scss:
--------------------------------------------------------------------------------
1 | /* Fonts
2 | ========================================================================== */
3 |
4 | @mixin reading-font {
5 | font-family: Helvetica, Arial, sans-serif;
6 | font-weight: 400; font-style: normal;
7 | }
8 |
9 | @mixin reading-font-italic {
10 | font-family: Helvetica, Arial, sans-serif;
11 | font-weight: 400; font-style: italic;
12 | }
13 |
14 | @mixin reading-font-bold {
15 | font-family: Helvetica, Arial, sans-serif;
16 | font-weight: 700;
17 | }
18 |
19 | @mixin heading-font-book {
20 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
21 | font-weight: 400;
22 | font-style: normal;
23 | }
24 |
25 | @mixin heading-font {
26 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
27 | font-weight: 500;
28 | font-style: normal;
29 | }
30 |
31 | /* CSS3 calc
32 | ========================================================================== */
33 |
34 | @mixin calc($property, $expression) {
35 | #{$property}: -moz-calc(#{$expression});
36 | #{$property}: -o-calc(#{$expression});
37 | #{$property}: -webkit-calc(#{$expression});
38 | #{$property}: calc(#{$expression});
39 | }
40 |
41 | /* Alternate clearfix that does not rely on overflow: hidden;
42 | ========================================================================== */
43 |
44 | @mixin micro-clearfix {
45 | &:before,
46 | &:after {
47 | content:"";
48 | display:table;
49 | }
50 | &:after {
51 | clear:both;
52 | }
53 | }
54 |
55 | /* Unstyled
56 | ========================================================================== */
57 |
58 | @mixin unstyled {
59 | margin: 0;
60 | padding: 0;
61 | list-style: none;
62 | }
63 |
64 | /* Text shadows
65 | @todo make this dependant on text color
66 | ========================================================================== */
67 |
68 | @mixin text-shadow-white {
69 | @if $text-shadows {
70 | text-shadow: 0 1px 0 rgba(255,255,255,0.5);
71 | }
72 | }
73 |
74 | @mixin text-shadow-black {
75 | @if $text-shadows {
76 | text-shadow: 0 1px rgba(0,0,0,0.33);
77 | }
78 | }
79 |
80 | /* Gradients
81 | ========================================================================== */
82 |
83 | @mixin gradient-vertical($startColor: #555, $endColor: #333) {
84 | background-color: mix($startColor, $endColor, 60%);
85 | background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
86 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
87 | background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
88 | background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
89 | background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
90 | background-repeat: repeat-x;
91 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
92 | }
93 |
94 |
95 | @mixin determine-text-color($color) {
96 | @if(lightness($color) <= 75%) {
97 | color: $very-light-color;
98 | @include text-shadow-black;
99 | } @else {
100 | color: $very-dark-color;
101 | @include text-shadow-white;
102 | }
103 | }
104 |
105 | /* Buttons
106 | ========================================================================== */
107 |
108 | @mixin button-skin($color) {
109 | &,
110 | &:link,
111 | &:visited {
112 | @include border-radius($border-radius);
113 | @if $button-borders {
114 | border: 1px solid darken($color, 5%);
115 | }
116 | @if $decorational-shadows {
117 | @include box-shadow(0 1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2));
118 | }
119 | @if $gradient {
120 | @include gradient-vertical(lighten($color, 15%),$color);
121 | } @else {
122 | background: $color;
123 | }
124 | @include determine-text-color($color);
125 | }
126 | }
127 |
128 | @mixin button-skin-hover($color) {
129 | &:hover,
130 | &:active,
131 | &:focus,
132 | &.active {
133 | @if $decorational-shadows {
134 | @include box-shadow(0 1px 0 rgba(0,0,0,0.2));
135 | }
136 | @if $gradient {
137 | @include gradient-vertical(darken($color, 5%), darken($color, 15%));
138 | @if $decorational-shadows {
139 | @include box-shadow(inset 0 1px 0 rgba(0,0,0,0.15));
140 | }
141 | } @else {
142 | background: darken($color, 10%);
143 | }
144 | @include determine-text-color($color);
145 | }
146 | }
147 |
148 | /*
149 | * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
150 | * It returns two lines of code — one of the regular pixel values (for IE), and another with the
151 | * converted rem values (for everyone else). Special thanks to Chris Epstein (http://chriseppstein.github.com)
152 | * and Martin Bavio (http://martinbavio.com) for the help and code!
153 | *
154 | * Sample input:
155 | * .element {
156 | * @include rem('padding',10px 0 2px 5px);
157 | * }
158 | *
159 | * Sample output:
160 | * .element {
161 | * padding: 10px 0 2px 5px;
162 | * padding: 1rem 0 0.2rem 0.5rem;
163 | * }
164 | *
165 | */
166 |
167 | // Baseline, measured in pixels
168 | // The value should be the same as the font-size value for the html element
169 | // If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
170 | // then the variable below would be 10px.
171 | $baseline_px: $base-font-size;
172 |
173 | @mixin rem($property, $px_values) {
174 |
175 | // Convert the baseline into rems
176 | $baseline_rem: ($baseline_px / 1rem);
177 |
178 | // Print the first line in pixel values
179 | #{$property}: $px_values;
180 |
181 | // If there is only one (numeric) value, return the property/value line for it.
182 | @if type-of($px_values) == 'number' {
183 | #{$property}: $px_values / $baseline_rem;
184 | }
185 |
186 | // If there is more than one value, create a list and perform equations on each value
187 | @else {
188 |
189 | // Create an empty list that we can dump values into
190 | $rem_values: ();
191 |
192 | @each $value in $px_values {
193 |
194 | // If the value is zero, return 0
195 | @if $value == 0 {
196 | $rem_values: append($rem_values, $value);
197 | }
198 |
199 | // If the value is not zero, convert it from px to rem
200 | @else {
201 | $rem_values: append($rem_values, ($value / $baseline_rem) );
202 | }
203 |
204 | }
205 |
206 | // Return the property and its list of converted values
207 | #{$property}: $rem_values;
208 |
209 | }
210 |
211 | }
212 |
213 |
214 | /* Links
215 | ========================================================================== */
216 |
217 | @mixin default-links {
218 | @include single-transition(color, 0.2s);
219 | & {
220 | text-decoration: none;
221 | }
222 | &:link {
223 | color: #1d60b2;
224 | border-bottom: 1px solid #bad9ff;
225 | }
226 | &:visited {
227 | color: #513c90; // purple
228 | border-bottom: 1px solid #8e75da;
229 | }
230 | &:hover,
231 | &:active,
232 | &:focus {
233 | color: #1876e6;
234 | .content p &,
235 | .content li & {
236 | background: #e7f2ff;
237 | }
238 | border-bottom: 1px solid #68adff;
239 | }
240 | }
241 |
242 | @mixin swap-underlines {
243 | &:link {
244 | text-decoration: none;
245 | border: none !important;
246 | }
247 | &:visited {
248 | text-decoration: none;
249 | border: none !important;
250 | }
251 | &:hover,
252 | &:active,
253 | &:focus {
254 | text-decoration: underline;
255 | border-bottom: 1px solid #ABCDF6;
256 | }
257 | }
258 |
259 | @mixin no-underlines {
260 | &:link,
261 | &:visited,
262 | &:hover,
263 | &:active,
264 | &:focus {
265 | text-decoration: none;
266 | border: none !important;
267 | }
268 | }
269 |
270 | @mixin muted-links {
271 | &:link,
272 | &:visited {
273 | color: #7F7F7F;
274 | border-bottom: 1px solid #CCC;
275 | border-bottom: 1px solid rgba(0,0,0,0.33);
276 | }
277 | &:hover,
278 | &:active,
279 | &:focus {
280 | color: #000;
281 | border-bottom: none;
282 | }
283 | }
284 |
285 | /* Links when color inversed */
286 | @mixin inverse-links {
287 | @include single-transition(color, 0.2s);
288 | &:link {
289 | color: #FFF;
290 | color: rgba(255,255,255,1);
291 | border-bottom: 1px solid #444;
292 | border-color: rgba(255,255,255,0.33);
293 | }
294 | &:visited {
295 | color: #DDD;
296 | color: rgba(255,255,255,1);
297 | border-bottom: 1px solid #444;
298 | border-color: rgba(255,255,255,0.33);
299 | }
300 | &:hover,
301 | &:active,
302 | &:focus {
303 | color: #FFF;
304 | border-bottom: 1px solid #444;
305 | border-color: rgba(255,255,255,0.88);
306 | }
307 | }
308 |
309 | /* Animations
310 | ========================================================================== */
311 |
312 | @mixin keyframes ($animation_name) {
313 | @-webkit-keyframes $animation_name {
314 | @content;
315 | }
316 |
317 | @-moz-keyframes $animation_name {
318 | @content;
319 | }
320 |
321 | @-o-keyframes $animation_name {
322 | @content;
323 | }
324 |
325 | @keyframes $animation_name {
326 | @content;
327 | }
328 | }
329 |
330 | @mixin animation-name($name...) {
331 | -o-animation-name: $name;
332 | -moz-animation-name: $name;
333 | -webkit-animation-name: $name;
334 | animation-name: $name;
335 | }
336 |
337 | @mixin animation-duration($duration...) {
338 | -o-animation-duration: $duration;
339 | -moz-animation-duration: $duration;
340 | -webkit-animation-duration: $duration;
341 | animation-duration: $duration;
342 | }
343 |
344 | @mixin animation-timing-function($timing...) {
345 | -o-animation-timing-function: $timing;
346 | -moz-animation-timing-function: $timing;
347 | -webkit-animation-timing-function: $timing;
348 | animation-timing-function: $timing;
349 | }
350 |
351 | @mixin animation-iteration-count($count...) {
352 | -o-animation-iteration-count: $count;
353 | -moz-animation-iteration-count: $count;
354 | -webkit-animation-iteration-count: $count;
355 | animation-iteration-count: $count;
356 | }
357 |
358 | @mixin animation-direction($direction...) {
359 | -o-animation-direction: $direction;
360 | -moz-animation-direction: $direction;
361 | -webkit-animation-direction: $direction;
362 | animation-direction: $direction;
363 | }
364 |
365 | @mixin animation-delay($delay...) {
366 | -o-animation-delay: $delay;
367 | -moz-animation-delay: $delay;
368 | -webkit-animation-delay: $delay;
369 | animation-delay: $delay;
370 | }
371 |
372 | @mixin animation-fill-mode($fill...) {
373 | -o-animation-fill-mode: $fill;
374 | -moz-animation-fill-mode: $fill;
375 | -webkit-animation-fill-mode: $fill;
376 | animation-fill-mode: $fill;
377 | }
378 |
379 | @mixin animation-play-state($state...) {
380 | -o-animation-play-state: $state;
381 | -moz-animation-play-state: $state;
382 | -webkit-animation-play-state: $state;
383 | animation-play-state: $state;
384 | }
385 |
386 | @mixin animation($animation...) {
387 | -o-animation: $animation;
388 | -moz-animation: $animation;
389 | -webkit-animation: $animation;
390 | animation: $animation;
391 | }
--------------------------------------------------------------------------------
/scss/clank/_vars.scss:
--------------------------------------------------------------------------------
1 | /* Device wraps
2 | Set this to true if you are using device frames i.e. like the demo at getclank.com
3 | ========================================================================== */
4 |
5 | $device-wraps: true;
6 |
7 | /* Operating system defaults
8 | Used to determine the sizing of elements
9 | ========================================================================== */
10 |
11 | $ios-bar-size: 44px;
12 | $android-bar-size: 50px;
13 |
14 | /* Default style variables
15 | ========================================================================== */
16 |
17 | $base-font-size: 13px;
18 | $base-font-value: 13;
19 | $base-line-height: 1.5;
20 |
21 | /* Colors
22 | Quickly change the colors of your app using these variables
23 | Note that a "light text on dark background" scheme is not fully supported yet
24 | ========================================================================== */
25 |
26 |
27 | $very-light-color: #FFF !default;
28 | $light-color: #DDD !default;
29 | $light-medium-color: #AAA !default;
30 | $medium-color: #666 !default;
31 | $dark-color: #333 !default;
32 | $very-dark-color: #000 !default;
33 |
34 | $divider-color: $light-medium-color;
35 |
36 | $background-color: mix($very-light-color, $light-color, 50%) !default;
37 | $accent-color: #18788b !default;
38 | $accent-color-primary: if(lightness($accent-color) >= 50%, scale-saturation(scale-lightness($accent-color, -25%),25%), scale-saturation(scale-lightness($accent-color, 25%),25%)) !default;
39 | $subtle-color: darken($background-color, 5%) !default;
40 |
41 | // Colors with semantic meaning e.g. red for error
42 | $success-color: darken($accent-color, 20%) !default;
43 | $success-color-alt: #8FAE1F !default;
44 | $error-color: invert($accent-color) !default;
45 | $danger-color: #FC6C2B !default;
46 | $help-color: #643ABF !default;
47 | $highlight-color: #F9F3AC !default;
48 |
49 |
50 | /* Stylistic choices
51 | Quickly change the style of your app using these variables
52 | ========================================================================== */
53 |
54 | $functional-shadows: true !default; // Shadows (and highlights) that are functional e.g. a drop shadow on a modal
55 | $decorational-shadows: true !default; // Shadows (and highlights) that are decorational e.g. an inset on a button
56 | $gradient: true !default; // Whether gradients should be rendered or not, set this to false for a flatter design
57 | $border-radius: 4px !default; // The radii of common borders e.g. the borders on buttons
58 | $text-shadows: true !default; // Whether text should have shadows or not
59 | $button-borders: true !default;
60 |
61 | /* For this release we are focussing on iOS7
62 | Enforce iOS7 flatness
63 | ========================================================================== */
64 |
65 | $gradient: false;
66 | $decorational-shadows: false;
67 | $button-borders: false;
68 | $text-shadows: false;
69 |
70 | /* Media queries, always based on 16px base value.
71 | ========================================================================== */
72 |
73 | $break-small: 320 / 16 * 1em;
74 | $break-small-medium: 480 / 16 * 1em;
75 | $break-medium: 768 / 16 * 1em;
76 | $break-large: 1024px;
77 | $break-x-large: 1200 / 16 * 1em;
78 | $break-xx-large: 1440 / 16 * 1em;
79 | $break-xxx-large: 1650 / 16 * 1em;
80 |
81 | /* Master z-index list
82 | ========================================================================== */
83 |
84 | $cl-alert-z-index: 1202000202;
85 | $cl-alert-box-z-index: 120203202;
86 | $cl-popover-z-index: 1100202;
--------------------------------------------------------------------------------
/scss/clank/components/_alerts-alt.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Alerts (bootstrap style alerts)
3 | ========================================================================== */
4 |
5 | // Base styles
6 | // -------------------------
7 |
8 | .alert {
9 | padding: 8px 34px 8px 14px;
10 | position: relative;
11 | margin: 0 0 12px;
12 | background-color: $light-color;
13 | border: 1px solid $light-medium-color;
14 | font-size: 14px;
15 | font-weight: 700;
16 | @include border-radius($border-radius);
17 | p:last-child {
18 | margin-bottom: 0;
19 | padding-bottom: 0;
20 | }
21 | }
22 |
23 | // Alternate styles: success & error
24 | // -------------------------
25 |
26 | .alert-success,
27 | .alert-error {
28 | a {
29 | color: $very-light-color;
30 | @include inverse-links;
31 | }
32 | }
33 |
34 | .alert-success {
35 | background-color: $success-color;
36 | border-color: $success-color;
37 | color: $very-light-color;
38 | }
39 |
40 | .alert-error {
41 | background-color: $error-color;
42 | border-color: $error-color;
43 | color: $very-light-color;
44 | }
--------------------------------------------------------------------------------
/scss/clank/components/_alerts.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Alerts (iOS type alerts similar to a javascript alert)
3 | ========================================================================== */
4 |
5 | .cl-alert {
6 | width: 100%;
7 | height: 100%; // this is 100% of .cl-content
8 | position: absolute;
9 |
10 | z-index: $cl-alert-z-index;
11 | // Center within container
12 | display: -webkit-flex;
13 | display: flex;
14 |
15 | -webkit-justify-content: center;
16 | justify-content: center;
17 |
18 | bottom: 0;
19 |
20 | .cl-alert-box {
21 | z-index: $cl-alert-box-z-index;
22 |
23 | // positioning
24 | margin: auto;
25 | width: 90%;
26 | padding: 12px 0 0;
27 | @media all and (min-width: 768px) {
28 | width: 300px;
29 | }
30 | text-align: center;
31 | background: $very-light-color;
32 | @include border-radius($border-radius);
33 | }
34 | .cl-alert-title {
35 | font-size: 16px;
36 | padding: 0 12px 6px;
37 | }
38 |
39 | .cl-alert-message {
40 | padding: 4px 12px 12px;
41 | font-size: 13px;
42 | line-height: 1.5;
43 | }
44 |
45 | .cl-alert-title,
46 | .cl-alert-message {
47 | margin: 0;
48 | }
49 | // Make buttons and button group more minimal
50 | // Instead of undoing button code maybe this should be written from scratch
51 | .cl-alert-btn-group {
52 | padding: 0;
53 | border-top: 1px solid #B3B5B9;
54 | display: -webkit-flex;
55 | display: flex;
56 | }
57 | .cl-alert-btn {
58 | -webkit-flex: 1;
59 | flex: 1;
60 | color: $accent-color;
61 | padding: 12px 0;
62 | font-size: 17px;
63 | &:hover,
64 | &:active,
65 | &:focus {
66 | background: rgba($accent-color, 0.25);
67 | }
68 | &:first-child {
69 | border-right: 1px solid #B3B5B9;
70 | @include border-bottom-left-radius($border-radius);
71 | }
72 | &:last-child {
73 | font-weight: 700;
74 | @include border-bottom-right-radius($border-radius);
75 | }
76 | }
77 |
78 | }
79 |
--------------------------------------------------------------------------------
/scss/clank/components/_animations.scss:
--------------------------------------------------------------------------------
1 | /* General */
2 |
3 | .cl-animation-reverse {
4 | @include animation-direction(reverse);
5 | }
6 |
7 | /* Slide */
8 |
9 | @include keyframes (slide-in) {
10 | from { margin-left: 100%; }
11 | to { margin-left: 0; }
12 | }
13 |
14 | @include keyframes (slide-out) {
15 | from { margin-left: 0; }
16 | to { margin-left: -100% }
17 | }
18 |
19 | *[data-animate*='cl-slide'] > div {
20 | position: absolute;
21 | width: 100%;
22 | }
23 |
24 | .cl-slide-enter {
25 | @include animation-name(slide-in);
26 | @include animation-duration(350ms);
27 | }
28 |
29 | .cl-slide-leave {
30 | @include animation-name(slide-out);
31 | @include animation-duration(350ms);
32 | }
33 |
34 | /* Pop */
35 |
36 | @include keyframes(pop-in) {
37 | 0% { @include transform(scale(0));}
38 | 50% { @include transform(scale(1.2)); }
39 | 100% { @include transform(scale(1)); }
40 | }
41 |
42 | @include keyframes(pop-out) {
43 | 0% { @include transform(scale(1)); }
44 | 50% { @include transform(scale(1.2)); }
45 | 100% { @include transform(scale(0)); }
46 | }
47 |
48 | .cl-pop-enter {
49 | @include animation-name(pop-in);
50 | @include animation-duration(350ms);
51 | }
52 |
53 | .cl-pop-leave {
54 | @include animation-name(pop-out);
55 | @include animation-duration(350ms);
56 | }
57 |
--------------------------------------------------------------------------------
/scss/clank/components/_article.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Typography
3 | ========================================================================== */
4 |
5 | .cl-article {
6 |
7 | &.padded {
8 | margin: 10px;
9 | }
10 |
11 | line-height: 1.5;
12 | -webkit-text-size-adjust: 100%;
13 | -webkit-font-smoothing: antialiased;
14 | -webkit-overflow-scrolling: touch;
15 |
16 | line-height: $base-line-height;
17 | color: $dark-color;
18 |
19 | @include reading-font;
20 |
21 | a {
22 | @include default-links;
23 | }
24 |
25 | // Override for buttons
26 | .cl-btn:link,
27 | .cl-btn:visited {
28 | border: none;
29 | color: $very-light-color;
30 | }
31 |
32 | /* Typography */
33 |
34 | strong {
35 | font-weight: 700;
36 | color: $very-dark-color;
37 | }
38 |
39 | p {
40 | @include rem("margin", 0 0 12px);
41 | & + p {
42 | margin-top: 0;
43 | }
44 | &.intro {
45 | @include heading-font-book;
46 | @include rem("font-size", 19px);
47 | line-height: 1.33;
48 | }
49 | }
50 |
51 | blockquote {
52 | @include reading-font-italic;
53 | @include rem("margin", 0 0 12px 24px);
54 | color: $medium-color;
55 | a {
56 | @include muted-links;
57 | }
58 | cite {
59 | @include reading-font-bold;
60 | color: #000;
61 | display: block;
62 | text-align: right;
63 | font-style: normal;
64 | @include rem("font-size", 13px);
65 | }
66 | }
67 |
68 | h1, h2, h3, h4 {
69 | color: $very-dark-color;
70 | padding: 0;
71 | @include rem("margin", 0 0 12px);
72 | }
73 |
74 | h1, h2, h3 {
75 | @include heading-font-book;
76 | line-height: 1.1;
77 | }
78 |
79 | h1, h2 {
80 | @include rem("font-size", 32px);
81 | }
82 |
83 | h3 {
84 | @include rem("font-size", 19px);
85 | @include rem("margin", 0 0 12px);
86 | }
87 |
88 | h4 {
89 | margin: 0;
90 | @include rem("font-size", $base-font-size);
91 | @include rem("margin", 0 0 12px);
92 | }
93 |
94 | h1, h2, h3 {
95 | a,
96 | a:link,
97 | a:visited {
98 | border: none;
99 | color: #000;
100 | }
101 | a:hover,
102 | a:active,
103 | a:focus {
104 | border-bottom: 1px solid #9CC6F9;
105 | color: #0067E3;
106 | }
107 | }
108 |
109 | .content ul,
110 | .content ol {
111 | @include rem("padding", 0 0 12px);
112 | @include rem("margin", 0 0 0 24px);
113 | ul, ol {
114 | padding: 0;
115 | }
116 | }
117 |
118 | .content ul li {
119 | list-style: disc;
120 | ol li {
121 | list-style: decimal;
122 | }
123 | }
124 |
125 | .content ol li {
126 | list-style: decimal;
127 | ul li {
128 | list-style: disc;
129 | }
130 | }
131 |
132 | /* For footnotes */
133 | .footnotes {
134 | border-top: 1px solid $divider-color;
135 | @include rem("padding-top", 8px);
136 | }
137 |
138 | ol li:target,
139 | sup:target {
140 | background: #FFA;
141 | @include reading-font-bold;
142 | }
143 |
144 | /* Code
145 | ========================================================================== */
146 |
147 | pre {
148 | @include rem("margin", 0 0 12px);
149 | @include rem("padding", 10px);
150 | @include rem("font-size", 14px);
151 | @include border-radius(4px);
152 | background: $light-color;
153 | line-height: 1.3;
154 |
155 | white-space: pre-wrap; /* css-3 */
156 | white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
157 | white-space: -pre-wrap; /* Opera 4-6 */
158 | white-space: -o-pre-wrap; /* Opera 7 */
159 | word-wrap: break-word; /* Internet Explorer 5.5+ */
160 | & + pre {
161 | @include rem("border-bottom-radius", 4px);
162 | }
163 | }
164 |
165 | code {
166 | font-family: Menlo, Consolas, "Courier New", monospace;
167 | font-size: 87%;
168 | }
169 |
170 | em code {
171 | font-style: normal;
172 | }
173 |
174 | .footnotes ol {
175 | width: 90%;
176 | position: relative;
177 | @include rem("left", 32px);
178 | @include rem("font-size", 13px);
179 | li {
180 | @include rem("margin-bottom", 4px);
181 | }
182 | p {
183 | margin: 0;
184 | }
185 | }
186 |
187 | ul, ol {
188 | padding: 0;
189 | @include rem("margin-bottom", 12px); /* make use of collapsing margins */
190 | }
191 |
192 | ol > li {
193 | list-style: decimal;
194 | }
195 |
196 | ul > li {
197 | list-style: disc;
198 | }
199 |
200 | & > ul,
201 | & > ol {
202 | ul, ol {
203 | margin: 0;
204 | }
205 | li {
206 | @include rem("margin-left", 24px);
207 | }
208 | }
209 |
210 | }
211 |
212 | /* Article width layout
213 | ========================================================================== */
214 |
215 | // How much % of the full width should a blog post take (reading length)
216 | $line-length-xs: 92%;
217 | $line-length: 80%;
218 | $line-length-lg: 70%;
219 |
220 | @mixin center-max-width-by-percentage {
221 |
222 | width: 100%;
223 | max-width: $line-length-xs;
224 |
225 | [data-device="nexus7-portrait"] & {
226 | max-width: $line-length;
227 | }
228 |
229 | [data-device="ipad3-portrait"] & {
230 | max-width: $line-length;
231 | }
232 |
233 | [data-device="nexus7-landscape"] & {
234 | max-width: $line-length-lg;
235 | }
236 |
237 | [data-device="ipad3-landscape"] & {
238 | max-width: $line-length-lg;
239 | }
240 |
241 | }
242 |
243 | @mixin center-width-by-percentage {
244 |
245 | [data-device="nexus7-portrait"] & {
246 | width: $line-length;
247 | }
248 |
249 | [data-device="ipad3-portrait"] & {
250 | width: $line-length;
251 | }
252 |
253 | [data-device="nexus7-landscape"] & {
254 | width: $line-length-lg;
255 | }
256 |
257 | [data-device="ipad3-landscape"] & {
258 | width: $line-length-lg;
259 | }
260 |
261 | }
262 |
263 | .cl-article-centered {
264 | margin: 12px 0;
265 | img {
266 | max-width: 100%;
267 | }
268 | // Center dat to be able to autostretch images
269 | & > h1,
270 | & > h2,
271 | & > h3,
272 | & > h4,
273 | & > p,
274 | & > ul,
275 | & > ol,
276 | & > header,
277 | & > footer,
278 | & > blockquote,
279 | & > .dont-stretch,
280 | & > .highlight,
281 | & > .table,
282 | & > .footnotes,
283 | & > pre,
284 | & > .video-outer-wrap {
285 | @include center-max-width-by-percentage;
286 | margin-left: auto;
287 | margin-right: auto;
288 | }
289 | & > .cl-data-table,
290 | & > .dont-stretch {
291 | @include center-width-by-percentage;
292 | margin-left: auto;
293 | margin-right: auto;
294 | }
295 | & > img.dont-stretch {
296 | display: block;
297 | }
298 | & > hr {
299 | width: 58%;
300 | margin-left: auto;
301 | margin-right: auto;
302 | }
303 | & > blockquote {
304 | width: 80%;
305 | position: relative;
306 | @include rem("left", 12px);
307 | }
308 | }
309 |
310 |
--------------------------------------------------------------------------------
/scss/clank/components/_badge.scss:
--------------------------------------------------------------------------------
1 | /* Badge
2 | ========================================================================== */
3 |
4 | .badge {
5 | background: rgba(0,0,0,0.1);
6 | text-align: center;
7 | @include border-radius(7px);
8 | font-size: 11px;
9 | font-weight: 400;
10 | @include inline-block;
11 | padding: 4px 6px;
12 | .cl-btn & {
13 | line-height: 1;
14 | margin-top: -3px;
15 | }
16 | }
--------------------------------------------------------------------------------
/scss/clank/components/_base-layout.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Base layout
3 | ========================================================================== */
4 |
5 | /* Page level */
6 |
7 | .cl-page {
8 | text-align: left;
9 | font-size: 13px;
10 | word-wrap: break-word;
11 | width: 100%;
12 | height: 100%;
13 | @include calc("height","100% - 20px"); /* minus status bar height */
14 | -webkit-font-smoothing: antialiased;
15 | }
16 |
17 | /* Content */
18 |
19 | .cl-content {
20 | background: mix($very-light-color, $light-color, 50%);
21 |
22 | overflow-x: hidden;
23 | overflow-y: scroll;
24 | position: relative;
25 | -webkit-overflow-scrolling: touch;
26 |
27 | height: 100%;
28 |
29 | @include calc(height, "100% - 44px");
30 | [data-os="android"] & {
31 | @include calc(height, "100% - 50px");
32 | }
33 |
34 | &.has-footer-bar {
35 | @include calc(height, "100% - 88px");
36 | [data-os="android"] & {
37 | @include calc(height, "100% - 100px");
38 | }
39 | }
40 |
41 | &.cl-content__full-height {
42 | .full-height {
43 | height: 100%;
44 | }
45 | }
46 | }
47 |
48 | /* Bar layout */
49 |
50 | .cl-bar-title,
51 | .cl-bar,
52 | .cl-bar-footer {
53 | @include pie-clearfix;
54 | overflow: hidden;
55 | width: 100%;
56 | // default
57 | min-height: $ios-bar-size;
58 | height: $ios-bar-size;
59 | [data-os="android"] & {
60 | min-height: $android-bar-size;
61 | height: $android-bar-size;
62 | }
63 | position: relative;
64 | }
65 |
66 | .cl-bar-footer {
67 | position: absolute;
68 | bottom: 0;
69 | left: 0;
70 | right: 0;
71 | }
72 |
73 | .cl-bar-title {
74 | .cl-title {
75 | text-align: center;
76 | // default
77 | line-height: $ios-bar-size;
78 | [data-os="ios"] & {
79 | font-weight: 500;
80 | }
81 | [data-os="android"] & {
82 | line-height: $android-bar-size;
83 | }
84 | margin: 0 auto;
85 | -webkit-hyphens: auto;
86 | }
87 | }
88 |
89 |
90 | /**
91 | * Text in a bar
92 | * sample markup:
My text
93 | */
94 |
95 | .cl-bar-text {
96 | margin: 0;
97 | padding: 0;
98 |
99 | color: $very-light-color;
100 |
101 | // default
102 | line-height: $ios-bar-size;
103 | [data-os="android"] & {
104 | line-height: $android-bar-size;
105 | }
106 | .cl-bar &,
107 | .cl-bar-title &,
108 | .cl-bar-footer & {
109 | margin: 0 10px;
110 | }
111 | @if $text-shadows {
112 | @include text-shadow-black;
113 | }
114 | &.align-left {
115 | margin-left: 7px;
116 | }
117 | &.align-right {
118 | text-align: right;
119 | margin-right: 7px;
120 | }
121 | }
122 |
123 | /**
124 | * Bar title
125 | * Sample markup:
126 | */
127 |
128 | .cl-title {
129 | font-size: 20px;
130 | margin: 0;
131 | font-weight: 700;
132 | white-space: nowrap;
133 | text-align: center;
134 |
135 | // Depends on the accent color
136 | @include determine-text-color($accent-color);
137 |
138 | // default
139 | line-height: $ios-bar-size;
140 | [data-os="android"] & {
141 | line-height: $android-bar-size;
142 | }
143 | }
144 |
145 | /**
146 | * Bar backgrounds
147 | */
148 |
149 | .cl-bar-title,
150 | .cl-bar-footer,
151 | .cl-bar {
152 | @if $gradient {
153 | @include gradient-vertical(lighten($accent-color, 10%), $accent-color);
154 | /* iOS styles insets highlight and bottom border on header */
155 | /* The upper highlight */
156 | &:before {
157 | content: " ";
158 | height: 1px;
159 | width: 100%;
160 | background: lighten($accent-color, 15%);
161 | position: absolute;
162 | top: 0;
163 | left: 0;
164 | }
165 | /* The darker bottom */
166 | &:after {
167 | content: " ";
168 | height: 1px;
169 | width: 100%;
170 | background: darken($accent-color, 15%);
171 | position: absolute;
172 | bottom: 0;
173 | left: 0;
174 | }
175 | } @else {
176 | background: $accent-color;
177 | }
178 | }
179 |
180 | .cl-bar-footer {
181 | background: #FFF;
182 | /* The upper highlight */
183 | &:before {
184 | content: " ";
185 | height: 1px;
186 | width: 100%;
187 | background: darken($subtle-color, 15%);
188 | position: absolute;
189 | top: 0;
190 | left: 0;
191 | }
192 | }
193 |
194 | /* Addition - back chevron
195 | ========================================================================== */
196 |
197 | .cl-btn {
198 | [class^="icon-app-"],
199 | [class*=" icon-app-"] {
200 | position: absolute;
201 | top: 0;
202 | left: 10px;
203 | }
204 | .icon-ios7-back-chevron,
205 | .icon-android4-back-chevron {
206 | font-size: 140%;
207 | position: absolute;
208 | top: 0;
209 | left: 4px;
210 | }
211 | }
212 |
--------------------------------------------------------------------------------
/scss/clank/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Buttons
3 | ========================================================================== */
4 |
5 | .cl-btn {
6 | @include button-skin($accent-color);
7 | @include button-skin-hover($accent-color);
8 |
9 | display: block;
10 | font-weight: 400;
11 | cursor: pointer;
12 | position: relative;
13 |
14 | /* Fixes when