cactu 0.1.2 → 0.18.0

data/assets/stylesheets/components/_navs.scss

@@ -0,0 +1,52 @@
+//
+// Navs
+// --------------------------------------------------
+
+
+// Variables
+//
+$nav-link-padding:  .5rem .75rem !default;
+
+
+[class^="nav-"] {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  * {
+    display: flex;
+    margin: 0;
+  }
+
+  a {
+    position: relative;
+    text-decoration: none;
+    padding: $nav-link-padding;
+  }
+
+  // Adapts to nav styles
+  .dropdown {
+    .toggle {
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+      color: $link-color;
+      padding: $nav-link-padding;
+      background-color: transparent;
+
+      @include hover-focus {
+        color: $link-hover-color;
+      }
+    }
+  }
+}
+
+.nav-vertical {
+  flex-direction: column;
+
+  .dropdown nav {
+    width: 100%;
+  }
+}

data/assets/stylesheets/components/_paginations.scss

@@ -0,0 +1,76 @@
+//
+// Paginations
+// --------------------------------------------------
+
+
+// Variables
+//
+$pagination-margin:                     .5rem 0 !default;
+$pagination-item-padding:               .25rem .625rem !default;
+$pagination-item-border-width:          $border-width !default;
+$pagination-item-border:                $pagination-item-border-width solid $border-color !default;
+$pagination-tem-background:             $white !default;
+$pagination-item-background-hover:      darken($pagination-tem-background, 5%) !default;
+$pagination-item-transition:            background-color $speed ease-in-out, color $speed ease-in-out !default;
+$pagination-item-radius-first:          $radius 0 0 $radius !default;
+$pagination-item-radius-last:           0 $radius $radius 0 !default;
+$pagination-item-active-color:          lighten($text-color, 20%) !default;
+$pagination-item-active-background:     darken($pagination-item-background-hover, 5%) !default;
+
+
+.pagination,
+.pagination-center,
+.pagination-end {
+  display: flex;
+  flex-wrap: nowrap;
+  margin: $pagination-margin;
+  padding: 0;
+  list-style: none;
+
+  > *,
+  > a {
+    display: flex;
+    @include transition($pagination-item-transition);
+
+    &:not(:first-child) {
+      margin-left: -$pagination-item-border-width;
+    }
+  }
+
+  > * {
+    &:first-child,
+    &:first-child a {
+      border-radius: $pagination-item-radius-first;
+    }
+
+    &:last-child,
+    &:last-child a {
+      border-radius: $pagination-item-radius-last;
+    }
+
+    @include hover-focus {
+      background-color: transparent;
+    }
+  }
+
+  a {
+    padding: $pagination-item-padding;
+    border: $pagination-item-border;
+
+    @include hover-focus {
+      text-decoration: none;
+      background-color: $pagination-item-background-hover;
+    }
+
+    &.active {
+      color: $pagination-item-active-color;
+      background-color: $pagination-item-active-background;
+    }
+
+    &.disabled {
+      @include hover-focus {
+        background-color: $pagination-tem-background;
+      }
+    }
+  }
+}

data/assets/stylesheets/components/_tables.scss

@@ -0,0 +1,49 @@
+//
+// Tables
+// --------------------------------------------------
+
+
+// Variables
+//
+$cell-padding:              .625rem 1rem !default;
+$cell-border:               $border-base !default;
+$cell-interleaved-color:    $white-smoke !default;
+
+
+th, td {
+  padding: $cell-padding;
+  border: $cell-border;
+}
+
+th {
+  font-weight: bold;
+  border-bottom-width: 2px;
+}
+
+.table-flush,
+.table-flush-interleaved {
+  th, td {
+    border-top: 0;
+    border-right: 0;
+    border-left: 0;
+  }
+
+  tr:last-child td {
+    border-bottom: 0;
+  }
+}
+
+.table-interleaved,
+.table-flush-interleaved {
+  tr {
+    &:nth-child(2n) {
+      background-color: $cell-interleaved-color;
+    }
+  }
+}
+
+.table-borderless {
+  th, td {
+    border: 0;
+  }
+}

data/assets/stylesheets/components/_tooltips.scss

