Skip to content

Instantly share code, notes, and snippets.

@cattermo

cattermo/SassMeister-input-HTML.html

Created May 2, 2014 08:25
Show Gist options
  • Save cattermo/11470137 to your computer and use it in GitHub Desktop.
Save cattermo/11470137 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="mandate-overview">
<div>
<!-- calc backend for labels:
deg = previousPartysDeg + $count/349*180deg/2
x = 100-(50*cos(deg*3.14/180)+50)
;; 100- = start from left,
;; r * cos(angle in radians) + startX
y= 50*sin(deg*3.14/180)
;; r * sin(angle in radians) + startY
-->
<span class="mandate-overview__party"
style="left: 0.18%;bottom:8.53%;">V</span>
<span class="mandate-overview__party"
style="left:11%;bottom:62.5%;">S</span>
<span class="mandate-overview__party"
style="left:36.1%;bottom:96.1%;">MP</span>
<span class="mandate-overview__party"
style="left:46.1%;bottom:99.7%">SD</span>
<span class="mandate-overview__party"
style="display:none">PP</span>
<span class="mandate-overview__party"
style="display:none;">JL</span>
<span class="mandate-overview__party"
style="left:55.8%;bottom:99.3%;">C</span>
<span class="mandate-overview__party"
style="left:66.1%;bottom:94.7%;">FP</span>
<span class="mandate-overview__party"
style="left:74.9%;bottom:86.7%;">KD</span>
<span class="mandate-overview__party"
style="left:94.3%;bottom:46.4%;">M</span>
<ul class="mandate-overview__circle-wrapper">
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
</ul>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----
* {
box-sizing: border-box;
}
ul { list-style: none;padding:0;}
@mixin mandate($count) {
$deg: $count/349*180deg;
-webkit-transform: rotate($deg);
-mox-transform: rotate($deg);
-ms-transform: rotate($deg);
transform: rotate($deg);
}
$size: 300px;
$padding: 10px;
.mandate-overview {
width: $size + $padding*2;
height: $size/2 + $padding;
margin: 20px;
padding: 0;
padding-top: $padding/2;
padding-left: $padding/2;
padding-right: $padding/2;
position: relative;
&>div {
width: 100%;
height: 100%;
}
}
.mandate-overview__circle-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
padding-top: $padding/2;
padding-left: $padding/2;
padding-right: $padding/2;
position: relative;
}
.mandate-overview__circle {
width: $size;
height: $size;
position: absolute;
border: $size/3 solid transparent;
border-radius: 100%;
clip: rect(0 $size $size/2 0);
&:nth-child(1) {
border-color: firebrick;
@include mandate(0); //19
}
&:nth-child(2) {
border-color: red;
@include mandate(19); //112
}
&:nth-child(3) {
border-color: lime;
@include mandate(19+112); //25
}
&:nth-child(4) {
border-color: yellow;
@include mandate(19+112+25); //20
}
&:nth-child(5) {
border-color: black;
@include mandate(19+112+25+20); //0
}
&:nth-child(6) {
border-color: black;
@include mandate(19+112+25+20+0); //0
}
&:nth-child(7) {
border-color: limegreen;
@include mandate(19+112+25+20+0+0); //23
}
&:nth-child(8) {
border-color: lightblue;
@include mandate(19+112+25+20+0+0+23); //24
}
&:nth-child(9) {
border-color: navy;
@include mandate(19+112+25+20+0+0+23+24); //19
}
&:nth-child(10) {
border-color: blue;
@include mandate(19+112+25+20+0+0+23+24+19); //107
}
}
.mandate-overview__party {
position: absolute;
}
Raw
SassMeister-output.css
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
}
.mandate-overview {
width: 320px;
height: 160px;
margin: 20px;
padding: 0;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
.mandate-overview > div {
width: 100%;
height: 100%;
}
.mandate-overview__circle-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
.mandate-overview__circle {
width: 300px;
height: 300px;
position: absolute;
border: 100px solid transparent;
border-radius: 100%;
clip: rect(0 300px 150px 0);
}
.mandate-overview__circle:nth-child(1) {
border-color: firebrick;
-webkit-transform: rotate(0deg);
-mox-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.mandate-overview__circle:nth-child(2) {
border-color: red;
-webkit-transform: rotate(9.7994269341deg);
-mox-transform: rotate(9.7994269341deg);
-ms-transform: rotate(9.7994269341deg);
transform: rotate(9.7994269341deg);
}
.mandate-overview__circle:nth-child(3) {
border-color: lime;
-webkit-transform: rotate(67.564469914deg);
-mox-transform: rotate(67.564469914deg);
-ms-transform: rotate(67.564469914deg);
transform: rotate(67.564469914deg);
}
.mandate-overview__circle:nth-child(4) {
border-color: yellow;
-webkit-transform: rotate(80.4584527221deg);
-mox-transform: rotate(80.4584527221deg);
-ms-transform: rotate(80.4584527221deg);
transform: rotate(80.4584527221deg);
}
.mandate-overview__circle:nth-child(5) {
border-color: black;
-webkit-transform: rotate(90.7736389685deg);
-mox-transform: rotate(90.7736389685deg);
-ms-transform: rotate(90.7736389685deg);
transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(6) {
border-color: black;
-webkit-transform: rotate(90.7736389685deg);
-mox-transform: rotate(90.7736389685deg);
-ms-transform: rotate(90.7736389685deg);
transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(7) {
border-color: limegreen;
-webkit-transform: rotate(90.7736389685deg);
-mox-transform: rotate(90.7736389685deg);
-ms-transform: rotate(90.7736389685deg);
transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(8) {
border-color: lightblue;
-webkit-transform: rotate(102.6361031519deg);
-mox-transform: rotate(102.6361031519deg);
-ms-transform: rotate(102.6361031519deg);
transform: rotate(102.6361031519deg);
}
.mandate-overview__circle:nth-child(9) {
border-color: navy;
-webkit-transform: rotate(115.0143266476deg);
-mox-transform: rotate(115.0143266476deg);
-ms-transform: rotate(115.0143266476deg);
transform: rotate(115.0143266476deg);
}
.mandate-overview__circle:nth-child(10) {
border-color: blue;
-webkit-transform: rotate(124.8137535817deg);
-mox-transform: rotate(124.8137535817deg);
-ms-transform: rotate(124.8137535817deg);
transform: rotate(124.8137535817deg);
}
.mandate-overview__party {
position: absolute;
}
Raw
SassMeister-rendered.html
<div class="mandate-overview">
<div>
<!-- calc backend for labels:
deg = previousPartysDeg + $count/349*180deg/2
x = 100-(50*cos(deg*3.14/180)+50)
;; 100- = start from left,
;; r * cos(angle in radians) + startX
y= 50*sin(deg*3.14/180)
;; r * sin(angle in radians) + startY
-->
<span class="mandate-overview__party"
style="left: 0.18%;bottom:8.53%;">V</span>
<span class="mandate-overview__party"
style="left:11%;bottom:62.5%;">S</span>
<span class="mandate-overview__party"
style="left:36.1%;bottom:96.1%;">MP</span>
<span class="mandate-overview__party"
style="left:46.1%;bottom:99.7%">SD</span>
<span class="mandate-overview__party"
style="display:none">PP</span>
<span class="mandate-overview__party"
style="display:none;">JL</span>
<span class="mandate-overview__party"
style="left:55.8%;bottom:99.3%;">C</span>
<span class="mandate-overview__party"
style="left:66.1%;bottom:94.7%;">FP</span>
<span class="mandate-overview__party"
style="left:74.9%;bottom:86.7%;">KD</span>
<span class="mandate-overview__party"
style="left:94.3%;bottom:46.4%;">M</span>
<ul class="mandate-overview__circle-wrapper">
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
<li class="mandate-overview__circle"></li>
</ul>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment