uniform-ui 2.4.1 → 3.0.0.beta8

data/lib/assets/stylesheets/uniform/utilities.scss

@@ -0,0 +1,55 @@
+//----------------------------------------------------------------
+//             Overflow
+//----------------------------------------------------------------
+.overflow-hidden{
+    overflow: hidden;
+}
+.overflow-y{
+    overflow-y: auto;
+}
+.overflow-y-scroll{
+    overflow-y: scroll;
+}
+.overflow-x{
+    overflow-x: auto;
+}
+
+//----------------------------------------------------------------
+//             Element Reset
+//----------------------------------------------------------------
+.reset{
+    outline: none;
+    appearance: none;
+    border: none;
+    background:none;
+    padding: 0;
+    margin: 0;
+    list-style:none;
+    text-decoration: none;
+    color: inherit;
+}
+
+//----------------------------------------------------------------
+//             Cursor
+//----------------------------------------------------------------
+@each $type in (
+auto
+default
+pointer
+wait
+text
+move
+not-allowed
+help
+grab
+) {
+    .cursor-#{$type}{
+        cursor: $type;
+    }
+}
+
+//----------------------------------------------------------------
+//             SVG
+//----------------------------------------------------------------
+@include responsive-rule('fill-current'){ fill: currentColor;}
+@include responsive-rule('stroke-current'){ stroke: currentColor;}

data/lib/assets/stylesheets/uniform/utilities/background.scss

@@ -0,0 +1,9 @@
+@import 'uniform/mixins';
+
+@include color-rule('.bg') using ($color){
+    background-color: rgba(#{red($color)}, #{green($color)}, #{blue($color)}, var(--bg-opacity));
+}
+
+@include responsive-rule('bg-none') {
+    background: transparent;
+}

data/lib/assets/stylesheets/uniform/utilities/borders.scss

@@ -0,0 +1,84 @@
+@import 'uniform/mixins';
+
+//----------------------------------------------------------------
+//             Border
+//----------------------------------------------------------------
+@include size-rule('.border') using ($size) {
+    border-width: $size;
+}
+
+@include color-rule('.border') using ($color) {
+    --border-color: #{red($color)}, #{green($color)}, #{blue($color)};
+}
+
+@include responsive-rule('.border-dashed') {
+    border-style: dashed;
+}
+
+@each $direction in 'top' 'right' 'bottom' 'left' {
+    @include responsive-rule('.border-#{$direction}'){
+        border-#{$direction}-width: 1px;
+    }
+    @include size-rule('.border-#{$direction}') using ($size){
+        border-#{$direction}-width: $size;
+    }
+    @include color-rule('.border-#{$direction}') using ($color) {
+        border-#{$direction}-color: rgba(#{red($color)}, #{green($color)}, #{blue($color)}, var(--border-opacity));
+    }
+}
+
+//----------------------------------------------------------------
+//             Border Radius
+//----------------------------------------------------------------
+@include size-rule('.rounded') using ($size){ border-radius: $size;}
+@include size-rule('.rounded-top') using ($size){
+    border-top-right-radius: $size;
+    border-top-left-radius: $size;
+}
+@include size-rule('.rounded-bottom') using ($size){
+    border-bottom-right-radius: $size;
+    border-bottom-left-radius: $size;
+}
+@include size-rule('.rounded-left') using ($size){
+    border-top-left-radius: $size;
+    border-bottom-left-radius: $size;
+}
+@include size-rule('.rounded-right') using ($size){
+    border-top-right-radius: $size;
+    border-bottom-right-radius: $size;
+}
+
+@include responsive-rule('.square') { border-radius: 0;}
+@include responsive-rule('.square-top') {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+@include responsive-rule('.square-bottom') {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+@include responsive-rule('.square-left') {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+@include responsive-rule('.square-right') {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+@include responsive-rule('.round') { border-radius: 50%;}
+
+
+//----------------------------------------------------------------
+//             Divide
+//----------------------------------------------------------------
+@include size-rule('.divide-h') using ($size) {
+    & > * + * {
+        border-left-width: $size;
+    }
+}
+@include size-rule('.divide-v') using ($size) {
+    & > * + * {
+        border-top-width: $size;
+    }
+}

data/lib/assets/stylesheets/uniform/utilities/effects.scss

@@ -0,0 +1,172 @@
+@import 'uniform/mixins';
+
+//----------------------------------------------------------------
+//             Shadow
+//----------------------------------------------------------------
+
+@include pseudo-class-rule('shadow-xs') { box-shadow:      0 1px 0 1px rgba(black, var(--shadow-opacity)); }
+@include pseudo-class-rule('shadow-sm') { box-shadow:      0 1px 2px rgba(black, var(--shadow-opacity)); }
+@include pseudo-class-rule('shadow') {    box-shadow:      0 1px 3px rgba(black, var(--shadow-opacity)); }
+@include pseudo-class-rule('shadow-md') { box-shadow:      0 2px 6px rgba(black, var(--shadow-opacity)); }
+@include pseudo-class-rule('shadow-lg') { box-shadow:      0 2px 12px rgba(black, var(--shadow-opacity)); }
+@include pseudo-class-rule('shadow-outline') { box-shadow: 0 0 0 1px rgba(black, var(--shadow-opacity)); }
+@include pseudo-class-rule('shadow-inset') { box-shadow: inset 0 2px 4px rgba(black, var(--shadow-opacity)); }
+@include pseudo-class-rule('shadow-inline') { box-shadow: inset 0 0 0 1px rgba(black, var(--shadow-opacity)); }
+
+//----------------------------------------------------------------
+//             Opacity
+//----------------------------------------------------------------
+@for $i from 0 through 10 {
+
+    @include pseudo-class-rule('opacity-#{$i * 10}'){
+        opacity: $i / 10;
+    }
+    @include pseudo-class-rule('shadow-opacity-#{$i * 10}'){
+        --shadow-opacity: #{$i / 10};
+    }
+    @include pseudo-class-rule('text-opacity-#{$i * 10}'){
+        --text-opacity: #{$i / 10};
+    }
+    @include pseudo-class-rule('bg-opacity-#{$i * 10}'){
+        --bg-opacity: #{$i / 10};
+    }
+    @include pseudo-class-rule('border-opacity-#{$i * 10}'){
+        --border-opacity: #{$i / 10};
+    }
+    @include pseudo-class-rule('placeholder-opacity-#{$i * 10}'){
+        --placeholder-opacity: #{$i / 10};
+    }
+}
+
+//----------------------------------------------------------------
+//             Transitions
+//----------------------------------------------------------------
+@each $selector, $properties in (
+    none: none,
+    all: all,
+    colors: "background-color, border-color, color, fill, stroke",
+    opacity: opacity,
+    shadow: box-shadow,
+    transform: transform
+) {
+    .transition-#{$selector}{
+        transition-property: $properties;
+    }
+}
+
+@for $i from 0 through 10 {
+    .transition-#{$i*100}{
+        transition-duration: $i * 100ms;
+    }
+}
+
+
+//----------------------------------------------------------------
+//             Transforms
+//----------------------------------------------------------------
+@include responsive-rule('.transform') {
+    --transform-translate-x: 0;
+    --transform-translate-y: 0;
+    --transform-rotate: 0;
+    --transform-skew-x: 0;
+    --transform-skew-y: 0;
+    --transform-scale-x: 1;
+    --transform-scale-y: 1;
+    transform: translateX(var(--transform-translate-x))
+    translateY(var(--transform-translate-y))
+    rotate(var(--transform-rotate))
+    skewX(var(--transform-skew-x))
+    skewY(var(--transform-skew-y))
+    scaleX(var(--transform-scale-x))
+    scaleY(var(--transform-scale-y)) !important;
+}
+@each $deg in (0 1 2 3 6 12 45 90 180) {
+    @include responsive-rule('.rotate-#{$deg}') {
+        --transform-rotate: #{$deg}deg;
+    }
+    @include responsive-rule('.-rotate-#{$deg}') {
+        --transform-rotate: -#{$deg}deg;
+    }
+}
+
+
+//----------------------------------------------------------------
+//             Animations
+//----------------------------------------------------------------
+//spin pulse ping bounce shimmer blink
+
+@each $animation in (
+spin
+ping
+pulse
+bounce
+blink
+) {
+    .animate-#{$animation} {
+        --animation-duration: 1s;
+        animation: $animation var(--animation-duration) linear infinite;
+    }
+}
+@for $i from 0 through 20 {
+    .animation-#{$i*100}{
+        --animation-duration: $i * 100ms;
+    }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes shimmer {
+  0%, 100% {
+    transform: translateY(-25%);
+    animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes blink {
+    0% {
+        opacity: 0;
+    }
+    100%{
+        opacity: 1;
+    }
+}

data/lib/assets/stylesheets/uniform/utilities/layout.scss

@@ -0,0 +1,181 @@
+@import 'uniform/mixins';
+
+//----------------------------------------------------------------
+//             Container
+//----------------------------------------------------------------
+// TODO match this with breakpoints variable, so that breakpoints can change and adjust this
+.container{
+    margin: auto;
+    @include breakpoint('md'){
+        max-width: 720px;
+    }
+    @include breakpoint('lg'){
+        max-width: 1080px;
+    }
+    @include breakpoint('xl'){
+        max-width: 1400px;
+    }
+}
+
+
+//----------------------------------------------------------------
+//             Display
+//----------------------------------------------------------------
+@each $type in (
+    inline
+    block
+    inline-block
+    grid
+    inline-grid
+    flex
+    inline-flex
+    table
+    table-cell
+    table-row
+    contents
+){
+    @include responsive-rule($type){ display: $type; }
+}
+@include responsive-rule('hide'){ display: none; }
+@include pseudo-class-rule('hide', false){ display: none;}
+@include responsive-rule('show'){ display: inherit; }
+@include pseudo-class-rule('show', false){ display: inherit;}
+@include responsive-rule('hide-empty:empty'){ display: none; }
+@include pseudo-class-rule('hide-empty:empty', false){ display: none;}
+
+
+//----------------------------------------------------------------
+//             Float
+//----------------------------------------------------------------
+@include responsive-rule('.float-right'){
+    float:right;
+}
+@include responsive-rule('.float-left'){
+    float: left;
+}
+@include responsive-rule('.clear'){
+    clear:both;
+}
+
+
+//----------------------------------------------------------------
+//             Flex
+//----------------------------------------------------------------
+@include responsive-rule('flex-col'){ flex-direction: column; }
+@include responsive-rule('flex-nowrap'){ flex-wrap: nowrap; }
+@include responsive-rule('flex-wrap'){ flex-wrap: wrap; }
+
+@include responsive-rule('flex-initial'){ flex: 0 1 auto; }
+@include responsive-rule('flex-fill'){ flex: 1 1 auto; }
+@include responsive-rule('flex-none'){ flex: none; }
+
+@for $i from 1 through 12 {
+    @include responsive-rule('order-#{$i}'){ order: $i; }
+}
+
+
+//----------------------------------------------------------------
+//             Grid
+//----------------------------------------------------------------
+@for $i from 1 through 12 {
+    @include responsive-rule('cols-#{$i}'){ grid-template-columns: repeat($i, minmax(0, 1fr)); }
+    @include responsive-rule('col-span-#{$i}'){ grid-column: span $i / span $i; }
+    @include responsive-rule('col-start-#{$i}'){ grid-column-start: $i; }
+    @include responsive-rule('col-end-#{$i}'){ grid-column-end: $i; }
+}
+@for $i from 1 through 6 {
+    @include responsive-rule('rows-#{$i}'){ grid-template-rows: repeat($i, minmax(0, 1fr)); }
+    @include responsive-rule('row-span-#{$i}'){ grid-row: span $i / span $i; }
+    @include responsive-rule('row-start-#{$i}'){ grid-row-start: $i; }
+    @include responsive-rule('row-end-#{$i}'){ grid-row-end: $i; }
+}
+@include responsive-rule('grid-flow-row'){ grid-auto-flow: row; }
+@include responsive-rule('grid-flow-row-dense'){ grid-auto-flow: row dense; }
+@include responsive-rule('grid-flow-col'){ grid-auto-flow: column; }
+@include responsive-rule('grid-flow-column-dense'){ grid-auto-flow: column dense; }
+
+@include size-rule('gap') using ($size) { gap: $size;}
+@include size-rule('gap-h') using ($size) { column-gap: $size;}
+@include size-rule('gap-v') using ($size) { row-gap: $size;}
+
+
+//----------------------------------------------------------------
+//             Alignment
+//----------------------------------------------------------------
+@each $selector, $value in (
+    start: flex-start,
+    end: flex-end,
+    center: center,
+    between: space-between,
+    around: space-around,
+    evenly: space-evenly
+) {
+    @include responsive-rule('justify-content-#{$selector}') {
+        justify-content: $value;
+    }
+    @include responsive-rule('align-content-#{$selector}') {
+        align-content: $value;
+    }
+}
+@each $selector, $value in (
+    auto
+    start
+    end
+    center
+    stretch
+    baseline
+    flex-start
+    flex-end
+) {
+    @include responsive-rule('justify-#{$selector}') {
+        justify-items: $selector;
+    }
+    @include responsive-rule('align-#{$selector}') {
+        align-items: $selector;
+    }
+}
+
+@each $selector, $value in (
+    auto
+    start
+    end
+    center
+    stretch
+    flex-start
+    flex-end
+) {
+    .flex,
+    .grid{
+        @include responsive-rule('justify-self-#{$selector}') {
+            justify-self: $selector;
+        }
+        @include responsive-rule('align-self-#{$selector}') {
+            align-self: $selector;
+        }
+    }
+}
+
+
+//----------------------------------------------------------------
+//             Object
+//----------------------------------------------------------------
+@include responsive-rule('object-cover') { object-fit: cover;}
+@include responsive-rule('object-contain') { object-fit: contain;}
+@include responsive-rule('object-center') { object-position: center;}
+
+
+//----------------------------------------------------------------
+//             Alignment
+//----------------------------------------------------------------
+@each $position in (
+baseline
+middle
+top
+bottom
+text-top
+text-bottom
+) {
+    @include responsive-rule('align-#{$position}') {
+        vertical-align: $position;
+    }
+}