Generated by SassMeister.com.

SassMeister-input-HTML.haml

%span.required
    %input

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

.hidden
  visibility: hidden
  

body, button
  font-family: 'Open Sans',serif

body
  //overflow: -moz-scrollbars-vertical
  //overflow-y: scroll
  overflow: hidden

.devel
  font-family: 'Open Sans',serif
  font-size: 20px
  color: black

.ton
  font-family: 'Open Sans',serif
  font-size: 20px
  color: red

.alpha
  font-family: Marck Script
  color: white

.nav-root
  width: 250px
  background-color: white
  ul.nav
    margin-bottom: 0px
    li
      cursor: pointer
      a
        color: black
        padding: 0px
  .nav-child
    margin-left: 5px

h2.active, h3.active, h4.active, h5.active, h6.active
  color: #008000

div.active
  border-color: #008000
  label
    color: #008000

li.active > a
  color: #008000
  font-weight: bold

ul.active li
  border-color: #008000
  color: #008000

.well-header
  background-color: white
  padding: 8px
  border-color: white

.attract
  margin-left: 0px
  margin-right: 0px
  margin-top: 0px
  margin-bottom: 0px

.cuddle
  padding-left: 0px
  padding-right: 0px
  padding-top: 0px
  padding-bottom: 0px

.cuddle-left
  padding-left: 0px

.cuddle-right
  padding-right: 0px

.bold
  font-weight: bold

.switch
  position: relative
  > div
    width: 655px
    display: inline-block
    position: absolute

.value
  font-size: 1em
  overflow: hidden

.tags
  margin: 10px 0
  .tag
    border-radius: 6px
    background-color: #EFEFEF
    border: 1px solid #DDD
    padding: 5px
    margin-right: 10px
    &:hover
      color: red
      text-decoration: none

input
  margin-bottom: 0px !important

.naked
  border: 0px

@mixin clear-border-radius
  border-bottom-left-radius: 0px
  border-bottom-right-radius: 0px
  border-top-left-radius: 0px
  border-top-right-radius: 0px

$bg-focus: #ea522f
$bg-btn: #9fa6ac
$bg-control: #354452
$bg-control2: #5d6b79
$bg-control3: #3f4e5c
$block-height: 90px
$bg-toolbar: #fdedea

@mixin clear-border
  border: 0px solid

@mixin add-list-item
  text-align: center
  padding: 2px
  a
    color: white

.strong
  font-weight: bold

.box-shadow
  -webkit-box-shadow: 0px 0px 8px 2px gray
  -moz-box-shadow: 0px 0px 8px 2px gray
  box-shadow: 0px 0px 8px 2px gray
  z-index: 999

@mixin btn-toolbar
  background-color: $bg-toolbar
  height: $block-height
  .btn
    background-color: $bg-toolbar
    color: $bg-focus
    @include clear-border
    &:hover
      background-color: white



.form
  &.edit
    .check
      padding: 3px
      background-color: #CCCFD4
      $square: 20px
      .check-icon
        width: $square
        min-width: $square
        height: $square
        min-height: $square
        display: inline-block
        background-color: white
        color: white
        text-align: center
        &.active
          color: $bg-focus
      .check-text
        height: $square
        min-height: $square
        display: inline-block
        padding-left: 10px
        cursor: pointer
    .list.simple
      >.title
        padding: 10px
        color: white
      >.add-list-item
        background-color: #354452
        @include add-list-item
        &.disabled
          background-color: #9CA0A4
      .remove
        background-color: #9fa6ac
        padding: 10px
        color: white
    .list.default
      >.title
        padding: 10px
        background-color: $bg-control3
        color: white
      >.add-list-item
        background-color: #33c35b
        @include add-list-item
        &.disabled
          background-color: #ADC9B5
    .widget-box
      @include clear-border-radius
      .widget-title
        @include clear-border-radius
        background-image: none
        background-color: white
      .widget-content
        background-color: $bg-control2
        background-image: none
        padding-left: 0px
        padding-right: 0px
  &.view
    .technology
      .technology-name
        margin-right: 5px
      .technology-usage
        padding: 1px
        background-color: grey
        color: white
        &.Beginner
          background-color: #DCD8D8
        &.DailyBusinessUsage
          background-color: #A6A0A0
        &.Advanced
          background-color: #646060
        &.Expert
          background-color: #363434
      border: 1px solid grey
      padding: 2px
      margin-right: 10px
    .code-header
      background-color: #f0f0f0
      padding: 5px
    .tag
      padding: 5px
      margin-right: 10px
      border: 1px solid gray
      background-color: white
    .rate
      $top-height: 100px
      $bottom-height: 40px
      $text-padding: 10px
      .rate-title
        padding: $text-padding
        height: $top-height
        width: 100%
        background-color: #99A0AB
        color: white
        font-weight: bold
      .rate-score
        padding: $text-padding
        height: $bottom-height
        font-weight: bold
        position: relative
        background-color: #B3BBBC
        color: #434C53
        .text
          z-index: 2
          position: absolute
          top: 0px
          left: 0px
          width: 100%
          height: $bottom-height
        .score
          z-index: 1
          position: absolute
          top: 0px
          left: 0px
          height: $bottom-height
          background-color: #ECEDEF
          &.score-1
            width: 20%
          &.score-2
            width: 40%
          &.score-3
            width: 60%
          &.score-4
            width: 80%
          &.score-5
            width: 100%
      width: $top-height + $bottom-height
      height: $top-height + $bottom-height
      margin-right: 10px
      display: inline-block
    .mini-header
      font-weight: bold
    .right-10
      margin-right: 10px
    .text-block
      padding-top: 10px
      padding-bottom: 10px
    .sub
      padding-left: 15px
    .btn-toolbar
      @include btn-toolbar
    .body
      padding: 10px
      .inline-label
        font-weight: bold
        margin-right: 20px
      hr.underline
        margin-top: 5px
      img.photo
        width: 360px
        height: 170px


.sidebar-content-header
  background-color: $bg-control
  height: $block-height
  color: #4a5764
  text-align: center
  font-size: 36px



.sidebar-content-body 
  padding-top: 10px
  padding-left: 0px
  padding-right: 0px 
  height: 100%
  overflow: hidden
  background-color: $bg-control2
  label
    color: white
    font-weight: normal

.sidebar-collapse
  width: 100%
  div
    height: $block-height
    width: 100%
    min-height: 80px
    background-color: $bg-control
    padding-top: 30px

.sidebar-switch-list
  background-color: $bg-control
  li
    width: 100%
    a
      color: white
      height: $block-height
  li a:hover, li a:focus
    background-color: #495866
  li.active
    background-color: $bg-focus



.form-control,.form-control.active, textarea, .btn-group > .btn, .btn-group > .dropdown-toggle, .input-group-btn > .btn
  border: 2px solid #aeb5bc
  @include clear-border-radius
  background-color: $bg-control2
  color: white
  &.active
    color: white



$menu-height: 80px

.elipse-wrapper
  margin: auto
  width: 100%
  text-align: center

@mixin elipse
  height: 40px
  width: 40px
  background-repeat: no-repeat
  text-align: center
  padding-top: 10px
  display: inline-block
  border-width: 2px 
  border-style: solid
  border-radius: 50%

$menu-item-color: black

.elipse
  border-color: $menu-item-color
  @include elipse
  color: $menu-item-color

.elipse-white
  border-color: white
  @include elipse

.text-behind-elipse
  height: 40px
  padding-top: 10px
  padding-left: 10px
  color: $menu-item-color

.required
  .angle
    position: absolute
    width: 0
    height: 0
    right: 3px
    top: 3px
    border-top: 20px solid red
    border-left: 20px solid transparent
    &:after
      content: ""
      position: absolute
      top: 2px
      right: 2px
      width: 8px
      height: 8px
      font-size: 1em
      line-height: 1em
      color: #fff
  position: relative

.menu-top
  .navbar-header
    .navbar-brand
      background-color: $bg-focus
      background-image: url('/images/qr-logo.png')
      background-position: 0px 0px
      background-repeat: no-repeat
      width: 80px
      height: $menu-height
    width: 250px
    img 
      margin-top: 30px
      margin-left: 10px
  .nav 
    >li 
      &.active
        background-color: $bg-focus
        span
          color: white
          border-color: white
      >a
        height: $menu-height
  height: $menu-height
  background-color: white
  margin-bottom: 0px

.menu-bottom
  .navbar-brand
    background-image: url('/images/qr-logo.png')
    background-position: 0px -80px
    background-repeat: no-repeat
    width: 80px
    height: $menu-height
  height: $menu-height
  background-color: black
.menu-content
  margin-bottom: $menu-height
  margin-top: $menu-height
  //$height: 900px 
  //height: $height - $menu-height * 2
  //max-height: $height - $menu-height * 2
  //overflow: scroll


.readonly-form
  .btn-toolbar
    .btn-group
      .btn
        padding: 5px


.scrollable
  position: relative


.block, .form.view .btn-toolbar .btn.block
  height: $block-height
  min-width: $block-height
  &.active
    background-color: $bg-focus
    color: black


