ndlib/sipity

View on GitHub
app/assets/stylesheets/framework_and_overrides.css.scss

Summary

Maintainability
Test Coverage
// Bootstrap variables
$border-radius-base: 2px;
$border-radius-large: 4px;
$border-radius-small: 0;

// Include theme
@import 'theme/default';

// Include framework
@import 'bootstrap-sprockets';
@import 'bootstrap';

// Theme variables
$text-highlight-color: #ffec87 !default;
$work-status-color: $gray-light !default;

// Make all images responsive by default
img {
  @extend .img-responsive;
  margin: 0 auto;
}

// Extend structural HTML elements with Bootstrap styles
main {
  @extend .container;
  margin-top: 51px; // accommodate the navbar
  padding-bottom: 80px;
  padding-top: .5em;

  > section:first-child {
    margin-top: 0;
  }
}


section {
  margin-top: 20px;
}

// Position non-link navbar text similar to links
.nav > li {
  line-height: $navbar-height;
  padding-left: 15px;
  padding-right: 15px;

  > a {
    margin-left: -15px;
    margin-right: -15px;
  }
}

// Mobile navbar layout
.navbar .navbar-toggle {
  margin-right: 0;
}

.navbar .navbar-brand {
  padding-left: 0;
}

@media only screen and (min-width: $screen-sm-min) {
  .navbar .navbar-brand {
    padding-left: 15px;
  }
}

// Correcting alert styles
.alert-error {
  @extend .alert-danger;
}

// Form Action Pane
.action-pane [type="submit"] {
  @extend .btn;
  @extend .btn-primary;
}

// Dangerous Form Action
.action-pane .btn-danger[type="submit"] {
  @extend .btn;
  @extend .btn-danger;
}

.action-pane.state-advancing-action {
  padding-top: 1em;
}

// Styles for form views using Bootstrap generated by the rails_layout gem
.authform {
  margin: 0 auto;
  max-width: 320px;
  padding-top: 30px;

  form {
    @extend .well;
    @extend .well-lg;
    padding-bottom: 40px;
  }

  fieldset {
    @extend .well;
  }

  .right {
    float: right;
  }

  .button {
    @extend .btn;
    @extend .btn-primary;
  }
}

// Theme adjustments
.btn-primary b,
.btn-primary strong,
.panel-primary .panel-title b {
  color: $text-highlight-color;
  font-variant: small-caps;
  letter-spacing: .08em;
  text-transform: lowercase;
  word-spacing: -.1em;
}

.work-show {
  .work-title {
    margin-bottom: 5px;
  }

  .work-processing-state {
    color: $work-status-color;
  }

  .work-status {
    color: $gray-light;
    font-size: .9em;
    letter-spacing: .09em;
    margin: 0;
    margin-bottom: 5px;
    padding-top: .5em;
    text-transform: uppercase;
  }
}

// Aligning SimpleForm behavior with Bootstrap's expectations
.control-group {
  margin-bottom: 1em;
}

.form-inline .control-group,
.form-inline .controls {
  display: inline-block;
}

.form-inline .control-group {
  padding-left: 1em;
}

.form-inline .controls {
  padding-left: .5em;
}


.select[multiple],
.select[size] {
  height: 20em;
}

// Typographic enhancements
abbr {
  font-variant: small-caps;
  letter-spacing: .05em;
  text-transform: lowercase;
}

// Utility classes
.centered {
  text-align: center;
}

.with-bottom-padding {
  padding-bottom: 1em;
}

.with-top-padding {
  padding-top: 1em;
}

.help-icon {
  color: $brand-primary;
}