ozfortress/citadel

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 */

@import 'bootstrap_theme'

// External styles
@import 'bootstrap'
@import 'rails_bootstrap_forms'
@import 'pagedown_bootstrap'
@import 'font-awesome'

// Project styles
@import 'navbar'
@import 'users'
@import 'forums'
@import 'leagues'
@import 'markdown'

html
  font-size: 14px

body
  padding-top: $navbar-height

h1, h2, h3, h4, h5
  word-break: break-all

.badge
  &.anchor-top-right
    position: absolute
    top: -0.25rem
    right: -0.25rem

  &.anchor-bottom-right
    position: absolute
    bottom: -0.25rem
    right: -0.25rem

.border-dotted
  border-style: dotted

.border-dashed
  border-style: dashed

.cursor-pointer
  cursor: pointer

// This helps ensure consistent spacing & friendly wrapping of buttons for smaller dimensions
.btn-toolbar.guttered
  margin: $spacer * -0.25

  .btn
    margin: $spacer * 0.25

.fill-success
  fill: $success !important

.fill-secondary
  fill: $secondary !important

.fill-light
  fill: $light !important

.icon-dark
  fill: black
.icon-light
  fill: white
.icon
  @extend .icon-dark

  width: 1em
  height: 1em
  position: relative
  top: .125em
  vertical-align: baseline

.navbar-dark
  .icon
    @extend .icon-light

  .dropdown-menu
    .icon
      @extend .icon-dark

.btn-xs
  @extend .btn-sm
  font-size: 0.7rem
  padding: 0.2rem 0.4rem

.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-dark
  .icon
    @extend .icon-light

.form-group > label
  font-weight: bold

blockquote
  $blockquote-border-color: rgba(0, 0, 0, 0.07)
  $blockquote-background-color: rgba(0, 0, 0, 0.03)
  font-size: 0.8rem
  background: $blockquote-background-color
  border: 1px solid $blockquote-border-color
  border-left: 5px solid $blockquote-border-color
  padding: 1rem

// Alternative to using .col or .ml-auto as method to space elements apart
// (because those have margin / padding annoyances)
.spacer
  flex: 1

// Long pagination doesn't wrap by default on small dimensions
.pagination
  flex-flow: wrap

// Custom list class that handles rows which can be dynamically added / removed
// which will typically have input or select fields
ul.list-group.list-dynamic-add
  li
    display: flex
    justify-content: stretch
    align-items: flex-end
    width: 100%

    .form-group
      flex: 1

      input, select
        flex: 1

// Workaround for webkit having shit flexbox support
.webkit-min-height-fit-content
  min-height: fit-content