svetlov_styles_scss_refactor

packages/presentation/src/utils.ts

@@ -531,7 +531,7 @@ export function sizeToWidth (size: string): number | undefined {
     case 'x-large':
       width = 7.5
       break
-    case '2x-large':
+    case 'xxl':
       width = 10
       break
   }

packages/theme/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   extends: ['./node_modules/@hcengineering/platform-rig/profiles/ui/eslint.config.json'],
-  parserOptions: { tsconfigRootDir: __dirname }
+  parserOptions: { tsconfigRootDir: __dirname },
+  ignorePatterns: ["**/*.md"]
 }

packages/theme/styles/_components-new.scss

@@ -0,0 +1,171 @@
+//
+// Copyright © 2021 Anticrm Platform Contributors.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+// Main file, importing all components
+@import 'components/index'; 
+
+/* Examples of using new style variables */
+
+/* Example of using typography variables */
+.example-typography {
+  h1 {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+  }
+
+  h2 {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+  }
+
+  h3 {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-normal);
+  }
+
+  p {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--line-height-normal);
+  }
+
+  .small-text {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+  }
+
+  .caption {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-tight);
+  }
+}
+
+/* Пример использования переменных для анимаций */
+.example-transitions {
+  .btn-fast {
+    transition: all var(--transition-fast) ease;
+  }
+
+  .btn-normal {
+    transition: all var(--transition-normal) ease;
+  }
+
+  .btn-slow {
+    transition: all var(--transition-slow) ease;
+  }
+
+  .custom-transition {
+    transition: transform 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  }
+}
+
+/* Пример использования z-index переменных */
+.example-z-index {
+  .tooltip {
+    z-index: var(--z-tooltip);
+  }
+
+  .dropdown-menu {
+    z-index: var(--z-dropdown);
+  }
+
+  .modal-dialog {
+    z-index: var(--z-modal);
+  }
+}
+
+/* Пример использования фокусного состояния */
+.example-focus {
+  .btn-default:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .btn-no-offset:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  }
+}
+
+/* Пример использования сетки */
+.example-grid {
+  .grid-default {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns), 1fr);
+    gap: var(--grid-gap-md);
+  }
+
+  .grid-6-cols-lg {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: var(--grid-gap-lg);
+  }
+}
+
+/* Пример использования соотношения сторон */
+.example-aspect-ratio {
+  .image-square {
+    position: relative;
+  }
+  .image-square::before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
+  .image-square > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .image-landscape {
+    position: relative;
+  }
+  .image-landscape::before {
+    content: "";
+    display: block;
+    padding-top: 56.25%; /* 16:9 */
+  }
+  .image-landscape > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .image-portrait {
+    position: relative;
+  }
+  .image-portrait::before {
+    content: "";
+    display: block;
+    padding-top: 133.333%; /* 3:4 */
+  }
+  .image-portrait > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+} 

packages/theme/styles/_layouts.scss

@@ -15,12 +15,13 @@
 
 /* CLEAR */
 a {
-  min-width: 0;
+  @include prevent-overflow;
   font: inherit;
   font-weight: 500;
   text-decoration: none;
   color: var(--theme-content-color);
   outline: none;
+  cursor: pointer;
 
   &:hover {
     color: var(--theme-caption-color);
@@ -45,7 +46,8 @@ a {
   &.stealth {
     display: inline-flex;
     align-items: center;
-    width: 100%;
+    width: $full-width;
+    min-width: 0;
   }
 }
 
@@ -64,7 +66,7 @@ button {
   user-select: none;
 }
 input {
-  min-width: 0;
+  @include prevent-overflow;
   font: inherit;
   background-color: transparent;
   outline: none;
@@ -137,13 +139,12 @@ p {
     &:visited { color: var(--theme-link-color); }  
   }
 }
-p:first-child { margin-block-start: 0; } // First and last padding
+p:first-child { margin-block-start: 0; }
 p:last-child { margin-block-end: 0; }
 
 .p-inline {
   overflow-wrap: break-word;
   word-wrap: break-word;
-  // hyphens: auto;
   line-height: 150%;
 
   &.contrast { color: var(--global-primary-TextColor); }
@@ -180,7 +181,8 @@ a.noBold {
 
 .float-left-box {
   box-sizing: border-box;
-  width: 100%;
+  width: $full-width;
+  min-width: 0;
   float: left;
 }
 

packages/theme/styles/_text-editor.scss

@@ -9,7 +9,6 @@
 
 .text-editor-view,
 .text-markup-view {
-  // overflow-y: auto;
   color: var(--theme-text-primary-color);
   margin: 0.25rem 0;
 
@@ -79,7 +78,6 @@
     display: block;
   }
 
-
   li p {
     margin: 0;
   }
@@ -198,41 +196,6 @@
   .collaboration-cursor__caret {
     display: flex;
     justify-content: center;
-    cursor: text;
-    height: 110%;
-    width: 8px;
-    top: -2px;
-    left: -4px;
-    position: absolute;
-
-    &::after {
-      content: '';
-      position: absolute;
-      border-color: inherit;
-      border-style: solid;
-      width: 0;
-      height: 0;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top-width: 4px;
-      border-bottom: 0;
-    }
-  }
-
-  cmark {
-    border-top: 1px solid lightblue;
-    border-bottom: 1px solid lightblue;
-    border-radius: 2px;
-  }
-
-  span.insertion {
-    border-top: 1px solid lightblue;
-    border-bottom: 1px solid lightblue;
-    border-radius: 2px;
-  }
-
-  span.deletion {
-    text-decoration: line-through;
   }
 }