@@ -0,0 +1,138 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Variables
+//
+$tooltip-color:             $white !default;
+$tooltip-background:        $black !default;
+$tooltip-triangle-size:     6px !default;
+$tooltip-padding-y:         .5rem !default;
+$tooltip-padding-x:         .625rem !default;
+$tooltip-radius:            $radius !default;
+$tooltip-transition:        opacity .2s ease-in-out !default;
+
+
+[class*="tooltip"] {
+  position: relative;
+
+  &:before,
+  &:after {
+    position: absolute;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    z-index: $zindex-top;
+    @include transition($tooltip-transition);
+  }
+
+  &:before {
+    content: '';
+    color: $tooltip-background;
+  }
+
+  &:after {
+    content: attr(data-tooltip);
+    display: block;
+    color: $tooltip-color;
+    font-size: 90%;
+    padding: $tooltip-padding-y $tooltip-padding-x;
+    white-space: nowrap;
+    line-height: 1;
+    border-radius: $tooltip-radius;
+    background-color: $tooltip-background;
+  }
+
+  &:hover {
+    &:after,
+    &:before {
+      opacity: 1;
+    }
+  }
+
+  // Has not data-tooltip attribute
+  &:not([data-tooltip]) {
+    &:before,
+    &:after { display: none; }
+  }
+}
+
+// Empy data-tooltip attribute
+[data-tooltip=''] {
+  &:before,
+  &:after {
+    display: none;
+  }
+}
+
+.tooltip-top {
+  &:before,
+  &:after {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &:before {
+    @include triangle-icon($tooltip-triangle-size, 'down');
+  }
+
+  &:after {
+    margin-bottom: $tooltip-triangle-size - 1;
+  }
+}
+
+.tooltip-right {
+  &:before,
+  &:after {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+  }
+
+  &:before {
+    @include triangle-icon($tooltip-triangle-size, 'left');
+  }
+
+  &:after {
+    margin-left: $tooltip-triangle-size;
+  }
+}
+
+.tooltip-bottom {
+  &:before,
+  &:after {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &:before {
+    @include triangle-icon($tooltip-triangle-size, 'up');
+  }
+
+  &:after {
+    margin-top: $tooltip-triangle-size;
+  }
+}
+
+.tooltip-left {
+  &:before,
+  &:after {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:before {
+    left: 0;
+    margin-left: -$tooltip-triangle-size;
+    @include triangle-icon($tooltip-triangle-size, 'right');
+  }
+
+  &:after {
+    right: 100%;
+    margin-right: $tooltip-triangle-size;
+  }
+}

data/assets/stylesheets/elements/_button.scss

@@ -0,0 +1,94 @@
+//
+// Button
+// --------------------------------------------------
+
+
+//  Variables
+//
+$button-font-weight:          $font-weight-normal !default;
+$button-transition:           color $speed ease-in-out, background-color $speed ease-in-out, border-color $speed ease-in-out, box-shadow $speed ease-in-out !default;
+$button-padding-y:            .375rem !default;
+$button-padding-x:            .75rem !default;
+$button-font-size:            1rem !default;
+$button-line-height:          $line-height !default;
+$button-border-radius:        $radius !default;
+$button-color:                $text-color !default;
+$button-background:           $gray-200 !default;
+$button-border:               $border-width solid transparent !default;
+$button-hover-background:     darken($button-background, 10%) !default;
+$button-focus-box-shadow:     0 0 0 $outline-width darken($button-background, 20%) !default;
+$button-disabled-opacity:     .57 !default;
+$button-active-box-shadow:    inset 0 3px 5px rgba($black, .125) !default;
+
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+// .button used for links too
+button,
+.button {
+  display: inline-block;
+  font-weight: $button-font-weight;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  color: $button-color;
+  border: $button-border;
+  background-color: $button-background;
+  @include button-size($button-padding-y, $button-padding-x, $button-font-size, $button-line-height, $button-border-radius);
+  @include transition($button-transition);
+
+  // Share hover and focus styles
+  &:hover {
+    color: $button-color;
+    text-decoration: none;
+    background-color: $button-hover-background;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    color: $button-color;
+    text-decoration: none;
+    box-shadow: $button-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $button-disabled-opacity;
+    box-shadow: none;
+
+    @include hover-focus {
+      background-color: $button-background;
+    }
+  }
+
+  // Only for selectable buttons
+  &:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    background-image: none;
+    background-color: $button-hover-background;
+    box-shadow: $button-active-box-shadow;
+
+    &:focus {
+      box-shadow: $button-focus-box-shadow, $button-active-box-shadow;
+    }
+  }
+
+  & ~ button,
+  & ~ .button {
+    margin-left: .5rem;
+  }
+}

data/assets/stylesheets/elements/_code.scss

@@ -0,0 +1,75 @@
+//
+// Code
+// --------------------------------------------------
+
+
+// Variables
+//
+$code-color:          #ff3860 !default;
+$code-background:     $white-smoke !default;
+$code-font-size:      .85rem !default;
+$code-padding:        .2rem .3rem !default;
+$code-radius:         3px !default;
+$pre-color:           $gray-900 !default;
+$pre-background:      $code-background !default;
+$pre-padding:         1rem !default;
+$pre-margin:          1rem !default;
+$kbd-color:           $white !default;
+$kbd-background:      $gray-800 !default;
+
+
+pre,
+code,
+kbd,
+samp {
+  font-family: $font-family-monospace;
+  font-size: 1em;
+}
+
+// Inline code
+//
+code {
+  color: $code-color;
+  word-break: break-word;
+  background-color: $code-background;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
+}
+
+// Blocks of code
+//
+pre {
+  display: block;
+  font-size: $code-font-size;
+  color: $pre-color;
+  padding: $pre-padding;
+  margin-bottom: $pre-margin;
+  overflow: auto;
+  // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
+  // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+  -ms-overflow-style: scrollbar;
+  background-color: $pre-background;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    font-size: inherit;
+    padding: 0;
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+code,
+kbd {
+  border-radius: $code-radius;
+  font-size: $code-font-size;
+  padding: $code-padding;
+}
+
+kbd {
+  color: $kbd-color;
+  background-color: $kbd-background;
+}