Skip to content

Instantly share code, notes, and snippets.

@gdumitrescu

gdumitrescu/SassMeister-input-HTML.html

Created November 26, 2015 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gdumitrescu/5b9ba972316f38db4da7 to your computer and use it in GitHub Desktop.
Save gdumitrescu/5b9ba972316f38db4da7 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="circle-container">
<div class="circle-container-box">
<div class="circle-content">
<div class="circle-text">here comes the dynamic text kjhei</div>
</div>
</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$white: #FFF;
$red: #c0392b;
$browsers: -webkit, -moz, -o, -ms;
@mixin transform($value) {
transform: $value;
@each $browser in $browsers {
#{$browser}-transform: $value;
}
}
@mixin vertical-align {
@include transform(translateY(-50%));
position: relative;
top: 50%;
}
.circle-container {
background-image: linear-gradient(90deg, $white 50%, transparent 50%, transparent), linear-gradient(234deg, $red 50%, $white 50%, $white);
border: 2px solid $red;
border-radius: 50%;
box-sizing: content-box;
display: inline-block;
height: 210px;
position: relative;
width: 210px;
}
.circle-container-box {
background-color: $white;
border-radius: 50%;
display: inline-block;
height: 180px;
line-height: 180px;
margin-left: 15px;
margin-top: 15px;
position: absolute;
text-align: center;
top: left;
width: 180px;
}
.circle-content {
@include vertical-align();
}
.circle-text {
font-size: 26px;
line-height: normal;
position: relative;
text-align: center;
}
Raw
SassMeister-output.css
.circle-container {
background-image: linear-gradient(90deg, #FFF 50%, transparent 50%, transparent), linear-gradient(234deg, #c0392b 50%, #FFF 50%, #FFF);
border: 2px solid #c0392b;
border-radius: 50%;
box-sizing: content-box;
display: inline-block;
height: 210px;
position: relative;
width: 210px;
}
.circle-container-box {
background-color: #FFF;
border-radius: 50%;
display: inline-block;
height: 180px;
line-height: 180px;
margin-left: 15px;
margin-top: 15px;
position: absolute;
text-align: center;
top: left;
width: 180px;
}
.circle-content {
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
position: relative;
top: 50%;
}
.circle-text {
font-size: 26px;
line-height: normal;
position: relative;
text-align: center;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="circle-container">
<div class="circle-container-box">
<div class="circle-content">
<div class="circle-text">here comes the dynamic text kjhei</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment