updates

2022-01-25 15:21:01 +06:00
parent 3746efc596
commit e4dfdc07fc
595 changed files with 59923 additions and 47 deletions
--- a/client/uikit/src/less/components/divider.less
+++ b/client/uikit/src/less/components/divider.less
@@ -0,0 +1,176 @@
+// Name:            Divider
+// Description:     Styles for dividers
+//
+// Component:       `uk-divider-icon`
+//                  `uk-divider-small`
+//                  `uk-divider-vertical`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@divider-margin-vertical:                       @global-margin;
+
+@divider-icon-width:                            50px;
+@divider-icon-height:                           20px;
+@divider-icon-color:                            @global-border;
+@divider-icon-line-top:                         50%;
+@divider-icon-line-width:                       100%;
+@divider-icon-line-border-width:                @global-border-width;
+@divider-icon-line-border:                      @global-border;
+
+@internal-divider-icon-image:                   "../../images/backgrounds/divider-icon.svg";
+
+@divider-small-width:                           100px;
+@divider-small-border-width:                    @global-border-width;
+@divider-small-border:                          @global-border;
+
+@divider-vertical-height:                       100px;
+@divider-vertical-border-width:                 @global-border-width;
+@divider-vertical-border:                       @global-border;
+
+
+/* ========================================================================
+   Component: Divider
+ ========================================================================== */
+
+/*
+ * 1. Reset default `hr`
+ * 2. Set margin if a `div` is used for semantical reason
+ */
+
+[class*='uk-divider'] {
+    /* 1 */
+    border: none;
+    /* 2 */
+    margin-bottom: @divider-margin-vertical;
+}
+
+/* Add margin if adjacent element */
+* + [class*='uk-divider'] { margin-top: @divider-margin-vertical; }
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-divider-icon {
+    position: relative;
+    height: @divider-icon-height;
+    .svg-fill(@internal-divider-icon-image, "#000", @divider-icon-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    .hook-divider-icon();
+}
+
+.uk-divider-icon::before,
+.uk-divider-icon::after {
+    content: "";
+    position: absolute;
+    top: @divider-icon-line-top;
+    max-width: ~'calc(50% - (@{divider-icon-width} / 2))';
+    border-bottom: @divider-icon-line-border-width solid @divider-icon-line-border;
+    .hook-divider-icon-line();
+}
+
+.uk-divider-icon::before {
+    right: ~'calc(50% + (@{divider-icon-width} / 2))';
+    width: @divider-icon-line-width;
+    .hook-divider-icon-line-left();
+}
+
+.uk-divider-icon::after {
+    left: ~'calc(50% + (@{divider-icon-width} / 2))';
+    width: @divider-icon-line-width;
+    .hook-divider-icon-line-right();
+}
+
+
+/* Small
+ ========================================================================== */
+
+/*
+ * 1. Fix height because of `inline-block`
+ * 2. Using ::after and inline-block to make `text-align` work
+ */
+
+/* 1 */
+.uk-divider-small { line-height: 0; }
+
+/* 2 */
+.uk-divider-small::after {
+    content: "";
+    display: inline-block;
+    width: @divider-small-width;
+    max-width: 100%;
+    border-top: @divider-small-border-width solid @divider-small-border;
+    vertical-align: top;
+    .hook-divider-small();
+}
+
+
+/* Vertical
+ ========================================================================== */
+
+.uk-divider-vertical {
+    width: max-content;
+    height: @divider-vertical-height;
+    margin-left: auto;
+    margin-right: auto;
+    border-left: @divider-vertical-border-width solid @divider-vertical-border;
+    .hook-divider-vertical();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-divider-misc();
+
+.hook-divider-icon() {}
+.hook-divider-icon-line() {}
+.hook-divider-icon-line-left() {}
+.hook-divider-icon-line-right() {}
+.hook-divider-small() {}
+.hook-divider-vertical() {}
+.hook-divider-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-divider-icon-color:                      @inverse-global-border;
+@inverse-divider-icon-line-border:                @inverse-global-border;
+@inverse-divider-small-border:                    @inverse-global-border;
+@inverse-divider-vertical-border:                 @inverse-global-border;
+
+.hook-inverse() {
+
+    .uk-divider-icon {
+        .svg-fill(@internal-divider-icon-image, "#000", @inverse-divider-icon-color);
+        .hook-inverse-divider-icon();
+    }
+
+    .uk-divider-icon::before,
+    .uk-divider-icon::after {
+        border-bottom-color: @inverse-divider-icon-line-border;
+        .hook-inverse-divider-icon-line();
+    }
+
+    .uk-divider-small::after {
+        border-top-color: @inverse-divider-small-border;
+        .hook-inverse-divider-small();
+    }
+
+    .uk-divider-vertical {
+        border-left-color: @inverse-divider-vertical-border;
+        .hook-inverse-divider-vertical();
+    }
+
+}
+
+.hook-inverse-divider-icon() {}
+.hook-inverse-divider-icon-line() {}
+.hook-inverse-divider-small() {}
+.hook-inverse-divider-vertical() {}