@mixin stage-header
  background-color: $bg-control
  color: white

@mixin border-left
  box-sizing: border-box
  border-left: 2px solid gray

@mixin status-color
  &.green
    background-color: #2EB453
    color: white
  &.red
    background-color: $bg-focus
    color: white

.stage
  .extension
    .header
      @include stage-header
      height: $block-height
      color: white
      text-align: center

    .body
      background-color: white
  .pull
    .pull-header
      color: white
      div
        height: $block-height
    @include stage-header
    .nav
      li 
        a
          color: white
          padding-left: 0px
          padding-right: 0px
          padding-top: 0px
          padding-bottom: 0px
          &:hover
            background-color: #5D6B78
          .header
            color: white
            background-color: #CCCFD4
            @include status-color
            color: $bg-control
            $padding: 3px
            .date
              padding: $padding
            .status
              padding: $padding
              text-align: right
            .delete
              @include border-left
              padding: $padding
              padding-left: 5px
              background-color: $bg-focus
              color: white
          .body
            $height: 50px
            height: $height
            .desc
              padding: 5px
              height: $height
            .favorite
              padding: 0px
              @include border-left
              padding-top: 13px
              text-align: center
              height: $height

        &.active
          a
            color: $bg-control
            background-color: white
            .header
              background-color: #5D6B78
              color: white
              @include status-color
  .body
    .btn-toolbar
      @include btn-toolbar
      .btn
        @include status-color
    .title
      background-color: white

SassMeister-output.css

.hidden {
  visibility: hidden;
}

body, button {
  font-family: "Open Sans", serif;
}

body {
  overflow: hidden;
}

.devel {
  font-family: "Open Sans", serif;
  font-size: 20px;
  color: black;
}

.ton {
  font-family: "Open Sans", serif;
  font-size: 20px;
  color: red;
}

.alpha {
  font-family: Marck Script;
  color: white;
}

.nav-root {
  width: 250px;
  background-color: white;
}
.nav-root ul.nav {
  margin-bottom: 0px;
}
.nav-root ul.nav li {
  cursor: pointer;
}
.nav-root ul.nav li a {
  color: black;
  padding: 0px;
}
.nav-root .nav-child {
  margin-left: 5px;
}

h2.active, h3.active, h4.active, h5.active, h6.active {
  color: green;
}

div.active {
  border-color: green;
}
div.active label {
  color: green;
}

li.active > a {
  color: green;
  font-weight: bold;
}

ul.active li {
  border-color: green;
  color: green;
}

.well-header {
  background-color: white;
  padding: 8px;
  border-color: white;
}

