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/column.less
+++ b/client/uikit/src/less/components/column.less
@@ -0,0 +1,143 @@
+// Name:            Column
+// Description:     Utilities for text columns
+//
+// Component:       `uk-column-*`
+//
+// Sub-objects:     `uk-column-span`
+//
+// Modifiers:       `uk-column-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@column-gutter:                                 @global-gutter;
+@column-gutter-l:                               @global-medium-gutter;
+
+@column-divider-rule-color:                     @global-border;
+@column-divider-rule-width:                     1px;
+
+
+/* ========================================================================
+   Component: Column
+ ========================================================================== */
+
+[class*='uk-column-'] { column-gap: @column-gutter; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    [class*='uk-column-'] { column-gap: @column-gutter-l; }
+
+}
+
+/*
+ * Fix image 1px line wrapping into the next column in Chrome
+ */
+
+[class*='uk-column-'] img { transform: translate3d(0,0,0); }
+
+
+/* Divider
+ ========================================================================== */
+
+/*
+ * 1. Double the column gap
+ */
+
+.uk-column-divider {
+    column-rule: @column-divider-rule-width solid @column-divider-rule-color;
+    /* 1 */
+    column-gap: (@column-gutter * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-column-divider {
+        column-gap: (@column-gutter-l * 2);
+    }
+
+}
+
+
+/* Width modifiers
+ ========================================================================== */
+
+.uk-column-1-2 { column-count: 2;}
+.uk-column-1-3 { column-count: 3; }
+.uk-column-1-4 { column-count: 4; }
+.uk-column-1-5 { column-count: 5; }
+.uk-column-1-6 { column-count: 6; }
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-column-1-2\@s { column-count: 2; }
+    .uk-column-1-3\@s { column-count: 3; }
+    .uk-column-1-4\@s { column-count: 4; }
+    .uk-column-1-5\@s { column-count: 5; }
+    .uk-column-1-6\@s { column-count: 6; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-column-1-2\@m { column-count: 2; }
+    .uk-column-1-3\@m { column-count: 3; }
+    .uk-column-1-4\@m { column-count: 4; }
+    .uk-column-1-5\@m { column-count: 5; }
+    .uk-column-1-6\@m { column-count: 6; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-column-1-2\@l { column-count: 2; }
+    .uk-column-1-3\@l { column-count: 3; }
+    .uk-column-1-4\@l { column-count: 4; }
+    .uk-column-1-5\@l { column-count: 5; }
+    .uk-column-1-6\@l { column-count: 6; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-column-1-2\@xl { column-count: 2; }
+    .uk-column-1-3\@xl { column-count: 3; }
+    .uk-column-1-4\@xl { column-count: 4; }
+    .uk-column-1-5\@xl { column-count: 5; }
+    .uk-column-1-6\@xl { column-count: 6; }
+
+}
+
+/* Make element span across all columns
+ * Does not work in Firefox yet
+ ========================================================================== */
+
+.uk-column-span { column-span: all; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-column-misc();
+
+.hook-column-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-column-divider-rule-color:                    @inverse-global-border;
+
+.hook-inverse() {
+
+    .uk-column-divider { column-rule-color: @inverse-column-divider-rule-color; }
+
+}