vitalif-js
/
social-likes-nojq
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Flat skin: new icons, new single button color.

master
Artem Sapegin 2014-02-05 17:08:26 +04:00
parent 9dea9eb48b
commit 73ef56f22c
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/flat/icons/facebook.svg
View File

@ -1,9 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260px" height="501px" viewBox="0 0 260 501" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Slice 1</title>
<svg width="503px" height="516px" viewBox="0 0 503 516" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>facebook</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M168.768889,500.71 L168.768889,272.650454 L245.411111,272.650454 L256.88,183.763488 L168.74,183.763488 L168.74,126.986614 C168.74,101.252381 175.904444,83.7115579 212.824444,83.7115579 L260,83.7115579 L260,4.20085454 C251.853333,3.13340315 223.86,0.71 191.331111,0.71 C123.355556,0.71 76.8444444,42.1386539 76.8444444,118.187353 L76.8444444,183.734638 L0,183.734638 L0,272.621603 L76.8444444,272.621603 L76.8444444,500.68115 L168.768889,500.68115 L168.768889,500.68115 L168.768889,500.71 L168.768889,500.71 Z M168.768889,500.71" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
<g id="Untitled-1-01" sketch:type="MSLayerGroup" transform="translate(-7.000000, 8.000000)" fill="#000000">
<path d="M494.875,-7.6875 L36.375,-7.6875 C20.6875,-7.6875 7.9375,5.0625 7.9375,20.75 L7.9375,479.25 C7.9375,494.9375 20.6875,507.6875 36.375,507.6875 L283.1875,507.6875 L283.1875,308.09375 L216.0625,308.09375 L216.0625,230.34375 L283.1875,230.34375 L283.1875,172.96875 C283.1875,106.375 323.84375,70.15625 383.21875,70.15625 C411.65625,70.15625 436.125,72.25 443.28125,73.21875 L443.28125,142.78125 L402.09375,142.8125 C369.8125,142.8125 363.53125,158.15625 363.53125,180.6875 L363.53125,230.375 L440.5625,230.375 L430.5625,308.125 L363.53125,308.125 L363.53125,507.71875 L494.875,507.71875 C510.5625,507.71875 523.3125,494.96875 523.3125,479.28125 L523.3125,20.75 C523.3125,5.0625 510.5625,-7.6875 494.875,-7.6875 L494.875,-7.6875 Z" id="White_2_" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

10
src/styles/flat/icons/single.svg
View File

@ -1,13 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="500px" height="381px" viewBox="0 0 500 381" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<svg width="333px" height="505px" viewBox="0 0 333 505" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>single</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="single" sketch:type="MSLayerGroup" fill="#000000">
<ellipse d="M250,238.125 C276.299275,238.125 297.619048,216.802563 297.619048,190.5 C297.619048,164.197437 276.299275,142.875 250,142.875 C223.700725,142.875 202.380952,164.197437 202.380952,190.5 C202.380952,216.802563 223.700725,238.125 250,238.125 Z M250,238.125" id="Oval" sketch:type="MSShapeGroup" cx="250" cy="190.5" rx="47.6190476" ry="47.625"></ellipse>
<g id="Group" sketch:type="MSShapeGroup">
<path d="M250,381 C199.119048,381 151.285714,361.164188 115.333333,325.159688 L165.857143,274.653375 C188.333333,297.156188 218.238095,309.5625 250,309.5625 C298.214286,309.5625 341.333333,280.797 359.904762,236.291438 L369.071429,214.3125 L500,214.3125 L500,285.75 L415,285.75 C381.285714,344.304937 318.880952,381 250,381 L250,381 L250,381 L250,381 Z M130.952381,166.6875 L0,166.6875 L0,95.25 L85.047619,95.25 C118.738095,36.6950625 181.142857,0 250,0 C300.880952,0 348.714286,19.8358125 384.690476,55.8403125 L334.166667,106.346625 C311.690476,83.8438125 281.809524,71.4375 250,71.4375 C201.833333,71.4375 158.666667,100.203 140.119048,144.708563 L130.952381,166.6875 L130.952381,166.6875 L130.952381,166.6875 L130.952381,166.6875 Z M130.952381,166.6875" id="Shape"></path>
<g id="Untitled-1-07.3" sketch:type="MSLayerGroup" transform="translate(-2.000000, 4.000000)" fill="#000000">
<g id="Page-1" sketch:type="MSShapeGroup">
<path d="M139.417167,348.861111 C139.417167,348.972222 194.360167,348.861111 194.360167,348.861111 L194.360167,102.527778 L246.046667,154.083333 L285.403,114.805556 L166.610333,-3.69444444 L49.5155,113.138889 L88.8996667,152.444444 L139.417167,102.027778 L139.417167,348.861111 L139.417167,348.861111 Z" id="Shape"></path>
<path d="M251.279333,197.166667 L251.279333,249.916667 L278.695167,249.916667 L278.695167,445.194444 L55.0265,445.194444 L55.0265,249.916667 L82.7206667,249.916667 L82.7206667,195.027778 L2.19883333,195.027778 L2.19883333,500.055556 L334.445333,500.055556 L334.445333,197.166667 L251.279333,197.166667 L251.279333,197.166667 Z" id="Shape_1_"></path>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

9
src/styles/flat/index.styl
View File

@ -140,19 +140,22 @@ button-colors(button, color) {
margin:0;
padding:.1em 0;
line-height:1.5;
background:#87c44d;
background:#007aff;
.social-likes_single-light + & {
color:@background;
}
}
.social-likes__icon_single {
top:.07em;
left:.4em;
font-size:1.1em;
}
// Facebook
button-colors('facebook', #3d5b95);
.social-likes__icon_facebook {
left:.38em;
left:.25em;
top:.05em;
font-size:1.1em;
.social-likes_notext & {
margin-left:.15em;
}