.attract {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.cuddle {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.cuddle-left {
  padding-left: 0px;
}

.cuddle-right {
  padding-right: 0px;
}

.bold {
  font-weight: bold;
}

.switch {
  position: relative;
}
.switch > div {
  width: 655px;
  display: inline-block;
  position: absolute;
}

.value {
  font-size: 1em;
  overflow: hidden;
}

.tags {
  margin: 10px 0;
}
.tags .tag {
  border-radius: 6px;
  background-color: #efefef;
  border: 1px solid #dddddd;
  padding: 5px;
  margin-right: 10px;
}
.tags .tag:hover {
  color: red;
  text-decoration: none;
}

input {
  margin-bottom: 0px !important;
}

.naked {
  border: 0px;
}

.strong {
  font-weight: bold;
}

.box-shadow {
  -webkit-box-shadow: 0px 0px 8px 2px grey;
  -moz-box-shadow: 0px 0px 8px 2px grey;
  box-shadow: 0px 0px 8px 2px grey;
  z-index: 999;
}

.form.edit .check {
  padding: 3px;
  background-color: #cccfd4;
}
.form.edit .check .check-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  display: inline-block;
  background-color: white;
  color: white;
  text-align: center;
}
.form.edit .check .check-icon.active {
  color: #ea522f;
}
.form.edit .check .check-text {
  height: 20px;
  min-height: 20px;
  display: inline-block;
  padding-left: 10px;
  cursor: pointer;
}
.form.edit .list.simple > .title {
  padding: 10px;
  color: white;
}
.form.edit .list.simple > .add-list-item {
  background-color: #354452;
  text-align: center;
  padding: 2px;
}
.form.edit .list.simple > .add-list-item a {
  color: white;
}
.form.edit .list.simple > .add-list-item.disabled {
  background-color: #9ca0a4;
}
.form.edit .list.simple .remove {
  background-color: #9fa6ac;
  padding: 10px;
  color: white;
}
.form.edit .list.default > .title {
  padding: 10px;
  background-color: #3f4e5c;
  color: white;
}
.form.edit .list.default > .add-list-item {
  background-color: #33c35b;
  text-align: center;
  padding: 2px;
}
.form.edit .list.default > .add-list-item a {
  color: white;
}
.form.edit .list.default > .add-list-item.disabled {
  background-color: #adc9b5;
}
.form.edit .widget-box {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.form.edit .widget-box .widget-title {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-image: none;
  background-color: white;
}
.form.edit .widget-box .widget-content {
  background-color: #5d6b79;
  background-image: none;
  padding-left: 0px;
  padding-right: 0px;
}
.form.view .technology {
  border: 1px solid grey;
  padding: 2px;
  margin-right: 10px;
}
.form.view .technology .technology-name {
  margin-right: 5px;
}
.form.view .technology .technology-usage {
  padding: 1px;
  background-color: grey;
  color: white;
}
.form.view .technology .technology-usage.Beginner {
  background-color: #dcd8d8;
}
.form.view .technology .technology-usage.DailyBusinessUsage {
  background-color: #a6a0a0;
}
.form.view .technology .technology-usage.Advanced {
  background-color: #646060;
}
.form.view .technology .technology-usage.Expert {
  background-color: #363434;
}
.form.view .code-header {
  background-color: #f0f0f0;
  padding: 5px;
}
.form.view .tag {
  padding: 5px;
  margin-right: 10px;
  border: 1px solid grey;
  background-color: white;
}
.form.view .rate {
  width: 140px;
  height: 140px;
  margin-right: 10px;
  display: inline-block;
}
.form.view .rate .rate-title {
  padding: 10px;
  height: 100px;
  width: 100%;
  background-color: #99a0ab;
  color: white;
  font-weight: bold;
}
.form.view .rate .rate-score {
  padding: 10px;
  height: 40px;
  font-weight: bold;
  position: relative;
  background-color: #b3bbbc;
  color: #434c53;
}
.form.view .rate .rate-score .text {
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
}
.form.view .rate .rate-score .score {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 40px;
  background-color: #ecedef;
}
.form.view .rate .rate-score .score.score-1 {
  width: 20%;
}
.form.view .rate .rate-score .score.score-2 {
  width: 40%;
}
.form.view .rate .rate-score .score.score-3 {
  width: 60%;
}
.form.view .rate .rate-score .score.score-4 {
  width: 80%;
}
.form.view .rate .rate-score .score.score-5 {
  width: 100%;
}
.form.view .mini-header {
  font-weight: bold;
}
.form.view .right-10 {
  margin-right: 10px;
}
.form.view .text-block {
  padding-top: 10px;
  padding-bottom: 10px;
}
.form.view .sub {
  padding-left: 15px;
}
.form.view .btn-toolbar {
  background-color: #fdedea;
  height: 90px;
}
.form.view .btn-toolbar .btn {
  background-color: #fdedea;
  color: #ea522f;
  border: 0px solid;
}
.form.view .btn-toolbar .btn:hover {
  background-color: white;
}
.form.view .body {
  padding: 10px;
}
.form.view .body .inline-label {
  font-weight: bold;
  margin-right: 20px;
}
.form.view .body hr.underline {
  margin-top: 5px;
}
.form.view .body img.photo {
  width: 360px;
  height: 170px;
}

.sidebar-content-header {
  background-color: #354452;
  height: 90px;
  color: #4a5764;
  text-align: center;
  font-size: 36px;
}

.sidebar-content-body {
  padding-top: 10px;
  padding-left: 0px;
  padding-right: 0px;
  height: 100%;
  overflow: hidden;
  background-color: #5d6b79;
}
.sidebar-content-body label {
  color: white;
  font-weight: normal;
}

.sidebar-collapse {
  width: 100%;
}
.sidebar-collapse div {
  height: 90px;
  width: 100%;
  min-height: 80px;
  background-color: #354452;
  padding-top: 30px;
}

.sidebar-switch-list {
  background-color: #354452;
}
.sidebar-switch-list li {
  width: 100%;
}
.sidebar-switch-list li a {
  color: white;
  height: 90px;
}
.sidebar-switch-list li a:hover, .sidebar-switch-list li a:focus {
  background-color: #495866;
}
.sidebar-switch-list li.active {
  background-color: #ea522f;
}

.form-control, .form-control.active, textarea, .btn-group > .btn, .btn-group > .dropdown-toggle, .input-group-btn > .btn {
  border: 2px solid #aeb5bc;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-color: #5d6b79;
  color: white;
}
.form-control.active, .form-control.active.active, textarea.active, .btn-group > .btn.active, .btn-group > .dropdown-toggle.active, .input-group-btn > .btn.active {
  color: white;
}

.elipse-wrapper {
  margin: auto;
  width: 100%;
  text-align: center;
}

.elipse {
  border-color: black;
  height: 40px;
  width: 40px;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 10px;
  display: inline-block;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  color: black;
}

.elipse-white {
  border-color: white;
  height: 40px;
  width: 40px;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 10px;
  display: inline-block;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
}

.text-behind-elipse {
  height: 40px;
  padding-top: 10px;
  padding-left: 10px;
  color: black;
}

.required {
  position: relative;
}
.required .angle {
  position: absolute;
  width: 0;
  height: 0;
  right: 3px;
  top: 3px;
  border-top: 20px solid red;
  border-left: 20px solid transparent;
}
.required .angle:after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  font-size: 1em;
  line-height: 1em;
  color: white;
}

.menu-top {
  height: 80px;
  background-color: white;
  margin-bottom: 0px;
}
.menu-top .navbar-header {
  width: 250px;
}
.menu-top .navbar-header .navbar-brand {
  background-color: #ea522f;
  background-image: url("/images/qr-logo.png");
  background-position: 0px 0px;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
}
.menu-top .navbar-header img {
  margin-top: 30px;
  margin-left: 10px;
}
.menu-top .nav > li.active {
  background-color: #ea522f;
}
.menu-top .nav > li.active span {
  color: white;
  border-color: white;
}
.menu-top .nav > li > a {
  height: 80px;
}

.menu-bottom {
  height: 80px;
  background-color: black;
}
.menu-bottom .navbar-brand {
  background-image: url("/images/qr-logo.png");
  background-position: 0px -80px;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
}

.menu-content {
  margin-bottom: 80px;
  margin-top: 80px;
}

.readonly-form .btn-toolbar .btn-group .btn {
  padding: 5px;
}

.scrollable {
  position: relative;
}

.block, .form.view .btn-toolbar .btn.block {
  height: 90px;
  min-width: 90px;
}
.block.active, .form.view .btn-toolbar .btn.block.active {
  background-color: #ea522f;
  color: black;
}

.stage .extension .header {
  background-color: #354452;
  color: white;
  height: 90px;
  color: white;
  text-align: center;
}
.stage .extension .body {
  background-color: white;
}
.stage .pull {
  background-color: #354452;
  color: white;
}
.stage .pull .pull-header {
  color: white;
}
.stage .pull .pull-header div {
  height: 90px;
}
.stage .pull .nav li a {
  color: white;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.stage .pull .nav li a:hover {
  background-color: #5d6b78;
}
.stage .pull .nav li a .header {
  color: white;
  background-color: #cccfd4;
  color: #354452;
}
.stage .pull .nav li a .header.green {
  background-color: #2eb453;
  color: white;
}
.stage .pull .nav li a .header.red {
  background-color: #ea522f;
  color: white;
}
.stage .pull .nav li a .header .date {
  padding: 3px;
}
.stage .pull .nav li a .header .status {
  padding: 3px;
  text-align: right;
}
.stage .pull .nav li a .header .delete {
  box-sizing: border-box;
  border-left: 2px solid grey;
  padding: 3px;
  padding-left: 5px;
  background-color: #ea522f;
  color: white;
}
.stage .pull .nav li a .body {
  height: 50px;
}
.stage .pull .nav li a .body .desc {
  padding: 5px;
  height: 50px;
}
.stage .pull .nav li a .body .favorite {
  padding: 0px;
  box-sizing: border-box;
  border-left: 2px solid grey;
  padding-top: 13px;
  text-align: center;
  height: 50px;
}
.stage .pull .nav li.active a {
  color: #354452;
  background-color: white;
}
.stage .pull .nav li.active a .header {
  background-color: #5d6b78;
  color: white;
}
.stage .pull .nav li.active a .header.green {
  background-color: #2eb453;
  color: white;
}
.stage .pull .nav li.active a .header.red {
  background-color: #ea522f;
  color: white;
}
.stage .body .btn-toolbar {
  background-color: #fdedea;
  height: 90px;
}
.stage .body .btn-toolbar .btn {
  background-color: #fdedea;
  color: #ea522f;
  border: 0px solid;
}
.stage .body .btn-toolbar .btn:hover {
  background-color: white;
}
.stage .body .btn-toolbar .btn.green {
  background-color: #2eb453;
  color: white;
}
.stage .body .btn-toolbar .btn.red {
  background-color: #ea522f;
  color: white;
}
.stage .body .title {
  background-color: white;
}

SassMeister-rendered.html

<span class='required'>
  <input>
</span>