gdumitrescu
11/26/2015 - 10:35 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

SassMeister-rendered.html
content_copyfile_download
<!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>
SassMeister-output.css
content_copyfile_download
.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;
}
SassMeister-input.scss
content_copyfile_download
// ----
// 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;
}
SassMeister-input-HTML.html
content_copyfile_download
<!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>