Contents

// ========================================================================
//   Component: circles.less
// ========================================================================
 
//
// Colored circle for indication purposes
// 

$point-sz-sm:       5px;
$point-sz:          7px;
$point-sz-lg:       11px;
$point-sz-xl:       18px;

.circle {
  display: inline-block;
  width: $point-sz;
  height: $point-sz;
  border-radius: 500px;
  margin: 0 .5em;
  background-color: #ddd;
  vertical-align: baseline;
  border: 2px solid transparent;
  &.text-left {
    margin-left: 0;
  }
  &.text-right {
    margin-right: 0;
  }
}

.circle-primary {
  background-color: $brand-primary;
}
.circle-success {
  background-color: $brand-success;
}
.circle-info {
  background-color: $brand-info;
}
.circle-warning {
  background-color: $brand-warning;
}
.circle-danger {
  background-color: $brand-danger;
}
.circle-green {
  background-color: $brand-green;
}
.circle-pink {
  background-color: $brand-pink;
}
.circle-inverse {
  background-color: $brand-inverse;
}
.circle-purple {
  background-color: $brand-purple;
}


.circle-sm {
  width: $point-sz-sm;
  height: $point-sz-sm;
}

.circle-lg {
  width: $point-sz-lg;
  height: $point-sz-lg;
}

.circle-xl {
  width: $point-sz-xl;
  height: $point-sz-xl;
}

.circle-outline {
  background-color: transparent;
  &.circle-primary {
    border: 1px solid $brand-primary;
  }
  &.circle-success {
    border: 1px solid $brand-success;
  }
  &.circle-info {
    border: 1px solid $brand-info;
  }
  &.circle-warning {
    border: 1px solid $brand-warning;
  }
  &.circle-danger {
    border: 1px solid $brand-danger;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
radius-rails-3.1.4	app/assets/stylesheets/radius-theme/app/circles.scss