RubyGems - spectre_scss - Versions diffs - 0.4.2.0 → 0.4.3.0 - Mend

spectre_scss 0.4.2.0 → 0.4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

data/vendor/assets/stylesheets/spectre/_icons.scss CHANGED Viewed

@@ -1,656 +1,5 @@
 // CSS Icons
-$icon-border-width: $border-width-lg;
-.icon {
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: inherit;
-  font-style: normal;
-  height: 1em;
-  position: relative;
-  text-indent: -9999px;
-  vertical-align: middle;
-  width: 1em;
-  &::before,
-  &::after {
-    display: block;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-// Icon arrows
-.icon-arrow-down,
-.icon-arrow-left,
-.icon-arrow-right,
-.icon-arrow-up,
-.icon-downward,
-.icon-back,
-.icon-forward,
-.icon-upward {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
-    content: "";
-    height: .65em;
-    width: .65em;
-  }
-}
-.icon-arrow-down {
-  &::before {
-    transform: translate(-50%, -75%) rotate(225deg);
-  }
-}
-.icon-arrow-left {
-  &::before {
-    transform: translate(-25%, -50%) rotate(-45deg);
-  }
-}
-.icon-arrow-right {
-  &::before {
-    transform: translate(-75%, -50%) rotate(135deg);
-  }
-}
-.icon-arrow-up {
-  &::before {
-    transform: translate(-50%, -25%) rotate(45deg);
-  }
-}
-.icon-back,
-.icon-forward {
-  &::after {
-    background: currentColor;
-    content: "";
-    height: $icon-border-width;
-    width: .8em;
-  }
-}
-.icon-downward,
-.icon-upward {
-  &::after {
-    background: currentColor;
-    content: "";
-    height: .8em;
-    width: $icon-border-width;
-  }
-}
-.icon-back {
-  &::after {
-    left: 55%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(-45deg);
-  }
-}
-.icon-downward {
-  &::after {
-    top: 45%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(-135deg);
-  }
-}
-.icon-forward {
-  &::after {
-    left: 45%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(135deg);
-  }
-}
-.icon-upward {
-  &::after {
-    top: 55%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-}
-// Icon caret
-.icon-caret {
-  &::before {
-    border-top: .3em solid currentColor;
-    border-right: .3em solid transparent;
-    border-left: .3em solid transparent;
-    content: "";
-    height: 0;
-    width: 0;
-    transform: translate(-50%, -25%);
-  }
-}
-// Icon menu
-.icon-menu {
-  &::before {
-    background: currentColor;
-    box-shadow: 0 -.35em, 0 .35em;
-    content: "";
-    height: $icon-border-width;
-    width: 100%;
-  }
-}
-// Icon apps
-.icon-apps {
-  &::before {
-    background: currentColor;
-    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
-    content: "";
-    height: 3px;
-    width: 3px;
-  }
-}
-// Icon resize
-.icon-resize-horiz,
-.icon-resize-vert {
-  &::before,
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
-    content: "";
-    height: .45em;
-    width: .45em;
-  }
-  &::before {
-    transform: translate(-50%, -90%) rotate(45deg);
-  }
-  &::after {
-    transform: translate(-50%, -10%) rotate(225deg);
-  }
-}
-.icon-resize-horiz {
-  &::before {
-    transform: translate(-90%, -50%) rotate(-45deg);
-  }
-  &::after {
-    transform: translate(-10%, -50%) rotate(135deg);
-  }
-}
-// Icon more
-.icon-more-horiz,
-.icon-more-vert {
-  &::before {
-    background: currentColor;
-    box-shadow: -.4em 0, .4em 0;
-    border-radius: 50%;
-    content: "";
-    height: 3px;
-    width: 3px;
-  }
-}
-.icon-more-vert {
-  &::before {
-    box-shadow: 0 -.4em, 0 .4em;
-  }
-}
-// Icon plus, minus, cross
-.icon-plus,
-.icon-minus,
-.icon-cross {
-  &::before {
-    background: currentColor;
-    content: "";
-    height: $icon-border-width;
-    width: 100%;
-  }
-}
-.icon-plus,
-.icon-cross {
-  &::after {
-    background: currentColor;
-    content: "";
-    height: 100%;
-    width: $icon-border-width;
-  }
-}
-.icon-cross {
-  &::before {
-    width: 100%;
-  }
-  &::after {
-    height: 100%;
-  }
-  &::before,
-  &::after {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-}
-// Icon check
-.icon-check {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-right: 0;
-    border-top: 0;
-    content: "";
-    height: .5em;
-    width: .9em;
-    transform: translate(-50%, -75%) rotate(-45deg);
-  }
-}
-// Icon stop
-.icon-stop {
-  border: $icon-border-width solid currentColor;
-  border-radius: 50%;
-  &::before {
-    background: currentColor;
-    content: "";
-    height: $icon-border-width;
-    transform: translate(-50%, -50%) rotate(45deg);
-    width: 1em;
-  }
-}
-// Icon shutdown
-.icon-shutdown {
-  border: $icon-border-width solid currentColor;
-  border-radius: 50%;
-  border-top-color: transparent;
-  &::before {
-    background: currentColor;
-    content: "";
-    height: .5em;
-    top: .1em;
-    width: $icon-border-width;
-  }
-}
-// Icon refresh
-.icon-refresh {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    border-right-color: transparent;
-    content: "";
-    height: 1em;
-    width: 1em;
-  }
-  &::after {
-    border: .2em solid currentColor;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    content: "";
-    height: 0;
-    left: 80%;
-    top: 20%;
-    width: 0;
-  }
-}
-// Icon search
-.icon-search {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    content: "";
-    height: .75em;
-    left: 5%;
-    top: 5%;
-    transform: translate(0, 0) rotate(45deg);
-    width: .75em;
-  }
-  &::after {
-    background: currentColor;
-    content: "";
-    height: $icon-border-width;
-    left: 80%;
-    top: 80%;
-    transform: translate(-50%, -50%) rotate(45deg);
-    width: .4em;
-  }
-}
-// Icon edit
-.icon-edit {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    content: "";
-    height: .4em;
-    transform: translate(-40%, -60%) rotate(-45deg);
-    width: .85em;
-  }
-  &::after {
-    border: .15em solid currentColor;
-    border-top-color: transparent;
-    border-right-color: transparent;
-    content: "";
-    height: 0;
-    left: 5%;
-    top: 95%;
-    transform: translate(0, -100%);
-    width: 0;
-  }
-}
-// Icon delete
-.icon-delete {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    border-top: 0;
-    content: "";
-    height: .75em;
-    top: 60%;
-    width: .75em;
-  }
-  &::after {
-    background: currentColor;
-    box-shadow: -.25em .2em, .25em .2em;
-    content: "";
-    height: $icon-border-width;
-    top: $icon-border-width/2;
-    width: .5em;
-  }
-}
-// Icon share
-.icon-share {
-  border: $icon-border-width solid currentColor;
-  border-radius: $border-radius;
-  border-right: 0;
-  border-top: 0;
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-left: 0;
-    border-top: 0;
-    content: "";
-    height: .4em;
-    left: 100%;
-    top: .25em;
-    transform: translate(-125%, -50%) rotate(-45deg);
-    width: .4em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
-    border-radius: 75% 0;
-    content: "";
-    height: .5em;
-    width: .6em;
-  }
-}
-// Icon flag
-.icon-flag {
-  &::before {
-    background: currentColor;
-    content: "";
-    height: 1em;
-    left: 15%;
-    width: $icon-border-width;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom-right-radius: $border-radius;
-    border-left: 0;
-    border-top-right-radius: $border-radius;
-    content: "";
-    height: .65em;
-    top: 35%;
-    left: 60%;
-    width: .8em;
-  }
-}
-// Icon bookmark
-.icon-bookmark {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    content: "";
-    height: .9em;
-    width: .8em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-left: 0;
-    border-radius: $border-radius;
-    content: "";
-    height: .5em;
-    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
-    width: .5em;
-  }
-}
-// Icon download & upload
-.icon-download,
-.icon-upload {
-  border-bottom: $icon-border-width solid currentColor;
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
-    content: "";
-    height: .5em;
-    width: .5em;
-    transform: translate(-50%, -60%) rotate(-135deg);
-  }
-  &::after {
-    background: currentColor;
-    content: "";
-    height: .6em;
-    top: 40%;
-    width: $icon-border-width;
-  }
-}
-.icon-upload {
-  &::before {
-    transform: translate(-50%, -60%) rotate(45deg);
-  }
-  &::after {
-    top: 50%;
-  }
-}
-// Icon time
-.icon-time {
-  border: $icon-border-width solid currentColor;
-  border-radius: 50%;
-  &::before {
-    background: currentColor;
-    content: "";
-    height: .4em;
-    transform: translate(-50%, -75%);
-    width: $icon-border-width;
-  }
-  &::after {
-    background: currentColor;
-    content: "";
-    height: .3em;
-    transform: translate(-50%, -75%) rotate(90deg);
-    transform-origin: 50% 90%;
-    width: $icon-border-width;
-  }
-}
-// Icon mail
-.icon-mail {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: $border-radius;
-    content: "";
-    height: .8em;
-    width: 1em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-right: 0;
-    border-top: 0;
-    content: "";
-    height: .5em;
-    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
-    width: .5em;
-  }
-}
-// Icon people
-.icon-people {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    content: "";
-    height: .45em;
-    top: 25%;
-    width: .45em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50% 50% 0 0;
-    content: "";
-    height: .4em;
-    top: 75%;
-    width: .9em;
-  }
-}
-// Icon message
-.icon-message {
-  border: $icon-border-width solid currentColor;
-  border-bottom: 0;
-  border-radius: $border-radius;
-  border-right: 0;
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-left: 0;
-    border-bottom-right-radius: $border-radius;
-    border-top: 0;
-    content: "";
-    height: .8em;
-    left: 65%;
-    top: 40%;
-    width: .7em;
-  }
-  &::after {
-    background: currentColor;
-    border-radius: $border-radius;
-    content: "";
-    height: .3em;
-    left: 10%;
-    top: 100%;
-    transform: translate(0, -90%) rotate(45deg);
-    width: $icon-border-width;
-  }
-}
-// Icon photo
-.icon-photo {
-  border: $icon-border-width solid currentColor;
-  border-radius: $border-radius;
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    content: "";
-    height: .25em;
-    left: 35%;
-    top: 35%;
-    width: .25em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-left: 0;
-    content: "";
-    height: .5em;
-    left: 60%;
-    transform: translate(-50%, 25%) rotate(-45deg);
-    width: .5em;
-  }
-}
-// Icon link
-.icon-link {
-  &::before,
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-radius: 5em 0 0 5em;
-    border-right: 0;
-    content: "";
-    height: .5em;
-    width: .75em;
-  }
-  &::before {
-    transform: translate(-70%, -45%) rotate(-45deg);
-  }
-  &::after {
-    transform: translate(-30%, -55%) rotate(135deg);
-  }
-}
-// Icon location
-.icon-location {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50% 50% 50% 0;
-    content: "";
-    height: .8em;
-    transform: translate(-50%, -60%) rotate(-45deg);
-    width: .8em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    content: "";
-    height: .2em;
-    transform: translate(-50%, -80%);
-    width: .2em;
-  }
-}
-// Icon emoji
-.icon-emoji {
-  border: $icon-border-width solid currentColor;
-  border-radius: 50%;
-  &::before {
-    border-radius: 50%;
-    box-shadow: -.17em -.15em, .17em -.15em;
-    content: "";
-    height: .1em;
-    width: .1em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom-color: transparent;
-    border-radius: 50%;
-    border-right-color: transparent;
-    content: "";
-    height: .5em;
-    transform: translate(-50%, -40%) rotate(-135deg);
-    width: .5em;
-  }
-}
-// Component icon support
-.accordion,
-.btn,
-.toast,
-.menu {
-  .icon {
-    vertical-align: -10%;
-  }
-}
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";

data/vendor/assets/stylesheets/spectre/_labels.scss CHANGED Viewed

@@ -1,15 +1,17 @@
 // Labels
 .label {
   @include label-base();
-  @include label-variant(lighten($body-font-color, 5%), $bg-color);
+  @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
   display: inline-block;
+  // Label rounded
   &.label-rounded {
     border-radius: 5rem;
     padding-left: .4rem;
     padding-right: .4rem;
   }
+  // Label colors
   &.label-primary {
     @include label-variant($light-color, $primary-color);
   }

data/vendor/assets/stylesheets/spectre/_modals.scss CHANGED Viewed

@@ -32,13 +32,25 @@
     .modal-container {
       animation: slide-down .2s ease 1;
       max-width: 640px;
+      width: 100%;
       z-index: $zindex-0;
     }
   }
   &.modal-sm {
     .modal-container {
-      max-width: $control-max-width;
+      max-width: 320px;
+    }
+  }
+  &.modal-lg {
+    .modal-overlay {
+      background: $bg-color-light;
+    }
+    .modal-container {
+      box-shadow: none;
+      max-width: 960px;
     }
   }
 }
@@ -52,7 +64,7 @@
   text-align: left;
   .modal-header {
-    padding: $layout-spacing-lg;
+    padding: $unit-4 $unit-6;
     .modal-title {
       margin: 0;
@@ -62,12 +74,12 @@
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
-    padding: $layout-spacing-lg;
+    padding: $unit-4 $unit-6;
     position: relative;
   }
   .modal-footer {
-    padding: $layout-spacing-lg;
+    padding: $unit-4 $unit-6;
     text-align: right;
   }
 }

data/vendor/assets/stylesheets/spectre/_tooltips.scss CHANGED Viewed

@@ -19,7 +19,7 @@
     text-overflow: ellipsis;
     transform: translate(-50%, $unit-2);
     transition: all .2s ease;
-    white-space: nowrap;
+    white-space: pre;
     z-index: $zindex-3;
   }
   &:focus,