From a22c470304a33a3c6d75e9c74367001de9a1e14a Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Tue, 7 Jan 2025 16:16:58 +0200 Subject: [PATCH 01/10] chore(core): extract component styles to core --- packages/core/scss/_variables.scss | 6 +- .../scss/color-system/_swatch-legacy.scss | 155 ++ .../components/action-buttons/_index.scss | 19 + .../components/action-buttons/_layout.scss | 72 + .../components/action-buttons/_theme.scss | 21 + .../components/action-buttons/_variables.scss | 11 + .../scss/components/action-sheet/_index.scss | 25 + .../scss/components/action-sheet/_layout.scss | 402 +++++ .../scss/components/action-sheet/_theme.scss | 105 ++ .../components/action-sheet/_variables.scss | 89 ++ .../core/scss/components/adaptive/_index.scss | 26 + .../scss/components/adaptive/_layout.scss | 485 ++++++ .../core/scss/components/adaptive/_theme.scss | 105 ++ .../scss/components/adaptive/_variables.scss | 30 + .../core/scss/components/appbar/_index.scss | 16 + .../core/scss/components/appbar/_layout.scss | 120 ++ .../core/scss/components/appbar/_theme.scss | 39 + .../scss/components/appbar/_variables.scss | 54 + .../scss/components/autocomplete/_index.scss | 26 + .../scss/components/autocomplete/_layout.scss | 11 + .../scss/components/autocomplete/_theme.scss | 11 + .../components/autocomplete/_variables.scss | 1 + .../core/scss/components/avatar/_index.scss | 16 + .../core/scss/components/avatar/_layout.scss | 83 + .../core/scss/components/avatar/_theme.scss | 33 + .../scss/components/avatar/_variables.scss | 23 + .../core/scss/components/badge/_index.scss | 18 + .../core/scss/components/badge/_layout.scss | 154 ++ .../core/scss/components/badge/_theme.scss | 34 + .../scss/components/badge/_variables.scss | 79 + .../components/bottom-navigation/_index.scss | 20 + .../components/bottom-navigation/_layout.scss | 122 ++ .../components/bottom-navigation/_theme.scss | 65 + .../bottom-navigation/_variables.scss | 62 + .../scss/components/breadcrumb/_index.scss | 23 + .../scss/components/breadcrumb/_layout.scss | 141 ++ .../scss/components/breadcrumb/_theme.scss | 105 ++ .../components/breadcrumb/_variables.scss | 205 +++ .../core/scss/components/button/_index.scss | 20 + .../core/scss/components/button/_layout.scss | 359 +++++ .../core/scss/components/button/_theme.scss | 341 ++++ .../scss/components/button/_variables.scss | 235 +++ .../core/scss/components/calendar/_index.scss | 26 + .../scss/components/calendar/_layout.scss | 529 +++++++ .../core/scss/components/calendar/_theme.scss | 218 +++ .../scss/components/calendar/_variables.scss | 334 ++++ .../core/scss/components/captcha/_index.scss | 29 + .../core/scss/components/captcha/_layout.scss | 69 + .../core/scss/components/captcha/_theme.scss | 20 + .../scss/components/captcha/_variables.scss | 47 + .../core/scss/components/card/_index.scss | 26 + .../core/scss/components/card/_layout.scss | 350 +++++ .../core/scss/components/card/_theme.scss | 111 ++ .../core/scss/components/card/_variables.scss | 182 +++ .../scss/components/chart-wizard/_index.scss | 37 + .../scss/components/chart-wizard/_layout.scss | 46 + .../scss/components/chart-wizard/_theme.scss | 37 + .../components/chart-wizard/_variables.scss | 38 + .../core/scss/components/chat/_index.scss | 24 + .../core/scss/components/chat/_layout.scss | 477 ++++++ .../core/scss/components/chat/_theme.scss | 108 ++ .../core/scss/components/chat/_variables.scss | 211 +++ .../core/scss/components/checkbox/_index.scss | 16 + .../scss/components/checkbox/_layout.scss | 237 +++ .../core/scss/components/checkbox/_theme.scss | 109 ++ .../scss/components/checkbox/_variables.scss | 175 +++ .../core/scss/components/chip/_index.scss | 20 + .../core/scss/components/chip/_layout.scss | 169 ++ .../core/scss/components/chip/_theme.scss | 153 ++ .../core/scss/components/chip/_variables.scss | 147 ++ .../scss/components/color-preview/_index.scss | 16 + .../components/color-preview/_layout.scss | 84 + .../scss/components/color-preview/_theme.scss | 25 + .../components/color-preview/_variables.scss | 14 + .../scss/components/coloreditor/_index.scss | 24 + .../scss/components/coloreditor/_layout.scss | 140 ++ .../scss/components/coloreditor/_theme.scss | 32 + .../components/coloreditor/_variables.scss | 167 ++ .../scss/components/colorgradient/_index.scss | 30 + .../components/colorgradient/_layout.scss | 239 +++ .../scss/components/colorgradient/_theme.scss | 92 ++ .../components/colorgradient/_variables.scss | 221 +++ .../scss/components/colorpalette/_index.scss | 16 + .../scss/components/colorpalette/_layout.scss | 76 + .../scss/components/colorpalette/_theme.scss | 31 + .../components/colorpalette/_variables.scss | 50 + .../scss/components/colorpicker/_index.scss | 26 + .../scss/components/colorpicker/_layout.scss | 18 + .../scss/components/colorpicker/_theme.scss | 10 + .../components/colorpicker/_variables.scss | 1 + .../core/scss/components/combobox/_index.scss | 26 + .../scss/components/combobox/_layout.scss | 11 + .../core/scss/components/combobox/_theme.scss | 11 + .../scss/components/combobox/_variables.scss | 1 + .../core/scss/components/dataviz/_index.scss | 20 + .../core/scss/components/dataviz/_layout.scss | 580 +++++++ .../core/scss/components/dataviz/_theme.scss | 122 ++ .../scss/components/dataviz/_variables.scss | 148 ++ .../scss/components/dateinput/_index.scss | 18 + .../scss/components/dateinput/_layout.scss | 11 + .../scss/components/dateinput/_theme.scss | 11 + .../scss/components/dateinput/_variables.scss | 1 + .../scss/components/datepicker/_index.scss | 22 + .../scss/components/datepicker/_layout.scss | 10 + .../scss/components/datepicker/_theme.scss | 11 + .../components/datepicker/_variables.scss | 1 + .../components/daterangepicker/_index.scss | 24 + .../components/daterangepicker/_layout.scss | 52 + .../components/daterangepicker/_theme.scss | 11 + .../daterangepicker/_variables.scss | 2 + .../components/datetimepicker/_index.scss | 30 + .../components/datetimepicker/_layout.scss | 56 + .../components/datetimepicker/_theme.scss | 11 + .../components/datetimepicker/_variables.scss | 2 + .../core/scss/components/dialog/_index.scss | 18 + .../core/scss/components/dialog/_layout.scss | 78 + .../core/scss/components/dialog/_theme.scss | 31 + .../scss/components/dialog/_variables.scss | 28 + .../scss/components/dock-manager/_index.scss | 22 + .../scss/components/dock-manager/_layout.scss | 225 +++ .../scss/components/dock-manager/_theme.scss | 50 + .../components/dock-manager/_variables.scss | 113 ++ .../scss/components/draggable/_index.scss | 16 + .../scss/components/draggable/_layout.scss | 133 ++ .../scss/components/draggable/_theme.scss | 22 + .../scss/components/draggable/_variables.scss | 27 + .../core/scss/components/drawer/_index.scss | 22 + .../core/scss/components/drawer/_layout.scss | 207 +++ .../core/scss/components/drawer/_theme.scss | 68 + .../scss/components/drawer/_variables.scss | 108 ++ .../scss/components/dropdowngrid/_index.scss | 26 + .../scss/components/dropdowngrid/_layout.scss | 20 + .../scss/components/dropdowngrid/_theme.scss | 11 + .../components/dropdowngrid/_variables.scss | 1 + .../scss/components/dropdownlist/_index.scss | 24 + .../scss/components/dropdownlist/_layout.scss | 43 + .../scss/components/dropdownlist/_theme.scss | 14 + .../components/dropdownlist/_variables.scss | 1 + .../scss/components/dropdowntree/_index.scss | 30 + .../scss/components/dropdowntree/_layout.scss | 44 + .../scss/components/dropdowntree/_theme.scss | 11 + .../components/dropdowntree/_variables.scss | 8 + .../core/scss/components/dropzone/_index.scss | 16 + .../scss/components/dropzone/_layout.scss | 49 + .../core/scss/components/dropzone/_theme.scss | 41 + .../scss/components/dropzone/_variables.scss | 64 + .../core/scss/components/editor/_index.scss | 32 + .../core/scss/components/editor/_layout.scss | 656 ++++++++ .../core/scss/components/editor/_theme.scss | 109 ++ .../scss/components/editor/_variables.scss | 74 + .../components/expansion-panel/_index.scss | 22 + .../components/expansion-panel/_layout.scss | 87 ++ .../components/expansion-panel/_theme.scss | 49 + .../expansion-panel/_variables.scss | 77 + packages/core/scss/components/fab/_index.scss | 26 + .../core/scss/components/fab/_layout.scss | 150 ++ packages/core/scss/components/fab/_theme.scss | 135 ++ .../core/scss/components/fab/_variables.scss | 156 ++ .../scss/components/filemanager/_index.scss | 38 + .../scss/components/filemanager/_layout.scss | 243 +++ .../scss/components/filemanager/_theme.scss | 117 ++ .../components/filemanager/_variables.scss | 182 +++ .../core/scss/components/filter/_index.scss | 30 + .../core/scss/components/filter/_layout.scss | 98 ++ .../core/scss/components/filter/_theme.scss | 38 + .../scss/components/filter/_variables.scss | 30 + .../components/floating-label/_index.scss | 16 + .../components/floating-label/_layout.scss | 95 ++ .../components/floating-label/_theme.scss | 36 + .../components/floating-label/_variables.scss | 51 + .../core/scss/components/forms/_index.scss | 25 + .../core/scss/components/forms/_layout.scss | 386 +++++ .../core/scss/components/forms/_theme.scss | 45 + .../scss/components/forms/_variables.scss | 179 +++ .../core/scss/components/gantt/_index.scss | 37 + .../core/scss/components/gantt/_layout.scss | 929 +++++++++++ .../core/scss/components/gantt/_theme.scss | 286 ++++ .../scss/components/gantt/_variables.scss | 251 +++ .../core/scss/components/grid/_index.scss | 64 + .../core/scss/components/grid/_layout.scss | 1382 +++++++++++++++++ .../core/scss/components/grid/_theme.scss | 458 ++++++ .../core/scss/components/grid/_variables.scss | 281 ++++ .../scss/components/gridlayout/_index.scss | 19 + .../scss/components/gridlayout/_layout.scss | 10 + .../scss/components/gridlayout/_theme.scss | 10 + .../components/gridlayout/_variables.scss | 1 + .../core/scss/components/icons/_index.scss | 20 + .../core/scss/components/icons/_layout.scss | 85 + .../core/scss/components/icons/_theme.scss | 6 + .../scss/components/icons/_variables.scss | 30 + .../scss/components/imageeditor/_index.scss | 26 + .../scss/components/imageeditor/_layout.scss | 165 ++ .../scss/components/imageeditor/_theme.scss | 59 + .../components/imageeditor/_variables.scss | 42 + .../core/scss/components/input/_index.scss | 18 + .../core/scss/components/input/_layout.scss | 594 +++++++ .../core/scss/components/input/_theme.scss | 518 ++++++ .../scss/components/input/_variables.scss | 426 +++++ .../core/scss/components/list/_index.scss | 16 + .../core/scss/components/list/_layout.scss | 251 +++ .../core/scss/components/list/_theme.scss | 102 ++ .../core/scss/components/list/_variables.scss | 202 +++ .../core/scss/components/listbox/_index.scss | 24 + .../core/scss/components/listbox/_layout.scss | 91 ++ .../core/scss/components/listbox/_theme.scss | 26 + .../scss/components/listbox/_variables.scss | 50 + .../scss/components/listgroup/_index.scss | 18 + .../scss/components/listgroup/_layout.scss | 196 +++ .../scss/components/listgroup/_theme.scss | 20 + .../scss/components/listgroup/_variables.scss | 14 + .../core/scss/components/listview/_index.scss | 25 + .../scss/components/listview/_layout.scss | 146 ++ .../core/scss/components/listview/_theme.scss | 48 + .../scss/components/listview/_variables.scss | 60 + .../core/scss/components/loader/_index.scss | 20 + .../core/scss/components/loader/_layout.scss | 587 +++++++ .../core/scss/components/loader/_theme.scss | 22 + .../scss/components/loader/_variables.scss | 125 ++ packages/core/scss/components/map/_index.scss | 22 + .../core/scss/components/map/_layout.scss | 143 ++ packages/core/scss/components/map/_theme.scss | 39 + .../core/scss/components/map/_variables.scss | 69 + .../scss/components/maskedtextbox/_index.scss | 22 + .../components/maskedtextbox/_layout.scss | 11 + .../scss/components/maskedtextbox/_theme.scss | 11 + .../components/maskedtextbox/_variables.scss | 1 + .../scss/components/mediaplayer/_index.scss | 22 + .../scss/components/mediaplayer/_layout.scss | 110 ++ .../scss/components/mediaplayer/_theme.scss | 30 + .../components/mediaplayer/_variables.scss | 43 + .../scss/components/menu-button/_index.scss | 20 + .../scss/components/menu-button/_layout.scss | 37 + .../scss/components/menu-button/_theme.scss | 11 + .../components/menu-button/_variables.scss | 5 + .../core/scss/components/menu/_index.scss | 24 + .../core/scss/components/menu/_layout.scss | 325 ++++ .../core/scss/components/menu/_theme.scss | 145 ++ .../core/scss/components/menu/_variables.scss | 267 ++++ .../scss/components/messagebox/_index.scss | 18 + .../scss/components/messagebox/_layout.scss | 28 + .../scss/components/messagebox/_theme.scss | 34 + .../components/messagebox/_variables.scss | 15 + .../scss/components/multiselect/_index.scss | 30 + .../scss/components/multiselect/_layout.scss | 11 + .../scss/components/multiselect/_theme.scss | 11 + .../components/multiselect/_variables.scss | 1 + .../core/scss/components/no-data/_index.scss | 16 + .../core/scss/components/no-data/_layout.scss | 26 + .../core/scss/components/no-data/_theme.scss | 14 + .../scss/components/no-data/_variables.scss | 7 + .../scss/components/notification/_index.scss | 20 + .../scss/components/notification/_layout.scss | 79 + .../scss/components/notification/_theme.scss | 32 + .../components/notification/_variables.scss | 64 + .../components/numerictextbox/_index.scss | 22 + .../components/numerictextbox/_layout.scss | 15 + .../components/numerictextbox/_theme.scss | 11 + .../components/numerictextbox/_variables.scss | 1 + .../core/scss/components/orgchart/_index.scss | 37 + .../scss/components/orgchart/_layout.scss | 117 ++ .../core/scss/components/orgchart/_theme.scss | 58 + .../scss/components/orgchart/_variables.scss | 146 ++ packages/core/scss/components/otp/_index.scss | 18 + .../core/scss/components/otp/_layout.scss | 41 + packages/core/scss/components/otp/_theme.scss | 12 + .../core/scss/components/otp/_variables.scss | 42 + .../core/scss/components/overlay/_index.scss | 16 + .../core/scss/components/overlay/_layout.scss | 21 + .../core/scss/components/overlay/_theme.scss | 22 + .../scss/components/overlay/_variables.scss | 4 + .../core/scss/components/pager/_index.scss | 22 + .../core/scss/components/pager/_layout.scss | 191 +++ .../core/scss/components/pager/_theme.scss | 26 + .../scss/components/pager/_variables.scss | 147 ++ .../core/scss/components/panel/_index.scss | 17 + .../core/scss/components/panel/_layout.scss | 28 + .../core/scss/components/panel/_theme.scss | 35 + .../scss/components/panel/_variables.scss | 33 + .../core/scss/components/panelbar/_index.scss | 20 + .../scss/components/panelbar/_layout.scss | 147 ++ .../core/scss/components/panelbar/_theme.scss | 214 +++ .../scss/components/panelbar/_variables.scss | 271 ++++ .../scss/components/pdf-viewer/_index.scss | 33 + .../scss/components/pdf-viewer/_layout.scss | 337 ++++ .../scss/components/pdf-viewer/_theme.scss | 94 ++ .../components/pdf-viewer/_variables.scss | 136 ++ .../scss/components/pivotgrid/_index.scss | 30 + .../scss/components/pivotgrid/_layout.scss | 660 ++++++++ .../scss/components/pivotgrid/_theme.scss | 251 +++ .../scss/components/pivotgrid/_variables.scss | 259 +++ .../core/scss/components/popover/_index.scss | 20 + .../core/scss/components/popover/_layout.scss | 99 ++ .../core/scss/components/popover/_theme.scss | 46 + .../scss/components/popover/_variables.scss | 85 + .../core/scss/components/popup/_index.scss | 16 + .../core/scss/components/popup/_layout.scss | 85 + .../core/scss/components/popup/_theme.scss | 24 + .../scss/components/popup/_variables.scss | 39 + .../scss/components/progressbar/_index.scss | 16 + .../scss/components/progressbar/_layout.scss | 252 +++ .../scss/components/progressbar/_theme.scss | 60 + .../components/progressbar/_variables.scss | 74 + .../core/scss/components/prompt/_index.scss | 18 + .../core/scss/components/prompt/_layout.scss | 78 + .../core/scss/components/prompt/_theme.scss | 44 + .../scss/components/prompt/_variables.scss | 66 + .../core/scss/components/radio/_index.scss | 16 + .../core/scss/components/radio/_layout.scss | 233 +++ .../core/scss/components/radio/_theme.scss | 96 ++ .../scss/components/radio/_variables.scss | 167 ++ .../core/scss/components/rating/_index.scss | 18 + .../core/scss/components/rating/_layout.scss | 98 ++ .../core/scss/components/rating/_theme.scss | 48 + .../scss/components/rating/_variables.scss | 56 + .../components/responsivepanel/_index.scss | 18 + .../components/responsivepanel/_layout.scss | 52 + .../components/responsivepanel/_theme.scss | 10 + .../responsivepanel/_variables.scss | 1 + .../core/scss/components/ripple/_index.scss | 16 + .../core/scss/components/ripple/_layout.scss | 56 + .../core/scss/components/ripple/_theme.scss | 10 + .../scss/components/ripple/_variables.scss | 1 + .../scss/components/scheduler/_index.scss | 34 + .../scss/components/scheduler/_layout.scss | 1048 +++++++++++++ .../scss/components/scheduler/_theme.scss | 244 +++ .../scss/components/scheduler/_variables.scss | 264 ++++ .../core/scss/components/scroller/_index.scss | 18 + .../scss/components/scroller/_layout.scss | 90 ++ .../core/scss/components/scroller/_theme.scss | 12 + .../scss/components/scroller/_variables.scss | 1 + .../scss/components/scrollview/_index.scss | 20 + .../scss/components/scrollview/_layout.scss | 170 ++ .../scss/components/scrollview/_theme.scss | 96 ++ .../components/scrollview/_variables.scss | 92 ++ .../scss/components/searchbox/_index.scss | 22 + .../scss/components/searchbox/_layout.scss | 11 + .../scss/components/searchbox/_theme.scss | 11 + .../scss/components/searchbox/_variables.scss | 1 + .../scss/components/signature/_index.scss | 20 + .../scss/components/signature/_layout.scss | 79 + .../scss/components/signature/_theme.scss | 18 + .../scss/components/signature/_variables.scss | 33 + .../core/scss/components/skeleton/_index.scss | 16 + .../scss/components/skeleton/_layout.scss | 97 ++ .../core/scss/components/skeleton/_theme.scss | 31 + .../scss/components/skeleton/_variables.scss | 20 + .../core/scss/components/slider/_index.scss | 22 + .../core/scss/components/slider/_layout.scss | 406 +++++ .../core/scss/components/slider/_theme.scss | 87 ++ .../scss/components/slider/_variables.scss | 122 ++ .../scss/components/split-button/_index.scss | 24 + .../scss/components/split-button/_layout.scss | 41 + .../scss/components/split-button/_theme.scss | 17 + .../components/split-button/_variables.scss | 31 + .../core/scss/components/splitter/_index.scss | 22 + .../scss/components/splitter/_layout.scss | 196 +++ .../core/scss/components/splitter/_theme.scss | 43 + .../scss/components/splitter/_variables.scss | 64 + .../scss/components/spreadsheet/_index.scss | 48 + .../scss/components/spreadsheet/_layout.scss | 913 +++++++++++ .../scss/components/spreadsheet/_theme.scss | 217 +++ .../components/spreadsheet/_variables.scss | 273 ++++ .../spreadsheet/images/image-default.png | Bin 0 -> 9364 bytes .../scss/components/stacklayout/_index.scss | 19 + .../scss/components/stacklayout/_layout.scss | 10 + .../scss/components/stacklayout/_theme.scss | 10 + .../components/stacklayout/_variables.scss | 1 + .../core/scss/components/stepper/_index.scss | 20 + .../core/scss/components/stepper/_layout.scss | 298 ++++ .../core/scss/components/stepper/_theme.scss | 246 +++ .../scss/components/stepper/_variables.scss | 227 +++ .../core/scss/components/switch/_index.scss | 16 + .../core/scss/components/switch/_layout.scss | 164 ++ .../core/scss/components/switch/_theme.scss | 175 +++ .../scss/components/switch/_variables.scss | 188 +++ .../core/scss/components/table/_index.scss | 16 + .../core/scss/components/table/_layout.scss | 293 ++++ .../core/scss/components/table/_theme.scss | 93 ++ .../scss/components/table/_variables.scss | 133 ++ .../core/scss/components/tabstrip/_index.scss | 25 + .../scss/components/tabstrip/_layout.scss | 496 ++++++ .../core/scss/components/tabstrip/_theme.scss | 156 ++ .../scss/components/tabstrip/_variables.scss | 206 +++ .../scss/components/taskboard/_index.scss | 32 + .../scss/components/taskboard/_layout.scss | 222 +++ .../scss/components/taskboard/_theme.scss | 117 ++ .../scss/components/taskboard/_variables.scss | 245 +++ .../core/scss/components/textarea/_index.scss | 27 + .../scss/components/textarea/_layout.scss | 13 + .../core/scss/components/textarea/_theme.scss | 11 + .../scss/components/textarea/_variables.scss | 1 + .../core/scss/components/textbox/_index.scss | 20 + .../core/scss/components/textbox/_layout.scss | 11 + .../core/scss/components/textbox/_theme.scss | 11 + .../scss/components/textbox/_variables.scss | 1 + .../scss/components/tilelayout/_index.scss | 24 + .../scss/components/tilelayout/_layout.scss | 53 + .../scss/components/tilelayout/_theme.scss | 29 + .../components/tilelayout/_variables.scss | 39 + .../scss/components/time-marker/_index.scss | 16 + .../scss/components/time-marker/_layout.scss | 23 + .../scss/components/time-marker/_theme.scss | 26 + .../components/time-marker/_variables.scss | 6 + .../components/timedurationpicker/_index.scss | 28 + .../timedurationpicker/_layout.scss | 17 + .../components/timedurationpicker/_theme.scss | 11 + .../timedurationpicker/_variables.scss | 1 + .../core/scss/components/timeline/_index.scss | 22 + .../scss/components/timeline/_layout.scss | 451 ++++++ .../core/scss/components/timeline/_theme.scss | 78 + .../scss/components/timeline/_variables.scss | 167 ++ .../scss/components/timepicker/_index.scss | 26 + .../scss/components/timepicker/_layout.scss | 17 + .../scss/components/timepicker/_theme.scss | 11 + .../components/timepicker/_variables.scss | 1 + .../scss/components/timeselector/_index.scss | 22 + .../scss/components/timeselector/_layout.scss | 266 ++++ .../scss/components/timeselector/_theme.scss | 82 + .../components/timeselector/_variables.scss | 54 + .../core/scss/components/toolbar/_index.scss | 27 + .../core/scss/components/toolbar/_layout.scss | 360 +++++ .../core/scss/components/toolbar/_theme.scss | 197 +++ .../scss/components/toolbar/_variables.scss | 156 ++ .../core/scss/components/tooltip/_index.scss | 22 + .../core/scss/components/tooltip/_layout.scss | 122 ++ .../core/scss/components/tooltip/_theme.scss | 41 + .../scss/components/tooltip/_variables.scss | 70 + .../core/scss/components/treelist/_index.scss | 20 + .../scss/components/treelist/_layout.scss | 114 ++ .../core/scss/components/treelist/_theme.scss | 18 + .../scss/components/treelist/_variables.scss | 8 + .../core/scss/components/treeview/_index.scss | 20 + .../scss/components/treeview/_layout.scss | 206 +++ .../core/scss/components/treeview/_theme.scss | 87 ++ .../scss/components/treeview/_variables.scss | 162 ++ .../scss/components/typography/_index.scss | 18 + .../scss/components/typography/_layout.scss | 129 ++ .../scss/components/typography/_theme.scss | 29 + .../components/typography/_variables.scss | 259 +++ .../core/scss/components/upload/_index.scss | 28 + .../core/scss/components/upload/_layout.scss | 254 +++ .../core/scss/components/upload/_theme.scss | 111 ++ .../scss/components/upload/_variables.scss | 106 ++ .../core/scss/components/utils/_index.scss | 1 + .../scss/components/validator/_index.scss | 24 + .../scss/components/validator/_layout.scss | 30 + .../scss/components/validator/_theme.scss | 11 + .../scss/components/validator/_variables.scss | 0 .../components/virtual-scroller/_index.scss | 20 + .../components/virtual-scroller/_layout.scss | 40 + .../components/virtual-scroller/_theme.scss | 11 + .../virtual-scroller/_variables.scss | 1 + .../core/scss/components/window/_index.scss | 26 + .../core/scss/components/window/_layout.scss | 179 +++ .../core/scss/components/window/_theme.scss | 48 + .../scss/components/window/_variables.scss | 101 ++ .../core/scss/components/wizard/_index.scss | 24 + .../core/scss/components/wizard/_layout.scss | 129 ++ .../core/scss/components/wizard/_theme.scss | 17 + .../scss/components/wizard/_variables.scss | 34 + 460 files changed, 43350 insertions(+), 1 deletion(-) create mode 100644 packages/core/scss/color-system/_swatch-legacy.scss create mode 100644 packages/core/scss/components/action-buttons/_index.scss create mode 100644 packages/core/scss/components/action-buttons/_layout.scss create mode 100644 packages/core/scss/components/action-buttons/_theme.scss create mode 100644 packages/core/scss/components/action-buttons/_variables.scss create mode 100644 packages/core/scss/components/action-sheet/_index.scss create mode 100644 packages/core/scss/components/action-sheet/_layout.scss create mode 100644 packages/core/scss/components/action-sheet/_theme.scss create mode 100644 packages/core/scss/components/action-sheet/_variables.scss create mode 100644 packages/core/scss/components/adaptive/_index.scss create mode 100644 packages/core/scss/components/adaptive/_layout.scss create mode 100644 packages/core/scss/components/adaptive/_theme.scss create mode 100644 packages/core/scss/components/adaptive/_variables.scss create mode 100644 packages/core/scss/components/appbar/_index.scss create mode 100644 packages/core/scss/components/appbar/_layout.scss create mode 100644 packages/core/scss/components/appbar/_theme.scss create mode 100644 packages/core/scss/components/appbar/_variables.scss create mode 100644 packages/core/scss/components/autocomplete/_index.scss create mode 100644 packages/core/scss/components/autocomplete/_layout.scss create mode 100644 packages/core/scss/components/autocomplete/_theme.scss create mode 100644 packages/core/scss/components/autocomplete/_variables.scss create mode 100644 packages/core/scss/components/avatar/_index.scss create mode 100644 packages/core/scss/components/avatar/_layout.scss create mode 100644 packages/core/scss/components/avatar/_theme.scss create mode 100644 packages/core/scss/components/avatar/_variables.scss create mode 100644 packages/core/scss/components/badge/_index.scss create mode 100644 packages/core/scss/components/badge/_layout.scss create mode 100644 packages/core/scss/components/badge/_theme.scss create mode 100644 packages/core/scss/components/badge/_variables.scss create mode 100644 packages/core/scss/components/bottom-navigation/_index.scss create mode 100644 packages/core/scss/components/bottom-navigation/_layout.scss create mode 100644 packages/core/scss/components/bottom-navigation/_theme.scss create mode 100644 packages/core/scss/components/bottom-navigation/_variables.scss create mode 100644 packages/core/scss/components/breadcrumb/_index.scss create mode 100644 packages/core/scss/components/breadcrumb/_layout.scss create mode 100644 packages/core/scss/components/breadcrumb/_theme.scss create mode 100644 packages/core/scss/components/breadcrumb/_variables.scss create mode 100644 packages/core/scss/components/button/_index.scss create mode 100644 packages/core/scss/components/button/_layout.scss create mode 100644 packages/core/scss/components/button/_theme.scss create mode 100644 packages/core/scss/components/button/_variables.scss create mode 100644 packages/core/scss/components/calendar/_index.scss create mode 100644 packages/core/scss/components/calendar/_layout.scss create mode 100644 packages/core/scss/components/calendar/_theme.scss create mode 100644 packages/core/scss/components/calendar/_variables.scss create mode 100644 packages/core/scss/components/captcha/_index.scss create mode 100644 packages/core/scss/components/captcha/_layout.scss create mode 100644 packages/core/scss/components/captcha/_theme.scss create mode 100644 packages/core/scss/components/captcha/_variables.scss create mode 100644 packages/core/scss/components/card/_index.scss create mode 100644 packages/core/scss/components/card/_layout.scss create mode 100644 packages/core/scss/components/card/_theme.scss create mode 100644 packages/core/scss/components/card/_variables.scss create mode 100644 packages/core/scss/components/chart-wizard/_index.scss create mode 100644 packages/core/scss/components/chart-wizard/_layout.scss create mode 100644 packages/core/scss/components/chart-wizard/_theme.scss create mode 100644 packages/core/scss/components/chart-wizard/_variables.scss create mode 100644 packages/core/scss/components/chat/_index.scss create mode 100644 packages/core/scss/components/chat/_layout.scss create mode 100644 packages/core/scss/components/chat/_theme.scss create mode 100644 packages/core/scss/components/chat/_variables.scss create mode 100644 packages/core/scss/components/checkbox/_index.scss create mode 100644 packages/core/scss/components/checkbox/_layout.scss create mode 100644 packages/core/scss/components/checkbox/_theme.scss create mode 100644 packages/core/scss/components/checkbox/_variables.scss create mode 100644 packages/core/scss/components/chip/_index.scss create mode 100644 packages/core/scss/components/chip/_layout.scss create mode 100644 packages/core/scss/components/chip/_theme.scss create mode 100644 packages/core/scss/components/chip/_variables.scss create mode 100644 packages/core/scss/components/color-preview/_index.scss create mode 100644 packages/core/scss/components/color-preview/_layout.scss create mode 100644 packages/core/scss/components/color-preview/_theme.scss create mode 100644 packages/core/scss/components/color-preview/_variables.scss create mode 100644 packages/core/scss/components/coloreditor/_index.scss create mode 100644 packages/core/scss/components/coloreditor/_layout.scss create mode 100644 packages/core/scss/components/coloreditor/_theme.scss create mode 100644 packages/core/scss/components/coloreditor/_variables.scss create mode 100644 packages/core/scss/components/colorgradient/_index.scss create mode 100644 packages/core/scss/components/colorgradient/_layout.scss create mode 100644 packages/core/scss/components/colorgradient/_theme.scss create mode 100644 packages/core/scss/components/colorgradient/_variables.scss create mode 100644 packages/core/scss/components/colorpalette/_index.scss create mode 100644 packages/core/scss/components/colorpalette/_layout.scss create mode 100644 packages/core/scss/components/colorpalette/_theme.scss create mode 100644 packages/core/scss/components/colorpalette/_variables.scss create mode 100644 packages/core/scss/components/colorpicker/_index.scss create mode 100644 packages/core/scss/components/colorpicker/_layout.scss create mode 100644 packages/core/scss/components/colorpicker/_theme.scss create mode 100644 packages/core/scss/components/colorpicker/_variables.scss create mode 100644 packages/core/scss/components/combobox/_index.scss create mode 100644 packages/core/scss/components/combobox/_layout.scss create mode 100644 packages/core/scss/components/combobox/_theme.scss create mode 100644 packages/core/scss/components/combobox/_variables.scss create mode 100644 packages/core/scss/components/dataviz/_index.scss create mode 100644 packages/core/scss/components/dataviz/_layout.scss create mode 100644 packages/core/scss/components/dataviz/_theme.scss create mode 100644 packages/core/scss/components/dataviz/_variables.scss create mode 100644 packages/core/scss/components/dateinput/_index.scss create mode 100644 packages/core/scss/components/dateinput/_layout.scss create mode 100644 packages/core/scss/components/dateinput/_theme.scss create mode 100644 packages/core/scss/components/dateinput/_variables.scss create mode 100644 packages/core/scss/components/datepicker/_index.scss create mode 100644 packages/core/scss/components/datepicker/_layout.scss create mode 100644 packages/core/scss/components/datepicker/_theme.scss create mode 100644 packages/core/scss/components/datepicker/_variables.scss create mode 100644 packages/core/scss/components/daterangepicker/_index.scss create mode 100644 packages/core/scss/components/daterangepicker/_layout.scss create mode 100644 packages/core/scss/components/daterangepicker/_theme.scss create mode 100644 packages/core/scss/components/daterangepicker/_variables.scss create mode 100644 packages/core/scss/components/datetimepicker/_index.scss create mode 100644 packages/core/scss/components/datetimepicker/_layout.scss create mode 100644 packages/core/scss/components/datetimepicker/_theme.scss create mode 100644 packages/core/scss/components/datetimepicker/_variables.scss create mode 100644 packages/core/scss/components/dialog/_index.scss create mode 100644 packages/core/scss/components/dialog/_layout.scss create mode 100644 packages/core/scss/components/dialog/_theme.scss create mode 100644 packages/core/scss/components/dialog/_variables.scss create mode 100644 packages/core/scss/components/dock-manager/_index.scss create mode 100644 packages/core/scss/components/dock-manager/_layout.scss create mode 100644 packages/core/scss/components/dock-manager/_theme.scss create mode 100644 packages/core/scss/components/dock-manager/_variables.scss create mode 100644 packages/core/scss/components/draggable/_index.scss create mode 100644 packages/core/scss/components/draggable/_layout.scss create mode 100644 packages/core/scss/components/draggable/_theme.scss create mode 100644 packages/core/scss/components/draggable/_variables.scss create mode 100644 packages/core/scss/components/drawer/_index.scss create mode 100644 packages/core/scss/components/drawer/_layout.scss create mode 100644 packages/core/scss/components/drawer/_theme.scss create mode 100644 packages/core/scss/components/drawer/_variables.scss create mode 100644 packages/core/scss/components/dropdowngrid/_index.scss create mode 100644 packages/core/scss/components/dropdowngrid/_layout.scss create mode 100644 packages/core/scss/components/dropdowngrid/_theme.scss create mode 100644 packages/core/scss/components/dropdowngrid/_variables.scss create mode 100644 packages/core/scss/components/dropdownlist/_index.scss create mode 100644 packages/core/scss/components/dropdownlist/_layout.scss create mode 100644 packages/core/scss/components/dropdownlist/_theme.scss create mode 100644 packages/core/scss/components/dropdownlist/_variables.scss create mode 100644 packages/core/scss/components/dropdowntree/_index.scss create mode 100644 packages/core/scss/components/dropdowntree/_layout.scss create mode 100644 packages/core/scss/components/dropdowntree/_theme.scss create mode 100644 packages/core/scss/components/dropdowntree/_variables.scss create mode 100644 packages/core/scss/components/dropzone/_index.scss create mode 100644 packages/core/scss/components/dropzone/_layout.scss create mode 100644 packages/core/scss/components/dropzone/_theme.scss create mode 100644 packages/core/scss/components/dropzone/_variables.scss create mode 100644 packages/core/scss/components/editor/_index.scss create mode 100644 packages/core/scss/components/editor/_layout.scss create mode 100644 packages/core/scss/components/editor/_theme.scss create mode 100644 packages/core/scss/components/editor/_variables.scss create mode 100644 packages/core/scss/components/expansion-panel/_index.scss create mode 100644 packages/core/scss/components/expansion-panel/_layout.scss create mode 100644 packages/core/scss/components/expansion-panel/_theme.scss create mode 100644 packages/core/scss/components/expansion-panel/_variables.scss create mode 100644 packages/core/scss/components/fab/_index.scss create mode 100644 packages/core/scss/components/fab/_layout.scss create mode 100644 packages/core/scss/components/fab/_theme.scss create mode 100644 packages/core/scss/components/fab/_variables.scss create mode 100644 packages/core/scss/components/filemanager/_index.scss create mode 100644 packages/core/scss/components/filemanager/_layout.scss create mode 100644 packages/core/scss/components/filemanager/_theme.scss create mode 100644 packages/core/scss/components/filemanager/_variables.scss create mode 100644 packages/core/scss/components/filter/_index.scss create mode 100644 packages/core/scss/components/filter/_layout.scss create mode 100644 packages/core/scss/components/filter/_theme.scss create mode 100644 packages/core/scss/components/filter/_variables.scss create mode 100644 packages/core/scss/components/floating-label/_index.scss create mode 100644 packages/core/scss/components/floating-label/_layout.scss create mode 100644 packages/core/scss/components/floating-label/_theme.scss create mode 100644 packages/core/scss/components/floating-label/_variables.scss create mode 100644 packages/core/scss/components/forms/_index.scss create mode 100644 packages/core/scss/components/forms/_layout.scss create mode 100644 packages/core/scss/components/forms/_theme.scss create mode 100644 packages/core/scss/components/forms/_variables.scss create mode 100644 packages/core/scss/components/gantt/_index.scss create mode 100644 packages/core/scss/components/gantt/_layout.scss create mode 100644 packages/core/scss/components/gantt/_theme.scss create mode 100644 packages/core/scss/components/gantt/_variables.scss create mode 100644 packages/core/scss/components/grid/_index.scss create mode 100644 packages/core/scss/components/grid/_layout.scss create mode 100644 packages/core/scss/components/grid/_theme.scss create mode 100644 packages/core/scss/components/grid/_variables.scss create mode 100644 packages/core/scss/components/gridlayout/_index.scss create mode 100644 packages/core/scss/components/gridlayout/_layout.scss create mode 100644 packages/core/scss/components/gridlayout/_theme.scss create mode 100644 packages/core/scss/components/gridlayout/_variables.scss create mode 100644 packages/core/scss/components/icons/_index.scss create mode 100644 packages/core/scss/components/icons/_layout.scss create mode 100644 packages/core/scss/components/icons/_theme.scss create mode 100644 packages/core/scss/components/icons/_variables.scss create mode 100644 packages/core/scss/components/imageeditor/_index.scss create mode 100644 packages/core/scss/components/imageeditor/_layout.scss create mode 100644 packages/core/scss/components/imageeditor/_theme.scss create mode 100644 packages/core/scss/components/imageeditor/_variables.scss create mode 100644 packages/core/scss/components/input/_index.scss create mode 100644 packages/core/scss/components/input/_layout.scss create mode 100644 packages/core/scss/components/input/_theme.scss create mode 100644 packages/core/scss/components/input/_variables.scss create mode 100644 packages/core/scss/components/list/_index.scss create mode 100644 packages/core/scss/components/list/_layout.scss create mode 100644 packages/core/scss/components/list/_theme.scss create mode 100644 packages/core/scss/components/list/_variables.scss create mode 100644 packages/core/scss/components/listbox/_index.scss create mode 100644 packages/core/scss/components/listbox/_layout.scss create mode 100644 packages/core/scss/components/listbox/_theme.scss create mode 100644 packages/core/scss/components/listbox/_variables.scss create mode 100644 packages/core/scss/components/listgroup/_index.scss create mode 100644 packages/core/scss/components/listgroup/_layout.scss create mode 100644 packages/core/scss/components/listgroup/_theme.scss create mode 100644 packages/core/scss/components/listgroup/_variables.scss create mode 100644 packages/core/scss/components/listview/_index.scss create mode 100644 packages/core/scss/components/listview/_layout.scss create mode 100644 packages/core/scss/components/listview/_theme.scss create mode 100644 packages/core/scss/components/listview/_variables.scss create mode 100644 packages/core/scss/components/loader/_index.scss create mode 100644 packages/core/scss/components/loader/_layout.scss create mode 100644 packages/core/scss/components/loader/_theme.scss create mode 100644 packages/core/scss/components/loader/_variables.scss create mode 100644 packages/core/scss/components/map/_index.scss create mode 100644 packages/core/scss/components/map/_layout.scss create mode 100644 packages/core/scss/components/map/_theme.scss create mode 100644 packages/core/scss/components/map/_variables.scss create mode 100644 packages/core/scss/components/maskedtextbox/_index.scss create mode 100644 packages/core/scss/components/maskedtextbox/_layout.scss create mode 100644 packages/core/scss/components/maskedtextbox/_theme.scss create mode 100644 packages/core/scss/components/maskedtextbox/_variables.scss create mode 100644 packages/core/scss/components/mediaplayer/_index.scss create mode 100644 packages/core/scss/components/mediaplayer/_layout.scss create mode 100644 packages/core/scss/components/mediaplayer/_theme.scss create mode 100644 packages/core/scss/components/mediaplayer/_variables.scss create mode 100644 packages/core/scss/components/menu-button/_index.scss create mode 100644 packages/core/scss/components/menu-button/_layout.scss create mode 100644 packages/core/scss/components/menu-button/_theme.scss create mode 100644 packages/core/scss/components/menu-button/_variables.scss create mode 100644 packages/core/scss/components/menu/_index.scss create mode 100644 packages/core/scss/components/menu/_layout.scss create mode 100644 packages/core/scss/components/menu/_theme.scss create mode 100644 packages/core/scss/components/menu/_variables.scss create mode 100644 packages/core/scss/components/messagebox/_index.scss create mode 100644 packages/core/scss/components/messagebox/_layout.scss create mode 100644 packages/core/scss/components/messagebox/_theme.scss create mode 100644 packages/core/scss/components/messagebox/_variables.scss create mode 100644 packages/core/scss/components/multiselect/_index.scss create mode 100644 packages/core/scss/components/multiselect/_layout.scss create mode 100644 packages/core/scss/components/multiselect/_theme.scss create mode 100644 packages/core/scss/components/multiselect/_variables.scss create mode 100644 packages/core/scss/components/no-data/_index.scss create mode 100644 packages/core/scss/components/no-data/_layout.scss create mode 100644 packages/core/scss/components/no-data/_theme.scss create mode 100644 packages/core/scss/components/no-data/_variables.scss create mode 100644 packages/core/scss/components/notification/_index.scss create mode 100644 packages/core/scss/components/notification/_layout.scss create mode 100644 packages/core/scss/components/notification/_theme.scss create mode 100644 packages/core/scss/components/notification/_variables.scss create mode 100644 packages/core/scss/components/numerictextbox/_index.scss create mode 100644 packages/core/scss/components/numerictextbox/_layout.scss create mode 100644 packages/core/scss/components/numerictextbox/_theme.scss create mode 100644 packages/core/scss/components/numerictextbox/_variables.scss create mode 100644 packages/core/scss/components/orgchart/_index.scss create mode 100644 packages/core/scss/components/orgchart/_layout.scss create mode 100644 packages/core/scss/components/orgchart/_theme.scss create mode 100644 packages/core/scss/components/orgchart/_variables.scss create mode 100644 packages/core/scss/components/otp/_index.scss create mode 100644 packages/core/scss/components/otp/_layout.scss create mode 100644 packages/core/scss/components/otp/_theme.scss create mode 100644 packages/core/scss/components/otp/_variables.scss create mode 100644 packages/core/scss/components/overlay/_index.scss create mode 100644 packages/core/scss/components/overlay/_layout.scss create mode 100644 packages/core/scss/components/overlay/_theme.scss create mode 100644 packages/core/scss/components/overlay/_variables.scss create mode 100644 packages/core/scss/components/pager/_index.scss create mode 100644 packages/core/scss/components/pager/_layout.scss create mode 100644 packages/core/scss/components/pager/_theme.scss create mode 100644 packages/core/scss/components/pager/_variables.scss create mode 100644 packages/core/scss/components/panel/_index.scss create mode 100644 packages/core/scss/components/panel/_layout.scss create mode 100644 packages/core/scss/components/panel/_theme.scss create mode 100644 packages/core/scss/components/panel/_variables.scss create mode 100644 packages/core/scss/components/panelbar/_index.scss create mode 100644 packages/core/scss/components/panelbar/_layout.scss create mode 100644 packages/core/scss/components/panelbar/_theme.scss create mode 100644 packages/core/scss/components/panelbar/_variables.scss create mode 100644 packages/core/scss/components/pdf-viewer/_index.scss create mode 100644 packages/core/scss/components/pdf-viewer/_layout.scss create mode 100644 packages/core/scss/components/pdf-viewer/_theme.scss create mode 100644 packages/core/scss/components/pdf-viewer/_variables.scss create mode 100644 packages/core/scss/components/pivotgrid/_index.scss create mode 100644 packages/core/scss/components/pivotgrid/_layout.scss create mode 100644 packages/core/scss/components/pivotgrid/_theme.scss create mode 100644 packages/core/scss/components/pivotgrid/_variables.scss create mode 100644 packages/core/scss/components/popover/_index.scss create mode 100644 packages/core/scss/components/popover/_layout.scss create mode 100644 packages/core/scss/components/popover/_theme.scss create mode 100644 packages/core/scss/components/popover/_variables.scss create mode 100644 packages/core/scss/components/popup/_index.scss create mode 100644 packages/core/scss/components/popup/_layout.scss create mode 100644 packages/core/scss/components/popup/_theme.scss create mode 100644 packages/core/scss/components/popup/_variables.scss create mode 100644 packages/core/scss/components/progressbar/_index.scss create mode 100644 packages/core/scss/components/progressbar/_layout.scss create mode 100644 packages/core/scss/components/progressbar/_theme.scss create mode 100644 packages/core/scss/components/progressbar/_variables.scss create mode 100644 packages/core/scss/components/prompt/_index.scss create mode 100644 packages/core/scss/components/prompt/_layout.scss create mode 100644 packages/core/scss/components/prompt/_theme.scss create mode 100644 packages/core/scss/components/prompt/_variables.scss create mode 100644 packages/core/scss/components/radio/_index.scss create mode 100644 packages/core/scss/components/radio/_layout.scss create mode 100644 packages/core/scss/components/radio/_theme.scss create mode 100644 packages/core/scss/components/radio/_variables.scss create mode 100644 packages/core/scss/components/rating/_index.scss create mode 100644 packages/core/scss/components/rating/_layout.scss create mode 100644 packages/core/scss/components/rating/_theme.scss create mode 100644 packages/core/scss/components/rating/_variables.scss create mode 100644 packages/core/scss/components/responsivepanel/_index.scss create mode 100644 packages/core/scss/components/responsivepanel/_layout.scss create mode 100644 packages/core/scss/components/responsivepanel/_theme.scss create mode 100644 packages/core/scss/components/responsivepanel/_variables.scss create mode 100644 packages/core/scss/components/ripple/_index.scss create mode 100644 packages/core/scss/components/ripple/_layout.scss create mode 100644 packages/core/scss/components/ripple/_theme.scss create mode 100644 packages/core/scss/components/ripple/_variables.scss create mode 100644 packages/core/scss/components/scheduler/_index.scss create mode 100644 packages/core/scss/components/scheduler/_layout.scss create mode 100644 packages/core/scss/components/scheduler/_theme.scss create mode 100644 packages/core/scss/components/scheduler/_variables.scss create mode 100644 packages/core/scss/components/scroller/_index.scss create mode 100644 packages/core/scss/components/scroller/_layout.scss create mode 100644 packages/core/scss/components/scroller/_theme.scss create mode 100644 packages/core/scss/components/scroller/_variables.scss create mode 100644 packages/core/scss/components/scrollview/_index.scss create mode 100644 packages/core/scss/components/scrollview/_layout.scss create mode 100644 packages/core/scss/components/scrollview/_theme.scss create mode 100644 packages/core/scss/components/scrollview/_variables.scss create mode 100644 packages/core/scss/components/searchbox/_index.scss create mode 100644 packages/core/scss/components/searchbox/_layout.scss create mode 100644 packages/core/scss/components/searchbox/_theme.scss create mode 100644 packages/core/scss/components/searchbox/_variables.scss create mode 100644 packages/core/scss/components/signature/_index.scss create mode 100644 packages/core/scss/components/signature/_layout.scss create mode 100644 packages/core/scss/components/signature/_theme.scss create mode 100644 packages/core/scss/components/signature/_variables.scss create mode 100644 packages/core/scss/components/skeleton/_index.scss create mode 100644 packages/core/scss/components/skeleton/_layout.scss create mode 100644 packages/core/scss/components/skeleton/_theme.scss create mode 100644 packages/core/scss/components/skeleton/_variables.scss create mode 100644 packages/core/scss/components/slider/_index.scss create mode 100644 packages/core/scss/components/slider/_layout.scss create mode 100644 packages/core/scss/components/slider/_theme.scss create mode 100644 packages/core/scss/components/slider/_variables.scss create mode 100644 packages/core/scss/components/split-button/_index.scss create mode 100644 packages/core/scss/components/split-button/_layout.scss create mode 100644 packages/core/scss/components/split-button/_theme.scss create mode 100644 packages/core/scss/components/split-button/_variables.scss create mode 100644 packages/core/scss/components/splitter/_index.scss create mode 100644 packages/core/scss/components/splitter/_layout.scss create mode 100644 packages/core/scss/components/splitter/_theme.scss create mode 100644 packages/core/scss/components/splitter/_variables.scss create mode 100644 packages/core/scss/components/spreadsheet/_index.scss create mode 100644 packages/core/scss/components/spreadsheet/_layout.scss create mode 100644 packages/core/scss/components/spreadsheet/_theme.scss create mode 100644 packages/core/scss/components/spreadsheet/_variables.scss create mode 100644 packages/core/scss/components/spreadsheet/images/image-default.png create mode 100644 packages/core/scss/components/stacklayout/_index.scss create mode 100644 packages/core/scss/components/stacklayout/_layout.scss create mode 100644 packages/core/scss/components/stacklayout/_theme.scss create mode 100644 packages/core/scss/components/stacklayout/_variables.scss create mode 100644 packages/core/scss/components/stepper/_index.scss create mode 100644 packages/core/scss/components/stepper/_layout.scss create mode 100644 packages/core/scss/components/stepper/_theme.scss create mode 100644 packages/core/scss/components/stepper/_variables.scss create mode 100644 packages/core/scss/components/switch/_index.scss create mode 100644 packages/core/scss/components/switch/_layout.scss create mode 100644 packages/core/scss/components/switch/_theme.scss create mode 100644 packages/core/scss/components/switch/_variables.scss create mode 100644 packages/core/scss/components/table/_index.scss create mode 100644 packages/core/scss/components/table/_layout.scss create mode 100644 packages/core/scss/components/table/_theme.scss create mode 100644 packages/core/scss/components/table/_variables.scss create mode 100644 packages/core/scss/components/tabstrip/_index.scss create mode 100644 packages/core/scss/components/tabstrip/_layout.scss create mode 100644 packages/core/scss/components/tabstrip/_theme.scss create mode 100644 packages/core/scss/components/tabstrip/_variables.scss create mode 100644 packages/core/scss/components/taskboard/_index.scss create mode 100644 packages/core/scss/components/taskboard/_layout.scss create mode 100644 packages/core/scss/components/taskboard/_theme.scss create mode 100644 packages/core/scss/components/taskboard/_variables.scss create mode 100644 packages/core/scss/components/textarea/_index.scss create mode 100644 packages/core/scss/components/textarea/_layout.scss create mode 100644 packages/core/scss/components/textarea/_theme.scss create mode 100644 packages/core/scss/components/textarea/_variables.scss create mode 100644 packages/core/scss/components/textbox/_index.scss create mode 100644 packages/core/scss/components/textbox/_layout.scss create mode 100644 packages/core/scss/components/textbox/_theme.scss create mode 100644 packages/core/scss/components/textbox/_variables.scss create mode 100644 packages/core/scss/components/tilelayout/_index.scss create mode 100644 packages/core/scss/components/tilelayout/_layout.scss create mode 100644 packages/core/scss/components/tilelayout/_theme.scss create mode 100644 packages/core/scss/components/tilelayout/_variables.scss create mode 100644 packages/core/scss/components/time-marker/_index.scss create mode 100644 packages/core/scss/components/time-marker/_layout.scss create mode 100644 packages/core/scss/components/time-marker/_theme.scss create mode 100644 packages/core/scss/components/time-marker/_variables.scss create mode 100644 packages/core/scss/components/timedurationpicker/_index.scss create mode 100644 packages/core/scss/components/timedurationpicker/_layout.scss create mode 100644 packages/core/scss/components/timedurationpicker/_theme.scss create mode 100644 packages/core/scss/components/timedurationpicker/_variables.scss create mode 100644 packages/core/scss/components/timeline/_index.scss create mode 100644 packages/core/scss/components/timeline/_layout.scss create mode 100644 packages/core/scss/components/timeline/_theme.scss create mode 100644 packages/core/scss/components/timeline/_variables.scss create mode 100644 packages/core/scss/components/timepicker/_index.scss create mode 100644 packages/core/scss/components/timepicker/_layout.scss create mode 100644 packages/core/scss/components/timepicker/_theme.scss create mode 100644 packages/core/scss/components/timepicker/_variables.scss create mode 100644 packages/core/scss/components/timeselector/_index.scss create mode 100644 packages/core/scss/components/timeselector/_layout.scss create mode 100644 packages/core/scss/components/timeselector/_theme.scss create mode 100644 packages/core/scss/components/timeselector/_variables.scss create mode 100644 packages/core/scss/components/toolbar/_index.scss create mode 100644 packages/core/scss/components/toolbar/_layout.scss create mode 100644 packages/core/scss/components/toolbar/_theme.scss create mode 100644 packages/core/scss/components/toolbar/_variables.scss create mode 100644 packages/core/scss/components/tooltip/_index.scss create mode 100644 packages/core/scss/components/tooltip/_layout.scss create mode 100644 packages/core/scss/components/tooltip/_theme.scss create mode 100644 packages/core/scss/components/tooltip/_variables.scss create mode 100644 packages/core/scss/components/treelist/_index.scss create mode 100644 packages/core/scss/components/treelist/_layout.scss create mode 100644 packages/core/scss/components/treelist/_theme.scss create mode 100644 packages/core/scss/components/treelist/_variables.scss create mode 100644 packages/core/scss/components/treeview/_index.scss create mode 100644 packages/core/scss/components/treeview/_layout.scss create mode 100644 packages/core/scss/components/treeview/_theme.scss create mode 100644 packages/core/scss/components/treeview/_variables.scss create mode 100644 packages/core/scss/components/typography/_index.scss create mode 100644 packages/core/scss/components/typography/_layout.scss create mode 100644 packages/core/scss/components/typography/_theme.scss create mode 100644 packages/core/scss/components/typography/_variables.scss create mode 100644 packages/core/scss/components/upload/_index.scss create mode 100644 packages/core/scss/components/upload/_layout.scss create mode 100644 packages/core/scss/components/upload/_theme.scss create mode 100644 packages/core/scss/components/upload/_variables.scss create mode 100644 packages/core/scss/components/utils/_index.scss create mode 100644 packages/core/scss/components/validator/_index.scss create mode 100644 packages/core/scss/components/validator/_layout.scss create mode 100644 packages/core/scss/components/validator/_theme.scss create mode 100644 packages/core/scss/components/validator/_variables.scss create mode 100644 packages/core/scss/components/virtual-scroller/_index.scss create mode 100644 packages/core/scss/components/virtual-scroller/_layout.scss create mode 100644 packages/core/scss/components/virtual-scroller/_theme.scss create mode 100644 packages/core/scss/components/virtual-scroller/_variables.scss create mode 100644 packages/core/scss/components/window/_index.scss create mode 100644 packages/core/scss/components/window/_layout.scss create mode 100644 packages/core/scss/components/window/_theme.scss create mode 100644 packages/core/scss/components/window/_variables.scss create mode 100644 packages/core/scss/components/wizard/_index.scss create mode 100644 packages/core/scss/components/wizard/_layout.scss create mode 100644 packages/core/scss/components/wizard/_theme.scss create mode 100644 packages/core/scss/components/wizard/_variables.scss diff --git a/packages/core/scss/_variables.scss b/packages/core/scss/_variables.scss index d1400c33058..726597d2e65 100644 --- a/packages/core/scss/_variables.scss +++ b/packages/core/scss/_variables.scss @@ -8,7 +8,11 @@ $kendo-enable-transitions: true !default; $kendo-nested-disabled: true !default; $kendo-enable-focus-contrast: false !default; $wcag-min-contrast-ratio: 4.5 !default; - +$kendo-enable-typography: false !default; +$kendo-use-input-button-width: true !default; +$kendo-use-input-spinner-width: true !default; +$kendo-use-input-spinner-icon-offset: false !default; +$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; // Equilateral triangle variables // stylelint-disable number-max-precision $equilateral-index: 1.7320508076 !default; diff --git a/packages/core/scss/color-system/_swatch-legacy.scss b/packages/core/scss/color-system/_swatch-legacy.scss new file mode 100644 index 00000000000..0ce3600cc4f --- /dev/null +++ b/packages/core/scss/color-system/_swatch-legacy.scss @@ -0,0 +1,155 @@ +// Primary colors +$kendo-color-primary: null !default; +$kendo-color-primary-lighter: null !default; +$kendo-color-primary-darker: null !default; +$kendo-color-primary-contrast: null !default; + +// Secondary colors +$kendo-color-secondary: null !default; +$kendo-color-secondary-lighter: null !default; +$kendo-color-secondary-darker: null !default; +$kendo-color-secondary-contrast: null !default; + +// Tertiary colors +$kendo-color-tertiary: null !default; +$kendo-color-tertiary-lighter: null !default; +$kendo-color-tertiary-darker: null !default; +$kendo-color-tertiary-contrast: null !default; + +// Info colors +$kendo-color-info: null !default; +$kendo-color-info-lighter: null !default; +$kendo-color-info-darker: null !default; + +// Success colors +$kendo-color-success: null !default; +$kendo-color-success-lighter: null !default; +$kendo-color-success-darker: null !default; + +// Warning colors +$kendo-color-warning: null !default; +$kendo-color-warning-lighter: null !default; +$kendo-color-warning-darker: null !default; + +// Error colors +$kendo-color-error: null !default; +$kendo-color-error-lighter: null !default; +$kendo-color-error-darker: null !default; + + +$kendo-color-dark: null !default; + +// Light colors +$kendo-color-light: null !default; + +// Inverse colors +$kendo-color-inverse: null !default; + +// Body styles +$kendo-body-bg: null !default; +$kendo-body-text: null !default; + +// App styles +$kendo-app-bg: null !default; +$kendo-app-text: $kendo-body-text !default; +$kendo-app-border: null !default; + +// Component styles +$kendo-component-bg: null !default; +$kendo-component-text: $kendo-body-text !default; +$kendo-component-border: null !default; + +$kendo-base-bg: null !default; +$kendo-base-text: $kendo-body-text !default; +$kendo-base-border: $kendo-app-border !default; +$kendo-base-gradient: null !default; + +// States styles +$kendo-hover-bg: null !default; +$kendo-hover-text: $kendo-base-text !default; +$kendo-hover-border: $kendo-base-border !default; +$kendo-hover-gradient: $kendo-base-gradient !default; + +$kendo-selected-bg: $kendo-color-primary !default; +$kendo-selected-text: $kendo-color-primary-contrast !default; +$kendo-selected-border: $kendo-base-border !default; +$kendo-selected-gradient: $kendo-base-gradient !default; + +$kendo-selected-hover-bg: null !default; +$kendo-selected-hover-text: $kendo-selected-text !default; +$kendo-selected-hover-border: $kendo-base-border !default; +$kendo-selected-hover-gradient: $kendo-base-gradient !default; + +$kendo-component-header-bg: $kendo-base-bg !default; +$kendo-component-header-text: $kendo-base-text !default; +$kendo-component-header-border: $kendo-base-border !default; +$kendo-component-header-gradient: null !default; + +$kendo-focus-outline: null !default; + +$kendo-subtle-text: null !default; + +// Link +$kendo-link-text: $kendo-color-primary !default; +$kendo-link-hover-text: null !default; + +// Validator +$kendo-invalid-bg: null !default; +$kendo-invalid-text: $kendo-color-error !default; +$kendo-invalid-border: $kendo-color-error !default; +$kendo-invalid-shadow: null !default; + +$kendo-valid-bg: null !default; +$kendo-valid-text: $kendo-color-success !default; +$kendo-valid-border: $kendo-color-success !default; +$kendo-valid-shadow: null !default; + +// Disabled Styling + +/// The background color of disabled items. +$kendo-disabled-bg: null !default; +/// The text color of disabled items. +$kendo-disabled-text: null !default; +/// The border color of disabled items. +$kendo-disabled-border: null !default; +/// The opacity of disabled items. +$kendo-disabled-opacity: null !default; +/// The filter of disabled items. +$kendo-disabled-filter: null !default; + +$kendo-disabled-styling: ( + bg: $kendo-disabled-bg, + color: $kendo-disabled-text, + border: $kendo-disabled-border, + opacity: $kendo-disabled-opacity, + filter: $kendo-disabled-filter +) !default; + +$kendo-theme-colors: ( + "primary": $kendo-color-primary, + "secondary": $kendo-color-secondary, + "tertiary": $kendo-color-tertiary, + "info": $kendo-color-info, + "success": $kendo-color-success, + "warning": $kendo-color-warning, + "error": $kendo-color-error, + "dark": $kendo-color-dark, + "light": $kendo-color-light, + "inverse": $kendo-color-inverse, +) !default; + +:root { + --kendo-disabled-text: #{$kendo-disabled-text}; + --kendo-disabled-bg: #{$kendo-disabled-bg}; + --kendo-disabled-border: #{$kendo-disabled-border}; + --kendo-disabled-opacity: #{$kendo-disabled-opacity}; + --kendo-disabled-filter: #{$kendo-disabled-filter}; + + --kendo-hr-border: #{$kendo-component-border}; + + --kendo-marquee-text: #{$kendo-selected-text}; + --kendo-marquee-bg: #{$kendo-selected-bg}; + --kendo-marquee-border: #{$kendo-selected-border}; + + --kendo-text-selection-bg: #{$kendo-color-primary}; +} diff --git a/packages/core/scss/components/action-buttons/_index.scss b/packages/core/scss/components/action-buttons/_index.scss new file mode 100644 index 00000000000..4a5a38f3538 --- /dev/null +++ b/packages/core/scss/components/action-buttons/_index.scss @@ -0,0 +1,19 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; +// Expose +@mixin kendo-action-buttons--styles() { + @include import-once( "action-buttons" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-action-buttons--layout(); + @include kendo-action-buttons--theme(); + @include kendo-utils--flex-grid--justify-content(); + } +} diff --git a/packages/core/scss/components/action-buttons/_layout.scss b/packages/core/scss/components/action-buttons/_layout.scss new file mode 100644 index 00000000000..10ba8eabff1 --- /dev/null +++ b/packages/core/scss/components/action-buttons/_layout.scss @@ -0,0 +1,72 @@ +@use "./_variables.scss" as *; + +@mixin kendo-action-buttons--layout-base() { + + // Actions + .k-actions { + padding-block: $kendo-actions-padding-y; + padding-inline: $kendo-actions-padding-x; + box-sizing: border-box; + border-width: $kendo-actions-border-width 0 0 0; + border-style: solid; + border-color: inherit; + flex-shrink: 0; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: $kendo-actions-button-spacing; + overflow: hidden; + // TODO: remove + clear: both; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Actions in popup + .k-popup .k-actions { + margin-top: $kendo-actions-margin-top; + } + + // Actions align + .k-actions-start { + justify-content: flex-start; + } + .k-actions-center { + justify-content: center; + } + .k-actions-end { + justify-content: flex-end; + } + .k-actions-stretched > * { + flex: 1 0 0%; + } + + + // Actions orientation + .k-actions-horizontal { + width: 100%; + flex-flow: row nowrap; + } + .k-actions-vertical { + flex-flow: column nowrap; + } + + + // Aliases + .k-edit-buttons, + .k-action-buttons, + .k-columnmenu-actions { + @extend .k-actions !optional; + } + +} + + +@mixin kendo-action-buttons--layout() { + @include kendo-action-buttons--layout-base(); +} diff --git a/packages/core/scss/components/action-buttons/_theme.scss b/packages/core/scss/components/action-buttons/_theme.scss new file mode 100644 index 00000000000..d50114ba651 --- /dev/null +++ b/packages/core/scss/components/action-buttons/_theme.scss @@ -0,0 +1,21 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-action-buttons--theme-base() { + + // Actions + .k-actions { + @include fill( + $kendo-actions-text, + $kendo-actions-bg, + $kendo-actions-border, + $kendo-actions-gradient + ); + } + +} + + +@mixin kendo-action-buttons--theme() { + @include kendo-action-buttons--theme-base(); +} diff --git a/packages/core/scss/components/action-buttons/_variables.scss b/packages/core/scss/components/action-buttons/_variables.scss new file mode 100644 index 00000000000..7f0d93d754f --- /dev/null +++ b/packages/core/scss/components/action-buttons/_variables.scss @@ -0,0 +1,11 @@ +// Actions +$kendo-actions-margin-top: null !default; +$kendo-actions-padding-x: null !default; +$kendo-actions-padding-y: null !default; +$kendo-actions-border-width: null !default; +$kendo-actions-button-spacing: null !default; + +$kendo-actions-bg: null !default; +$kendo-actions-text: null !default; +$kendo-actions-border: null !default; +$kendo-actions-gradient: null !default; diff --git a/packages/core/scss/components/action-sheet/_index.scss b/packages/core/scss/components/action-sheet/_index.scss new file mode 100644 index 00000000000..7824661c2b9 --- /dev/null +++ b/packages/core/scss/components/action-sheet/_index.scss @@ -0,0 +1,25 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../listgroup/_index.scss" as *; +@use "../popup/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-action-sheet--styles() { + @include import-once( "action-sheet" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-listgroup--styles(); + @include kendo-popup--styles(); + @include kendo-action-sheet--layout(); + @include kendo-action-sheet--theme(); + @include kendo-utils--layout--overflow(); + @include kendo-utils--typography--text-align(); + } +} diff --git a/packages/core/scss/components/action-sheet/_layout.scss b/packages/core/scss/components/action-sheet/_layout.scss new file mode 100644 index 00000000000..338bd4deabd --- /dev/null +++ b/packages/core/scss/components/action-sheet/_layout.scss @@ -0,0 +1,402 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-action-sheet--layout-base() { + + // Action sheet container + .k-actionsheet-container { + width: 100%; + height: 100%; + max-width: clamp(100vw, 100%, 100%); + max-height: clamp(100vh, 100%, 100%); + position: fixed; + top: 0; + left: 0; + z-index: 9999; + overflow: hidden; + transform: translateZ(0); + + // Overlay + > .k-overlay { + position: absolute; + z-index: 1; + } + + // Nested animation container + > .k-animation-container { + width: 100%; + height: 100%; + border-radius: 0; + overflow: hidden; + position: absolute; + z-index: 2; + top: 0; + left: 0; + pointer-events: none; + + > .k-child-animation-container { + position: absolute; + } + } + + // No animation container + > .k-actionsheet { + position: absolute; + z-index: 2; + } + + // Enable mouse events for action sheet + .k-actionsheet { + pointer-events: all; + } + } + + + // Actionsheet + .k-actionsheet { + padding-block: $kendo-actionsheet-padding-y; + padding-inline: $kendo-actionsheet-padding-y; + width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} ); + height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} ); + max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} ); + max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} ); + border-width: 0; + border-style: solid; + border-color: transparent; + box-sizing: border-box; + font-size: $kendo-actionsheet-font-size; + font-family: $kendo-actionsheet-font-family; + line-height: $kendo-actionsheet-line-height; + overflow: hidden; + position: relative; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Actionsheet titlebar + .k-actionsheet-titlebar { + padding-block: $kendo-actionsheet-titlebar-padding-y; + padding-inline: $kendo-actionsheet-titlebar-padding-x; + border-width: 0; + border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null ); + border-style: solid; + border-color: transparent; + font-size: $kendo-actionsheet-titlebar-font-size; + font-family: $kendo-actionsheet-titlebar-font-family; + line-height: $kendo-actionsheet-titlebar-line-height; + flex: none; + display: flex; + flex-flow: column nowrap; + align-items: center; + gap: $kendo-actionsheet-titlebar-gap; + } + .k-actionsheet-titlebar-group { + display: flex; + flex-flow: row nowrap; + align-items: center; + width: 100%; + } + .k-actionsheet-title { + flex: 1; + } + .k-actionsheet-subtitle { + font-size: $kendo-actionsheet-subtitle-font-size; + line-height: $kendo-actionsheet-subtitle-line-height; + } + .k-actionsheet-actions { + flex: none; + } + + + // Actionsheet content + .k-actionsheet-content { + flex: 1; + overflow: auto; + position: relative; + } + + + // Actionsheet footer + .k-actionsheet-footer { + flex: none; + } + + + // Actionsheet items + .k-actionsheet-items { + margin: 0; + padding: 0; + list-style: none; + flex: none; + } + + + // Actionsheet item + .k-actionsheet-item { + padding: 0; + box-sizing: border-box; + display: flex; + flex-flow: row nowrap; + outline: none; + } + .k-actionsheet-action { + margin: 0; + padding-block: $kendo-actionsheet-item-padding-y; + padding-inline: $kendo-actionsheet-item-padding-x; + min-height: $kendo-actionsheet-item-min-height; + box-sizing: border-box; + color: inherit; + text-decoration: none; + outline: 0; + display: flex; + flex-flow: row nowrap; + align-items: flex-start; + gap: $kendo-actionsheet-item-spacing; + } + .k-actionsheet-item-text { + display: flex; + flex-flow: column nowrap; + } + .k-actionsheet-item-title { + font-weight: $kendo-actionsheet-item-title-font-weight; + text-transform: $kendo-actionsheet-item-title-text-transform; + } + .k-actionsheet-item-description { + font-size: $kendo-actionsheet-item-description-font-size; + } + + + // Actionsheet separator + .k-actionsheet .k-hr { + margin: 0; + flex: none; + } + + + // Action sheet position + .k-actionsheet-top { + @include border-bottom-radius( $kendo-actionsheet-border-radius ); + border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); + border-top-width: if( $kendo-actionsheet-border-width, 0, null ); + top: 0; + inset-inline-start: 50%; + transform: translateX( -50% ); + } + .k-actionsheet-bottom { + @include border-top-radius( $kendo-actionsheet-border-radius ); + border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); + border-bottom-width: if( $kendo-actionsheet-border-width, 0, null ); + bottom: 0; + inset-inline-start: 50%; + transform: translateX( -50% ); + } + .k-actionsheet-left { + @include border-right-radius( $kendo-actionsheet-border-radius ); + border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); + border-left-width: if( $kendo-actionsheet-border-width, 0, null ); + left: 0; + top: 50%; + transform: translateY( -50% ); + } + .k-actionsheet-right { + @include border-left-radius( $kendo-actionsheet-border-radius ); + border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); + border-right-width: if( $kendo-actionsheet-border-width, 0, null ); + right: 0; + top: 50%; + transform: translateY( -50% ); + } + .k-actionsheet-fullscreen { + width: 100%; + max-width: 100%; + max-height: 100%; + height: 100%; + } + + + // Action sheet in popup + .k-animation-container > .k-actionsheet { + top: auto; + right: auto; + bottom: auto; + left: auto; + transform: none; + } + + + // Adaptive action sheet + .k-adaptive-actionsheet { + max-width: 100%; + width: 100%; + font-size: $kendo-adaptive-actionsheet-font-size; + + // TMP: this should be moved to action sheet + display: flex; + flex-flow: column nowrap; + + .k-actionsheet-titlebar { + padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y; + padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x; + border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width; + } + + .k-actionsheet-content { + padding-block: $kendo-adaptive-actionsheet-content-padding-y; + padding-inline: $kendo-adaptive-actionsheet-content-padding-x; + } + + .k-actionsheet-footer { + padding-block: $kendo-adaptive-actionsheet-footer-padding-y; + padding-inline: $kendo-adaptive-actionsheet-footer-padding-x; + } + + .k-actionsheet-filter { + width: calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x} * 2 ); + } + .k-actionsheet-content, + .k-actionsheet-footer { + margin-inline: auto; + width: min(100%, 360px); + } + + .k-list-container, + .k-treeview { + height: 100%; + } + .k-list-filter { + width: 100%; + padding-inline: 0; + } + + .k-menu-group { + height: 100%; + overflow: auto; + position: static; + } + + .k-calendar { + margin-inline: auto; + border-width: 0; + display: flex; + } + + .k-timeselector { + height: 100%; + border-width: 0; + overflow: hidden; + + .k-time-part { + display: contents; + } + + .k-time-list-wrapper { + height: 100%; + } + } + + .k-datetime-wrap { + width: 100%; + height: 100%; + display: flex; + flex-flow: column nowrap; + } + .k-datetime-selector { + flex: 1 1 auto; + } + + .k-datetime-calendar-wrap { + width: 100%; + position: absolute; + top: 0; + left: 0; + bottom: 0; + flex: 0 0 100%; + } + + .k-datetime-time-wrap { + width: 100%; + position: absolute; + top: 0; + left: 100%; + bottom: 0; + flex: 0 0 100%; + } + + .k-scrollable-wrap { + height: 100%; + overflow-y: auto; + } + + .k-data-table { + max-height: 100%; + overflow: hidden; + display: flex; + flex-flow: column nowrap; + } + + .k-coloreditor { + min-width: 100%; + height: 100%; + border: 0; + overflow: auto; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + + .k-coloreditor-header { + padding: 0; + } + + .k-coloreditor-views { + padding-inline: 0; + } + } + + .k-colorgradient-canvas { + .k-hsv-gradient { + aspect-ratio: 1; + height: 100%; + } + } + } + + + // Legacy action sheet + // TODO: remove when kendo-jquery migrate + .k-actionsheet-jq { + &.k-actionsheet { + height: auto; + } + + .k-actionsheet-header { + @extend .k-actionsheet-titlebar !optional; + align-items: flex-start; + } + + .k-actionsheet-action { + align-items: center; + } + } + + // RTL + .k-rtl, + [dir="rtl"] { + .k-actionsheet-top, + .k-actionsheet-bottom { + transform: translateX( 50% ); + } + } + +} + + +@mixin kendo-action-sheet--layout() { + @include kendo-action-sheet--layout-base(); +} diff --git a/packages/core/scss/components/action-sheet/_theme.scss b/packages/core/scss/components/action-sheet/_theme.scss new file mode 100644 index 00000000000..3df546777a8 --- /dev/null +++ b/packages/core/scss/components/action-sheet/_theme.scss @@ -0,0 +1,105 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-action-sheet--theme-base() { + + // Actionsheet + .k-actionsheet { + @include fill( + $kendo-actionsheet-text, + $kendo-actionsheet-bg, + $kendo-actionsheet-border + ); + @include box-shadow( $kendo-actionsheet-shadow ); + } + + + // Actionsheet header + .k-actionsheet-titlebar { + @include fill( + $kendo-actionsheet-titlebar-text, + $kendo-actionsheet-titlebar-bg, + $kendo-actionsheet-titlebar-border, + $kendo-actionsheet-titlebar-gradient + ); + @include box-shadow( $kendo-actionsheet-titlebar-shadow ); + } + .k-actionsheet-subtitle { + @include fill( $color: $kendo-actionsheet-subtitle-text ); + } + + + // Actionsheet items + .k-actionsheet-items {} + + + // Actionsheet item + .k-actionsheet-item { + + + // Hover state + &:hover, + &.k-hover { + @include fill( + $kendo-actionsheet-item-hover-text, + $kendo-actionsheet-item-hover-bg, + $kendo-actionsheet-item-hover-border, + $kendo-actionsheet-item-hover-gradient + ); + @include box-shadow( $kendo-actionsheet-item-hover-shadow ); + } + + + // Focus state + &:focus, + &.k-focus { + @include fill( + $kendo-actionsheet-item-focus-text, + $kendo-actionsheet-item-focus-bg, + $kendo-actionsheet-item-focus-border, + $kendo-actionsheet-item-focus-gradient + ); + @include focus-indicator( $kendo-actionsheet-item-focus-shadow ); + } + + + // Disabled state + &:disabled, + &.k-disabled { + @include fill( + $kendo-actionsheet-item-disabled-text, + $kendo-actionsheet-item-disabled-bg, + $kendo-actionsheet-item-disabled-border, + $kendo-actionsheet-item-disabled-gradient + ); + @include box-shadow( $kendo-actionsheet-item-disabled-shadow ); + } + } + + + // Actionsheet item description + .k-actionsheet-item-description { + @include fill( $color: $kendo-actionsheet-item-description-text ); + } + + + // Actionsheet action + .k-actionsheet-action {} + + // Actionsheet separator + .k-actionsheet .k-hr { + border-color: $kendo-actionsheet-border; + } + + + // Adaptive Actionsheet + .k-adaptive-actionsheet .k-actionsheet-titlebar { + @include fill( $border: $kendo-adaptive-actionsheet-titlebar-border ); + } + +} + + +@mixin kendo-action-sheet--theme() { + @include kendo-action-sheet--theme-base(); +} diff --git a/packages/core/scss/components/action-sheet/_variables.scss b/packages/core/scss/components/action-sheet/_variables.scss new file mode 100644 index 00000000000..397aca52f9c --- /dev/null +++ b/packages/core/scss/components/action-sheet/_variables.scss @@ -0,0 +1,89 @@ +// Action sheet + +$kendo-actionsheet-padding-x: null !default; +$kendo-actionsheet-padding-y: null !default; +$kendo-actionsheet-width: null !default; +$kendo-actionsheet-max-width: null !default; +$kendo-actionsheet-height: null !default; +$kendo-actionsheet-max-height: null !default; + +$kendo-actionsheet-border-width: null !default; +$kendo-actionsheet-border-radius: null !default; + +$kendo-actionsheet-font-size: null !default; +$kendo-actionsheet-font-family: null !default; +$kendo-actionsheet-line-height: null !default; + +$kendo-actionsheet-bg: null !default; +$kendo-actionsheet-text: null !default; +$kendo-actionsheet-border: null !default; +$kendo-actionsheet-shadow: null !default; + + +// Actionsheet header +$kendo-actionsheet-titlebar-padding-x: null !default; +$kendo-actionsheet-titlebar-padding-y: null !default; +$kendo-actionsheet-titlebar-border-width: null !default; +$kendo-actionsheet-titlebar-font-size: null !default; +$kendo-actionsheet-titlebar-font-family: null !default; +$kendo-actionsheet-titlebar-line-height: null !default; +$kendo-actionsheet-titlebar-gap: null !default; + +$kendo-actionsheet-titlebar-bg: null !default; +$kendo-actionsheet-titlebar-text: null !default; +$kendo-actionsheet-titlebar-border: null !default; +$kendo-actionsheet-titlebar-gradient: null !default; +$kendo-actionsheet-titlebar-shadow: null !default; + +$kendo-actionsheet-subtitle-font-size: null !default; +$kendo-actionsheet-subtitle-line-height: null !default; +$kendo-actionsheet-subtitle-text: null !default; + + +// Actionsheet item +$kendo-actionsheet-item-min-height: null !default; +$kendo-actionsheet-item-padding-x: null !default; +$kendo-actionsheet-item-padding-y: null !default; +$kendo-actionsheet-item-border-width: null !default; +$kendo-actionsheet-item-spacing: null !default; + +$kendo-actionsheet-item-title-font-weight: null !default; +$kendo-actionsheet-item-title-text-transform: null !default; + +$kendo-actionsheet-item-description-font-size: null !default; +$kendo-actionsheet-item-description-text: null !default; + +$kendo-actionsheet-item-hover-bg: null !default; +$kendo-actionsheet-item-hover-text: null !default; +$kendo-actionsheet-item-hover-border: null !default; +$kendo-actionsheet-item-hover-gradient: null !default; +$kendo-actionsheet-item-hover-shadow: null !default; + +$kendo-actionsheet-item-focus-bg: null !default; +$kendo-actionsheet-item-focus-text: null !default; +$kendo-actionsheet-item-focus-border: null !default; +$kendo-actionsheet-item-focus-gradient: null !default; +$kendo-actionsheet-item-focus-shadow: null !default; + +$kendo-actionsheet-item-disabled-bg: null !default; +$kendo-actionsheet-item-disabled-text: null !default; +$kendo-actionsheet-item-disabled-border: null !default; +$kendo-actionsheet-item-disabled-gradient: null !default; +$kendo-actionsheet-item-disabled-shadow: null !default; + +$kendo-actionsheet-item-hover-background: null !default; +$kendo-actionsheet-item-focus-background: null !default; +$kendo-actionsheet-item-disabled-opacity: null !default; + +// Adaptive Actionsheet +$kendo-adaptive-actionsheet-font-size: null !default; +$kendo-adaptive-actionsheet-titlebar-border-width: null !default; +$kendo-adaptive-actionsheet-titlebar-padding-y: null !default; +$kendo-adaptive-actionsheet-titlebar-padding-x: null !default; +$kendo-adaptive-actionsheet-titlebar-border: null !default; + +$kendo-adaptive-actionsheet-content-padding-y: null !default; +$kendo-adaptive-actionsheet-content-padding-x: null !default; + +$kendo-adaptive-actionsheet-footer-padding-y: null !default; +$kendo-adaptive-actionsheet-footer-padding-x: null !default; diff --git a/packages/core/scss/components/adaptive/_index.scss b/packages/core/scss/components/adaptive/_index.scss new file mode 100644 index 00000000000..5a7590224cd --- /dev/null +++ b/packages/core/scss/components/adaptive/_index.scss @@ -0,0 +1,26 @@ +// Dependencies (TODO: extract variables) +@use "../core/_index.scss" as *; +@use "../listgroup/_index.scss" as *; +@use "../checkbox/_index.scss" as *; +@use "../radio/_index.scss" as *; +@use "../switch/_index.scss" as *; +@use "../toolbar/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-adaptive--styles() { + @include import-once( "adaptive" ) { + @include core-styles(); + @include kendo-listgroup--styles(); + @include kendo-checkbox--styles(); + @include kendo-radio--styles(); + @include kendo-switch--styles(); + @include kendo-toolbar--styles(); + @include kendo-adaptive--layout(); + @include kendo-adaptive--theme(); + } +} diff --git a/packages/core/scss/components/adaptive/_layout.scss b/packages/core/scss/components/adaptive/_layout.scss new file mode 100644 index 00000000000..cd3d613d116 --- /dev/null +++ b/packages/core/scss/components/adaptive/_layout.scss @@ -0,0 +1,485 @@ +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../toolbar/_variables.scss" as *; +@use "../listgroup/_variables.scss" as *; + +@mixin kendo-adaptive--layout-base() { + + .k-pane-wrapper { + border-width: $kendo-adaptive-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-adaptive-font-family; + font-size: $kendo-adaptive-font-size; + line-height: $kendo-adaptive-line-height; + display: block; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + .k-pane { + width: 100%; + height: 100%; + user-select: none; + box-sizing: border-box; + font-family: sans-serif; + overflow-x: hidden; + } + + .k-view { + top: 0; + left: 0; + position: relative; + border: 0; + box-sizing: border-box; + outline: 0; + font-family: $kendo-adaptive-font-family; + font-size: $kendo-adaptive-font-size; + line-height: $kendo-adaptive-line-height; + display: flex; + height: 100%; + width: 100%; + flex-direction: column; + align-items: stretch; + align-content: stretch; + vertical-align: top; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + } + + .k-content { + min-height: 1px; + flex: 1; + align-items: stretch; + display: block; + width: auto; + overflow: hidden; + position: relative; + } + } + + + + + // Grid specific styles + .k-pane-wrapper { // stylelint-disable-line + + > div.k-pane { + box-shadow: none; + font-weight: normal; + } + + .k-popup-edit-form, + .k-grid-edit-form, + .k-grid-header-menu, + .k-grid-filter-menu { + + .k-content { + overflow-y: auto; + + > .k-scroll-container { + position: absolute; + width: 100%; + min-height: 100%; + box-sizing: border-box; + } + } + } + + .k-grid-edit-form { + + .k-popup-edit-form, + .k-edit-form-container { + width: auto; + min-width: auto; + } + } + } + + .k-grid.k-grid-mobile { + border-width: 0; + } + + .k-grid-mobile { + .k-resize-handle-inner::before { + content: "\e01e"; + position: absolute; + font: 16px/1 "WebComponentsIcons"; // stylelint-disable-line + // The Calc is needed due to the the negative margin + // that removes the double bottom border of the header + top: calc(50% - 1px); + left: 50%; + transform: translate(-50%, -50%); + padding: .2em; + } + + .k-header a { + user-select: none; + } + } + + + + + // Scheduler specific styles + .k-pane-wrapper { // stylelint-disable-line + + .k-scheduler-edit-form { + + .k-recur-view { + padding: 0; + flex-direction: column; + align-items: stretch; + + > .k-listgroup-form-row { + margin: 0; + } + } + + .k-recur-items-wrap { + width: 100%; + margin-block: -1px; + margin-inline: 0; + } + + .k-scheduler-recur-end-wrap { + white-space: nowrap; + } + } + } + + .k-scheduler { + &.k-scheduler-mobile { + border-width: 0; + } + } + + .k-scheduler-mobile { + + th { + font-weight: normal; + } + + .k-event:hover .k-resize-handle { + visibility: hidden; + } + + .k-scheduler-toolbar { + padding-block: $kendo-toolbar-md-padding-y; + padding-inline: $kendo-toolbar-md-padding-x; + + > * { + margin: 0; + } + + &::before { + display: none; + } + + .k-scheduler-navigation { + width: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + margin: 0; + + .k-nav-current { + line-height: 1; + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: space-evenly; + gap: 0; + } + } + + .k-scheduler-views-wrapper { + .k-views-dropdown { + display: inline-block; + } + } + } + + .k-scheduler-footer { + padding-block: $kendo-toolbar-md-padding-y; + padding-inline: $kendo-toolbar-md-padding-x; + display: flex; + justify-content: space-between; + + > * { + margin: 0; + } + + &::before { + display: none; + } + } + + .k-scheduler-monthview { + + .k-hidden { + height: 40px; + } + + .k-scheduler-table td { + height: 40px; + vertical-align: top; + text-align: center; + } + + .k-events-container { + position: absolute; + text-align: center; + height: 6px; + line-height: 6px; + } + + .k-event { + position: static; + padding: 4px; + border-radius: 50%; + display: inline-block; + width: 4px; + height: 4px; + min-height: 0; + margin: 1px; + } + } + + // Removing the "Days" header from the Mobile Scheduler will break the Web Scheduler + // Thus, the below selector is needed + .k-scheduler-dayview .k-mobile-header { + + &.k-mobile-horizontal-header .k-scheduler-times table tr:first-child { + display: none; + } + + .k-scheduler-header .k-scheduler-date-group { + display: none; + } + } + + .k-scheduler-header-wrap > div { + overflow: visible; + } + + .k-scheduler-agendaview { + .k-mobile-header { + display: none; + } + + .k-scheduler-table { + table-layout: auto; + + .k-scheduler-groupcolumn { + width: 1%; + } + + td { + white-space: normal; + } + } + } + + .k-mobile-header { + .k-scheduler-table td, + .k-scheduler-table th { + height: 1.5em; + } + } + + .k-time-text, + .k-time-period { + display: block; + line-height: 1; + } + + .k-time-period { + font-size: .7em; + } + + .k-scheduler-table td, + .k-scheduler-table th { + height: 2em; + vertical-align: middle; + } + + .k-scheduler-datecolumn-wrap { + display: flex; + align-items: center; + justify-content: space-between; + } + + .k-task { + display: flex; + align-items: center; + gap: .5em; + + .k-scheduler-mark { + border-radius: 50%; + margin: 0; + } + + .k-scheduler-task-text { + flex: 1 1 0%; + } + } + + .k-scheduler-times, + .k-scheduler-agenda { + + .k-scheduler-group-cell, + .k-scheduler-groupcolumn { + vertical-align: top; + + .k-scheduler-group-text { + writing-mode: vertical-lr; + transform: rotate(180deg); + white-space: nowrap; + } + } + } + + .k-scrollbar-h tr + tr .k-scheduler-times { + border-bottom-width: 0; + } + } + + + + + // Common styles for the Adaptive Layout + .k-pane-wrapper { // stylelint-disable-line + + .k-appbar { + padding: k-spacing(1); + } + + .k-list-title, + .k-filter-help-text { + padding-block: $kendo-listgroup-item-padding-y; + padding-inline: $kendo-listgroup-item-padding-x; + display: block; + } + + .k-listgroup-title { + padding-block: $kendo-listgroup-item-padding-y; + padding-inline: $kendo-listgroup-item-padding-x; + font-weight: bold; + text-transform: uppercase; + } + + .k-listgroup { + + .k-listgroup-item { + border-color: inherit; + } + } + .k-listgroup + .k-listgroup { + margin-top: k-spacing(4); + } + + // Column menu + .k-column-menu { + padding: k-spacing(2); + display: flex; + flex-flow: column nowrap; + gap: k-spacing(2); + + .k-filter-item .k-filterable * { + pointer-events: none; + } + + .k-list-title, + .k-listgroup-title { + padding: 0; + } + + .k-listgroup { + margin-inline: calc( #{k-spacing(2)} * -1 ); + } + } + + // Filter menu + .k-filter-menu { + padding: k-spacing(2); + display: flex; + flex-flow: column nowrap; + gap: k-spacing(2); + + .k-list-title { + padding: 0; + } + + .k-list-filter { + padding: 0; + display: flex; + flex-flow: column nowrap; + gap: inherit; + } + + .k-filter-tools { + display: flex; + flex-flow: row nowrap; + gap: inherit; + } + + .k-listgroup { + margin-inline: calc( #{k-spacing(2)} * -1 ); + } + } + + .k-popup-edit-form { + + .k-recur-editor-wrap { + display: flex; + } + + .k-mobiletimezoneeditor { + display: flex; + align-items: center; + justify-content: flex-end; + position: relative; + flex: 1 1 auto; + } + } + + .k-multicheck-wrap.k-listgroup { + overflow-y: auto; + } + + // Pager + .k-pager-wrap.k-pager-sm, + .k-pager.k-pager-sm { + justify-content: center; + + .k-pager-refresh { + display: none; + } + + } + } + + // RTL + :is(.k-rtl .k-pane-wrapper, [dir="rtl"] .k-pane-wrapper, .k-pane-wrapper[dir="rtl"]) { + .k-scheduler-mobile { + .k-scheduler-toolbar { + > ul > li { + border: 0; + } + } + + .k-task .k-i-reload { + margin-left: .5em; + margin-right: 0; + } + } + } +} + + +@mixin kendo-adaptive--layout() { + @include kendo-adaptive--layout-base(); +} diff --git a/packages/core/scss/components/adaptive/_theme.scss b/packages/core/scss/components/adaptive/_theme.scss new file mode 100644 index 00000000000..06889625025 --- /dev/null +++ b/packages/core/scss/components/adaptive/_theme.scss @@ -0,0 +1,105 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-adaptive--theme-base() { + + .k-pane-wrapper, + .k-view { + @include fill( + $kendo-adaptive-text, + $kendo-adaptive-bg, + $kendo-adaptive-border + ); + } + + .k-pane-wrapper .k-pane { + + > .k-view > .k-content { + background-position: 50% 50%; + background-color: $kendo-adaptive-content-bg; + } + + .k-grid-mobile { + + .k-column-active + th.k-header { + border-left-color: $kendo-body-text; + } + + .k-resize-handle-inner::before { + background-color: $kendo-base-bg; + } + } + + .k-scheduler-mobile { + + .k-nav-current { + color: $kendo-adaptive-scheduler-current-text; + } + + .k-scheduler-times, + .k-scheduler-header, + .k-scheduler-groupcolumn, + .k-mobile-scheduler-agendadate { + color: $kendo-adaptive-scheduler-base-text; + } + + .k-time-period, + .k-mobile-scheduler-agendaweekday { + color: $kendo-adaptive-scheduler-subtle-text; + } + + .k-scheduler-times, + .k-scheduler-header, + .k-scheduler-header-wrap, + .k-scheduler-datecolumn, + .k-scheduler-groupcolumn, + .k-scheduler-group-cell, + .k-scheduler-header-all-day { + background-color: $kendo-adaptive-content-bg; + } + + .k-scheduler-toolbar .k-scheduler-tools > li { + display: inline-block; + background-color: inherit; + } + } + + .k-grid-edit-form, + .k-grid-header-menu, + .k-grid-filter-menu, + .k-scheduler-edit-form { + + .k-item, + .k-link { + color: $kendo-base-text; + } + + .k-clear, + .k-select-all, + .k-scheduler-delete, + .k-scheduler-resetSeries { // stylelint-disable-line + color: $kendo-adaptive-menu-clear-text; + } + + } + + .k-column-menu { + + .k-listgroup-item.k-selected { + color: $kendo-adaptive-grid-sort-text; + background: none; + } + .k-listgroup-item.k-selected .k-link { + color: inherit; + } + } + + } + +} + + +@mixin kendo-adaptive--theme() { + @include kendo-adaptive--theme-base(); +} diff --git a/packages/core/scss/components/adaptive/_variables.scss b/packages/core/scss/components/adaptive/_variables.scss new file mode 100644 index 00000000000..0e3ff3e6d10 --- /dev/null +++ b/packages/core/scss/components/adaptive/_variables.scss @@ -0,0 +1,30 @@ +// Adaptive +$kendo-adaptive-bg: null !default; +$kendo-adaptive-text: null !default; +$kendo-adaptive-border: null !default; + +$kendo-adaptive-content-bg: null !default; +$kendo-adaptive-content-text: null !default; + +$kendo-adaptive-menu-bg: null !default; +$kendo-adaptive-menu-text: null !default; + +$kendo-adaptive-menu-clear-text: null !default; + +$kendo-adaptive-menu-item-border: null !default; +$kendo-adaptive-menu-title-text: null !default; + +$kendo-adaptive-border-width: null !default; +$kendo-adaptive-font-family: null !default; +$kendo-adaptive-font-size: null !default; +$kendo-adaptive-line-height: null !default; + + +// Adaptive Grid +$kendo-adaptive-grid-sort-text: null !default; + + +// Adaptive Scheduler +$kendo-adaptive-scheduler-current-text: null !default; +$kendo-adaptive-scheduler-base-text: null !default; +$kendo-adaptive-scheduler-subtle-text: null !default; diff --git a/packages/core/scss/components/appbar/_index.scss b/packages/core/scss/components/appbar/_index.scss new file mode 100644 index 00000000000..3905783a09f --- /dev/null +++ b/packages/core/scss/components/appbar/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-appbar--styles() { + @include import-once( "appbar" ) { + @include core-styles(); + @include kendo-appbar--layout(); + @include kendo-appbar--theme(); + } +} diff --git a/packages/core/scss/components/appbar/_layout.scss b/packages/core/scss/components/appbar/_layout.scss new file mode 100644 index 00000000000..b60adb8045f --- /dev/null +++ b/packages/core/scss/components/appbar/_layout.scss @@ -0,0 +1,120 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-appbar--layout-base() { + + // Appbar + .k-appbar { + margin-block: $kendo-appbar-margin-y; + margin-inline: $kendo-appbar-margin-x; + padding-block: $kendo-appbar-padding-y; + padding-inline: $kendo-appbar-padding-x; + border-width: $kendo-appbar-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-appbar-font-family; + font-size: $kendo-appbar-font-size; + line-height: $kendo-appbar-line-height; + list-style: none; + display: flex; + gap: $kendo-appbar-gap; + flex-flow: row wrap; + align-items: center; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + > * { + flex-shrink: 0; + } + + // Appbar section + .k-appbar-section { + display: inline-flex; + flex-wrap: nowrap; + align-items: center; + } + + + // Appbar Spacer + .k-appbar-spacer { + flex: 1 0 auto; + } + .k-appbar-spacer-sized { + flex-grow: 0; + } + + + // Separator + .k-appbar-separator { + margin: 0; + width: 0; + min-height: 1em; + border-style: solid; + border-width: 0 0 0 1px; + display: inline-block; + } + + + // Input + .k-input, + .k-picker { + width: 10em; + } + .k-color-picker { + width: min-content; + } + + } + + + // Static appbar + .k-appbar-static { + position: static; + } + + + // Sticky appbar + .k-appbar-sticky { + width: 100%; + position: sticky; + top: 0; + z-index: $kendo-appbar-zindex; + } + + + // Fixed appbar + .k-appbar-fixed { + width: 100%; + position: fixed; + z-index: 1; + } + + + // Appbar position + .k-appbar-top { + top: 0; + bottom: auto; + } + .k-appbar-bottom { + top: auto; + bottom: 0; + + &.k-appbar-fixed { + bottom: 0; + } + } + +} + + +@mixin kendo-appbar--layout() { + @include kendo-appbar--layout-base(); +} diff --git a/packages/core/scss/components/appbar/_theme.scss b/packages/core/scss/components/appbar/_theme.scss new file mode 100644 index 00000000000..d83ed30888e --- /dev/null +++ b/packages/core/scss/components/appbar/_theme.scss @@ -0,0 +1,39 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-appbar--theme-base() { + + .k-appbar { + @include box-shadow( $kendo-appbar-box-shadow ); + } + .k-appbar-bottom { + @include box-shadow( $kendo-appbar-bottom-box-shadow ); + } + + + // AppBar theme colors + @each $name, $color in $kendo-theme-colors { + .k-appbar-#{$name} { + @if $name == "light" { + color: $kendo-appbar-light-text; + background-color: $kendo-appbar-light-bg; + } @else if $name == "dark" { + color: $kendo-appbar-dark-text; + background-color: $kendo-appbar-dark-bg; + } @else { + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + background-color: $color; + } + } + } + +} + + +@mixin kendo-appbar--theme() { + @include kendo-appbar--theme-base(); +} diff --git a/packages/core/scss/components/appbar/_variables.scss b/packages/core/scss/components/appbar/_variables.scss new file mode 100644 index 00000000000..ca6cbad1efb --- /dev/null +++ b/packages/core/scss/components/appbar/_variables.scss @@ -0,0 +1,54 @@ +// AppBar + +/// The horizontal margin of the AppBar. +/// @group appbar +$kendo-appbar-margin-x: null !default; +/// The vertical margin of the AppBar. +/// @group appbar +$kendo-appbar-margin-y: null !default; +/// The horizontal padding of the AppBar. +/// @group appbar +$kendo-appbar-padding-x: null !default; +/// The vertical padding of the AppBar. +/// @group appbar +$kendo-appbar-padding-y: null !default; +/// The width of the border around the AppBar. +/// @group appbar +$kendo-appbar-border-width: null !default; +/// The z-index of the AppBar. +/// @group appbar +$kendo-appbar-zindex: null !default; +/// The font family of the AppBar. +/// @group appbar +$kendo-appbar-font-family: null !default; +/// The font size of the AppBar. +/// @group appbar +$kendo-appbar-font-size: null !default; +/// The line height of the AppBar. +/// @group appbar +$kendo-appbar-line-height: null !default; + +/// The spacing between the AppBar sections. +/// @group appbar +$kendo-appbar-gap: null !default; + +/// The background color of the AppBar based on light theme color. +/// @group appbar +$kendo-appbar-light-bg: null !default; +/// The text color of the AppBar based on light theme color. +/// @group appbar +$kendo-appbar-light-text: null !default; + +/// The background color of the AppBar based on dark theme color. +/// @group appbar +$kendo-appbar-dark-bg: null !default; +/// The text color of the AppBar based on dark theme color. +/// @group appbar +$kendo-appbar-dark-text: null !default; + +/// The box shadow of the AppBar. +/// @group appbar +$kendo-appbar-box-shadow: null !default; +/// The box shadow of the AppBar with bottom position. +/// @group appbar +$kendo-appbar-bottom-box-shadow: null !default; diff --git a/packages/core/scss/components/autocomplete/_index.scss b/packages/core/scss/components/autocomplete/_index.scss new file mode 100644 index 00000000000..f774c1e8558 --- /dev/null +++ b/packages/core/scss/components/autocomplete/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-autocomplete--styles() { + @include import-once( "autocomplete" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-icon--styles(); + @include kendo-autocomplete--layout(); + @include kendo-autocomplete--theme(); + } +} diff --git a/packages/core/scss/components/autocomplete/_layout.scss b/packages/core/scss/components/autocomplete/_layout.scss new file mode 100644 index 00000000000..55bbdd32d7c --- /dev/null +++ b/packages/core/scss/components/autocomplete/_layout.scss @@ -0,0 +1,11 @@ +@mixin kendo-autocomplete--layout-base() { + + // Autocomplete + .k-autocomplete {} + +} + + +@mixin kendo-autocomplete--layout() { + @include kendo-autocomplete--layout-base(); +} diff --git a/packages/core/scss/components/autocomplete/_theme.scss b/packages/core/scss/components/autocomplete/_theme.scss new file mode 100644 index 00000000000..e7f7f4779df --- /dev/null +++ b/packages/core/scss/components/autocomplete/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-autocomplete--theme-base() { + + // Autocomplete + .k-autocomplete {} + +} + + +@mixin kendo-autocomplete--theme() { + @include kendo-autocomplete--theme-base(); +} diff --git a/packages/core/scss/components/autocomplete/_variables.scss b/packages/core/scss/components/autocomplete/_variables.scss new file mode 100644 index 00000000000..e22c33b0c69 --- /dev/null +++ b/packages/core/scss/components/autocomplete/_variables.scss @@ -0,0 +1 @@ +// Autocomplete diff --git a/packages/core/scss/components/avatar/_index.scss b/packages/core/scss/components/avatar/_index.scss new file mode 100644 index 00000000000..2b33a895a82 --- /dev/null +++ b/packages/core/scss/components/avatar/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-avatar--styles() { + @include import-once( "avatar" ) { + @include core-styles(); + @include kendo-avatar--layout(); + @include kendo-avatar--theme(); + } +} diff --git a/packages/core/scss/components/avatar/_layout.scss b/packages/core/scss/components/avatar/_layout.scss new file mode 100644 index 00000000000..daab57a1bcf --- /dev/null +++ b/packages/core/scss/components/avatar/_layout.scss @@ -0,0 +1,83 @@ +@use "./_variables.scss" as *; + +@mixin kendo-avatar--layout-base() { + + // Avatar + .k-avatar { + border-width: 0; + border-style: solid; + box-sizing: border-box; + vertical-align: middle; + display: inline-flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + flex-shrink: 0; + overflow: hidden; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Avatar text + .k-avatar-text, + .k-avatar-initials { + font-size: $kendo-avatar-font-size; + font-family: $kendo-avatar-font-family; + line-height: $kendo-avatar-line-height; + } + + + // Avatar icon + .k-avatar-icon { + display: flex; + flex-flow: row nowrap; + align-items: center; + } + + + // Avatar image + .k-avatar-image { + width: 100%; + height: 100%; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + + > img { + width: 100%; + height: 100%; + object-fit: cover; + vertical-align: top; + } + } + + + // Sizes + @each $name, $size in $kendo-avatar-sizes { + .k-avatar-#{$name} { + width: $size; + height: $size; + flex-basis: $size; + } + } + + // Shapes + .k-avatar-square {} + + // Bordered + .k-avatar-bordered { + border-width: $kendo-avatar-border-width; + } + + +} + + +@mixin kendo-avatar--layout() { + @include kendo-avatar--layout-base(); +} diff --git a/packages/core/scss/components/avatar/_theme.scss b/packages/core/scss/components/avatar/_theme.scss new file mode 100644 index 00000000000..f453a53554b --- /dev/null +++ b/packages/core/scss/components/avatar/_theme.scss @@ -0,0 +1,33 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-avatar--theme-base() { + + // Solid Avatars + @each $name, $color in $kendo-avatar-theme-colors { + .k-avatar-solid-#{$name} { + border-color: $color; + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + background-color: $color; + } + } + + // Outline avatars + .k-avatar-outline { + border-color: currentColor; + } + + @each $name, $color in $kendo-avatar-theme-colors { + .k-avatar-outline-#{$name} { + color: $color; + } + } + +} + + +@mixin kendo-avatar--theme() { + @include kendo-avatar--theme-base(); +} diff --git a/packages/core/scss/components/avatar/_variables.scss b/packages/core/scss/components/avatar/_variables.scss new file mode 100644 index 00000000000..96c6d32dc34 --- /dev/null +++ b/packages/core/scss/components/avatar/_variables.scss @@ -0,0 +1,23 @@ +// Avatar + +/// The border width of the Avatar. +/// @group avatar +$kendo-avatar-border-width: null !default; + +/// The font family of the Avatar. +/// @group avatar +$kendo-avatar-font-family: null !default; +/// The font size of the Avatar. +/// @group avatar +$kendo-avatar-font-size: null !default; +/// The line height of the Avatar. +/// @group avatar +$kendo-avatar-line-height: null !default; + +/// The sizes map of the Avatar. +/// @group avatar +$kendo-avatar-sizes: null !default; + +/// The theme colors map of the Avatar. +/// @group avatar +$kendo-avatar-theme-colors: null !default; diff --git a/packages/core/scss/components/badge/_index.scss b/packages/core/scss/components/badge/_index.scss new file mode 100644 index 00000000000..d58afa9e79f --- /dev/null +++ b/packages/core/scss/components/badge/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-badge--styles() { + @include import-once( "badge" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-badge--layout(); + @include kendo-badge--theme(); + } +} diff --git a/packages/core/scss/components/badge/_layout.scss b/packages/core/scss/components/badge/_layout.scss new file mode 100644 index 00000000000..0facca00c72 --- /dev/null +++ b/packages/core/scss/components/badge/_layout.scss @@ -0,0 +1,154 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./_variables.scss" as *; +@use "sass:map"; + +@mixin kendo-badge--layout-base() { + + .k-badge { + padding: 0; + border-width: $kendo-badge-border-width; + border-style: solid; + border-color: transparent; + box-sizing: border-box; + color: inherit; + background-color: transparent; + font: inherit; + text-align: center; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + .k-badge > * { + color: inherit; + } + + + // Links + a.k-badge, + .k-badge > a { + text-decoration: none; + } + a.k-badge:hover, + .k-badge > a:hover { + text-decoration: underline; + } + + + // Icon + .k-badge-icon { + max-width: 1em; + max-height: 1em; + font-size: inherit; + } + .k-badge-icon.k-svg-icon svg { + fill: currentColor; + } + + + // Badge sizes + @each $size, $size-props in $kendo-badge-sizes { + $_padding-x: map.get( $size-props, padding-x ); + $_padding-y: map.get( $size-props, padding-y ); + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_min-width: map.get( $size-props, min-width ); + + .k-badge-#{$size} { + padding-block: $_padding-y; + padding-inline: $_padding-x; + font-size: $_font-size; + line-height: $_line-height; + min-width: $_min-width; + + &:empty { + padding: $_padding-y; + min-width: auto; + } + } + } + + kendo-badge-container { + display: inline-block; + } + + // Badge position + .k-badge-container { + position: relative; + overflow: visible; + } + @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) { + + .k-badge-#{$placement} { + position: absolute; + z-index: 9999; + + &.k-top-start { + @if $translate { + transform: translate( -1% * $translate, -1% * $translate ); + } + } + &.k-top-end { + @if $translate { + transform: translate( 1% * $translate, -1% * $translate ); + } + } + &.k-bottom-start { + @if $translate { + transform: translate( -1% * $translate, 1% * $translate ); + } + } + &.k-bottom-end { + @if $translate { + transform: translate( 1% * $translate, 1% * $translate ); + } + } + } + + .k-rtl .k-badge-#{$placement}, + [dir="rtl"].k-badge-#{$placement}, + [dir="rtl"] .k-badge-#{$placement} { + &.k-top-start { + @if $translate { + transform: translate( 1% * $translate, -1% * $translate ); + } + } + &.k-top-end { + @if $translate { + transform: translate( -1% * $translate, -1% * $translate ); + } + } + &.k-bottom-start { + @if $translate { + transform: translate( 1% * $translate, 1% * $translate ); + } + } + &.k-bottom-end { + @if $translate { + transform: translate( -1% * $translate, 1% * $translate ); + } + } + } + } + + + // Border cutout + .k-badge-border-cutout { + box-shadow: 0 0 0 2px $kendo-component-bg; + } + +} + + +@mixin kendo-badge--layout() { + @include kendo-badge--layout-base(); +} diff --git a/packages/core/scss/components/badge/_theme.scss b/packages/core/scss/components/badge/_theme.scss new file mode 100644 index 00000000000..fb8cd157e73 --- /dev/null +++ b/packages/core/scss/components/badge/_theme.scss @@ -0,0 +1,34 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; + +@mixin kendo-badge--theme-base() { + + // Solid badges + @each $name, $color in $kendo-theme-colors { + .k-badge-solid-#{$name} { + border-color: $color; + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + background-color: $color; + } + } + + // Outline badges + .k-badge-outline { + border-color: currentColor; + background-color: transparent; + } + + @each $name, $color in $kendo-theme-colors { + .k-badge-outline-#{$name} { + color: $color; + } + } + +} + + +@mixin kendo-badge--theme() { + @include kendo-badge--theme-base(); +} diff --git a/packages/core/scss/components/badge/_variables.scss b/packages/core/scss/components/badge/_variables.scss new file mode 100644 index 00000000000..572d62b2736 --- /dev/null +++ b/packages/core/scss/components/badge/_variables.scss @@ -0,0 +1,79 @@ +// Badge + +/// The width of the border around the Badge. +/// @group badge +$kendo-badge-border-width: null !default; + +/// The border radius of the Badge. +/// @group badge +$kendo-badge-border-radius: null !default; + + +/// The horizontal padding of the Badge. +/// @group badge +$kendo-badge-padding-x: null !default; +/// The horizontal padding of the small Badge. +/// @group badge +$kendo-badge-sm-padding-x: null !default; +/// The horizontal padding of the medium Badge. +/// @group badge +$kendo-badge-md-padding-x: null !default; +/// The horizontal padding of the large Badge. +/// @group badge +$kendo-badge-lg-padding-x: null !default; + +/// The vertical padding of the Badge. +/// @group badge +$kendo-badge-padding-y: null !default; +/// The vertical padding of the small Badge. +/// @group badge +$kendo-badge-sm-padding-y: null !default; +/// The vertical padding of the medium Badge. +/// @group badge +$kendo-badge-md-padding-y: null !default; +/// The vertical padding of the large Badge. +/// @group badge +$kendo-badge-lg-padding-y: null !default; + +/// The font sizes of the Badge. +/// @group badge +$kendo-badge-font-size: null !default; +/// The font size of the small Badge. +/// @group badge +$kendo-badge-sm-font-size: null !default; +/// The font size of the medium Badge. +/// @group badge +$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit )!default; +/// The font size of the large Badge. +/// @group badge +$kendo-badge-lg-font-size: null !default; + +/// The line heights used along with the $kendo-font-size variable. +/// @group badge +$kendo-badge-line-height: null !default; +/// The line height used along with the $kendo-font-size variable of the small Badge. +/// @group badge +$kendo-badge-sm-line-height: null !default; +/// The line height used along with the $kendo-font-size variable of the medium Badge. +/// @group badge +$kendo-badge-md-line-height: null !default; +/// The line height used along with the $kendo-font-size variable of the large Badge. +/// @group badge +$kendo-badge-lg-line-height: null !default; + +/// The calculated minimum width of the circular Badge. +/// @group badge +$kendo-badge-min-width: null !default; +/// The calculated minimum width of the small circular Badge. +/// @group badge +$kendo-badge-sm-min-width: null !default; +/// The calculated minimum width of the medium circular Badge. +/// @group badge +$kendo-badge-md-min-width: null !default; +/// The calculated minimum width of the large circular Badge. +/// @group badge +$kendo-badge-lg-min-width: null !default; + +/// The sizes map for the Badge. +/// @group badge +$kendo-badge-sizes: null !default; diff --git a/packages/core/scss/components/bottom-navigation/_index.scss b/packages/core/scss/components/bottom-navigation/_index.scss new file mode 100644 index 00000000000..a1a50f04f60 --- /dev/null +++ b/packages/core/scss/components/bottom-navigation/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-bottom-navigation--styles() { + @include import-once( "bottom-navigation" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-bottom-navigation--layout(); + @include kendo-bottom-navigation--theme(); + @include kendo-utils--layout--position(); + } +} diff --git a/packages/core/scss/components/bottom-navigation/_layout.scss b/packages/core/scss/components/bottom-navigation/_layout.scss new file mode 100644 index 00000000000..3e431263910 --- /dev/null +++ b/packages/core/scss/components/bottom-navigation/_layout.scss @@ -0,0 +1,122 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-bottom-navigation--layout-base() { + + // Bottom Navigation + .k-bottom-nav { + padding-block: $kendo-bottom-nav-padding-y; + padding-inline: $kendo-bottom-nav-padding-x; + width: 100%; + border-width: 0; + border-style: solid; + border-color: transparent; + box-sizing: border-box; + font-size: $kendo-bottom-nav-font-size; + line-height: $kendo-bottom-nav-line-height; + font-family: $kendo-bottom-nav-font-family; + letter-spacing: $kendo-bottom-nav-letter-spacing; + display: flex; + flex-flow: row nowrap; + white-space: nowrap; + gap: $kendo-bottom-nav-gap; + overflow: hidden; + outline: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + .k-bottom-nav-border { + border-width: $kendo-bottom-nav-border-width; + } + + // TODO: do we even use this? + .k-bottom-nav-shadow { + box-shadow: $kendo-bottom-nav-shadow; + } + + // Items + .k-bottom-nav-item { + padding-block: $kendo-bottom-nav-item-padding-y; + padding-inline: $kendo-bottom-nav-item-padding-x; + min-width: $kendo-bottom-nav-item-min-width; + max-width: $kendo-bottom-nav-item-max-width; + min-height: $kendo-bottom-nav-item-min-height; + border-width: 0; + border-radius: $kendo-bottom-nav-item-border-radius; + box-sizing: border-box; + font: inherit; + display: inline-flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; + gap: $kendo-bottom-nav-item-gap; + text-decoration: none; + cursor: pointer; + color: inherit; + background-color: inherit; + border-color: inherit; + outline: none; + + &:focus { + outline: none; + } + + &:hover { + color: inherit; + text-decoration: none; + } + + > .k-bottom-nav-link { + margin-block: calc( #{$kendo-bottom-nav-item-padding-y} * -1 ); + margin-inline: calc( #{$kendo-bottom-nav-item-padding-x} * -1 ); + padding-block: $kendo-bottom-nav-item-padding-y; + padding-inline: $kendo-bottom-nav-item-padding-x; + width: 100%; + color: inherit; + display: flex; + flex-flow: row nowrap; + flex: 1 0 auto; + align-items: center; + justify-content: center; + outline: 0; + } + } + .k-bottom-nav-item.k-disabled { + background-color: initial; + } + + .k-bottom-nav-item-text { + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + // Horizontal Item Layout + .k-bottom-nav-item-flow-horizontal .k-bottom-nav-item { + flex-flow: row nowrap; + } + + // Vertical Item Layout + .k-bottom-nav-item-flow-vertical .k-bottom-nav-item { + flex-direction: column; + } + + // Positioning + .k-bottom-nav.k-pos-fixed { + bottom: 0; + z-index: 1; + } + +} + + +@mixin kendo-bottom-navigation--layout() { + @include kendo-bottom-navigation--layout-base(); +} diff --git a/packages/core/scss/components/bottom-navigation/_theme.scss b/packages/core/scss/components/bottom-navigation/_theme.scss new file mode 100644 index 00000000000..63b3162a00f --- /dev/null +++ b/packages/core/scss/components/bottom-navigation/_theme.scss @@ -0,0 +1,65 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-bottom-navigation--theme-base() { + + // Solid + @each $name, $color in $kendo-theme-colors { + .k-bottom-nav-solid-#{$name} { + @include fill( + $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)), + $bg: $color + ); + + .k-bottom-nav-item.k-focus, + .k-bottom-nav-item:focus { + @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2))); + } + + .k-bottom-nav-item.k-selected { + @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) ); + } + } + // TODO: remove when suites update class names + .k-bottom-nav-solid.k-bottom-nav-#{$name} { + @extend .k-bottom-nav-solid-#{$name} !optional; + } + } + + // Flat + @each $name, $color in $kendo-theme-colors { + .k-bottom-nav-flat-#{$name} { + @include fill( + $kendo-bottom-nav-flat-text, + $kendo-bottom-nav-flat-bg, + $kendo-bottom-nav-flat-border + ); + + .k-bottom-nav-item.k-focus, + .k-bottom-nav-item:focus { + @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) ); + } + + .k-bottom-nav-item.k-selected { + @if $name == "secondary" or $name == "light" { + @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) ); + } @else { + @include fill( $color: $color ); + } + } + } + .k-bottom-nav-flat.k-bottom-nav-#{$name} { + @extend .k-bottom-nav-flat-#{$name} !optional; + } + } + +} + + +@mixin kendo-bottom-navigation--theme() { + @include kendo-bottom-navigation--theme-base(); +} diff --git a/packages/core/scss/components/bottom-navigation/_variables.scss b/packages/core/scss/components/bottom-navigation/_variables.scss new file mode 100644 index 00000000000..4fb48aa513e --- /dev/null +++ b/packages/core/scss/components/bottom-navigation/_variables.scss @@ -0,0 +1,62 @@ +// BottomNavigation + +/// The horizontal padding of the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-padding-x: null !default; +/// The vertical padding of the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-padding-y: null !default; +/// The spacing between the BottomNavigation items. +/// @group bottom-navigation +$kendo-bottom-nav-gap: null !default; +/// The width of the border around the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-border-width: null !default; +/// The font family of the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-font-family: null !default; +/// The font size of the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-font-size: null !default; +/// The line height of the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-line-height: null !default; +/// The letter spacing of the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-letter-spacing: null !default; + +/// The horizontal padding of the BottomNavigation item. +/// @group bottom-navigation +$kendo-bottom-nav-item-padding-x: null !default; +/// The vertical padding of the BottomNavigation item. +/// @group bottom-navigation +$kendo-bottom-nav-item-padding-y: null !default; +/// The minimum width of the BottomNavigation item. +/// @group bottom-navigation +$kendo-bottom-nav-item-min-width: null !default; +/// The maximum width of the BottomNavigation item. +/// @group bottom-navigation +$kendo-bottom-nav-item-max-width: null !default; +/// The minimum height of the BottomNavigation item. +/// @group bottom-navigation +$kendo-bottom-nav-item-min-height: null !default; +/// The border radius of the BottomNavigation item. +/// @group bottom-navigation +$kendo-bottom-nav-item-border-radius: null !default; +/// The spacing of the BottomNavigation item. +/// @group bottom-navigation +$kendo-bottom-nav-item-gap: null !default; + +/// The box shadow of the BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-shadow: null !default; + +/// The text color of the flat BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-flat-text: null !default; +/// The background color of the flat BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-flat-bg: null !default; +/// The border color of the flat BottomNavigation. +/// @group bottom-navigation +$kendo-bottom-nav-flat-border: null !default; diff --git a/packages/core/scss/components/breadcrumb/_index.scss b/packages/core/scss/components/breadcrumb/_index.scss new file mode 100644 index 00000000000..b668c7eceee --- /dev/null +++ b/packages/core/scss/components/breadcrumb/_index.scss @@ -0,0 +1,23 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../input/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-breadcrumb--styles() { + @include import-once( "breadcrumb" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-icon--styles(); + @include kendo-breadcrumb--layout(); + @include kendo-breadcrumb--theme(); + @include kendo-utils--flex-grid--flex(); + @include kendo-utils--flex-grid--flex-wrap(); + } +} diff --git a/packages/core/scss/components/breadcrumb/_layout.scss b/packages/core/scss/components/breadcrumb/_layout.scss new file mode 100644 index 00000000000..75351111c7d --- /dev/null +++ b/packages/core/scss/components/breadcrumb/_layout.scss @@ -0,0 +1,141 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-breadcrumb--layout-base() { + + // Breadcrumb + .k-breadcrumb { + margin-block: $kendo-breadcrumb-margin-y; + margin-inline: $kendo-breadcrumb-margin-x; + padding-block: $kendo-breadcrumb-padding-y; + padding-inline: $kendo-breadcrumb-padding-x; + border-width: $kendo-breadcrumb-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-breadcrumb-font-family; + display: flex; + flex-direction: row; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Breadcrumb container + .k-breadcrumb-container, + .k-breadcrumb-root-item-container { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-flow: row nowrap; + overflow: hidden; + } + + .k-breadcrumb-root-item-container { + align-items: flex-start; + flex-shrink: 0; + } + + + // Breadcrumb item + .k-breadcrumb-item { + vertical-align: middle; + display: inline-flex; + flex-direction: row; + flex: none; + align-items: center; + overflow: hidden; + } + + + // Breadcrumb root item + .k-breadcrumb-root-item { + flex-shrink: 0; + } + + + // Breadcrumb links + .k-breadcrumb-link, + .k-breadcrumb-root-link { + @include border-radius( $kendo-breadcrumb-link-border-radius ); + color: $kendo-breadcrumb-link-initial-text; + text-decoration: none; + white-space: nowrap; + outline: none; + cursor: pointer; + position: relative; + display: inline-flex; + align-items: center; + align-self: stretch; + overflow: hidden; + transition: $kendo-transition; + } + + .k-breadcrumb-link > .k-image, + .k-breadcrumb-icontext-link .k-icon { + margin-inline-end: $kendo-breadcrumb-link-icon-spacing; + } + + + // Breadcrumb delimiter + .k-breadcrumb-delimiter, + .k-breadcrumb-delimiter-icon { + color: inherit; + opacity: $kendo-disabled-opacity; + } + + + // Editing + .k-breadcrumb-input-container { + width: 100%; + + .k-breadcrumb-input-container { + border-color: transparent; + } + } + + + // Sizes + @each $size, $size-props in $kendo-breadcrumb-sizes { + $_link-padding-x: map.get( $size-props, link-padding-x ); + $_link-padding-y: map.get( $size-props, link-padding-y ); + $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x ); + $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y ); + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + + .k-breadcrumb-#{$size} { + font-size: $_font-size; + line-height: $_line-height; + + + .k-breadcrumb-link, + .k-breadcrumb-root-link { + padding-block: $_link-padding-y; + padding-inline: $_link-padding-x; + } + + .k-breadcrumb-icon-link { + padding-block: $_icon-link-padding-y; + padding-inline: $_icon-link-padding-x; + } + } + } + +} + + +@mixin kendo-breadcrumb--layout() { + @include kendo-breadcrumb--layout-base(); +} diff --git a/packages/core/scss/components/breadcrumb/_theme.scss b/packages/core/scss/components/breadcrumb/_theme.scss new file mode 100644 index 00000000000..a432ad10c19 --- /dev/null +++ b/packages/core/scss/components/breadcrumb/_theme.scss @@ -0,0 +1,105 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-breadcrumb--theme-base() { + + // Breadcrumb + .k-breadcrumb { + @include fill( + $kendo-breadcrumb-text, + $kendo-breadcrumb-bg, + $kendo-breadcrumb-border + ); + + &:focus, + &.k-focus { + @include box-shadow( $kendo-breadcrumb-focus-shadow ); + } + } + + + // Breadcrumb link + .k-breadcrumb-link { + @include fill( + $kendo-breadcrumb-link-text, + $kendo-breadcrumb-link-bg, + $kendo-breadcrumb-link-border + ); + + // Hovered state + &:hover, + &.k-hover { + @include fill( + $kendo-breadcrumb-link-hover-text, + $kendo-breadcrumb-link-hover-bg, + $kendo-breadcrumb-link-hover-border + ); + } + + // Focused state + &:focus, + &.k-focus { + @include fill( + $kendo-breadcrumb-link-focus-text, + $kendo-breadcrumb-link-focus-bg, + $kendo-breadcrumb-link-focus-border + ); + @include focus-indicator( $kendo-breadcrumb-link-focus-shadow ); + } + } + + + // Breadcrumb root link + .k-breadcrumb-root-link { + @include fill( + $kendo-breadcrumb-root-link-text, + $kendo-breadcrumb-root-link-bg, + $kendo-breadcrumb-root-link-border + ); + + // Hovered state + &:hover, + &.k-hover { + @include fill( + $kendo-breadcrumb-root-link-hover-text, + $kendo-breadcrumb-root-link-hover-bg, + $kendo-breadcrumb-root-link-hover-border + ); + } + + // Focused state + &:focus, + &.k-focus { + @include fill( + $kendo-breadcrumb-root-link-focus-text, + $kendo-breadcrumb-root-link-focus-bg, + $kendo-breadcrumb-root-link-focus-border + ); + @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow ); + } + } + + + // Breadcrumb current (last) item + .k-breadcrumb-current-item { + .k-breadcrumb-link { + @include fill( + $kendo-breadcrumb-current-item-text, + $kendo-breadcrumb-current-item-bg, + $kendo-breadcrumb-current-item-border + ); + } + } + + + // Alias + .k-breadcrumb-last-item { + @extend .k-breadcrumb-current-item !optional; + } + +} + + +@mixin kendo-breadcrumb--theme() { + @include kendo-breadcrumb--theme-base(); +} diff --git a/packages/core/scss/components/breadcrumb/_variables.scss b/packages/core/scss/components/breadcrumb/_variables.scss new file mode 100644 index 00000000000..b5ba1f33c5d --- /dev/null +++ b/packages/core/scss/components/breadcrumb/_variables.scss @@ -0,0 +1,205 @@ +// Breadcrumb + +/// The width of the border around the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-border-width: null !default; + +/// The horizontal margin of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-margin-x: null !default; +/// The vertical margin of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-margin-y: null !default; +/// The horizontal padding of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-padding-x: null !default; +/// The vertical padding of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-padding-y: null !default; + +/// The font family of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-font-family: null !default; + +/// The font size of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-font-size: null !default; +/// The font size of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-font-size: null !default; +/// The font size of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-font-size: null !default; +/// The font size of the large Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-font-size: null !default; + +/// The line-height of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-line-height: null !default; +/// The line-height of the small Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sm-line-height: null !default; +/// The line-height of the medium Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-md-line-height: null !default; +/// The line-height of the height Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-lg-line-height: null !default; + +/// The base background of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-bg: null !default; +/// The base text color of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-text: null !default; +/// The base border color of the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-border: null !default; + +/// The box shadow of the focused Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-focus-shadow: null !default; + +/// The horizontal padding of the Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-padding-x: null !default; +/// The horizontal padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-x: null !default; +/// The horizontal padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-x: null !default; +/// The horizontal padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-x: null !default; + +/// The vertical padding of the Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-padding-y: null !default; +/// The vertical padding of the small Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-sm-link-padding-y: null !default; +/// The vertical padding of the medium Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-md-link-padding-y: null !default; +/// The vertical padding of the large Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-lg-link-padding-y: null !default; + +/// The border-radius of the Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-border-radius: null !default; + +/// The vertical padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-y: null !default; +/// The vertical padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-y: null !default; +/// The vertical padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-y: null !default; +/// The vertical padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-y: null !default; + +/// The horizontal padding of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-icon-link-padding-x: null !default; +/// The horizontal padding of the small Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-sm-icon-link-padding-x: null !default; +/// The horizontal padding of the medium Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-md-icon-link-padding-x: null !default; +/// The horizontal padding of the large Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-lg-icon-link-padding-x: null !default; + +/// The text color of the Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-initial-text: null !default; +/// The spacing of the Breadcrumb link icon. +/// @group breadcrumb +$kendo-breadcrumb-link-icon-spacing: null !default; + +/// The background color of the Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-bg: null !default; +/// The text color of the Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-text: null !default; +/// The border color of the Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-border: null !default; + +/// The background color of the hovered Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-hover-bg: null !default; +/// The text color of the hovered Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-hover-text: null !default; +/// The border color of the hovered Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-hover-border: null !default; + +/// The background color of the focused Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-focus-text: null !default; +/// The border color of the focused Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb link. +/// @group breadcrumb +$kendo-breadcrumb-link-focus-shadow: null !default; + +/// The background color of the Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-bg: null !default; +/// The text color of the Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-text: null !default; +/// The border color of the Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-border: null !default; + +/// The background color of the hovered Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-hover-bg: null !default; +/// The text color of the hovered Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-hover-text: null !default; +/// The border color of the hovered Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-hover-border: null !default; + +/// The background color of the focused Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-focus-bg: null !default; +/// The text color of the focused Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-focus-text: null !default; +/// The border color of the focused Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-focus-border: null !default; +/// The box shadow of the focused Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-root-link-focus-shadow: null !default; + +/// The background color of the current Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-current-item-bg: null !default; +/// The text color of the current Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-current-item-text: null !default; +/// The border color of the current Breadcrumb root link. +/// @group breadcrumb +$kendo-breadcrumb-current-item-border: null !default; + +/// The sizes map for the Breadcrumb. +/// @group breadcrumb +$kendo-breadcrumb-sizes: null !default; diff --git a/packages/core/scss/components/button/_index.scss b/packages/core/scss/components/button/_index.scss new file mode 100644 index 00000000000..9cdc11ef1dc --- /dev/null +++ b/packages/core/scss/components/button/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../badge/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-button--styles() { + @include import-once( "button" ) { + @include core-styles(); + @include kendo-badge--styles(); + @include kendo-icon--styles(); + @include kendo-button--layout(); + @include kendo-button--theme(); + } +} diff --git a/packages/core/scss/components/button/_layout.scss b/packages/core/scss/components/button/_layout.scss new file mode 100644 index 00000000000..cfade26e643 --- /dev/null +++ b/packages/core/scss/components/button/_layout.scss @@ -0,0 +1,359 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "./_variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-button--layout-base() { + + // Button + .k-button { + box-sizing: border-box; + border-width: $kendo-button-border-width; + border-style: solid; + border-radius: $kendo-button-border-radius; + color: inherit; + background: none; + font-family: $kendo-button-font-family; + text-align: center; + text-decoration: none; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + gap: $kendo-icon-spacing; + vertical-align: middle; + user-select: none; + cursor: pointer; + outline: none; + -webkit-appearance: none; + position: relative; + transition: $kendo-button-transition; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + &:disabled, + &.k-disabled { + @include disabled( $kendo-disabled-styling... ); + } + + &::-moz-focus-inner { + padding: 0; + border: 0; + outline: 0; + } + + &:hover, + &:focus { + text-decoration: none; + outline: 0; + } + } + + + // Icon Button + .k-icon-button { + gap: 0; + + .k-icon { + display: inline-flex; + } + } + + + // Content + .k-button-icon { + color: inherit; + align-self: center; + position: relative; + } + + .k-button-text {} + + + // Sizes + @each $size, $size-props in $kendo-button-sizes { + $_padding-x: map.get( $size-props, padding-x ); + $_padding-y: map.get( $size-props, padding-y ); + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + + .k-button-#{$size} { + padding-block: $_padding-y; + padding-inline: $_padding-x; + font-size: $_font-size; + line-height: $_line-height; + } + + .k-button-#{$size}.k-icon-button { + padding: $_padding-y; + + .k-button-icon { + min-width: calc( #{$_font-size} * #{$_line-height} ); + min-height: calc( #{$_font-size} * #{$_line-height} ); + display: inline-flex; + align-items: center; + justify-content: center; + + &.k-svg-icon > svg, + &.k-icon-md > svg { + width: $kendo-icon-size-md; + height: $kendo-icon-size-md; + } + + &.k-icon-xs > svg { + width: $kendo-icon-size-xs; + height: $kendo-icon-size-xs; + } + + &.k-icon-sm > svg { + width: $kendo-icon-size-sm; + height: $kendo-icon-size-sm; + } + + &.k-icon-lg > svg { + width: $kendo-icon-size-lg; + height: $kendo-icon-size-lg; + } + + &.k-icon-xl > svg { + width: $kendo-icon-size-xl; + height: $kendo-icon-size-xl; + } + + &.k-icon-xxl > svg { + width: $kendo-icon-size-xxl; + height: $kendo-icon-size-xxl; + } + + &.k-icon-xxxl > svg { + width: $kendo-icon-size-xxxl; + height: $kendo-icon-size-xxxl; + } + } + } + } + + + // Button shape + .k-button-square { + aspect-ratio: 1; + } + + + // Button group + .k-button-group { + margin: 0; + padding: 0; + border-width: 0; + box-sizing: border-box; + list-style: none; + outline: 0; + display: inline-flex; + flex-flow: row nowrap; + vertical-align: middle; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + > .k-button + .k-button { + margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width ); + } + + > .k-button:hover, + > .k-button.k-hover, + > .k-button:focus, + > .k-button.k-focus, + > .k-button:active, + > .k-button.k-active, + > .k-button.k-selected { + z-index: 2; + } + + .k-button:not(:first-child):not(:last-child) { + border-start-end-radius: 0; + border-end-end-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; + } + > .k-button:first-child:not(:only-child) { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + > .k-button:last-child:not(:only-child) { + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + &:disabled, + &[disabled], + &.k-disabled { + opacity: 1; + filter: none; + } + } + + .k-button-group-stretched { + width: 100%; + + > * { + flex: 1 0 0%; + overflow: hidden; + } + } + + + // Flat button + .k-button-flat { + border-color: transparent !important; // stylelint-disable-line declaration-no-important + color: inherit; + background: none !important; // stylelint-disable-line declaration-no-important + box-shadow: none !important; // stylelint-disable-line declaration-no-important + + // Overlay background + &::before { + display: block !important; // stylelint-disable-line declaration-no-important + } + + // Focus ring + &::after { + box-shadow: inset 0 0 0 2px currentColor; + display: block !important; // stylelint-disable-line declaration-no-important + } + + &:focus::after, + &.k-focus::after { + opacity: $kendo-flat-button-focus-ring-opacity; + } + } + + + // Outline button + .k-button-outline { + border-color: currentColor; + color: inherit; + background: none; + } + + + // Link button + .k-button-link { + border-color: transparent; + color: inherit; + text-decoration: none; + background: none; + + &:hover, + &.k-hover { + text-decoration: underline; + } + } + + + // Clear button + .k-button-clear { + border-color: transparent !important; // stylelint-disable-line declaration-no-important + color: inherit; + background: none !important; // stylelint-disable-line declaration-no-important + box-shadow: none !important; // stylelint-disable-line declaration-no-important + } + + + + + // Button overlay + .k-button-overlay { + @include border-radius( inherit ); + content: ""; + background: currentColor; + opacity: 0; + display: none; + pointer-events: none; + position: absolute; + left: -$kendo-button-border-width; + right: -$kendo-button-border-width; + top: -$kendo-button-border-width; + bottom: -$kendo-button-border-width; + z-index: 0; + transition: opacity .2s ease-in-out; + } + + + .k-button { // stylelint-disable-line + + &::before { + @extend .k-button-overlay !optional; + } + + // Hovered state + &:hover, + &.k-hover { + &::before { + opacity: $kendo-flat-button-hover-opacity; + } + } + + // Focused state + &:focus, + &.k-focus { + &::before { + opacity: $kendo-flat-button-focus-opacity; + } + } + &.k-no-focus:not(:hover), + &.k-no-focus:not(.k-hover) { + &::before { + opacity: 0; + } + } + + // Active state + &:active, + &.k-active { + &::before { + opacity: $kendo-flat-button-active-opacity; + } + } + + // Selected state + &.k-selected { + &::before { + opacity: $kendo-flat-button-selected-opacity; + } + } + + } + + + + + // Button focus ring + .k-button { // stylelint-disable-line + + &::after { + @include border-radius( inherit ); + content: ""; + opacity: 0; + display: none; + pointer-events: none; + position: absolute; + left: -$kendo-button-border-width; + right: -$kendo-button-border-width; + top: -$kendo-button-border-width; + bottom: -$kendo-button-border-width; + z-index: 0; + transition: opacity .2s ease-in-out; + } + } + +} + + +@mixin kendo-button--layout() { + @include kendo-button--layout-base(); +} diff --git a/packages/core/scss/components/button/_theme.scss b/packages/core/scss/components/button/_theme.scss new file mode 100644 index 00000000000..da750a3d39d --- /dev/null +++ b/packages/core/scss/components/button/_theme.scss @@ -0,0 +1,341 @@ +@use "sass:map"; +@use "sass:meta"; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-button--theme-base() { + + // Solid button + .k-button-solid-base { + @include fill( + $kendo-button-text, + $kendo-button-bg, + $kendo-button-border, + $kendo-button-gradient + ); + @include box-shadow( $kendo-button-shadow ); + + // Hover state + &:hover, + &.k-hover { + @include fill( + $kendo-button-hover-text, + $kendo-button-hover-bg, + $kendo-button-hover-border, + $kendo-button-hover-gradient + ); + @include box-shadow( $kendo-button-hover-shadow ); + } + + // Focus state + &:focus, + &.k-focus { + @include focus-indicator( $kendo-button-focus-shadow, true, true ); + } + + // Active state + &:active, + &.k-active { + @include fill( + $kendo-button-active-text, + $kendo-button-active-bg, + $kendo-button-active-border, + $kendo-button-active-gradient + ); + @include box-shadow( $kendo-button-active-shadow ); + } + + // Selected state + &.k-selected { + @include fill( + $kendo-button-selected-text, + $kendo-button-selected-bg, + $kendo-button-selected-border, + $kendo-button-selected-gradient + ); + @include box-shadow( $kendo-button-selected-shadow ); + } + + // Disabled state + &:disabled, + &.k-disabled { + @include fill( + $kendo-button-disabled-text, + $kendo-button-disabled-bg, + $kendo-button-disabled-border, + $kendo-button-disabled-gradient + ); + @include box-shadow( $kendo-button-disabled-shadow ); + } + } + + $_shade-fn: meta.get-function( $kendo-solid-button-shade-function ); + + @each $name, $color in $kendo-button-theme-colors { + @if ($name != "base") { + $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null )); + $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null )); + + $_button-hover-text: null; + $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null )); + $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null )); + + $_button-active-text: null; + $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null )); + $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null )); + + .k-button-solid-#{$name} { + @include fill( + $_button-text, + $_button-bg, + $_button-border, + $kendo-solid-button-gradient + ); + + // Hover state + &:hover, + &.k-hover { + @include fill( + $_button-hover-text, + $_button-hover-bg, + $_button-hover-border + ); + } + + // Focus state + &:focus, + &.k-focus { + @if ( $kendo-solid-button-shadow ) { + @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true ); + } + } + + // Active state + &:active, + &.k-active { + @include fill( + $_button-active-text, + $_button-active-bg, + $_button-active-border + ); + } + + // Selected + &.k-selected { + @include fill( + $_button-active-text, + $_button-active-bg, + $_button-active-border + ); + } + + // Disabled state + &:disabled, + &.k-disabled { + @include fill( + $kendo-button-disabled-text, + $kendo-button-disabled-bg, + $kendo-button-disabled-border, + $kendo-button-disabled-gradient + ); + @include box-shadow( $kendo-button-disabled-shadow ); + } + } + } + } + + + // Outline button + @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { + .k-button-outline-#{$name} { + @include box-shadow( none ); + border-color: currentColor; + color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); + background-color: transparent; + + // Hover state + &:hover, + &.k-hover { + @if $name == "base" { + @include fill( + if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color ) ), + if($kendo-enable-color-system, k-color( on-base ), $color ), + if($kendo-enable-color-system, k-color( on-base ), $color ) + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + $color, + $color + ); + } + } + + // Focus state + &:focus, + &.k-focus { + @if $kendo-outline-button-shadow { + @if $name == "base" { + @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); + } @else { + @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); + } + } + } + + // Active state + &:active, + &.k-active { + @if $name == "base" { + @include fill( + if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )), + if($kendo-enable-color-system, k-color( on-base ), $color ), + if($kendo-enable-color-system, k-color( on-base ), $color ) + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + $color, + $color + ); + } + } + + // Selected + &.k-selected { + @if $name == "base" { + @include fill( + if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )), + if($kendo-enable-color-system, k-color( on-base ), $color ), + if($kendo-enable-color-system, k-color( on-base ), $color ) + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + $color, + $color + ); + } + } + + // Disabled state + &:disabled, + &.k-disabled { + color: $kendo-button-disabled-text; + } + } + } + + + // Flat button + @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": inherit ) ) { + .k-button-flat-#{$name} { + @if $name == "base" { + color: inherit; + } @else { + color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); + } + + // Disabled state + &:disabled, + &.k-disabled { + color: $kendo-button-disabled-text; + } + } + } + + + // Link button + @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { + .k-button-link-#{$name} { + color: $color; + + // Hover + &:hover, + &.k-hover { + @if $name == "base" { + color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + } @else { + color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 )); + } + } + + // Focus + &:focus, + &.k-focus { + @if ( $kendo-link-button-shadow ) { + @if $name == "base" { + @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); + } @else { + @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); + } + } + } + + // Active + &:active, + &.k-active { + @if $name == "base" { + color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + } @else { + color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); + } + } + + // Selected + &.k-selected { + @if $name == "base" { + color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + } @else { + color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); + } + } + + // Disabled state + &:disabled, + &.k-disabled { + color: $kendo-button-disabled-text; + } + } + } + + + // Clear button + @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { + .k-button-clear-#{$name} { + color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); + + &:focus, + &.k-focus, + &:active { + &::after { + background-color: currentColor; + opacity: $kendo-clear-button-focus-opacity; + display: block; + } + } + + // Disabled state + &:disabled, + &.k-disabled { + color: $kendo-button-disabled-text; + } + } + } + + + // Button group + .k-button-group {} + + +} + + +@mixin kendo-button--theme() { + @include kendo-button--theme-base(); +} diff --git a/packages/core/scss/components/button/_variables.scss b/packages/core/scss/components/button/_variables.scss new file mode 100644 index 00000000000..d9d79d60960 --- /dev/null +++ b/packages/core/scss/components/button/_variables.scss @@ -0,0 +1,235 @@ +// Button + +/// The width of the border around the Button. +/// @group button +$kendo-button-border-width: null !default; + +/// The border radius of the Button. +/// @group button +$kendo-button-border-radius: null !default; + +/// The horizontal padding of the Button. +/// @group button +$kendo-button-padding-x: null !default; +/// The horizontal padding of the small Button. +/// @group button +$kendo-button-sm-padding-x: null !default; +/// The horizontal padding of the medium Button. +/// @group button +$kendo-button-md-padding-x: null !default; +/// The horizontal padding of the large Button. +/// @group button +$kendo-button-lg-padding-x: null !default; + +/// The vertical padding of the Button. +/// @group button +$kendo-button-padding-y: null !default; +/// The vertical padding of the small Button. +/// @group button +$kendo-button-sm-padding-y: null !default; +/// The vertical padding of the medium Button. +/// @group button +$kendo-button-md-padding-y: null !default; +/// The vertical padding of the large Button. +/// @group button +$kendo-button-lg-padding-y: null !default; + +/// The font family of the Button. +/// @group button +$kendo-button-font-family: null !default; + +/// The font size of the Button. +/// @group button +$kendo-button-font-size: null !default; +/// The font size of the small Button. +/// @group button +$kendo-button-sm-font-size: null !default; +/// The font size of the medium Button. +/// @group button +$kendo-button-md-font-size: null !default; +/// The font size of the large Button. +/// @group button +$kendo-button-lg-font-size: null !default; + +/// The line height used along with the $kendo-font-size the. +/// @group button +$kendo-button-line-height: null !default; +/// The line height used along with the $kendo-font-size the of the small Button. +/// @group button +$kendo-button-sm-line-height: null !default; +/// The line height used along with the $kendo-font-size the of the medium Button. +/// @group button +$kendo-button-md-line-height: null !default; +/// The line height used along with the $kendo-font-size the of the large Button. +/// @group button +$kendo-button-lg-line-height: null !default; + +/// The calculated height of the Button. +/// @group button +$kendo-button-calc-size: null !default; +$kendo-button-sm-calc-size: null !default; +$kendo-button-md-calc-size: null !default; +$kendo-button-lg-calc-size: null !default; + +/// The calculated inner height of the Button excluding the border width. +/// @group button +$kendo-button-inner-calc-size: null !default; +$kendo-button-sm-inner-calc-size: null !default; +$kendo-button-md-inner-calc-size: null !default; +$kendo-button-lg-inner-calc-size: null !default; + +/// The sizes map for the Button. +/// @group button +$kendo-button-sizes: null !default; + +/// The theme colors map for the Button. +/// @group button +$kendo-button-theme-colors: null !default; + +/// The base background of the Button. +/// @group button +$kendo-button-bg: null !default; +/// The base text color of the Button. +/// @group button +$kendo-button-text: null !default; +/// The base border color of the Button. +/// @group button +$kendo-button-border: null !default; +/// The base background gradient of the Button. +/// @group button +$kendo-button-gradient: null !default; +/// The base shadow of the Button. +/// @group button +$kendo-button-shadow: null !default; + +/// The base background of the hovered Button. +/// @group button +$kendo-button-hover-bg: null !default; +/// The base text color of the hovered Button. +/// @group button +$kendo-button-hover-text: null !default; +/// The base border color of the hovered Button. +/// @group button +$kendo-button-hover-border: null !default; +/// The base background gradient of the hovered Button. +/// @group button +$kendo-button-hover-gradient: null !default; +/// The base shadow of the hovered Button. +/// @group button +$kendo-button-hover-shadow: null !default; + +/// The base background color of the active Button. +/// @group button +$kendo-button-active-bg: null !default; +/// The base text color of the active Button. +/// @group button +$kendo-button-active-text: null !default; +/// The base border color of the active Button. +/// @group button +$kendo-button-active-border: null !default; +/// The base background gradient of the active Button. +/// @group button +$kendo-button-active-gradient: null !default; +/// The base shadow of the active Button. +/// @group button +$kendo-button-active-shadow: null !default; + +/// The base background color of the selected Button. +/// @group button +$kendo-button-selected-bg: null !default; +/// The text color of the selected Button. +/// @group button +$kendo-button-selected-text: null !default; +/// The border color of the selected Button. +/// @group button +$kendo-button-selected-border: null !default; +/// The background gradient of the selected Button. +/// @group button +$kendo-button-selected-gradient: null !default; +/// The base shadow of the selected Button. +/// @group button +$kendo-button-selected-shadow: null !default; + +/// The base background of the focused Button. +/// @group button +$kendo-button-focus-bg: null !default; +/// The base text color of the focused Button. +/// @group button +$kendo-button-focus-text: null !default; +/// The base border color of the focused Button. +/// @group button +$kendo-button-focus-border: null !default; +/// The base background gradient of the focused Button. +/// @group button +$kendo-button-focus-gradient: null !default; +/// The base shadow of the focused Button. +/// @group button +$kendo-button-focus-shadow: null !default; + +/// The base background of the disabled Button. +/// @group button +$kendo-button-disabled-bg: null !default; +/// The base text color of the disabled Button. +/// @group button +$kendo-button-disabled-text: null !default; +/// The base border color of the disabled Button. +/// @group button +$kendo-button-disabled-border: null !default; +/// The base background gradient of the disabled Button. +/// @group button +$kendo-button-disabled-gradient: null !default; +/// The base shadow of the disabled Button. +/// @group button +$kendo-button-disabled-shadow: null !default; + +// Solid Button +$kendo-solid-button-gradient: null !default; +$kendo-solid-button-shade-function: null !default; +$kendo-solid-button-shade-text-amount: null !default; +$kendo-solid-button-shade-bg-amount: null !default; +$kendo-solid-button-shade-border-amount: null !default; +$kendo-solid-button-hover-shade-text-amount: null !default; +$kendo-solid-button-hover-shade-bg-amount: null !default; +$kendo-solid-button-hover-shade-border-amount: null !default; +$kendo-solid-button-active-shade-text-amount: null !default; +$kendo-solid-button-active-shade-bg-amount: null !default; +$kendo-solid-button-active-shade-border-amount: null !default; +$kendo-solid-button-shadow: null !default; +$kendo-solid-button-shadow-blur: null !default; +$kendo-solid-button-shadow-spread: null !default; +$kendo-solid-button-shadow-opacity: null !default; + +// Outline Button +$kendo-outline-button-shadow: null !default; +$kendo-outline-button-shadow-blur: null !default; +$kendo-outline-button-shadow-spread: null !default; +$kendo-outline-button-shadow-opacity: null !default; + +// Link Button +$kendo-link-button-shadow: null !default; +$kendo-link-button-shadow-blur: null !default; +$kendo-link-button-shadow-spread: null !default; +$kendo-link-button-shadow-opacity: null !default; + +// Clear Button +$kendo-clear-button-focus-opacity: null !default; + +/// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button. +/// @group button +$kendo-flat-button-hover-opacity: null !default; +/// The overlay opacity of the focused flat Button. Used to create a background for the flat Button. +/// @group button +$kendo-flat-button-focus-opacity: null !default; +/// The overlay opacity of the active flat Button. Used to create background for the flat Button. +/// @group button +$kendo-flat-button-active-opacity: null !default; +/// The overlay opacity of the selected flat Button. Used to create background for the flat Button. +/// @group button +$kendo-flat-button-selected-opacity: null !default; +/// The opacity of the flat Button focus ring. Used to create a border for the flat Button. +/// @group button +$kendo-flat-button-focus-ring-opacity: null !default; + +/// The color transition of the flat Button. +/// @group button +$kendo-button-transition: null !default; diff --git a/packages/core/scss/components/calendar/_index.scss b/packages/core/scss/components/calendar/_index.scss new file mode 100644 index 00000000000..b99121bd00f --- /dev/null +++ b/packages/core/scss/components/calendar/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-calendar--styles() { + @include import-once( "calendar" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-icon--styles(); + @include kendo-list--styles(); + @include kendo-calendar--layout(); + @include kendo-calendar--theme(); + @include kendo-utils--flex-grid--align-items(); + @include kendo-utils--flex-grid--justify-content(); + @include kendo-utils--interactivity--pointer-events(); + } +} diff --git a/packages/core/scss/components/calendar/_layout.scss b/packages/core/scss/components/calendar/_layout.scss new file mode 100644 index 00000000000..4bdda1081f0 --- /dev/null +++ b/packages/core/scss/components/calendar/_layout.scss @@ -0,0 +1,529 @@ +@use "sass:map"; +@use "sass:math"; +@use "../../color-system/_constants.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-calendar--layout-base() { + + // Base + .k-calendar { + inline-size: var( --INTERNAL--kendo-calendar-width, min-content ); + block-size: var( --INTERNAL--kendo-calendar-height, min-content ); + border-width: $kendo-calendar-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-calendar-font-family; + font-size: $kendo-calendar-font-size; + line-height: $kendo-calendar-line-height; + position: relative; + overflow: hidden; + display: inline-flex; + flex-flow: column nowrap; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + + // Nested calendar + > .k-calendar { + border: 0; + } + } + + + // Calendar table + .k-calendar-table { + margin-block: 0; + margin-inline: auto; + border-width: 0; + border-color: inherit; + border-spacing: 0; + border-collapse: separate; + table-layout: fixed; + text-align: center; + outline: 0; + display: table; + position: relative; + z-index: 1; + } + .k-calendar-caption, + .k-calendar-caption.k-calendar-th, + .k-calendar .k-meta-header, + .k-calendar .k-month-header { + padding-block: $kendo-calendar-caption-padding-y; + padding-inline: $kendo-calendar-caption-padding-x; + height: $kendo-calendar-caption-height; + box-sizing: border-box; + font-size: $kendo-calendar-caption-font-size; + line-height: $kendo-calendar-caption-line-height; + text-transform: none; + text-align: start; + font-weight: $kendo-calendar-caption-font-weight; + cursor: default; + } + + + // Calendar cell + .k-calendar-th, + .k-calendar-td { + border-width: 0; + padding: 0; + text-align: center; + border-style: solid; + border-color: inherit; + font-weight: normal; + cursor: default; + } + .k-calendar-th { + padding-block: $kendo-calendar-header-cell-padding-y; + padding-inline: $kendo-calendar-header-cell-padding-x; + inline-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-width ); + block-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-height ); + font-size: $kendo-calendar-header-cell-font-size; + line-height: $kendo-calendar-header-cell-line-height; + text-transform: uppercase; + opacity: $kendo-calendar-header-cell-opacity; + } + .k-calendar-td { + @include border-radius( $kendo-calendar-cell-border-radius ); + inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content ); + block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content ); + border-color: transparent; + } + .k-calendar-td.k-alt { + font-size: $kendo-calendar-week-number-font-size; + } + + + // Calendar cell inner + // Remove .k-calendar once we remove k-link + .k-calendar .k-calendar-cell-inner { + @include border-radius( $kendo-calendar-cell-border-radius ); + padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} ); + padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} ); + width: 100%; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + white-space: normal; + position: relative; + overflow: hidden; + } + + + // Calendar header + .k-calendar .k-header { + padding-block: $kendo-calendar-header-padding-y; + padding-inline: $kendo-calendar-header-padding-x; + border-bottom-width: $kendo-calendar-header-border-width; + border-bottom-style: solid; + display: flex; + flex-flow: row nowrap; + gap: $kendo-calendar-nav-gap; + align-items: center; + position: relative; + z-index: 2; + } + + + // Calendar header + .k-calendar-header { + padding-block: $kendo-calendar-header-padding-y; + padding-inline: $kendo-calendar-header-padding-x; + min-width: ($kendo-calendar-cell-size * 8); + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + flex: 0 0 auto; + + .k-calendar-nav { + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: $kendo-calendar-nav-gap; + } + } + + + // Calendar footer + .k-calendar-footer, + .k-calendar .k-footer { + padding-block: $kendo-calendar-footer-padding-y; + padding-inline: $kendo-calendar-footer-padding-x; + text-align: center; + clear: both; + } + + + // Calendar view wrapper + .k-calendar-view { + margin: auto; + padding-block: 0; + padding-inline: $kendo-calendar-header-padding-x; + // setting width / height prevents layout changes in meta views + width: $kendo-calendar-view-width; + inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width}); + min-height: $kendo-calendar-view-height; + box-sizing: content-box; + gap: $kendo-calendar-view-gap; + position: relative; + z-index: 1; + overflow: hidden; + + .k-today { + font-weight: bold; + } + } + + + // Month view + .k-month-calendar, + .k-calendar-monthview { + $_month-cell-size: $kendo-calendar-cell-size; + + .k-calendar-td { + width: $_month-cell-size; + height: $_month-cell-size; + inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} ); + block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} ); + } + } + + + // Year view + .k-year-calendar, + .k-calendar-yearview { + $_year-cell-size: ( 2 * $kendo-calendar-cell-size ); + + .k-calendar-td { + width: $_year-cell-size; + height: $_year-cell-size; + inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} ); + block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} ); + } + } + + + // Decade view + .k-decade-calendar, + .k-calendar-decadeview { + $_decade-cell-size: ( 2 * $kendo-calendar-cell-size ); + + .k-calendar-td { + width: $_decade-cell-size; + height: $_decade-cell-size; + inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} ); + block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} ); + } + } + + + // Century view + .k-century-calendar, + .k-calendar-centuryview { + $_century-cell-size: ( 2 * $kendo-calendar-cell-size ); + + .k-calendar-td { + width: $_century-cell-size; + height: $_century-cell-size; + inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} ); + block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} ); + } + .k-calendar-cell-inner { + text-align: start; + } + } + + + // Calendar in popup + .k-popup .k-calendar { + height: 100%; + } + .k-calendar-container, + .k-datetime-container { + padding: 0; + + .k-calendar { + border-width: 0; + } + } + + + + + .k-calendar .k-content.k-scrollable, + .k-calendar .k-calendar-content.k-scrollable { + box-sizing: content-box; + overflow-x: hidden; + overflow-y: auto; + display: block; + + @include hide-scrollbar("right"); + } + + // scoped in calendar until it is used elsewhere + .k-calendar .k-scrollable-placeholder { + position: absolute; + z-index: -1; + width: 1px; + top: 0; + right: 0; + } + + + + + // Calendar sizes + @each $size, $size-props in $kendo-calendar-sizes { + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_cell-size: map.get( $size-props, cell-size ); + $_cell-padding-x: map.get( $size-props, cell-padding-x ); + $_cell-padding-y: map.get( $size-props, cell-padding-y ); + + $_month-cell-size: $_cell-size; + $_year-cell-size: ( 2 * $_cell-size ); + $_decade-cell-size: ( 2 * $_cell-size ); + $_century-cell-size: ( 2 * $_cell-size ); + + .k-calendar-#{$size} { + --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size}; + --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} ); + --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} ); + font-size: $_font-size; + line-height: $_line-height; + + &.k-month-calendar, + .k-calendar-monthview { + --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} ); + } + &.k-year-calendar, + .k-calendar-yearview { + --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} ); + } + &.k-decade-calendar, + .k-calendar-decadeview { + --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} ); + } + &.k-century-calendar, + .k-calendar-centuryview { + --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} ); + } + } + } + + + + + // Legacy aliases + .k-link { + @extend .k-calendar-cell-inner !optional; + } + + + + + // Infinite calendar + .k-calendar-infinite { + box-sizing: content-box; + display: inline-flex; + flex-flow: row nowrap; + + .k-calendar-view { + padding-block: $kendo-infinite-calendar-view-padding-y; + padding-inline: $kendo-infinite-calendar-view-padding-x; + height: $kendo-infinite-calendar-view-height; + flex: 0 0 auto; + display: flex; + flex-flow: column nowrap; + gap: 0; + overflow: hidden; + + .k-content.k-scrollable { + position: relative; + } + + &::after { + display: block; + position: absolute; + bottom: 0; + content: "\200b"; + height: 0; + line-height: 0; + z-index: 1; + width: 150%; + left: -25%; + box-shadow: 0 0 $kendo-calendar-cell-size math.div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg; + } + } + + .k-calendar-header { + margin-left: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 ); + margin-right: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 ); + padding-block: $kendo-infinite-calendar-header-padding-y; + padding-inline: $kendo-infinite-calendar-header-padding-x; + width: auto; + min-width: 0; + } + + .k-calendar-weekdays { + flex: 0 0 auto; + } + } + + + // Calendar navigation + .k-calendar-navigation { + width: $kendo-calendar-navigation-width; + text-align: center; + flex: 0 0 auto; + display: block; + overflow: hidden; + position: relative; + z-index: 1; + + &::before, + &::after { + display: block; + position: absolute; + content: "\200b"; + height: 0; + line-height: 0; + z-index: 1; + width: 200%; + left: -50%; + $shadow-size: 3 * $kendo-calendar-navigation-item-height; + box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-calendar-navigation-bg; + } + + &::before { top: 0; } + &::after { bottom: 0; } + + .k-content, + .k-calendar-content { + background: transparent; + height: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + + ul { + width: $kendo-calendar-navigation-width; + } + + li { + height: $kendo-calendar-navigation-item-height; + line-height: $kendo-calendar-navigation-item-height; + cursor: pointer; + padding-block: 0; + padding-inline: 1em; + overflow: hidden; + white-space: nowrap; + text-overflow: clip; + } + } + + .k-calendar-navigation-marker { + font-weight: bold; + } + + .k-calendar-navigation-highlight { + width: 100%; + border-width: 1px 0; + border-style: solid; + height: $kendo-calendar-navigation-item-height; + box-sizing: border-box; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + } + + // // styles are applied to the k-link element inside + // .k-selected { + // color: inherit; + // background: transparent; + // border-color: transparent; + // } + } + + // Multiview calendar + .k-calendar-range { + width: auto; + + .k-calendar-view { + width: auto; + white-space: nowrap; + + &::after { + display: none; + } + + &:focus { + outline: 0; + } + } + } + + // Range Selection + .k-range-start { + border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius; + + .k-calendar-cell-inner, + .k-link { + border-color: inherit; + border-radius: inherit; + } + } + .k-range-end { + border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0; + + .k-calendar-cell-inner, + .k-link { + border-color: inherit; + border-radius: inherit; + } + } + .k-range-mid { + border-color: inherit; + border-radius: 0; + } + .k-range-start.k-range-end { + border-radius: $kendo-calendar-range-cell-border-radius; + } + + // RTL + .k-rtl .k-calendar, + [dir="rtl"] .k-calendar, + .k-calendar.k-rtl, + .k-calendar[dir="rtl"] { + + .k-content.k-scrollable, + .k-calendar-content.k-scrollable { + @include hide-scrollbar("left"); + } + + // Range Selection RTL + .k-range-start { + border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0; + } + .k-range-end { + border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius; + } + + } + +} + + +@mixin kendo-calendar--layout() { + @include kendo-calendar--layout-base(); +} diff --git a/packages/core/scss/components/calendar/_theme.scss b/packages/core/scss/components/calendar/_theme.scss new file mode 100644 index 00000000000..a4d679d03eb --- /dev/null +++ b/packages/core/scss/components/calendar/_theme.scss @@ -0,0 +1,218 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-calendar--theme-base() { + + .k-calendar { + @include fill( + $kendo-calendar-text, + $kendo-calendar-bg, + $kendo-calendar-border + ); + + + // TODO: do we even use this? + // Header / footer + .k-header { + @include fill( + $kendo-calendar-header-text, + $kendo-calendar-header-bg, + inherit, + $kendo-calendar-header-gradient + ); + @include box-shadow( $kendo-calendar-header-shadow ); + } + + + // Header cells + .k-calendar-th, + .k-calendar-caption, + .k-meta-header, + .k-month-header { + color: $kendo-calendar-header-cell-text; + } + + + // Special days + .k-calendar-view .k-today { + @if $kendo-calendar-today-style == box { + .k-calendar-cell-inner { + box-shadow: inset 0 0 0 1px $kendo-calendar-today-color; + } + &.k-focus .k-calendar-cell-inner { + @include focus-indicator( $indicator: ( inset 0 0 0 1px $kendo-calendar-today-color, $kendo-calendar-cell-focus-shadow ), $inset: true ); + } + } @else if $kendo-calendar-today-style == color { + color: $kendo-calendar-today-color; + } + } + .k-other-month { + @include fill( + $kendo-calendar-other-month-text, + $kendo-calendar-other-month-bg + ); + } + .k-weekend { + @include fill( + $kendo-calendar-weekend-text, + $kendo-calendar-weekend-bg + ); + } + .k-alt { + // remove default k-alt background color + background-color: transparent; + @include fill( + $kendo-calendar-week-number-text, + $kendo-calendar-week-number-bg + ); + } + + + // Interactive states + .k-calendar-td:hover .k-calendar-cell-inner, + .k-calendar-td.k-hover .k-calendar-cell-inner { + @include fill( + $kendo-calendar-cell-hover-text, + $kendo-calendar-cell-hover-bg, + $kendo-calendar-cell-hover-border, + $kendo-calendar-cell-hover-gradient + ); + } + .k-calendar-td.k-selected .k-calendar-cell-inner { + @include fill( + $kendo-calendar-cell-selected-text, + $kendo-calendar-cell-selected-bg, + $kendo-calendar-cell-selected-border, + $kendo-calendar-cell-selected-gradient + ); + } + .k-calendar-td.k-selected:hover .k-calendar-cell-inner, + .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner { + @include fill( + $kendo-calendar-cell-selected-hover-text, + $kendo-calendar-cell-selected-hover-bg, + $kendo-calendar-cell-selected-hover-border, + $kendo-calendar-cell-selected-hover-gradient + ); + } + .k-calendar-td:focus .k-calendar-cell-inner, + .k-calendar-td.k-focus .k-calendar-cell-inner { + @include focus-indicator( $kendo-calendar-cell-focus-shadow, true ); + } + .k-calendar-td.k-selected:focus .k-calendar-cell-inner, + .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner { + @include focus-indicator( $kendo-calendar-cell-selected-focus-shadow, true ); + } + + + // Calendar navigation + .k-calendar-navigation { + @include fill( + $kendo-calendar-navigation-text, + $kendo-calendar-navigation-bg + ); + box-shadow: inset -1px 0 $kendo-calendar-navigation-border; + + li:hover, + li.k-hover { + color: $kendo-calendar-navigation-hover-text; + } + } + .k-calendar-navigation-highlight { + @include fill( + $kendo-calendar-text, + $kendo-calendar-bg, + $kendo-calendar-border + ); + } + + // Invalid + &.k-invalid, + &.k-invalid:hover, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + border-color: $kendo-invalid-border; + } + } + + .k-rtl .k-calendar, + .k-calendar[dir="rtl"] { + .k-calendar-navigation { + box-shadow: inset 1px 0 $kendo-calendar-navigation-border; + } + } + + // Scheduler integration + .k-scheduler .k-calendar .k-other-month { + @include fill( + $kendo-calendar-other-month-text, + transparent + ); + } + + + + + // Multiview calendar + .k-calendar { // stylelint-disable-line + + $kendo-calendar-range-gap: k-spacing(1px) !default; + $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 )); + $kendo-calendar-range-split-size: 5px !default; + + .k-range-start, + .k-range-end, + .k-range-mid { + background-color: $kendo-calendar-range-bg; + } + + .k-range-start, + .k-range-end { + .k-calendar-cell-inner { + background-color: $kendo-calendar-cell-selected-bg; + } + } + + .k-range-start.k-active, + .k-range-end.k-active { + .k-calendar-cell-inner { + box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2); + } + } + + .k-range-split-start, + .k-range-split-end { + position: relative; + + &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + width: $kendo-calendar-range-split-size; + } + } + + .k-range-split-start::after { + left: -$kendo-calendar-range-split-size; + right: auto; + background-image: linear-gradient(to left, $kendo-calendar-range-bg, transparent 100%); + } + + .k-range-split-end::after { + right: -$kendo-calendar-range-split-size; + left: auto; + background-image: linear-gradient(to right, $kendo-calendar-range-bg, transparent 100%); + } + } + +} + + +@mixin kendo-calendar--theme() { + @include kendo-calendar--theme-base(); +} diff --git a/packages/core/scss/components/calendar/_variables.scss b/packages/core/scss/components/calendar/_variables.scss new file mode 100644 index 00000000000..c65042de29c --- /dev/null +++ b/packages/core/scss/components/calendar/_variables.scss @@ -0,0 +1,334 @@ +// Calendar + +/// The width of the border around the Calendar. +/// @group calendar +$kendo-calendar-border-width: null !default; + +/// The font family of the Calendar. +/// @group calendar +$kendo-calendar-font-family: null !default; +/// The font size of the Calendar. +/// @group calendar +$kendo-calendar-font-size: null !default; +/// The line height of the Calendar. +/// @group calendar +$kendo-calendar-line-height: null !default; + +/// The size of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-size: null !default; + +/// The background color of the Calendar. +/// @group calendar +$kendo-calendar-bg: null !default; +/// The text color of the Calendar. +/// @group calendar +$kendo-calendar-text: null !default; +/// The border color of the Calendar. +/// @group calendar +$kendo-calendar-border: null !default; + +/// The horizontal padding of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-padding-x: null !default; +/// The vertical padding of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-padding-y: null !default; + +/// The border width of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-border-width: null !default; + +/// The background color of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-bg: null !default; +/// The text color of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-text: null !default; +/// The border color of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-border: null !default; +/// The gradient of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-gradient: null !default; +// TODO: variable is used, but the selector using it is not! Potentially remove; +/// The shadow of the header in the Calendar. +/// @group calendar +$kendo-calendar-header-shadow: null !default; + +/// The gap between the items in the navigation of the Calendar. +/// @group calendar +$kendo-calendar-nav-gap: null !default; + +/// The horizontal padding of the footer in the Calendar. +/// @group calendar +$kendo-calendar-footer-padding-x: null !default; +/// The vertical padding of the footer in the Calendar. +/// @group calendar +$kendo-calendar-footer-padding-y: null !default; + +/// The horizontal padding of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-padding-x: null !default; +/// The vertical padding of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-padding-y: null !default; + +/// The line height of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-line-height: null !default; + +/// The border radius of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-border-radius: null !default; + +/// The horizontal padding of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-padding-x: null !default; +/// The vertical padding of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-padding-y: null !default; +/// The width of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-width: null !default; +/// The height of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-height: null !default; +/// The font size of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-font-size: null !default; +/// The line height of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-line-height: null !default; + +/// The background color of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-bg: null !default; +/// The text color of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-text: null !default; +/// The opacity of the header cells in the Calendar. +/// @group calendar +$kendo-calendar-header-cell-opacity: null !default; + +/// The horizontal padding of the caption in the Calendar. +/// @group calendar +$kendo-calendar-caption-padding-x: null !default; +/// The vertical padding of the caption in the Calendar. +/// @group calendar +$kendo-calendar-caption-padding-y: null !default; +/// The height of the caption in the Calendar. +/// @group calendar +$kendo-calendar-caption-height: null !default; +/// The font size of the caption in the Calendar. +/// @group calendar +$kendo-calendar-caption-font-size: null !default; +/// The line height of the caption in the Calendar. +/// @group calendar +$kendo-calendar-caption-line-height: null !default; +/// The font weight of the caption in the Calendar. +/// @group calendar +$kendo-calendar-caption-font-weight: null !default; + +/// The font size of the week number cells in the Calendar. +/// @group calendar +$kendo-calendar-week-number-font-size: null !default; + +/// The width of the Calendar view. +/// @group calendar +$kendo-calendar-view-width: null !default; +/// The height of the Calendar view. +/// @group calendar +$kendo-calendar-view-height: null !default; + +/// The gap between the items in the Calendar view. +/// @group calendar +$kendo-calendar-view-gap: null !default; + +/// The background color of the weekend cells in the Calendar. +/// @group calendar +$kendo-calendar-weekend-bg: null !default; +/// The text color of the weekend cells in the Calendar. +/// @group calendar +$kendo-calendar-weekend-text: null !default; + +/// The style of the current day in the Calendar. +/// @group calendar +$kendo-calendar-today-style: null !default; +/// The color of the current day in the Calendar. +/// @group calendar +$kendo-calendar-today-color: null !default; + +/// The background color of the week number cells in the Calendar. +/// @group calendar +$kendo-calendar-week-number-bg: null !default; +/// The text color of the week number cells in the Calendar. +/// @group calendar +$kendo-calendar-week-number-text: null !default; + +/// The background color of the preceding/subsequent month cells in the Calendar. +/// @group calendar +$kendo-calendar-other-month-bg: null !default; +/// The text color of the preceding/subsequent month cells in the Calendar. +/// @group calendar +$kendo-calendar-other-month-text: null !default; + +/// The background color of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-bg: null !default; +/// The text color of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-text: null !default; +/// The border color of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-border: null !default; +/// The gradient of the cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-gradient: null !default; + +/// The background color of the hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-hover-bg: null !default; +/// The text color of the hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-hover-text: null !default; +/// The border color of the hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-hover-border: null !default; +/// The gradient of the hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-hover-gradient: null !default; + +/// The background color of the selected cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-bg: null !default; +/// The text color of the selected cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-text: null !default; +/// The border color of the selected cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-border: null !default; +/// The gradient of the selected cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-gradient: null !default; + +/// The background color of the selected and hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-hover-bg: null !default; +/// The text color of the selected and hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-hover-text: null !default; +/// The border color of the selected and hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-hover-border: null !default; +/// The gradient of the selected and hovered cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-hover-gradient: null !default; + +/// The shadow of the focused cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-focus-shadow: null !default; +/// The shadow of the selected and focused cells in the Calendar. +/// @group calendar +$kendo-calendar-cell-selected-focus-shadow: null !default; + + +/// The width of the Calendar navigation. +/// @group calendar +$kendo-calendar-navigation-width: null !default; +/// The height of the items in the Calendar navigation. +/// @group calendar +$kendo-calendar-navigation-item-height: null !default; + +/// The background color of the Calendar navigation. +/// @group calendar +$kendo-calendar-navigation-bg: null !default; +/// The text color of the Calendar navigation. +/// @group calendar +$kendo-calendar-navigation-text: null !default; +/// The border color of the Calendar navigation. +/// @group calendar +$kendo-calendar-navigation-border: null !default; + +/// The text color of the hovered items in the Calendar navigation. +/// @group calendar +$kendo-calendar-navigation-hover-text: null !default; + +/// The horizontal padding of the header in the Infinite Calendar. +/// @group calendar +$kendo-infinite-calendar-header-padding-x: null !default; +/// The vertical padding of the header in the Infinite Calendar. +/// @group calendar +$kendo-infinite-calendar-header-padding-y: null !default; + +/// The horizontal padding of the Calendar view in the Infinite Calendar. +/// @group calendar +$kendo-infinite-calendar-view-padding-x: null !default; +/// The vertical padding of the Calendar view in the Infinite Calendar. +/// @group calendar +$kendo-infinite-calendar-view-padding-y: null !default; + +/// The height of the Calendar view in the Infinite Calendar. +/// @group calendar +$kendo-infinite-calendar-view-height: null !default; + + +// Multiview calendar + +/// The border radius of the range cells in the Multiview Calendar. +/// @group calendar +$kendo-calendar-range-cell-border-radius: null !default; + +// Calendar sizes + +/// The font size of the small Calendar. +/// @group calendar +$kendo-calendar-sm-font-size: null !default; +/// The line height of the small Calendar. +/// @group calendar +$kendo-calendar-sm-line-height: null !default; +/// The size of the cells in the small Calendar. +/// @group calendar +$kendo-calendar-sm-cell-size: null !default; +/// The horizontal padding of the cells in the small Calendar. +/// @group calendar +$kendo-calendar-sm-cell-padding-x: null !default; +/// The vertical padding of the cells in the small Calendar. +/// @group calendar +$kendo-calendar-sm-cell-padding-y: null !default; + +/// The font size of the medium Calendar. +/// @group calendar +$kendo-calendar-md-font-size: null !default; +/// The line height of the medium Calendar. +/// @group calendar +$kendo-calendar-md-line-height: null !default; +/// The size of the cells in the medium Calendar. +/// @group calendar +$kendo-calendar-md-cell-size: null !default; +/// The horizontal padding of the cells in the medium Calendar. +/// @group calendar +$kendo-calendar-md-cell-padding-x: null !default; +/// The vertical padding of the cells in the medium Calendar. +/// @group calendar +$kendo-calendar-md-cell-padding-y: null !default; + +/// The font size of the large Calendar. +/// @group calendar +$kendo-calendar-lg-font-size: null !default; +/// The line height of the large Calendar. +/// @group calendar +$kendo-calendar-lg-line-height: null !default; +/// The size of the cells in the large Calendar. +/// @group calendar +$kendo-calendar-lg-cell-size: null !default; +/// The horizontal padding of the cells in the large Calendar. +/// @group calendar +$kendo-calendar-lg-cell-padding-x: null !default; +/// The vertical padding of the cells in the large Calendar. +/// @group calendar +$kendo-calendar-lg-cell-padding-y: null !default; + +/// The sizes Map of the Calendar. +/// @group calendar +$kendo-calendar-sizes: null !default; diff --git a/packages/core/scss/components/captcha/_index.scss b/packages/core/scss/components/captcha/_index.scss new file mode 100644 index 00000000000..24466386241 --- /dev/null +++ b/packages/core/scss/components/captcha/_index.scss @@ -0,0 +1,29 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../textbox/_index.scss" as *; +@use "../slider/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-captcha--styles() { + @include import-once( "captcha" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-input--styles(); + @include kendo-button--styles(); + @include kendo-textbox--styles(); + @include kendo-slider--styles(); + @include kendo-captcha--layout(); + @include kendo-captcha--theme(); + @include kendo-utils--typography--text-color(); + @include kendo-utils--layout--position(); + } +} diff --git a/packages/core/scss/components/captcha/_layout.scss b/packages/core/scss/components/captcha/_layout.scss new file mode 100644 index 00000000000..1cb6dc65afa --- /dev/null +++ b/packages/core/scss/components/captcha/_layout.scss @@ -0,0 +1,69 @@ +@use "./variables.scss" as *; + +@mixin kendo-captcha--layout-base() { + + // Captcha + .k-captcha { + width: $kendo-captcha-width; + box-sizing: border-box; + font-size: $kendo-captcha-font-size; + font-family: $kendo-captcha-font-family; + line-height: $kendo-captcha-line-height; + display: flex; + flex-flow: column nowrap; + gap: $kendo-captcha-gap; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + // Image + .k-captcha-image-wrap { + position: relative; + gap: $kendo-captcha-image-wrap-gap; + } + + .k-captcha-image-controls { + position: relative; + gap: $kendo-captcha-image-controls-gap; + } + + .k-captcha-image { + width: 100%; + height: 100%; + overflow: hidden; + } + + .k-captcha-image > img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } + + // Loading + .k-captcha-loading .k-captcha-image { + height: auto; + } + + // Volume Control + .k-captcha-volume-control { + height: 100%; + } + + // Verification Success + .k-captcha-validation-message { + margin-top: $kendo-captcha-validation-message-margin-top; + font-size: $kendo-captcha-validation-message-font-size; + font-style: $kendo-captcha-validation-message-font-style; + } + +} + + +@mixin kendo-captcha--layout() { + @include kendo-captcha--layout-base(); +} diff --git a/packages/core/scss/components/captcha/_theme.scss b/packages/core/scss/components/captcha/_theme.scss new file mode 100644 index 00000000000..ad9b09fde5c --- /dev/null +++ b/packages/core/scss/components/captcha/_theme.scss @@ -0,0 +1,20 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-captcha--theme-base() { + + // Captcha + .k-captcha { + @include fill( + $kendo-captcha-text, + $kendo-captcha-bg, + $kendo-captcha-border + ); + } + +} + + +@mixin kendo-captcha--theme() { + @include kendo-captcha--theme-base(); +} diff --git a/packages/core/scss/components/captcha/_variables.scss b/packages/core/scss/components/captcha/_variables.scss new file mode 100644 index 00000000000..7a17f63a50e --- /dev/null +++ b/packages/core/scss/components/captcha/_variables.scss @@ -0,0 +1,47 @@ +// Captcha + +/// The spacer of the Captcha. +/// @group captcha +$kendo-captcha-spacer: null !default; + +/// The width of the Captcha. +/// @group captcha +$kendo-captcha-width: null !default; +/// The font family of the Captcha. +/// @group captcha +$kendo-captcha-font-family: null !default; +/// The font size of the Captcha. +/// @group captcha +$kendo-captcha-font-size: null !default; +/// The line height of the Captcha. +/// @group captcha +$kendo-captcha-line-height: null !default; +/// The gap of the Captcha. +/// @group captcha +$kendo-captcha-gap: null !default; +/// The background color of the Captcha. +/// @group captcha +$kendo-captcha-bg: null !default; +/// The text color of the Captcha. +/// @group captcha +$kendo-captcha-text: null !default; +/// The border color of the Captcha. +/// @group captcha +$kendo-captcha-border: null !default; + +/// The gap of the Captcha image wrapper. +/// @group captcha +$kendo-captcha-image-wrap-gap: null !default; +/// The gap of the Captcha image controls. +/// @group captcha +$kendo-captcha-image-controls-gap: null !default; + +/// The top margin of the Captcha validation message. +/// @group captcha +$kendo-captcha-validation-message-margin-top: null !default; +/// The font size of the Captcha validation message. +/// @group captcha +$kendo-captcha-validation-message-font-size: null !default; +/// The font style of the Captcha validation message. +/// @group captcha +$kendo-captcha-validation-message-font-style: null !default; diff --git a/packages/core/scss/components/card/_index.scss b/packages/core/scss/components/card/_index.scss new file mode 100644 index 00000000000..ba6cbf3ee6b --- /dev/null +++ b/packages/core/scss/components/card/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; +@use "../typography/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-card--styles() { + @include import-once( "card" ) { + @include core-styles(); + @include kendo-action-buttons--styles(); + @include kendo-icon--styles(); + @include kendo-typography--styles(); + @include kendo-card--layout(); + @include kendo-card--theme(); + @include kendo-utils--typography--text-overflow(); + @include kendo-utils--typography--white-space(); + @include kendo-utils--layout--display(); + } +} diff --git a/packages/core/scss/components/card/_layout.scss b/packages/core/scss/components/card/_layout.scss new file mode 100644 index 00000000000..6f68331290a --- /dev/null +++ b/packages/core/scss/components/card/_layout.scss @@ -0,0 +1,350 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../typography/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../typography/_variables.scss" as *; + +@mixin kendo-card--layout-base() { + + + // Angular elements + kendo-card, + kendo-card-header, + kendo-card-body, + kendo-card-actions, + kendo-card-footer { + display: block; + } + + + // Card + .k-card { + @include border-radius( $kendo-card-border-radius ); + border-width: $kendo-card-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-card-font-family; + font-size: $kendo-card-font-size; + line-height: $kendo-card-line-height; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + // Card avatar + .k-card-avatar, + .k-avatar { + margin-right: $kendo-card-avatar-spacing; + width: $kendo-card-avatar-size; + height: $kendo-card-avatar-size; + flex-basis: $kendo-card-avatar-size; + } + } + .k-card > .k-card-inner { + @include border-radius( $kendo-card-inner-border-radius ); + display: flex; + flex-direction: inherit; + overflow: hidden; + position: relative; + } + + // Card orientation + .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before + .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before + + // Header + .k-card-header { + padding-block: $kendo-card-header-padding-y; + padding-inline: $kendo-card-header-padding-x; + border-width: 0 0 $kendo-card-header-border-width; + border-style: solid; + outline: 0; + flex-shrink: 0; + overflow: hidden; + position: relative; + z-index: 1; + + .k-card-title, + .k-card-subtitle { + margin-bottom: 0; + } + .k-card-title + .k-card-subtitle, + .k-card-subtitle + .k-card-subtitle { + margin-top: $kendo-card-title-margin-bottom; + } + } + + + // Footer + .k-card-footer { + padding-block: $kendo-card-footer-padding-y; + padding-inline: $kendo-card-footer-padding-x; + border-width: $kendo-card-footer-border-width 0 0; + border-style: solid; + outline: 0; + flex-shrink: 0; + } + + + // Body + .k-card-body { + padding-block: $kendo-card-body-padding-y; + padding-inline: $kendo-card-body-padding-x; + outline: 0; + flex: 1 1 auto; + + p { + margin: $kendo-paragraph-margin; + } + + > .k-last, + > :last-child { + margin-bottom: 0; + } + + > .k-card-actions { + padding: 0; + } + } + + // Card media + .k-card-media { + border: 0; + max-width: 100%; + flex-shrink: 0; + overflow: hidden; + } + + .k-card-horizontal .k-card-media { + max-width: $kendo-card-img-max-width; + object-fit: cover; + } + + + // Card title + .k-card-title { + margin: 0 0 $kendo-card-title-margin-bottom; + @include typography( + $kendo-card-title-font-size, + $kendo-card-title-font-family, + $kendo-card-title-line-height, + $kendo-card-title-font-weight, + $kendo-card-title-letter-spacing + ); + } + + + // Card subtitle + .k-card-subtitle { + margin: 0 0 $kendo-card-subtitle-margin-bottom; + @include typography( + $kendo-card-subtitle-font-size, + $kendo-card-subtitle-font-family, + $kendo-card-subtitle-line-height, + $kendo-card-subtitle-font-weight, + $kendo-card-subtitle-letter-spacing + ); + } + + + // Separator + .k-card-separator { + margin: 0; + border-width: 0; + border-style: solid; + border-color: inherit; + display: block; + flex: 0 0 auto; + align-self: stretch; + } + + .k-card-separator.k-separator-horizontal, + .k-card-vertical > .k-card-separator { + border-top-width: 1px; + } + + .k-card-separator.k-separator-vertical, + .k-card-horizontal > .k-card-separator { + border-left-width: 1px; + } + + .k-card > .k-hr { + margin: 0; + flex: 0 0 auto; + border-color: inherit; + } + + // Card actions + .k-card-actions { + padding-block: $kendo-card-actions-padding-y; + padding-inline: $kendo-card-actions-padding-x; + border-width: 0; + border-style: solid; + border-color: inherit; + overflow: hidden; + display: flex; + flex-shrink: 0; + flex-basis: auto; + gap: $kendo-card-actions-gap; + } + + .k-card-horizontal .k-actions-horizontal { + width: auto; + } + + // List + .k-card-list { + display: flex; + flex-flow: column nowrap; + align-items: stretch; + gap: $kendo-card-deck-gap; + flex: 0 0 auto; + + .k-card { + flex: 0 0 auto; + } + } + + + // Deck + .k-card-deck { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + gap: $kendo-card-deck-gap; + flex: 0 0 auto; + + .k-card { + flex: 0 0 auto; + } + } + + .k-card-deck-scrollwrap { + padding-bottom: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar) + width: 100%; + box-sizing: content-box; + display: flex; + flex: 0 0 auto; + align-items: center; + position: relative; + overflow: hidden; + + > .k-button { + @include border-radius( $kendo-card-deck-scroll-button-radius ); + flex: 0 0 auto; + position: absolute; + z-index: 1; + + &:first-child { + left: $kendo-card-deck-scroll-button-offset; + } + + &:last-child { + right: $kendo-card-deck-scroll-button-offset; + } + } + + > .k-card-deck { + // hide scrollbar + $scrollbar-size: 20px; + + margin-bottom: -$scrollbar-size; + padding-bottom: $scrollbar-size; + flex: 1 1 auto; + } + } + + + // Group + .k-card-group { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + flex: 0 0 auto; + + .k-card { + @include border-radius( 0 ); + flex: 0 0 auto; + } + .k-card + .k-card { + margin-inline-start: $kendo-card-border-width; + } + + + // Border-radius + .k-card.k-first { + @include border-left-radius( $kendo-card-border-radius ); + } + .k-card.k-last { + @include border-right-radius( $kendo-card-border-radius ); + } + .k-card.k-only { + @include border-radius( $kendo-card-border-radius ); + } + } + + // Card with callout + .k-card-with-callout { + overflow: visible; + } + + + // Card callout + .k-card-callout { + margin: 0; + width: $kendo-card-callout-width; + height: $kendo-card-callout-height; + border-width: $kendo-card-border-width; + border-style: solid; + box-sizing: border-box; + position: absolute; + } + + .k-card-callout.k-callout-n { + top: 0; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + } + .k-card-callout.k-callout-e { + top: 50%; + right: 0; + transform: translate(50%, -50%) rotate(-45deg); + } + .k-card-callout.k-callout-s { + bottom: 0; + left: 50%; + transform: translate(-50%, 50%) rotate(45deg); + } + .k-card-callout.k-callout-w { + top: 50%; + left: 0; + transform: translate(-50%, -50%) rotate(45deg); + } + + + // Solid card + .k-card-solid { + @include box-shadow( $kendo-card-shadow ); + } + + + // Flat card + .k-card-flat { + @include box-shadow( none ); + } + +} + + +@mixin kendo-card--layout() { + @include kendo-card--layout-base(); +} diff --git a/packages/core/scss/components/card/_theme.scss b/packages/core/scss/components/card/_theme.scss new file mode 100644 index 00000000000..58322523202 --- /dev/null +++ b/packages/core/scss/components/card/_theme.scss @@ -0,0 +1,111 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-card--theme-base() { + + // Card + .k-card { + @include fill( + $kendo-card-text, + $kendo-card-bg, + $kendo-card-border + ); + @include box-shadow( $kendo-card-shadow ); + + .k-card-inner { + background-color: inherit; + border-color: inherit; + } + + &:focus, + &.k-focus { + @include fill( + $kendo-card-focus-text, + $kendo-card-focus-bg, + $kendo-card-focus-border + ); + @include focus-indicator( $kendo-card-focus-shadow ); + } + + &.k-selected { + @include box-shadow( $kendo-card-focus-shadow ); + } + } + + + // Card actions + .k-card-actions { + border-color: $kendo-card-border; + } + + + // Header + .k-card-header { + @include fill( $kendo-card-header-text, $kendo-card-header-bg, $kendo-card-header-border ); + } + + + // Footer + .k-card-footer { + @include fill( $kendo-card-footer-text, $kendo-card-footer-bg, $kendo-card-footer-border ); + } + + + // Separator + .k-card-separator, + .k-card .k-separator { + border-color: $kendo-card-border; + } + + + // TODO: refactor + .k-card-subtitle { + color: $kendo-card-subtitle-text; + } + + + // Card theme colors + @each $name, $color in $kendo-theme-colors { + .k-card-#{$name} { + background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10)); + color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6)); + border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9)); + + .k-card-subtitle { + color: inherit; + } + } + } + + + .k-card-wrap { + &:focus, + &.k-focus, + &.k-selected { + > .k-card { + @include focus-indicator( $kendo-card-focus-shadow ); + } + } + } + + + // Card callout + .k-card-callout { + @include fill( + $bg: inherit, + $border: inherit + ); + + @include box-shadow( inherit ); + } + +} + + +@mixin kendo-card--theme() { + @include kendo-card--theme-base(); +} diff --git a/packages/core/scss/components/card/_variables.scss b/packages/core/scss/components/card/_variables.scss new file mode 100644 index 00000000000..8fcf570e57d --- /dev/null +++ b/packages/core/scss/components/card/_variables.scss @@ -0,0 +1,182 @@ +// Card + +/// The horizontal padding of the Card. +/// @group card +$kendo-card-padding-x: null !default; +/// The vertical padding of the Card. +/// @group card +$kendo-card-padding-y: null !default; +/// The width of the border around the Card. +/// @group card +$kendo-card-border-width: null !default; +/// The border radius of the Card. +/// @group card +$kendo-card-border-radius: null !default; +/// The inner border radius of the Card. +/// @group card +$kendo-card-inner-border-radius: null !default; +/// The font family of the Card. +/// @group card +$kendo-card-font-family: null !default; +/// The font size of the Card. +/// @group card +$kendo-card-font-size: null !default; +/// The line height of the Card. +/// @group card +$kendo-card-line-height: null !default; + +/// The spacing between the Cards in the Card deck. +/// @group card +$kendo-card-deck-gap: null !default; + +/// The background color of the Card. +/// @group card +$kendo-card-bg: null !default; +/// The text color of the Card. +/// @group card +$kendo-card-text: null !default; +/// The border color of the Card. +/// @group card +$kendo-card-border: null !default; +/// The shadow of the Card. +/// @group card +$kendo-card-shadow: null !default; + +/// The background color of the focused Card. +/// @group card +$kendo-card-focus-bg: null !default; +/// The text color of the focused Card. +/// @group card +$kendo-card-focus-text: null !default; +/// The border color of the focused Card. +/// @group card +$kendo-card-focus-border: null !default; + +// TODO: double-check: the default theme is not supposed to elevate the Card on focus + +/// The shadow of the focused Card. +/// @group card +$kendo-card-focus-shadow: null !default; + +/// The horizontal padding of the Card header. +/// @group card +$kendo-card-header-padding-x: null !default; +/// The vertical padding of the Card header. +/// @group card +$kendo-card-header-padding-y: null !default; +/// The bottom border width of the Card header. +/// @group card +$kendo-card-header-border-width: null !default; +/// The background color of the Card header. +/// @group card +$kendo-card-header-bg: null !default; +/// The text color of the Card header. +/// @group card +$kendo-card-header-text: null !default; +/// The border color of the Card header. +/// @group card +$kendo-card-header-border: null !default; + +/// The horizontal padding of the Card body. +/// @group card +$kendo-card-body-padding-x: null !default; +/// The vertical padding of the Card body. +/// @group card +$kendo-card-body-padding-y: null !default; + +/// The horizontal padding of the Card footer. +/// @group card +$kendo-card-footer-padding-x: null !default; +/// The vertical padding of the Card footer. +/// @group card +$kendo-card-footer-padding-y: null !default; +/// The top border width of the Card footer. +/// @group card +$kendo-card-footer-border-width: null !default; +/// The background color of the Card footer. +/// @group card +$kendo-card-footer-bg: null !default; +/// The text color of the Card footer. +/// @group card +$kendo-card-footer-text: null !default; +/// The border color of the Card footer. +/// @group card +$kendo-card-footer-border: null !default; + +/// The bottom margin of the Card title. +/// @group card +$kendo-card-title-margin-bottom: null !default; +/// The font size of the Card title. +/// @group card +$kendo-card-title-font-size: null !default; +/// The font family of the Card title. +/// @group card +$kendo-card-title-font-family: null !default; +/// The line height of the Card title. +/// @group card +$kendo-card-title-line-height: null !default; +/// The font weight of the Card title. +/// @group card +$kendo-card-title-font-weight: null !default; +/// The letter spacing of the Card title. +/// @group card +$kendo-card-title-letter-spacing: null !default; + +/// The bottom margin of the Card subtitle. +/// @group card +$kendo-card-subtitle-margin-bottom: null !default; +/// The font size of the Card subtitle. +/// @group card +$kendo-card-subtitle-font-size: null !default; +/// The font family of the Card subtitle. +/// @group card +$kendo-card-subtitle-font-family: null !default; +/// The line height of the Card subtitle. +/// @group card +$kendo-card-subtitle-line-height: null !default; +/// The font weight of the Card subtitle. +/// @group card +$kendo-card-subtitle-font-weight: null !default; +/// The letter spacing of the Card subtitle. +/// @group card +$kendo-card-subtitle-letter-spacing: null !default; +/// The text color of the Card subtitle. +/// @group card +$kendo-card-subtitle-text: null !default; + +/// The maximum width of the Card image. +/// @group card +$kendo-card-img-max-width: null !default; +/// The size of the Avatar in the Card. +/// @group card +$kendo-card-avatar-size: null !default; +/// The spacing between the Avatar and the text in the Card. +/// @group card +$kendo-card-avatar-spacing: null !default; + +/// The horizontal padding of the Card actions. +/// @group card +$kendo-card-actions-padding-x: null !default; +/// The vertical padding of the Card actions. +/// @group card +$kendo-card-actions-padding-y: null !default; +/// The top border width of the Card actions. +/// @group card +$kendo-card-actions-border-width: null !default; +/// The spacing between the Card actions. +/// @group card +$kendo-card-actions-gap: null !default; + +/// The border radius of the scroll button in the Card deck. +/// @group card +$kendo-card-deck-scroll-button-radius: null !default; +/// The border radius of the scroll button in the Card deck. +/// @group card +$kendo-card-deck-scroll-button-offset: null !default; + +/// The width of the Card callout. +/// @group card +$kendo-card-callout-width: null !default; +/// The height of the Card callout. +/// @group card +$kendo-card-callout-height: null !default; diff --git a/packages/core/scss/components/chart-wizard/_index.scss b/packages/core/scss/components/chart-wizard/_index.scss new file mode 100644 index 00000000000..d406b47e402 --- /dev/null +++ b/packages/core/scss/components/chart-wizard/_index.scss @@ -0,0 +1,37 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../window/_index.scss" as *; +@use "../splitter/_index.scss" as *; +@use "../dataviz/_index.scss" as *; +@use "../expansion-panel/_index.scss" as *; +@use "../grid/_index.scss" as *; +@use "../tabstrip/_index.scss" as *; +@use "../listview/_index.scss" as *; +@use "../forms/_index.scss" as *; +@use "../combobox/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-chart-wizard--styles() { + @include import-once( "chart-wizard" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-window--styles(); + @include kendo-splitter--styles(); + @include kendo-dataviz--styles(); + @include kendo-expander--styles(); + @include kendo-grid--styles(); + @include kendo-tabstrip--styles(); + @include kendo-listview--styles(); + @include kendo-form--styles(); + @include kendo-combobox--styles(); + @include kendo-chart-wizard--layout(); + @include kendo-chart-wizard--theme(); + } +} diff --git a/packages/core/scss/components/chart-wizard/_layout.scss b/packages/core/scss/components/chart-wizard/_layout.scss new file mode 100644 index 00000000000..834f6533332 --- /dev/null +++ b/packages/core/scss/components/chart-wizard/_layout.scss @@ -0,0 +1,46 @@ +@use "./variables.scss" as *; + +@mixin kendo-chart-wizard--layout-base() { + // Chart wizard + .k-chart-wizard { + .k-icon-text-wrapper { + display: flex; + align-items: center; + gap: $kendo-chart-wizard-icon-text-gap; + } + + .k-icon-background-area { + display: flex; + padding: $kendo-chart-wizard-icon-area-padding; + border-radius: $kendo-chart-wizard-icon-area-border-radius; + } + } + + .k-chart-types-wrapper { + display: flex; + flex-direction: column; + gap: $kendo-chart-wizard-chart-type-spacing; + } + + .k-chart-wizard-splitter { + height: 100%; + + .k-tabstrip { + width: 100%; + height: 100%; + } + } + + .k-chart-wizard-preview-pane { + padding: $kendo-chart-wizard-preview-pane-padding; + } + + .k-chart-wizard-property-pane { + padding: $kendo-chart-wizard-property-pane-padding; + } +} + + +@mixin kendo-chart-wizard--layout() { + @include kendo-chart-wizard--layout-base(); +} diff --git a/packages/core/scss/components/chart-wizard/_theme.scss b/packages/core/scss/components/chart-wizard/_theme.scss new file mode 100644 index 00000000000..20517f28445 --- /dev/null +++ b/packages/core/scss/components/chart-wizard/_theme.scss @@ -0,0 +1,37 @@ +@use "./variables.scss" as *; + +@mixin kendo-chart-wizard--theme-base() { + .k-chart-wizard { + .k-icon-text-wrapper { + &.k-selected { + color: $kendo-chart-wizard-chart-type-selected-color; + + .k-icon-background-area { + box-shadow: $kendo-chart-wizard-icon-area-selected-shadow; + } + } + + &:hover, + &.k-hover { + cursor: pointer; + } + + &:focus, + &.k-focus { + .k-icon-background-area { + box-shadow: $kendo-chart-wizard-icon-area-focus-shadow; + } + } + } + + .k-icon-background-area { + color: $kendo-chart-wizard-icon-area-color; + background-color: $kendo-chart-wizard-icon-area-bg; + } + } +} + + +@mixin kendo-chart-wizard--theme() { + @include kendo-chart-wizard--theme-base(); +} diff --git a/packages/core/scss/components/chart-wizard/_variables.scss b/packages/core/scss/components/chart-wizard/_variables.scss new file mode 100644 index 00000000000..95be4b83d45 --- /dev/null +++ b/packages/core/scss/components/chart-wizard/_variables.scss @@ -0,0 +1,38 @@ +// Chart wizard + +/// The color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-color: null !default; +/// The background color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-bg: null !default; +/// The border radius of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-border-radius: null !default; +/// The padding of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-padding: null !default; +/// The box shadow of the focused area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-focus-shadow: null !default; +/// The box shadow of the selected area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-selected-shadow: null !default; + +/// The color of the selected chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-selected-color: null !default; + +/// The padding of the preview pane. +/// @group chart-wizard +$kendo-chart-wizard-preview-pane-padding: null !default; +/// The padding of the property pane. +/// @group chart-wizard +$kendo-chart-wizard-property-pane-padding: null !default; + +/// The gap between the chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-spacing: null !default; +/// The gap between the icon area and its text. +/// @group chart-wizard +$kendo-chart-wizard-icon-text-gap: null !default; diff --git a/packages/core/scss/components/chat/_index.scss b/packages/core/scss/components/chat/_index.scss new file mode 100644 index 00000000000..6c0bfa1018c --- /dev/null +++ b/packages/core/scss/components/chat/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../card/_index.scss" as *; +@use "../toolbar/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-chat--styles() { + @include import-once( "chat" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-card--styles(); + @include kendo-icon--styles(); + @include kendo-toolbar--styles(); + @include kendo-chat--layout(); + @include kendo-chat--theme(); + } +} diff --git a/packages/core/scss/components/chat/_layout.scss b/packages/core/scss/components/chat/_layout.scss new file mode 100644 index 00000000000..a480f7153cd --- /dev/null +++ b/packages/core/scss/components/chat/_layout.scss @@ -0,0 +1,477 @@ +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../toolbar/_variables.scss" as *; + +@mixin kendo-chat--layout-base() { + + // Chat + .k-chat { + margin: auto; + max-width: $kendo-chat-width; + height: $kendo-chat-height; + max-height: 100%; + border-width: $kendo-chat-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-chat-font-family; + font-size: $kendo-chat-font-size; + line-height: $kendo-chat-line-height; + display: flex; + flex-direction: column; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + + // Message list + .k-message-list { + display: flex; + flex: 1 1 auto; + flex-direction: column; + align-items: flex-start; + overflow-x: hidden; + overflow-y: auto; + scroll-behavior: smooth; + } + .k-message-list-content { + padding-block: $kendo-chat-message-list-padding-y; + padding-inline: $kendo-chat-message-list-padding-x; + width: 100%; + box-sizing: border-box; + position: relative; + flex: 0 0 auto; + display: flex; + flex-direction: column; + align-items: flex-start; + overflow: hidden; + + > * + * { + margin-top: $kendo-chat-message-list-spacing; + } + } + + // Message group + .k-message-group { + max-width: 80%; + background: none; + box-sizing: border-box; + display: flex; + flex-shrink: 0; + flex-direction: column; + position: relative; + } + .k-message-group:not(.k-alt) { + align-items: flex-start; + text-align: start; + + .k-message-time { + margin-inline-start: $kendo-chat-item-spacing-x; + inset-inline-start: 100%; + } + .k-message-status { + inset-inline-start: 0; + } + + .k-first .k-chat-bubble, + .k-only .k-chat-bubble { + border-bottom-left-radius: $kendo-chat-bubble-border-radius-sm; + } + .k-middle .k-chat-bubble, + .k-last .k-chat-bubble { + @include border-left-radius( $kendo-chat-bubble-border-radius-sm ); + } + } + .k-message-group.k-alt { + align-self: flex-end; + align-items: flex-end; + text-align: end; + + .k-message-time { + margin-inline-end: $kendo-chat-item-spacing-x; + inset-inline-end: 100%; + } + .k-message-status { + inset-inline-end: 0; + } + + .k-first .k-chat-bubble, + .k-only .k-chat-bubble { + border-bottom-right-radius: $kendo-chat-bubble-border-radius-sm; + } + .k-middle .k-chat-bubble, + .k-last .k-chat-bubble { + @include border-right-radius( $kendo-chat-bubble-border-radius-sm ); + } + } + + + // Message + .k-message { + max-width: 100%; + margin: $kendo-chat-bubble-spacing 0 0; + position: relative; + transition: margin .2s ease-in-out; + outline: none; + } + + + // Message meta + .k-message-time, + .k-message-status { + font-size: $kendo-chat-message-meta-font-size; + line-height: $kendo-chat-message-meta-line-height; + white-space: nowrap; + pointer-events: none; + position: absolute; + } + .k-message-time { + opacity: 0; + top: 50%; + transform: translateY(-50%); + transition: opacity .2s ease-in-out; + } + .k-message-status { + margin-top: $kendo-chat-bubble-spacing; + height: 0; + overflow: hidden; + top: 100%; + transition: height .2s ease-in-out; + } + + + // Bubble + .k-chat-bubble { + @include border-radius( $kendo-chat-bubble-border-radius ); + padding-block: $kendo-chat-bubble-padding-y; + padding-inline: $kendo-chat-bubble-padding-x; + border-width: 1px; + border-style: solid; + line-height: $kendo-chat-bubble-line-height; + word-wrap: break-word; + white-space: pre-wrap; + + a { + color: inherit; + text-decoration: underline; + } + } + + + // Message states + .k-message.k-selected { + margin-bottom: $kendo-chat-item-spacing-y; + border: 0; + color: inherit; + background: none; + + .k-message-time { opacity: 1; } + .k-message-status { height: 1.2em; } + } + .k-message-error, + .k-message-sending { + margin-bottom: $kendo-chat-item-spacing-y; + + .k-message-status { height: 1.2em; } + } + + // Avatar + .k-avatar { + margin: 0; + position: absolute; + + @at-root .k-message-group:not(.k-alt) > .k-avatar { + inset-inline-start: 0; + bottom: 0; + } + @at-root .k-message-group.k-alt > .k-avatar { + inset-inline-end: 0; + bottom: 0; + } + } + .k-avatars { + .k-message-group:not(.k-no-avatar) { + padding-inline-start: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} ); + } + .k-message-group.k-alt:not(.k-no-avatar) { + padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} ); + } + } + } + + // Author + .k-author { + margin: 0; + font-size: $kendo-chat-author-font-size; + line-height: $kendo-chat-author-line-height; + } + .k-chat .k-author { + margin: 0; // Duplicate styles because of typography module + } + + + // Timestamp + .k-chat .k-timestamp { + font-size: $kendo-chat-timestamp-font-size; + line-height: $kendo-chat-timestamp-line-height; + text-transform: $kendo-chat-timestamp-transform; + text-align: center; + align-self: stretch; + } + + + // Quick reply + .k-quick-replies { + display: block; + max-width: 100%; // IE fix + } + .k-quick-reply { + @include border-radius( 100px ); + margin-inline-end: $kendo-chat-quick-reply-spacing; + margin-block-end: calc( #{$kendo-chat-quick-reply-spacing} / 2 ); + padding-block: $kendo-chat-quick-reply-padding-y; + padding-inline: $kendo-chat-quick-reply-padding-x; + border-width: 1px; + border-style: solid; + line-height: $kendo-chat-quick-reply-line-height; + cursor: pointer; + user-select: none; + display: inline-block; + flex: 0 0 auto; + transition-property: color, background-color, border-color; + transition-duration: .2s; + transition-timing-function: ease-in-out; + outline: none; + } + + + // Scrollable quick replies + .k-scrollable-quick-replies { + margin-inline-start: -$kendo-chat-message-list-padding-y; + margin-inline-end: -$kendo-chat-message-list-padding-y; + padding-inline-start: $kendo-chat-message-list-padding-y; + padding-inline-end: $kendo-chat-message-list-padding-y; + display: flex; + flex-flow: row nowrap; + flex: 0 0 auto; + overflow-x: auto; + overflow-y: hidden; + + &::-webkit-scrollbar { + display: none; + } + + .k-quick-reply { + margin: 0; + } + .k-quick-reply + .k-quick-reply { + margin-inline-start: $kendo-chat-quick-reply-spacing; + } + } + + + // Message box + .k-message-box { + width: 100%; + height: auto; + box-sizing: border-box; + border-width: 1px 0 0; + border-style: solid; + border-color: inherit !important; // stylelint-disable-line declaration-no-important + border-radius: 0 !important; // stylelint-disable-line declaration-no-important + flex: none; + display: flex; + flex-flow: row nowrap; + align-items: center; + + &:focus, + &.k-focus, + &:focus-within { + outline: 0; + box-shadow: none; + } + + // Input + .k-input {} + + .k-button { + border-width: 0; + flex-shrink: 0; + + svg { + width: 20px; + height: 20px; + fill: currentColor; + display: inline-block; + } + } + } + + .k-rtl, + [dir="rtl"] { + .k-message-box { + .k-button { + transform: scaleX(-1); + } + } + } + + + // Card list + .k-chat .k-card-list { + margin: $kendo-chat-bubble-spacing 0 0; + } + + .k-message-group.k-alt + .k-card-list, + .k-message-group.k-alt + kendo-chat-message-attachments.k-card-list { + align-self: flex-end; + } + + .k-chat .k-card-deck { + max-width: calc(100% + calc( #{$kendo-chat-message-list-padding-y} * 2 )); // prevent overflowing in the parent element + box-sizing: border-box; + margin-inline-start: calc( #{$kendo-chat-message-list-padding-y} * -1 ); + margin-inline-end: calc( #{$kendo-chat-message-list-padding-y} * -1 ); + padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x; + overflow: hidden; + overflow-x: auto; + scroll-behavior: smooth; + } + .k-chat .k-card-deck .k-card { + width: 200px; + } + + .k-chat .k-card-deck-scrollwrap { + margin-right: calc( #{$kendo-chat-message-list-padding-y} * -1 ); + margin-left: calc( #{$kendo-chat-message-list-padding-y} * -1 ); + padding-left: $kendo-chat-message-list-padding-y; + padding-right: $kendo-chat-message-list-padding-y; + } + + .k-chat .k-card-deck-scrollwrap > .k-card-deck { + // hide scrollbar in chat + $scrollbar-size: 20px; + + margin-bottom: -$scrollbar-size; + padding-bottom: $scrollbar-size; + } + + // Deck + .k-chat .k-card-deck .k-card-wrap { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + flex: 0 0 auto; + padding-bottom: 5px; // accommodate for focused box shadow on OSX + + .k-card { + flex: 0 0 auto; + } + + &.k-selected { + background: none; + } + } + + + // Local variables + $kendo-chat-typing-indicator-dot-size: 8px !default; + $kendo-chat-typing-indicator-dot-spacing: 5px !default; + + // Typing indicator + .k-typing-indicator { + padding: 0; + border-radius: 50px; + display: inline-flex; + flex-flow: row nowrap; + + span { + width: $kendo-chat-typing-indicator-dot-size; + height: $kendo-chat-typing-indicator-dot-size; + border-radius: 50%; + flex: 0 0 $kendo-chat-typing-indicator-dot-size; + background-color: currentColor; + opacity: .4; + @for $i from 1 through 3 { + &:nth-of-type(#{$i}) { + animation: 1s k-animation-blink infinite ($i * .3333s); + } + } + } + span + span { + margin-left: $kendo-chat-typing-indicator-dot-spacing; + } + + @keyframes k-animation-blink { + 50% { + opacity: 1; + } + } + + } + + + // Chat toolbar + .k-chat-toolbar, + .k-chat .k-toolbar-box { + padding-block: $kendo-chat-toolbar-padding-y; + padding-inline: $kendo-chat-toolbar-padding-x; + width: 100%; + border-width: 1px 0 0; + box-sizing: border-box; + flex: none; + overflow: hidden; + position: relative; + gap: $kendo-toolbar-md-spacing; + + &::before { + display: none; + } + + .k-button-list { + // Needed for native scrolling. Will uncoment when it's implemented. + // margin-bottom: -20px; + // padding-bottom: 20px; + display: flex; + flex-flow: row nowrap; + overflow: hidden; + // overflow-x: auto; + scroll-behavior: smooth; + } + + .k-button { + flex: none; + } + + + .k-scroll-button { + // IMPORTANT: if we don't set padding, the browser will set for us + padding: 0 k-spacing(1); + height: 100%; + aspect-ratio: auto; + position: absolute; + z-index: 2; + top: 0; + + .k-button-icon { + min-width: auto; + min-height: auto; + } + } + .k-scroll-button-left { + left: 0; + } + .k-scroll-button-right { + right: 0; + } + + + } +} + + +@mixin kendo-chat--layout() { + @include kendo-chat--layout-base(); +} diff --git a/packages/core/scss/components/chat/_theme.scss b/packages/core/scss/components/chat/_theme.scss new file mode 100644 index 00000000000..9f34e851db6 --- /dev/null +++ b/packages/core/scss/components/chat/_theme.scss @@ -0,0 +1,108 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../motion/index.import.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-chat--theme-base() { + + // Chat + .k-chat { + @include fill( + $kendo-chat-text, + $kendo-chat-bg, + $kendo-chat-border + ); + + + // Message meta + .k-timestamp { + @include fill( + $kendo-chat-timestamp-text, + $kendo-chat-timestamp-bg + ); + } + .k-author { + font-weight: bold; + } + + + // Bubbles + .k-chat-bubble { + @include fill( + $kendo-chat-bubble-text, + $kendo-chat-bubble-bg, + $kendo-chat-bubble-border + ); + @include box-shadow( $kendo-chat-bubble-shadow ); + transition: $kendo-transition; + order: -1; + + a { color: $kendo-link-text; } + a:hover { color: $kendo-link-hover-text; } + } + .k-chat-bubble:hover { + @include box-shadow( $kendo-chat-bubble-hover-shadow ); + } + .k-selected .k-chat-bubble { + @include box-shadow( $kendo-chat-bubble-selected-shadow ); + } + + .k-alt .k-chat-bubble { + @include fill( + $kendo-chat-alt-bubble-text, + $kendo-chat-alt-bubble-bg, + $kendo-chat-alt-bubble-border + ); + @include box-shadow( $kendo-chat-alt-bubble-shadow ); + } + .k-alt .k-chat-bubble:hover { + @include box-shadow( $kendo-chat-alt-bubble-hover-shadow ); + } + .k-alt .k-selected .k-chat-bubble { + @include box-shadow( $kendo-chat-alt-bubble-selected-shadow ); + } + + + // Quick replies + .k-quick-reply { + @include fill( + $kendo-chat-quick-reply-text, + $kendo-chat-quick-reply-bg, + $kendo-chat-quick-reply-border + ); + + &:hover, + &.k-hover { + @include fill( + $kendo-chat-quick-reply-hover-text, + $kendo-chat-quick-reply-hover-bg, + $kendo-chat-quick-reply-hover-border + ); + } + + &:focus, + &.k-focus { + @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), rgba( $kendo-color-primary, $kendo-chat-quick-reply-shadow-opacity )), true, true ); + } + } + } + + + // Toolbar + .k-chat-toolbar, + .k-chat .k-toolbar-box { + @include fill( + $kendo-chat-toolbar-text, + $kendo-chat-toolbar-bg, + $kendo-chat-toolbar-border + ); + } + +} + + +@mixin kendo-chat--theme() { + @include kendo-chat--theme-base(); +} diff --git a/packages/core/scss/components/chat/_variables.scss b/packages/core/scss/components/chat/_variables.scss new file mode 100644 index 00000000000..c9ab9565cab --- /dev/null +++ b/packages/core/scss/components/chat/_variables.scss @@ -0,0 +1,211 @@ +// Chat + +/// The horizontal padding of the Chat. +/// @group chat +$kendo-chat-padding-x: null !default; +/// The vertical padding of the Chat. +/// @group chat +$kendo-chat-padding-y: null !default; +/// The width of the Chat. +/// @group chat +$kendo-chat-width: null !default; +/// The height of the Chat. +/// @group chat +$kendo-chat-height: null !default; +/// The border width of the Chat. +/// @group chat +$kendo-chat-border-width: null !default; +/// The font family of the Chat. +/// @group chat +$kendo-chat-font-family: null !default; +/// The font size of the Chat. +/// @group chat +$kendo-chat-font-size: null !default; +/// The line height of the Chat. +/// @group chat +$kendo-chat-line-height: null !default; + +/// The horizontal spacing between the items of the Chat. +/// @group chat +$kendo-chat-item-spacing-x: null !default; +/// The vertical spacing between the items of the Chat. +/// @group chat +$kendo-chat-item-spacing-y: null !default; + +/// The horizontal padding of the Chat message list. +/// @group chat +$kendo-chat-message-list-padding-x: null !default; +/// The vertical padding of the Chat message list. +/// @group chat +$kendo-chat-message-list-padding-y: null !default; +/// The spacing of the Chat message list. +/// @group chat +$kendo-chat-message-list-spacing: null !default; + +/// The font size of the Chat timestamp. +/// @group chat +$kendo-chat-timestamp-font-size: null !default; +/// The line height of the Chat timestamp. +/// @group chat +$kendo-chat-timestamp-line-height: null !default; +/// The text transform of the Chat timestamp. +/// @group chat +$kendo-chat-timestamp-transform: null !default; +/// The text color of the Chat timestamp. +/// @group chat +$kendo-chat-timestamp-text: null !default; +/// The background color of the Chat timestamp. +/// @group chat +$kendo-chat-timestamp-bg: null !default; + +/// The font size of the Chat message meta text. +/// @group chat +$kendo-chat-message-meta-font-size: null !default; +/// The line height of the Chat message meta text. +/// @group chat +$kendo-chat-message-meta-line-height: null !default; + +/// The font size of the Chat author text. +/// @group chat +$kendo-chat-author-font-size: null !default; +/// The line height of the Chat author text. +/// @group chat +$kendo-chat-author-line-height: null !default; + +/// The horizontal padding of the Chat bubble message. +/// @group chat +$kendo-chat-bubble-padding-x: null !default; +/// The vertical padding of the Chat bubble message. +/// @group chat +$kendo-chat-bubble-padding-y: null !default; +/// The spacing of the Chat bubble message. +/// @group chat +$kendo-chat-bubble-spacing: null !default; +/// The line height of the Chat bubble message. +/// @group chat +$kendo-chat-bubble-line-height: null !default; + +/// The border radius of the Chat bubble message. +/// @group chat +$kendo-chat-bubble-border-radius: null !default; +/// The border radius of the Chat small bubble message +/// @group chat +$kendo-chat-bubble-border-radius-sm: null !default; + +/// The size of the Chat Avatar. +/// @group chat +$kendo-chat-avatar-size: null !default; +/// The spacing of the Chat Avatar. +/// @group chat +$kendo-chat-avatar-spacing: null !default; + +/// The horizontal padding of the Chat Toolbar. +/// @group chat +$kendo-chat-toolbar-padding-x: null !default; +/// The vertical padding of the Chat Toolbar. +/// @group chat +$kendo-chat-toolbar-padding-y: null !default; +/// The spacing of the Chat Toolbar. +/// @group chat +$kendo-chat-toolbar-spacing: null !default; +/// The background color of the Chat Toolbar. +/// @group chat +$kendo-chat-toolbar-bg: null !default; +/// The text color of the Chat Toolbar. +/// @group chat +$kendo-chat-toolbar-text: null !default; +/// The border color of the Chat Toolbar. +/// @group chat +$kendo-chat-toolbar-border: null !default; + +/// The horizontal padding of the Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-padding-x: null !default; +/// The vertical padding of the Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-padding-y: null !default; +/// The spacing of the Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-spacing: null !default; +/// The line height of the Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-line-height: null !default; + + +/// The background color of the Chat. +/// @group chat +$kendo-chat-bg: null !default; +/// The text color of the Chat. +/// @group chat +$kendo-chat-text: null !default; +/// The border color of the Chat. +/// @group chat +$kendo-chat-border: null !default; + +/// The background color of the Chat bubble. +/// @group chat +$kendo-chat-bubble-bg: null !default; +/// The text color of the Chat bubble. +/// @group chat +$kendo-chat-bubble-text: null !default; +/// The border color of the Chat bubble. +/// @group chat +$kendo-chat-bubble-border: null !default; +/// The box shadow of the Chat bubble. +/// @group chat +$kendo-chat-bubble-shadow: null !default; +/// The shadow of the hovered Chat bubble. +/// @group chat +$kendo-chat-bubble-hover-shadow: null !default; +/// The shadow of the selected Chat bubble. +/// @group chat +$kendo-chat-bubble-selected-shadow: null !default; + +/// The background color of the Chat alt bubble. +/// @group chat +$kendo-chat-alt-bubble-bg: null !default; +/// The text color of the Chat alt bubble. +/// @group chat +$kendo-chat-alt-bubble-text: null !default; +/// The border color of the Chat alt bubble. +/// @group chat +$kendo-chat-alt-bubble-border: null !default; +/// The shadow of the Chat alt bubble. +/// @group chat +$kendo-chat-alt-bubble-shadow: null !default; +/// The shadow of the hovered Chat alt bubble. +/// @group chat +$kendo-chat-alt-bubble-hover-shadow: null !default; +/// The shadow of the selected Chat alt bubble. +/// @group chat +$kendo-chat-alt-bubble-selected-shadow: null !default; + +/// The background color of the Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-bg: null !default; +/// The text color of the Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-text: null !default; +/// The border color of the Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-border: null !default; + +/// The background color of the hovered Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-hover-bg: null !default; +/// The text color of the hovered Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-hover-text: null !default; +/// The border color of the hovered Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-hover-border: null !default; + +/// The shadow blur of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-blur: null !default; +/// The shadow spread of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-spread: null !default; +/// The shadow opacity of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-opacity: null !default; diff --git a/packages/core/scss/components/checkbox/_index.scss b/packages/core/scss/components/checkbox/_index.scss new file mode 100644 index 00000000000..05f4ffd2381 --- /dev/null +++ b/packages/core/scss/components/checkbox/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-checkbox--styles() { + @include import-once( "checkbox" ) { + @include core-styles(); + @include kendo-checkbox--layout(); + @include kendo-checkbox--theme(); + } +} diff --git a/packages/core/scss/components/checkbox/_layout.scss b/packages/core/scss/components/checkbox/_layout.scss new file mode 100644 index 00000000000..aa70c85c008 --- /dev/null +++ b/packages/core/scss/components/checkbox/_layout.scss @@ -0,0 +1,237 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-checkbox--layout-base() { + + // Checkbox + .k-checkbox { + margin: 0; + padding: 0; + line-height: initial; + border-width: $kendo-checkbox-border-width; + border-style: solid; + outline: 0; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + flex: none; + vertical-align: middle; + position: relative; + cursor: pointer; + -webkit-appearance: none; + } + + + // Checkbox indicator + .k-checkbox::before { + @if $kendo-checkbox-indicator-type == "image" { + content: ""; + display: block; + width: 100%; + height: 100%; + mask-repeat: no-repeat; + } + @if $kendo-checkbox-indicator-type == "glyph" { + content: $kendo-checkbox-checked-glyph; + width: 1em; + height: 1em; + font-family: $kendo-checkbox-glyph-font-family; + line-height: 1; + transform: translate(-50%, -50%) scale(0); + overflow: hidden; + position: absolute; + top: 50%; + left: 50%; + } + } + + // Checked state + .k-checkbox:checked, + .k-checkbox.k-checked { + @if $kendo-checkbox-indicator-type == "image" { + &::before { + background-color: currentColor; + mask-image: $kendo-checkbox-checked-image; + } + } + + @if $kendo-checkbox-indicator-type == "glyph" { + &::before { + transform: translate(-50%, -50%) scale(1); + } + } + } + + + // Indeterminate state + .k-checkbox:indeterminate, + .k-checkbox.k-indeterminate { + @if $kendo-checkbox-indicator-type == "image" { + &::before { + background-color: currentColor; + mask-image: $kendo-checkbox-indeterminate-image; + } + } + + @if $kendo-checkbox-indicator-type == "glyph" { + &::before { + content: $kendo-checkbox-indeterminate-glyph; + transform: scale(1) translate(-50%, -50%); + } + } + } + + + // Disabled state + .k-checkbox:disabled, + .k-checkbox.k-disabled { + @include disabled( $kendo-disabled-styling... ); + } + + + // Checkbox wrap + .k-checkbox-wrap { + flex: none; + display: inline-flex; + flex-flow: row nowrap; + gap: 0; + align-items: center; + align-self: flex-start; + vertical-align: middle; + position: relative; + + &::before { + content: "\200b"; + width: 0px; + overflow: hidden; + flex: none; + display: inline-block; + vertical-align: top; + } + } + + + // Checkbox label + .k-checkbox-label { + margin: 0; + padding: 0; + display: inline-flex; + align-items: flex-start; + gap: $kendo-checkbox-label-margin-x; + vertical-align: middle; + position: relative; + cursor: pointer; + + .k-ripple { + // Hide ripple temporarily + visibility: hidden !important; // stylelint-disable-line declaration-no-important + } + } + .k-checkbox + .k-label, + .k-checkbox-wrap + .k-label, + .k-checkbox + .k-checkbox-label, + .k-checkbox-wrap + .k-checkbox-label { + display: inline; + margin-inline-start: $kendo-checkbox-label-margin-x; + } + + + // Empty label + .k-checkbox-label:empty { + display: none !important; // stylelint-disable-line declaration-no-important + } + .k-checkbox-label.k-no-text { + min-width: 1px; + } + + + // Checkbox list + .k-checkbox-list { + margin: 0; + padding: 0; + display: flex; + flex-flow: column nowrap; + gap: 0; + list-style: none; + } + .k-checkbox-item, + .k-checkbox-list-item { + padding-block: $kendo-checkbox-list-item-padding-y; + padding-inline: $kendo-checkbox-list-item-padding-x; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + gap: k-spacing(1); + + .k-checkbox-label { + margin: 0; + } + } + .k-checkbox-list-horizontal, + .k-checkbox-list.k-list-horizontal { + display: flex; + flex-flow: row wrap; + gap: $kendo-checkbox-list-spacing; + } + + + // Ripple + .k-ripple-container { + .k-checkbox::after { + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + border-radius: 100%; + z-index: -1; + transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); + transform: translate(-50%, -50%) scale(0); + transform-origin: center center; + } + + .k-checkbox:focus, + .k-checkbox.k-focus { + box-shadow: none !important; // stylelint-disable-line declaration-no-important + } + + .k-checkbox:disabled::after, + .k-checkbox.k-disabled::after { + display: none; + } + } + + + // Checkbox size + @each $size, $size-props in $kendo-checkbox-sizes { + $_size: map.get( $size-props, size ); + $_glyph-size: map.get( $size-props, glyph-size ); + $_ripple-size: map.get( $size-props, ripple-size ); + + .k-checkbox-#{$size} { + width: $_size; + height: $_size; + + &::before { + font-size: $_glyph-size; + } + } + .k-ripple-container { + .k-checkbox-#{$size}::after { + width: $_ripple-size; + height: $_ripple-size; + } + } + } + +} + + +@mixin kendo-checkbox--layout() { + @include kendo-checkbox--layout-base(); +} diff --git a/packages/core/scss/components/checkbox/_theme.scss b/packages/core/scss/components/checkbox/_theme.scss new file mode 100644 index 00000000000..b887fdcdcc8 --- /dev/null +++ b/packages/core/scss/components/checkbox/_theme.scss @@ -0,0 +1,109 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-checkbox--theme-base() { + + // Checkbox + .k-checkbox { + @include fill( + $kendo-checkbox-text, + $kendo-checkbox-bg, + $kendo-checkbox-border + ); + } + + + // Hover state + .k-checkbox:hover, + .k-checkbox.k-hover { + @include fill( + $kendo-checkbox-hover-text, + $kendo-checkbox-hover-bg, + $kendo-checkbox-hover-border + ); + } + + + // Focus state + .k-checkbox:focus, + .k-checkbox.k-focus { + @include fill( $border: $kendo-checkbox-focus-border ); + @include focus-indicator( $kendo-checkbox-focus-shadow ); + } + + + // Indeterminate + .k-checkbox:indeterminate, + .k-checkbox.k-indeterminate { + @include fill( + $kendo-checkbox-indeterminate-text, + $kendo-checkbox-indeterminate-bg, + $kendo-checkbox-indeterminate-border + ); + } + + + // Checked + .k-checkbox:checked, + .k-checkbox.k-checked { + @include fill( + $kendo-checkbox-checked-text, + $kendo-checkbox-checked-bg, + $kendo-checkbox-checked-border + ); + } + .k-checkbox:checked:focus, + .k-checkbox.k-checked.k-focus { + @include fill( $border: $kendo-checkbox-focus-checked-border ); + @include focus-indicator( $kendo-checkbox-focus-checked-shadow ); + } + + + // Disabled + .k-checkbox:disabled, + .k-checkbox.k-disabled { + @include fill( + $kendo-checkbox-disabled-text, + $kendo-checkbox-disabled-bg, + $kendo-checkbox-disabled-border + ); + } + .k-checkbox:checked:disabled, + .k-checkbox:indeterminate:disabled, + .k-checkbox.k-checked.k-disabled, + .k-checkbox.k-indeterminate.k-disabled { + @include fill( + $kendo-checkbox-disabled-checked-text, + $kendo-checkbox-disabled-checked-bg, + $kendo-checkbox-disabled-checked-border + ); + } + + + // Invalid + .k-checkbox.k-invalid { + @include fill( $border: $kendo-checkbox-invalid-border ); + } + .k-checkbox.k-invalid + .k-checkbox-label { + @include fill( $color: $kendo-checkbox-invalid-text ); + } + + + // Ripple + .k-checkbox-wrap .k-ripple-blob { + color: $kendo-checkbox-ripple-bg; + opacity: $kendo-checkbox-ripple-opacity; + } + .k-ripple-container { + .k-checkbox::after { + background: $kendo-checkbox-ripple-bg; + opacity: $kendo-checkbox-ripple-opacity; + } + } + +} + + +@mixin kendo-checkbox--theme() { + @include kendo-checkbox--theme-base(); +} diff --git a/packages/core/scss/components/checkbox/_variables.scss b/packages/core/scss/components/checkbox/_variables.scss new file mode 100644 index 00000000000..3b10e378514 --- /dev/null +++ b/packages/core/scss/components/checkbox/_variables.scss @@ -0,0 +1,175 @@ +// CheckBox + +/// The border width of the CheckBox. +/// @group checkbox +$kendo-checkbox-border-width: null !default; + +/// The size of a small CheckBox. +/// @group checkbox +$kendo-checkbox-sm-size: null !default; +/// The size of a medium CheckBox. +/// @group checkbox +$kendo-checkbox-md-size: null !default; +/// The size of a large CheckBox. +/// @group checkbox +$kendo-checkbox-lg-size: null !default; + +/// The glyph size of a small CheckBox. +/// @group checkbox +$kendo-checkbox-sm-glyph-size: null !default; +/// The glyph size of a medium CheckBox. +/// @group checkbox +$kendo-checkbox-md-glyph-size: null !default; +/// The glyph size of a large CheckBox. +/// @group checkbox +$kendo-checkbox-lg-glyph-size: null !default; + +/// The ripple size of a small CheckBox. +/// @group checkbox +$kendo-checkbox-sm-ripple-size: null !default; +/// The ripple size of a medium CheckBox. +/// @group checkbox +$kendo-checkbox-md-ripple-size: null !default; +/// The ripple size of a large CheckBox. +/// @group checkbox +$kendo-checkbox-lg-ripple-size: null !default; + +// A map with the different CheckBox sizes. +$kendo-checkbox-sizes: null !default; + +/// The background color of the CheckBox. +/// @group checkbox +$kendo-checkbox-bg: null !default; +/// The text color of the CheckBox. +/// @group checkbox +$kendo-checkbox-text: null !default; +/// The border color of the CheckBox. +/// @group checkbox +$kendo-checkbox-border: null !default; + +/// The background color of the hovered CheckBox. +/// @group checkbox +$kendo-checkbox-hover-bg: null !default; +/// The text color of the hovered CheckBox. +/// @group checkbox +$kendo-checkbox-hover-text: null !default; +/// The border color of the hovered CheckBox. +/// @group checkbox +$kendo-checkbox-hover-border: null !default; + +/// The background color of the checked CheckBox. +/// @group checkbox +$kendo-checkbox-checked-bg: null !default; +/// The text color of the checked CheckBox. +/// @group checkbox +$kendo-checkbox-checked-text: null !default; +/// The border color of the checked CheckBox. +/// @group checkbox +$kendo-checkbox-checked-border: null !default; + +/// The background color of the indeterminate CheckBox. +/// @group checkbox +$kendo-checkbox-indeterminate-bg: null !default; +/// The text color of the indeterminate CheckBox. +/// @group checkbox +$kendo-checkbox-indeterminate-text: null !default; +/// The border color of the indeterminate CheckBox. +/// @group checkbox +$kendo-checkbox-indeterminate-border: null !default; + +/// The border color of the focused CheckBox. +/// @group checkbox +$kendo-checkbox-focus-border: null !default; +/// The box shadow of the focused CheckBox. +/// @group checkbox +$kendo-checkbox-focus-shadow: null !default; +/// The border color of the focused and checked CheckBox. +/// @group checkbox +$kendo-checkbox-focus-checked-border: null !default; +/// The box shadow of the focused and checked CheckBox. +/// @group checkbox +$kendo-checkbox-focus-checked-shadow: null !default; + +/// The background color of the disabled CheckBox. +/// @group checkbox +$kendo-checkbox-disabled-bg: null !default; +/// The text color of the disabled CheckBox. +/// @group checkbox +$kendo-checkbox-disabled-text: null !default; +/// The border color of the disabled CheckBox. +/// @group checkbox +$kendo-checkbox-disabled-border: null !default; + +/// The background color of the disabled and checked CheckBox. +/// @group checkbox +$kendo-checkbox-disabled-checked-bg: null !default; +/// The text color of the disabled and checked CheckBox. +/// @group checkbox +$kendo-checkbox-disabled-checked-text: null !default; +/// The border color of the disabled and checked CheckBox. +/// @group checkbox +$kendo-checkbox-disabled-checked-border: null !default; + +/// The background color of an invalid CheckBox. +/// @group checkbox +$kendo-checkbox-invalid-bg: null !default; +/// The text color of an invalid CheckBox. +/// @group checkbox +$kendo-checkbox-invalid-text: null !default; +/// The border color of an invalid CheckBox. +/// @group checkbox +$kendo-checkbox-invalid-border: null !default; + + +// CheckBox indicator + +/// The type of the CheckBox indicator. +/// @group checkbox +$kendo-checkbox-indicator-type: null !default; + +/// The font family of the CheckBox indicator glyph. +/// @group checkbox +$kendo-checkbox-glyph-font-family: null !default; +/// The glyph of the CheckBox indicator. +/// @group checkbox +$kendo-checkbox-checked-glyph: null !default; +/// The glyph of the indeterminate CheckBox indicator. +/// @group checkbox +$kendo-checkbox-indeterminate-glyph: null !default; + +/// The image for a checked CheckBox indicator. +/// @group checkbox +$kendo-checkbox-checked-image: null !default; +/// The image for a indeterminate CheckBox indicator. +/// @group checkbox +$kendo-checkbox-indeterminate-image: null !default; + + +// CheckBox label + +/// The horizontal margin of the CheckBox inside a label. +/// @group checkbox +$kendo-checkbox-label-margin-x: null !default; + + +// CheckBox list + +/// The spacing between the items in a horizontal CheckBox list. +/// @group checkbox +$kendo-checkbox-list-spacing: null !default; +/// The horizontal padding of the CheckBox list items. +/// @group checkbox +$kendo-checkbox-list-item-padding-x: null !default; +/// The vertical padding of the CheckBox list items. +/// @group checkbox +$kendo-checkbox-list-item-padding-y: null !default; + + +// CheckBox ripple + +/// The background color of the CheckBox' ripple. +/// @group checkbox +$kendo-checkbox-ripple-bg: null !default; +/// The opacity of the CheckBox' ripple. +/// @group checkbox +$kendo-checkbox-ripple-opacity: null !default; diff --git a/packages/core/scss/components/chip/_index.scss b/packages/core/scss/components/chip/_index.scss new file mode 100644 index 00000000000..c6c0a275b04 --- /dev/null +++ b/packages/core/scss/components/chip/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-chip--styles() { + @include import-once( "chip" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-chip--layout(); + @include kendo-chip--theme(); + @include kendo-utils--typography--text-overflow(); + } +} diff --git a/packages/core/scss/components/chip/_layout.scss b/packages/core/scss/components/chip/_layout.scss new file mode 100644 index 00000000000..f03268bc697 --- /dev/null +++ b/packages/core/scss/components/chip/_layout.scss @@ -0,0 +1,169 @@ +@use "./_variables.scss" as *; +@use "sass:map"; + +@mixin kendo-chip--layout-base() { + + // Chip + .k-chip { + padding-block: $kendo-chip-padding-y; + padding-inline: $kendo-chip-padding-x; + border-width: $kendo-chip-border-width; + border-style: solid; + outline: 0; + font-family: var( --kendo-font-family, inherit ); + font-size: $kendo-chip-font-size; + line-height: $kendo-chip-line-height; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + gap: $kendo-chip-spacing; + position: relative; + overflow: hidden; + cursor: pointer; + user-select: none; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + .k-selected-icon-wrapper { + display: none !important; // stylelint-disable-line declaration-no-important + } + } + + + // Chip content + .k-chip-content { + padding-block: .5em; + padding-inline: 0; + margin-block: -.5em; + margin-inline: 0; + min-width: 0; + display: flex; + flex-flow: row nowrap; + align-items: center; + overflow: hidden; + flex: 1 1 auto; + + // Adjustment for kendo-icon-wrapper + .k-icon-wrapper-host { + display: initial; + } + } + .k-chip-content:first-child { + margin-inline-start: $kendo-chip-spacing; + } + .k-chip-content:last-child { + margin-inline-end: $kendo-chip-spacing; + } + + + // Chip text + .k-chip-text, + .k-chip-label { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 1 1 auto; + } + + + // Chip avatar + .k-chip-avatar { + border-radius: 50%; + background-size: cover; + background-position: center; + flex: none; + } + + + // Chip icon + .k-chip-icon { + display: flex; + align-items: center; + justify-content: center; + flex: none; + } + + + // Actions + .k-chip-actions { + margin-block: -5em; + margin-inline: 0; + flex: none; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-self: center; + } + .k-chip-action { + flex: none; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-self: center; + } + + + // Legacy chip icons + .k-remove-icon { + font-size: inherit; + display: flex; + align-items: center; + justify-content: center; + flex: none; + } + + + // Chip list + .k-chip-list { + min-width: 0px; + display: inline-flex; + flex-wrap: wrap; + align-items: center; + position: relative; + } + + // Sizes + @each $size, $size-props in $kendo-chip-sizes { + $_padding-x: map.get( $size-props, padding-x ); + $_padding-y: map.get( $size-props, padding-y ); + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_avatar-size: 1em; + + .k-chip-#{$size} { + padding-block: $_padding-y; + padding-inline: $_padding-x; + font-size: $_font-size; + line-height: $_line-height; + + .k-chip-action { + padding: $_padding-y; + } + } + + .k-chip-avatar { + width: $_avatar-size; + height: $_avatar-size; + flex-basis: $_avatar-size; + } + + } + + // Sizes + @each $name, $size in $kendo-chip-list-sizes { + .k-chip-list-#{$name} { + gap: $size; + } + } + +} + + +@mixin kendo-chip--layout() { + @include kendo-chip--layout-base(); +} diff --git a/packages/core/scss/components/chip/_theme.scss b/packages/core/scss/components/chip/_theme.scss new file mode 100644 index 00000000000..b00ceedf5e5 --- /dev/null +++ b/packages/core/scss/components/chip/_theme.scss @@ -0,0 +1,153 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-chip--theme-base() { + + // Solid + @each $name, $color in $kendo-chip-theme-colors { + .k-chip-solid-#{$name} { + + @if ($name == "base") { + @include fill( + $kendo-chip-solid-text, + $kendo-chip-solid-bg, + $kendo-chip-solid-border, + $kendo-chip-solid-gradient + ); + + &:focus, + &.k-focus { + @include fill( $bg: $kendo-chip-solid-focus-bg ); + @include focus-indicator( $kendo-chip-solid-shadow ); + } + + &:hover, + &.k-hover { + @include fill( $bg: $kendo-chip-solid-hover-bg ); + } + + &.k-selected { + @include fill( $bg: $kendo-chip-solid-selected-bg ); + } + } @else { + @include fill( + if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )), + if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )), + if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )), + $kendo-chip-solid-gradient + ); + + &:focus, + &.k-focus { + @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) ); + } + + &:hover, + &.k-hover { + @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) ); + } + + &.k-selected { + @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) ); + } + } + } + } + + + // Outline + @each $name, $color in $kendo-chip-theme-colors { + .k-chip-outline-#{$name} { + @if ($name == "base") { + @include fill( + $kendo-chip-outline-text, + transparent, + $kendo-chip-outline-border + ); + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-chip-outline-shadow ); + } + + &:hover, + &.k-hover { + @include fill( + $color: $kendo-chip-outline-hover-text, + $bg: $kendo-chip-outline-hover-bg + ); + } + + &.k-selected { + @include fill( + $color: $kendo-chip-outline-selected-text, + $bg: $kendo-chip-outline-selected-bg + ); + } + } @else if ($name == "warning") { + @include fill( + if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)), + if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), + if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) + ); + + &:focus, + &.k-focus { + @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); + } + + &:hover, + &.k-hover { + @include fill( + $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), + $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) + ); + } + + &.k-selected { + @include fill( + $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), + $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) + ); + } + } @else { + @include fill( + if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )), + if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), + if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )) + ); + + &:focus, + &.k-focus { + @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); + } + + &:hover, + &.k-hover { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), + if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )), + if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )) + ); + } + + &.k-selected { + @include fill( + if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), + if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )), + if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )) + ); + } + } + } + } + +} + + +@mixin kendo-chip--theme() { + @include kendo-chip--theme-base(); +} diff --git a/packages/core/scss/components/chip/_variables.scss b/packages/core/scss/components/chip/_variables.scss new file mode 100644 index 00000000000..5bab6db2db6 --- /dev/null +++ b/packages/core/scss/components/chip/_variables.scss @@ -0,0 +1,147 @@ +// Chip + +/// The width of the border around the Chip. +/// @group chip +$kendo-chip-border-width: null !default; +/// The spacing between the text and the icons of the Chip. +/// @group chip +$kendo-chip-spacing: null !default; + +/// The horizontal padding of the Chip. +/// @group chip +$kendo-chip-padding-x: null !default; +/// The horizontal padding of the small Chip. +/// @group chip +$kendo-chip-sm-padding-x: null !default; +/// The horizontal padding of the medium Chip. +/// @group chip +$kendo-chip-md-padding-x: null !default; +/// The horizontal padding of the large Chip. +/// @group chip +$kendo-chip-lg-padding-x: null !default; + +/// The vertical padding of the Chip. +/// @group chip +$kendo-chip-padding-y: null !default; +/// The vertical padding of the small Chip. +/// @group chip +$kendo-chip-sm-padding-y: null !default; +/// The vertical padding of the medium Chip. +/// @group chip +$kendo-chip-md-padding-y: null !default; +/// The vertical padding of the large Chip. +/// @group chip +$kendo-chip-lg-padding-y: null !default; + +/// The font size of the Chip. +/// @group chip +$kendo-chip-font-size: null !default; +/// The font size of the small Chip. +/// @group chip +$kendo-chip-sm-font-size: null !default; +/// The font size of the medium Chip. +/// @group chip +$kendo-chip-md-font-size: null !default; +/// The font size of the large Chip. +/// @group chip +$kendo-chip-lg-font-size: null !default; + +/// The Chip's line height that is related to the $kendo-font-size. +/// @group chip +$kendo-chip-line-height: null !default; +/// The small Chip's line height that is related to the $kendo-font-size. +/// @group chip +$kendo-chip-sm-line-height: null !default; +/// The medium Chip's line height that is related to the $kendo-font-size. +/// @group chip +$kendo-chip-md-line-height: null !default; +/// The large Chip's line height that is related to the $kendo-font-size. +/// @group chip +$kendo-chip-lg-line-height: null !default; + +/// The calculated height of the Chip. +/// @group chip +$kendo-chip-calc-size: null !default; +$kendo-chip-sm-calc-size: null !default; + +/// The map with the sizes of the Chip. +/// @group chip +$kendo-chip-sizes: null !default; + +/// The base background of the Chip. +/// @group chip +$kendo-chip-base-bg: null !default; + +/// The theme colors map for the Chip. +/// @group chip +$kendo-chip-theme-colors: null !default; + +/// The base background color of the solid Chip. +/// @group chip +$kendo-chip-solid-bg: null !default; +/// The base text color of the solid Chip. +/// @group chip +$kendo-chip-solid-text: null !default; +/// The base border color of the solid Chip. +/// @group chip +$kendo-chip-solid-border: null !default; +/// The base shadow of the solid Chip. +/// @group chip +$kendo-chip-solid-shadow: null !default; +/// The base gradient of the solid Chip. +/// @group chip +$kendo-chip-solid-gradient: null !default; + +/// The base background color of the focused solid Chip. +/// @group chip +$kendo-chip-solid-focus-bg: null !default; +/// The base text color of the focused solid Chip. +/// @group chip +$kendo-chip-solid-focus-text: null !default; + +/// The base background color of the hovered solid Chip. +/// @group chip +$kendo-chip-solid-hover-bg: null !default; +/// The base text color of the hovered solid Chip. +/// @group chip +$kendo-chip-solid-hover-text: null !default; + +/// The base background color of the selected solid Chip. +/// @group chip +$kendo-chip-solid-selected-bg: null !default; +/// The base text color of the selected solid Chip. +/// @group chip +$kendo-chip-solid-selected-text: null !default; + +/// The base background color of the outline Chip. +/// @group chip +$kendo-chip-outline-bg: null !default; +/// The base text color of the outline Chip. +/// @group chip +$kendo-chip-outline-text: null !default; +/// The base border color of the outline Chip. +/// @group chip +$kendo-chip-outline-border: null !default; +/// The base shadow of the outline Chip. +/// @group chip +$kendo-chip-outline-shadow: null !default; + +/// The base background color of the hovered outline Chip. +/// @group chip +$kendo-chip-outline-hover-bg: null !default; +/// The base text color of the hovered outline Chip. +/// @group chip +$kendo-chip-outline-hover-text: null !default; + +/// The base background color of the selected outline Chip. +/// @group chip +$kendo-chip-outline-selected-bg: null !default; +/// The base text color of the selected outline Chip. +/// @group chip +$kendo-chip-outline-selected-text: null !default; + +// Chip List + +/// The sizes of the Chip list. +/// @group chip +$kendo-chip-list-sizes: null !default; diff --git a/packages/core/scss/components/color-preview/_index.scss b/packages/core/scss/components/color-preview/_index.scss new file mode 100644 index 00000000000..81f2cd6f78c --- /dev/null +++ b/packages/core/scss/components/color-preview/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-color-preview--styles() { + @include import-once( "color-preview" ) { + @include core-styles(); + @include kendo-color-preview--layout(); + @include kendo-color-preview--theme(); + } +} diff --git a/packages/core/scss/components/color-preview/_layout.scss b/packages/core/scss/components/color-preview/_layout.scss new file mode 100644 index 00000000000..f7f021db673 --- /dev/null +++ b/packages/core/scss/components/color-preview/_layout.scss @@ -0,0 +1,84 @@ +@use "./_variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-color-preview--layout-base() { + + // Color Preview + .k-color-preview { + width: 100%; + height: 100%; + border-width: $kendo-color-preview-border-width; + border-radius: $kendo-color-preview-border-radius; + box-sizing: border-box; + border-style: solid; + display: inline-flex; + flex-flow: row nowrap; + position: relative; + overflow: hidden; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Current Color + .k-coloreditor-current-color { + cursor: pointer; + } + + + // Icon color preview + .k-icon-color-preview { + border-width: 0; + border-radius: 0; + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: center; + gap: 2px; + + .k-color-preview-mask { + width: calc( #{$kendo-icon-size} - 2px ); + height: 2px; + } + } + + + // Color Preview Mask + .k-color-preview-mask { + width: 100%; + height: 100%; + position: relative; + } + .k-color-preview-mask::before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + background: $kendo-color-preview-transparent-color-image; + background-size: contain; + background-position: 0 0; + } + + + // No Color + .k-no-color .k-color-preview-mask::before { + content: ""; + background-color: $kendo-color-preview-no-color-bg; + background-image: $kendo-color-preview-no-color-image; + background-size: 100% 100%; + background-position: 0 0; + } + +} + + +@mixin kendo-color-preview--layout() { + @include kendo-color-preview--layout-base(); +} diff --git a/packages/core/scss/components/color-preview/_theme.scss b/packages/core/scss/components/color-preview/_theme.scss new file mode 100644 index 00000000000..0ce92fe1bbb --- /dev/null +++ b/packages/core/scss/components/color-preview/_theme.scss @@ -0,0 +1,25 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-color-preview--theme-base() { + + // Color Preview + .k-color-preview { + @include fill( + $kendo-color-preview-text, + $kendo-color-preview-bg, + $kendo-color-preview-border + ); + + &:hover, + &.k-hover { + @include fill( $border: $kendo-color-preview-hover-border ); + } + } + +} + + +@mixin kendo-color-preview--theme() { + @include kendo-color-preview--theme-base(); +} diff --git a/packages/core/scss/components/color-preview/_variables.scss b/packages/core/scss/components/color-preview/_variables.scss new file mode 100644 index 00000000000..3b7f03261af --- /dev/null +++ b/packages/core/scss/components/color-preview/_variables.scss @@ -0,0 +1,14 @@ +// Color Preview +$kendo-color-preview-border-radius: k-border-radius(md)!default; +$kendo-color-preview-border-width: null !default; +$kendo-color-preview-bg: null !default; +$kendo-color-preview-text: null !default; +$kendo-color-preview-border: null !default; +$kendo-color-preview-hover-border: null !default; + +$kendo-color-preview-no-color-bg: null !default; +$kendo-color-preview-no-color-text: null !default; +$kendo-color-preview-no-color-border: null !default; + +$kendo-color-preview-no-color-image: null !default; +$kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default; diff --git a/packages/core/scss/components/coloreditor/_index.scss b/packages/core/scss/components/coloreditor/_index.scss new file mode 100644 index 00000000000..ae7b14c3f87 --- /dev/null +++ b/packages/core/scss/components/coloreditor/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; +@use "../color-preview/_index.scss" as *; +@use "../colorpalette/_index.scss" as *; +@use "../colorgradient/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-color-editor--styles() { + @include import-once( "color-editor" ) { + @include core-styles(); + @include kendo-action-buttons--styles(); + @include kendo-color-preview--styles(); + @include kendo-color-palette--styles(); + @include kendo-color-gradient--styles(); + @include kendo-color-editor--layout(); + @include kendo-color-editor--theme(); + } +} diff --git a/packages/core/scss/components/coloreditor/_layout.scss b/packages/core/scss/components/coloreditor/_layout.scss new file mode 100644 index 00000000000..72e92380141 --- /dev/null +++ b/packages/core/scss/components/coloreditor/_layout.scss @@ -0,0 +1,140 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../colorpalette/_variables.scss" as *; + +@mixin kendo-color-editor--layout-base() { + + // ColorEditor/FlatColorPicker + .k-coloreditor { + @include border-radius( $kendo-color-editor-border-radius ); + min-width: $kendo-color-editor-min-width; + border-width: $kendo-color-editor-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-size: $kendo-color-editor-font-size; + font-family: $kendo-color-editor-font-family; + line-height: $kendo-color-editor-line-height; + display: inline-flex; + flex-direction: column; + align-items: stretch; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + // Header + .k-coloreditor-header { + padding: $kendo-color-editor-header-padding-y $kendo-color-editor-header-padding-x 0; + } + + .k-coloreditor-header-actions { + gap: $kendo-color-editor-header-actions-gap; + } + + .k-coloreditor-preview { + display: flex; + flex-flow: column nowrap; + align-items: stretch; + justify-content: center; + gap: $kendo-color-editor-preview-gap; + position: relative; + z-index: 1; + } + + .k-coloreditor-preview .k-color-preview { + width: $kendo-color-editor-color-preview-width; + height: $kendo-color-editor-color-preview-height; + } + + // ColorPreview sizes + @each $size, $size-props in $kendo-color-editor-sizes { + $_min-width: map.get( $size-props, min-width ); + $_header-padding-x: map.get( $size-props, header-padding-x ); + $_header-padding-y: map.get( $size-props, header-padding-y ); + $_views-padding-x: map.get( $size-props, views-padding-x ); + $_views-padding-y: map.get( $size-props, views-padding-y ); + $_preview-gap: map.get( $size-props, preview-gap ); + $_preview-width: map.get( $size-props, preview-width ); + $_preview-height: map.get( $size-props, preview-height ); + + .k-coloreditor-#{$size} { + min-width: $_min-width; + + .k-coloreditor-header { + padding: $_header-padding-y $_header-padding-x 0; + } + + .k-coloreditor-views { + padding-block: $_views-padding-y; + padding-inline: $_views-padding-x; + } + + .k-coloreditor-preview { + gap: $_preview-gap; + + .k-color-preview { + width: $_preview-width; + height: $_preview-height; + } + } + } + + } + + // Views + .k-coloreditor-views { + min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) ); + padding-block: $kendo-color-editor-views-padding-y; + padding-inline: $kendo-color-editor-views-padding-x; + gap: $kendo-color-editor-views-gap; + + .k-colorgradient { + padding: 0; + width: auto; + border-width: 0; + } + .k-colorgradient:focus, + .k-colorgradient.k-focus { + outline: $kendo-color-editor-color-gradient-focus-outline dotted; + outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset; + border-radius: 0; + } + + .k-colorpalette { + align-self: center; + } + + .k-colorpalette-tile { + width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width); + height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height); + } + } + + // ColorPalette sizes + @each $size, $size-props in $kendo-color-palette-sizes { + $_tile-width: map.get( $size-props, width ); + $_tile-height: map.get( $size-props, height ); + + .k-coloreditor-#{$size} { + .k-colorpalette-tile { + width: $_tile-width; + height: $_tile-height; + } + } + } + + // Footer + .k-coloreditor-footer.k-actions { + margin: 0; + } +} + + +@mixin kendo-color-editor--layout() { + @include kendo-color-editor--layout-base(); +} diff --git a/packages/core/scss/components/coloreditor/_theme.scss b/packages/core/scss/components/coloreditor/_theme.scss new file mode 100644 index 00000000000..b04b882a2ee --- /dev/null +++ b/packages/core/scss/components/coloreditor/_theme.scss @@ -0,0 +1,32 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-color-editor--theme-base() { + + // ColorEditor/FlatColorPicker + .k-coloreditor { + @include fill( + $kendo-color-editor-text, + $kendo-color-editor-bg, + $kendo-color-editor-border + ); + } + + .k-coloreditor:focus, + .k-coloreditor.k-focus { + @include fill( $border: $kendo-color-editor-focus-border ); + @include focus-indicator( $kendo-color-editor-focus-shadow ); + } + + .k-coloreditor .k-colorgradient:focus, + .k-coloreditor .k-colorgradient.k-focus { + box-shadow: none; + outline-color: $kendo-color-editor-color-gradient-focus-outline-color; + } + +} + + +@mixin kendo-color-editor--theme() { + @include kendo-color-editor--theme-base(); +} diff --git a/packages/core/scss/components/coloreditor/_variables.scss b/packages/core/scss/components/coloreditor/_variables.scss new file mode 100644 index 00000000000..967c7867c5d --- /dev/null +++ b/packages/core/scss/components/coloreditor/_variables.scss @@ -0,0 +1,167 @@ +// ColorEditor/FlatColorPicker + +/// The spacer of the ColorEditor. +/// @group color-editor +$kendo-color-editor-spacer: null !default; + +/// The minimum width of the ColorEditor. +/// @group color-editor +$kendo-color-editor-min-width: null !default; +/// The minimum width of the ColorEditor. +/// @group color-editor +$kendo-color-editor-sm-min-width: null !default; +/// The minimum width of the ColorEditor. +/// @group color-editor +$kendo-color-editor-md-min-width: null !default; +/// The minimum width of the ColorEditor. +/// @group color-editor +$kendo-color-editor-lg-min-width: null !default; +/// The width of the border around the ColorEditor. +/// @group color-editor +$kendo-color-editor-border-width: null !default; +/// The border radius of the ColorEditor. +/// @group color-editor +$kendo-color-editor-border-radius: null !default; +/// The font family of the ColorEditor. +/// @group color-editor +$kendo-color-editor-font-family: null !default; +/// The font size of the ColorEditor. +/// @group color-editor +$kendo-color-editor-font-size: null !default; +/// The line height of the ColorEditor. +/// @group color-editor +$kendo-color-editor-line-height: null !default; +/// The text color of the ColorEditor. +/// @group color-editor +$kendo-color-editor-text: null !default; +/// The background color of the ColorEditor. +/// @group color-editor +$kendo-color-editor-bg: null !default; +/// The border color of the ColorEditor. +/// @group color-editor +$kendo-color-editor-border: null !default; + +/// The border color of the focused ColorEditor. +/// @group color-editor +$kendo-color-editor-focus-border: null !default; +// TODO: does this ever get focused? Isn't it always in a popup? +/// The box shadow of the focused ColorEditor. +/// @group color-editor +$kendo-color-editor-focus-shadow: null !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3) + +/// The vertical padding of the ColorEditor header. +/// @group color-editor +$kendo-color-editor-header-padding-y: null !default; +/// The horizontal padding of the ColorEditor header. +/// @group color-editor +$kendo-color-editor-header-padding-x: null !default; +/// The spacing between the ColorEditor header actions. +/// @group color-editor +$kendo-color-editor-header-actions-gap: null !default; +/// The vertical padding of the small ColorEditor header. +/// @group color-editor +$kendo-color-editor-sm-header-padding-y: null !default; +/// The horizontal padding of the small ColorEditor header. +/// @group color-editor +$kendo-color-editor-sm-header-padding-x: null !default; +/// The vertical padding of the medium ColorEditor header. +/// @group color-editor +$kendo-color-editor-md-header-padding-y: null !default; +/// The horizontal padding of the medium ColorEditor header. +/// @group color-editor +$kendo-color-editor-md-header-padding-x: null !default; +/// The vertical padding of the large ColorEditor header. +/// @group color-editor +$kendo-color-editor-lg-header-padding-y: null !default; +/// The horizontal padding of the large ColorEditor header. +/// @group color-editor +$kendo-color-editor-lg-header-padding-x: null !default; + +/// The width of the ColorEditor preview. +/// @group color-editor +$kendo-color-editor-color-preview-width: null !default; +/// The height of the ColorEditor preview. +/// @group color-editor +$kendo-color-editor-color-preview-height: null !default; +/// The spacing between the colors in the ColorEditor preview. +/// @group color-editor +$kendo-color-editor-preview-gap: null !default; +/// The spacing between the colors in the small ColorEditor preview. +/// @group color-editor +$kendo-color-editor-sm-preview-gap: null !default; +/// The spacing between the colors in the medium ColorEditor preview. +/// @group color-editor +$kendo-color-editor-md-preview-gap: null !default; +/// The spacing between the colors in the large ColorEditor preview. +/// @group color-editor +$kendo-color-editor-lg-preview-gap: null !default; + +/// The width of the small ColorEditor preview. +/// @group color-editor +$kendo-color-editor-sm-color-preview-width: null !default; +/// The height of the small ColorEditor preview. +/// @group color-editor +$kendo-color-editor-sm-color-preview-height: null !default; +/// The width of the medium ColorEditor preview. +/// @group color-editor +$kendo-color-editor-md-color-preview-width: null !default; +/// The height of the medium ColorEditor preview. +/// @group color-editor +$kendo-color-editor-md-color-preview-height: null !default; +/// The width of the large ColorEditor preview. +/// @group color-editor +$kendo-color-editor-lg-color-preview-width: null !default; +/// The height of the large ColorEditor preview. +/// @group color-editor +$kendo-color-editor-lg-color-preview-height: null !default; + +/// The vertical padding of the ColorEditor views container. +/// @group color-editor +$kendo-color-editor-views-padding-y: null !default; +/// The horizontal padding of the ColorEditor views container. +/// @group color-editor +$kendo-color-editor-views-padding-x: null !default; +/// The spacing of the ColorEditor views container. +/// @group color-editor +$kendo-color-editor-views-gap: null !default; +/// The vertical padding of the small ColorEditor views container. +/// @group color-editor +$kendo-color-editor-sm-views-padding-y: null !default; +/// The horizontal padding of the small ColorEditor views container. +/// @group color-editor +$kendo-color-editor-sm-views-padding-x: null !default; +/// The spacing of the small ColorEditor views container. +/// @group color-editor +$kendo-color-editor-sm-views-gap: null !default; +/// The vertical padding of the medium ColorEditor views container. +/// @group color-editor +$kendo-color-editor-md-views-padding-y: null !default; +/// The horizontal padding of the medium ColorEditor views container. +/// @group color-editor +$kendo-color-editor-md-views-padding-x: null !default; +/// The spacing of the medium ColorEditor views container. +/// @group color-editor +$kendo-color-editor-md-views-gap: null !default; +/// The vertical padding of the large ColorEditor views container. +/// @group color-editor +$kendo-color-editor-lg-views-padding-y: null !default; +/// The horizontal padding of the large ColorEditor views container. +/// @group color-editor +$kendo-color-editor-lg-views-padding-x: null !default; +/// The spacing of the large ColorEditor views container. +/// @group color-editor +$kendo-color-editor-lg-views-gap: null !default; + +/// The outline color of the focused ColorGradient. +/// @group color-editor +$kendo-color-editor-color-gradient-focus-outline-color: null !default; +/// The outline width of the focused ColorGradient. +/// @group color-editor +$kendo-color-editor-color-gradient-focus-outline: null !default; +/// The outline offset of the focused ColorGradient. +/// @group color-editor +$kendo-color-editor-color-gradient-focus-outline-offset: null !default; + +/// The size map of the ColorEditor. +/// @group color-editor +$kendo-color-editor-sizes: () !default; diff --git a/packages/core/scss/components/colorgradient/_index.scss b/packages/core/scss/components/colorgradient/_index.scss new file mode 100644 index 00000000000..5e9beba427e --- /dev/null +++ b/packages/core/scss/components/colorgradient/_index.scss @@ -0,0 +1,30 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../slider/_index.scss" as *; +@use "../textbox/_index.scss" as *; +@use "../numerictextbox/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-color-gradient--styles() { + @include import-once( "color-gradient" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-button--styles(); + @include kendo-slider--styles(); + @include kendo-textbox--styles(); + @include kendo-numeric-textbox--styles(); + @include kendo-color-gradient--layout(); + @include kendo-color-gradient--theme(); + @include kendo-utils--flex-grid--flex(); + @include kendo-utils--flex-grid--align-self(); + @include kendo-utils--typography--text-color(); + } +} diff --git a/packages/core/scss/components/colorgradient/_layout.scss b/packages/core/scss/components/colorgradient/_layout.scss new file mode 100644 index 00000000000..a25388d29fe --- /dev/null +++ b/packages/core/scss/components/colorgradient/_layout.scss @@ -0,0 +1,239 @@ +@use "sass:map"; +@use "sass:math"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-color-gradient--layout-base() { + + // ColorGradient + .k-colorgradient { + @include border-radius( $kendo-color-gradient-border-radius ); + width: $kendo-color-gradient-width; + padding-block: $kendo-color-gradient-padding-y; + padding-inline: $kendo-color-gradient-padding-x; + border-style: solid; + border-width: $kendo-color-gradient-border-width; + box-sizing: border-box; + outline: 0; + font-size: $kendo-color-gradient-font-size; + font-family: $kendo-color-gradient-font-family; + line-height: $kendo-color-gradient-line-height; + display: flex; + flex-direction: column; + align-items: stretch; + gap: $kendo-color-gradient-gap; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + // Canvas + .k-colorgradient-canvas { + gap: $kendo-color-gradient-canvas-gap; + + .k-hsv-rectangle { + @include border-radius( $kendo-color-gradient-canvas-border-radius ); + position: relative; + flex: 1 1 auto; + user-select: none; + } + + .k-hsv-gradient { + @include border-radius( $kendo-color-gradient-canvas-border-radius ); + height: $kendo-color-gradient-canvas-rectangle-height; + } + + .k-hsv-draghandle { + margin-top: $kendo-color-gradient-canvas-draghandle-margin-y; + margin-left: $kendo-color-gradient-canvas-draghandle-margin-x; + position: absolute; + top: 50%; + left: 50%; + z-index: 1; + cursor: pointer; + } + + .k-hsv-controls { + position: relative; + flex-shrink: 0; + gap: $kendo-color-gradient-canvas-gap; + } + } + + // DragHandle + .k-colorgradient .k-draghandle { + @include border-radius( $kendo-color-gradient-draghandle-border-radius ); + width: $kendo-color-gradient-draghandle-width; + height: $kendo-color-gradient-draghandle-height; + border-width: $kendo-color-gradient-draghandle-border-width; + border-style: solid; + outline-width: $kendo-color-gradient-draghandle-outline-width; + outline-style: solid; + box-sizing: border-box; + } + + // Sliders + .k-colorgradient-slider { + &.k-slider-vertical { + width: $kendo-color-gradient-slider-track-size; + height: $kendo-color-gradient-slider-vertical-size; + flex: 0 0 $kendo-color-gradient-slider-track-size; + } + &.k-slider-vertical .k-slider-track { + width: $kendo-color-gradient-slider-track-size; + border-radius: $kendo-color-gradient-slider-border-radius; + margin-left: - math.div( $kendo-color-gradient-slider-track-size, 2 ); + } + + &.k-slider-horizontal { + width: $kendo-color-gradient-slider-horizontal-size; + height: $kendo-color-gradient-slider-track-size; + flex: 0 0 $kendo-color-gradient-slider-track-size; + } + &.k-slider-horizontal .k-slider-track { + height: $kendo-color-gradient-slider-track-size; + border-radius: $kendo-color-gradient-slider-border-radius; + margin-top: - math.div( $kendo-color-gradient-slider-track-size, 2 ); + } + + &.k-alpha-slider .k-slider-track::before { + content: ""; + width: 100%; + height: 100%; + display: block; + border-radius: 10px; + position: relative; + z-index: -1; + } + + .k-slider-track-wrap { + z-index: 1; + } + + .k-slider-selection { + display: none; + } + + .k-draghandle { + border-width: $kendo-color-gradient-slider-draghandle-border-width; + } + } + + // ColorGradient sizes + @each $size, $size-props in $kendo-color-gradient-sizes { + $_width: map.get( $size-props, width ); + $_gap: map.get( $size-props, gap ); + $_vertical-slider-height: map.get( $size-props, vertical-slider-height ); + $_rectangle-height: map.get( $size-props, rectangle-height ); + $_input-width: map.get( $size-props, input-width ); + $_canvas-gap: map.get( $size-props, canvas-gap ); + $_padding-x: map.get( $size-props, padding-x ); + $_padding-y: map.get( $size-props, padding-y ); + + .k-colorgradient-#{$size} { + width: $_width; + gap: $_gap; + padding-block: $_padding-y; + padding-inline: $_padding-x; + + .k-colorgradient-inputs { + .k-numerictextbox { + width: $_input-width; + } + } + + .k-colorgradient-canvas { + gap: $_canvas-gap; + + .k-hsv-gradient { + height: $_rectangle-height; + } + + .k-slider-vertical { + height: $_vertical-slider-height; + } + + .k-hsv-controls { + gap: $_canvas-gap; + } + } + } + } + + + // Inputs + .k-colorgradient-inputs { + gap: $kendo-color-gradient-input-gap; + + .k-colorgradient-input-label { + text-transform: uppercase; + } + + > .k-vstack { + gap: $kendo-color-gradient-input-label-gap; + } + + .k-numerictextbox { + width: $kendo-color-gradient-input-width; + } + + .k-input-inner { + padding-inline-start: 2px; + padding-inline-end: 2px; + text-align: center; + text-overflow: clip; + } + } + + // Contrast + .k-colorgradient-color-contrast { + + > div { + display: flex; + flex-flow: row nowrap; + gap: $kendo-color-gradient-contrast-spacer; + } + + .k-contrast-ratio { + margin-bottom: $kendo-color-gradient-contrast-spacer; + } + + .k-contrast-ratio-text { + font-weight: $kendo-color-gradient-contrast-ratio-font-weight; + } + + .k-contrast-validation { + display: inline-flex; + align-items: center; + gap: calc( #{$kendo-color-gradient-contrast-spacer} / 2 ); + + .k-icon { + vertical-align: middle; + } + + // Needed for the double check icons + .k-icon + .k-icon, + .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon { + margin-inline-start: -13px; + } + } + } + .k-color-contrast-svg { + position: absolute; + top: 0; + left: 0; + overflow: visible; + pointer-events: none; + } +} + + +@mixin kendo-color-gradient--layout() { + @include kendo-color-gradient--layout-base(); +} diff --git a/packages/core/scss/components/colorgradient/_theme.scss b/packages/core/scss/components/colorgradient/_theme.scss new file mode 100644 index 00000000000..26f51ce04d9 --- /dev/null +++ b/packages/core/scss/components/colorgradient/_theme.scss @@ -0,0 +1,92 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-color-gradient--theme-base() { + + // ColorGradient + .k-colorgradient { + @include fill( + $kendo-color-gradient-text, + $kendo-color-gradient-bg, + $kendo-color-gradient-border + ); + } + + .k-colorgradient:focus, + .k-colorgradient.k-focus { + @include fill( $border: $kendo-color-gradient-focus-border ); + @include focus-indicator( $kendo-color-gradient-focus-shadow ); + } + + // Canvas + .k-colorgradient-canvas .k-hsv-gradient { + background: linear-gradient( to bottom, $kendo-gradient-transparent-to-black ), linear-gradient( to right, $kendo-gradient-white-to-transparent ); + } + + // DragHandle + .k-colorgradient .k-draghandle { + @include fill( + $kendo-color-gradient-draghandle-text, + $kendo-color-gradient-draghandle-bg, + $kendo-color-gradient-draghandle-border + ); + outline-color: $kendo-color-gradient-draghandle-focus-shadow; + @include box-shadow( $kendo-color-gradient-draghandle-shadow ); + + &:focus, + &.k-focus { + @include fill( $bg: transparent, $border: $kendo-color-white ); + outline-color: $kendo-color-gradient-draghandle-focus-shadow; + @include focus-indicator( $kendo-color-gradient-draghandle-shadow ); + } + + &:hover, + &.k-hover, + &.k-active, + &:active { + @include fill( $bg: transparent, $border: $kendo-color-white ); + outline-color: $kendo-color-gradient-draghandle-hover-shadow; + } + } + + // Slider + .k-colorgradient-slider.k-hue-slider { + &.k-slider-horizontal .k-slider-track { + background: linear-gradient( to right, $kendo-gradient-rainbow ); + } + + &.k-slider-vertical .k-slider-track { + background: linear-gradient( to top, $kendo-gradient-rainbow ); + } + } + + .k-colorgradient-slider.k-alpha-slider .k-slider-track::before { + // TODO: extract variable + background: url(#{$kendo-color-gradient-slider-alpha-bgr}) center repeat; + } + + // Inputs + .k-colorgradient-input-label { + @include fill( $color: $kendo-color-gradient-input-label-text ); + } + + + // RTL + .k-rtl, + [dir="rtl"] { + .k-colorgradient { + + .k-hue-slider.k-slider-horizontal .k-slider-track { + background: linear-gradient( to left, $kendo-gradient-rainbow ); + } + + } + } + +} + + +@mixin kendo-color-gradient--theme() { + @include kendo-color-gradient--theme-base(); +} diff --git a/packages/core/scss/components/colorgradient/_variables.scss b/packages/core/scss/components/colorgradient/_variables.scss new file mode 100644 index 00000000000..e9a9d8e2b2b --- /dev/null +++ b/packages/core/scss/components/colorgradient/_variables.scss @@ -0,0 +1,221 @@ +// ColorGradient + +/// The spacer of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-spacer: null !default; + +/// The width of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-width: null !default; +/// The width of the border around the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-border-width: null !default; +/// The border radius of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-border-radius: null !default; +/// The vertical padding of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-padding-y: null !default; +/// The horizontal padding of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-padding-x: null !default; +/// The spacing between the sections of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-gap: null !default; +/// The font family of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-font-family: null !default; +/// The font size of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-font-size: null !default; +/// The line height of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-line-height: null !default; +/// The text color of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-text: null !default; +/// The background color of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-bg: null !default; +/// The border color of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-border: null !default; + +/// The vertical padding of the small ColorGradient. +/// @group color-gradient +$kendo-color-gradient-sm-padding-y: null !default; +/// The horizontal padding of the small ColorGradient. +/// @group color-gradient +$kendo-color-gradient-sm-padding-x: null !default; +/// The vertical padding of the medium ColorGradient. +/// @group color-gradient +$kendo-color-gradient-md-padding-y: null !default; +/// The horizontal padding of the medium ColorGradient. +/// @group color-gradient +$kendo-color-gradient-md-padding-x: null !default; +/// The vertical padding of the large ColorGradient. +/// @group color-gradient +$kendo-color-gradient-lg-padding-y: null !default; +/// The horizontal padding of the large ColorGradient. +/// @group color-gradient +$kendo-color-gradient-lg-padding-x: null !default; + +/// The width of the small ColorGradient. +/// @group color-gradient +$kendo-color-gradient-sm-width: null !default; +/// The width of the medium ColorGradient. +/// @group color-gradient +$kendo-color-gradient-md-width: null !default; +/// The width of the large ColorGradient. +/// @group color-gradient +$kendo-color-gradient-lg-width: null !default; + +/// The spacing between the sections of the small ColorGradient. +/// @group color-gradient +$kendo-color-gradient-sm-gap: null !default; +/// The spacing between the sections of the medium ColorGradient. +/// @group color-gradient +$kendo-color-gradient-md-gap: null !default; +/// The spacing between the sections of the large ColorGradient. +/// @group color-gradient +$kendo-color-gradient-lg-gap: null !default; + +/// The border color of the focused ColorGradient. +/// @group color-gradient +$kendo-color-gradient-focus-border: null !default; +/// The box shadow of the focused ColorGradient. +/// @group color-gradient +$kendo-color-gradient-focus-shadow: null !default; + +/// The border radius of the ColorGradient canvas. +/// @group color-gradient +$kendo-color-gradient-canvas-border-radius: null !default; +/// The spacing between the items of the ColorGradient canvas. +/// @group color-gradient +$kendo-color-gradient-canvas-gap: null !default; +/// The height the ColorGradient canvas hsv rectangle. +/// @group color-gradient +$kendo-color-gradient-canvas-rectangle-height: null !default; +/// The height the small ColorGradient canvas hsv rectangle. +/// @group color-gradient +$kendo-color-gradient-sm-canvas-rectangle-height: null !default; +/// The height the medium ColorGradient canvas hsv rectangle. +/// @group color-gradient +$kendo-color-gradient-md-canvas-rectangle-height: null !default; +/// The height the large ColorGradient canvas hsv rectangle. +/// @group color-gradient +$kendo-color-gradient-lg-canvas-rectangle-height: null !default; + +/// The spacing between the items of the small ColorGradient canvas. +/// @group color-gradient +$kendo-color-gradient-sm-canvas-gap: null !default; +/// The spacing between the items of the medium ColorGradient canvas. +/// @group color-gradient +$kendo-color-gradient-md-canvas-gap: null !default; +/// The spacing between the items of the large ColorGradient canvas. +/// @group color-gradient +$kendo-color-gradient-lg-canvas-gap: null !default; + +/// The width of the ColorGradient slider. +/// @group color-gradient +$kendo-color-gradient-slider-track-size: null !default; +/// The border radius of the ColorGradient slider. +/// @group color-gradient +$kendo-color-gradient-slider-border-radius: null !default; +/// The width of the border around the ColorGradient slider drag handle. +/// @group color-gradient +$kendo-color-gradient-slider-draghandle-border-width: null !default; + +/// The height of the ColorGradient vertical slider. +/// @group color-gradient +$kendo-color-gradient-slider-vertical-size: null !default; +/// The width of the ColorGradient horizontal slider. +/// @group color-gradient +$kendo-color-gradient-slider-horizontal-size: null !default; +/// The background image of the ColorGradient alpha slider. +/// @group color-gradient +$kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default; +/// The height of the small ColorGradient vertical slider. +/// @group color-gradient +$kendo-color-gradient-sm-slider-vertical-size: null !default; +/// The height of the medium ColorGradient vertical slider. +/// @group color-gradient +$kendo-color-gradient-md-slider-vertical-size: null !default; +/// The height of the large ColorGradient vertical slider. +/// @group color-gradient +$kendo-color-gradient-lg-slider-vertical-size: null !default; + +/// The width of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-width: null !default; +/// The height of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-height: null !default; +/// The width of the border around the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-border-width: null !default; +/// The width of the outline around the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-outline-width: null !default; +/// The border radius of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-border-radius: null !default; +/// The text color of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-text: null !default; +/// The background color of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-bg: null !default; +/// The color of the border around the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-border: null !default; +/// The focus color of the outline around the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-focus-shadow: null !default; +/// The hover color of the outline around the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-hover-shadow: null !default; +/// The box shadow of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-draghandle-shadow: null !default; + +/// The vertical margin of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-canvas-draghandle-margin-y: null !default; +/// The horizontal margin of the ColorGradient canvas drag handle. +/// @group color-gradient +$kendo-color-gradient-canvas-draghandle-margin-x: null !default; + +/// The width of the ColorGradient input. +/// @group color-gradient +$kendo-color-gradient-input-width: null !default; +/// The spacing between the ColorGradient inputs. +/// @group color-gradient +$kendo-color-gradient-input-gap: null !default; +/// The spacing between the ColorGradient inputs and their labels. +/// @group color-gradient +$kendo-color-gradient-input-label-gap: null !default; +/// The text color of the ColorGradient input labels. +/// @group color-gradient +$kendo-color-gradient-input-label-text: null !default; + +/// The width of the small ColorGradient input. +/// @group color-gradient +$kendo-color-gradient-sm-input-width: null !default; +/// The width of the medium ColorGradient input. +/// @group color-gradient +$kendo-color-gradient-md-input-width: null !default; +/// The width of the large ColorGradient input. +/// @group color-gradient +$kendo-color-gradient-lg-input-width: null !default; + +/// The font weight of the ColorGradient contrast ratio text. +/// @group color-gradient +$kendo-color-gradient-contrast-ratio-font-weight: null !default; +/// The spacing between the items in the ColorGradient contrast tool. +/// @group color-gradient +$kendo-color-gradient-contrast-spacer: null !default; + +/// The size map of the ColorGradient. +/// @group color-gradient +$kendo-color-gradient-sizes: () !default; diff --git a/packages/core/scss/components/colorpalette/_index.scss b/packages/core/scss/components/colorpalette/_index.scss new file mode 100644 index 00000000000..934c107a711 --- /dev/null +++ b/packages/core/scss/components/colorpalette/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-color-palette--styles() { + @include import-once( "color-palette" ) { + @include core-styles(); + @include kendo-color-palette--layout(); + @include kendo-color-palette--theme(); + } +} diff --git a/packages/core/scss/components/colorpalette/_layout.scss b/packages/core/scss/components/colorpalette/_layout.scss new file mode 100644 index 00000000000..d310c5fdfe3 --- /dev/null +++ b/packages/core/scss/components/colorpalette/_layout.scss @@ -0,0 +1,76 @@ +@use "sass:map"; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-color-palette--layout-base() { + + // ColorPalette + .k-colorpalette { + border-width: 0; + box-sizing: border-box; + outline: 0; + font-size: $kendo-color-palette-font-size; + font-family: $kendo-color-palette-font-family; + line-height: $kendo-color-palette-line-height; + display: inline-flex; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + // Table + .k-colorpalette-table { + width: 100%; + height: 100%; + border-collapse: collapse; + position: relative; + } + + // Tile + .k-colorpalette-tile { + width: $kendo-color-palette-tile-width; + height: $kendo-color-palette-tile-height; + box-sizing: border-box; + overflow: hidden; + cursor: pointer; + + &:hover, + &.k-hover { + position: relative; + z-index: 101; + } + + &:focus, + &.k-focus, + &.k-selected, + &.k-selected:hover { + position: relative; + z-index: 100; + } + } + + // ColorPalette sizes + @each $size, $size-props in $kendo-color-palette-sizes { + $_tile-width: map.get( $size-props, width ); + $_tile-height: map.get( $size-props, height ); + + .k-colorpalette-#{$size} { + .k-colorpalette-tile { + width: $_tile-width; + height: $_tile-height; + } + } + } + +} + + +@mixin kendo-color-palette--layout() { + @include kendo-color-palette--layout-base(); +} diff --git a/packages/core/scss/components/colorpalette/_theme.scss b/packages/core/scss/components/colorpalette/_theme.scss new file mode 100644 index 00000000000..9fc60d8f655 --- /dev/null +++ b/packages/core/scss/components/colorpalette/_theme.scss @@ -0,0 +1,31 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-color-palette--theme-base() { + + // Tile + .k-colorpalette-tile { + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-color-palette-tile-focus-shadow ); + } + + &:hover, + &.k-hover { + @include box-shadow( $kendo-color-palette-tile-hover-shadow ); + } + + &.k-selected, + &.k-selected:hover { + @include box-shadow( $kendo-color-palette-tile-selected-shadow ); + } + + } + +} + + +@mixin kendo-color-palette--theme() { + @include kendo-color-palette--theme-base(); +} diff --git a/packages/core/scss/components/colorpalette/_variables.scss b/packages/core/scss/components/colorpalette/_variables.scss new file mode 100644 index 00000000000..5e45fcc1387 --- /dev/null +++ b/packages/core/scss/components/colorpalette/_variables.scss @@ -0,0 +1,50 @@ +// ColorPalette + +/// The font family of the ColorPalette. +/// @group color-palette +$kendo-color-palette-font-family: null !default; +/// The font size of the ColorPalette. +/// @group color-palette +$kendo-color-palette-font-size: null !default; +/// The line height of the ColorPalette. +/// @group color-palette +$kendo-color-palette-line-height: null !default; + +/// The width of the ColorPalette tile. +/// @group color-palette +$kendo-color-palette-tile-width: null !default; +/// The height of the ColorPalette tile. +/// @group color-palette +$kendo-color-palette-tile-height: null !default; +/// The width of the small ColorPalette tile. +/// @group color-palette +$kendo-color-palette-sm-tile-width: null !default; +/// The height of the small ColorPalette tile. +/// @group color-palette +$kendo-color-palette-sm-tile-height: null !default; +/// The width of the medium ColorPalette tile. +/// @group color-palette +$kendo-color-palette-md-tile-width: null !default; +/// The height of the medium ColorPalette tile. +/// @group color-palette +$kendo-color-palette-md-tile-height: null !default; +/// The width of the large ColorPalette tile. +/// @group color-palette +$kendo-color-palette-lg-tile-width: null !default; +/// The height of the large ColorPalette tile. +/// @group color-palette +$kendo-color-palette-lg-tile-height: null !default; + +/// The shadow of the ColorPalette focused tile. +/// @group color-palette +$kendo-color-palette-tile-focus-shadow: null !default; +/// The shadow of the ColorPalette hovered tile. +/// @group color-palette +$kendo-color-palette-tile-hover-shadow: null !default; +/// The shadow of the ColorPalette selected tile. +/// @group color-palette +$kendo-color-palette-tile-selected-shadow: null !default; + +/// The size map of the ColorPalette. +/// @group color-palette +$kendo-color-palette-sizes: () !default; diff --git a/packages/core/scss/components/colorpicker/_index.scss b/packages/core/scss/components/colorpicker/_index.scss new file mode 100644 index 00000000000..efba6b2ada5 --- /dev/null +++ b/packages/core/scss/components/colorpicker/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../coloreditor/_index.scss" as *; +@use "../popup/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-color-picker--styles() { + @include import-once( "color-picker" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-button--styles(); + @include kendo-color-editor--styles(); + @include kendo-popup--styles(); + @include kendo-icon--styles(); + @include kendo-color-picker--layout(); + @include kendo-color-picker--theme(); + } +} diff --git a/packages/core/scss/components/colorpicker/_layout.scss b/packages/core/scss/components/colorpicker/_layout.scss new file mode 100644 index 00000000000..c9e67ef3572 --- /dev/null +++ b/packages/core/scss/components/colorpicker/_layout.scss @@ -0,0 +1,18 @@ +@mixin kendo-color-picker--layout-base() { + + // Color picker + .k-color-picker { + width: min-content; + } + + // Alias + .k-colorpicker { + @extend .k-color-picker !optional; + } + +} + + +@mixin kendo-color-picker--layout() { + @include kendo-color-picker--layout-base(); +} diff --git a/packages/core/scss/components/colorpicker/_theme.scss b/packages/core/scss/components/colorpicker/_theme.scss new file mode 100644 index 00000000000..7092ff647e2 --- /dev/null +++ b/packages/core/scss/components/colorpicker/_theme.scss @@ -0,0 +1,10 @@ +@mixin kendo-color-picker--theme-base() { + + // Color picker + .k-color-picker {} + +} + +@mixin kendo-color-picker--theme() { + @include kendo-color-picker--theme-base(); +} diff --git a/packages/core/scss/components/colorpicker/_variables.scss b/packages/core/scss/components/colorpicker/_variables.scss new file mode 100644 index 00000000000..4d6228f1ec5 --- /dev/null +++ b/packages/core/scss/components/colorpicker/_variables.scss @@ -0,0 +1 @@ +// Color picker diff --git a/packages/core/scss/components/combobox/_index.scss b/packages/core/scss/components/combobox/_index.scss new file mode 100644 index 00000000000..0396a670256 --- /dev/null +++ b/packages/core/scss/components/combobox/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-combobox--styles() { + @include import-once( "combobox" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-icon--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-combobox--layout(); + @include kendo-combobox--theme(); + } +} diff --git a/packages/core/scss/components/combobox/_layout.scss b/packages/core/scss/components/combobox/_layout.scss new file mode 100644 index 00000000000..d9d75d1ad5c --- /dev/null +++ b/packages/core/scss/components/combobox/_layout.scss @@ -0,0 +1,11 @@ +@mixin kendo-combobox--layout-base() { + + // Combobox + .k-combobox {} + +} + + +@mixin kendo-combobox--layout() { + @include kendo-combobox--layout-base(); +} diff --git a/packages/core/scss/components/combobox/_theme.scss b/packages/core/scss/components/combobox/_theme.scss new file mode 100644 index 00000000000..2e237f116d0 --- /dev/null +++ b/packages/core/scss/components/combobox/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-combobox--theme-base() { + + // Combobox + .k-combobox {} + +} + + +@mixin kendo-combobox--theme() { + @include kendo-combobox--theme-base(); +} diff --git a/packages/core/scss/components/combobox/_variables.scss b/packages/core/scss/components/combobox/_variables.scss new file mode 100644 index 00000000000..ad50112beba --- /dev/null +++ b/packages/core/scss/components/combobox/_variables.scss @@ -0,0 +1 @@ +// Combobox diff --git a/packages/core/scss/components/dataviz/_index.scss b/packages/core/scss/components/dataviz/_index.scss new file mode 100644 index 00000000000..25b9faebe78 --- /dev/null +++ b/packages/core/scss/components/dataviz/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../tooltip/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-dataviz--styles() { + @include import-once( "dataviz" ) { + @include core-styles(); + @include kendo-popup--styles(); + @include kendo-tooltip--styles(); + @include kendo-dataviz--layout(); + @include kendo-dataviz--theme(); + } +} diff --git a/packages/core/scss/components/dataviz/_layout.scss b/packages/core/scss/components/dataviz/_layout.scss new file mode 100644 index 00000000000..7635168b76e --- /dev/null +++ b/packages/core/scss/components/dataviz/_layout.scss @@ -0,0 +1,580 @@ +@use "sass:string"; +@use "sass:math"; +@use "sass:meta"; +@use "../../color-system/_functions.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../typography/index.import.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; +@use "../tooltip/_variables.scss" as *; + +@mixin kendo-dataviz--layout-base() { + + // Barcode + .k-barcode { + display: inline-block; + + > div { + height: 150px; + } + } + + // Elements + .k-chart, + .k-sparkline, + .k-stockchart { + border-width: $kendo-chart-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-chart-font-family; + font-size: $kendo-chart-font-size; + line-height: $kendo-chart-line-height; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + } + + .k-chart, + .k-stockchart { + display: block; + height: 400px; + } + + .k-chart-surface { + height: 100%; + } + + .k-chart .k-popup { + border-width: 0; + } + + .k-chart-tooltip-wrapper .k-animation-container-shown, + .k-chart-tooltip-wrapper.k-animation-container-shown { + @include border-radius( k-border-radius(md) ); + transition: $kendo-chart-tooltip-transition; + } + + .k-sparkline-tooltip-wrapper, + .k-chart-tooltip-wrapper { + z-index: 12000; + + .k-popup { + @include border-radius( k-border-radius(md) ); + padding: 0; + border-width: 0; + background: transparent; + } + } + + .k-chart-tooltip table { + border-spacing: 0; + border-collapse: collapse; + } + + .k-chart-tooltip { + @include border-radius( k-border-radius(md) ); + font-size: $kendo-chart-tooltip-font-size; + line-height: var( --kendo-line-height, normal ); + padding-block: $kendo-tooltip-padding-y; + padding-inline: $kendo-tooltip-padding-x; + } + + .k-chart-tooltip th { + width: auto; + text-align: center; + padding: 1px; + } + + .k-chart-tooltip td { + width: auto; + text-align: start; + padding-block: $kendo-chart-tooltip-padding-y; + padding-inline: $kendo-chart-tooltip-padding-x; + line-height: var( --kendo-line-height, normal ); + vertical-align: middle; + } + + .k-chart-crosshair-tooltip, + .k-chart-shared-tooltip { + border-width: 1px; + border-style: solid; + } + + .k-chart-shared-tooltip .k-chart-shared-tooltip-marker { + display: block; + width: 15px; + height: 3px; + vertical-align: middle; + } + + // Selection + .k-selector { + position: absolute; + transform: translateZ(0); + } + + .k-selection { + position: absolute; + height: 100%; + border-width: 1px; + border-style: solid; + border-bottom: 0; + } + + .k-selection-bg { + position: absolute; + width: 100%; + height: 100%; + } + + .k-handle { + @include border-radius( 50% ); + width: $kendo-chart-selection-handle-size; + height: $kendo-chart-selection-handle-size; + border-width: 1px; + border-style: solid; + z-index: 1; + position: absolute; + box-sizing: content-box; + } + + .k-handle div { + width: 100%; + height: 100%; + } + + .k-left-handle { + left: - math.div( $kendo-chart-selection-handle-size, 2 ); + } + + .k-right-handle { + right: - math.div( $kendo-chart-selection-handle-size, 2 ); + } + + .k-left-handle div { + margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 )); + padding: ($kendo-chart-selection-handle-size * 2) (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2) 0 0; + } + + .k-right-handle div { + margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 )); + padding: ($kendo-chart-selection-handle-size * 2) 0 0 (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2); + } + + .k-left-handle.k-handle-active div { + margin-left: -($kendo-chart-selection-handle-size * 2); + padding-left: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 ); + } + + .k-right-handle.k-handle-active div { + margin-left: -($kendo-chart-selection-handle-size * 2); + padding-right: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 ); + } + + .k-mask { + position: absolute; + height: 100%; + } + + // Navigator hint + .k-navigator-hint div { + position: absolute; + } + + .k-navigator-hint .k-scroll { + @include border-radius( k-border-radius(md) ); + position: absolute; + height: 4px; + } + + .k-navigator-hint .k-tooltip { + margin-top: 20px; + min-width: 160px; + opacity: 1; + text-align: center; + } + + // Sparklines + .k-sparkline, + .k-sparkline span { + display: inline-block; + vertical-align: top; + } + + .k-sparkline span { + height: 100%; + width: 100%; + } + + .k-chart-dragging { + user-select: none; + } + + .k-chart-donut-center { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + border-radius: 50%; + text-align: center; + + border: 4px solid transparent; + box-sizing: border-box; + } + + .k-pdf-export { + .k-chart, + .k-sparkline, + .k-stockchart { + .k-animation-container { + display: none; + } + } + } + + // Chart Overlay + .k-chart-overlay { + margin: 0; + width: 100%; + height: if( --kendo-chart-computed-title-height, calc( 100% - var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ) ), 100% ); + position: absolute; + top: 0; + left: 0; + opacity: 1; + z-index: 10001; + + &-top { + top: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ); + } + + .k-no-data { + min-height: auto; + padding-block-start: $kendo-chart-no-data-padding-y; + color: inherit; + font-size: $kendo-chart-no-data-font-size; + font-weight: $kendo-chart-no-data-font-weight; + } + } + + // Diagram + .k-diagram { + height: 600px; + } + + .k-diagram .km-scroll-wrapper { + width: 100%; + height: 100%; + position: relative; + } + + .k-diagram .km-scroll-wrapper { + width: 100%; + height: 100%; + position: relative; + } + + .k-canvas-container { + width: 100%; + height: 100%; + } + + + // Sankey labels + .k-sankey text { + pointer-events: none; + } + + // Treemap + .k-treemap { + height: 400px; + box-sizing: border-box; + border-width: 1px; + border-style: solid; + outline: 0; + font-family: $kendo-treemap-font-family; + font-size: $kendo-treemap-font-size; + line-height: $kendo-treemap-line-height; + display: block; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + // Tile + .k-treemap-tile { + margin: -1px 0 0 -1px; + height: 100%; + box-sizing: border-box; + border: 1px solid; + border-color: inherit; + color: inherit; + background-color: inherit; + overflow: hidden; + position: absolute; + } + > .k-treemap-tile { + position: relative; + } + + // Title + .k-treemap-title { + padding-block: $kendo-treemap-padding-y; + padding-inline: $kendo-treemap-padding-x; + border-width: 0 0 1px; + border-style: solid; + border-color: inherit; + font-size: var( --kendo-font-size, inherit ); + background-position: 0 0; + background-repeat: repeat-x; + } + .k-treemap-title-vertical { + padding-block: $kendo-treemap-padding-x; + padding-inline: $kendo-treemap-padding-y; + width: $kendo-line-height-em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + position: absolute; + top: 0; + bottom: 0; + + > div { + transform-origin: right; + transform: rotate(-90deg); + position: absolute; + top: 0; + right: 1em; + } + } + + + // Wrap + .k-treemap-wrap { + border-color: inherit; + color: inherit; + background-color: inherit; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + .k-treemap-title + .k-treemap-wrap { + top: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px); + } + .k-treemap-title-vertical + .k-treemap-wrap { + left: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px); + } + + + // Leaf + .k-leaf { + padding: $kendo-treemap-padding-x; + } + } + + + + + // Gauge + .k-gauge { + text-align: start; + position: relative; + } + + .k-arcgauge, + .k-circulargauge { + display: inline-block; + } + + .k-arcgauge-label, + .k-circulargauge-label { + position: absolute; + text-align: center; + padding: 0; + margin: 0; + } + + + // qrcode + .k-qrcode { + display: inline-block; + + > div { + height: 150px; + } + } + + + + + // export variables to allow use in scripts + // TODO: remove in favor of $_css-vars once all suites are updated + $exported: ( + primary: $kendo-color-primary, + primary-contrast: $kendo-color-primary-contrast, + base: $kendo-base-bg, + background: $kendo-chart-bg, + + normal-background: $kendo-base-bg, + normal-text-color: $kendo-base-text, + + series-a: $kendo-series-a, + series-b: $kendo-series-b, + series-c: $kendo-series-c, + series-d: $kendo-series-d, + series-e: $kendo-series-e, + series-f: $kendo-series-f, + + series-1: $kendo-series-1, + series-2: $kendo-series-2, + series-3: $kendo-series-3, + series-4: $kendo-series-4, + series-5: $kendo-series-5, + series-6: $kendo-series-6, + series-7: $kendo-series-7, + series-8: $kendo-series-8, + series-9: $kendo-series-9, + series-10: $kendo-series-10, + series-11: $kendo-series-11, + series-12: $kendo-series-12, + series-13: $kendo-series-13, + series-14: $kendo-series-14, + series-15: $kendo-series-15, + series-16: $kendo-series-16, + series-17: $kendo-series-17, + series-18: $kendo-series-18, + series-19: $kendo-series-19, + series-20: $kendo-series-20, + series-21: $kendo-series-21, + series-22: $kendo-series-22, + series-23: $kendo-series-23, + series-24: $kendo-series-24, + series-25: $kendo-series-25, + series-26: $kendo-series-26, + series-27: $kendo-series-27, + series-28: $kendo-series-28, + series-29: $kendo-series-29, + series-30: $kendo-series-30, + + gauge-pointer: $kendo-color-primary, + gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )), + + chart-font-size: $kendo-chart-font-size, + chart-title-font-size: $kendo-chart-title-font-size, + chart-pane-title-font-size: $kendo-chart-pane-title-font-size, + chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight, + chart-label-font-size: $kendo-chart-label-font-size, + + chart-inactive: $kendo-chart-inactive, + chart-major-lines: $kendo-chart-major-lines, + chart-minor-lines: $kendo-chart-minor-lines, + chart-area-opacity: $kendo-chart-area-opacity, + chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity, + chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity, + chart-notes-background: $kendo-chart-notes-background, + chart-notes-border: $kendo-chart-notes-border, + chart-notes-lines: $kendo-chart-notes-lines, + chart-crosshair-background: $kendo-chart-crosshair-background, + chart-error-bars-background: $kendo-chart-error-bars-background, + + ); + + // TODO: remove in favor of CSS variables once all suites are updated + @each $name, $value in $exported { + $type: meta.type-of($value); + + .k-var--#{$name} { + @if $type == "color" or $type == "string" and string.index($value, "color") { + // background-color can store any color + background-color: #{$value}; + } @else if string.index($name, "font-size") { + font-size: #{$value}; + } @else if string.index($name, "font-weight") { + font-weight: #{$value}; + } @else if string.index($name, "opacity") { + opacity: #{$value}; + } + + } + } + + $_css-vars: ( + chart-primary-bg: $kendo-color-primary, + chart-primary-contrast: $kendo-color-primary-contrast, + chart-bg: $kendo-chart-bg, + chart-text: $kendo-chart-text, + + chart-font-size: $kendo-chart-font-size, + chart-title-font-size: $kendo-chart-title-font-size, + chart-pane-title-font-size: $kendo-chart-pane-title-font-size, + chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight, + chart-label-font-size: $kendo-chart-label-font-size, + + chart-inactive: $kendo-chart-inactive, + chart-major-lines: $kendo-chart-major-lines, + chart-minor-lines: $kendo-chart-minor-lines, + chart-area-opacity: $kendo-chart-area-opacity, + chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity, + chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity, + chart-notes-bg: $kendo-chart-notes-background, + chart-notes-border: $kendo-chart-notes-border, + chart-notes-lines: $kendo-chart-notes-lines, + chart-crosshair-bg: $kendo-chart-crosshair-background, + chart-error-bars-bg: $kendo-chart-error-bars-background, + + chart-series-1: $kendo-series-1, + chart-series-2: $kendo-series-2, + chart-series-3: $kendo-series-3, + chart-series-4: $kendo-series-4, + chart-series-5: $kendo-series-5, + chart-series-6: $kendo-series-6, + chart-series-7: $kendo-series-7, + chart-series-8: $kendo-series-8, + chart-series-9: $kendo-series-9, + chart-series-10: $kendo-series-10, + chart-series-11: $kendo-series-11, + chart-series-12: $kendo-series-12, + chart-series-13: $kendo-series-13, + chart-series-14: $kendo-series-14, + chart-series-15: $kendo-series-15, + chart-series-16: $kendo-series-16, + chart-series-17: $kendo-series-17, + chart-series-18: $kendo-series-18, + chart-series-19: $kendo-series-19, + chart-series-20: $kendo-series-20, + chart-series-21: $kendo-series-21, + chart-series-22: $kendo-series-22, + chart-series-23: $kendo-series-23, + chart-series-24: $kendo-series-24, + chart-series-25: $kendo-series-25, + chart-series-26: $kendo-series-26, + chart-series-27: $kendo-series-27, + chart-series-28: $kendo-series-28, + chart-series-29: $kendo-series-29, + chart-series-30: $kendo-series-30, + + chart-gauge-pointer: $kendo-color-primary, + chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )) + + ); + + .k-chart, + .k-diagram, + .k-gauge, + .k-sparkline { + @each $name, $value in $_css-vars { + --kendo-#{$name}: #{$value}; + } + } + +} + + +@mixin kendo-dataviz--layout() { + @include kendo-dataviz--layout-base(); +} diff --git a/packages/core/scss/components/dataviz/_theme.scss b/packages/core/scss/components/dataviz/_theme.scss new file mode 100644 index 00000000000..757a6eecbe0 --- /dev/null +++ b/packages/core/scss/components/dataviz/_theme.scss @@ -0,0 +1,122 @@ + +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; +@use "../button/_variables.scss" as *; + +@mixin kendo-dataviz--theme-base() { + + // Elements + .k-chart, + .k-sparkline, + .k-stockchart { + @include fill( + $kendo-chart-text, + transparent, + $kendo-chart-border + ); + + .k-popup { + background: transparent; + } + } + + + // Tooltip + // TODO + .k-chart-tooltip { + color: $kendo-color-white; + } + .k-chart-tooltip-inverse { + color: $kendo-color-black; + } + + .k-chart-crosshair-tooltip, + .k-chart-shared-tooltip { + color: $kendo-chart-crosshair-shared-tooltip-color; + background-color: $kendo-chart-crosshair-shared-tooltip-background; + border-color: $kendo-chart-crosshair-shared-tooltip-border; + } + + .k-selection { + border-color: $kendo-chart-selection-border-color; + box-shadow: $kendo-chart-selection-shadow; + } + + .k-selection-bg { + background-color: transparent; + } + + .k-handle { + cursor: e-resize; + + // TODO: refactor and remove button dependency + @include fill( + $kendo-button-text, + $kendo-button-bg, + $kendo-button-border, + $kendo-button-gradient + ); + + &:hover { + @include fill( + $kendo-button-hover-text, + $kendo-button-hover-bg, + $kendo-button-hover-border, + $kendo-button-hover-gradient + ); + } + } + + .k-handle div { + background-color: transparent; + } + + .k-mask { + background-color: $kendo-component-bg; + opacity: .8; + } + + .k-chart-overlay { + background-color: $kendo-chart-overlay-bg; + } + + + // Treemap + .k-treemap { + @include fill( + $kendo-component-text, + $kendo-component-bg, + $kendo-component-border + ); + + // Title + .k-treemap-title { + @include fill( + $kendo-component-header-text, + $kendo-component-header-bg, + $kendo-component-header-border, + $kendo-component-header-gradient + ); + } + + // Leaf + .k-leaf { + color: $kendo-component-bg; + } + .k-leaf.k-inverse { + color: $kendo-component-text; + } + .k-leaf:hover, + .k-leaf.k-hover { + box-shadow: inset 0 0 0 3px $kendo-component-border; + } + } + +} + + +@mixin kendo-dataviz--theme() { + @include kendo-dataviz--theme-base(); +} diff --git a/packages/core/scss/components/dataviz/_variables.scss b/packages/core/scss/components/dataviz/_variables.scss new file mode 100644 index 00000000000..1be442b3d9a --- /dev/null +++ b/packages/core/scss/components/dataviz/_variables.scss @@ -0,0 +1,148 @@ +// Chart + +/// The first base series color and its light and dark shades. +/// @group charts +$kendo-series-a: null !default; +$kendo-series-a-dark: null !default; +$kendo-series-a-darker: null !default; +$kendo-series-a-light: null !default; +$kendo-series-a-lighter: null !default; + +/// The second base series color and its light and dark shades. +/// @group charts +$kendo-series-b: null !default; +$kendo-series-b-dark: null !default; +$kendo-series-b-darker: null !default; +$kendo-series-b-light: null !default; +$kendo-series-b-lighter: null !default; + +/// The third base series color and its light and dark shades. +/// @group charts +$kendo-series-c: null !default; +$kendo-series-c-dark: null !default; +$kendo-series-c-darker: null !default; +$kendo-series-c-light: null !default; +$kendo-series-c-lighter: null !default; + +/// The fourth base series color and its light and dark shades. +/// @group charts +$kendo-series-d: null !default; +$kendo-series-d-dark: null !default; +$kendo-series-d-darker: null !default; +$kendo-series-d-light: null !default; +$kendo-series-d-lighter: null !default; + +/// The fifth base series color and its light and dark shades. +/// @group charts +$kendo-series-e: null !default; +$kendo-series-e-dark: null !default; +$kendo-series-e-darker: null !default; +$kendo-series-e-light: null !default; +$kendo-series-e-lighter: null !default; + +/// The sixth base series color and its light and dark shades. +/// @group charts +$kendo-series-f: null !default; +$kendo-series-f-dark: null !default; +$kendo-series-f-darker: null !default; +$kendo-series-f-light: null !default; +$kendo-series-f-lighter: null !default; + +/// The series colors in order: +/// base, light, dark, lighter, darker +/// @group charts +$kendo-series-1: null !default; +$kendo-series-2: null !default; +$kendo-series-3: null !default; +$kendo-series-4: null !default; +$kendo-series-5: null !default; +$kendo-series-6: null !default; +$kendo-series-7: null !default; +$kendo-series-8: null !default; +$kendo-series-9: null !default; +$kendo-series-10: null !default; +$kendo-series-11: null !default; +$kendo-series-12: null !default; +$kendo-series-13: null !default; +$kendo-series-14: null !default; +$kendo-series-15: null !default; +$kendo-series-16: null !default; +$kendo-series-17: null !default; +$kendo-series-18: null !default; +$kendo-series-19: null !default; +$kendo-series-20: null !default; +$kendo-series-21: null !default; +$kendo-series-22: null !default; +$kendo-series-23: null !default; +$kendo-series-24: null !default; +$kendo-series-25: null !default; +$kendo-series-26: null !default; +$kendo-series-27: null !default; +$kendo-series-28: null !default; +$kendo-series-29: null !default; +$kendo-series-30: null !default; + +$kendo-chart-border-width: null !default; +$kendo-chart-font-family: null !default; +$kendo-chart-font-size: null !default; +$kendo-chart-line-height: null !default; +$kendo-chart-tooltip-font-size: null !default; +$kendo-chart-label-font-size: null !default; +$kendo-chart-title-font-size: null !default; +$kendo-chart-pane-title-font-size: null !default; +$kendo-chart-pane-title-font-weight: null !default; + +/// The color of the Chart grid lines (major). +/// @group charts +$kendo-chart-major-lines: null !default; + +/// The color of the Chart grid lines (minor). +/// @group charts +$kendo-chart-minor-lines: null !default; + +$kendo-chart-inactive: null !default; +$kendo-chart-area-opacity: null !default; +$kendo-chart-area-inactive-opacity: null !default; +$kendo-chart-line-inactive-opacity: null !default; + +$kendo-chart-tooltip-padding-x: null !default; +$kendo-chart-tooltip-padding-y: null !default; + +$kendo-chart-tooltip-transition: null !default; + +$kendo-chart-bg: null !default; +$kendo-chart-text: null !default; +$kendo-chart-border: null !default; + +$kendo-chart-crosshair-background: null !default; +$kendo-chart-crosshair-shared-tooltip-color: null !default; +$kendo-chart-crosshair-shared-tooltip-background: null !default; +$kendo-chart-crosshair-shared-tooltip-border: null !default; + +$kendo-chart-notes-background: null !default; +$kendo-chart-notes-border: null !default; +$kendo-chart-notes-lines: null !default; + +$kendo-chart-error-bars-background: null !default; + +$kendo-chart-selection-handle-size: null !default; +$kendo-chart-selection-border-color: null !default; +$kendo-chart-selection-shadow: null !default; + +$kendo-chart-computed-title-height: null !default; + +// TreeMap +$kendo-treemap-font-family: null !default; +$kendo-treemap-font-size: null !default; +$kendo-treemap-line-height: null !default; + +$kendo-treemap-padding-x: null !default; +$kendo-treemap-padding-y: null !default; + +// Chart Overlay +$kendo-chart-overlay-bg: null !default; + +// No Data +$kendo-chart-no-data-font-size: null !default; +$kendo-chart-no-data-font-weight: null !default; +$kendo-chart-no-data-padding-y: null !default; diff --git a/packages/core/scss/components/dateinput/_index.scss b/packages/core/scss/components/dateinput/_index.scss new file mode 100644 index 00000000000..fa624c0d413 --- /dev/null +++ b/packages/core/scss/components/dateinput/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-date-input--styles() { + @include import-once( "date-input" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-date-input--layout(); + @include kendo-date-input--theme(); + } +} diff --git a/packages/core/scss/components/dateinput/_layout.scss b/packages/core/scss/components/dateinput/_layout.scss new file mode 100644 index 00000000000..0a054ff7b11 --- /dev/null +++ b/packages/core/scss/components/dateinput/_layout.scss @@ -0,0 +1,11 @@ +@mixin kendo-date-input--layout-base() { + + // Date input + .k-dateinput {} + +} + + +@mixin kendo-date-input--layout() { + @include kendo-date-input--layout-base(); +} diff --git a/packages/core/scss/components/dateinput/_theme.scss b/packages/core/scss/components/dateinput/_theme.scss new file mode 100644 index 00000000000..d2e640b3154 --- /dev/null +++ b/packages/core/scss/components/dateinput/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-date-input--theme-base() { + + // Date input + .k-dateinput {} + +} + + +@mixin kendo-date-input--theme() { + @include kendo-date-input--theme-base(); +} diff --git a/packages/core/scss/components/dateinput/_variables.scss b/packages/core/scss/components/dateinput/_variables.scss new file mode 100644 index 00000000000..b741700fe48 --- /dev/null +++ b/packages/core/scss/components/dateinput/_variables.scss @@ -0,0 +1 @@ +// Date input diff --git a/packages/core/scss/components/datepicker/_index.scss b/packages/core/scss/components/datepicker/_index.scss new file mode 100644 index 00000000000..23e99709a6b --- /dev/null +++ b/packages/core/scss/components/datepicker/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../calendar/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-date-picker--styles() { + @include import-once( "date-picker" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-popup--styles(); + @include kendo-calendar--styles(); + @include kendo-date-picker--layout(); + @include kendo-date-picker--theme(); + } +} diff --git a/packages/core/scss/components/datepicker/_layout.scss b/packages/core/scss/components/datepicker/_layout.scss new file mode 100644 index 00000000000..bce9315a85b --- /dev/null +++ b/packages/core/scss/components/datepicker/_layout.scss @@ -0,0 +1,10 @@ +@mixin kendo-date-picker--layout-base() { + + // Date picker + .k-datepicker {} + +} + +@mixin kendo-date-picker--layout() { + @include kendo-date-picker--layout-base(); +} diff --git a/packages/core/scss/components/datepicker/_theme.scss b/packages/core/scss/components/datepicker/_theme.scss new file mode 100644 index 00000000000..dad65bf242d --- /dev/null +++ b/packages/core/scss/components/datepicker/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-date-picker--theme-base() { + + // Date picker + .k-datepicker {} + +} + + +@mixin kendo-date-picker--theme() { + @include kendo-date-picker--theme-base(); +} diff --git a/packages/core/scss/components/datepicker/_variables.scss b/packages/core/scss/components/datepicker/_variables.scss new file mode 100644 index 00000000000..55ddf3ca573 --- /dev/null +++ b/packages/core/scss/components/datepicker/_variables.scss @@ -0,0 +1 @@ +// Datepicker diff --git a/packages/core/scss/components/daterangepicker/_index.scss b/packages/core/scss/components/daterangepicker/_index.scss new file mode 100644 index 00000000000..21f8a6e4d3c --- /dev/null +++ b/packages/core/scss/components/daterangepicker/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; +@use "../popup/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-date-range-picker--styles() { + @include import-once( "date-range-picker" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-popup--styles(); + @include kendo-icon--styles(); + @include kendo-date-range-picker--layout(); + @include kendo-date-range-picker--theme(); + } +} diff --git a/packages/core/scss/components/daterangepicker/_layout.scss b/packages/core/scss/components/daterangepicker/_layout.scss new file mode 100644 index 00000000000..d967a4fdf9e --- /dev/null +++ b/packages/core/scss/components/daterangepicker/_layout.scss @@ -0,0 +1,52 @@ +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../input/_variables.scss" as *; + +@mixin kendo-date-range-picker--layout-base() { + + // Daterange picker + .k-daterange-picker { + width: $kendo-input-default-width; + display: flex; + flex-flow: row nowrap; + align-items: flex-end; + gap: k-spacing(2); + + *, + *::before, + *::after { + box-sizing: border-box; + } + + .k-dateinput { + width: $kendo-daterange-picker-input-width; + } + } + + + // Angular specific + kendo-daterange { + // @extend .k-daterangepicker !optional; + } + + + // React specific + .k-daterangepicker-wrap { + display: inherit; + flex-flow: inherit; + align-items: inherit; + gap: inherit; + } + + + // Alias + .k-daterangepicker { + @extend .k-daterange-picker !optional; + } + +} + + +@mixin kendo-date-range-picker--layout() { + @include kendo-date-range-picker--layout-base(); +} diff --git a/packages/core/scss/components/daterangepicker/_theme.scss b/packages/core/scss/components/daterangepicker/_theme.scss new file mode 100644 index 00000000000..da034865883 --- /dev/null +++ b/packages/core/scss/components/daterangepicker/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-date-range-picker--theme-base() { + + // Date range picker + .k-daterangepicker {} + +} + + +@mixin kendo-date-range-picker--theme() { + @include kendo-date-range-picker--theme-base(); +} diff --git a/packages/core/scss/components/daterangepicker/_variables.scss b/packages/core/scss/components/daterangepicker/_variables.scss new file mode 100644 index 00000000000..5fcec8ba636 --- /dev/null +++ b/packages/core/scss/components/daterangepicker/_variables.scss @@ -0,0 +1,2 @@ +// Daterangepicker +$kendo-daterange-picker-input-width: null !default; diff --git a/packages/core/scss/components/datetimepicker/_index.scss b/packages/core/scss/components/datetimepicker/_index.scss new file mode 100644 index 00000000000..11130c148e0 --- /dev/null +++ b/packages/core/scss/components/datetimepicker/_index.scss @@ -0,0 +1,30 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; +@use "../calendar/_index.scss" as *; +@use "../timeselector/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-date-time-picker--styles() { + @include import-once( "date-time-picker" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-button--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-calendar--styles(); + @include kendo-time-selector--styles(); + @include kendo-action-buttons--styles(); + @include kendo-date-time-picker--layout(); + @include kendo-date-time-picker--theme(); + } +} diff --git a/packages/core/scss/components/datetimepicker/_layout.scss b/packages/core/scss/components/datetimepicker/_layout.scss new file mode 100644 index 00000000000..c861238717b --- /dev/null +++ b/packages/core/scss/components/datetimepicker/_layout.scss @@ -0,0 +1,56 @@ +@use "./variables.scss" as *; +@use "../action-buttons/_variables.scss" as *; + +@mixin kendo-date-time-picker--layout-base() { + + // Datetime container + .k-datetime-container {} + + // Datetime selector + .k-datetime-selector { + display: flex; + transition: transform .2s; + } + + // Wrap + .k-datetime-wrap { + width: $kendo-datetime-width; + overflow: hidden; + + .k-datetime-buttongroup { + padding-block: $kendo-actions-padding-y; + padding-inline: $kendo-actions-padding-x; + } + + .k-calendar, + .k-timeselector { + width: 100%; + border-width: 0; + } + } + + // Inner wrap + .k-datetime-calendar-wrap, + .k-datetime-time-wrap { + text-align: center; + flex: 0 0 $kendo-datetime-width; + } + + // Tabs + .k-date-tab .k-datetime-selector { + transform: translateX(0); + } + .k-time-tab .k-datetime-selector { + transform: translateX(-100%); + } + + :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector, + .k-time-tab .k-datetime-selector:is(.k-rtl, [dir="rtl"]) { + transform: translateX(100%); + } +} + + +@mixin kendo-date-time-picker--layout() { + @include kendo-date-time-picker--layout-base(); +} diff --git a/packages/core/scss/components/datetimepicker/_theme.scss b/packages/core/scss/components/datetimepicker/_theme.scss new file mode 100644 index 00000000000..6716fe9d63a --- /dev/null +++ b/packages/core/scss/components/datetimepicker/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-date-time-picker--theme-base() { + + // Datetime picker + .k-datetimepicker {} + +} + + +@mixin kendo-date-time-picker--theme() { + @include kendo-date-time-picker--theme-base(); +} diff --git a/packages/core/scss/components/datetimepicker/_variables.scss b/packages/core/scss/components/datetimepicker/_variables.scss new file mode 100644 index 00000000000..7a6065afd44 --- /dev/null +++ b/packages/core/scss/components/datetimepicker/_variables.scss @@ -0,0 +1,2 @@ +// DateTime +$kendo-datetime-width: null !default; diff --git a/packages/core/scss/components/dialog/_index.scss b/packages/core/scss/components/dialog/_index.scss new file mode 100644 index 00000000000..e8ab63b3b50 --- /dev/null +++ b/packages/core/scss/components/dialog/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../window/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-dialog--styles() { + @include import-once( "dialog" ) { + @include core-styles(); + @include kendo-window--styles(); + @include kendo-dialog--layout(); + @include kendo-dialog--theme(); + } +} diff --git a/packages/core/scss/components/dialog/_layout.scss b/packages/core/scss/components/dialog/_layout.scss new file mode 100644 index 00000000000..13ea6cac37b --- /dev/null +++ b/packages/core/scss/components/dialog/_layout.scss @@ -0,0 +1,78 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../window/_variables.scss" as *; + +@mixin kendo-dialog--layout-base() { + + .k-dialog-wrapper { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + outline: 0; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10001; + + .k-dialog { + position: relative; + } + } + + .k-dialog { + padding: 0; + position: fixed; + box-sizing: border-box; + + // Centered + &.k-dialog-centered { + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + } + + .k-multiselect { + width: 100%; + } + } + + + // Titlebar + .k-dialog-titlebar {} + .k-dialog-title {} + + + // Actions + .k-dialog-titlebar-actions {} + .k-dialog-action {} + + + // Content + .k-dialog-content {} + + + // Buttons + .k-dialog-actions { + @include border-bottom-radius( $kendo-window-border-radius ); + padding-block: $kendo-dialog-buttongroup-padding-y; + padding-inline: $kendo-dialog-buttongroup-padding-x; + border-width: $kendo-dialog-buttongroup-border-width 0 0; + border-style: solid; + border-color: inherit; + flex: 0 0 auto; + display: flex; + flex-flow: row wrap; + align-items: center; + gap: $kendo-dialog-button-spacing; + overflow: hidden; + } + +} + + +@mixin kendo-dialog--layout() { + @include kendo-dialog--layout-base(); +} diff --git a/packages/core/scss/components/dialog/_theme.scss b/packages/core/scss/components/dialog/_theme.scss new file mode 100644 index 00000000000..577e4bd6d81 --- /dev/null +++ b/packages/core/scss/components/dialog/_theme.scss @@ -0,0 +1,31 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-dialog--theme-base() { + + // Dialog titlebar + .k-dialog-titlebar { + @include fill( + $kendo-dialog-titlebar-text, + $kendo-dialog-titlebar-bg, + $kendo-dialog-titlebar-border + ); + } + + // Dialog theme colors + @each $name, $color in $kendo-dialog-theme-colors { + .k-dialog-#{$name} .k-dialog-titlebar { + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + background-color: $color; + } + } + +} + + +@mixin kendo-dialog--theme() { + @include kendo-dialog--theme-base(); +} diff --git a/packages/core/scss/components/dialog/_variables.scss b/packages/core/scss/components/dialog/_variables.scss new file mode 100644 index 00000000000..d6a02bff129 --- /dev/null +++ b/packages/core/scss/components/dialog/_variables.scss @@ -0,0 +1,28 @@ +// Dialog + +/// The background color of the Dialog titlebar. +/// @group dialog +$kendo-dialog-titlebar-bg: null !default; +/// The text color of the Dialog titlebar. +/// @group dialog +$kendo-dialog-titlebar-text: null !default; +/// The border color of the Dialog titlebar. +/// @group dialog +$kendo-dialog-titlebar-border: null !default; + +/// The horizontal padding of the Dialog action buttons. +/// @group dialog +$kendo-dialog-buttongroup-padding-x: null !default; +/// The vertical padding of the Dialog action buttons. +/// @group dialog +$kendo-dialog-buttongroup-padding-y: null !default; +/// The width of the top border of the Dialog action buttons. +/// @group dialog +$kendo-dialog-buttongroup-border-width: null !default; +/// The spacing between the Dialog action buttons. +/// @group dialog +$kendo-dialog-button-spacing: null !default; + +/// The theme colors map for the Dialog. +/// @group dialog +$kendo-dialog-theme-colors: null !default; diff --git a/packages/core/scss/components/dock-manager/_index.scss b/packages/core/scss/components/dock-manager/_index.scss new file mode 100644 index 00000000000..bbfbf252077 --- /dev/null +++ b/packages/core/scss/components/dock-manager/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../splitter/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../tabstrip/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-dock-manager--styles() { + @include import-once("dock-manager") { + @include core-styles(); + @include kendo-splitter--styles(); + @include kendo-toolbar--styles(); + @include kendo-tabstrip--styles(); + @include kendo-dock-manager--layout(); + @include kendo-dock-manager--theme(); + } +} diff --git a/packages/core/scss/components/dock-manager/_layout.scss b/packages/core/scss/components/dock-manager/_layout.scss new file mode 100644 index 00000000000..571ab92e800 --- /dev/null +++ b/packages/core/scss/components/dock-manager/_layout.scss @@ -0,0 +1,225 @@ +@use "../../typography/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-dock-manager--layout-base() { + + // DockManager + .k-dock-manager { + width: 100%; + height: 100%; + border-width: $kendo-dock-manager-border-width; + border-style: $kendo-dock-manager-border-style; + position: relative; + display: flex; + flex-flow: row nowrap; + overflow: auto; + box-sizing: border-box; + } + + // Toolbar + .k-dock-manager-toolbar { + border-width: 0 $kendo-dock-manager-border-width 0 0; + border-color: inherit; + flex-shrink: 0; + writing-mode: vertical-lr; + box-shadow: none; + + &::before { + height: 0; + } + + .k-separator-horizontal { + width: $kendo-line-height-em; + height: 0; + border-width: $kendo-dock-manager-border-width 0 0; + } + } + + // Panes + .k-dock-manager-pane-container { + width: 100%; + height: 100%; + display: flex; + flex-grow: 1; + overflow: hidden; + } + + // Splitter + .k-dock-manager-splitter, + .k-dock-manager-unpinned-container { + height: 100%; + border-width: 0; + align-items: stretch; + + > .k-pane { + height: auto; + flex-direction: column; + border-color: inherit; + } + + .k-pane-header { + display: flex; + align-items: center; + justify-content: center; + padding-block: $kendo-dock-manager-pane-header-padding-y; + padding-inline: $kendo-dock-manager-pane-header-padding-x; + border-block-end-width: $kendo-dock-manager-pane-header-border-width; + border-block-end-style: $kendo-dock-manager-pane-header-border-style; + border-color: inherit; + } + + .k-pane-title { + padding-block: $kendo-dock-manager-pane-title-padding-y; + padding-inline: $kendo-dock-manager-pane-title-padding-x; + font-family: $kendo-dock-manager-pane-title-font-family; + font-size: $kendo-dock-manager-pane-title-font-size; + line-height: $kendo-dock-manager-pane-title-line-height; + font-weight: $kendo-dock-manager-pane-title-font-weight; + flex: 1 1 auto; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .k-pane-scrollable { + height: 100%; + display: flex; + flex-direction: column; + border-color: inherit; + } + + .k-pane-content { + height: 100%; + padding-block: $kendo-dock-manager-pane-content-padding-y; + padding-inline: $kendo-dock-manager-pane-content-padding-x; + overflow: auto; + flex: 1; + } + + .k-pane-actions { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + } + + .k-pane-tabbed { + padding-block-start: $kendo-dock-manager-tabbed-pane-padding-y; + padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x; + padding-inline: $kendo-dock-manager-tabbed-pane-padding-x; + } + + .k-splitbar { + border-width: 0 1px; + border-style: solid; + border-color: inherit; + } + .k-splitbar-vertical { + border-width: 1px 0; + } + } + + // Unpinned pane + .k-dock-manager-unpinned-container { + width: $kendo-dock-manager-unpinned-container-width; + position: absolute; + display: flex; + height: 100%; + border-color: inherit; + z-index: 20; + + .k-pane { + display: inline-flex; + flex-direction: column; + position: relative; + flex: 1 1 auto; + } + + .k-splitbar { + height: 100%; + position: relative; + flex: none; + } + } + + // Docking preview + .k-docking-preview { + width: 100%; + height: 100%; + box-sizing: border-box; + display: flex; + position: absolute; + top: 0; + left: 0; + border-width: $kendo-dock-manager-dock-preview-border-width; + border-style: $kendo-dock-manager-dock-preview-border-style; + border-radius: $kendo-dock-manager-dock-preview-border-radius; + z-index: 10; + } + + .k-dock-manager-window:has(.k-pane) .k-window-content { + padding: 0; + } + +} + +@mixin kendo-dock-navigator--layout() { + + // DockNavigator + .k-dock-navigator-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + z-index: 10001; + pointer-events: none; + } + + .k-dock-navigator { + display: grid; + grid-template-columns: repeat(3, auto); + grid-template-rows: repeat(3, auto); + justify-content: center; + position: absolute; + } + + .k-dock-indicator { + padding: $kendo-dock-indicator-padding; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + position: relative; + pointer-events: all; + outline-width: $kendo-dock-indicator-outline-width; + outline-style: $kendo-dock-indicator-outline-style; + + &.k-dock-indicator-middle { + filter: none; + } + } + + .k-dock-indicator-top { + grid-area: 1 / 2 / auto; + } + .k-dock-indicator-right { + grid-area: 2 / 3 / auto; + } + .k-dock-indicator-bottom { + grid-area: 3 / 2 / auto; + } + .k-dock-indicator-left { + grid-area: 2 / 1 / auto; + } + .k-dock-indicator-middle { + grid-area: 2 / 2 / auto; + } + +} + +@mixin kendo-dock-manager--layout() { + @include kendo-dock-manager--layout-base(); + @include kendo-dock-navigator--layout(); +} diff --git a/packages/core/scss/components/dock-manager/_theme.scss b/packages/core/scss/components/dock-manager/_theme.scss new file mode 100644 index 00000000000..6b7b47e007d --- /dev/null +++ b/packages/core/scss/components/dock-manager/_theme.scss @@ -0,0 +1,50 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-dock-manager--theme-base() { + + // DockManager + .k-dock-manager { + border-color: $kendo-dock-manager-border; + } + + // Splitter + .k-dock-manager-splitter .k-pane-header, + .k-dock-manager-unpinned-container .k-pane-header { + background-color: $kendo-dock-manager-pane-header-bg; + } + + .k-dock-manager-unpinned-container { + background-color: $kendo-dock-manager-unpinned-container-bg; + @include box-shadow( $kendo-dock-manager-unpinned-container-shadow ); + } + + // Docking preview + .k-docking-preview { + background-color: $kendo-dock-manager-dock-preview-bg; + border-color: $kendo-dock-manager-dock-preview-border; + } + +} + +@mixin kendo-dock-navigator--theme() { + + .k-dock-indicator { + color: $kendo-dock-indicator-text; + background-color: $kendo-dock-indicator-bg; + outline-color: $kendo-dock-indicator-outline; + filter: $kendo-dock-indicator-shadow; + + &:hover, + &.k-hover { + background-color: $kendo-dock-indicator-hover-bg; + color: $kendo-dock-indicator-hover-text; + } + } + +} + +@mixin kendo-dock-manager--theme() { + @include kendo-dock-manager--theme-base(); + @include kendo-dock-navigator--theme(); +} diff --git a/packages/core/scss/components/dock-manager/_variables.scss b/packages/core/scss/components/dock-manager/_variables.scss new file mode 100644 index 00000000000..7422e57deb3 --- /dev/null +++ b/packages/core/scss/components/dock-manager/_variables.scss @@ -0,0 +1,113 @@ +/// The width of the border around the DockManager component. +/// @group dock-manager +$kendo-dock-manager-border-width: null !default; +/// The style of the border around the DockManager component. +/// @group dock-manager +$kendo-dock-manager-border-style: null !default; +/// The color of the border around the DockManager component. +/// @group dock-manager +$kendo-dock-manager-border: null !default; + +/// The vertical padding of the pane header in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-header-padding-y: null !default; +/// The horizontal padding of the pane header in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-header-padding-x: null !default; +/// The width of the border around the pane header in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-header-border-width: null !default; +/// The style of the border around the pane header in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-header-border-style: null !default; +/// The background color of the pane header in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-header-bg: null !default; + +/// The vertical padding of the pane title in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-title-padding-y: null !default; +/// The horizontal padding of the pane title in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-title-padding-x: null !default; +/// The font family of the pane title in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-title-font-family: null !default; +/// The font size of the pane title in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-title-font-size: null !default; +/// The line height of the pane title in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-title-line-height: null !default; +/// The font weight of the pane title in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-title-font-weight: null !default; + +/// The horizontal padding of the pane content in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-content-padding-x: null !default; +/// The vertical padding of the pane content in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-pane-content-padding-y: null !default; + +/// The horizontal padding of the tabbed pane in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-tabbed-pane-padding-y: null !default; +/// The horizontal padding of the tabbed pane in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-tabbed-pane-padding-x: null !default; + +/// The width of the unpinned pane container in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-unpinned-container-width: null !default; +/// The background-color of the unpinned pane container in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-unpinned-container-bg: null !default; +/// The box shadow of the unpinned pane container in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-unpinned-container-shadow: null !default; + +/// The padding of the dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-padding: null !default; +/// The background color of the dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-bg: null !default; +/// The text color of the dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-text: null !default; +/// The outline width of the dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-outline-width: null !default; +/// The outline style of the dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-outline-style: null !default; +/// The outline color of the dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-outline: null !default; +/// The box shadow of the dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-shadow: null !default; + +/// The background color of the hovered dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-hover-bg: null !default; +/// The text color of the hovered dock indicator in the DockManager component. +/// @group dock-manager +$kendo-dock-indicator-hover-text: null !default; + +/// The width of the border around the dropping area in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-dock-preview-border-width: null !default; +/// The style of the border around the dropping area in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-dock-preview-border-style: null !default; +/// The border radius of the dropping area in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-dock-preview-border-radius: null !default; +/// The background color of the dropping area in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-dock-preview-bg: null !default; +/// The border color of the dropping area in the DockManager component. +/// @group dock-manager +$kendo-dock-manager-dock-preview-border: null !default; diff --git a/packages/core/scss/components/draggable/_index.scss b/packages/core/scss/components/draggable/_index.scss new file mode 100644 index 00000000000..efc22f5f292 --- /dev/null +++ b/packages/core/scss/components/draggable/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-draggable--styles() { + @include import-once( "draggable" ) { + @include core-styles(); + @include kendo-draggable--layout(); + @include kendo-draggable--theme(); + } +} diff --git a/packages/core/scss/components/draggable/_layout.scss b/packages/core/scss/components/draggable/_layout.scss new file mode 100644 index 00000000000..bf1ab4b8703 --- /dev/null +++ b/packages/core/scss/components/draggable/_layout.scss @@ -0,0 +1,133 @@ +@use "sass:math"; +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; +@use "../../_variables.scss" as *; + +@mixin kendo-draggable--layout-base() { + + // Layout + .k-drag-clue { + @include border-radius( $kendo-drag-hint-border-radius ); + padding-block: $kendo-drag-hint-padding-y; + padding-inline: $kendo-drag-hint-padding-x; + border-width: $kendo-drag-hint-border-width; + border-style: if( $kendo-drag-hint-border-width == null, null, solid ); + box-sizing: border-box; + font-size: $kendo-drag-hint-font-size; + font-family: $kendo-drag-hint-font-family; + line-height: $kendo-drag-hint-line-height; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + white-space: nowrap; + opacity: $kendo-drag-hint-opacity; + overflow: hidden; + position: absolute; + z-index: 20000; + cursor: move; + } + .k-drag-status, + .k-drag-clue .k-drag-status { + margin: 0; + margin-right: .4ex; + } + + + // Drop hint + .k-drop-hint { + display: flex; + gap: $kendo-drop-hint-arrow-spacing; + justify-content: space-between; + align-items: center; + position: absolute; + z-index: 1000; + transform: translate(-50%, -50%); + } + + .k-drop-hint-start, + .k-drop-hint-end { + flex-shrink: 0; + border-width: math.div( $kendo-drop-hint-arrow-size, 2 ); + border-style: solid; + border-color: transparent; + } + + .k-drop-hint-line { + flex-grow: 1; + background-color: $kendo-drop-hint-bg; + } + + .k-drop-hint-h { + .k-drop-hint-start { + border-left-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); + border-left-color: $kendo-drop-hint-bg; + border-right-width: 0; + } + + .k-drop-hint-line { + width: $kendo-drop-hint-line-h-width; + height: $kendo-drop-hint-line-h-height; + } + + .k-drop-hint-end { + border-right-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); + border-right-color: $kendo-drop-hint-bg; + border-left-width: 0; + } + } + + .k-drop-hint-v { + flex-direction: column; + + .k-drop-hint-start { + border-top-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); + border-top-color: $kendo-drop-hint-bg; + border-bottom-width: 0; + } + + .k-drop-hint-line { + width: $kendo-drop-hint-line-v-width; + height: $kendo-drop-hint-line-v-height; + } + + .k-drop-hint-end { + border-bottom-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); + border-bottom-color: $kendo-drop-hint-bg; + border-top-width: 0; + } + } + + + // Reorder cue + .k-reorder-cue { + position: absolute; + + &::before, + &::after { + content: ""; + width: 0; + height: 0; + border: 3px solid transparent; + position: absolute; + transform: translateX(-50%); + } + + &::before { + border-bottom-width: 0; + border-top-color: currentColor; + top: -4px; + } + &::after { + border-top-width: 0; + border-bottom-color: currentColor; + bottom: -4px; + } + } + +} + + +@mixin kendo-draggable--layout() { + @include kendo-draggable--layout-base(); +} diff --git a/packages/core/scss/components/draggable/_theme.scss b/packages/core/scss/components/draggable/_theme.scss new file mode 100644 index 00000000000..10ffc9c34f7 --- /dev/null +++ b/packages/core/scss/components/draggable/_theme.scss @@ -0,0 +1,22 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-draggable--theme-base() { + + // Drag hint + .k-drag-clue { + @include fill( + $kendo-drag-hint-text, + $kendo-drag-hint-bg, + $kendo-drag-hint-border, + $kendo-drag-hint-gradient + ); + @include box-shadow( $kendo-drag-hint-shadow ); + } + +} + + +@mixin kendo-draggable--theme() { + @include kendo-draggable--theme-base(); +} diff --git a/packages/core/scss/components/draggable/_variables.scss b/packages/core/scss/components/draggable/_variables.scss new file mode 100644 index 00000000000..767393bb8d4 --- /dev/null +++ b/packages/core/scss/components/draggable/_variables.scss @@ -0,0 +1,27 @@ +// Drag hint +$kendo-drag-hint-padding-x: null !default; +$kendo-drag-hint-padding-y: null !default; +$kendo-drag-hint-border-width: null !default; +$kendo-drag-hint-border-radius: null !default; +$kendo-drag-hint-font-size: null !default; +$kendo-drag-hint-font-family: null !default; +$kendo-drag-hint-line-height: null !default; + +$kendo-drag-hint-bg: null !default; +$kendo-drag-hint-text: null !default; +$kendo-drag-hint-border: null !default; +$kendo-drag-hint-gradient: null !default; +$kendo-drag-hint-shadow: null !default; + +$kendo-drag-hint-opacity: null !default; + + +// Drop hint +$kendo-drop-hint-arrow-size: null !default; +$kendo-drop-hint-arrow-spacing: null !default; +$kendo-drop-hint-line-h-width: null !default; +$kendo-drop-hint-line-h-height: null !default; +$kendo-drop-hint-line-v-width: null !default; +$kendo-drop-hint-line-v-height: null !default; + +$kendo-drop-hint-bg: null !default; diff --git a/packages/core/scss/components/drawer/_index.scss b/packages/core/scss/components/drawer/_index.scss new file mode 100644 index 00000000000..70f0f7059fb --- /dev/null +++ b/packages/core/scss/components/drawer/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../overlay/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-drawer--styles() { + @include import-once( "drawer" ) { + @include core-styles(); + @include kendo-overlay--styles(); + @include kendo-toolbar--styles(); + @include kendo-list--styles(); + @include kendo-drawer--layout(); + @include kendo-drawer--theme(); + } +} diff --git a/packages/core/scss/components/drawer/_layout.scss b/packages/core/scss/components/drawer/_layout.scss new file mode 100644 index 00000000000..c76ec81316e --- /dev/null +++ b/packages/core/scss/components/drawer/_layout.scss @@ -0,0 +1,207 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-drawer--layout-base() { + + // Container + .k-drawer-container { + display: flex; + flex-flow: row nowrap; + align-items: flex-start; + } + + kendo-drawer.k-drawer, + kendo-drawer .k-drawer-wrapper { + transition: none; + } + + + // Drawer + .k-drawer { + height: 100%; + max-width: 100%; + border-width: 0; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-drawer-font-family; + font-size: $kendo-drawer-font-size; + line-height: $kendo-drawer-line-height; + display: flex; + flex-direction: column; + flex: 0 0 auto; + transition: all 300ms ease-in-out; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + .k-drawer-mini &.k-drawer-start, + .k-drawer-expanded &.k-drawer-start { + border-inline-end-width: $kendo-drawer-border-width; + } + + .k-drawer-mini &.k-drawer-end, + .k-drawer-expanded &.k-drawer-end { + border-inline-start-width: $kendo-drawer-border-width; + } + + + // Position + &.k-drawer-start { + top: 0; + inset-inline-start: 0; + } + &.k-drawer-end { + top: 0; + inset-inline-end: 0; + } + } + + + // Content + .k-drawer-content { + flex: 1 1 auto; + overflow: auto; + padding-block: $kendo-drawer-content-padding-y; + padding-inline: $kendo-drawer-content-padding-x; + } + + + // Overlay + .k-drawer-overlay { + .k-drawer { + max-width: 80vw; // limit width + position: fixed; + z-index: 10002; + border: 0; + } + + > .k-overlay { + display: none; + } + &.k-drawer-expanded > .k-overlay { + display: block; + } + } + + + // Push drawer + .k-drawer-push { + display: flex; + flex-direction: row; + + .k-drawer { + height: auto; + position: relative; + align-self: stretch; + } + + &:has(.k-drawer.k-drawer-end) { + flex-direction: row-reverse; + } + } + + + // Drawer items + .k-drawer-wrapper { + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: thin; // Scrollbar styles for Mozilla + transition: all 300ms ease-in-out; + + // Scrollbar styles for Chrome, Safari and Opera + &::-webkit-scrollbar { + width: $kendo-drawer-scrollbar-width; + } + &::-webkit-scrollbar-thumb { + border-radius: $kendo-drawer-scrollbar-radius; + } + } + .k-drawer-items { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + align-items: stretch; + } + .k-drawer-item { + padding-block: $kendo-drawer-item-padding-y; + padding-inline: $kendo-drawer-item-padding-x; + outline: 0; + color: inherit; + font-size: $kendo-drawer-item-font-size; + line-height: $kendo-drawer-item-line-height; + display: flex; + flex-flow: row nowrap; + gap: $kendo-drawer-item-padding-x; + cursor: pointer; + + > .k-drawer-link { + margin-block: calc( #{$kendo-drawer-item-padding-y} * -1 ); + margin-inline: calc( #{$kendo-drawer-item-padding-x} * -1 ); + padding-block: $kendo-drawer-item-padding-y; + padding-inline: $kendo-drawer-item-padding-x; + color: inherit; + display: flex; + flex-flow: row nowrap; + flex: 1 0 auto; + gap: $kendo-drawer-item-padding-x; + } + + .k-icon { + flex-shrink: 0; + padding-inline: $kendo-drawer-icon-padding-x; + padding-block: $kendo-drawer-icon-padding-y; + box-sizing: content-box; + + &.k-i-none { + margin: 0; + } + } + + .k-item-text { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .k-drawer-toggle { + margin-inline-start: auto; + cursor: pointer; + display: flex; + } + + // Hierarchy items + @for $i from 1 through $kendo-drawer-item-level-count { + &.k-level-#{$i} { + padding-inline-start: calc(( #{$i} + 1) * #{$kendo-drawer-item-level-padding-x}) ; + } + } + } + + + // Separator + .k-drawer-separator { + padding: 0; + height: 1px; + } + + + // Mini mode + .k-drawer-mini .k-drawer-wrapper { + width: $kendo-drawer-mini-initial-width; + } +} + + +@mixin kendo-drawer--layout() { + @include kendo-drawer--layout-base(); +} diff --git a/packages/core/scss/components/drawer/_theme.scss b/packages/core/scss/components/drawer/_theme.scss new file mode 100644 index 00000000000..ed1e9edb06b --- /dev/null +++ b/packages/core/scss/components/drawer/_theme.scss @@ -0,0 +1,68 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-drawer--theme-base() { + + .k-drawer { + @include fill( + $kendo-drawer-text, + $kendo-drawer-bg, + $kendo-drawer-border + ); + } + + // Drawer items + .k-drawer-wrapper { + scrollbar-color: $kendo-drawer-scrollbar-color $kendo-drawer-scrollbar-bg; + + &::-webkit-scrollbar-track { + background: $kendo-drawer-scrollbar-bg; + } + &::-webkit-scrollbar-thumb { + background: $kendo-drawer-scrollbar-color; + } + &::-webkit-scrollbar-thumb:hover { + background: $kendo-drawer-scrollbar-hover-color; + } + } + .k-drawer-item { + + &:hover, + &.k-hover { + color: $kendo-drawer-hover-text; + background-color: $kendo-drawer-hover-bg; + } + + &:focus, + &.k-focus { + background-color: $kendo-drawer-focus-bg; + @include focus-indicator( $kendo-drawer-focus-shadow, true ); + + &:hover, + &.k-hover { + color: $kendo-drawer-hover-text; + background-color: $kendo-drawer-hover-bg; + } + } + + &.k-selected { + color: $kendo-drawer-selected-text; + background-color: $kendo-drawer-selected-bg; + + &:hover, + &.k-hover { + color: $kendo-drawer-selected-hover-text; + background-color: $kendo-drawer-selected-hover-bg; + } + } + } + .k-drawer-separator { + background-color: $kendo-drawer-border; + } + +} + + +@mixin kendo-drawer--theme() { + @include kendo-drawer--theme-base(); +} diff --git a/packages/core/scss/components/drawer/_variables.scss b/packages/core/scss/components/drawer/_variables.scss new file mode 100644 index 00000000000..17d118822e9 --- /dev/null +++ b/packages/core/scss/components/drawer/_variables.scss @@ -0,0 +1,108 @@ +// Drawer + +/// The background color of the Drawer. +/// @group drawer +$kendo-drawer-bg: null !default; +/// The text color of the Drawer. +/// @group drawer +$kendo-drawer-text: null !default; +/// The border color of the Drawer. +/// @group drawer +$kendo-drawer-border: null !default; +/// The border width of the Drawer. +/// @group drawer +$kendo-drawer-border-width: null !default; + +/// The font family of the Drawer. +/// @group drawer +$kendo-drawer-font-family: null !default; +/// The font size of the Drawer. +/// @group drawer +$kendo-drawer-font-size: null !default; +/// The line height of the Drawer. +/// @group drawer +$kendo-drawer-line-height: null !default; + +/// The horizontal padding of the Drawer content. +/// @group drawer +$kendo-drawer-content-padding-x: null !default; + +/// The vertical padding of the Drawer content. +/// @group drawer +$kendo-drawer-content-padding-y: null !default; + +/// The width of the Drawer scrollbar. +/// @group drawer +$kendo-drawer-scrollbar-width: null !default; +/// The color of the Drawer scrollbar track. +/// @group drawer +$kendo-drawer-scrollbar-color: null !default; +/// The background color of the Drawer scrollbar thumb. +/// @group drawer +$kendo-drawer-scrollbar-bg: null !default; +/// The border radius of the Drawer scrollbar. +/// @group drawer +$kendo-drawer-scrollbar-radius: null !default; +/// The hover color of the Drawer scrollbar track. +/// @group drawer +$kendo-drawer-scrollbar-hover-color: null !default; + +/// The horizontal padding of the Drawer item. +/// @group drawer +$kendo-drawer-item-padding-x: null !default; +/// The vertical padding of the Drawer item. +/// @group drawer +$kendo-drawer-item-padding-y: null !default; +/// The font size of the Drawer item. +/// @group drawer +$kendo-drawer-item-font-size: null !default; +/// The line height of the Drawer item. +/// @group drawer +$kendo-drawer-item-line-height: null !default; + +/// The horizontal padding of the Drawer item in each level. +/// @group drawer +$kendo-drawer-item-level-padding-x: null !default; +/// The count of the Drawer item levels. +/// @group drawer +$kendo-drawer-item-level-count: null !default; + +/// The horizontal padding of the Drawer icon. +/// @group drawer +$kendo-drawer-icon-padding-x: null !default; + +/// The vertical padding of the Drawer icon. +/// @group drawer +$kendo-drawer-icon-padding-y: null !default; + +/// The initial width of the mini Drawer. +/// @group drawer +$kendo-drawer-mini-initial-width: null !default; + +/// The background color of the hovered Drawer item. +/// @group drawer +$kendo-drawer-hover-bg: null !default; +/// The text color of the hovered Drawer item. +/// @group drawer +$kendo-drawer-hover-text: null !default; + +/// The background color of the focused Drawer item. +/// @group drawer +$kendo-drawer-focus-bg: null !default; +/// The box shadow of the focused Drawer item. +/// @group drawer +$kendo-drawer-focus-shadow: null !default; + +/// The background color of the selected Drawer item. +/// @group drawer +$kendo-drawer-selected-bg: null !default; +/// The text color of the selected Drawer item. +/// @group drawer +$kendo-drawer-selected-text: null !default; + +/// The background color of the selected and hovered Drawer item. +/// @group drawer +$kendo-drawer-selected-hover-bg: null !default; +/// The text color of the selected and hovered Drawer item. +/// @group drawer +$kendo-drawer-selected-hover-text: null !default; diff --git a/packages/core/scss/components/dropdowngrid/_index.scss b/packages/core/scss/components/dropdowngrid/_index.scss new file mode 100644 index 00000000000..55e05e5f6ec --- /dev/null +++ b/packages/core/scss/components/dropdowngrid/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../table/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-dropdown-grid--styles() { + @include import-once( "dropdown-grid" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-popup--styles(); + @include kendo-table--styles(); + @include kendo-dropdown-grid--layout(); + @include kendo-dropdown-grid--theme(); + } +} diff --git a/packages/core/scss/components/dropdowngrid/_layout.scss b/packages/core/scss/components/dropdowngrid/_layout.scss new file mode 100644 index 00000000000..ce6abaa0cd4 --- /dev/null +++ b/packages/core/scss/components/dropdowngrid/_layout.scss @@ -0,0 +1,20 @@ +@mixin kendo-dropdown-grid--layout-base() { + + // Dropdown grid + .k-dropdown-grid {} + + + // Dropdown grid popup + .k-dropdowngrid-popup { + overflow: hidden; + } + .k-dropdowngrid-popup > .k-data-table { + border-width: 0; + } + +} + + +@mixin kendo-dropdown-grid--layout() { + @include kendo-dropdown-grid--layout-base(); +} diff --git a/packages/core/scss/components/dropdowngrid/_theme.scss b/packages/core/scss/components/dropdowngrid/_theme.scss new file mode 100644 index 00000000000..37036d89914 --- /dev/null +++ b/packages/core/scss/components/dropdowngrid/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-dropdown-grid--theme-base() { + + // Dropdown grid + .k-dropdown-grid {} + +} + + +@mixin kendo-dropdown-grid--theme() { + @include kendo-dropdown-grid--theme-base(); +} diff --git a/packages/core/scss/components/dropdowngrid/_variables.scss b/packages/core/scss/components/dropdowngrid/_variables.scss new file mode 100644 index 00000000000..801f9dc9831 --- /dev/null +++ b/packages/core/scss/components/dropdowngrid/_variables.scss @@ -0,0 +1 @@ +// Dropdown grid diff --git a/packages/core/scss/components/dropdownlist/_index.scss b/packages/core/scss/components/dropdownlist/_index.scss new file mode 100644 index 00000000000..f1e3efb5240 --- /dev/null +++ b/packages/core/scss/components/dropdownlist/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; +@use "../floating-label/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-dropdown-list--styles() { + @include import-once( "dropdown-list" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-floating-label--styles(); + @include kendo-dropdown-list--layout(); + @include kendo-dropdown-list--theme(); + } +} diff --git a/packages/core/scss/components/dropdownlist/_layout.scss b/packages/core/scss/components/dropdownlist/_layout.scss new file mode 100644 index 00000000000..440766ed64a --- /dev/null +++ b/packages/core/scss/components/dropdownlist/_layout.scss @@ -0,0 +1,43 @@ +@mixin kendo-dropdown-list--layout-base() { + + // Dropdown list + .k-dropdown-list {} + + + // Native select + select.k-dropdown-list {} + + + // Dropdown operator + .k-dropdown-operator { + width: min-content; + flex: none; + + .k-input-button { + border-width: 0; + width: min-content; + } + + .k-input-button .k-button-icon { + width: auto; + aspect-ratio: 1; + } + + .k-input-inner { + display: none; + } + } + + + // Legacy aliases + .k-dropdown, + .k-dropdownlist { + @extend .k-dropdown-list !optional; + } + +} + + +@mixin kendo-dropdown-list--layout() { + @include kendo-dropdown-list--layout-base(); +} diff --git a/packages/core/scss/components/dropdownlist/_theme.scss b/packages/core/scss/components/dropdownlist/_theme.scss new file mode 100644 index 00000000000..0dcf6fcb3e8 --- /dev/null +++ b/packages/core/scss/components/dropdownlist/_theme.scss @@ -0,0 +1,14 @@ +@mixin kendo-dropdown-list--theme-base() { + + // Dropdown list + .k-dropdown-list {} + + // Native select + select.k-dropdown-list {} + +} + + +@mixin kendo-dropdown-list--theme() { + @include kendo-dropdown-list--theme-base(); +} diff --git a/packages/core/scss/components/dropdownlist/_variables.scss b/packages/core/scss/components/dropdownlist/_variables.scss new file mode 100644 index 00000000000..92480aec210 --- /dev/null +++ b/packages/core/scss/components/dropdownlist/_variables.scss @@ -0,0 +1 @@ +// Dropdownlist diff --git a/packages/core/scss/components/dropdowntree/_index.scss b/packages/core/scss/components/dropdowntree/_index.scss new file mode 100644 index 00000000000..7aa576613c2 --- /dev/null +++ b/packages/core/scss/components/dropdowntree/_index.scss @@ -0,0 +1,30 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../floating-label/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../multiselect/_index.scss" as *; +@use "../treeview/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-dropdown-tree--styles() { + @include import-once( "dropdown-tree" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-popup--styles(); + @include kendo-floating-label--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-multiselect--styles(); + @include kendo-treeview--styles(); + @include kendo-dropdown-tree--layout(); + @include kendo-dropdown-tree--theme(); + @include kendo-utils--typography--text-align(); + } +} diff --git a/packages/core/scss/components/dropdowntree/_layout.scss b/packages/core/scss/components/dropdowntree/_layout.scss new file mode 100644 index 00000000000..1db8653ec19 --- /dev/null +++ b/packages/core/scss/components/dropdowntree/_layout.scss @@ -0,0 +1,44 @@ +@use "./variables.scss" as *; + +@mixin kendo-dropdown-tree--layout-base() { + + // Dropdown tree + .k-dropdown-tree {} + + // Dropdowntree popup + .k-popup-dropdowntree, // remove legacy class once updated in components + .k-dropdowntree-popup, + .k-multiselecttree-popup { + .k-treeview { + padding-block: calc( #{$kendo-dropdowntree-popup-padding-y} / 2 ); + padding-inline: calc( #{$kendo-dropdowntree-popup-padding-x} / 2 ); + } + + .k-check-all { + padding-block: $kendo-dropdowntree-popup-padding-y; + padding-inline: $kendo-dropdowntree-popup-padding-x; + } + } + + .k-multiselecttree { + .k-input-values { + width: auto; + max-width: 100%; + } + + .k-input-inner::before { + content: "\200b"; + width: 0px; + overflow: hidden; + flex: none; + display: inline-block; + vertical-align: top; + } + } + +} + + +@mixin kendo-dropdown-tree--layout() { + @include kendo-dropdown-tree--layout-base(); +} diff --git a/packages/core/scss/components/dropdowntree/_theme.scss b/packages/core/scss/components/dropdowntree/_theme.scss new file mode 100644 index 00000000000..5b32601225d --- /dev/null +++ b/packages/core/scss/components/dropdowntree/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-dropdown-tree--theme-base() { + + // Dropdown tree + .k-dropdown-tree {} + +} + + +@mixin kendo-dropdown-tree--theme() { + @include kendo-dropdown-tree--theme-base(); +} diff --git a/packages/core/scss/components/dropdowntree/_variables.scss b/packages/core/scss/components/dropdowntree/_variables.scss new file mode 100644 index 00000000000..5d6b7f10038 --- /dev/null +++ b/packages/core/scss/components/dropdowntree/_variables.scss @@ -0,0 +1,8 @@ +// Dropdowntree + +/// The horizontal padding of the DropdownTree popup +/// @group dropdowntree +$kendo-dropdowntree-popup-padding-x: null !default; +/// The vertical padding of the DropdownTree popup +/// @group dropdowntree +$kendo-dropdowntree-popup-padding-y: null !default; diff --git a/packages/core/scss/components/dropzone/_index.scss b/packages/core/scss/components/dropzone/_index.scss new file mode 100644 index 00000000000..daba92e0317 --- /dev/null +++ b/packages/core/scss/components/dropzone/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-dropzone--styles() { + @include import-once( "dropzone" ) { + @include core-styles(); + @include kendo-dropzone--layout(); + @include kendo-dropzone--theme(); + } +} diff --git a/packages/core/scss/components/dropzone/_layout.scss b/packages/core/scss/components/dropzone/_layout.scss new file mode 100644 index 00000000000..a25beb42229 --- /dev/null +++ b/packages/core/scss/components/dropzone/_layout.scss @@ -0,0 +1,49 @@ +@use "./variables.scss" as *; + +@mixin kendo-dropzone--layout-base() { + + // Dropzone + .k-external-dropzone { + height: $kendo-dropzone-min-height; + display: flex; + flex-flow: row nowrap; + } + + // Dropzone inner + .k-dropzone-inner { + padding-block: $kendo-dropzone-padding-y; + padding-inline: $kendo-dropzone-padding-x; + border-width: $kendo-dropzone-border-width; + border-style: solid; + box-sizing: border-box; + font-size: $kendo-dropzone-font-size; + font-family: $kendo-dropzone-font-family; + line-height: $kendo-dropzone-line-height; + flex: 1 1 auto; + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: center; + position: relative; + + .k-dropzone-icon { + margin-bottom: $kendo-dropzone-icon-spacing; + } + + .k-dropzone-hint { + margin-bottom: $kendo-dropzone-hint-spacing; + font-size: $kendo-dropzone-hint-font-size; + } + + .k-dropzone-note { + margin-bottom: $kendo-dropzone-note-spacing; + font-size: $kendo-dropzone-note-font-size; + } + } + +} + + +@mixin kendo-dropzone--layout() { + @include kendo-dropzone--layout-base(); +} diff --git a/packages/core/scss/components/dropzone/_theme.scss b/packages/core/scss/components/dropzone/_theme.scss new file mode 100644 index 00000000000..f46d2a624d7 --- /dev/null +++ b/packages/core/scss/components/dropzone/_theme.scss @@ -0,0 +1,41 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-dropzone--theme-base() { + + // Dropzone + .k-dropzone-inner { + @include fill( + $kendo-dropzone-text, + $kendo-dropzone-bg, + $kendo-dropzone-border + ); + + .k-icon, + .k-dropzone-icon { + color: $kendo-dropzone-icon-text; + } + .k-dropzone-hint { + color: $kendo-dropzone-hint-text; + } + .k-dropzone-note { + color: $kendo-dropzone-note-text; + } + } + + + // Hover + .k-external-dropzone-hover { + + .k-icon, + .k-dropzone-icon { + color: $kendo-dropzone-icon-hover-text; + } + } + +} + + +@mixin kendo-dropzone--theme() { + @include kendo-dropzone--theme-base(); +} diff --git a/packages/core/scss/components/dropzone/_variables.scss b/packages/core/scss/components/dropzone/_variables.scss new file mode 100644 index 00000000000..aa84fec7701 --- /dev/null +++ b/packages/core/scss/components/dropzone/_variables.scss @@ -0,0 +1,64 @@ +// DropZone + +/// The horizontal padding of the DropZone. +/// @group dropzone +$kendo-dropzone-padding-x: null !default; +/// The vertical padding of the DropZone. +/// @group dropzone +$kendo-dropzone-padding-y: null !default; +/// The border width of the DropZone. +/// @group dropzone +$kendo-dropzone-border-width: null !default; +/// The minimum height of the DropZone. +/// @group dropzone +$kendo-dropzone-min-height: null !default; + +/// The font family of the DropZone. +/// @group dropzone +$kendo-dropzone-font-family: null !default; +/// The font size of the DropZone. +/// @group dropzone +$kendo-dropzone-font-size: null !default; +/// The line height of the DropZone. +/// @group dropzone +$kendo-dropzone-line-height: null !default; + +/// The background color of the DropZone. +/// @group dropzone +$kendo-dropzone-bg: null !default; +/// The text color of the DropZone. +/// @group dropzone +$kendo-dropzone-text: null !default; +/// The border color of the DropZone. +/// @group dropzone +$kendo-dropzone-border: null !default; + +/// The spacing below the DropZone icon. +/// @group dropzone +$kendo-dropzone-icon-spacing: null !default; +/// The text color of the DropZone icon. +/// @group dropzone +$kendo-dropzone-icon-text: null !default; +/// The text color of the hovered DropZone icon. +/// @group dropzone +$kendo-dropzone-icon-hover-text: null !default; + +/// The font size of the DropZone hint. +/// @group dropzone +$kendo-dropzone-hint-font-size: null !default; +/// The spacing below the DropZone hint. +/// @group dropzone +$kendo-dropzone-hint-spacing: null !default; +/// The text color of the DropZone hint. +/// @group dropzone +$kendo-dropzone-hint-text: null !default; + +/// The font size of the DropZone note. +/// @group dropzone +$kendo-dropzone-note-font-size: null !default; +/// The spacing below the DropZone note. +/// @group dropzone +$kendo-dropzone-note-spacing: null !default; +/// The text color of the DropZone note. +/// @group dropzone +$kendo-dropzone-note-text: null !default; diff --git a/packages/core/scss/components/editor/_index.scss b/packages/core/scss/components/editor/_index.scss new file mode 100644 index 00000000000..7dfb6580c82 --- /dev/null +++ b/packages/core/scss/components/editor/_index.scss @@ -0,0 +1,32 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../checkbox/_index.scss" as *; +@use "../colorpicker/_index.scss" as *; +@use "../combobox/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../upload/_index.scss" as *; +@use "../window/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-editor--styles() { + @include import-once( "editor" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-checkbox--styles(); + @include kendo-color-picker--styles(); + @include kendo-combobox--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-toolbar--styles(); + @include kendo-upload--styles(); + @include kendo-window--styles(); + @include kendo-editor--layout(); + @include kendo-editor--theme(); + } +} diff --git a/packages/core/scss/components/editor/_layout.scss b/packages/core/scss/components/editor/_layout.scss new file mode 100644 index 00000000000..8fbb3782a8e --- /dev/null +++ b/packages/core/scss/components/editor/_layout.scss @@ -0,0 +1,656 @@ +@use "sass:math"; +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../toolbar/_variables.scss" as *; +@use "../window/_variables.scss" as *; +@use "../input/_variables.scss" as *; + +@mixin kendo-editor--layout-base() { + + // Base + .k-editor { + border-width: $kendo-editor-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-editor-font-family; + font-size: $kendo-editor-font-size; + line-height: $kendo-editor-line-height; + display: flex; + flex-flow: column nowrap; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + &.k-readonly { + .k-editor-content { + pointer-events: auto; + } + + .k-editor-content.k-focus { + outline-width: 1px; + outline-style: dashed; + } + } + } + + // Inline editor + .k-editor-inline { + @include border-radius( k-border-radius(md) ); + padding-block: $kendo-editor-inline-padding-y; + padding-inline: $kendo-editor-inline-padding-x; + border: 1px solid transparent; + word-wrap: break-word; + overflow: auto; + background: none; + } + + // Resizable editor + .k-editor-resizable { + resize: both; + overflow: auto; + } + + // Resizable images + .k-editor-resize-handles-wrapper { + position: absolute; + visibility: hidden; + } + + // Resizable tables + .k-editor-resize-wrap-element { + display: inline-block; + position: relative; + } + + .k-editor-resize-handle { + width: $kendo-editor-resize-handle-size; + height: $kendo-editor-resize-handle-size; + border-width: $kendo-editor-resize-handle-border-width; + border-style: solid; + box-sizing: border-box; + position: absolute; + visibility: visible; + z-index: 100; + + &.northwest { + top: 0; + left: 0; + transform: translate(-50%, -50%); + cursor: nw-resize; + } + + &.north { + top: 0; + left: 50%; + transform: translate(-50%, -50%); + cursor: n-resize; + } + + &.northeast { + top: 0; + right: 0; + transform: translate(50%, -50%); + cursor: ne-resize; + } + + &.southwest { + left: 0; + bottom: 0; + transform: translate(-50%, 50%); + cursor: sw-resize; + } + + &.south { + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); + cursor: s-resize; + } + + &.southeast { + right: 0; + bottom: 0; + transform: translate(50%, 50%); + cursor: se-resize; + } + + &.west { + top: 50%; + left: 0; + transform: translate(-50%, -50%); + cursor: w-resize; + } + + &.east { + top: 50%; + right: 0; + transform: translate(50%, -50%); + cursor: e-resize; + } + } + + // stylelint-disable selector-no-vendor-prefix, selector-class-pattern + .ProseMirror-selectednode { + outline-width: $kendo-editor-selectednode-outline-width; + outline-style: solid; + + } + .ProseMirror-hideselection { + caret-color: transparent; + + *::selection, + *::-moz-selection { + background: transparent; + } + } + // stylelint-enable selector-no-vendor-prefix, selector-class-pattern + + // Toolbar + .k-editor-toolbar { + border-width: 0 0 $kendo-toolbar-border-width; + flex-shrink: 0; + + .k-editor-export { + .k-icon { + margin-right: $kendo-editor-export-tool-icon-margin-x; + } + + .k-icon, + .k-export-tool-text { + vertical-align: middle; + } + } + } + + // Editor content + .k-editor-content { + flex: 1 1 auto; + overflow-y: auto; + + > .k-iframe { + width: 100%; + height: 100%; + border-width: 0; + display: block; + } + + > .ProseMirror { // stylelint-disable-line + padding: $kendo-editor-content-padding; + width: 100%; + height: 100%; + position: relative; + box-sizing: border-box; + outline: none; + white-space: pre-wrap; + overflow: auto; + + table { + white-space: pre-wrap; + } + + .k-placeholder::before { + content: attr(data-placeholder); + height: 0; + color: $kendo-editor-placeholder-text; + float: left; + opacity: $kendo-editor-placeholder-opacity; + cursor: text; + user-select: none; + } + + &[contenteditable="false"] { + cursor: unset !important; // stylelint-disable-line declaration-no-important + + .k-editor-resize-handles-wrapper, + .k-editor-resize-handle, + .row-resize-handle, + .column-resize-handle { + display: none; + } + + img, + table { + pointer-events: none; + } + + & .ProseMirror-selectednode { // stylelint-disable-line + outline: none; + } + } + } + + // Table styles + p { + margin: 0 0 1rem; + } + + td p, + th p, + li p { + margin: 0; + } + + table { + margin: 0; + border-collapse: collapse; + table-layout: fixed; + width: 100%; + overflow: hidden; + } + + td, + th { + min-width: 1em; + border: 1px solid; + padding-block: 3px; + padding-inline: 5px; + vertical-align: top; + box-sizing: border-box; + position: relative; + } + + th { + font-weight: bold; + text-align: start; + } + td { + text-align: start; + } + + // Give selected cells a blue overlay + .selectedCell::after { // stylelint-disable-line + z-index: 2; + position: absolute; + content: ""; + left: 0; + right: 0; + top: 0; + bottom: 0; + pointer-events: none; + } + } + + + .k-edit-form-content { + flex: 1 1 auto; + overflow: auto; + margin-block: (-$kendo-window-inner-padding-y); + margin-inline: (-$kendo-window-inner-padding-x); + padding-block: $kendo-window-inner-padding-y; + padding-inline: $kendo-window-inner-padding-x; + } + + + $ct-cell-size: 20px; + + // Insert table + .k-ct-popup { + box-sizing: border-box; + width: $ct-cell-size * 10 - math.div( $ct-cell-size, 2 ); + padding: math.div( $ct-cell-size, 4 ); + + .k-button { + width: 100%; + } + + .k-ct-cell { + margin: 1px; + width: $ct-cell-size; + height: $ct-cell-size; + box-sizing: border-box; + border: 1px solid; + border-color: inherit; + display: inline-block; + vertical-align: top; + overflow: hidden; + opacity: .7; + pointer-events: all; + } + } + + .k-editor .k-resize-handle { + position: absolute; + right: 0; + bottom: 0; + padding: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 0 0 13px 13px; + border-color: transparent; + border-bottom-color: inherit; + cursor: se-resize; + + .k-i-arrow-45-down-right, + .k-i-caret-br { + display: none; + } + } + + + // Find and replace dialog + .k-editor-find-replace { + .k-content { + position: relative; + } + + .k-actions { + padding: 0; + } + + .k-search-options { + display: flex; + flex-direction: column; + padding: 10px 0 40px; + } + + .k-matches-container { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 0; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + + + + + // Text area in editor dialog + .k-textarea.k-editor-textarea { + width: 100%; + height: 100%; + resize: none; + } + + + + + // File browser + // TODO: replace with file manager component + .k-filebrowser { + max-width: 100%; + + // Breadcrumbs and search + .k-floatwrap { + display: flex; + + &::after { display: none; } + } + .k-breadcrumbs { + flex: 1; + } + .k-search-wrap { + margin: 0 0 0 k-spacing(4); + width: 150px; + display: flex; + align-items: center; + + .k-input { + flex: 1; + width: 100px; // fix width for Edge + } + .k-icon { + margin: 0; + position: static; + } + } + + // Filebrowser toolbar + .k-filebrowser-toolbar { + margin: k-spacing(4) 0 0; + } + + .k-upload { + padding: 0; + border-width: 0; + background: none; + + .k-upload-button { + margin: 0; + } + + .k-upload-status { + display: none; + } + } + + .k-upload-files { + display: none; + } + + // Tiles + .k-tiles { + display: flex; + flex-flow: row wrap; + height: 390px; + max-height: 50vh; + margin: 0 0 k-spacing(4); + padding-block: $kendo-editor-filebrowser-tiles-padding-y; + padding-inline: $kendo-editor-filebrowser-tiles-padding-x; + border-top-width: 0; + overflow: auto; + } + + .k-tile { + width: 33%; + height: 90px; + padding-block: $kendo-editor-filebrowser-tiles-padding-y; + padding-inline: $kendo-editor-filebrowser-tiles-padding-x; + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + cursor: pointer; + @include border-radius( k-border-radius(md) ); + + .k-i-file, + .k-i-folder { + font-size: 4em; + } + + input { + width: 100px; + } + + strong { + display: block; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .k-tile-empty { + display: block; + margin: auto; + + &.k-selected { + color: inherit; + border-width: 0; + background-image: none; + background-color: transparent; + } + + strong { + opacity: .5; + font-size: 3em; + font-weight: 400; + } + } + + .k-thumb { + float: left; + margin-right: $kendo-editor-filebrowser-tiles-padding-y; + } + + .k-breadcrumbs-wrap { + position: absolute; + left: $kendo-input-padding-x; + top: $kendo-input-padding-y; + + .k-icon { + position: static; + margin-top: 0; + } + } + } + + + + + // Table wizard dialog + .k-editor-table-wizard-window { + + // Tabstrip wrapper + .k-tabstrip-wrapper { + display: flex; + flex: 1 1 auto; + overflow: auto; + + .k-tabstrip.k-root-tabs { + flex: 1 1 auto; + margin-bottom: 0; + } + } + + .k-edit-field > .k-checkbox { + position: relative; // fix scrolling + } + } + + .k-editor-inline { + + .k-table { + width: 100%; + border-spacing: 0; + margin: 0 0 1em; + + &, + & td { + outline: 0; + border-width: 1px; + border-style: dotted; + } + + td { + min-width: 1px; + padding-block: $kendo-editor-inline-padding-y; + padding-inline: $kendo-editor-inline-padding-x; + } + } + + .k-element-resize-handle-wrapper { + position: absolute; + width: 5px; + height: 5px; + border-width: 1px; + border-style: solid; + z-index: 100; + + .k-element-resize-handle { + width: 100%; + height: 100%; + + &.k-resize-east { + cursor: e-resize; + } + + &.k-resize-north { + cursor: n-resize; + } + + &.k-resize-northeast { + cursor: ne-resize; + } + + &.k-resize-northwest { + cursor: nw-resize; + } + + &.k-resize-south { + cursor: s-resize; + } + + &.k-resize-southeast { + cursor: se-resize; + } + + &.k-resize-southwest { + cursor: sw-resize; + } + + &.k-resize-west { + cursor: w-resize; + } + } + } + + .k-column-resize-handle-wrapper { + position: absolute; + height: 10px; + width: 10px; + cursor: col-resize; + z-index: 2; + + .k-column-resize-handle { + width: 100%; + height: 100%; + + .k-column-resize-marker { + width: 2px; + height: 100%; + margin-block: 0; + margin-inline: auto; + display: none; + opacity: .8; + } + } + } + + .k-row-resize-handle-wrapper { + position: absolute; + z-index: 2; + cursor: row-resize; + width: 10px; + height: 10px; + + .k-row-resize-handle { + display: table; + width: 100%; + height: 100%; + } + + .k-row-resize-marker-wrapper { + display: table-cell; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: middle; + } + + .k-row-resize-marker { + display: none; + margin: 0; + padding: 0; + width: 100%; + height: 2px; + opacity: .8; + } + } + } + +} + + +@mixin kendo-editor--layout() { + @include kendo-editor--layout-base(); +} diff --git a/packages/core/scss/components/editor/_theme.scss b/packages/core/scss/components/editor/_theme.scss new file mode 100644 index 00000000000..971a1b84410 --- /dev/null +++ b/packages/core/scss/components/editor/_theme.scss @@ -0,0 +1,109 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-editor--theme-base() { + + .k-editor { + @include fill( + $kendo-component-text, + $kendo-component-bg, + $kendo-component-border + ); + + &.k-readonly { + .k-editor-content.k-focus { + outline-color: $kendo-body-text; + } + } + } + + // Inline Editor + .k-editor-inline { + + .k-table { + &, + & td { + border-color: #cccccc; + } + } + + .k-element-resize-handle-wrapper { + background-color: #ffffff; + border-color: #000000; + } + + .k-column-resize-handle-wrapper { + .k-column-resize-handle { + .k-column-resize-marker { + background-color: #00b0ff; + } + } + } + + .k-row-resize-handle-wrapper { + .k-row-resize-marker { + background-color: #00b0ff; + } + } + + // Hover & Active state + &:hover, + &.k-hover, + &.k-active { + border-color: $kendo-component-border; + } + } + + // Resizable images + .k-editor-resize-handle { + background-color: $kendo-editor-resize-handle-bg; + border-color: $kendo-editor-resize-handle-border; + } + .ProseMirror-selectednode { // stylelint-disable-line + outline-color: $kendo-editor-selectednode-outline-color; + } + + + // Insert table + .k-ct-popup { + .k-selected { + @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none ); + } + } + + // Content + .k-editor-content { + + // Selection + .k-text-selected, + &::selection { + @include fill ( + $color: $kendo-editor-selected-text, + $bg: $kendo-editor-selected-bg + ); + } + + .k-text-highlighted { + @include fill ( + $bg: $kendo-editor-highlighted-bg + ); + } + + // Table styles + td, + th { + border-color: #dddddd; + } + + .selectedCell::after { // stylelint-disable-line + background-color: rgba(200, 200, 255, .4); + } + } + +} + + +@mixin kendo-editor--theme() { + @include kendo-editor--theme-base(); +} diff --git a/packages/core/scss/components/editor/_variables.scss b/packages/core/scss/components/editor/_variables.scss new file mode 100644 index 00000000000..4edb72274bd --- /dev/null +++ b/packages/core/scss/components/editor/_variables.scss @@ -0,0 +1,74 @@ +// Editor + +/// The width of the border around the Еditor. +/// @group editor +$kendo-editor-border-width: null !default; +/// The font family of the Еditor. +/// @group editor +$kendo-editor-font-family: null !default; +/// The font size of the Еditor. +/// @group editor +$kendo-editor-font-size: null !default; +/// The line height of the Еditor. +/// @group editor +$kendo-editor-line-height: null !default; + +/// The text color of the Еditor placeholder. +/// @group editor +$kendo-editor-placeholder-text: null !default; +/// The opacity of the Editor placeholder. +/// @group editor +$kendo-editor-placeholder-opacity: null !default; + +/// The selected text color of the Editor. +/// @group editor +$kendo-editor-selected-text: null !default; +/// The selected background color of the Editor. +/// @group editor +$kendo-editor-selected-bg: null !default; + +/// The highlighted background color of the Editor. +/// @group editor +$kendo-editor-highlighted-bg: null !default; + +/// The horizontal margin of the Editor's export tool icon. +/// @group editor +$kendo-editor-export-tool-icon-margin-x: null !default; + +/// The size of the Editor's resize handle. +/// @group editor +$kendo-editor-resize-handle-size: null !default; +/// The border width of the Editor's resize handle. +/// @group editor +$kendo-editor-resize-handle-border-width: null !default; +/// The border color of the Editor's resize handle. +/// @group editor +$kendo-editor-resize-handle-border: null !default; +/// The background color of the Editor's resize handle. +/// @group editor +$kendo-editor-resize-handle-bg: null !default; + +/// The outline width of the Editor's selected node. +/// @group editor +$kendo-editor-selectednode-outline-width: null !default; +/// The outline color of the Editor's selected node. +/// @group editor +$kendo-editor-selectednode-outline-color: null !default; + +/// The horizontal padding of the inline Editor. +/// @group editor +$kendo-editor-inline-padding-x: null !default; +/// The vertical padding of the inline Editor. +/// @group editor +$kendo-editor-inline-padding-y: null !default; + +/// The horizontal padding of the Editor file browser tiles. +/// @group editor +$kendo-editor-filebrowser-tiles-padding-x: null !default; +/// The vertical padding of the Editor file browser tiles. +/// @group editor +$kendo-editor-filebrowser-tiles-padding-y: null !default; + +/// The padding of the Editor content. +/// @group editor +$kendo-editor-content-padding: null !default; diff --git a/packages/core/scss/components/expansion-panel/_index.scss b/packages/core/scss/components/expansion-panel/_index.scss new file mode 100644 index 00000000000..b5fc3e231b4 --- /dev/null +++ b/packages/core/scss/components/expansion-panel/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-expander--styles() { + @include import-once( "expander" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-list--styles(); + @include kendo-expander--layout(); + @include kendo-expander--theme(); + @include kendo-utils--layout--display(); + } +} diff --git a/packages/core/scss/components/expansion-panel/_layout.scss b/packages/core/scss/components/expansion-panel/_layout.scss new file mode 100644 index 00000000000..be90c7dfd51 --- /dev/null +++ b/packages/core/scss/components/expansion-panel/_layout.scss @@ -0,0 +1,87 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-expander--layout-base() { + + // Base + .k-expander { + border-width: $kendo-expander-border-width; + border-style: solid; + box-sizing: border-box; + overflow: hidden; + outline: 0; + font-family: $kendo-expander-font-family; + font-size: $kendo-expander-font-size; + line-height: $kendo-expander-line-height; + display: flex; + flex-direction: column; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + .k-rtl .k-expander, + .k-expander.k-rtl, + .k-expander[dir="rtl"] { + // Expand / collapse icon + .k-expander-indicator { + margin-left: 0; + margin-right: $kendo-expander-indicator-margin-x; + } + } + + // Header + .k-expander-header { + padding-block: $kendo-expander-header-padding-y; + padding-inline: $kendo-expander-header-padding-x; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + } + + // Expander spacer + .k-expander-spacer { + flex: 1 1 auto; + } + + // Title + .k-expander-title { + text-transform: uppercase; + font-weight: 500; + } + + // Expand / collapse icon + .k-expander-indicator { + margin-left: $kendo-expander-indicator-margin-x; + display: flex; + justify-content: center; + align-items: center; + } + + // Expander content + .k-expander-content { + padding-block: $kendo-expander-content-padding-y; + padding-inline: $kendo-expander-content-padding-x; + } + + // Multiple expanders + .k-expander + .k-expander.k-expanded, + .k-expander.k-expanded + .k-expander { + margin-top: $kendo-expander-spacing-y; + } + + .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) { + border-top-width: 0; + } +} + + +@mixin kendo-expander--layout() { + @include kendo-expander--layout-base(); +} diff --git a/packages/core/scss/components/expansion-panel/_theme.scss b/packages/core/scss/components/expansion-panel/_theme.scss new file mode 100644 index 00000000000..04db23dbac4 --- /dev/null +++ b/packages/core/scss/components/expansion-panel/_theme.scss @@ -0,0 +1,49 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-expander--theme-base() { + + .k-expander { + @include fill( + $kendo-expander-text, + $kendo-expander-bg, + $kendo-expander-border + ); + + &.k-focus { + @include focus-indicator( $kendo-expander-focus-shadow, true ); + } + } + + .k-expander-header { + @include fill( + $kendo-expander-header-text, + $kendo-expander-header-bg, + $kendo-expander-header-border + ); + outline: none; + + &:hover, + &.k-hover { + background-color: $kendo-expander-header-hover-bg; + } + + &.k-focus { + @include focus-indicator( $kendo-expander-header-focus-shadow, true ); + background-color: $kendo-expander-header-focus-bg; + } + } + + .k-expander-title { + color: $kendo-expander-title-text; + } + + .k-expander-sub-title { + color: $kendo-expander-header-sub-title-text; + } +} + + +@mixin kendo-expander--theme() { + @include kendo-expander--theme-base(); +} diff --git a/packages/core/scss/components/expansion-panel/_variables.scss b/packages/core/scss/components/expansion-panel/_variables.scss new file mode 100644 index 00000000000..ac250e595bd --- /dev/null +++ b/packages/core/scss/components/expansion-panel/_variables.scss @@ -0,0 +1,77 @@ +// ExpansionPanel + +/// The vertical spacing of the ExpansionPanel. +/// @group expander +$kendo-expander-spacing-y: null !default; +/// The width of the border around the ExpansionPanel. +/// @group expander +$kendo-expander-border-width: null !default; +/// The font family of the ExpansionPanel. +/// @group expander +$kendo-expander-font-family: null !default; +/// The font size of the ExpansionPanel. +/// @group expander +$kendo-expander-font-size: null !default; +/// The hine height of the ExpansionPanel. +/// @group expander +$kendo-expander-line-height: null !default; + +/// The text color of the ExpansionPanel. +/// @group expander +$kendo-expander-text: null !default; +/// The background color of the ExpansionPanel. +/// @group expander +$kendo-expander-bg: null !default; +/// The border color of the ExpansionPanel. +/// @group expander +$kendo-expander-border: null !default; + +/// The box shadow of the focused ExpansionPanel. +/// @group expander +$kendo-expander-focus-shadow: null !default; + +/// The horizontal padding of the ExpansionPanel header. +/// @group expander +$kendo-expander-header-padding-x: null !default; +/// The vertical padding of the ExpansionPanel header. +/// @group expander +$kendo-expander-header-padding-y: null !default; + +/// The text color of the ExpansionPanel header. +/// @group expander +$kendo-expander-header-text: null !default; +/// The background color of the ExpansionPanel header. +/// @group expander +$kendo-expander-header-bg: null !default; +/// The border color of the ExpansionPanel header. +/// @group expander +$kendo-expander-header-border: null !default; + +/// The background color of the hovered ExpansionPanel header. +/// @group expander +$kendo-expander-header-hover-bg: null !default; +/// The background color of the focused ExpansionPanel header. +/// @group expander +$kendo-expander-header-focus-bg: null !default; +/// The box shadow of the focused ExpansionPanel header. +/// @group expander +$kendo-expander-header-focus-shadow: null !default; + +/// The text color of the ExpansionPanel title. +/// @group expander +$kendo-expander-title-text: null !default; + +/// The text color of the ExpansionPanel sub-title. +/// @group expander +$kendo-expander-header-sub-title-text: null !default; + +/// The horizontal margin of the ExpansionPanel indicator. +/// @group expander +$kendo-expander-indicator-margin-x: null !default; + +/// The horizontal padding of the ExpansionPanel content. +/// @group expander +$kendo-expander-content-padding-x: null !default; +/// The vertical padding of the ExpansionPanel content. +/// @group expander +$kendo-expander-content-padding-y: null !default; diff --git a/packages/core/scss/components/fab/_index.scss b/packages/core/scss/components/fab/_index.scss new file mode 100644 index 00000000000..1933e783ef3 --- /dev/null +++ b/packages/core/scss/components/fab/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../badge/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-fab--styles() { + @include import-once( "fab" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-button--styles(); + @include kendo-badge--styles(); + @include kendo-fab--layout(); + @include kendo-fab--theme(); + @include kendo-utils--layout--position(); + @include kendo-utils--typography--text-align(); + @include kendo-utils--layout--overflow(); + } +} diff --git a/packages/core/scss/components/fab/_layout.scss b/packages/core/scss/components/fab/_layout.scss new file mode 100644 index 00000000000..51574125436 --- /dev/null +++ b/packages/core/scss/components/fab/_layout.scss @@ -0,0 +1,150 @@ +@use "../../spacing/index.import.scss" as *; +@use "sass:map"; +@use "./variables.scss" as *; + +@mixin kendo-fab--layout-base() { + + // Floating Action Button (FAB) + .k-fab { + padding: 0; + border-width: 0; + border-style: solid; + border-color: transparent; + box-sizing: border-box; + color: inherit; + background-color: transparent; + font-size: $kendo-fab-font-size; + line-height: $kendo-fab-line-height; + font-family: $kendo-fab-font-family; + text-align: center; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + outline: none; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + &:focus { + outline: none; + } + } + + // FAB Icon + .k-fab-icon { + padding-inline: $kendo-fab-icon-padding-x; + padding-block: $kendo-fab-icon-padding-y; + box-sizing: content-box; + } + + .k-icon-wrapper-host:not(:only-child) .k-fab-icon, + .k-fab-icon:not(:only-child) { + margin-inline-end: $kendo-fab-icon-spacing; + margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 ); + } + + // Sizes + @each $size, $size-props in $kendo-fab-sizes { + $_padding-x: map.get( $size-props, padding-x ); + $_padding-y: map.get( $size-props, padding-y ); + + .k-fab-#{$size} { + padding: $_padding-y $_padding-x; + } + + } + + // Items + .k-fab-items { + margin: 0; + padding-block: $kendo-fab-items-padding-y; + padding-inline: $kendo-fab-items-padding-x; + display: flex; + } + + .k-fab-items-bottom { + flex-direction: column; + } + .k-fab-items-bottom .k-fab-item:last-child { + margin-block-end: 0; + } + + .k-fab-items-top { + flex-direction: column-reverse; + } + .k-fab-items-top .k-fab-item:first-child { + margin-block-end: 0; + } + + .k-fab-item { + list-style-type: none; + margin-block-end: k-spacing(2); + outline: none; + white-space: nowrap; + display: flex; + align-items: center; + justify-content: flex-end; + cursor: pointer; + + &.k-text-right { + flex-direction: row; + + .k-fab-item-text { + // Needed for fab item positioning in RTL + margin-right: k-spacing(2); + } + } + &.k-text-left { + flex-direction: row-reverse; + + .k-fab-item-text { + // Needed for fab item positioning in RTL + margin-left: k-spacing(2); + } + } + } + + .k-fab-item-text { + padding-block: $kendo-fab-item-text-padding-y; + padding-inline: $kendo-fab-item-text-padding-x; + border-width: $kendo-fab-item-text-border-width; + border-radius: $kendo-fab-item-text-border-radius; + font-size: $kendo-fab-item-text-font-size; + line-height: $kendo-fab-item-text-line-height; + } + + .k-fab-item-icon { + padding-block: $kendo-fab-item-icon-padding-y; + padding-inline: $kendo-fab-item-icon-padding-x; + border-width: $kendo-fab-item-icon-border-width; + border-radius: $kendo-fab-item-icon-border-radius; + box-sizing: content-box; + outline: none; + } + + + + .k-rtl .k-fab-popup, + [dir="rtl"] .k-fab-popup { + .k-fab-item.k-text-left { + flex-direction: row; + } + + .k-fab-item.k-text-right { + flex-direction: row-reverse; + } + } +} + + +@mixin kendo-fab--layout() { + @include kendo-fab--layout-base(); +} diff --git a/packages/core/scss/components/fab/_theme.scss b/packages/core/scss/components/fab/_theme.scss new file mode 100644 index 00000000000..8a574155188 --- /dev/null +++ b/packages/core/scss/components/fab/_theme.scss @@ -0,0 +1,135 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-fab--theme-base() { + + // Normal state + @each $name, $color in $kendo-fab-theme-colors { + .k-fab-solid-#{$name} { + @include box-shadow($kendo-fab-shadow); + outline: $kendo-fab-border-width $kendo-fab-outline-style $color; + outline-offset: -$kendo-fab-border-width; + border-color: $color; + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + background-color: $color; + } + } + + // Hover state + @each $name, $color in $kendo-fab-theme-colors { + .k-hover.k-fab-solid-#{$name}, + .k-fab-solid-#{$name}:hover { + border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); + background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); + } + } + + // Focus state + @each $name, $color in $kendo-fab-theme-colors { + .k-fab-solid-#{$name}.k-focus, + .k-fab-solid-#{$name}:focus { + @if $kendo-enable-focus-contrast { + @include box-shadow( inset 0 0 0 2px currentColor ); + } @else { + outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 )); + } + } + } + + // Active state + @each $name, $color in $kendo-fab-theme-colors { + .k-active.k-fab-solid-#{$name}, + .k-selected.k-fab-solid-#{$name}, + .k-fab-solid-#{$name}:active { + @include box-shadow($kendo-fab-active-shadow); + border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); + background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); + } + } + + // Disabled state + @each $name, $color in $kendo-fab-theme-colors { + .k-disabled.k-fab-solid-#{$name}, + .k-fab-solid-#{$name}:disabled { + @include box-shadow($kendo-fab-disabled-shadow); + background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 )); + color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 )); + opacity: 1; + } + } + + // Items + .k-fab-item-text { + @include fill( + $kendo-fab-item-text, + $kendo-fab-item-bg, + $kendo-fab-item-border + ); + @include box-shadow($kendo-fab-item-shadow); + + } + .k-fab-item-icon { + @include fill( + $kendo-fab-item-icon-text, + $kendo-fab-item-icon-bg, + $kendo-fab-item-icon-border + ); + @include box-shadow($kendo-fab-item-shadow); + outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color; + outline-offset: -$kendo-fab-border-width; + } + + // Hover state + .k-fab-item.k-hover .k-fab-item-icon, + .k-fab-item:hover .k-fab-item-icon { + border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 )); + background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 )); + } + + // Focus state + .k-fab-item:focus .k-fab-item-text, + .k-fab-item:focus .k-fab-item-icon, + .k-fab-item.k-focus .k-fab-item-text, + .k-fab-item.k-focus .k-fab-item-icon { + @if $kendo-enable-focus-contrast { + @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); + } @else { + outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color; + } + } + + // Active state + .k-fab-item.k-active .k-fab-item-icon, + .k-fab-item:active .k-fab-item-icon { + @include box-shadow($kendo-fab-item-active-shadow); + border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 )); + background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 )); + } + + // Disabled state + .k-fab-item.k-disabled, + .k-fab-item:disabled { + opacity: 1; + + .k-fab-item-text, + .k-fab-item-icon { + @include box-shadow($kendo-fab-item-disabled-shadow); + background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 )); + color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 )); + } + } + + // Popup + .k-fab-popup { + @include box-shadow( none ); + } + +} + + +@mixin kendo-fab--theme() { + @include kendo-fab--theme-base(); +} diff --git a/packages/core/scss/components/fab/_variables.scss b/packages/core/scss/components/fab/_variables.scss new file mode 100644 index 00000000000..864bf3038c8 --- /dev/null +++ b/packages/core/scss/components/fab/_variables.scss @@ -0,0 +1,156 @@ +// Floating Action Button + +/// The width of the border around the FAB. +/// @group floating-action-button +$kendo-fab-border-width: null !default; +/// The border radius of the FAB. +/// @group floating-action-button +$kendo-fab-border-radius: null !default; + +/// The font family of the FAB. +/// @group floating-action-button +$kendo-fab-font-family: null !default; +/// The font size of the FAB. +/// @group floating-action-button +$kendo-fab-font-size: null !default; +/// The line height of the FAB. +/// @group floating-action-button +$kendo-fab-line-height: null !default; + +/// The horizontal padding of the FAB. +/// @group floating-action-button +$kendo-fab-padding-x: null !default; +/// The horizontal padding of the small FAB. +/// @group floating-action-button +$kendo-fab-sm-padding-x: null !default; +/// The horizontal padding of the medium FAB. +/// @group floating-action-button +$kendo-fab-md-padding-x: null !default; +/// The horizontal padding of the large FAB. +/// @group floating-action-button +$kendo-fab-lg-padding-x: null !default; + +/// The vertical padding of the FAB. +/// @group floating-action-button +$kendo-fab-padding-y: null !default; +/// The vertical padding of the small FAB. +/// @group floating-action-button +$kendo-fab-sm-padding-y: null !default; +/// The vertical padding of the medium FAB. +/// @group floating-action-button +$kendo-fab-md-padding-y: null !default; +/// The vertical padding of the large FAB. +/// @group floating-action-button +$kendo-fab-lg-padding-y: null !default; + +/// The horizontal padding of the FAB icon. +/// @group floating-action-button +$kendo-fab-icon-padding-x: null !default; +/// The vertical padding of the FAB icon. +/// @group floating-action-button +$kendo-fab-icon-padding-y: null !default; +/// The spacing of the FAB icon. +/// @group floating-action-button +$kendo-fab-icon-spacing: null !default; + +/// The horizontal padding of the FAB items. +/// @group floating-action-button +$kendo-fab-items-padding-x: null !default; +/// The vertical padding of the FAB items. +/// @group floating-action-button +$kendo-fab-items-padding-y: null !default; + +/// The horizontal padding of the FAB item text. +/// @group floating-action-button +$kendo-fab-item-text-padding-x: null !default; +/// The vertical padding of the FAB item text. +/// @group floating-action-button +$kendo-fab-item-text-padding-y: null !default; +/// The width of the FAB item text border. +/// @group floating-action-button +$kendo-fab-item-text-border-width: null !default; +/// The border radius of the FAB item text. +/// @group floating-action-button +$kendo-fab-item-text-border-radius: null !default; +/// The font size of the FAB item text. +/// @group floating-action-button +$kendo-fab-item-text-font-size: null !default; +/// The line height of the FAB item text. +/// @group floating-action-button +$kendo-fab-item-text-line-height: null !default; + +/// The horizontal padding of the FAB item icon. +/// @group floating-action-button +$kendo-fab-item-icon-padding-x: null !default; +/// The vertical padding of the FAB item icon. +/// @group floating-action-button +$kendo-fab-item-icon-padding-y: null !default; +/// The width of the FAB item icon border. +/// @group floating-action-button +$kendo-fab-item-icon-border-width: null !default; +/// The border radius of the FAB item icon. +/// @group floating-action-button +$kendo-fab-item-icon-border-radius: null !default; + +/// The theme colors map for the FAB. +/// @group floating-action-button +$kendo-fab-theme-colors: null !default; + +/// The size map for the FAB. +/// @group floating-action-button +$kendo-fab-sizes: null !default; + +/// The base shadow of the FAB. +/// @group floating-action-button +$kendo-fab-shadow: null !default; +/// The shadow of the disabled FAB. +/// @group floating-action-button +$kendo-fab-disabled-shadow: null !default; +/// The shadow of the active FAB. +/// @group floating-action-button +$kendo-fab-active-shadow: null !default; +/// The outline style of the FAB. +/// @group floating-action-button +$kendo-fab-outline-style: null !default; +/// The outline width of the FAB. +/// @group floating-action-button +$kendo-fab-outline-width: null !default; + +/// The base text color of the FAB item. +/// @group floating-action-button +$kendo-fab-item-text: null !default; +/// The base background color of the FAB item. +/// @group floating-action-button +$kendo-fab-item-bg: null !default; +/// The base border color of the FAB item. +/// @group floating-action-button +$kendo-fab-item-border: null !default; + +/// The base text color of the FAB item icon. +/// @group floating-action-button +$kendo-fab-item-icon-text: null !default; +/// The base background color of the FAB item icon. +/// @group floating-action-button +$kendo-fab-item-icon-bg: null !default; +/// The base border color of the FAB item icon. +/// @group floating-action-button +$kendo-fab-item-icon-border: null !default; + +/// The base shadow of the FAB item. +/// @group floating-action-button +$kendo-fab-item-shadow: null !default; +/// The shadow of the disabled FAB item. +/// @group floating-action-button +$kendo-fab-item-disabled-shadow: null !default; +/// The shadow of the active FAB item. +/// @group floating-action-button +$kendo-fab-item-active-shadow: null !default; +/// The outline style of the FAB item. +/// @group floating-action-button +$kendo-fab-item-outline-style: null !default; +/// The outline width of the FAB item. +/// @group floating-action-button +$kendo-fab-item-outline-width: null !default; +/// The outline color of the FAB item. +/// @group floating-action-button +$kendo-fab-item-outline-color: null !default; diff --git a/packages/core/scss/components/filemanager/_index.scss b/packages/core/scss/components/filemanager/_index.scss new file mode 100644 index 00000000000..eb30553c979 --- /dev/null +++ b/packages/core/scss/components/filemanager/_index.scss @@ -0,0 +1,38 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../upload/_index.scss" as *; +@use "../switch/_index.scss" as *; +@use "../menu/_index.scss" as *; +@use "../dialog/_index.scss" as *; +@use "../breadcrumb/_index.scss" as *; +@use "../treeview/_index.scss" as *; +@use "../splitter/_index.scss" as *; +@use "../grid/_index.scss" as *; +@use "../listview/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-file-manager--styles() { + @include import-once( "file-manager" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-toolbar--styles(); + @include kendo-upload--styles(); + @include kendo-switch--styles(); + @include kendo-menu--styles(); + @include kendo-dialog--styles(); + @include kendo-breadcrumb--styles(); + @include kendo-treeview--styles(); + @include kendo-splitter--styles(); + @include kendo-grid--styles(); + @include kendo-listview--styles(); + @include kendo-file-manager--layout(); + @include kendo-file-manager--theme(); + } +} diff --git a/packages/core/scss/components/filemanager/_layout.scss b/packages/core/scss/components/filemanager/_layout.scss new file mode 100644 index 00000000000..9ca429fa75e --- /dev/null +++ b/packages/core/scss/components/filemanager/_layout.scss @@ -0,0 +1,243 @@ +@use "./variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-file-manager--layout-base() { + + // File Manager + .k-filemanager { + border-width: $kendo-file-manager-border-width; + border-style: solid; + box-sizing: border-box; + font-family: $kendo-file-manager-font-family; + font-size: $kendo-file-manager-font-size; + line-height: $kendo-file-manager-line-height; + display: flex; + flex-flow: column nowrap; + } + + + // Toolbar + .k-filemanager-header { + border-color: inherit; + } + .k-filemanager-toolbar { + border-width: 0; + border-bottom-width: $kendo-file-manager-toolbar-border-width; + border-color: inherit; + flex-shrink: 0; + z-index: 1; + } + + + // Content Wrapper + .k-filemanager-content-container { + border-color: inherit; + box-sizing: border-box; + flex: 1 1 0%; + display: flex; + flex-flow: row nowrap; + align-items: stretch; + overflow: hidden; + } + + .k-filemanager-splitter { + border-width: 0; + } + + + // Navigation + .k-filemanager-navigation { + padding-block: $kendo-file-manager-navigation-padding-y; + padding-inline: $kendo-file-manager-navigation-padding-x; + width: $kendo-file-manager-navigation-width; + border-width: 0; + border-right-width: $kendo-file-manager-navigation-border-width; + border-style: solid; + border-color: inherit; + box-sizing: border-box; + flex-shrink: 0; + overflow: auto; + } + .k-filemanager-treeview { + overflow: visible; + } + + + // Content + .k-filemanager-content { + border-color: inherit; + flex: 1 1 0%; + display: flex; + flex-flow: column nowrap; + align-items: stretch; + overflow: hidden; + } + + // Filemanager view + .k-filemanager-view { + overflow: auto; + } + + // Breadcrumb + .k-filemanager-breadcrumb { + border-width: 0; + border-bottom-width: $kendo-file-manager-breadcrumb-border-width; + padding-block: $kendo-file-manager-breadcrumb-padding-y; + padding-inline: $kendo-file-manager-breadcrumb-padding-x; + flex-shrink: 0; + } + + + // Filemanager listview + .k-filemanager-listview { + border-width: 0; + flex: 1 1 0%; + + // Listview item + .k-listview-item { + padding-block: $kendo-file-manager-listview-item-padding-y; + padding-inline: $kendo-file-manager-listview-item-padding-x; + width: $kendo-file-manager-listview-item-width; + height: $kendo-file-manager-listview-item-height; + text-align: center; + } + + // File preview + .k-file-preview { + display: flex; + flex-direction: row; + justify-content: center; + } + + // File name + .k-file-name { + margin-top: calc( #{$kendo-file-manager-spacer} / 2 ); + display: block; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + // Edit mode + .k-file-edit-input input { + width: 100%; + } + } + + + // Filemanager grid + .k-filemanager-grid { + border-width: 0; + flex: 1 1 0%; + + // File preview + .k-file-preview { + margin-right: $kendo-icon-spacing; + display: inline-flex; + flex-direction: row; + vertical-align: middle; + } + + // File icon + .k-file-icon {} + + // File name + .k-file-name { + display: inline-flex; + flex-direction: row; + vertical-align: middle; + } + } + + + // Filemanager preview + .k-filemanager-preview { + padding: calc( #{$kendo-file-manager-preview-padding-y} * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y; + width: $kendo-file-manager-preview-width; + min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) ); + border-width: 0; + border-left-width: $kendo-file-manager-preview-border-width; + border-style: solid; + border-color: inherit; + box-sizing: border-box; + text-align: center; + overflow-y: auto; + flex-shrink: 0; + + // File preview + .k-file-preview { + display: flex; + flex-direction: row; + justify-content: center; + } + + // File name + .k-file-name { + margin-top: $kendo-file-manager-preview-spacing; + display: block; + } + .k-no-file-selected {} + .k-single-file-selected { font-weight: bold; } + .k-multiple-files-selected { font-weight: bold; } + + // File Meta + .k-file-meta { + margin: $kendo-file-manager-preview-spacing 0 0; + box-sizing: border-box; + text-align: start; + display: flex; + flex-flow: row wrap; + grid-column-gap: $kendo-file-manager-preview-column-gap; + } + .k-file-meta-label { + display: inline-block; + } + .k-file-meta-value { + margin: 0; + } + .k-file-type { + text-transform: capitalize; + } + .k-line-break { + margin: $kendo-file-manager-preview-spacing 0 0; + width: 100%; + flex: 1 1 100%; + flex-flow: row nowrap; + } + } + + + // Resizing Handle + .k-filemanager .k-splitbar { + flex-shrink: 0; + display: inline-flex; + position: relative; + border-width: 0 1px; + border-style: solid; + border-color: inherit; + } + + + // Upload Dialog + .k-filemanager-upload-dialog .k-upload-files { + max-height: 200px; + overflow-y: auto; + } + + + // Drag Hint + // TODO: use drag-hint styles + .k-filemanager-drag-hint { + display: flex; + flex-direction: row; + align-items: center; + gap: $kendo-icon-spacing; + } + +} + + +@mixin kendo-file-manager--layout() { + @include kendo-file-manager--layout-base(); +} diff --git a/packages/core/scss/components/filemanager/_theme.scss b/packages/core/scss/components/filemanager/_theme.scss new file mode 100644 index 00000000000..ed88d147f59 --- /dev/null +++ b/packages/core/scss/components/filemanager/_theme.scss @@ -0,0 +1,117 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-file-manager--theme-base() { + + // Filemanager + .k-filemanager { + @include fill( + $kendo-file-manager-text, + $kendo-file-manager-bg, + $kendo-file-manager-border + ); + } + + + // Filemanager toolbar + .k-filemanager-toolbar { + @include fill( + $kendo-file-manager-toolbar-text, + $kendo-file-manager-toolbar-bg, + $kendo-file-manager-toolbar-border, + $kendo-file-manager-toolbar-gradient + ); + } + + + // Filemanager navigation + .k-filemanager-navigation { + @include fill( + $kendo-file-manager-navigation-text, + $kendo-file-manager-navigation-bg, + $kendo-file-manager-navigation-border + ); + } + + + // Filemanager breadcrumb + .k-filemanager-breadcrumb { + @include fill( + $kendo-file-manager-breadcrumb-text, + $kendo-file-manager-breadcrumb-bg, + $kendo-file-manager-breadcrumb-border + ); + } + + + // Filemanager listview + .k-filemanager-listview { + @include fill( + $kendo-file-manager-listview-text, + $kendo-file-manager-listview-bg, + $kendo-file-manager-listview-border + ); + + .k-listview-item { + @include fill( + $kendo-file-manager-listview-item-text, + $kendo-file-manager-listview-item-bg, + $kendo-file-manager-listview-item-border + ); + + .k-file-icon { + @include fill( + $kendo-file-manager-listview-item-icon-text, + $kendo-file-manager-listview-item-icon-bg, + $kendo-file-manager-listview-item-icon-border + ); + } + + &.k-selected .k-file-icon { + @include fill( + inherit, + transparent, + transparent + ); + } + } + + } + + + // Filemanager grid + .k-filemanager-grid { + + @include fill( + $kendo-file-manager-grid-text, + $kendo-file-manager-grid-bg, + $kendo-file-manager-grid-border + ); + + } + + + // Filemanager preview + .k-filemanager-preview { + @include fill( + $kendo-file-manager-preview-text, + $kendo-file-manager-preview-bg, + $kendo-file-manager-preview-border + ); + + .k-file-icon { + @include fill( + $kendo-file-manager-preview-icon-text, + $kendo-file-manager-preview-icon-bg, + $kendo-file-manager-preview-icon-border + ); + } + + } + +} + + +@mixin kendo-file-manager--theme() { + @include kendo-file-manager--theme-base(); +} diff --git a/packages/core/scss/components/filemanager/_variables.scss b/packages/core/scss/components/filemanager/_variables.scss new file mode 100644 index 00000000000..4c4543f1e23 --- /dev/null +++ b/packages/core/scss/components/filemanager/_variables.scss @@ -0,0 +1,182 @@ +// FileManager + +/// The space between the FileManager items. +/// @group file-manager +$kendo-file-manager-spacer: null !default; +/// The border width of the FileManager. +/// @group file-manager +$kendo-file-manager-border-width: null !default; +/// The font family of the FileManager. +/// @group file-manager +$kendo-file-manager-font-family: null !default; +/// The font size of the FileManager. +/// @group file-manager +$kendo-file-manager-font-size: null !default; +/// The line height of the FileManager. +/// @group file-manager +$kendo-file-manager-line-height: null !default; +/// The background color of the FileManager. +/// @group file-manager +$kendo-file-manager-bg: null !default; +/// The text color of the FileManager. +/// @group file-manager +$kendo-file-manager-text: null !default; +/// The border color of the FileManager. +/// @group file-manager +$kendo-file-manager-border: null !default; + +/// The border width of the FileManager Toolbar. +/// @group file-manager +$kendo-file-manager-toolbar-border-width: null !default; +/// The background color of the FileManager Toolbar. +/// @group file-manager +$kendo-file-manager-toolbar-bg: null !default; +/// The text color of the FileManager Toolbar. +/// @group file-manager +$kendo-file-manager-toolbar-text: null !default; +/// The border color of the FileManager Toolbar. +/// @group file-manager +$kendo-file-manager-toolbar-border: null !default; +/// The gradient of the FileManager Toolbar. +/// @group file-manager +$kendo-file-manager-toolbar-gradient: null !default; + +/// The horizontal padding of the FileManager Navigation. +/// @group file-manager +$kendo-file-manager-navigation-padding-x: null !default; +/// The vertical padding of the FileManager Navigation. +/// @group file-manager +$kendo-file-manager-navigation-padding-y: null !default; +/// The width of the FileManager Navigation. +/// @group file-manager +$kendo-file-manager-navigation-width: null !default; +/// The border width of the FileManager Navigation. +/// @group file-manager +$kendo-file-manager-navigation-border-width: null !default; +/// The background color of the FileManager Navigation. +/// @group file-manager +$kendo-file-manager-navigation-bg: null !default; +/// The text color of the FileManager Navigation. +/// @group file-manager +$kendo-file-manager-navigation-text: null !default; +/// The border color of the FileManager Navigation. +/// @group file-manager +$kendo-file-manager-navigation-border: null !default; + +/// The horizontal padding of the FileManager Breadcrumb. +/// @group file-manager +$kendo-file-manager-breadcrumb-padding-x: null !default; +/// The vertical padding of the FileManager Breadcrumb. +/// @group file-manager +$kendo-file-manager-breadcrumb-padding-y: null !default; +/// The border width of the FileManager Breadcrumb. +/// @group file-manager +$kendo-file-manager-breadcrumb-border-width: null !default; +/// The background color of the FileManager Breadcrumb. +/// @group file-manager +$kendo-file-manager-breadcrumb-bg: null !default; +/// The text color of the FileManager Breadcrumb. +/// @group file-manager +$kendo-file-manager-breadcrumb-text: null !default; +/// The border color of the FileManager Breadcrumb. +/// @group file-manager +$kendo-file-manager-breadcrumb-border: null !default; + +/// The background color of the FileManager ListView. +/// @group file-manager +$kendo-file-manager-listview-bg: null !default; +/// The text color of the FileManager ListView. +/// @group file-manager +$kendo-file-manager-listview-text: null !default; +/// The border color of the FileManager ListView. +/// @group file-manager +$kendo-file-manager-listview-border: null !default; + +/// The horizontal padding of the FileManager ListView item. +/// @group file-manager +$kendo-file-manager-listview-item-padding-x: null !default; +/// The vertical padding of the FileManager ListView item. +/// @group file-manager +$kendo-file-manager-listview-item-padding-y: null !default; +/// The width of the FileManager ListView item. +/// @group file-manager +$kendo-file-manager-listview-item-width: null !default; +/// The height of the FileManager ListView item. +/// @group file-manager +$kendo-file-manager-listview-item-height: null !default; +/// The background color of the FileManager ListView item. +/// @group file-manager +$kendo-file-manager-listview-item-bg: null !default; +/// The text color of the FileManager ListView item. +/// @group file-manager +$kendo-file-manager-listview-item-text: null !default; +/// The border color of the FileManager ListView item. +/// @group file-manager +$kendo-file-manager-listview-item-border: null !default; + +/// The background color of the FileManager ListView item icon. +/// @group file-manager +$kendo-file-manager-listview-item-icon-bg: null !default; +/// The text color of the FileManager ListView item icon. +/// @group file-manager +$kendo-file-manager-listview-item-icon-text: null !default; +/// The border color of the FileManager ListView item icon. +/// @group file-manager +$kendo-file-manager-listview-item-icon-border: null !default; +/// Background color of the FileManager selected ListView item icon. +/// @group file-manager +$kendo-file-manager-listview-item-icon-selected-bg: null !default; +/// Text color of the FileManager selected ListView item icon. +/// @group file-manager +$kendo-file-manager-listview-item-icon-selected-text: null !default; +/// Border color of the FileManager selected ListView item icon. +/// @group file-manager +$kendo-file-manager-listview-item-icon-selected-border: null !default; + +/// The background color of the FileManager Grid. +/// @group file-manager +$kendo-file-manager-grid-bg: null !default; +/// The text color of the FileManager Grid. +/// @group file-manager +$kendo-file-manager-grid-text: null !default; +/// The border color of the FileManager Grid. +/// @group file-manager +$kendo-file-manager-grid-border: null !default; + +/// The horizontal padding of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-padding-x: null !default; +/// The vertical padding of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-padding-y: null !default; +/// The width of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-width: null !default; +/// The border width of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-border-width: null !default; +/// The spacing of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-spacing: null !default; +/// The gap between the columns in the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-column-gap: null !default; +/// The background color of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-bg: null !default; +/// The text color of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-text: null !default; +/// The border color of the FileManager preview. +/// @group file-manager +$kendo-file-manager-preview-border: null !default; + +/// The background color of the FileManager preview icon. +/// @group file-manager +$kendo-file-manager-preview-icon-bg: null !default; +/// The text color of the FileManager preview icon. +/// @group file-manager +$kendo-file-manager-preview-icon-text: null !default; +/// The border color of the FileManager preview icon. +/// @group file-manager +$kendo-file-manager-preview-icon-border: null !default; diff --git a/packages/core/scss/components/filter/_index.scss b/packages/core/scss/components/filter/_index.scss new file mode 100644 index 00000000000..c674e5d498e --- /dev/null +++ b/packages/core/scss/components/filter/_index.scss @@ -0,0 +1,30 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../checkbox/_index.scss" as *; +@use "../datetimepicker/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../numerictextbox/_index.scss" as *; +@use "../toolbar/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-filter--styles() { + @include import-once( "filter" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-input--styles(); + @include kendo-checkbox--styles(); + @include kendo-date-time-picker--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-numeric-textbox--styles(); + @include kendo-toolbar--styles(); + @include kendo-filter--layout(); + @include kendo-filter--theme(); + } +} diff --git a/packages/core/scss/components/filter/_layout.scss b/packages/core/scss/components/filter/_layout.scss new file mode 100644 index 00000000000..2389d2dc7be --- /dev/null +++ b/packages/core/scss/components/filter/_layout.scss @@ -0,0 +1,98 @@ +@use "./variables.scss" as *; + +@mixin kendo-filter--layout-base() { + + .k-filter { + box-sizing: border-box; + border-width: 0; + display: inline-block; + background-color: transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + ul { + padding: 0; + + li { + list-style-type: none; + } + } + + .k-filter-container, + .k-filter-preview { + margin-block-end: $kendo-filter-bottom-margin; + } + + .k-filter-lines, + .k-filter-item { + padding-inline-start: $kendo-filter-padding-x; + } + + .k-filter-toolbar { + display: inline-flex; + position: relative; + padding-block: $kendo-filter-padding-y; + padding-inline: 0; + + &::before { + content: ""; + position: absolute; + width: $kendo-filter-padding-x; + height: $kendo-filter-line-size; + inset-block-start: 50%; + inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 ); + } + + .k-toolbar { + border-style: solid; + } + } + .k-filter-operator .k-dropdown-list { + width: $kendo-filter-operator-dropdown-width; + } + + .k-filter-item { + position: relative; + + &::before { + content: ""; + position: absolute; + width: $kendo-filter-line-size; + height: 100%; + inset-block-start: calc( #{$kendo-filter-padding-y} * -1 ); + inset-inline-start: 0; + } + } + + // The second selector targets the Angular rendering + .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after, + .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after { + content: ""; + position: absolute; + width: $kendo-filter-line-size; + inset-block-start: calc( calc( #{$kendo-filter-padding-y} * -1 ) - #{$kendo-filter-line-size} ); + inset-block-end: 50%; + inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 ); + } + + // The forth and fifth selectors targets the Angular rendering + .k-filter-group-main::before, + .k-filter-group-main > .k-filter-toolbar::before, + .k-filter-group-main > .k-filter-toolbar::after, + .k-filter-group-main > * > .k-filter-toolbar::before, + .k-filter-group-main > * > .k-filter-toolbar::after, + .k-filter-lines .k-filter-item:last-child::before { + display: none; + } + } + +} + + +@mixin kendo-filter--layout() { + @include kendo-filter--layout-base(); +} diff --git a/packages/core/scss/components/filter/_theme.scss b/packages/core/scss/components/filter/_theme.scss new file mode 100644 index 00000000000..2c30882380b --- /dev/null +++ b/packages/core/scss/components/filter/_theme.scss @@ -0,0 +1,38 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-filter--theme-base() { + + .k-filter { + color: $kendo-component-text; + + .k-filter-preview-field { + color: $kendo-filter-preview-field-text; + } + + .k-filter-preview-operator { + color: $kendo-filter-preview-operator-text; + } + + // The last selector targets the Angular rendering + .k-filter-item::before, + .k-filter-toolbar::before, + .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after, + .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after { + background-color: $kendo-component-border; + } + + // Focus + .k-toolbar:focus, + .k-toolbar.k-focus { + @include focus-indicator( $kendo-filter-toolbar-focus-shadow ); + } + } + +} + + +@mixin kendo-filter--theme() { + @include kendo-filter--theme-base(); +} diff --git a/packages/core/scss/components/filter/_variables.scss b/packages/core/scss/components/filter/_variables.scss new file mode 100644 index 00000000000..07445b02d2b --- /dev/null +++ b/packages/core/scss/components/filter/_variables.scss @@ -0,0 +1,30 @@ +// Filter expression builder + +/// The horizontal padding of the Filter. +/// @group filter +$kendo-filter-padding-x: null !default; +/// The vertical padding of the Filter. +/// @group filter +$kendo-filter-padding-y: null !default; + +/// The bottom margin of the Filter. +/// @group filter +$kendo-filter-bottom-margin: null !default; +/// The width of the line that connects the Filter items. +/// @group filter +$kendo-filter-line-size: null !default; + +/// The width of the dropdown elements in the Filter items. +/// @group filter +$kendo-filter-operator-dropdown-width: null !default; + +/// The text color of the Filter preview field. +/// @group filter +$kendo-filter-preview-field-text: null !default; +/// The text color of the Filter preview operator. +/// @group filter +$kendo-filter-preview-operator-text: null !default; + +/// The box shadow of the focused Filter toolbar. +/// @group filter +$kendo-filter-toolbar-focus-shadow: null !default; diff --git a/packages/core/scss/components/floating-label/_index.scss b/packages/core/scss/components/floating-label/_index.scss new file mode 100644 index 00000000000..3ba7de16b0c --- /dev/null +++ b/packages/core/scss/components/floating-label/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-floating-label--styles() { + @include import-once( "floating-label" ) { + @include core-styles(); + @include kendo-floating-label--layout(); + @include kendo-floating-label--theme(); + } +} diff --git a/packages/core/scss/components/floating-label/_layout.scss b/packages/core/scss/components/floating-label/_layout.scss new file mode 100644 index 00000000000..0eaaf1ad089 --- /dev/null +++ b/packages/core/scss/components/floating-label/_layout.scss @@ -0,0 +1,95 @@ +@use "./_variables.scss" as *; + +@mixin kendo-floating-label--layout-base() { + + + // Floating label + .k-floating-label-container { + padding-top: $kendo-floating-label-height; + box-sizing: border-box; + display: inline-flex; + vertical-align: middle; + position: relative; + flex-direction: column; + justify-content: stretch; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + > .k-floating-label { + max-width: $kendo-floating-label-max-width; + font-size: $kendo-floating-label-font-size; + line-height: $kendo-floating-label-line-height; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y}); + left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x}); + overflow: hidden; + cursor: text; + transform-origin: left center; + transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition; + } + + + &.k-empty { + > .k-floating-label { + top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y}); + left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x}); + transform: scale( $kendo-floating-label-scale ); + pointer-events: none; + } + } + + > .k-floating-label, + &.k-focus > .k-floating-label { + top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y}); + left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); + transform: scale( $kendo-floating-label-focus-scale ); + } + &:focus-within > .k-floating-label { + top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y}); + left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); + transform: scale( $kendo-floating-label-focus-scale ); + } + + &.k-empty:not(.k-focus):not(:focus-within) ::placeholder { + color: transparent; + } + } + + [dir="rtl"] .k-floating-label-container, + .k-rtl .k-floating-label-container, + .k-floating-label-container[dir="rtl"] { + > .k-floating-label { + transform-origin: right center; + transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition; + } + + &.k-empty { + > .k-floating-label { + left: auto; + right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x}); + } + } + + > .k-floating-label, + &.k-focus > .k-floating-label { + left: auto; + right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); + } + &:focus-within > .k-floating-label { + left: auto; + right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); + } + } + +} + + +@mixin kendo-floating-label--layout() { + @include kendo-floating-label--layout-base(); +} diff --git a/packages/core/scss/components/floating-label/_theme.scss b/packages/core/scss/components/floating-label/_theme.scss new file mode 100644 index 00000000000..3a136c84723 --- /dev/null +++ b/packages/core/scss/components/floating-label/_theme.scss @@ -0,0 +1,36 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-floating-label--theme-base() { + + // Floating label + .k-floating-label-container { + + > .k-floating-label { + @include fill( + $color: $kendo-floating-label-text, + $bg: $kendo-floating-label-bg + ); + } + + &.k-focus > .k-floating-label { + @include fill( + $color: $kendo-floating-label-focus-text, + $bg: $kendo-floating-label-focus-bg + ); + } + + &.k-invalid > .k-floating-label, + &.ng-invalid.ng-touched > .k-floating-label, + &.ng-invalid.ng-dirty > .k-floating-label { + @include fill ( $color: $kendo-invalid-text ); + } + } + +} + + +@mixin kendo-floating-label--theme() { + @include kendo-floating-label--theme-base(); +} diff --git a/packages/core/scss/components/floating-label/_variables.scss b/packages/core/scss/components/floating-label/_variables.scss new file mode 100644 index 00000000000..f68f17f56f9 --- /dev/null +++ b/packages/core/scss/components/floating-label/_variables.scss @@ -0,0 +1,51 @@ +// Floating label + +/// The transformation scale of the Floating Label. +/// @group floating-label +$kendo-floating-label-scale: null !default; +/// The font size of the Floating Label. +/// @group floating-label +$kendo-floating-label-font-size: null !default; +/// The maximum width of the Floating Label. +/// @group floating-label +$kendo-floating-label-max-width: null !default; +/// The line height of the Floating Label. +/// @group floating-label +$kendo-floating-label-line-height: null !default; +/// The height of the Floating Label. +/// @group floating-label +$kendo-floating-label-height: null !default; +/// The horizontal offset of the Floating Label. +/// @group floating-label +$kendo-floating-label-offset-x: null !default; +/// The vertical offset of the Floating Label. +/// @group floating-label +$kendo-floating-label-offset-y: null !default; + +/// The transformation scale of the focused Floating Label. +/// @group floating-label +$kendo-floating-label-focus-scale: null !default; +/// The horizontal offset of the focused Floating Label. +/// @group floating-label +$kendo-floating-label-focus-offset-x: null !default; +/// The vertical offset of the focused Floating Label. +/// @group floating-label +$kendo-floating-label-focus-offset-y: null !default; + +/// The transition of the Floating Label. +/// @group floating-label +$kendo-floating-label-transition: null !default; + +/// The background color of the Floating Label. +/// @group floating-label +$kendo-floating-label-bg: null !default; +/// The text color of the Floating Label. +/// @group floating-label +$kendo-floating-label-text: null !default; + +/// The background color of the focused Floating Label. +/// @group floating-label +$kendo-floating-label-focus-bg: null !default; +/// The text color of the focused Floating Label. +/// @group floating-label +$kendo-floating-label-focus-text: null !default; diff --git a/packages/core/scss/components/forms/_index.scss b/packages/core/scss/components/forms/_index.scss new file mode 100644 index 00000000000..0598ed2e814 --- /dev/null +++ b/packages/core/scss/components/forms/_index.scss @@ -0,0 +1,25 @@ +// Dependencies // TODO: extract variables +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-form--styles() { + @include import-once( "form" ) { + @include core-styles(); + @include kendo-toolbar--styles(); + @include kendo-action-buttons--styles(); + @include kendo-form--layout(); + @include kendo-form--theme(); + @include kendo-utils--layout--display(); + @include kendo-utils--flex-grid--gap(); + @include kendo-utils--flex-grid--grid-template-columns(); + @include kendo-utils--flex-grid--grid-column-start-end(); + } +} diff --git a/packages/core/scss/components/forms/_layout.scss b/packages/core/scss/components/forms/_layout.scss new file mode 100644 index 00000000000..7fe07b864de --- /dev/null +++ b/packages/core/scss/components/forms/_layout.scss @@ -0,0 +1,386 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./_variables.scss" as *; +@use "../input/_variables.scss" as *; + +@mixin kendo-form--layout-base() { + + // Common + .k-form, + .k-form-inline { + font-size: $kendo-form-font-size; + line-height: $kendo-form-line-height; + } + + + // Fieldset + .k-fieldset { + margin: $kendo-fieldset-margin; + border-width: 1px 0 0; + border-style: solid; + padding: 25px 0 0; + + > legend { + margin-left: 0; + padding: $kendo-fieldset-legend-padding; + text-transform: uppercase; + } + } + + + // Label + kendo-label > .k-label { + margin: 0; + } + + .k-label-optional { + margin-left: $kendo-label-optional-margin-x; + font-size: $kendo-label-optional-font-size; + font-style: $kendo-label-optional-font-style; + align-self: center; + } + + .k-label-empty { + &::before { + content: ""; + display: inline-block; + } + } + + + + // Vertical Form + .k-form { + border: 0; + + .k-form-field > .k-label, + .k-form-field > kendo-label, + .k-form-label { + margin-bottom: $kendo-form-label-margin-bottom; + display: flex; + flex-flow: row nowrap; + } + + .k-label + .k-radio { + margin-left: 0; + } + + .k-form-fieldset { + margin: $kendo-form-fieldset-margin; + padding: $kendo-form-fieldset-padding; + border: 0; + + > * { + &:not(.k-hidden):first-child, + &.k-hidden + :not(.k-hidden) { + margin-top: 0; + } + } + } + + .k-form-legend { + margin: $kendo-form-legend-margin; + padding: $kendo-form-legend-padding; + border-width: $kendo-form-legend-border-width; + border-style: $kendo-form-legend-border-style; + width: $kendo-form-legend-width; + font-size: $kendo-form-legend-font-size; + text-transform: $kendo-form-legend-text-transform; + } + + + // Form group + .k-form-group { + padding: 0; + } + + > * { + &:not(.k-hidden):first-child, + &.k-hidden + :not(.k-hidden) { + margin-top: 0; + } + } + + + // Form field + .k-form-field, + .k-form-field-wrap { + display: block; + } + + .k-form-field-disabled { + .k-label, + .k-form-label { + @include disabled( $kendo-disabled-styling... ); + } + } + + .k-alert-error { + font-size: var( --kendo-font-size-sm, inherit ); + margin-top: $kendo-form-alert-error-margin; + } + + .k-field-info { + display: inline-block; + font-size: var( --kendo-font-size-xs, inherit ); + line-height: 1; + margin-block: 0; + margin-inline: $kendo-form-field-info-margin; + } + + + .k-multiselect, + .k-floating-label-container, + .k-daterangepicker .k-dateinput, + .k-signature { + display: inline-flex; + width: 100%; + } + } + + // Form Buttons Container + .k-form-buttons { + @extend .k-actions !optional; + padding: 0; + overflow: visible; + } + + // Form Hint/Error Messages + .k-form-hint, + .k-form-error { + margin-top: $kendo-form-hint-margin-top; + display: flex; + font-size: $kendo-form-hint-font-size; + font-style: $kendo-form-hint-font-style; + } + + .k-text-start, + .k-buttons-start { + justify-content: flex-start; + } + + .k-text-end, + .k-buttons-end { + justify-content: flex-end; + } + + // Form Separator + .k-form-separator { + margin: $kendo-form-separator-margin; + border-width: 1px 0 0; + border-style: solid; + display: block; + flex: 0 0 auto; + } + + // Horizontal Form + .k-form-horizontal { + .k-form-field { + display: flex; + + > .k-label, + > kendo-label, + > .k-form-label { + margin-right: $kendo-horizontal-form-label-margin-x; + padding-top: $kendo-horizontal-form-label-padding-top; + width: $kendo-horizontal-form-label-width; + text-align: end; + flex-direction: column; + align-items: $kendo-horizontal-form-label-align; + justify-content: flex-start; + } + .k-label-optional { + margin: 0; + align-self: inherit; + } + } + + .k-form-field-wrap { + max-width: $kendo-horizontal-form-field-wrap-max-width; + flex: 1 1 auto; + } + } + + // RTL Adjustments + .k-form [dir="rtl"], + .k-rtl .k-form { + .k-label-optional { + margin-left: 0; + margin-right: $kendo-label-optional-margin-x; + } + } + + .k-form-horizontal [dir="rtl"], + .k-rtl .k-form-horizontal { + &.k-form-field, + .k-form-field { + > .k-label, + > kendo-label, + > .k-form-label { + margin-right: 0; + margin-left: $kendo-horizontal-form-label-margin-x; + } + } + } + + // Sizes + @each $size, $size-props in $kendo-form-sizes { + $_form-rows-spacing: map.get($size-props, form-rows-spacing); + + .k-form-#{$size} { + .k-form-field, + .k-form-buttons { + margin-top: $_form-rows-spacing; + } + } + } + + + // Scheduler + .k-form-inline { + padding: $kendo-form-spacer; + + fieldset { + border-width: 1px 0 0; + border-style: solid; + margin: calc( #{$kendo-form-spacer} * 2 ) 0; + padding: 0; + + &:first-child:first-of-type { + margin-top: 0; + } + + &:last-child:last-of-type { + margin-bottom: 0; + } + } + + legend { + font-size: var( --kendo-font-size-sm, inherit ); + text-align: start; + font-weight: 600; + line-height: 1; + margin-bottom: $kendo-fieldset-legend-margin; + text-transform: uppercase; + padding: $kendo-fieldset-legend-padding; + width: auto; + } + + .k-form-field { + display: flex; + align-items: flex-start; + text-align: start; + margin-bottom: $kendo-fieldset-legend-margin; + + > span:not(.k-widget) { + width: $kendo-inline-form-element-width; + text-align: end; + line-height: var( --kendo-line-height, normal ); + padding-block: $kendo-inline-form-field-padding-y; + padding-inline: $kendo-inline-form-field-padding-x; + align-self: center; + } + + > input { + align-self: center; + } + + > input:not(.k-checkbox):not(.k-radio) { + flex: 1 1 auto; + } + + .k-alert-error { + font-size: var( --kendo-font-size-sm, inherit ); + margin-top: $kendo-form-alert-error-margin; + } + + .k-field-info { + display: block; + font-size: var( --kendo-font-size-xs, inherit ); + line-height: 1; + margin: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } + + + + + // Edit form + .k-edit-form-container { + width: 400px; + min-width: 400px; + border-color: inherit; + position: relative; + } + + + // Action buttons + .k-popup-edit-form > .k-actions, + .k-edit-form-container .k-actions { + // TODO: refactor + margin: k-spacing(4) calc(#{k-spacing(4)} * -1) calc(#{k-spacing(4)} * -1); + } + + + .k-edit-label { + margin: 0 0 k-spacing(4); + // TODO: do we need the input variable? + padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0; + width: 30%; + line-height: $kendo-form-line-height; + text-align: end; + float: left; + clear: both; + } + .k-edit-field { + margin: 0 0 k-spacing(4); + width: 65%; + float: right; + clear: right; + position: relative; + + &.k-no-editor { + // TODO: do we need the input variable? + padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0; + } + } + + .k-edit-field { + + > .k-widget { + width: 100%; + box-sizing: border-box; + } + + input[type="radio"]:not(.k-radio), + input[type="checkbox"]:not(.k-checkbox) { + margin-right: .4ex; + } + + .k-radio-label, + .k-checkbox-label { + margin-right: k-spacing(4); + } + + > .k-reset > li + li { + margin-top: k-spacing(2); + } + + .k-reset .k-widget { + margin: 0 .4ex 0 1ex; + } + } + +} + + +@mixin kendo-form--layout() { + @include kendo-form--layout-base(); +} diff --git a/packages/core/scss/components/forms/_theme.scss b/packages/core/scss/components/forms/_theme.scss new file mode 100644 index 00000000000..715d1e26f65 --- /dev/null +++ b/packages/core/scss/components/forms/_theme.scss @@ -0,0 +1,45 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-form--theme-base() { + + .k-form, + .k-form-inline { + @include fill( $color: $kendo-body-text ); + + fieldset { + legend { + @include fill( $color: $kendo-fieldset-legend-text ); + } + } + + .k-form-legend { + @include fill( $border: $kendo-form-legend-border-color ); + } + + .k-field-info { + @include fill( $color: $kendo-subtle-text ); + } + + .k-alert-error { + @include fill( $color: $kendo-color-error ); + } + } + + .k-form-error, + .k-text-error, + .k-form-field-error .k-label { + @include fill( $color: $kendo-color-error ); + } + + .k-form-separator { + @include fill( $border: $kendo-form-separator-border-color ); + } + +} + + +@mixin kendo-form--theme() { + @include kendo-form--theme-base(); +} diff --git a/packages/core/scss/components/forms/_variables.scss b/packages/core/scss/components/forms/_variables.scss new file mode 100644 index 00000000000..60a5d4b7e57 --- /dev/null +++ b/packages/core/scss/components/forms/_variables.scss @@ -0,0 +1,179 @@ +// Forms + +/// The padding of the inline Form. +/// @group form +$kendo-form-spacer: null !default; + +/// The font size of the Form. +/// @group form +$kendo-form-font-size: null !default; +/// The line height of the Form. +/// @group form +$kendo-form-line-height: null !default; +/// The line height of the Form in em units. +/// @group form +$kendo-form-line-height-em: null !default; +/// The line height of the small Form. +/// @group form +$kendo-form-sm-line-height: null !default; +/// The line height of the large Form. +/// @group form +$kendo-form-lg-line-height: null !default; + +/// The margin of the Form fieldset. +/// @group form +$kendo-form-fieldset-margin: null !default; +/// The padding of the Form fieldset. +/// @group form +$kendo-form-fieldset-padding: null !default; + +/// The margin of the Form legend. +/// @group form +$kendo-form-legend-margin: null !default; +/// The padding of the Form legend. +/// @group form +$kendo-form-legend-padding: null !default; +/// The border width of the Form legend. +/// @group form +$kendo-form-legend-border-width: null !default; +/// The border style of the Form legend. +/// @group form +$kendo-form-legend-border-style: null !default; +/// The border color of the Form legend. +/// @group form +$kendo-form-legend-border-color: null !default; +/// The width of the Form legend. +/// @group form +$kendo-form-legend-width: null !default; +/// The font size of the Form legend. +/// @group form +$kendo-form-legend-font-size: null !default; +/// The text capitalization of the Form legend. +/// @group form +$kendo-form-legend-text-transform: null !default; + +/// The bottom margin of the Form label. +/// @group form +$kendo-form-label-margin-bottom: null !default; + +/// The horizontal margin of the Form buttons. +/// @group form +$kendo-form-button-margin-x: null !default; + +/// The font size of the Form hint. +/// @group form +$kendo-form-hint-font-size: null !default; +/// The font style of the Form hint. +/// @group form +$kendo-form-hint-font-style: null !default; +/// The top margin of the Form hint. +/// @group form +$kendo-form-hint-margin-top: null !default; + +/// The row spacing of the small Form. +/// @group form +$kendo-form-sm-rows-spacing: null !default; +/// The row spacing of the medium Form. +/// @group form +$kendo-form-md-rows-spacing: null !default; +/// The row spacing of the large Form. +/// @group form +$kendo-form-lg-rows-spacing: null !default; + +/// The margin of the Form separator. +/// @group form +$kendo-form-separator-margin: null !default; +/// The border color of the Form separator. +/// @group form +$kendo-form-separator-border-color: null !default; + +/// The top padding of the label in the horizontal Form. +/// @group form +$kendo-horizontal-form-label-padding-top: null !default; +/// The horizontal margin of the label in the horizontal Form. +/// @group form +$kendo-horizontal-form-label-margin-x: null !default; +/// The width of the label in the horizontal Form. +/// @group form +$kendo-horizontal-form-label-width: null !default; +/// The horizontal alignment of the label in the horizontal Form. +/// @group form +$kendo-horizontal-form-label-align: null !default; + +/// The maximum width of the field wrap in the horizontal Form. +/// @group form +$kendo-horizontal-form-field-wrap-max-width: null !default; + +/// The width of the inline Form element. +/// @group form +$kendo-inline-form-element-width: null !default; + +/// The horizontal padding of the inline Form field. +/// @group form +$kendo-inline-form-field-padding-x: null !default; + +/// The vertical padding of the inline Form field. +/// @group form +$kendo-inline-form-field-padding-y: null !default; + +/// The invalid text color of the Form. +/// @group form +$kendo-forms-invalid-color: null !default; + + +/// The horizontal margin of the optional label in the Form. +/// @group form +$kendo-label-optional-margin-x: null !default; +/// The font size of the optional label in the Form. +/// @group form +$kendo-label-optional-font-size: null !default; +/// The font style of the optional label in the Form. +/// @group form +$kendo-label-optional-font-style: null !default; + + +/// The margin of the Form fieldset. +/// @group form +$kendo-fieldset-margin: null !default; +/// The font size of the Form fieldset. +/// @group form +$kendo-fieldset-font-size: null !default; +/// The background color of the Form fieldset. +/// @group form +$kendo-fieldset-bg: null !default; +/// The text color of the Form fieldset. +/// @group form +$kendo-fieldset-text: null !default; +/// The border color of the Form fieldset. +/// @group form +$kendo-fieldset-border: null !default; + +/// The padding of the Form fieldset legend. +/// @group form +$kendo-fieldset-legend-padding: null !default; +/// The margin of the Form fieldset legend +/// @group form +$kendo-fieldset-legend-margin: null !default; + +/// The margin of the Form alert error. +/// @group form +$kendo-form-alert-error-margin: null !default; + +/// The margin of the Form field info. +/// @group form +$kendo-form-field-info-margin: null !default; + +/// The background color of the Form legend. +/// @group form +$kendo-fieldset-legend-bg: null !default; +/// The text color of the Form legend. +/// @group form +$kendo-fieldset-legend-text: null !default; +/// The border color of the Form legend. +/// @group form +$kendo-fieldset-legend-border: null !default; + +/// The sizes map for the Form. +/// @group form +$kendo-form-sizes: null !default; + diff --git a/packages/core/scss/components/gantt/_index.scss b/packages/core/scss/components/gantt/_index.scss new file mode 100644 index 00000000000..73790b1ceed --- /dev/null +++ b/packages/core/scss/components/gantt/_index.scss @@ -0,0 +1,37 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../validator/_index.scss" as *; +@use "../datetimepicker/_index.scss" as *; +@use "../numerictextbox/_index.scss" as *; +@use "../window/_index.scss" as *; +@use "../splitter/_index.scss" as *; +@use "../treelist/_index.scss" as *; +@use "../time-marker/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-gantt--styles() { + @include import-once( "gantt" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-input--styles(); + @include kendo-validator--styles(); + @include kendo-date-time-picker--styles(); + @include kendo-numeric-textbox--styles(); + @include kendo-window--styles(); + @include kendo-splitter--styles(); + @include kendo-treelist--styles(); + @include kendo-time-marker--styles(); + @include kendo-gantt--layout(); + @include kendo-gantt--theme(); + @include kendo-utils--typography--white-space(); + @include kendo-utils--table--table-layout(); + } +} diff --git a/packages/core/scss/components/gantt/_layout.scss b/packages/core/scss/components/gantt/_layout.scss new file mode 100644 index 00000000000..768b323c0dd --- /dev/null +++ b/packages/core/scss/components/gantt/_layout.scss @@ -0,0 +1,929 @@ +@use "../../typography/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../table/_variables.scss" as *; +@use "../grid/_variables.scss" as *; +@use "../toolbar/_variables.scss" as *; +@use "../button/_variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-gantt--layout-base() { + + $row-height: #{$kendo-line-height-em} + calc( 2 * #{$kendo-table-md-cell-padding-y} ) + #{$kendo-grid-cell-horizontal-border-width}; + + .k-gantt { + border-width: $kendo-gantt-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-gantt-font-family; + font-size: $kendo-gantt-font-size; + line-height: $kendo-gantt-line-height; + display: flex; + flex-flow: column nowrap; + position: relative; + white-space: nowrap; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + .k-table-td { + white-space: nowrap; + } + + // other + td { + overflow: hidden; + white-space: nowrap; + vertical-align: top; + } + .k-grid-header tr { + height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px ); + } + .k-grid-header .k-header { + position: static; + } + .k-treelist .k-grid-header .k-header { + position: relative; + } + .k-grid-content tr { + height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} ); + } + + &.k-gantt-planned .k-grid-content tr { + height: calc( #{$kendo-line-height-em} * 1.7 + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} ); + } + + // Layout + .k-gantt-layout { + white-space: normal; + vertical-align: top; + display: inline-block; + } + + + // Splitbar + .k-splitbar { + position: relative; + display: inline-flex; + } + + // Splitter + .k-gantt-splitter { + border-width: 0; + } + + // React gantt + .k-treelist-scrollable { + width: 100%; + border-width: 0; + overflow: auto; + + .k-grid-header .k-header { + position: sticky; + } + .k-grid-header th, + .k-grid-content-sticky { + z-index: 4; + } + .k-grid-header th.k-grid-header-sticky { + z-index: 5; + } + .k-grid-header tr:first-child th:last-child, + tbody td:last-child { + padding: 0; + vertical-align: top; + } + .k-grid-header th:last-child { + .k-header { + padding-block: $kendo-grid-header-padding-y; + padding-inline: $kendo-grid-header-padding-x; + border-width: 0 0 1px $kendo-grid-cell-vertical-border-width; + white-space: nowrap; + } + } + + tr.k-selected > td:last-child { + background: transparent; + } + + // Task + .k-task { + display: inline-flex; + flex-flow: row nowrap; + white-space: nowrap; + z-index: 3; + + &:hover .k-task-start, + &:hover .k-task-end { + display: block; + } + + &:hover .k-task-draghandle { + visibility: visible; + } + } + .k-task-content { + padding-block: $kendo-gantt-task-padding-y; + padding-inline: $kendo-gantt-task-padding-x; + display: block; + line-height: normal; + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .k-task-actions { + flex-shrink: 0; + } + + // Milestone + .k-task-milestone { + border: 0; + transform: none; + background: none; + + .k-task-milestone-content { + width: 100%; + height: 100%; + border-width: 1px; + border-style: solid; + box-sizing: border-box; + transform: rotate(45deg); + } + } + + // Summary + .k-task-summary { + height: 15px; + clip-path: polygon(-20px 0, calc(100% + 20px) 0, calc(100% + 20px) 100%, 100% 100%, calc(100% - 8px) calc(100% - 5px), 8px calc(100% - 5px), 0 100%, -20px 100%); + } + .k-task-summary-complete { + width: 100%; + height: 15px; + } + + // Dots + .k-task-start { + transform: translateX(-140%) translateY(-50%); + } + .k-task-end { + transform: translateX(140%) translateY(-50%); + } + .k-master-row:hover .k-task-dot { + display: block; + } + + // Table with columns borders + .k-gantt-columns { + background: transparent; + pointer-events: none; + table-layout: fixed; + } + } + + // Dependency lines SVG + .k-gantt-dependencies-svg { + position: absolute; + top: 0; + left: 0; + overflow: visible; + pointer-events: none; + z-index: 2; + + polyline { + stroke-width: $kendo-gantt-line-size; + } + } + } + + // Header and footer + .k-gantt-header { + border-width: 0 0 $kendo-toolbar-border-width; + flex-shrink: 0; + z-index: 6; + } + .k-gantt-footer { + border-width: $kendo-toolbar-border-width 0 0; + flex-shrink: 0; + } + + + // Toolbar + .k-gantt-toolbar {} + + .k-gantt-toggle { + display: none; + } + .k-gantt-add {} + .k-gantt-create {} + .k-gantt-views {} + + + // Gantt views + .k-gantt-views-wrapper { + margin-left: auto; + + .k-views-dropdown { + width: auto; + font-size: inherit; + display: none; + cursor: pointer; + } + } + + + // Responsive gantt toolbar + @media (max-width: 480px) { // stylelint-disable-line + + .k-gantt-toolbar { + .k-gantt-toggle { + display: inline-flex; + } + .k-gantt-pdf, + .k-gantt-create { + padding: $kendo-button-padding-y; + width: $kendo-button-calc-size; + height: $kendo-button-calc-size; + + .k-button-icon {} + .k-button-text { + display: none; + } + } + } + + } + + @media (max-width: 1024px) { // stylelint-disable-line + .k-gantt-views-wrapper .k-gantt-views { display: none; } + .k-gantt-views-wrapper .k-views-dropdown { display: flex; } + } + + + // Gantt content + .k-gantt-content { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + flex: 1 1 auto; + overflow: hidden; + } + + + // Treelist + .k-gantt-treelist { + + .k-treelist { + height: 100%; + border-width: 0; + } + .k-grid-header, + .k-grid-footer { + padding: 0 !important; // stylelint-disable-line declaration-no-important + } + .k-grid-header tr { + height: calc( #{$kendo-line-height-em} * 2 + calc( #{$kendo-grid-header-padding-y} * 4 ) + 2px ); + vertical-align: bottom; + } + .k-grid-content { + overflow: hidden; + overflow-x: scroll; + } + .k-grid-content td { + vertical-align: middle; + } + .k-gantt-treelist-nested-columns .k-grid-header tr { + height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px ); + } + + &.k-gantt-treelist-scrollable { + .k-grid-content { + overflow: scroll; + } + } + } + + + // Timeline + .k-gantt-timeline-pane { + + .k-gantt-timeline { + height: 100%; + border-width: 0; + display: flex; + + *, + *::before, + *::after, + &::before, + &::after { + box-sizing: border-box; + } + } + .k-grid-header {} + .k-grid-content { + overflow-x: scroll; + } + .k-header { + padding-block: $kendo-grid-header-padding-y; + padding-inline: $kendo-grid-header-padding-x; + border-width: 0 0 1px $kendo-grid-cell-vertical-border-width; + white-space: nowrap; + } + + } + + + // Tables + .k-gantt-tables { + position: relative; + border-color: inherit; + } + .k-gantt-rows, + .k-gantt-columns { + border-color: inherit; + position: absolute; + z-index: 0; + top: 0; + left: 0; + } + .k-gantt-rows {} + + + // Deps + .k-gantt-dependencies { + opacity: .7; + position: absolute; + top: 0; + left: 0; + + // Arrows + .k-arrow-e, + .k-arrow-w { + width: 0; + height: 0; + border: 5px solid transparent; + position: absolute; + top: -4px; + } + .k-arrow-e { + border-left-color: currentColor; + right: -6px; + } + .k-arrow-w { + border-right-color: currentColor; + left: -6px; + } + } + + // Dependency Lines + .k-gantt-line { + background-color: currentColor; + border-color: currentColor; + position: absolute; + } + .k-gantt-line.k-selected { + z-index: 3; + } + + .k-gantt-line-h { + height: $kendo-gantt-line-size; + } + + .k-gantt-line-v { + width: $kendo-gantt-line-size; + } + + .k-gantt-dependency-hint { + z-index: 4; + } + + + // Tasks + .k-gantt-tasks { + position: relative; + + td, + .k-table-td { + padding: 0; + border-width: 0; + position: relative; + vertical-align: middle; + } + td::after { content: "\200b"; } + } + + .k-task-wrap { + margin-block: 0; + margin-inline: -21px; + padding-block: 5px; + padding-inline: 21px; + display: inline-flex; + flex-direction: row; + align-items: center; + position: relative; + z-index: 2; + } + .k-task-wrap.k-drag-hint { + position: absolute; + } + .k-task { + position: relative; + flex: 1 1 auto; + } + .k-task-dot { + width: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) ); + height: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) ); + line-height: 1; + cursor: pointer; + display: none; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + .k-task-wrap:hover .k-task-dot, + .k-task-wrap.k-origin .k-task-dot { + display: block; + } + .k-task-dot::before { + content: ""; + width: $kendo-gantt-dot-size; + height: $kendo-gantt-dot-size; + border-width: 0; + border-style: solid; + border-radius: 100%; + display: inline-block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .k-task-dot:hover::before, + .k-task-dot.k-hover::before { + border-width: 1px; + } + .k-task-start { left: 0; } + .k-task-end { right: 0; } + .k-task-draghandle { + margin-left: 16px; + width: 0; + height: 0; + border: 5px solid transparent; + border-top-width: 0; + border-bottom-color: inherit; + position: absolute; + bottom: 0; + // display: none; + cursor: ew-resize; + visibility: hidden; + } + .k-task-wrap:hover .k-task-draghandle { + visibility: visible; + } + + + // Milestone + .k-milestone-wrap { + margin-block: 0; + margin-inline: -2em; + } + .k-task-milestone { + width: 1em; + height: 1em; + border-width: 1px; + border-style: solid; + box-sizing: border-box; + transform: rotate(45deg); + } + + + // Summary + .k-summary-wrap {} + .k-task-summary { + height: 10px; + display: inline-block; + vertical-align: top; + } + .k-task-summary, + .k-task-summary-complete { + background-color: currentColor; + + &::before, + &::after { + content: ""; + width: 0; + height: 0; + border: 8px solid transparent; + position: absolute; + top: 0; + display: none; + } + + &::before { + border-left-color: currentColor; + left: 0; + } + &::after { + border-right-color: currentColor; + right: 0; + } + } + .k-task-summary-complete { + height: 10px; + position: relative; + z-index: 2; + } + .k-task-summary-progress { + height: 15px; + overflow: hidden; + } + + + // Single task + .k-single-wrap {} + .k-task-single { + @include border-radius( k-border-radius(md) ); + border-width: $kendo-gantt-task-border-width; + border-style: solid; + box-sizing: border-box; + cursor: default; + + .k-resize-handle { + opacity: .5; + z-index: 2; + visibility: hidden; + cursor: ew-resize; + } + + .k-resize-handle::before { + position: absolute; + top: 2px; + bottom: 2px; + } + + .k-resize-w { + left: 0; + } + + .k-resize-w::before { + left: 2px; + border-left-width: 1px; + } + + .k-resize-e { + right: 0; + } + + .k-resize-e::before { + right: 2px; + border-left-width: 1px; + } + + &:hover .k-resize-handle, + &:hover .k-task-actions { + visibility: visible; + } + } + .k-task-complete { + @include border-radius( k-border-radius(md) ); + width: 20%; + position: absolute; + z-index: 1; + top: 0; + bottom: 0; + left: 0; + } + .k-task-content { + position: relative; + z-index: 2; + display: flex; + flex-direction: row; + align-items: center; + white-space: nowrap; + } + .k-task-template { + padding-block: $kendo-gantt-task-padding-y; + padding-inline: $kendo-gantt-task-padding-x; + line-height: normal; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + } + .k-task-actions { + padding: $kendo-gantt-task-actions-padding; + white-space: nowrap; + display: flex; + flex-direction: row; + align-items: center; + visibility: hidden; + z-index: 1; + } + .k-task-actions > .k-link { + display: inline-flex; + } + + .k-resources-wrap { + position: absolute; + display: inline-block; + z-index: 2; + margin-left: 20px; + margin-top: -2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + .k-resource { + margin-block: 0; + margin-inline: 5px; + } + } + + + // Task tooltip + .k-task-details { + padding-block: $kendo-gantt-task-tooltip-padding-y; + padding-inline: $kendo-gantt-task-tooltip-padding-x; + white-space: nowrap; + + strong { + font-size: var( --kendo-font-size-lg, inherit ); + font-weight: normal; + display: block; + } + .k-task-pct { + font-size: $kendo-icon-size-xxl; + } + ul { + line-height: normal; + } + } + + // Planned position + .k-gantt-planned { + .k-gantt-dependencies, + .k-task-dot, + .k-resources-wrap { + margin-top: $kendo-gantt-planned-dependency-margin-y; + } + + .k-task-wrap { + flex-direction: column; + align-items: flex-start; + } + + .k-task-inner-wrap { + display: inline-flex; + } + + .k-task-wrap.k-drag-hint { + top: $kendo-gantt-planned-single-drag-hint-top; + } + + .k-summary-wrap.k-drag-hint { + top: $kendo-gantt-planned-summary-drag-hint-top; + } + + .k-milestone-wrap.k-drag-hint { + top: $kendo-gantt-planned-milestone-drag-hint-top; + } + } + + // Planned element + .k-task-planned { + margin: 0 0 $kendo-gantt-planned-margin-y; + line-height: $kendo-gantt-planned-line-height; + display: flex; + align-items: center; + + .k-task-moment { + border-width: $kendo-gantt-planned-border-width; + border-radius: $kendo-gantt-planned-moment-border-radius; + border-style: solid; + height: $kendo-gantt-planned-moment-height; + width: $kendo-gantt-planned-moment-width; + } + + .k-task-duration { + height: $kendo-gantt-planned-duration-height; + } + + .k-task-moment.k-moment-left { + margin-left: $kendo-gantt-planned-moment-left-margin-x; + } + + &:hover .k-task-duration { + height: $kendo-gantt-planned-duration-hover-height; + } + } + + .k-milestone-wrap .k-task-moment { + margin-left: $kendo-gantt-planned-milestone-moment-margin-x; + } + + // Planned Tooltip + .k-planned-tooltip { + .k-task-content { + display: block; + } + } + + // Delay offset + .k-task-offset-wrap .k-task-content .k-resize-e { + display: none; + } + + .k-task-offset { + flex-direction: row-reverse; + display: flex; + + .k-resize-handle { + right: 0; + z-index: 2; + visibility: hidden; + margin-right: $kendo-gantt-planned-offset-resize-handler-margin-x; + } + + .k-resize-handle::before { + border-left-width: 1px; + position: absolute; + top: $kendo-gantt-offset-resize-handler-top; + bottom: .5em; + margin-right: 2px; + } + } + + .k-task-single:hover + .k-task-offset .k-task-actions, + .k-task-offset:hover .k-task-actions, + .k-task-single:hover + .k-task-offset .k-resize-handle, + .k-task-offset:hover .k-resize-handle { + visibility: visible; + } + + + // Dependency Validation Tooltip + .k-gantt-tooltip-validation { + max-width: $kendo-gantt-validation-tooltip-width; + display: block; + + &::before { + content: ""; + width: 4px; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + } + .k-gantt-tooltip-validation-row { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .k-gantt-tooltip-validation-label { + display: inline-flex; + min-width: $kendo-gantt-validation-tooltip-label-width; + } + .k-gantt-tooltip-validation-value { + // TODO: extract to variable + font-weight: var( --kendo-font-weight-bold, normal ); + } + .k-gantt-tooltip-validation-label, + .k-gantt-tooltip-validation-value { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + + + + // Gantt export + .k-pdf-export-shadow { + .k-gantt { + float: left; + } + + .k-gantt, + .k-gantt-timeline-pane, + .k-gantt-dependencies { + width: auto !important; // stylelint-disable-line declaration-no-important + height: auto !important; // stylelint-disable-line declaration-no-important + overflow: visible !important; // stylelint-disable-line declaration-no-important + } + + .k-gantt-treelist .k-treelist { + display: block; + } + + .k-gantt-layout.k-splitbar { + display: none; + } + } + + + + // Gantt edit form + .k-gantt-edit-form {} + + .k-gantt-edit-form .k-gantt-update {} + .k-gantt-edit-form .k-gantt-cancel {} + .k-gantt-edit-form .k-gantt-delete { + float: left; + } + + + + + // Gantt RTL + .k-rtl, + [dir="rtl"] { + + .k-gantt-rows, + .k-gantt-columns { + left: auto; + right: 0; + } + + .k-task-wrap:not(.k-milestone-wrap) { + margin-block: 0; + margin-inline: -26px; + } + + .k-gantt-timeline-pane { + .k-header { + border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0; + } + .k-header:first-child { + border-right-width: 0; + } + + .k-task-start { + left: auto; + right: 0; + } + + .k-task-end { + right: auto; + left: 0; + } + } + + .k-task-content { + text-align: end; + } + + .k-task-complete { + left: auto; + right: 0; + } + + .k-task-draghandle { + margin-left: 0; + margin-right: 16px; + } + + .k-gantt-dependencies { + left: auto; + right: 0; + } + + .k-gantt-delete { + float: right; + } + + .k-task-offset-wrap .k-task-content { + .k-resize-e { + display: block; + } + + .k-resize-w { + display: none; + } + } + + .k-milestone-wrap { + margin-left: $kendo-gantt-rtl-milestone-wrap-margin-x; + } + + .k-milestone-wrap .k-task-moment { + margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x; + } + + .k-gantt-timeline-pane .k-milestone-wrap .k-task-start { + right: $kendo-gantt-rtl-milestone-dot-start-margin-x; + } + + .k-gantt-tooltip-validation::before { + left: auto; + right: 0; + } + } + +} + + +@mixin kendo-gantt--layout() { + @include kendo-gantt--layout-base(); +} diff --git a/packages/core/scss/components/gantt/_theme.scss b/packages/core/scss/components/gantt/_theme.scss new file mode 100644 index 00000000000..43926d3e3db --- /dev/null +++ b/packages/core/scss/components/gantt/_theme.scss @@ -0,0 +1,286 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-gantt--theme-base() { + + // Gantt + .k-gantt { + @include fill( + $kendo-gantt-text, + $kendo-gantt-bg, + $kendo-gantt-border + ); + + // React gantt + .k-treelist-scrollable { + .k-task-milestone .k-task-milestone-content { + @include fill( + $bg: $kendo-gantt-milestone-bg, + $border: $kendo-gantt-milestone-border + ); + } + .k-task-milestone.k-selected .k-task-milestone-content { + @include fill( + $bg: $kendo-gantt-milestone-selected-bg, + $border: $kendo-gantt-milestone-selected-border + ); + } + } + + .k-gantt-dependencies-svg { + polyline { + fill: none; + stroke: $kendo-gantt-line-fill; + } + + polyline.k-selected { + stroke: $kendo-gantt-line-selected-fill; + } + } + } + + // Header and footer + .k-gantt-header {} + .k-gantt-footer { + @include box-shadow( none ); + } + .k-gantt-toolbar {} + + + // Treelist + .k-gantt-treelist { + @include fill( + $kendo-gantt-treelist-text, + $kendo-gantt-treelist-bg, + $kendo-gantt-treelist-border + ); + + .k-treelist, + .k-grid-content { + background-color: transparent; + } + } + + + // Rows and colls + .k-gantt-rows {} + .k-gantt-columns {} + + + // Non work hours + .k-gantt .k-nonwork-hour { + @include fill( + $kendo-gantt-nonwork-text, + $kendo-gantt-nonwork-bg, + $kendo-gantt-nonwork-border + ); + } + + + // Task dot + .k-task-dot {} + .k-task-dot::before { + @include fill( + $bg: $kendo-gantt-dot-bg, + $border: $kendo-gantt-dot-border + ); + } + .k-task-dot:hover::before, + .k-task-dot.k-hover::before { + @include fill( + $bg: $kendo-gantt-dot-hover-bg, + $border: $kendo-gantt-dot-hover-border + ); + } + + + // Milestone + .k-task-milestone { + @include fill( + $bg: $kendo-gantt-milestone-bg, + $border: $kendo-gantt-milestone-border + ); + + &.k-task-delayed { + @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px); + } + + &.k-task-advanced { + @include fill( + $bg: $kendo-gantt-advanced-bg + ); + } + } + .k-task-milestone.k-selected { + background-image: none; + @include fill( + $bg: $kendo-gantt-milestone-selected-bg, + $border: $kendo-gantt-milestone-selected-border + ); + } + + + // Summary + .k-task-summary { + color: $kendo-gantt-summary-bg; + + &.k-task-delayed { + color: $kendo-gantt-delayed-bg-lighter; + } + + &.k-task-advanced { + color: $kendo-gantt-advanced-bg-lighter; + } + } + .k-task-summary-complete { + color: $kendo-gantt-summary-progress-bg; + } + .k-task-delayed .k-task-summary-complete { + color: $kendo-gantt-delayed-bg; + } + .k-task-advanced .k-task-summary-complete { + color: $kendo-gantt-advanced-bg; + } + .k-task-summary.k-selected { + color: $kendo-gantt-summary-selected-bg; + + .k-task-summary-complete { + color: $kendo-gantt-summary-progress-selected-bg; + } + } + + + // Tasks + .k-task-single { + @include fill( + $kendo-gantt-task-text, + $kendo-gantt-task-bg, + $kendo-gantt-task-border + ); + + &.k-task-delayed { + @include fill( + $bg: $kendo-gantt-delayed-bg-lighter + ); + } + + &.k-task-advanced { + @include fill( + $bg: $kendo-gantt-advanced-bg-lighter + ); + } + + .k-task-complete { + background-color: $kendo-gantt-task-progress-bg; + } + } + .k-task-delayed .k-task-complete { + @include fill( + $bg: $kendo-gantt-delayed-bg + ); + } + .k-task-advanced .k-task-complete { + @include fill( + $bg: $kendo-gantt-advanced-bg + ); + } + .k-task-single.k-selected { + @include fill( + $kendo-gantt-task-selected-text, + $kendo-gantt-task-selected-bg, + $kendo-gantt-task-selected-border + ); + + .k-task-complete { + background-color: $kendo-gantt-task-progress-selected-bg; + } + } + + // Dependency Lines + .k-gantt-line { + color: $kendo-gantt-line-fill; + } + .k-gantt-line.k-selected { + color: $kendo-gantt-line-selected-fill; + } + + // Planned element + .k-task-planned { + .k-task-moment { + @include fill( + $bg: transparent, + $border: $kendo-gantt-planned-border + ); + } + .k-task-duration { + @include fill( + $bg: $kendo-gantt-planned-bg + ); + } + &:hover .k-task-moment { + @include fill( + $bg: $kendo-gantt-planned-bg + ); + } + } + + // Delay offset + .k-task-offset { + @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px); + + .k-resize-e::before { + @include fill( + $border: $kendo-gantt-action-on-offset-text + ); + } + + .k-task-actions { + color: $kendo-gantt-action-on-offset-text; + } + } + + .k-task-offset:hover { + @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px); + } + + .k-pdf-export .k-task-offset { + background-color: $kendo-gantt-delayed-bg; + } + + // Tooltips + .k-offset-tooltip-delayed { + @include fill( + $bg: $kendo-gantt-delayed-bg + ); + } + + .k-planned-tooltip { + @include fill( + $bg: $kendo-gantt-planned-bg + ); + } + + .k-gantt-tooltip-validation { + &::before { + background-color: $kendo-gantt-validation-tooltip-border; + } + } + .k-gantt-tooltip-valid { + &::before { + background-color: $kendo-gantt-validation-tooltip-valid-border; + } + } + .k-gantt-tooltip-invalid { + &::before { + background-color: $kendo-gantt-validation-tooltip-invalid-border; + } + } + +} + + +@mixin kendo-gantt--theme() { + @include kendo-gantt--theme-base(); +} diff --git a/packages/core/scss/components/gantt/_variables.scss b/packages/core/scss/components/gantt/_variables.scss new file mode 100644 index 00000000000..4c8f60d2aab --- /dev/null +++ b/packages/core/scss/components/gantt/_variables.scss @@ -0,0 +1,251 @@ +// Gantt + +/// The border width of the Gantt. +/// @group gantt +$kendo-gantt-border-width: null !default; +/// The font family of the Gantt. +/// @group gantt +$kendo-gantt-font-family: null !default; +/// The font size of the Gantt. +/// @group gantt +$kendo-gantt-font-size: null !default; +/// The line height of the Gantt. +/// @group gantt +$kendo-gantt-line-height: null !default; + +/// The background color of the Gantt. +/// @group gantt +$kendo-gantt-bg: null !default; +/// The text color of the Gantt. +/// @group gantt +$kendo-gantt-text: null !default; +/// The border color of the Gantt. +/// @group gantt +$kendo-gantt-border: null !default; + +/// The background color of the Gantt TreeList. +/// @group gantt +$kendo-gantt-treelist-bg: null !default; +/// The text color of the Gantt TreeList. +/// @group gantt +$kendo-gantt-treelist-text: null !default; +/// The border color of the Gantt TreeList. +/// @group gantt +$kendo-gantt-treelist-border: null !default; + +/// The background color of the Gantt non-working days. +/// @group gantt +$kendo-gantt-nonwork-bg: null !default; +/// The text color of the Gantt non-working days. +/// @group gantt +$kendo-gantt-nonwork-text: null !default; +/// The border color of the Gantt non-working days. +/// @group gantt +$kendo-gantt-nonwork-border: null !default; + +/// The size of the Gantt connecting lines. +/// @group gantt +$kendo-gantt-line-size: null !default; +/// The background fill color of the Gantt connecting lines. +/// @group gantt +$kendo-gantt-line-fill: null !default; +/// The background fill of the selected Gantt connecting lines. +/// @group gantt +$kendo-gantt-line-selected-fill: null !default; + +/// The size of the Gantt task dot. +/// @group gantt +$kendo-gantt-dot-size: null !default; +/// The spacing of the Gantt task dot. +/// @group gantt +$kendo-gantt-dot-spacing: null !default; +/// The background color of the Gantt task dot. +/// @group gantt +$kendo-gantt-dot-bg: null !default; +/// The border color of the Gantt task dot. +/// @group gantt +$kendo-gantt-dot-border: null !default; +/// The background color of the hovered Gantt task dot. +/// @group gantt +$kendo-gantt-dot-hover-bg: null !default; +/// The border color of the hovered Gantt task dot. +/// @group gantt +$kendo-gantt-dot-hover-border: null !default; + +/// The background color of the Gantt milestone. +/// @group gantt +$kendo-gantt-milestone-bg: null !default; +/// The border color of the Gantt milestone. +/// @group gantt +$kendo-gantt-milestone-border: null !default; +/// The background color of the selected Gantt milestone. +/// @group gantt +$kendo-gantt-milestone-selected-bg: null !default; +/// The border color of the selected Gantt milestone. +/// @group gantt +$kendo-gantt-milestone-selected-border: null !default; + +/// The background color of the Gantt summary. +/// @group gantt +$kendo-gantt-summary-bg: null !default; +/// The background color of the Gantt summary progress. +/// @group gantt +$kendo-gantt-summary-progress-bg: null !default; +/// The background color of the selected Gantt summary. +/// @group gantt +$kendo-gantt-summary-selected-bg: null !default; +/// The background color of the selected Gantt summary progress. +/// @group gantt +$kendo-gantt-summary-progress-selected-bg: null !default; + +/// The border width of the Gantt task. +/// @group gantt +$kendo-gantt-task-border-width: null !default; +/// The horizontal padding of the Gantt task. +/// @group gantt +$kendo-gantt-task-padding-x: null !default; +/// The vertical padding of the Gantt task. +/// @group gantt +$kendo-gantt-task-padding-y: null !default; +/// The background color of the Gantt task. +/// @group gantt +$kendo-gantt-task-bg: null !default; +/// The text color of the Gantt task. +/// @group gantt +$kendo-gantt-task-text: null !default; +/// The border color of the Gantt task. +/// @group gantt +$kendo-gantt-task-border: null !default; +/// The background color of the Gantt task progress. +/// @group gantt +$kendo-gantt-task-progress-bg: null !default; +/// The background color of selected the Gantt task. +/// @group gantt +$kendo-gantt-task-selected-bg: null !default; +/// The text color of the selected Gantt task. +/// @group gantt +$kendo-gantt-task-selected-text: null !default; +/// The border color of the selected Gantt task. +/// @group gantt +$kendo-gantt-task-selected-border: null !default; +/// The background color of the selected Gantt task progress. +/// @group gantt +$kendo-gantt-task-progress-selected-bg: null !default; + +/// The padding of the Gantt task actions. +/// @group gantt +$kendo-gantt-task-actions-padding: null !default; + +/// The vertical margin of the Gantt task planned line. +/// @group gantt +$kendo-gantt-planned-margin-y: null !default; +/// The border width of the Gantt task planned line. +/// @group gantt +$kendo-gantt-planned-border-width: null !default; +/// The line height of the Gantt task planned line. +/// @group gantt +$kendo-gantt-planned-line-height: null !default; + +/// The vertical margin of the Gantt planned dependencies. +/// @group gantt +$kendo-gantt-planned-dependency-margin-y: null !default; + +/// The default width of the Gantt planned line dot. +/// @group gantt +$kendo-gantt-planned-moment-width: null !default; +/// The default height of the Gantt planned line dot. +/// @group gantt +$kendo-gantt-planned-moment-height: null !default; +/// The border radius of the Gantt planned line dot. +/// @group gantt +$kendo-gantt-planned-moment-border-radius: null !default; +/// The horizontal margin of the Gantt planned line dot. +/// @group gantt +$kendo-gantt-planned-moment-left-margin-x: null !default; +/// The horizontal margin of the Gantt milestone planned line dot. +/// @group gantt +$kendo-gantt-planned-milestone-moment-margin-x: null !default; + +/// The default height of the Gantt planned line. +/// @group gantt +$kendo-gantt-planned-duration-height: null !default; +/// The height of the hovered Gantt planned line. +/// @group gantt +$kendo-gantt-planned-duration-hover-height: null !default; + +/// The top position of the Gantt drag hint. +/// @group gantt +$kendo-gantt-planned-single-drag-hint-top: null !default; +/// The top position of the Gantt summary drag hint. +/// @group gantt +$kendo-gantt-planned-summary-drag-hint-top: null !default; +/// The top position of the Gantt planned milestone drag hint. +/// @group gantt +$kendo-gantt-planned-milestone-drag-hint-top: null !default; + +/// The horizontal margin of the Gantt milestone wrap. +/// @group gantt +$kendo-gantt-rtl-milestone-wrap-margin-x: null !default; +/// The horizontal margin of the Gantt milestone line dot. +/// @group gantt +$kendo-gantt-rtl-milestone-planned-moment-margin-x: null !default; +/// The horizontal margin of the Gantt milestone task dot. +/// @group gantt +$kendo-gantt-rtl-milestone-dot-start-margin-x: null !default; + +/// The horizontal offset of the Gantt delayed task resize handler. +/// @group gantt +$kendo-gantt-planned-offset-resize-handler-margin-x: null !default; + +/// The background color of the Gantt planned Tooltip. +/// @group gantt +$kendo-gantt-planned-bg: null !default; +/// The border color of the Gantt planned Tooltip. +/// @group gantt +$kendo-gantt-planned-border: null !default; + +/// The background color of the Gantt delayed task. +/// @group gantt +$kendo-gantt-delayed-bg: null !default; +/// The complement background color of the Gantt delayed task. +/// @group gantt +$kendo-gantt-delayed-bg-lighter: null !default; + +/// The background color of the Gantt advanced task. +/// @group gantt +$kendo-gantt-advanced-bg: null !default; +/// The complement background color of the Gantt advanced task. +/// @group gantt +$kendo-gantt-advanced-bg-lighter: null !default; + +/// The text color of the Gantt delayed task action. +/// @group gantt +$kendo-gantt-action-on-offset-text: null !default; +/// The top position of the Gantt delayed task resize handler. +/// @group gantt +$kendo-gantt-offset-resize-handler-top: null !default; + +/// The default width of the Gantt validation Tooltip. +/// @group gantt +$kendo-gantt-validation-tooltip-width: null !default; +/// The default width of the Gantt validation Tooltip label. +/// @group gantt +$kendo-gantt-validation-tooltip-label-width: null !default; +/// The border color of the Gantt validation Tooltip. +/// @group gantt +$kendo-gantt-validation-tooltip-border: null !default; +/// The border color of the valid Gantt validation Tooltip. +/// @group gantt +$kendo-gantt-validation-tooltip-valid-border: null !default; +/// The border color of the invalid Gantt validation Tooltip. +/// @group gantt +$kendo-gantt-validation-tooltip-invalid-border: null !default; + +/// The horizontal padding of the Gantt task Tooltip. +/// @group gantt +$kendo-gantt-task-tooltip-padding-x: null !default; +/// The vertical padding of the Gantt task Tooltip. +/// @group gantt +$kendo-gantt-task-tooltip-padding-y: null !default; + + diff --git a/packages/core/scss/components/grid/_index.scss b/packages/core/scss/components/grid/_index.scss new file mode 100644 index 00000000000..89ac7556f6a --- /dev/null +++ b/packages/core/scss/components/grid/_index.scss @@ -0,0 +1,64 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../adaptive/_index.scss" as *; +@use "../progressbar/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../textbox/_index.scss" as *; +@use "../checkbox/_index.scss" as *; +@use "../radio/_index.scss" as *; +@use "../validator/_index.scss" as *; +@use "../autocomplete/_index.scss" as *; +@use "../datetimepicker/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../numerictextbox/_index.scss" as *; +@use "../menu/_index.scss" as *; +@use "../dialog/_index.scss" as *; +@use "../pager/_index.scss" as *; +@use "../chip/_index.scss" as *; +@use "../skeleton/_index.scss" as *; +@use "../list/_index.scss" as *; +@use "../table/_index.scss" as *; +@use "../tabstrip/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-grid--styles() { + @include import-once( "grid" ) { + @include core-styles(); + @include kendo-adaptive--styles(); + @include kendo-progressbar--styles(); + @include kendo-button--styles(); + @include kendo-action-buttons--styles(); + @include kendo-toolbar--styles(); + @include kendo-input--styles(); + @include kendo-textbox--styles(); + @include kendo-checkbox--styles(); + @include kendo-radio--styles(); + @include kendo-validator--styles(); + @include kendo-autocomplete--styles(); + @include kendo-date-time-picker--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-numeric-textbox--styles(); + @include kendo-menu--styles(); + @include kendo-dialog--styles(); + @include kendo-pager--styles(); + @include kendo-chip--styles(); + @include kendo-skeleton--styles(); + @include kendo-list--styles(); + @include kendo-table--styles(); + @include kendo-tabstrip--styles(); + @include kendo-grid--layout(); + @include kendo-grid--theme(); + @include kendo-utils--interactivity--touch-action(); + @include kendo-utils--interactivity--cursor(); + @include kendo-utils--layout--display(); + } +} diff --git a/packages/core/scss/components/grid/_layout.scss b/packages/core/scss/components/grid/_layout.scss new file mode 100644 index 00000000000..d03df8bba7a --- /dev/null +++ b/packages/core/scss/components/grid/_layout.scss @@ -0,0 +1,1382 @@ +@use "sass:map"; +@use "sass:math"; +@use "sass:list"; +@use "../../color-system/_constants.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../typography/index.import.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../icons/_variables.scss" as *; +@use "../chip/_variables.scss" as *; +@use "../forms/_variables.scss" as *; +@use "../button/_variables.scss" as *; +@use "../list/_variables.scss" as *; +@use "../tabstrip/_variables.scss" as *; +@use "../popup/_variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-grid--layout-base() { + + // Grid + .k-grid { + border-width: $kendo-grid-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-grid-font-family; + font-size: $kendo-grid-font-size; + line-height: $kendo-grid-line-height; + display: flex; + flex-direction: column; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + &.k-grid-display-block { + display: block; + } + + .k-grid-container { + display: flex; + flex: 1 1 auto; + overflow: hidden; + position: relative; + } + + .k-grid-aria-root { + border-color: inherit; + display: flex; + flex-direction: column; + flex: 1 1 auto; + overflow: hidden; + } + + .k-table { + margin: 0; + width: 100%; + max-width: none; + border-width: 0; + border-color: inherit; + border-collapse: separate; + border-spacing: 0; + box-sizing: content-box; + empty-cells: show; + outline: 0; + } + + .k-grid-header, + .k-grid-content, + .k-grid-content-locked, + .k-grid-footer { + .k-table { + table-layout: fixed; + } + } + + .k-table-thead, + .k-table-tbody, + .k-table-tfoot { + text-align: start; + border-color: inherit; + } + + .k-table-row { + border-color: inherit; + } + + .k-table-th, + td, + .k-table-td { + border-width: 0; + border-inline-start-width: $kendo-grid-cell-vertical-border-width; + border-style: solid; + border-color: inherit; + outline: 0; + font-weight: inherit; + text-align: inherit; + position: static; + overflow: hidden; + text-overflow: ellipsis; + box-sizing: content-box; + + &:first-child { + border-inline-start-width: 0; + } + + &:focus { + outline: none; + } + + > .k-radio, + > .k-radio-wrap, + > .k-checkbox, + > .k-checkbox-wrap { + vertical-align: top; + } + } + + .k-table-th { + border-block-end-width: 1px; + white-space: nowrap; + } + + td, + .k-table-td { + border-block-end-width: $kendo-grid-cell-horizontal-border-width; + white-space: unset; + vertical-align: middle; + } + + a { + color: inherit; + text-decoration: none; + } + + a:hover { + text-decoration: none; + } + + .k-grid-header-wrap { + box-sizing: content-box; + } + + .k-grid-header { + border-bottom-width: 1px; + font-size: $kendo-grid-header-font-size; + + .k-table { + margin-bottom: -1px; + } + + &.k-grid-draggable-header { + user-select: none; + touch-action: none; + } + + .k-table-th { + position: relative; + vertical-align: bottom; + cursor: default; + + &:first-child { + border-inline-start-width: 0; + } + + &.k-first { + border-inline-start-width: $kendo-grid-header-first-border; + } + } + + .k-table-th > .k-link { + line-height: inherit; + display: block; + overflow: hidden; + text-overflow: ellipsis; + outline: 0; + } + + .k-table-th > .k-link:focus { + text-decoration: none; + } + + .k-grid-filter, + .k-header-column-menu, + .k-grid-header-menu { + box-sizing: border-box; + outline: 0; + display: flex; + align-items: center; + align-content: center; + justify-content: center; + position: absolute; + inset-inline-end: $kendo-grid-header-menu-icon-spacing; + z-index: 1; + + &:hover { + cursor: pointer; + } + } + + .k-cell-inner > .k-link { + > .k-sort-icon { + vertical-align: text-top; + margin-inline-start: $kendo-grid-sorted-icon-spacing; + } + } + + .k-cell-inner > .k-link > .k-sort-icon .k-icon { + display: flex; + } + + .k-sort-order { + display: inline-block; + vertical-align: top; + height: $kendo-icon-size; + font-size: $kendo-grid-sorting-index-font-size; + margin-top: $kendo-grid-sorting-index-spacing-y; + margin-inline-start: $kendo-grid-sorting-index-spacing-x; + } + } + + .k-grid-header .k-filterable { + > .k-cell-inner { + .k-link { + padding-inline-end: 0; + } + } + } + + .k-cell-inner { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: inherit; + overflow: hidden; + + > .k-link { + width: auto; + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: inherit; + flex: 1; + overflow: hidden; + + > .k-sort-icon { + margin-inline-start: 0; + display: inline-block; + flex-shrink: 0; + } + + } + + .k-sort-order { + flex-shrink: 0; + line-height: normal; + } + + .k-grid-filter, + .k-header-column-menu, + .k-grid-header-menu { + position: static; + margin-inline-end: $kendo-grid-header-menu-icon-spacing; + } + } + + + // Grouping, hierarcy + .k-group-col, + .k-hierarchy-col { + padding: 0; + width: $kendo-grid-hierarchy-col-width; + } + + .k-grouping-row p { + margin: 0; + display: flex; + align-items: center; + align-content: center; + } + + .k-grouping-row td, + .k-grouping-row .k-table-td { + overflow: visible; + } + + .k-grouping-row + .k-table-row td, + .k-grouping-row + .k-table-row .k-table-td { + border-top-width: $kendo-grid-grouping-row-border-top; + } + + .k-grouping-row .k-group-cell, + .k-grouping-row + .k-table-row .k-group-cell { + border-top-width: 0; + text-overflow: clip; + } + + .k-grouping-row .k-icon { + margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} ); + margin-inline-end: math.div( $kendo-icon-size, 2 ); + text-decoration: none; + } + + .k-table .k-group-footer td, + .k-table .k-group-footer .k-table-td { + border-style: solid; + border-width: $kendo-grid-group-footer-border-y 0; + } + + .k-group-footer .k-group-cell + td, + .k-group-footer .k-group-cell + .k-table-td { + border-inline-start-width: $kendo-grid-cell-vertical-border-width; + } + + .k-hierarchy-cell, + .k-drag-cell { + text-align: center; + overflow: visible; + + > .k-font-icon { + padding-block: $kendo-grid-cell-padding-y; + padding-inline: 0; + width: 100%; + height: 100%; + // That causes an issue with grid material. Commenting it for now + // -- joneff + // line-height: $kendo-line-height-md; + display: inline-block; + outline: 0; + } + } + + .k-hierarchy-cell + .k-grid-content-sticky { + border-inline-start-width: $kendo-grid-cell-vertical-border-width; + } + .k-detail-cell {} + .k-master-row {} + + .k-detail-row { + .k-detail-cell { + border-inline-start-width: 0; + } + } + + .k-dirty-cell { + position: relative; + + &.k-edit-cell { + position: static; + } + + &.k-grid-content-sticky { + position: sticky; + } + } + + .k-dirty { + border-width: 5px; + border-color: transparent; + border-block-start-color: currentColor; + border-inline-start-color: currentColor; + inset-inline-start: 0; + inset-inline-end: auto; + } + + .k-grid-content-locked + .k-grid-content { + box-sizing: content-box; + } + + .k-grid-content-expander { + position: absolute; + visibility: hidden; + height: 1px; + bottom: 1px; // fix for vertical scrollbar appearing when no records template is displayed + } + + .k-grid-filter, + .k-header-column-menu, + .k-grid-header-menu, + .k-hierarchy-cell .k-icon { + border-width: 0; + } + + // Drag column + .k-drag-col { + padding: 0; + width: $kendo-grid-drag-cell-width; + } + + .k-drag-cell { + cursor: move; + } + } + + // Toolbar + .k-grid-toolbar { + border-width: 0 0 $kendo-grid-toolbar-border-width; + flex-shrink: 0; + } + .k-grid-toolbar-bottom { + border-width: $kendo-grid-toolbar-border-width 0 0; + } + + + // Grouping header + .k-grouping-header { + border-width: 0 0 1px; + border-style: solid; + border-color: inherit; + white-space: normal; + display: flex; + align-items: center; + position: relative; + flex-wrap: wrap; + + &::before { + content: ""; + height: $kendo-chip-calc-size; + display: inline-block; + vertical-align: middle; + } + + .k-chip-list { + flex-grow: 0; + display: contents; + } + + > .k-grouping-drop-container { + flex-grow: 1; + padding-block: $kendo-grid-grouping-header-padding-y; + margin-block: calc( #{$kendo-grid-grouping-header-padding-y} * -1 ); + display: inline-flex; + align-self: stretch; + align-items: center; + } + } + + .k-grouping-dropclue { + width: ($kendo-grid-group-drop-hint-size * 2); + position: absolute; + top: $kendo-grid-group-drop-hint-top; + box-sizing: content-box; + + &::before, + &::after { + display: inline-block; + content: ""; + position: absolute; + } + + &::before { + border-width: $kendo-grid-group-drop-hint-size; + border-style: solid; + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + top: 0; + } + + &::after { + width: $kendo-grid-group-drop-hint-line-size; + height: calc(100% - #{$kendo-grid-group-drop-hint-size}); + top: $kendo-grid-group-drop-hint-size; + inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{math.div( $kendo-grid-group-drop-hint-line-size, 2 )} ); + } + } + + + // Grid header / footer + .k-grid-header-wrap, + .k-grid-footer-wrap { + margin-inline-end: -#{$kendo-grid-cell-vertical-border-width}; + width: 100%; + border-width: 0; + border-inline-end-width: $kendo-grid-cell-vertical-border-width; + border-style: solid; + border-color: inherit; + position: relative; + overflow: hidden; + } + + .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable { + margin-inline-end: 0; + } + + .k-grid-header, + .k-grid-footer { + padding-inline-start: 0; + padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); + border-width: 0; + border-style: solid; + border-color: inherit; + flex: 0 0 auto; + } + + div.k-grid-header, + div.k-grid-footer { + display: flex; + flex-direction: row; + align-items: stretch; + } + + .k-column-resizer { + width: .5em; + height: 1000%; + display: block; + position: absolute; + top: 0; + inset-inline-end: 0; + cursor: col-resize; + } + + .k-row-resizer { + display: block; + height: $kendo-grid-row-resizer-height; + width: 100%; + background: none; + } + + .k-grid-footer { + border-top-width: 1px; + + td, + .k-table-td { + height: $kendo-line-height-em; + } + } + + .k-grid-footer td, + .k-group-footer td, + .k-grouping-row td, + .k-grid-footer .k-table-td, + .k-group-footer .k-table-td, + .k-grouping-row .k-table-td { + font-weight: bold; + } + + .k-grid-filter-popup { + min-width: $kendo-grid-column-menu-width; + max-width: $kendo-grid-column-menu-max-width; + } + + // Standalone column menu + .k-grid-column-menu-standalone a.k-grid-filter { + position: initial; + display: inline-block; + margin-block: -4px; + margin-inline: 0; + padding-block: 4px; + padding-inline: 8px; + } + + // Filter row + .k-filter-row { + line-height: $kendo-form-line-height; + + td, + .k-table-td, + .k-table-th { + border-width: 0; + border-block-end-width: 1px; + border-inline-start-width: $kendo-grid-cell-vertical-border-width; + white-space: nowrap; + } + + td:first-child, + .k-table-td:first-child { + border-inline-start-width: 0; + } + + .k-multiselect { + height: auto; + } + } + + .k-filtercell { + width: auto; + display: flex; + flex-flow: row nowrap; + align-items: center; + + > span, + .k-filtercell-wrapper { + width: 100%; + display: flex; + flex-flow: row nowrap; + align-items: center; + flex: 1 1 auto; + + > .k-button { + flex: none; + } + } + + } + + // Grid content + .k-grid-content, + .k-grid-content-locked { + border-color: inherit; + outline: 0; + + .k-table-row:last-child > td, + .k-table-row:last-child > .k-table-td { + border-bottom-width: 0; + } + } + + .k-grid-content { + width: 100%; + min-height: 0; + overflow: auto; + overflow-x: auto; + overflow-y: scroll; + position: relative; + flex: 1; + } + + // Virtualization + .k-virtual-scrollable-wrap { + height: 100%; + overflow-y: hidden; + position: relative; + } + + // Edit row + .k-grid .k-edit-cell, + .k-grid .k-command-cell, + .k-grid .k-grid-edit-row td, + .k-grid .k-grid-edit-row .k-table-td { + text-overflow: clip; + } + + .k-grid .k-edit-cell, + .k-grid .k-grid-edit-row td, + .k-grid .k-grid-edit-row .k-table-td { + + > input:not([type="checkbox"]):not([type="radio"]), + > select, + > .k-widget:not(.k-switch) { + width: 100%; + vertical-align: middle; + box-sizing: border-box; + } + > .k-radio, + > .k-checkbox, + > .k-radio-wrap, + > .k-checkbox-wrap { + vertical-align: middle; + } + } + + .k-grid .k-command-cell > .k-button { + margin-inline-end: $kendo-grid-command-cell-button-spacing; + vertical-align: middle; + + &:last-child { + margin-inline-end: unset; + } + } + + + // Resize handle + .k-grid > .k-resize-handle, + .k-grid-header .k-resize-handle { + height: 25px; + cursor: col-resize; + position: absolute; + z-index: 2; + } + + + // Selection Aggregates + .k-selection-aggregates { + border-width: $kendo-grid-selection-aggregates-border-width 0 0; + border-style: solid; + line-height: $kendo-grid-selection-aggregates-line-height; + display: flex; + justify-content: flex-end; + gap: $kendo-grid-selection-aggregates-spacing; + } + .k-selection-aggregates-item-value { + font-weight: $kendo-grid-selection-aggregates-font-weight; + } + + + // Pager + .k-grid-pager { + border-width: 1px 0 0; + border-color: inherit; + font-size: inherit; + } + .k-grid-pager-top { + border-width: 0 0 1px; + } + + .k-grid-virtual .k-grid-content { + .k-grid-table-wrap { + float: left; + width: 100%; + } + + .k-grid-table { + position: relative; + float: left; + z-index: 1; + } + + > .k-height-container { + position: relative; + float: left; + } + + &::after { + content: ""; + display: block; + clear: both; + } + } + + .k-width-container { + position: absolute; + visibility: hidden; + } + + .k-width-container div { + height: 1px; + } + + .k-grid-add-row td, + .k-grid-add-row .k-table-td { + border-bottom-style: solid; + border-bottom-width: 1px; + } + + // Locked columns + .k-grid-lockedcolumns { + white-space: nowrap; + } + + .k-grid-content, + .k-grid-content-locked { + white-space: normal; + } + + .k-grid-content-locked, + .k-grid-footer-locked, + .k-grid-header-locked { + flex: 0 0 auto; + display: inline-block; + vertical-align: top; + overflow: hidden; + position: relative; + border-style: solid; + border-width: 0; + border-inline-end-width: $kendo-grid-cell-vertical-border-width; + box-sizing: content-box; + + & + .k-grid-content.k-auto-scrollable { + display: inline-block; + } + + .k-table { + border-width: 0; + } + } + + .k-grid-content, + .k-grid-footer-wrap, + .k-grid-header-wrap { + flex: 1 1 auto; + display: inline-block; + vertical-align: top; + + &.k-auto-scrollable { + display: block; + } + } + + .k-grid-header-locked > .k-grid-header-table, + .k-grid-header-wrap > .k-grid-header-table { + margin-bottom: -1px; + } + + .k-grid-header .k-table-th.k-grid-header-sticky, + .k-grid-header .k-filter-row .k-grid-header-sticky, + .k-grid .k-grid-content-sticky, + .k-grid .k-grid-row-sticky, + .k-grid .k-grid-footer-sticky { + position: sticky; + z-index: 2; + + &.k-edit-cell { + overflow: visible; + z-index: 3; + } + } + + .k-master-row .k-grid-content-sticky::before, + .k-master-row.k-grid-row-sticky .k-table-td::before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + + kendo-grid { + .k-table-row.k-grid-row-sticky { + border: 0; + position: static; + z-index: auto; + } + + .k-grid-row-sticky td, + .k-grid-row-sticky .k-table-td { + border-bottom-width: $kendo-grid-border-width; + border-top-width: $kendo-grid-border-width; + + position: sticky; + top: inherit; + bottom: inherit; + z-index: 2; + } + + .k-grid-row-sticky td.k-grid-content-sticky, + .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky, + .k-grid-row-sticky .k-table-td.k-grid-content-sticky, + .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky { + z-index: 3; + } + + // Locked and sticky + .k-grid-header-locked .k-table-th.k-grid-header-sticky:last-child, + .k-grid-content-locked .k-table-row .k-grid-content-sticky:last-child { + border-inline-end: 0; + } + + .k-grid-header .k-grid-column-menu, + .k-grid-header .k-grid-header-menu { + z-index: 1; + } + } + + .k-grid-content-sticky.k-grid-row-sticky { + z-index: 3; + } + + .k-grid .k-table .k-grid-header-sticky, + .k-grid .k-table .k-grid-content-sticky, + .k-grid .k-table .k-grid-footer-sticky { + border-inline-end-width: $kendo-grid-cell-vertical-border-width; + + &:not([style*="display: none"]) + td, + &:not([style*="display: none"]) + .k-table-td, + &:not([style*="display: none"]) + .k-table-th { + border-inline-start-width: 0; + } + } + + .k-grid .k-grid-row-sticky { + border-bottom-width: $kendo-grid-border-width; + border-top-width: $kendo-grid-border-width; + } + + .k-grid-header-sticky.k-table-th.k-grid-no-left-border.k-first { + border-inline-start-width: 0; + } + + .k-grid.k-grid-no-scrollbar { + + .k-grid-header-wrap, + .k-grid-footer-wrap { + margin: 0; + border-width: 0; + } + + .k-grid-header, + .k-grid-footer { + padding: 0; + } + + .k-grid-content { + overflow-y: auto; + } + } + + .k-grid-norecords { + text-align: center; + } + + div.k-grid-norecords { + width: 100%; + height: 100%; + display: flex; + align-items: center; + } + + .k-grid-norecords-template { + box-sizing: border-box; + margin-block: 0; + margin-inline: auto; + width: 20em; + height: 4em; + border: 1px solid; + line-height: 4em; + } + + .k-column-title { + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + flex-shrink: 1; + overflow: hidden; + } + + + // Grid Sizes + @each $size, $size-props in $kendo-grid-sizes { + $_header-padding-x: map.get( $size-props, header-padding-x ); + $_header-padding-y: map.get( $size-props, header-padding-y ); + $_grouping-header-padding-x: map.get( $size-props, grouping-header-padding-x ); + $_grouping-header-padding-y: map.get( $size-props, grouping-header-padding-y ); + $_cell-padding-x: map.get( $size-props, cell-padding-x ); + $_cell-padding-y: map.get( $size-props, cell-padding-y ); + $_filter-cell-padding-x: map.get( $size-props, filter-cell-padding-x ); + $_filter-cell-padding-y: map.get( $size-props, filter-cell-padding-y ); + $_edit-cell-padding-x: map.get( $size-props, edit-cell-padding-x ); + $_edit-cell-padding-y: map.get( $size-props, edit-cell-padding-y ); + $_button-padding-y: map.get( $size-props, button-padding-y ); + $_button-calc-size: map.get( $size-props, button-calc-size ); + $_button-line-height: map.get( $size-props, button-line-height ); + $_group-dropclue-height: map.get( $size-props, group-dropclue-height ); + $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x ); + $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y ); + + .k-grid .k-grid-#{$size}, + .k-grid-#{$size} { + + .k-table-th { + padding-block: $_header-padding-y; + padding-inline: $_header-padding-x; + } + + td, + .k-table-td { + padding-block: $_cell-padding-y; + padding-inline: $_cell-padding-x; + } + + .k-grouping-header { + padding-block: $_grouping-header-padding-y; + padding-inline: $_grouping-header-padding-x; + gap: $_grouping-header-padding-y; + + &::before { + margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 ); + } + } + + .k-grid-header { + .k-table-th > .k-link { + margin-block: calc( #{$_header-padding-y} * -1 ); + margin-inline: calc( #{$_header-padding-x} * -1 ); + padding-block: $_header-padding-y; + padding-inline: $_header-padding-x; + } + + .k-grid-filter, + .k-header-column-menu, + .k-grid-header-menu { + padding: $_button-padding-y; + width: $_button-calc-size; + height: $_button-calc-size; + line-height: $_button-line-height; + bottom: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} ); + } + } + + .k-table-th { + > .k-cell-inner { + margin-block: calc( #{$_header-padding-y} * -1 ); + margin-inline: calc( #{$_header-padding-x} * -1 ); + + > .k-link { + padding-block: $_header-padding-y; + padding-inline: $_header-padding-x; + } + } + } + + .k-grouping-row .k-icon { + margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} ); + } + + .k-grouping-dropclue { + height: $_group-dropclue-height; + } + + .k-hierarchy-cell, + .k-drag-cell { + padding: 0; + + > .k-icon { + padding-block: $_cell-padding-y; + padding-inline: 0; + } + } + + + // Edit row + .k-edit-cell, + .k-command-cell, + .k-grid-edit-row td, + .k-grid-edit-row .k-table-td { + padding-block: $_edit-cell-padding-y; + padding-inline: $_edit-cell-padding-x; + } + + + // Filter row + .k-filter-row { + td, + .k-table-td, + .k-table-th { + padding-block: $_filter-cell-padding-y; + padding-inline: $_filter-cell-padding-x; + } + } + + .k-filtercell { + > span, + .k-filtercell-wrapper { + gap: calc( #{$_cell-padding-y} / 2 ); + } + } + + + // Selection Aggregates + .k-selection-aggregates { + padding-block: $_selection-aggregates-padding-x; + padding-inline: $_selection-aggregates-padding-y; + } + + // Resizing wrapper + .k-resizer-wrap { + display: block; + width: 100%; + padding-block-start: calc( #{$_edit-cell-padding-y} - #{$kendo-grid-row-resizer-height} ); + padding-block-end: $_edit-cell-padding-y; + position: absolute; + background: none; + cursor: row-resize; + z-index: 2; + } + } + + } + + + // PDF export + .k-loading-pdf-mask { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 100; + + > .k-i-loading { + position: absolute; + top: 50%; + left: 50%; + font-size: 64px; + } + + .k-loading-pdf-progress { + margin: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + } + + .k-pdf-export .k-loading-pdf-mask { + display: none; + } + + .k-grid-pdf-export-element { + position: absolute; + left: -10000px; + top: -10000px; + + .k-filter-row { + display: none; + } + } + + // Remove Grid scrollbar during built-in export + // stylelint-disable declaration-no-important + .k-pdf-export-shadow { + .k-grid { + float: left; + width: auto !important; + } + + // Remove all sizes and scrolling + .k-grid, + .k-grid-content, + .k-grid-content-locked { + height: auto !important; + overflow: visible; + } + + .k-grid-header-locked { + & + .k-grid-header-wrap, + & + .k-grid-content, + & + .k-grid-footer-wrap { + width: auto !important; + } + } + + // Remove empty space reserved above .k-table-the scrollbar + .k-grid-header, + .k-grid[data-role="grid"] .k-grid-footer { + padding: 0 !important; + } + } + // stylelint-enable declaration-no-important + + + // Filter menu + .k-filter-menu-popup { + min-width: $kendo-grid-column-menu-width; + max-width: $kendo-grid-column-menu-max-width; + } + .k-filter-menu { + box-sizing: border-box; + } + .k-filter-menu-container { + padding: k-spacing(2); + box-sizing: border-box; + display: flex; + flex-flow: column nowrap; + align-items: stretch; + gap: k-spacing(2); + + .k-filter-and { + width: min-content; + align-self: start; + } + + .k-actions { + margin: 0; + padding: 0; + } + + // Angular specific + kendo-numeric-filter-menu, + kendo-grid-string-filter-menu, + kendo-grid-date-filter-menu, + kendo-grid-numeric-filter-menu, + kendo-grid-filter-menu-input-wrapper, + kendo-treelist-string-filter-menu, + kendo-treelist-date-filter-menu, + kendo-treelist-numeric-filter-menu, + kendo-treelist-filter-menu-input-wrapper { + display: flex; + flex-flow: column nowrap; + align-items: stretch; + gap: k-spacing(2); + } + } + + .k-filter-menu.k-popup, + .k-grid-filter-popup.k-popup { + + .k-filter-menu-container { + min-width: $kendo-grid-column-menu-width; + max-width: $kendo-grid-column-menu-max-width; + } + } + + .k-popup .k-multicheck-wrap { + margin: 0; + padding: 0; + max-height: 300px; + font-size: $kendo-list-font-size; + line-height: $kendo-list-line-height; + white-space: nowrap; + overflow: auto; + list-style: none; + + .k-item, + .k-check-all-wrap { + padding-block: $kendo-grid-column-menu-list-item-padding-y; + padding-inline: $kendo-grid-column-menu-list-item-padding-x; + display: flex; + flex-flow: row nowrap; + } + } + + .k-filter-selected-items { + font-weight: bold; + line-height: normal; + white-space: nowrap; + } + + // autofitting requires automatic table layout to measure sizes + .k-autofitting { + width: auto !important; // stylelint-disable-line declaration-no-important + table-layout: auto !important; // stylelint-disable-line declaration-no-important + + .k-table-th, + td, + .k-table-td { + white-space: nowrap !important; // stylelint-disable-line declaration-no-important + } + + .k-detail-row { + display: none !important; // stylelint-disable-line declaration-no-important + } + } + + + + // Column menu + .k-column-menu-popup, + .k-grid-columnmenu-popup { + min-width: $kendo-grid-column-menu-width; + box-sizing: border-box; + + &.k-popup { + padding-block: $kendo-grid-column-menu-popup-padding-y; + padding-inline: $kendo-grid-column-menu-popup-padding-x; + max-width: $kendo-grid-column-menu-max-width; + } + + .k-actions { + margin: 0; + } + + } + .k-column-menu { + box-sizing: border-box; + + .k-menu:not(.k-context-menu) { + font-weight: 400; + } + + .k-expander { + border: 0; + background: inherit; + + .k-columnmenu-item { + display: flex; + align-items: center; + } + } + } + .k-column-menu-tabbed { + border-radius: $kendo-tabstrip-item-border-radius $kendo-tabstrip-item-border-radius 0 0; + + .k-tabstrip-items { + margin: (-$kendo-tabstrip-item-border-width) (-$kendo-tabstrip-item-border-width) 0; + + .k-item { + flex: 1; + } + + .k-link { + justify-content: center; + } + } + + .k-tabstrip-content { + padding-inline: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x; + padding-block: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y; + border-width: 0; + } + } + + .k-column-list { + padding: 0; + margin: 0; + list-style: none; + max-height: 200px; + overflow-x: hidden; + overflow-y: auto; + } + + .k-column-chooser-title, + .k-column-list-item { + padding-block: $kendo-grid-column-menu-list-item-padding-y; + padding-inline: $kendo-grid-column-menu-list-item-padding-x; + } + + .k-column-list-item { + margin: 0; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 4px; + cursor: pointer; + position: relative; + + .k-checkbox-label { + margin: 0; + } + + &:focus { + outline: none; + } + } + + .k-columns-items-wrap { + padding-block: $kendo-grid-column-menu-items-wrap-padding-y; + padding-inline: $kendo-grid-column-menu-items-wrap-padding-x; + } + + .k-columnmenu-item { + padding-block: $kendo-grid-column-menu-item-padding-y; + padding-inline: $kendo-grid-column-menu-item-padding-x; + outline: 0; + cursor: pointer; + + > .k-icon, + > .k-expander-indicator { + margin-inline-end: $kendo-icon-spacing; + } + } + + .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper { + border-top: 1px solid; + border-top-color: $kendo-popup-border; + } + + .k-columnmenu-item-content { + overflow: hidden; + } + + .k-column-menu-group-header { + padding-block: $kendo-grid-column-menu-group-header-padding-y; + padding-inline: $kendo-grid-column-menu-group-header-padding-x; + display: flex; + flex: 0 0 auto; + position: relative; + user-select: none; + } + + .k-column-menu-group-header-text { + border-bottom-width: $kendo-grid-column-menu-group-header-border-bottom-width; + border-bottom-style: solid; + font-size: $kendo-grid-column-menu-group-header-font-size; + line-height: $kendo-grid-column-menu-group-header-line-height; + font-weight: bold; + text-transform: $kendo-grid-column-menu-group-header-text-transform; + flex: 1 1 auto; + } + + .k-rtl .k-grid-virtual .k-grid-content, + [dir="rtl"] .k-grid-virtual .k-grid-content, + .k-rtl.k-grid-virtual .k-grid-content, + [dir="rtl"].k-grid-virtual .k-grid-content { + + .k-grid-table-wrap, + .k-grid-table, + > .k-height-container { + float: right; + } + } + +} + + +@mixin kendo-grid--layout() { + @include kendo-grid--layout-base(); +} diff --git a/packages/core/scss/components/grid/_theme.scss b/packages/core/scss/components/grid/_theme.scss new file mode 100644 index 00000000000..9ca13aba9b0 --- /dev/null +++ b/packages/core/scss/components/grid/_theme.scss @@ -0,0 +1,458 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; +@use "../button/_variables.scss" as *; +@use "../list/_variables.scss" as *; +@use "../popup/_variables.scss" as *; + +@mixin kendo-grid--theme-base() { + + .k-grid-header, + .k-grid-header-wrap, + .k-grouping-header, + .k-grid .k-table-th, + .k-grid td, + .k-grid .k-table-td, + .k-grid-footer, + .k-grid-footer-wrap, + .k-grid-content-locked, + .k-grid-footer-locked, + .k-grid-header-locked, + .k-filter-row > .k-table-th, + .k-filter-row > td, + .k-filter-row > .k-table-td { + @include fill( $border: $kendo-grid-header-border ); + } + + .k-grid-header, + .k-grouping-header, + .k-grid-add-row, + .k-grid-footer { + @include fill( + $color: $kendo-grid-header-text, + $bg: $kendo-grid-header-bg + ); + } + + .k-grid .k-table { + background-color: inherit; + } + + .k-grid-toolbar { + @include fill( + null, + null, + inherit, + null + ); + @include box-shadow( none ); + } + + .k-grid-content { + // setting this background color resolves glitches in iOS + @include fill($bg: $kendo-grid-bg ); + } + + .k-group-footer td, + .k-grouping-row td, + .k-group-footer .k-table-td, + .k-grouping-row .k-table-td, + .k-table-tbody .k-group-cell { + @include fill( + $color: $kendo-grid-grouping-row-text, + $bg: $kendo-grid-grouping-row-bg + ); + } + + .k-grouping-dropclue { + &::before { + border-color: $kendo-grid-header-text transparent transparent; + } + + &::after { + background-color: $kendo-grid-header-text; + } + } + + .k-grid { + @include fill( $kendo-grid-text, $kendo-grid-bg, $kendo-grid-border ); + + // Alt row + .k-table-row.k-table-alt-row { + background-color: $kendo-grid-alt-bg; + } + + // Hover state + .k-table-tbody > .k-table-row:not(.k-detail-row):hover, + .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover { + color: $kendo-grid-hover-text; + background-color: $kendo-grid-hover-bg; + } + + // Selected state + td.k-selected, + .k-table-row.k-selected > td, + .k-table-td.k-selected, + .k-table-row.k-selected > .k-table-td { + color: $kendo-grid-selected-text; + background-color: $kendo-grid-selected-bg; + } + + // Focused state + .k-table-th, + td, + .k-table-td, + .k-master-row > td, + .k-grouping-row > td, + .k-detail-row > td, + .k-group-footer > td, + .k-master-row > .k-table-td, + .k-grouping-row > .k-table-td, + .k-detail-row > .k-table-td, + .k-group-footer > .k-table-td, + .k-grid-pager { + &:focus, + &.k-focus { + @include focus-indicator( $kendo-grid-focus-shadow, true ); + } + } + + .k-grid-filter, + .k-header-column-menu, + .k-grid-header-menu, + .k-hierarchy-cell .k-icon { + color: $kendo-grid-header-text; + } + + .k-grouping-row { + background-color: $kendo-grid-grouping-row-bg; + + .k-icon { + color: $kendo-grid-header-text; + } + + .k-grid-content-sticky { + border-color: $kendo-grid-sticky-border; + border-top-color: $kendo-grid-header-border; + } + } + + // Locked columns + .k-grid-header-locked, + .k-grid-content-locked, + .k-grid-header-locked .k-table-th, + .k-grid-content-locked td, + .k-grid-content-locked .k-table-td { + border-color: $kendo-grid-sticky-header-border; + } + + .k-grid-content-locked { + .k-group-footer td, + .k-group-footer .k-table-td, + .k-group-cell { + @include fill( $border: $kendo-grid-header-border ); + } + + .k-grouping-row + .k-table-row td, + .k-grouping-row + .k-table-row .k-table-td { + border-top-color: $kendo-grid-header-border; + } + + // Selected state + .k-selected td, + .k-selected .k-table-td { + @include fill( $bg: $kendo-grid-sticky-selected-bg ); + } + + .k-selected.k-table-alt-row td, + .k-selected.k-table-alt-row .k-table-td { + @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + } + + // Selected hover + .k-selected:hover td, + .k-selected.k-hover td, + .k-selected:hover .k-table-td, + .k-selected.k-hover .k-table-td { + @include fill( $bg: $kendo-grid-sticky-selected-hover-bg ); + } + } + + .k-grid-header-locked .k-table-th { + border-bottom-color: $kendo-grid-header-border; + } + } + + col.k-sorted, + .k-table-th.k-sorted { + background-color: $kendo-grid-sorted-bg; + } + + // Grid header + .k-grid-header { + + .k-sort-icon, + .k-sort-order { + color: $kendo-grid-sorting-indicator-text; + } + + .k-grid-filter, + .k-header-column-menu, + .k-grid-header-menu, + .k-hierarchy-cell .k-icon { + &:hover { + color: $kendo-button-hover-text; + background-color: $kendo-button-hover-bg; + } + &:focus, + &.k-focus { + @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true ); + } + &.k-active { + color: $kendo-selected-text; + background-color: $kendo-selected-bg; + } + } + + .k-table-th.k-grid-header-sticky, + td.k-grid-header-sticky, + .k-table-td.k-grid-header-sticky, + .k-grid-header-sticky.k-sorted { + @include fill( + $color: $kendo-grid-sticky-header-text, + $bg: $kendo-grid-sticky-header-bg + ); + + border-right-color: $kendo-grid-sticky-header-border; + border-left-color: $kendo-grid-sticky-header-border; + } + } + + // Grid footer + .k-grid-footer { + @include fill( + $kendo-grid-footer-text, + $kendo-grid-footer-bg, + $kendo-grid-footer-border + ); + .k-grid-footer-sticky { + border-left-color: $kendo-grid-sticky-border; + border-right-color: $kendo-grid-sticky-border; + background-color: $kendo-grid-sticky-footer-bg; + } + } + + // Selection Aggregates + .k-selection-aggregates { + @include fill( + $kendo-grid-selection-aggregates-text, + $kendo-grid-selection-aggregates-bg, + $kendo-grid-selection-aggregates-border + ); + } + + // Content + .k-master-row { + .k-grid-content-sticky { + border-color: $kendo-grid-sticky-border; + border-top-color: $kendo-grid-header-border; + background-color: $kendo-grid-sticky-bg; + } + + .k-grid-row-sticky, + &.k-grid-row-sticky > .k-table-td { + border-top-color: $kendo-grid-sticky-border; + border-bottom-color: $kendo-grid-sticky-border; + background-color: $kendo-grid-sticky-bg; + } + + &.k-table-alt-row { + .k-grid-content-sticky, + &.k-grid-row-sticky > .k-table-td, + .k-grid-row-sticky { + @include fill( $bg: $kendo-grid-sticky-alt-bg ); + } + } + + // Selected state + &.k-table-row.k-selected td.k-grid-content-sticky, + &.k-table-row.k-selected.k-grid-row-sticky > .k-table-td, + &.k-table-row.k-selected .k-table-td.k-grid-row-sticky, + &.k-table-row td.k-grid-content-sticky.k-selected, + &.k-table-row .k-table-td.k-grid-content-sticky.k-selected { + @if($kendo-enable-color-system) { + @include fill( $bg: $kendo-grid-sticky-bg ); + + &::before { + @include fill( $bg: $kendo-grid-sticky-selected-bg ); + } + } @else { + @include fill( $bg: $kendo-grid-sticky-selected-bg ); + } + } + + &.k-selected.k-table-alt-row td.k-grid-content-sticky, + &.k-selected.k-table-alt-row.k-grid-row-sticky > .k-table-td, + &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky, + &.k-table-alt-row td.k-grid-content-sticky.k-selected, + &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected { + @if($kendo-enable-color-system) { + @include fill( $bg: $kendo-grid-sticky-alt-bg ); + + &::before { + @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + } + } @else { + @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); + } + } + + + // Hovered state + &:hover .k-grid-content-sticky, + &:hover .k-grid-row-sticky, + &:hover.k-grid-row-sticky > .k-table-td, + &.k-hover .k-grid-content-sticky, + &.k-hover .k-grid-row-sticky, + &.k-hover.k-grid-row-sticky > .k-table-td { + background-color: $kendo-grid-sticky-hover-bg; + } + + + // Selected hover + &.k-selected:hover td.k-grid-content-sticky, + &.k-selected:hover .k-table-td.k-grid-row-sticky, + &.k-selected:hover.k-grid-row-sticky > .k-table-td, + &.k-selected.k-hover td.k-grid-content-sticky, + &.k-selected.k-hover .k-table-td.k-grid-row-sticky, + &.k-selected.k-hover.k-grid-row-sticky > .k-table-td, + &:hover td.k-grid-content-sticky.k-selected, + &.k-hover td.k-grid-content-sticky.k-selected, + &:hover .k-table-td.k-grid-content-sticky.k-selected, + &.k-hover .k-table-td.k-grid-content-sticky.k-selected { + @if($kendo-enable-color-system) { + background-color: $kendo-grid-sticky-hover-bg; + + &::before { + background-color: $kendo-grid-sticky-selected-hover-bg; + } + } @else { + background-color: $kendo-grid-sticky-selected-hover-bg; + } + } + } + + .k-grouping-row { + .k-grid-content-sticky { + @include fill( $bg: $kendo-grid-sticky-header-bg ); + } + + &:hover .k-grid-content-sticky, + &.k-hover .k-grid-content-sticky { + @include fill( $bg: $kendo-grid-sticky-hover-bg ); + } + } + + .k-column-list-item:hover, + .k-columnmenu-item:hover { + @include fill( + $kendo-list-item-hover-text, + $kendo-list-item-hover-bg + ); + } + .k-column-list-item:focus, + .k-column-list-item.k-focus, + .k-columnmenu-item:focus, + .k-columnmenu-item.k-focus { + @include focus-indicator( $kendo-list-item-focus-shadow, true ); + } + + .k-columnmenu-item { + &.k-selected { + @include fill( + $kendo-list-item-selected-text, + $kendo-list-item-selected-bg + ); + } + } + + .k-column-menu { + + .k-menu:not(.k-context-menu) { + + @include fill( + $kendo-popup-text, + $kendo-popup-bg, + $kendo-popup-border + ); + + .k-item { + @include fill( + $kendo-list-item-text, + $kendo-list-item-bg + ); + + &:hover, + &.k-hover { + @include fill( + $kendo-list-item-hover-text, + $kendo-list-item-hover-bg + ); + } + + &.k-selected { + @include fill( + $kendo-list-item-selected-text, + $kendo-list-item-selected-bg + ); + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-list-item-focus-shadow, true ); + } + } + } + } + .k-column-menu-tabbed { + background-color: $kendo-grid-column-menu-tabbed-bg; + } + + .k-column-menu-group-header-text { + @include fill( + $kendo-grid-column-menu-group-header-text, + $kendo-grid-column-menu-group-header-bg, + $kendo-grid-column-menu-group-header-border + ); + } + + .k-check-all-wrap { + @include fill( $border: $kendo-popup-border ); + } + + .k-grid-norecords-template { + background-color: $kendo-grid-bg; + border-color: $kendo-grid-border; + } + + // Row resizing + .k-resizer-wrap { + + &.k-hover .k-row-resizer { + @include fill( $bg: $kendo-grid-row-resizer-hover-bg ); + } + + &.k-active .k-row-resizer { + @include fill( $bg: $kendo-grid-row-resizer-active-bg ); + } + + } + +} + + +@mixin kendo-grid--theme() { + @include kendo-grid--theme-base(); +} diff --git a/packages/core/scss/components/grid/_variables.scss b/packages/core/scss/components/grid/_variables.scss new file mode 100644 index 00000000000..c1105d15674 --- /dev/null +++ b/packages/core/scss/components/grid/_variables.scss @@ -0,0 +1,281 @@ +// Grid +$kendo-grid-border-width: null !default; +$kendo-grid-font-family: null !default; +$kendo-grid-font-size: null !default; +$kendo-grid-line-height: null !default; + +/// The horizontal padding of the Grid. +/// @group grid +$kendo-grid-padding-x: null !default; +/// The vertical padding of the Grid. +/// @group grid +$kendo-grid-padding-y: null !default; + +/// The horizontal padding of the Grid header. +/// @group grid +$kendo-grid-header-padding-x: null !default; +/// The vertical padding of the Grid header. +/// @group grid +$kendo-grid-header-padding-y: null !default; + +/// The horizontal padding of the Grid grouping header. +/// @group grid +$kendo-grid-grouping-header-padding-x: null !default; +/// The vertical padding of the Grid grouping header. +/// @group grid +$kendo-grid-grouping-header-padding-y: null !default; + +/// The horizontal padding of the Grid cell. +/// @group grid +$kendo-grid-cell-padding-x: null !default; +/// The vertical padding of the Grid cell. +/// @group grid +$kendo-grid-cell-padding-y: null !default; + +/// The horizontal padding of the Grid filter cell. +/// @group grid +$kendo-grid-filter-cell-padding-x: null !default; +/// The vertical padding of the Grid filter cell. +/// @group grid +$kendo-grid-filter-cell-padding-y: null !default; + +/// The horizontal padding of the Grid edit cell. +/// @group grid +$kendo-grid-edit-cell-padding-x: null !default; +/// The vertical padding of the Grid filter cell. +/// @group grid +$kendo-grid-edit-cell-padding-y: null !default; + +$kendo-grid-group-drop-hint-size: null !default; +$kendo-grid-group-drop-hint-line-size: null !default; +$kendo-grid-group-drop-hint-height: null !default; +$kendo-grid-group-drop-hint-top: null !default; + +$kendo-grid-sm-padding-x: null !default; +$kendo-grid-sm-padding-y: null !default; +$kendo-grid-sm-header-padding-x: null !default; +$kendo-grid-sm-header-padding-y: null !default; +$kendo-grid-sm-grouping-header-padding-x: null !default; +$kendo-grid-sm-grouping-header-padding-y: null !default; +$kendo-grid-sm-cell-padding-x: null !default; +$kendo-grid-sm-cell-padding-y: null !default; +$kendo-grid-sm-filter-cell-padding-x: null !default; +$kendo-grid-sm-filter-cell-padding-y: null !default; +$kendo-grid-sm-edit-cell-padding-x: null !default; +$kendo-grid-sm-edit-cell-padding-y: null !default; +$kendo-grid-sm-group-dropclue-height: null !default; +$kendo-grid-sm-selection-aggregates-padding-x: null !default; +$kendo-grid-sm-selection-aggregates-padding-y: null !default; + +$kendo-grid-md-padding-x: null !default; +$kendo-grid-md-padding-y: null !default; +$kendo-grid-md-header-padding-x: null !default; +$kendo-grid-md-header-padding-y: null !default; +$kendo-grid-md-grouping-header-padding-x: null !default; +$kendo-grid-md-grouping-header-padding-y: null !default; +$kendo-grid-md-cell-padding-x: null !default; +$kendo-grid-md-cell-padding-y: null !default; +$kendo-grid-md-filter-cell-padding-x: null !default; +$kendo-grid-md-filter-cell-padding-y: null !default; +$kendo-grid-md-edit-cell-padding-x: null !default; +$kendo-grid-md-edit-cell-padding-y: null !default; +$kendo-grid-md-group-dropclue-height: null !default; +$kendo-grid-md-selection-aggregates-padding-x: null !default; +$kendo-grid-md-selection-aggregates-padding-y: null !default; + + +// Kendo Grid sizes +$kendo-grid-sizes: null !default; + +$kendo-grid-header-font-size: null !default; +$kendo-grid-header-first-border: null !default; +$kendo-grid-header-menu-icon-spacing: null !default; + +$kendo-grid-filterable-icon-spacing: null !default; + +$kendo-grid-toolbar-border-width: null !default; + +$kendo-grid-cell-horizontal-border-width: null !default; +$kendo-grid-cell-vertical-border-width: null !default; + +/// The background color of the Grid. +/// @group grid +$kendo-grid-bg: null !default; +/// The text color of the Grid. +/// @group grid +$kendo-grid-text: null !default; +/// The border color of the Grid. +/// @group grid +$kendo-grid-border: null !default; + +/// The background color of Grid header. +/// @group grid +$kendo-grid-header-bg: null !default; +/// The text color of Grid header. +/// @group grid +$kendo-grid-header-text: null !default; +/// The border color of Grid header. +/// @group grid +$kendo-grid-header-border: null !default; +/// The background gradient of Grid header. +/// @group grid +$kendo-grid-header-gradient: null !default; + +/// The background color of Grid footer. +/// @group grid +$kendo-grid-footer-bg: null !default; +/// The text color of Grid footer. +/// @group grid +$kendo-grid-footer-text: null !default; +/// The border color of Grid footer. +/// @group grid +$kendo-grid-footer-border: null !default; + +/// The background color of the Grid alternating rows. +/// @group grid +$kendo-grid-alt-bg: null !default; +/// The text color of the Grid alternating rows. +/// @group grid +$kendo-grid-alt-text: null !default; +/// The border color of the Grid alternating rows. +/// @group grid +$kendo-grid-alt-border: null !default; + +/// The background color of hovered Grid rows. +/// @group grid +$kendo-grid-hover-bg: null !default; +/// The text color of hovered Grid rows. +/// @group grid +$kendo-grid-hover-text: null !default; +/// The border color of hovered Grid rows. +/// @group grid +$kendo-grid-hover-border: null !default; + +/// The background color of selected Grid rows. +/// @group grid +$kendo-grid-selected-bg: null !default; +/// The text color of selected Grid rows. +/// @group grid +$kendo-grid-selected-text: null !default; +/// The border color of selected Grid rows. +/// @group grid +$kendo-grid-selected-border: null !default; + +/// The background color of the Grid selection aggregates container. +/// @group grid +$kendo-grid-selection-aggregates-bg: null !default; +/// The text color of the Grid selection aggregates container. +/// @group grid +$kendo-grid-selection-aggregates-text: null !default; +/// The border color of the Grid selection aggregates container. +/// @group grid +$kendo-grid-selection-aggregates-border: null !default; +/// The border width of the Grid selection aggregates container. +/// @group grid +$kendo-grid-selection-aggregates-border-width: null !default; +/// The spacing between the selection aggregates items. +/// @group grid +$kendo-grid-selection-aggregates-spacing: null !default; +/// The line height of the Grid selection aggregates container. +/// @group grid +$kendo-grid-selection-aggregates-line-height: null !default; +/// The font weight of the Grid selection aggregates container. +/// @group grid +$kendo-grid-selection-aggregates-font-weight: null !default; + +$kendo-grid-grouping-row-bg: null !default; +$kendo-grid-grouping-row-text: null !default; + +$kendo-grid-sorted-icon-spacing: null !default; +$kendo-grid-sorted-bg: null !default; +$kendo-grid-sorting-indicator-text: null !default; +$kendo-grid-sorting-index-font-size: null !default; +$kendo-grid-sorting-index-height: null !default; +$kendo-grid-sorting-index-spacing-y: null !default; +$kendo-grid-sorting-index-spacing-x: null !default; + + +$kendo-grid-focus-shadow: null !default; + +$kendo-grid-command-cell-button-spacing: null !default; +// be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38 +$kendo-grid-command-cell-padding-y: null !default; + +// Must be a solid color +$kendo-grid-sticky-bg: null !default; +$kendo-grid-sticky-text: null !default; +$kendo-grid-sticky-border: null !default; + +// Must be a solid color +$kendo-grid-sticky-alt-bg: null !default; + +$kendo-grid-sticky-header-bg: null !default; +$kendo-grid-sticky-header-text: null !default; +$kendo-grid-sticky-header-border: null !default; + +$kendo-grid-sticky-footer-bg: null !default; +$kendo-grid-sticky-footer-hover-bg: null !default; + +$kendo-grid-sticky-selected-bg: null !default; +$kendo-grid-sticky-selected-alt-bg: null !default; + +// Must be a solid color +$kendo-grid-sticky-hover-bg: null !default; +$kendo-grid-sticky-selected-hover-bg: null !default; + +$kendo-grid-column-menu-width: null !default; +$kendo-grid-column-menu-max-width: null !default; + +$kendo-grid-filter-menu-check-all-border-bottom-width: null !default; + +$kendo-grid-filter-menu-item-spacing-x: null !default; +$kendo-grid-filter-menu-item-spacing-y: null !default; + +$kendo-grid-column-menu-popup-padding-x: null !default; +$kendo-grid-column-menu-popup-padding-y: null !default; + +$kendo-grid-column-menu-item-padding-x: null !default; +$kendo-grid-column-menu-item-padding-y: null !default; + +$kendo-grid-column-menu-list-item-padding-x: null !default; +$kendo-grid-column-menu-list-item-padding-y: null !default; + +$kendo-grid-column-menu-items-wrap-padding-x: null !default; +$kendo-grid-column-menu-items-wrap-padding-y: null !default; + +$kendo-grid-column-menu-group-header-padding-x: null !default; +$kendo-grid-column-menu-group-header-padding-y: null !default; + +$kendo-grid-column-menu-group-header-font-size: null !default; +$kendo-grid-column-menu-group-header-line-height: null !default; +$kendo-grid-column-menu-group-header-text-transform: null !default; +$kendo-grid-column-menu-group-header-border-bottom-width: null !default; + +$kendo-grid-column-menu-group-header-bg: null !default; +$kendo-grid-column-menu-group-header-text: null !default; +$kendo-grid-column-menu-group-header-border: null !default; + +$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: null !default; +$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: null !default; + +$kendo-grid-column-menu-tabbed-bg: null !default; + +$kendo-grid-drag-cell-width: null !default; + +$kendo-grid-row-inner-height: null !default; + +$kendo-grid-hierarchy-col-width: null !default; + +$kendo-grid-grouping-row-border-top: null !default; +$kendo-grid-group-footer-border-y: null !default; +$kendo-grid-group-footer-second-cell-border: null !default; + +/// The background color of the Grid row resize indicator. +/// @group grid +$kendo-grid-row-resizer-hover-bg: null !default; +/// The background color of the active Grid row resize indicator. +/// @group grid +$kendo-grid-row-resizer-active-bg: null !default; +/// The height of the Grid row resize indicator. +/// @group grid +$kendo-grid-row-resizer-height: null !default; diff --git a/packages/core/scss/components/gridlayout/_index.scss b/packages/core/scss/components/gridlayout/_index.scss new file mode 100644 index 00000000000..734069f9e56 --- /dev/null +++ b/packages/core/scss/components/gridlayout/_index.scss @@ -0,0 +1,19 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-grid-layout--styles() { + @include import-once( "grid-layout" ) { + @include core-styles(); + @include kendo-grid-layout--layout(); + @include kendo-grid-layout--theme(); + @include kendo-utils--flex-grid--align-items(); + @include kendo-utils--flex-grid--justify-items(); + } +} diff --git a/packages/core/scss/components/gridlayout/_layout.scss b/packages/core/scss/components/gridlayout/_layout.scss new file mode 100644 index 00000000000..72ebefe247d --- /dev/null +++ b/packages/core/scss/components/gridlayout/_layout.scss @@ -0,0 +1,10 @@ +@mixin kendo-grid-layout--layout-base() { + + // GridLayout + .k-grid-layout {} + +} + +@mixin kendo-grid-layout--layout() { + @include kendo-grid-layout--layout-base(); +} diff --git a/packages/core/scss/components/gridlayout/_theme.scss b/packages/core/scss/components/gridlayout/_theme.scss new file mode 100644 index 00000000000..877db4c8fd4 --- /dev/null +++ b/packages/core/scss/components/gridlayout/_theme.scss @@ -0,0 +1,10 @@ +@mixin kendo-grid-layout--theme-base() { + + // GridLayout + .k-grid-layout {} + +} + +@mixin kendo-grid-layout--theme() { + @include kendo-grid-layout--theme-base(); +} diff --git a/packages/core/scss/components/gridlayout/_variables.scss b/packages/core/scss/components/gridlayout/_variables.scss new file mode 100644 index 00000000000..8f1f6eecf4c --- /dev/null +++ b/packages/core/scss/components/gridlayout/_variables.scss @@ -0,0 +1 @@ +// GridLayout diff --git a/packages/core/scss/components/icons/_index.scss b/packages/core/scss/components/icons/_index.scss new file mode 100644 index 00000000000..7bbe6301acd --- /dev/null +++ b/packages/core/scss/components/icons/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-icon--styles() { + @include import-once( "icon" ) { + @include core-styles(); + @include kendo-icon--layout(); + @include kendo-icon--theme(); + @include kendo-utils--transform--rotate(); + @include kendo-utils--transform--flip(); + @include kendo-utils--typography--text-color(); + } +} diff --git a/packages/core/scss/components/icons/_layout.scss b/packages/core/scss/components/icons/_layout.scss new file mode 100644 index 00000000000..9e17c5268eb --- /dev/null +++ b/packages/core/scss/components/icons/_layout.scss @@ -0,0 +1,85 @@ +@use "./_variables.scss" as *; + +@use "@progress/kendo-svg-icons/scss/index.scss" as * with ( + $ki-icon-size: $kendo-icon-size +); + +@mixin kendo-icon--layout-base() { + + @include kendo-svg-icon-styles(); + + // Icon wrap + .k-icon-wrap { + flex: none; + display: inline-flex; + flex-flow: row nowrap; + gap: 0; + align-items: center; + align-self: flex-start; + vertical-align: middle; + position: relative; + + &::before { + content: "\200b"; + width: 0; + overflow: hidden; + flex: none; + display: inline-block; + vertical-align: top; + } + } + + // kendo-icon-wrapper component + .k-icon-wrapper-host { + display: contents; + } + + .k-icon-with-modifier { + position: relative; + margin: .25em; + } + + .k-icon.k-icon-modifier { + width: 1em; + height: 1em; + position: absolute; + font-size: .5em; + bottom: 0; + right: 0; + margin: 0 -.5em -.5em 0; + } + + .k-i-none::before { + content: ""; + display: none; + } + + .k-icon-action { + display: inline-flex; + padding: $kendo-icon-padding; + line-height: 1; + align-items: center; + vertical-align: middle; + cursor: pointer; + } + + .k-sprite { + display: inline-block; + width: 16px; + height: 16px; + overflow: hidden; + background-repeat: no-repeat; + font-size: 0; + line-height: 0; + text-align: center; + } + + .k-image { + display: inline-block; + } +} + + +@mixin kendo-icon--layout() { + @include kendo-icon--layout-base(); +} diff --git a/packages/core/scss/components/icons/_theme.scss b/packages/core/scss/components/icons/_theme.scss new file mode 100644 index 00000000000..d717fc555b2 --- /dev/null +++ b/packages/core/scss/components/icons/_theme.scss @@ -0,0 +1,6 @@ +@mixin kendo-icon--theme-base() {} + + +@mixin kendo-icon--theme() { + @include kendo-icon--theme-base(); +} diff --git a/packages/core/scss/components/icons/_variables.scss b/packages/core/scss/components/icons/_variables.scss new file mode 100644 index 00000000000..8a89c500eb6 --- /dev/null +++ b/packages/core/scss/components/icons/_variables.scss @@ -0,0 +1,30 @@ +/// The default size icon size. +/// @group icon +$kendo-icon-size: null !default; +/// The extra small icon size. +/// @group icon +$kendo-icon-size-xs: null !default; +/// The small icon size. +/// @group icon +$kendo-icon-size-sm: null !default; +/// The medium icon size. +/// @group icon +$kendo-icon-size-md: null !default; +/// The large icon size. +/// @group icon +$kendo-icon-size-lg: null !default; +/// The extra large icon size. +/// @group icon +$kendo-icon-size-xl: null !default; +/// The double extra large icon size. +/// @group icon +$kendo-icon-size-xxl: null !default; +/// The triple extra large icon size. +/// @group icon +$kendo-icon-size-xxxl: null !default; +/// The default icon spacing. +/// @group icon +$kendo-icon-spacing: null !default; +/// The default icon padding. +/// @group icon +$kendo-icon-padding: null !default; diff --git a/packages/core/scss/components/imageeditor/_index.scss b/packages/core/scss/components/imageeditor/_index.scss new file mode 100644 index 00000000000..ed72d773a4c --- /dev/null +++ b/packages/core/scss/components/imageeditor/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../forms/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../numerictextbox/_index.scss" as *; +@use "../checkbox/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-image-editor--styles() { + @include import-once( "image-editor" ) { + @include core-styles(); + @include kendo-toolbar--styles(); + @include kendo-form--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-numeric-textbox--styles(); + @include kendo-checkbox--styles(); + @include kendo-image-editor--layout(); + @include kendo-image-editor--theme(); + } +} diff --git a/packages/core/scss/components/imageeditor/_layout.scss b/packages/core/scss/components/imageeditor/_layout.scss new file mode 100644 index 00000000000..ddb5bab14f7 --- /dev/null +++ b/packages/core/scss/components/imageeditor/_layout.scss @@ -0,0 +1,165 @@ +@use "sass:math"; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; +@use "../toolbar/_variables.scss" as *; + +@mixin kendo-image-editor--layout-base() { + + // Image Editor + .k-imageeditor { + margin-block: $kendo-image-editor-margin-y; + margin-inline: $kendo-image-editor-margin-x; + padding-block: $kendo-image-editor-padding-y; + padding-inline: $kendo-image-editor-padding-x; + border-width: $kendo-image-editor-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-image-editor-font-family; + font-size: $kendo-image-editor-font-size; + line-height: $kendo-image-editor-line-height; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Image editor toolbar + .k-imageeditor-toolbar { + border-width: 0; + border-bottom-width: $kendo-toolbar-border-width; + } + + + // Content + .k-imageeditor-content { + border-width: 0; + border-style: solid; + border-color: inherit; + display: flex; + flex-flow: row nowrap; + } + + + // Canvas + .k-imageeditor-canvas-container { + flex: 1 1 100%; + display: flex; + flex-flow: row nowrap; + overflow: auto; + } + .k-imageeditor-canvas { + margin: auto; + display: flex; + flex-direction: column; + position: relative; + } + + + // Action Pane + .k-imageeditor-action-pane { + padding-block: $kendo-image-editor-action-pane-padding-y; + padding-inline: $kendo-image-editor-action-pane-padding-x; + width: $kendo-image-editor-action-pane-width; + border-width: 0; + border-left-width: $kendo-image-editor-content-border-width; + border-style: solid; + border-color: inherit; + box-sizing: border-box; + flex: none; + overflow-y: auto; + + .k-input-inner, + .k-input-value-text { + text-overflow: clip; + } + } + + + // Crop Tool + .k-imageeditor-crop-overlay { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + + .k-imageeditor-crop { + width: 100%; + height: 100%; + border-width: $kendo-image-editor-crop-border-width; + border-style: $kendo-image-editor-crop-border-style; + box-sizing: border-box; + position: absolute; + + .k-resize-handle { + margin-block: $kendo-image-editor-resize-handle-margin-y; + margin-inline: $kendo-image-editor-resize-handle-margin-x; + border-style: solid; + border-width: $kendo-image-editor-resize-handle-border-width; + } + + .k-resize-sw, + .k-resize-se, + .k-resize-nw, + .k-resize-ne { + width: $kendo-image-editor-resize-handle-size; + height: $kendo-image-editor-resize-handle-size; + } + + .k-resize-n, + .k-resize-s { + left: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) ); + width: $kendo-image-editor-resize-handle-size; + height: 0; + } + + .k-resize-w, + .k-resize-e { + top: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) ); + width: 0; + height: $kendo-image-editor-resize-handle-size; + } + + .k-resize-ne { + transform: rotate(-90deg); + } + + .k-resize-nw { + transform: rotate(-180deg); + } + + + .k-resize-sw { + transform: rotate(90deg); + } + + .k-resize-n { + top: 0; + } + + .k-resize-s { + bottom: 0; + } + + .k-resize-w { + left: 0; + } + + .k-resize-e { + right: 0; + } + } + +} + + +@mixin kendo-image-editor--layout() { + @include kendo-image-editor--layout-base(); +} diff --git a/packages/core/scss/components/imageeditor/_theme.scss b/packages/core/scss/components/imageeditor/_theme.scss new file mode 100644 index 00000000000..9237ee5e611 --- /dev/null +++ b/packages/core/scss/components/imageeditor/_theme.scss @@ -0,0 +1,59 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-image-editor--theme-base() { + + // Image Editor + .k-imageeditor { + @include fill( + $kendo-image-editor-text, + $kendo-image-editor-bg, + $kendo-image-editor-border + ); + } + + // Content + .k-imageeditor-content { + @include fill( + $kendo-image-editor-content-text, + $kendo-image-editor-content-bg, + $kendo-image-editor-content-border + ); + } + + // Canvas + .k-imageeditor-canvas { + @include checkerboard-gradient(); + } + + // Action Pane + .k-imageeditor-action-pane { + @include fill( + $kendo-image-editor-action-pane-text, + $kendo-image-editor-action-pane-bg, + $kendo-image-editor-action-pane-border + ); + } + + // Crop Tool + .k-imageeditor-crop { + @include fill( + $kendo-image-editor-crop-text, + $kendo-image-editor-crop-bg, + $kendo-image-editor-crop-border + ); + } + + // Crop Overlay + .k-imageeditor-crop-overlay { + @include fill ( + $bg: $kendo-image-editor-crop-overlay-bg + ); + } + +} + + +@mixin kendo-image-editor--theme() { + @include kendo-image-editor--theme-base(); +} diff --git a/packages/core/scss/components/imageeditor/_variables.scss b/packages/core/scss/components/imageeditor/_variables.scss new file mode 100644 index 00000000000..4266b9e6c73 --- /dev/null +++ b/packages/core/scss/components/imageeditor/_variables.scss @@ -0,0 +1,42 @@ +// ImageEditor +$kendo-image-editor-margin-y: null !default; +$kendo-image-editor-margin-x: null !default; +$kendo-image-editor-padding-y: null !default; +$kendo-image-editor-padding-x: null !default; + +$kendo-image-editor-border-width: null !default; +$kendo-image-editor-font-size: null !default; +$kendo-image-editor-line-height: null !default; +$kendo-image-editor-font-family: null !default; + +$kendo-image-editor-content-border-width: null !default; + +$kendo-image-editor-action-pane-padding-y: null !default; +$kendo-image-editor-action-pane-padding-x: null !default; +$kendo-image-editor-action-pane-width: null !default; + +$kendo-image-editor-crop-border-width: null !default; +$kendo-image-editor-crop-border-style: null !default; + +$kendo-image-editor-resize-handle-margin-x: null !default; +$kendo-image-editor-resize-handle-margin-y: null !default; +$kendo-image-editor-resize-handle-border-width: null !default; +$kendo-image-editor-resize-handle-size: null !default; + +$kendo-image-editor-bg: null !default; +$kendo-image-editor-text: null !default; +$kendo-image-editor-border: null !default; + +$kendo-image-editor-content-bg: null !default; +$kendo-image-editor-content-text: null !default; +$kendo-image-editor-content-border: null !default; + +$kendo-image-editor-action-pane-bg: null !default; +$kendo-image-editor-action-pane-text: null !default; +$kendo-image-editor-action-pane-border: null !default; + +$kendo-image-editor-crop-bg: null !default; +$kendo-image-editor-crop-text: null !default; +$kendo-image-editor-crop-border: null !default; + +$kendo-image-editor-crop-overlay-bg: null !default; diff --git a/packages/core/scss/components/input/_index.scss b/packages/core/scss/components/input/_index.scss new file mode 100644 index 00000000000..cb0bfaa33b5 --- /dev/null +++ b/packages/core/scss/components/input/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../button/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-input--styles() { + @include import-once( "input" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-input--layout(); + @include kendo-input--theme(); + } +} diff --git a/packages/core/scss/components/input/_layout.scss b/packages/core/scss/components/input/_layout.scss new file mode 100644 index 00000000000..e3381dbdf5c --- /dev/null +++ b/packages/core/scss/components/input/_layout.scss @@ -0,0 +1,594 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../_variables.scss" as *; +@use "./_variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-input--layout-base() { + + // Generic input + .k-input, + .k-picker { + @include border-radius( $kendo-input-border-radius ); + margin: 0; + padding: 0; + width: $kendo-input-default-width; + min-width: 0; + box-sizing: border-box; + border-width: $kendo-input-border-width; + border-style: solid; + outline: 0; + font-family: $kendo-input-font-family; + font-size: $kendo-input-font-size; + line-height: $kendo-input-line-height; + font-weight: normal; + text-align: start; + box-shadow: none; + display: inline-flex; + flex-flow: row nowrap; + align-items: stretch; + vertical-align: middle; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + -webkit-appearance: none; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + > .k-input, + > .k-picker { + border-width: 0 !important; // stylelint-disable-line declaration-no-important + color: inherit; + background: none; + font: inherit; + outline: 0; + box-shadow: none; + } + + // fix for Safari + & > * { + margin: 0; + } + + &::placeholder { + color: $kendo-input-placeholder-text; + opacity: $kendo-input-placeholder-opacity; + user-select: none; + } + } + + // Input and Textarea + .k-input {} + input.k-input, + textarea.k-textarea { + padding-block: $kendo-input-padding-y; + padding-inline: $kendo-input-padding-x; + + &:disabled, + &[disabled] { + @include disabled( $kendo-disabled-styling... ); + } + } + + :is([disabled], .k-disabled) :is(input.k-input, textarea.k-textarea):is(:disabled, [disabled]) { + opacity: 1; + filter: grayscale(0); + } + + textarea.k-textarea { + overflow: auto; + } + + + // Picker + .k-picker { + cursor: pointer; + } + select.k-picker { + padding-block: $kendo-input-padding-y; + padding-inline: $kendo-input-padding-x; + appearance: auto; + align-items: center; + + &:disabled, + &[disabled] { + @include disabled( $kendo-disabled-styling... ); + } + } + + :is([disabled], .k-disabled) select.k-picker:is(:disabled, [disabled]) { + opacity: 1; + filter: grayscale(0); + } + + + // Input inner + .k-input-inner { + padding-block: $kendo-input-padding-y; + padding-inline: $kendo-input-padding-x; + width: 100%; + border: 0; + outline: 0; + color: inherit; + background: none; + font: inherit; + flex: 1; + position: relative; + z-index: 1; + overflow: hidden; + text-overflow: ellipsis; + -webkit-appearance: none; + + // Placeholder text + &::placeholder { + color: $kendo-input-placeholder-text; + opacity: $kendo-input-placeholder-opacity; + user-select: none; + } + + // Invalid + &:invalid { + box-shadow: none; + } + } + span.k-input-inner { + white-space: nowrap; + display: flex; + flex-flow: row nowrap; + align-items: center; + } + textarea.k-input-inner { + margin: 0; + } + + + // Input value + .k-input-value-icon { + flex: none; + } + .k-input-value-text { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + } + .k-input-value-text::before { + content: "\200b"; + width: 0px; + overflow: hidden; + flex: none; + display: inline-block; + vertical-align: top; + } + + + // Input multiple values + .k-input-values { + min-width: 0px; + width: 100%; + display: flex; + flex-flow: row wrap; + align-items: center; + cursor: text; + } + .k-input-values .k-chip-list { + display: contents; + } + + + // Icon picker + .k-icon-picker { + .k-input-inner { + padding: $kendo-input-padding-y; + // TODO we need better way + // width: $kendo-input-inner-calc-height; + // height: $kendo-input-inner-calc-height; + justify-content: center; + } + } + + + // Input prefix and suffix + .k-input-prefix, + .k-input-suffix { + border-color: inherit; + display: flex; + align-items: center; + flex: none; + + > * { + flex-shrink: 0; + border: none; + } + + &-vertical { + flex-flow: column wrap; + } + + &-horizontal { + flex-flow: row wrap; + } + } + + + // Input separator + .k-input-separator { + margin: 0; + border-style: solid; + border-color: inherit; + border-width: 0 0 0 1px; + height: $kendo-icon-size; + align-self: center; + + &-horizontal { + height: auto; + margin-inline: $kendo-input-md-padding-y; + align-self: stretch; + border-width: 1px 0 0; + } + + &-vertical { + height: auto; + margin-block: $kendo-input-md-padding-y; + align-self: stretch; + border-width: 0 0 0 1px; + } + } + + // Input group + .k-input-group { + margin: 0; + padding: 0; + border-width: 0; + box-sizing: border-box; + list-style: none; + outline: 0; + display: inline-flex; + flex-flow: row nowrap; + vertical-align: middle; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + > .k-input + .k-input { + margin-inline-start: if( $kendo-input-border-width == 0, null, -$kendo-input-border-width ); + } + + > .k-input:hover, + > .k-input.k-hover, + > .k-input:focus, + > .k-input:focus-within, + > .k-input.k-focus, + > .k-input:active, + > .k-input.k-active, + > .k-input.k-selected { + z-index: 2; + } + + .k-input:not(:first-child):not(:last-child) { + border-start-end-radius: 0; + border-end-end-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; + } + > .k-input:first-child:not(:only-child) { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + > .k-input:last-child:not(:only-child) { + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + &:disabled, + &[disabled], + &.k-disabled { + opacity: 1; + filter: none; + } + } + + // Input with icon styles + .k-input-icon, + .k-input-validation-icon, + .k-input-loading-icon { + flex: none; + align-self: center; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + box-sizing: content-box; + } + + .k-input-loading-icon { + width: 1em; + height: 1em; + font-size: $kendo-icon-size; + } + + // Input with SVG icon + .k-input-icon, + .k-input-validation-icon, + .k-input-loading-icon { + &.k-svg-icon > svg, + &.k-icon-md > svg { + width: $kendo-icon-size-md; + height: $kendo-icon-size-md; + } + + &.k-icon-xs > svg { + width: $kendo-icon-size-xs; + height: $kendo-icon-size-xs; + } + + &.k-icon-sm > svg { + width: $kendo-icon-size-sm; + height: $kendo-icon-size-sm; + } + + &.k-icon-lg > svg { + width: $kendo-icon-size-lg; + height: $kendo-icon-size-lg; + } + + &.k-icon-xl > svg { + width: $kendo-icon-size-xl; + height: $kendo-icon-size-xl; + } + + &.k-icon-xxl > svg { + width: $kendo-icon-size-xxl; + height: $kendo-icon-size-xxl; + } + + &.k-icon-xxxl > svg { + width: $kendo-icon-size-xxxl; + height: $kendo-icon-size-xxxl; + } + } + + + // Clear value + .k-clear-value { + outline: 0; + color: $kendo-input-clear-value-text; + flex: none; + align-self: center; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: $kendo-input-clear-value-opacity; + } + .k-clear-value:hover, + .k-clear-value.k-hover { + color: $kendo-input-clear-value-hover-text; + opacity: $kendo-input-clear-value-hover-opacity; + } + .k-clear-value:focus-visible { + outline: 1px dotted; + outline-offset: -1px; + } + + + // Input button + .k-input-button { + width: if( $kendo-use-input-button-width, $kendo-input-button-width, auto ); + border-width: 0; + border-inline-start-width: $kendo-input-button-border-width; + flex: none; + aspect-ratio: auto; + box-shadow: none; + + > .k-button-icon { + min-width: auto !important; // stylelint-disable-line declaration-no-important + // min-height: auto !important; // stylelint-disable-line declaration-no-important + } + + &:focus { + box-shadow: none; + } + } + .k-picker .k-input-button { + color: inherit; + background: none; + border-color: transparent; + } + + + // Input spinner + .k-input-spinner { + width: if( $kendo-use-input-spinner-width, $kendo-input-spinner-width, auto ); + flex: none; + display: flex; + flex-flow: column nowrap; + + .k-spinner-increase, + .k-spinner-decrease { + border-width: 0; + border-inline-start-width: $kendo-input-button-border-width; + flex: 1 1 50%; + box-shadow: none; + position: relative; + aspect-ratio: auto; + + .k-button-icon { + margin-block: -1em; + margin-inline: 0; + min-width: auto !important; // stylelint-disable-line declaration-no-important + min-height: auto !important; // stylelint-disable-line declaration-no-important + } + } + .k-spinner-increase .k-icon { + bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto ); + } + .k-spinner-decrease .k-icon { + top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto ); + } + } + + + // Searchbar + .k-searchbar { + flex: 1 1 auto; + display: flex; + flex-flow: row nowrap; + } + + + // Legacy wrappers + .k-picker-wrap, + .k-dropdown-wrap, + .k-dateinput-wrap, + .k-multiselect-wrap, + .k-numeric-wrap { + width: 100%; + border-width: 0; + border-color: inherit; + box-sizing: border-box; + flex: 1 1 auto; + display: flex; + flex-flow: row nowrap; + overflow: hidden; + position: relative; + } + + + // Fill mode + .k-input-flat, + .k-picker-flat { + @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important + border-width: $kendo-input-border-width 0; + border-top-color: transparent !important; // stylelint-disable-line declaration-no-important + background-image: none !important; // stylelint-disable-line declaration-no-important + } + + .k-input-outline { + background: none !important; // stylelint-disable-line declaration-no-important + } + + + // Sizing + @each $size, $size-props in $kendo-input-sizes { + $_padding-x: map.get( $size-props, padding-x ); + $_padding-y: map.get( $size-props, padding-y ); + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_button-padding-x: map.get( $size-props, button-padding-x ); + $_button-padding-y: map.get( $size-props, button-padding-y ); + + .k-input-#{$size}, + .k-picker-#{$size} { + font-size: $_font-size; + line-height: $_line-height; + + .k-input-values { + padding: calc( #{$_padding-y} /2 ); + gap: calc( #{$_padding-y} / 2 ); + } + .k-input-values > .k-searchbar, + .k-input-values > .k-input-inner { + margin: calc( calc( #{$_padding-y} / 2 ) * -1 ); + } + + .k-input-inner { + padding-block: $_padding-y; + padding-inline: $_padding-x; + } + + .k-input-button, + .k-spinner-increase, + .k-spinner-decrease { + padding-block: $_button-padding-y; + padding-inline: $_button-padding-x; + } + + .k-input-icon, + .k-input-validation-icon, + .k-input-loading-icon, + .k-clear-value, + .k-input-prefix > .k-icon, + .k-input-prefix > .k-input-prefix-text, + .k-input-suffix > .k-icon, + .k-input-suffix > .k-input-suffix-text { + padding-block: $_padding-y; + padding-inline: $_padding-y; + box-sizing: content-box; + } + + .k-input-separator { + &-horizontal { + margin-inline: $_padding-y; + } + + &-vertical { + margin-block: $_padding-y; + } + } + + &.k-icon-picker .k-input-inner { + width: calc( ( #{ $_line-height} * 1em ) ); + height: calc( ( #{ $_line-height} * 1em ) ); + padding: $_padding-y; + box-sizing: content-box; + } + } + .k-dropdown-operator.k-picker-#{$size} { + .k-input-button { + padding: $_padding-y; + } + } + select.k-picker-#{$size} { + padding-block: $_padding-y; + padding-inline: $_padding-x; + } + } + + + // Angular specific + .k-input > kendo-popup, + .k-picker > kendo-popup { + position: fixed; + } + + + + + // This is needed for the textbox container to capture browser autofill + @keyframes autoFillStart { // stylelint-disable-line + from {} + to {} + } + @keyframes autoFillEnd { // stylelint-disable-line + from {} + to {} + } + + // Generic class for autofill animations + .k-autofill:-webkit-autofill { + animation-name: autoFillStart; + } + .k-autofill:not(:-webkit-autofill) { + animation-name: autoFillEnd; + } + + + .k-input:-webkit-autofill { + animation-name: autoFillStart; + } + .k-input:not(:-webkit-autofill) { + animation-name: autoFillEnd; + } + +} + + +@mixin kendo-input--layout() { + @include kendo-input--layout-base(); +} diff --git a/packages/core/scss/components/input/_theme.scss b/packages/core/scss/components/input/_theme.scss new file mode 100644 index 00000000000..7dbedcd51b5 --- /dev/null +++ b/packages/core/scss/components/input/_theme.scss @@ -0,0 +1,518 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-input--theme-base() { + + // Solid input + .k-input-solid { + @include fill( + $kendo-input-text, + $kendo-input-bg, + $kendo-input-border + ); + @include box-shadow( $kendo-input-shadow ); + + // Hover + &:hover, + &.k-hover { + @include fill( + $kendo-input-hover-text, + $kendo-input-hover-bg, + $kendo-input-hover-border + ); + @include box-shadow( $kendo-input-hover-shadow ); + } + + // Focus + &:focus, + &.k-focus { + @include fill ( + $kendo-input-focus-text, + $kendo-input-focus-bg, + $kendo-input-focus-border + ); + @include focus-indicator( $kendo-input-focus-shadow ); + } + &:focus-within { + @include fill ( + $kendo-input-focus-text, + $kendo-input-focus-bg, + $kendo-input-focus-border + ); + @include focus-indicator( $kendo-input-focus-shadow ); + } + + // Disabled + &:disabled, + &[disabled], + &.k-disabled { + @include fill( + $kendo-input-disabled-text, + $kendo-input-disabled-bg, + $kendo-input-disabled-border, + $kendo-input-disabled-gradient + ); + @include box-shadow( $kendo-input-disabled-shadow ); + } + + // Invalid + &.k-invalid, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + @include fill( $border: $kendo-input-invalid-border ); + + .k-input-validation-icon { + color: $kendo-invalid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + } + + // Prefix & Suffix + .k-input-prefix { + color: $kendo-input-prefix-text; + } + + .k-input-suffix { + color: $kendo-input-suffix-text; + } + + .k-input-separator { + border-color: $kendo-input-separator-text; + } + } + + + // Solid picker + .k-picker-solid { + @include fill( + $kendo-picker-text, + $kendo-picker-bg, + $kendo-picker-border, + $kendo-picker-gradient + ); + + // Hover + &:hover, + &.k-hover { + @include fill( + $kendo-picker-hover-text, + $kendo-picker-hover-bg, + $kendo-picker-hover-border, + $kendo-picker-hover-gradient + ); + @include box-shadow( $kendo-picker-hover-shadow ); + } + + // Focus + &:focus, + &.k-focus { + @include fill ( + $kendo-picker-focus-text, + $kendo-picker-focus-bg, + $kendo-picker-focus-border, + $kendo-picker-focus-gradient + ); + @include focus-indicator( $kendo-picker-focus-shadow ); + } + &:focus-within { + @include fill ( + $kendo-picker-focus-text, + $kendo-picker-focus-bg, + $kendo-picker-focus-border, + $kendo-picker-focus-gradient + ); + @include focus-indicator( $kendo-picker-focus-shadow ); + } + + // Disabled + &:disabled, + &[disabled], + &.k-disabled { + @include fill( + $kendo-picker-disabled-text, + $kendo-picker-disabled-bg, + $kendo-picker-disabled-border, + $kendo-picker-disabled-gradient + ); + @include box-shadow( $kendo-picker-disabled-shadow ); + } + + // Invalid + &.k-invalid, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + @include fill( $border: $kendo-input-invalid-border ); + + .k-input-validation-icon { + color: $kendo-invalid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + } + } + + + // Outline input + .k-input-outline { + @include fill ( + $kendo-input-outline-text, + $kendo-input-outline-bg, + $kendo-input-outline-border + ); + + & > .k-input-button { + border-color: inherit; + } + + & > .k-input-spinner { + border-color: inherit; + + & > .k-spinner-increase, + & > .k-spinner-decrease { + border-color: inherit; + } + } + + // Hover + &:hover, + &.k-hover { + @include fill ( + $kendo-input-outline-hover-text, + $kendo-input-outline-hover-bg, + $kendo-input-outline-hover-border + ); + } + + // Focus + &:focus, + &.k-focus { + @include fill ( + $kendo-input-outline-focus-text, + $kendo-input-outline-focus-bg, + $kendo-input-outline-focus-border + ); + @include focus-indicator( $kendo-input-outline-focus-shadow ); + } + &:focus-within { + @include fill ( + $kendo-input-outline-focus-text, + $kendo-input-outline-focus-bg, + $kendo-input-outline-focus-border + ); + @include focus-indicator( $kendo-input-outline-focus-shadow ); + } + + // Disabled + &:disabled, + &[disabled], + &.k-disabled { + @include fill( + $kendo-input-disabled-text, + $kendo-input-disabled-bg, + $kendo-input-disabled-border, + $kendo-input-disabled-gradient + ); + @include box-shadow( $kendo-input-disabled-shadow ); + } + + // Invalid + &.k-invalid, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + @include fill( $border: $kendo-input-invalid-border ); + + .k-input-validation-icon { + color: $kendo-invalid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + } + + // Prefix & Suffix + .k-input-prefix { + color: $kendo-input-prefix-text; + } + + .k-input-suffix { + color: $kendo-input-suffix-text; + } + + .k-input-separator { + border-color: $kendo-input-separator-text; + } + } + + + // Outline picker + .k-picker-outline { + @include fill ( + $kendo-picker-outline-text, + $kendo-picker-outline-bg, + $kendo-picker-outline-border + ); + + // Hover + &:hover, + &.k-hover { + @include fill ( + $kendo-picker-outline-hover-text, + $kendo-picker-outline-hover-bg, + $kendo-picker-outline-hover-border + ); + } + + // Focus + &:focus, + &.k-focus { + @include fill ( + $kendo-picker-outline-focus-text, + $kendo-picker-outline-focus-bg, + $kendo-picker-outline-focus-border + ); + @include focus-indicator( $kendo-picker-outline-focus-shadow ); + } + &:focus-within { + @include fill ( + $kendo-picker-outline-focus-text, + $kendo-picker-outline-focus-bg, + $kendo-picker-outline-focus-border + ); + @include focus-indicator( $kendo-picker-outline-focus-shadow ); + } + + &:focus:hover, + &:focus.k-hover, + &.k-focus:hover, + &.k-focus.k-hover { + @include fill ( + $kendo-picker-outline-hover-focus-text, + $kendo-picker-outline-hover-focus-bg, + $kendo-picker-outline-hover-focus-border + ); + } + + // Disabled + &:disabled, + &[disabled], + &.k-disabled { + @include fill( + $kendo-picker-disabled-text, + $kendo-picker-disabled-bg, + $kendo-picker-disabled-border, + $kendo-picker-disabled-gradient + ); + @include box-shadow( $kendo-picker-disabled-shadow ); + } + + // Invalid + &.k-invalid, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + @include fill( $border: $kendo-input-invalid-border ); + + .k-input-validation-icon { + color: $kendo-invalid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + } + } + + + // Flat input + .k-input-flat { + @include fill ( + $kendo-input-flat-text, + $kendo-input-flat-bg, + $kendo-input-flat-border + ); + + // Hover + &:hover, + &.k-hover { + @include fill ( + $kendo-input-flat-hover-text, + $kendo-input-flat-hover-bg, + $kendo-input-flat-hover-border + ); + } + + // Focus + &:focus, + &.k-focus { + @include fill ( + $kendo-input-flat-focus-text, + $kendo-input-flat-focus-bg, + $kendo-input-flat-focus-border + ); + @include focus-indicator( $kendo-input-flat-focus-shadow ); + } + &:focus-within { + @include fill ( + $kendo-input-flat-focus-text, + $kendo-input-flat-focus-bg, + $kendo-input-flat-focus-border + ); + @include focus-indicator( $kendo-input-flat-focus-shadow ); + } + + // Disabled + &:disabled, + &[disabled], + &.k-disabled { + @include fill( + $kendo-input-disabled-text, + $kendo-input-disabled-bg, + $kendo-input-disabled-border, + $kendo-input-disabled-gradient + ); + @include box-shadow( $kendo-input-disabled-shadow ); + } + + // Invalid + &.k-invalid, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + @include fill( $border: $kendo-input-invalid-border ); + + .k-input-validation-icon { + color: $kendo-invalid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + } + + // Prefix & Suffix + .k-input-prefix { + color: $kendo-input-prefix-text; + } + + .k-input-suffix { + color: $kendo-input-suffix-text; + } + + .k-input-separator { + border-color: $kendo-input-separator-text; + } + } + + + // Flat picker + .k-picker-flat { + @include fill ( + $kendo-picker-flat-text, + $kendo-picker-flat-bg, + $kendo-picker-flat-border + ); + + // Hover + &:hover, + &.k-hover { + @include fill ( + $kendo-picker-flat-hover-text, + $kendo-picker-flat-hover-bg, + $kendo-picker-flat-hover-border + ); + } + + // Focus + &:focus, + &.k-focus { + @include fill ( + $kendo-picker-flat-focus-text, + $kendo-picker-flat-focus-bg, + $kendo-picker-flat-focus-border + ); + @include focus-indicator( $kendo-picker-flat-focus-shadow ); + } + &:focus-within { + @include fill ( + $kendo-picker-flat-focus-text, + $kendo-picker-flat-focus-bg, + $kendo-picker-flat-focus-border + ); + @include focus-indicator( $kendo-picker-flat-focus-shadow ); + } + + &:focus:hover, + &:focus.k-hover, + &.k-focus:hover, + &.k-focus.k-hover { + @include fill ( + $kendo-picker-flat-hover-focus-text, + $kendo-picker-flat-hover-focus-bg, + $kendo-picker-flat-hover-focus-border + ); + } + + // Disabled + &:disabled, + &[disabled], + &.k-disabled { + @include fill( + $kendo-picker-disabled-text, + $kendo-picker-disabled-bg, + $kendo-picker-disabled-border, + $kendo-picker-disabled-gradient + ); + @include box-shadow( $kendo-picker-disabled-shadow ); + } + + // Invalid + &.k-invalid, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + @include fill( $border: $kendo-input-invalid-border ); + + .k-input-validation-icon { + color: $kendo-invalid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-invalid-shadow ); + } + } + } + +} + + +@mixin kendo-input--theme() { + @include kendo-input--theme-base(); +} diff --git a/packages/core/scss/components/input/_variables.scss b/packages/core/scss/components/input/_variables.scss new file mode 100644 index 00000000000..972d2bc6ab7 --- /dev/null +++ b/packages/core/scss/components/input/_variables.scss @@ -0,0 +1,426 @@ +// Input + +/// The default width of the Input components. +/// @group input +$kendo-input-default-width: null !default; + +/// The border width of the Input components. +/// @group input +$kendo-input-border-width: null !default; +$kendo-input-border-height: null !default; +/// The border radius of the Input components. +/// @group input +$kendo-input-border-radius: null !default; + +/// The horizontal padding of the Input components. +/// @group input +$kendo-input-padding-x: null !default; +/// The horizontal padding of the small Input components. +/// @group input +$kendo-input-sm-padding-x: null !default; +/// The horizontal padding of the medium Input components. +/// @group input +$kendo-input-md-padding-x: null !default; +/// The horizontal padding of the large Input components. +/// @group input +$kendo-input-lg-padding-x: null !default; + +/// The vertical padding of the Input components. +/// @group input +$kendo-input-padding-y: null !default; +/// The vertical padding of the small Input components. +/// @group input +$kendo-input-sm-padding-y: null !default; +/// The vertical padding of the medium Input components. +/// @group input +$kendo-input-md-padding-y: null !default; +/// The vertical padding of the large Input components. +/// @group input +$kendo-input-lg-padding-y: null !default; + +/// The font family of the Input components. +/// @group input +$kendo-input-font-family: null !default; + +/// The font size of the Input components. +/// @group input +$kendo-input-font-size: null !default; +/// The font size of the small Input components. +/// @group input +$kendo-input-sm-font-size: null !default; +/// The font size of the medium Input components. +/// @group input +$kendo-input-md-font-size: null !default; +/// The font size of the large Input components. +/// @group input +$kendo-input-lg-font-size: null !default; + +/// The line height of the Input components. +/// @group input +$kendo-input-line-height: null !default; +/// The line height of the small Input components. +/// @group input +$kendo-input-sm-line-height: null !default; +/// The line height of the medium Input components. +/// @group input +$kendo-input-md-line-height: null !default; +/// The line height of the large Input components. +/// @group input +$kendo-input-lg-line-height: null !default; + +/// The calculated height of the Input. +/// @group input +$kendo-input-calc-size: null !default; +$kendo-input-sm-calc-size: null !default; +$kendo-input-md-calc-size: null !default; +$kendo-input-lg-calc-size: null !default; + +/// The sizes map for the Input components. +/// @group input +$kendo-input-sizes: null !default; + +/// The background color of the Input components. +/// @group input +$kendo-input-bg: null !default; +/// The text color of the Input components. +/// @group input +$kendo-input-text: null !default; +/// The border color of the Input components. +/// @group input +$kendo-input-border: null !default; +/// The shadow of the Input components. +/// @group input +$kendo-input-shadow: null !default; + +/// The background color of the hovered Input components. +/// @group input +$kendo-input-hover-bg: null !default; +/// The text color of the hovered Input components. +/// @group input +$kendo-input-hover-text: null !default; +/// The border color of the hovered Input components. +/// @group input +$kendo-input-hover-border: null !default; +/// The shadow of the hovered Input components. +/// @group input +$kendo-input-hover-shadow: null !default; + +/// The background color of the focused Input components. +/// @group input +$kendo-input-focus-bg: null !default; +/// The text color of the focused Input components. +/// @group input +$kendo-input-focus-text: null !default; +/// The border color of the focused Input components. +/// @group input +$kendo-input-focus-border: null !default; +/// The shadow of the focused Input components. +/// @group input +$kendo-input-focus-shadow: null !default; + +/// The background color of the selected Input components. +/// @group input +$kendo-input-selected-bg: null !default; +/// The text color of the selected Input components. +/// @group input +$kendo-input-selected-text: null !default; + +/// The background color of the disabled Input components. +/// @group input +$kendo-input-disabled-bg: null !default; +/// The text color of the disabled Input components. +/// @group input +$kendo-input-disabled-text: null !default; +/// The border color of the disabled Input components. +/// @group input +$kendo-input-disabled-border: null !default; +/// The gradient of the disabled Input components. +/// @group input +$kendo-input-disabled-gradient: null !default; +/// The shadow of the disabled Input components. +/// @group input +$kendo-input-disabled-shadow: null !default; + +/// The background color of the outline Input components. +/// @group input +$kendo-input-outline-bg: null !default; +/// The text color of the outline Input components. +/// @group input +$kendo-input-outline-text: null !default; +/// The border color of the outline Input components. +/// @group input +$kendo-input-outline-border: null !default; + +/// The background color of the outline hovered Input components. +/// @group input +$kendo-input-outline-hover-bg: null !default; +/// The text color of the outline hovered Input components. +/// @group input +$kendo-input-outline-hover-text: null !default; +/// The border color of the outline hovered Input components. +/// @group input +$kendo-input-outline-hover-border: null !default; + +/// The background color of the outline focused Input components. +/// @group input +$kendo-input-outline-focus-bg: null !default; +/// The text color of the outline focused Input components. +/// @group input +$kendo-input-outline-focus-text: null !default; +/// The border color of the outline focused Input components. +/// @group input +$kendo-input-outline-focus-border: null !default; +/// The shadow of the outline focused Input components. +/// @group input +$kendo-input-outline-focus-shadow: null !default; + +/// The background color of the flat Input components. +/// @group input +$kendo-input-flat-bg: null !default; +/// The text color of the flat Input components. +/// @group input +$kendo-input-flat-text: null !default; +/// The border color of the flat Input components. +/// @group input +$kendo-input-flat-border: null !default; + +/// The background color of the flat hovered Input components. +/// @group input +$kendo-input-flat-hover-bg: null !default; +/// The text color of the flat hovered Input components. +/// @group input +$kendo-input-flat-hover-text: null !default; +/// The border color of the flat hovered Input components. +/// @group input +$kendo-input-flat-hover-border: null !default; + +/// The background color of the flat focused Input components. +/// @group input +$kendo-input-flat-focus-bg: null !default; +/// The text color of the flat focused Input components. +/// @group input +$kendo-input-flat-focus-text: null !default; +/// The border color of the flat focused Input components. +/// @group input +$kendo-input-flat-focus-border: null !default; +/// The shadow of the flat focused Input components. +/// @group input +$kendo-input-flat-focus-shadow: null !default; + +/// The text color of the Input placeholder. +/// @group input +$kendo-input-placeholder-text: null !default; +/// The opacity of the Input placeholder. +/// @group input +$kendo-input-placeholder-opacity: null !default; + +/// The color of the Input clear value icon. +/// @group input +$kendo-input-clear-value-text: null !default; +/// The opacity of the Input clear value icon. +/// @group input +$kendo-input-clear-value-opacity: null !default; +/// The color of the hovered Input clear value icon. +/// @group input +$kendo-input-clear-value-hover-text: null !default; +/// The opacity of the hovered Input clear value icon. +/// @group input +$kendo-input-clear-value-hover-opacity: null !default; + +/// The vertical margin of the clear value icon. +/// @group input +$kendo-input-values-margin-y: null !default; +/// The horizontal margin of the clear value icon. +/// @group input +$kendo-input-values-margin-x: null !default; + +/// The width of the Input button. +/// @group input +$kendo-input-button-width: null !default; +/// The border width of the Input button. +/// @group input +$kendo-input-button-border-width: null !default; +/// The width of the Input spinner button. +/// @group input +$kendo-input-spinner-width: null !default; +/// The icon offset of the Input spinner button. +/// @group input +$kendo-input-spinner-icon-offset: null !default; + +/// The color of the Input separator. +/// @group input +$kendo-input-separator-text: null !default; +/// The opacity of the Input separator. +/// @group input +$kendo-input-separator-opacity: null !default; + +/// The text color of the Input prefix. +/// @group input +$kendo-input-prefix-text: null !default; +/// The text color of the Input suffix. +/// @group input +$kendo-input-suffix-text: null !default; + +/// The text color of the Input prefix. +/// @group input +$kendo-input-prefix-text: null !default; +/// The text color of the Input suffix. +/// @group input +$kendo-input-suffix-text: null !default; + +/// The border color of the invalid Input components. +/// @group input +$kendo-input-invalid-border: null !default; +/// The shadow of the invalid Input components. +/// @group input +$kendo-input-invalid-shadow: null !default; + +/// The background color of the Picker components. +/// @group picker +$kendo-picker-bg: null !default; +/// The text color of the Picker components. +/// @group picker +$kendo-picker-text: null !default; +/// The border color of the Picker components. +/// @group picker +$kendo-picker-border: null !default; +/// The gradient of the Picker components. +/// @group picker +$kendo-picker-gradient: null !default; +/// The shadow of the Picker components. +/// @group picker +$kendo-picker-shadow: null !default; + +/// The background color of the hovered Picker components. +/// @group picker +$kendo-picker-hover-bg: null !default; +/// The text color of the hovered Picker components. +/// @group picker +$kendo-picker-hover-text: null !default; +/// The border color of the hovered Picker components. +/// @group picker +$kendo-picker-hover-border: null !default; +/// The gradient of the hovered Picker components. +/// @group picker +$kendo-picker-hover-gradient: null !default; +/// The shadow of the hovered Picker components. +/// @group picker +$kendo-picker-hover-shadow: null !default; + +/// The background color of the focused Picker components. +/// @group picker +$kendo-picker-focus-bg: null !default; +/// The text color of the focused Picker components. +/// @group picker +$kendo-picker-focus-text: null !default; +/// The border color of the focused Picker components. +/// @group picker +$kendo-picker-focus-border: null !default; +/// The gradient of the focused Picker components. +/// @group picker +$kendo-picker-focus-gradient: null !default; +/// The shadow of the focused Picker components. +/// @group picker +$kendo-picker-focus-shadow: null !default; + +/// The background color of the disabled Picker components. +/// @group picker +$kendo-picker-disabled-bg: null !default; +/// The text color of the disabled Picker components. +/// @group picker +$kendo-picker-disabled-text: null !default; +/// The border color of the disabled Picker components. +/// @group picker +$kendo-picker-disabled-border: null !default; +/// The gradient of the disabled Picker components. +/// @group picker +$kendo-picker-disabled-gradient: null !default; +/// The shadow of the disabled Picker components. +/// @group picker +$kendo-picker-disabled-shadow: null !default; + +/// The background color of the outline Picker components. +/// @group picker +$kendo-picker-outline-bg: null !default; +/// The text color of the outline Picker components. +/// @group picker +$kendo-picker-outline-text: null !default; +/// The border color of the outline Picker components. +/// @group picker +$kendo-picker-outline-border: null !default; + +/// The background color of the outline hovered Picker components. +/// @group picker +$kendo-picker-outline-hover-bg: null !default; +/// The text color of the outline hovered Picker components. +/// @group picker +$kendo-picker-outline-hover-text: null !default; +/// The border color of the outline hovered Picker components. +/// @group picker +$kendo-picker-outline-hover-border: null !default; + +/// The background color of the outline focused Picker components. +/// @group picker +$kendo-picker-outline-focus-bg: null !default; +/// The text color of the outline focused Picker components. +/// @group picker +$kendo-picker-outline-focus-text: null !default; +/// The border color of the outline focused Picker components. +/// @group picker +$kendo-picker-outline-focus-border: null !default; +/// The shadow of the outline focused Picker components. +/// @group picker +$kendo-picker-outline-focus-shadow: null !default; + +/// The background color of the outline hovered and focused Picker components. +/// @group picker +$kendo-picker-outline-hover-focus-bg: null !default; +/// The text color of the outline hovered and focused Picker components. +/// @group picker +$kendo-picker-outline-hover-focus-text: null !default; +/// The border color of the outline hovered and focused Picker components. +/// @group picker +$kendo-picker-outline-hover-focus-border: null !default; + +/// The background color of the flat Picker components. +/// @group picker +$kendo-picker-flat-bg: null !default; +/// The text color of the flat Picker components. +/// @group picker +$kendo-picker-flat-text: null !default; +/// The border color of the flat Picker components. +/// @group picker +$kendo-picker-flat-border: null !default; + +/// The background color of the flat hovered Picker components. +/// @group picker +$kendo-picker-flat-hover-bg: null !default; +/// The text color of the flat hovered Picker components. +/// @group picker +$kendo-picker-flat-hover-text: null !default; +/// The border color of the flat hovered Picker components. +/// @group picker +$kendo-picker-flat-hover-border: null !default; + +/// The background color of the flat focused Picker components. +/// @group picker +$kendo-picker-flat-focus-bg: null !default; +/// The text color of the flat focused Picker components. +/// @group picker +$kendo-picker-flat-focus-text: null !default; +/// The border color of the flat focused Picker components. +/// @group picker +$kendo-picker-flat-focus-border: null !default; +/// The shadow of the flat focused Picker components. +/// @group picker +$kendo-picker-flat-focus-shadow: null !default; + +/// The background color of the flat hovered and focused Picker components. +/// @group picker +$kendo-picker-flat-hover-focus-bg: null !default; +/// The text color of the flat hovered and focused Picker components. +/// @group picker +$kendo-picker-flat-hover-focus-text: null !default; +/// The border color of the flat hovered and focused Picker components. +/// @group picker +$kendo-picker-flat-hover-focus-border: null !default; diff --git a/packages/core/scss/components/list/_index.scss b/packages/core/scss/components/list/_index.scss new file mode 100644 index 00000000000..dbacf0376b9 --- /dev/null +++ b/packages/core/scss/components/list/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-list--styles() { + @include import-once( "list" ) { + @include core-styles(); + @include kendo-list--layout(); + @include kendo-list--theme(); + } +} diff --git a/packages/core/scss/components/list/_layout.scss b/packages/core/scss/components/list/_layout.scss new file mode 100644 index 00000000000..209f5764410 --- /dev/null +++ b/packages/core/scss/components/list/_layout.scss @@ -0,0 +1,251 @@ + +@use "./_variables.scss" as *; +@use "../icons/_variables.scss" as *; +@use "sass:map"; + +@mixin kendo-list--layout-base() { + + // List container + .k-list-container { + display: flex; + flex-flow: column nowrap; + + > .k-list { + flex: 1; + height: 100%; + } + } + + // List + .k-list { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: $kendo-list-font-family; + font-size: $kendo-list-font-size; + line-height: $kendo-list-line-height; + display: flex; + flex-flow: column nowrap; + outline: none; + position: relative; + overflow: hidden; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // List in popup + .k-popup > .k-list { + height: 100%; + border-width: 0; + } + + + // List header + // .k-list-header, + .k-list-group-sticky-header { + padding-block: $kendo-list-header-padding-y; + padding-inline: $kendo-list-header-padding-x; + border-width: 0; + border-width: $kendo-list-header-border-width; + border-style: solid; + font-size: $kendo-list-header-font-size; + line-height: $kendo-list-header-line-height; + font-weight: $kendo-list-header-font-weight; + white-space: nowrap; + display: flex; + flex-flow: row nowrap; + align-items: center; + flex: none; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + } + + + // List content + .k-list-content { + border-color: inherit; + flex: 1 1 auto; + overflow: hidden; + overflow-y: auto; + position: relative; + } + + + // List UL + .k-list-ul { + margin: 0; + padding: 0; + border-width: 0; + border-color: inherit; + height: auto; + list-style: none; + } + + + // List item + .k-list-item { + padding-block: $kendo-list-item-padding-y; + padding-inline: $kendo-list-item-padding-x; + border: 0; + font-size: $kendo-list-item-font-size; + line-height: $kendo-list-item-line-height; + outline: none; + cursor: pointer; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + gap: $kendo-icon-spacing; + position: relative; + transition-property: color, background-color, outline-color, box-shadow; + transition-duration: 200ms; + transition-timing-function: ease; + + &.k-first::before { + content: ""; + border-width: 1px 0 0; + border-style: solid; + position: absolute; + top: 0; + left: 0; + right: 0; + } + } + .k-list-item-text, + .k-list-header-text, + .k-list-optionlabel { + &::before { + content: "\200b"; + width: 0px; + overflow: hidden; + } + } + .k-list-optionlabel { + @extend .k-list-item !optional; + column-gap: 0; + } + + + // List group item + .k-list-group-item { + padding-block: $kendo-list-group-item-padding-y; + padding-inline: $kendo-list-group-item-padding-x; + border-width: 0; + border-width: $kendo-list-group-item-border-width; + border-style: solid; + font-size: $kendo-list-group-item-font-size; + line-height: $kendo-list-group-item-line-height; + font-weight: $kendo-list-group-item-font-weight; + cursor: default; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + gap: $kendo-icon-spacing; + position: relative; + } + + + // List item group label + .k-list-item-group-label { + padding-block: 0; + padding-inline: .5em; + font-size: .75em; + position: absolute; + top: 0; + inset-inline-end: 0; + } + + + // Virtualization + .k-virtual-list {} + .k-virtual-content, + .k-virtual-list .k-list-content { + overflow-y: scroll; + } + .k-virtual-list .k-list-item, + .k-virtual-list .k-list-group-item, + .k-virtual-content .k-list-item, + .k-virtual-content .k-list-group-item { + position: absolute; + width: 100%; + } + .k-virtual-list .k-list-item-text, + .k-virtual-list .k-list-header-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .k-virtual-list .k-list-optionlabel { + position: relative; + } + + + // Filter + .k-list-filter { + display: block; + position: relative; + padding: $kendo-list-filter-padding; + box-sizing: border-box; + flex: none; + } + + + // Switch sizes + @each $size, $size-props in $kendo-list-sizes { + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_header-padding-x: map.get( $size-props, header-padding-x ); + $_header-padding-y: map.get( $size-props, header-padding-y ); + $_header-font-size: map.get( $size-props, header-font-size ); + $_header-line-height: map.get( $size-props, header-line-height ); + $_item-padding-x: map.get( $size-props, item-padding-x ); + $_item-padding-y: map.get( $size-props, item-padding-y ); + $_item-font-size: map.get( $size-props, item-font-size ); + $_item-line-height: map.get( $size-props, item-line-height ); + $_group-item-padding-x: map.get( $size-props, group-item-padding-x ); + $_group-item-padding-y: map.get( $size-props, group-item-padding-y ); + $_group-item-font-size: map.get( $size-props, group-item-font-size ); + $_group-item-line-height: map.get( $size-props, group-item-line-height ); + + .k-list-#{$size} { + font-size: $_font-size; + line-height: $_line-height; + + // .k-list-header, + .k-list-group-sticky-header { + padding-block: $_header-padding-y; + padding-inline: $_header-padding-x; + font-size: $_header-font-size; + line-height: $_header-line-height; + } + + .k-list-item { + padding-block: $_item-padding-y; + padding-inline: $_item-padding-x; + font-size: $_item-font-size; + line-height: $_item-line-height; + } + + .k-list-group-item { + padding-block: $_group-item-padding-y; + padding-inline: $_group-item-padding-x; + font-size: $_group-item-font-size; + line-height: $_group-item-line-height; + } + } + } +} + + +@mixin kendo-list--layout() { + @include kendo-list--layout-base(); +} diff --git a/packages/core/scss/components/list/_theme.scss b/packages/core/scss/components/list/_theme.scss new file mode 100644 index 00000000000..ee7ca45b64d --- /dev/null +++ b/packages/core/scss/components/list/_theme.scss @@ -0,0 +1,102 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; +@use "../../_variables.scss" as *; + +@mixin kendo-list--theme-base() { + + // List + .k-list { + @include fill( + $kendo-list-text, + $kendo-list-bg, + $kendo-list-border + ); + } + + + // List header + // .k-list-header, + .k-list-group-sticky-header { + @include fill( + $kendo-list-header-text, + $kendo-list-header-bg, + $kendo-list-header-border, + ); + @include box-shadow( $kendo-list-header-shadow ); + } + + + // List item + .k-list-item { + @include fill( + $kendo-list-item-text, + $kendo-list-item-bg + ); + + // Hover + &:hover, + &.k-hover { + @include fill( + $kendo-list-item-hover-text, + $kendo-list-item-hover-bg + ); + } + + // Focus + &:focus, + &.k-focus { + @include fill( + $kendo-list-item-focus-text, + $kendo-list-item-focus-bg + ); + @include focus-indicator( $kendo-list-item-focus-shadow, true ); + } + + // Selected + &.k-selected { + @include fill( + $kendo-list-item-selected-text, + $kendo-list-item-selected-bg + ); + } + &.k-selected:hover, + &.k-selected.k-hover { + color: $kendo-list-item-selected-text; + background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg )); + } + } + + // Option Label + .k-list-optionlabel, + .k-list-optionlabel.k-hover, + .k-list-optionlabel:hover { + color: $kendo-list-option-label-text; + } + + // List group item + .k-list-group-item { + @include fill( + $kendo-list-group-item-text, + $kendo-list-group-item-bg, + $kendo-list-group-item-border, + ); + @include box-shadow( $kendo-list-group-item-shadow ); + } + + + // List item group label + .k-list-item-group-label { + @include fill( + $kendo-list-bg, + $kendo-list-text + ); + } + +} + + +@mixin kendo-list--theme() { + @include kendo-list--theme-base(); +} diff --git a/packages/core/scss/components/list/_variables.scss b/packages/core/scss/components/list/_variables.scss new file mode 100644 index 00000000000..f7df3769350 --- /dev/null +++ b/packages/core/scss/components/list/_variables.scss @@ -0,0 +1,202 @@ +// List + +/// The font family of the List components. +/// @group list +$kendo-list-font-family: null !default; + +/// The font size of the List component, if no size is set. +/// @group list +$kendo-list-font-size: null !default; +$kendo-list-sm-font-size: null !default; +$kendo-list-md-font-size: null !default; +$kendo-list-lg-font-size: null !default; + +/// The line height of the List component, if no size is set. +/// @group list +$kendo-list-line-height: null !default; +$kendo-list-sm-line-height: null !default; +$kendo-list-md-line-height: null !default; +$kendo-list-lg-line-height: null !default; + +/// The horizontal padding of the List header, if no size is set. +/// @group list +$kendo-list-header-padding-x: null !default; +$kendo-list-sm-header-padding-x: null !default; +$kendo-list-md-header-padding-x: null !default; +$kendo-list-lg-header-padding-x: null !default; + +/// The vertical padding of the List header, if no size is set. +/// @group list +$kendo-list-header-padding-y: null !default; +$kendo-list-sm-header-padding-y: null !default; +$kendo-list-md-header-padding-y: null !default; +$kendo-list-lg-header-padding-y: null !default; + +/// The border width of the List header. +/// @group list +$kendo-list-header-border-width: null !default; + +/// The font size of the List header, if no size is set. +/// @group list +$kendo-list-header-font-size: null !default; +$kendo-list-sm-header-font-size: null !default; +$kendo-list-md-header-font-size: null !default; +$kendo-list-lg-header-font-size: null !default; + +/// The line height of the List header, if no size is set. +/// @group list +$kendo-list-header-line-height: null !default; +$kendo-list-sm-header-line-height: null !default; +$kendo-list-md-header-line-height: null !default; +$kendo-list-lg-header-line-height: null !default; + +/// The font weight of the List header. +/// @group list +$kendo-list-header-font-weight: null !default; + +/// The padding of the the List filter input. +/// @group list +$kendo-list-filter-padding: null !default; + +/// The horizontal padding of the List items, when no size is set. +/// @group list +$kendo-list-item-padding-x: null !default; +$kendo-list-sm-item-padding-x: null !default; +$kendo-list-md-item-padding-x: null !default; +$kendo-list-lg-item-padding-x: null !default; + +/// The vertical padding of the List items, when no size is set. +/// @group list +$kendo-list-item-padding-y: null !default; +$kendo-list-sm-item-padding-y: null !default; +$kendo-list-md-item-padding-y: null !default; +$kendo-list-lg-item-padding-y: null !default; + +/// The font size of the List items, if no size is set. +/// @group list +$kendo-list-item-font-size: null !default; +$kendo-list-sm-item-font-size: null !default; +$kendo-list-md-item-font-size: null !default; +$kendo-list-lg-item-font-size: null !default; + +/// The line height of the List items, if no size is set. +/// @group list +$kendo-list-item-line-height: null !default; +$kendo-list-sm-item-line-height: null !default; +$kendo-list-md-item-line-height: null !default; +$kendo-list-lg-item-line-height: null !default; + +/// The horizontal padding of the List group items, when no size is set. +/// @group list +$kendo-list-group-item-padding-x: null !default; +$kendo-list-sm-group-item-padding-x: null !default; +$kendo-list-md-group-item-padding-x: null !default; +$kendo-list-lg-group-item-padding-x: null !default; + +/// The vertical padding of the List group items, when no size is set. +/// @group list +$kendo-list-group-item-padding-y: null !default; +$kendo-list-sm-group-item-padding-y: null !default; +$kendo-list-md-group-item-padding-y: null !default; +$kendo-list-lg-group-item-padding-y: null !default; + +/// The border width of the List group items. +/// @group list +$kendo-list-group-item-border-width: null !default; + +/// The font size of the List group items, if no size is set. +/// @group list +$kendo-list-group-item-font-size: null !default; +$kendo-list-sm-group-item-font-size: null !default; +$kendo-list-md-group-item-font-size: null !default; +$kendo-list-lg-group-item-font-size: null !default; + +/// The line height of the List group items, if no size is set. +/// @group list +$kendo-list-group-item-line-height: null !default; +$kendo-list-sm-group-item-line-height: null !default; +$kendo-list-md-group-item-line-height: null !default; +$kendo-list-lg-group-item-line-height: null !default; + +/// The font weight of a List group item. +/// @group list +$kendo-list-group-item-font-weight: null !default; + + +/// The map with the sizes of the List. +/// @group list +$kendo-list-sizes: null !default; + + +/// The background color of the List component. +/// @group list +$kendo-list-bg: null !default; +/// The text color of the List component. +/// @group list +$kendo-list-text: null !default; +/// The border color of the List component. +/// @group list +$kendo-list-border: null !default; + + +/// The background color of the List header. +/// @group list +$kendo-list-header-bg: null !default; +/// The text color of the List header. +/// @group list +$kendo-list-header-text: null !default; +/// The border color of the List header. +/// @group list +$kendo-list-header-border: null !default; +/// The box shadow of the List header. +/// @group list +$kendo-list-header-shadow: null !default; + + +/// The background color of the List items. +/// @group list +$kendo-list-item-bg: null !default; +/// The text color of the List items. +/// @group list +$kendo-list-item-text: null !default; + +/// The background color of the hovered List items. +/// @group list +$kendo-list-item-hover-bg: null !default; +/// The text color of the hovered List items. +/// @group list +$kendo-list-item-hover-text: null !default; + +/// The background color of the focused List items. +/// @group list +$kendo-list-item-focus-bg: null !default; +/// The text color of the focused List items. +/// @group list +$kendo-list-item-focus-text: null !default; +/// The box shadow of the focused List items. +/// @group list +$kendo-list-item-focus-shadow: null !default; + +/// The background color of the selected List items. +/// @group list +$kendo-list-item-selected-bg: null !default; +/// The text color of the selected List items. +/// @group list +$kendo-list-item-selected-text: null !default; + +/// The background color of the List group items. +/// @group list +$kendo-list-group-item-bg: null !default; +/// The text color of the List group items. +/// @group list +$kendo-list-group-item-text: null !default; +/// The border color of the List group items. +/// @group list +$kendo-list-group-item-border: null !default; +/// The base shadow of the List group items. +/// @group list +$kendo-list-group-item-shadow: null !default; + +/// The color of the 'Option Label' text. +/// @group list +$kendo-list-option-label-text: null !default; diff --git a/packages/core/scss/components/listbox/_index.scss b/packages/core/scss/components/listbox/_index.scss new file mode 100644 index 00000000000..c12067a7a69 --- /dev/null +++ b/packages/core/scss/components/listbox/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-listbox--styles() { + @include import-once( "listbox" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-icon--styles(); + @include kendo-listbox--layout(); + @include kendo-listbox--theme(); + } +} diff --git a/packages/core/scss/components/listbox/_layout.scss b/packages/core/scss/components/listbox/_layout.scss new file mode 100644 index 00000000000..7fb4dc2f416 --- /dev/null +++ b/packages/core/scss/components/listbox/_layout.scss @@ -0,0 +1,91 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-listbox--layout-base() { + + .k-listbox { + width: $kendo-listbox-width; + height: $kendo-listbox-default-height; + border-width: 0; + outline: 0; + font-family: $kendo-listbox-font-family; + font-size: $kendo-listbox-font-size; + line-height: $kendo-listbox-line-height; + vertical-align: top; + background-color: transparent; + display: inline-flex; + gap: $kendo-listbox-spacing; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + .k-listbox-actions { + display: flex; + gap: $kendo-listbox-button-spacing; + } + + &.k-listbox-actions-left, + &.k-listbox-actions-right { + flex-direction: row; + + .k-listbox-actions { + flex-direction: column; + } + } + + &.k-listbox-actions-right { + flex-direction: row-reverse; + } + + &.k-listbox-actions-top, + &.k-listbox-actions-bottom { + flex-direction: column; + + .k-listbox-actions { + flex-direction: row; + } + } + + &.k-listbox-actions-bottom { + flex-direction: column-reverse; + } + + .k-list-scroller { + width: 100%; + min-height: 0; + height: inherit; + border-width: $kendo-listbox-border-width; + border-style: solid; + box-sizing: border-box; + display: flex; + flex-flow: column nowrap; + + .k-list-scroller { + border-width: 0; + } + + .k-list { + height: inherit; + background: transparent; + } + } + + .k-drop-hint { + border-top-width: $kendo-listbox-drop-hint-width; + border-top-style: solid; + } + + .k-ghost { + opacity: .5; + } + } + + .k-item { + cursor: default; + } + +} + + +@mixin kendo-listbox--layout() { + @include kendo-listbox--layout-base(); +} diff --git a/packages/core/scss/components/listbox/_theme.scss b/packages/core/scss/components/listbox/_theme.scss new file mode 100644 index 00000000000..69e75084e6a --- /dev/null +++ b/packages/core/scss/components/listbox/_theme.scss @@ -0,0 +1,26 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-listbox--theme-base() { + + // Listbox + .k-listbox { + .k-list-scroller { + @include fill( + $kendo-listbox-text, + $kendo-listbox-bg, + $kendo-listbox-border + ); + } + .k-drop-hint { + border-top-color: $kendo-color-primary; + } + } + +} + + +@mixin kendo-listbox--theme() { + @include kendo-listbox--theme-base(); +} diff --git a/packages/core/scss/components/listbox/_variables.scss b/packages/core/scss/components/listbox/_variables.scss new file mode 100644 index 00000000000..34f8ad47850 --- /dev/null +++ b/packages/core/scss/components/listbox/_variables.scss @@ -0,0 +1,50 @@ +// ListBox + +/// The spacing between the ListBox elements. +/// @group listbox +$kendo-listbox-spacing: null !default; +/// The spacing between the ListBox buttons. +/// @group listbox +$kendo-listbox-button-spacing: null !default; +/// The width of the ListBox. +/// @group listbox +$kendo-listbox-width: null !default; +/// The height of the ListBox. +/// @group listbox +$kendo-listbox-default-height: null !default; +/// The width of the border around the ListBox. +/// @group listbox +$kendo-listbox-border-width: null !default; +/// The font family of the ListBox. +/// @group listbox +$kendo-listbox-font-family: null !default; +/// The font size of the ListBox. +/// @group listbox +$kendo-listbox-font-size: null !default; +/// The line height of the ListBox. +/// @group listbox +$kendo-listbox-line-height: null !default; + +/// The text color of the ListBox. +/// @group listbox +$kendo-listbox-text: null !default; +/// The background color of the ListBox. +/// @group listbox +$kendo-listbox-bg: null !default; +/// The border color of the ListBox. +/// @group listbox +$kendo-listbox-border: null !default; + +/// The inline padding of the ListBox item. +/// @group listbox +$kendo-listbox-item-padding-x: null !default; +/// The block padding of the ListBox item. +/// @group listbox +$kendo-listbox-item-padding-y: null !default; + +/// The width of the ListBox drop hint. +/// @group listbox +$kendo-listbox-drop-hint-width: null !default; +/// The width of the border around the ListBox drop hint. +/// @group listbox +$kendo-listbox-drop-hint-border-width: null !default; diff --git a/packages/core/scss/components/listgroup/_index.scss b/packages/core/scss/components/listgroup/_index.scss new file mode 100644 index 00000000000..19608e7e4f6 --- /dev/null +++ b/packages/core/scss/components/listgroup/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-listgroup--styles() { + @include import-once( "listgroup" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-listgroup--layout(); + @include kendo-listgroup--theme(); + } +} diff --git a/packages/core/scss/components/listgroup/_layout.scss b/packages/core/scss/components/listgroup/_layout.scss new file mode 100644 index 00000000000..ae383bd7d89 --- /dev/null +++ b/packages/core/scss/components/listgroup/_layout.scss @@ -0,0 +1,196 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + + +@mixin kendo-listgroup--layout-base() { + + .k-listgroup { + @include border-radius( $kendo-listgroup-border-radius ); + margin: 0; + padding: 0; + border-width: $kendo-listgroup-border-width; + border-style: solid; + font-size: $kendo-listgroup-font-size; + line-height: $kendo-listgroup-line-height; + list-style: none; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + + > ul { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + } + + // Borders of items + .k-listgroup-item + .k-listgroup-item { + border-top-width: $kendo-listgroup-item-border-width; + } + } + .k-listgroup-flush { + @include border-radius( 0 ); + border-left-width: 0; + border-right-width: 0; + } + + + .k-listgroup-item { + padding-block: $kendo-listgroup-item-padding-y; + padding-inline: $kendo-listgroup-item-padding-x; + border-width: 0; + border-style: solid; + border-color: inherit; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + flex: 0 0 auto; + position: relative; + + > .k-link { + margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 ); + margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 ); + padding-block: $kendo-listgroup-item-padding-y; + padding-inline: $kendo-listgroup-item-padding-x; + color: inherit; + text-decoration: none; + outline: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + flex: 1 1 auto; + position: relative; + + > .k-select { + padding: $kendo-listgroup-item-padding-y; + display: flex; + align-items: center; + flex: 0 0 auto; + position: absolute; + top: 50%; + inset-inline-end: 0; + transform: translateY(-50%); + } + } + } + .k-listgroup-item-segmented { + align-items: stretch; + + > .k-link { + margin-right: 0; + } + + > .k-select { + margin: calc( #{$kendo-listgroup-item-padding-y} * -1 ) calc( #{$kendo-listgroup-item-padding-x} * -1 ) calc( #{$kendo-listgroup-item-padding-y} * -1 ) 0; + padding: $kendo-listgroup-item-padding-y; + border-width: 0 0 0 1px; + border-style: solid; + border-color: inherit; + cursor: pointer; + } + } + + + // Forms in listgroup + .k-listgroup-form-row { + margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 ); + margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 ); + padding-block: $kendo-listgroup-item-padding-y; + padding-inline: $kendo-listgroup-item-padding-x; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex: 1 1 auto; + position: relative; + + .k-listgroup-form-field-label { + width: 40%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .k-listgroup-form-field-wrapper { + width: 50%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + text-align: end; + position: relative; + + select, + input[type="text"], + input[type="password"], + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="number"], + textarea { + width: 100%; + box-sizing: border-box; + flex: 1 1 100%; + } + + textarea { + min-height: 4em; + resize: vertical; + } + } + } + .k-listgroup-item.k-listgroup-form-row { + margin: 0; + } + + + [dir="rtl"] { + + .k-listgroup-item { + + > .k-link { + + > .k-select { + right: auto; + left: 0; + } + } + } + .k-listgroup-item-segmented { + + > .k-link { + margin-right: calc( #{$kendo-listgroup-item-padding-x} * -1 ); + margin-left: 0; + } + + > .k-select { + margin-right: 0; + margin-left: calc( #{$kendo-listgroup-item-padding-x} * -1 ); + border-right-width: 1px; + border-left-width: 0; + } + } + } + + + // No flexbox fix + .k-noflexbox { + .k-listgroup, + .k-listgroup > ul + .k-listgroup-item, + .k-listgroup-item > .k-link { + display: block; + } + } + +} + + +@mixin kendo-listgroup--layout() { + @include kendo-listgroup--layout-base(); +} diff --git a/packages/core/scss/components/listgroup/_theme.scss b/packages/core/scss/components/listgroup/_theme.scss new file mode 100644 index 00000000000..24689af5242 --- /dev/null +++ b/packages/core/scss/components/listgroup/_theme.scss @@ -0,0 +1,20 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-listgroup--theme-base() { + + // Listgroup + .k-listgroup { + @include fill( + $kendo-listgroup-text, + $kendo-listgroup-bg, + $kendo-listgroup-border + ); + } + +} + + +@mixin kendo-listgroup--theme() { + @include kendo-listgroup--theme-base(); +} diff --git a/packages/core/scss/components/listgroup/_variables.scss b/packages/core/scss/components/listgroup/_variables.scss new file mode 100644 index 00000000000..ea3b707e9f6 --- /dev/null +++ b/packages/core/scss/components/listgroup/_variables.scss @@ -0,0 +1,14 @@ +// Listgroup +$kendo-listgroup-border-width: null !default; +$kendo-listgroup-border-radius: null !default; + +$kendo-listgroup-font-size: null !default; +$kendo-listgroup-line-height: null !default; + +$kendo-listgroup-bg: null !default; +$kendo-listgroup-text: null !default; +$kendo-listgroup-border: null !default; + +$kendo-listgroup-item-padding-x: null !default; +$kendo-listgroup-item-padding-y: null !default; +$kendo-listgroup-item-border-width: null !default; diff --git a/packages/core/scss/components/listview/_index.scss b/packages/core/scss/components/listview/_index.scss new file mode 100644 index 00000000000..b90bfa2353b --- /dev/null +++ b/packages/core/scss/components/listview/_index.scss @@ -0,0 +1,25 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../pager/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-listview--styles() { + @include import-once( "listview" ) { + @include core-styles(); + @include kendo-pager--styles(); + @include kendo-icon--styles(); + @include kendo-listview--layout(); + @include kendo-listview--theme(); + @include kendo-utils--layout--display(); + @include kendo-utils--flex-grid--flex-direction(); + @include kendo-utils--flex-grid--grid-template-columns(); + @include kendo-utils--flex-grid--flex-wrap(); + } +} diff --git a/packages/core/scss/components/listview/_layout.scss b/packages/core/scss/components/listview/_layout.scss new file mode 100644 index 00000000000..264e7235fe8 --- /dev/null +++ b/packages/core/scss/components/listview/_layout.scss @@ -0,0 +1,146 @@ +@use "./variables.scss" as *; + +@mixin kendo-listview--layout-base() { + + // Listview + .k-listview { + margin: 0; + padding: 0; + border-width: 0; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-listview-font-family; + font-size: $kendo-listview-font-size; + line-height: $kendo-listview-line-height; + display: flex; + flex-flow: column nowrap; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; + } + .k-listview-bordered { + border-width: $kendo-listview-border-width; + } + + + // Header + .k-listview-header { + border-width: 0; + border-style: solid; + border-color: inherit; + } + .k-listview-bordered > .k-listview-header { + border-bottom-width: $kendo-listview-border-width; + } + + + // Listview content + .k-listview-content { + margin: 0; + padding: 0; + outline: 0; + flex-grow: 1; + position: relative; + overflow: auto; + + &::after { + height: 0; + clear: both; + display: block; + } + } + .k-listview-content.k-d-flex, + .k-listview-content.k-d-grid { + &::after { display: none; } + } + .k-listview-content-padding-rectangle { + padding-block: $kendo-listview-padding-y; + padding-inline: $kendo-listview-padding-x; + } + .k-listview-content-padding-square { + padding: $kendo-listview-padding-y; + } + + + // Listview item + .k-listview-item { + padding: 0; + border-width: 0; + outline: 0; + border-style: solid; + box-sizing: border-box; + flex-shrink: 0; + } + .k-listview-item-padding-rectangle { + padding-block: $kendo-listview-item-padding-y; + padding-inline: $kendo-listview-item-padding-x; + } + .k-listview-item-padding-rectangle .k-listview-link { + margin-block: (-$kendo-listview-item-padding-y); + margin-inline: (-$kendo-listview-item-padding-x); + padding-block: $kendo-listview-item-padding-y; + padding-inline: $kendo-listview-item-padding-x; + } + .k-listview-item-padding-square { + padding: $kendo-listview-item-padding-y; + } + .k-listview-item-padding-square .k-listview-link { + margin: (-$kendo-listview-item-padding-y); + padding: $kendo-listview-item-padding-y; + } + + + // Listview footer + .k-listview-footer { + border-width: 0; + border-style: solid; + border-color: inherit; + } + .k-listview-bordered > .k-listview-footer { + border-top-width: $kendo-listview-border-width; + } + + + // Listview pager + .k-listview-pager { + border-width: 0; + border-color: inherit; + } + .k-listview-bordered > .k-listview-pager-top { + border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} ); + } + .k-listview-bordered > .k-listview-pager-bottom { + border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} ); + } + + + // Borders + .k-listview-borders-all { + .k-listview-item { + border-width: 1px; + } + } + .k-listview-borders-horizontal { + .k-listview-item { + border-top-width: 1px; + } + .k-listview-item:first-child { + border-top-width: 0; + } + } + .k-listview-borders-vertical { + .k-listview-item { + border-left-width: 1px; + } + .k-listview-item:first-child { + border-left-width: 0; + } + } + +} + + +@mixin kendo-listview--layout() { + @include kendo-listview--layout-base(); +} diff --git a/packages/core/scss/components/listview/_theme.scss b/packages/core/scss/components/listview/_theme.scss new file mode 100644 index 00000000000..8b6d331221c --- /dev/null +++ b/packages/core/scss/components/listview/_theme.scss @@ -0,0 +1,48 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-listview--theme-base() { + + // Listview + .k-listview { + @include fill( + $kendo-listview-text, + $kendo-listview-bg, + $kendo-listview-border + ); + } + + + // Listview content + .k-listview-content { + + > .k-focus { + @include fill( + $kendo-listview-item-focus-text, + $kendo-listview-item-focus-bg, + $kendo-listview-item-focus-border + ); + @include focus-indicator( $kendo-listview-item-focus-shadow, true ); + } + + > .k-selected { + @include fill( + $kendo-listview-item-selected-text, + $kendo-listview-item-selected-bg, + $kendo-listview-item-selected-border + ); + } + + } + + // List item + .k-listview-item { + border-color: $kendo-listview-border; + } + +} + + +@mixin kendo-listview--theme() { + @include kendo-listview--theme-base(); +} diff --git a/packages/core/scss/components/listview/_variables.scss b/packages/core/scss/components/listview/_variables.scss new file mode 100644 index 00000000000..441a1c6a4ff --- /dev/null +++ b/packages/core/scss/components/listview/_variables.scss @@ -0,0 +1,60 @@ +// ListView + +/// The horizontal padding of the ListView. +/// @group listview +$kendo-listview-padding-x: null !default; +/// The vertical padding of the ListView. +/// @group listview +$kendo-listview-padding-y: null !default; +/// The width of the border around bordered ListView. +/// @group listview +$kendo-listview-border-width: null !default; +/// The font family of the ListView. +/// @group listview +$kendo-listview-font-family: null !default; +/// The font size of the ListView. +/// @group listview +$kendo-listview-font-size: null !default; +/// The line height of the ListView. +/// @group listview +$kendo-listview-line-height: null !default; + +/// The text color of the ListView. +/// @group listview +$kendo-listview-text: null !default; +/// The background color of the ListView. +/// @group listview +$kendo-listview-bg: null !default; +/// The border color of the ListView. +/// @group listview +$kendo-listview-border: null !default; + +/// The horizontal padding of the ListView items. +/// @group listview +$kendo-listview-item-padding-x: null !default; +/// The vertical padding of the ListView items. +/// @group listview +$kendo-listview-item-padding-y: null !default; + +/// The text color of the selected ListView items. +/// @group listview +$kendo-listview-item-selected-text: null !default; +/// The background color of the selected ListView items. +/// @group listview +$kendo-listview-item-selected-bg: null !default; +/// The border color of the selected ListView items. +/// @group listview +$kendo-listview-item-selected-border: null !default; + +/// The text color of the focused ListView items. +/// @group listview +$kendo-listview-item-focus-text: null !default; +/// The background color of the focused ListView items. +/// @group listview +$kendo-listview-item-focus-bg: null !default; +/// The border color of the focused ListView items. +/// @group listview +$kendo-listview-item-focus-border: null !default; +/// The box shadow of the focused ListView items. +/// @group listview +$kendo-listview-item-focus-shadow: null !default; diff --git a/packages/core/scss/components/loader/_index.scss b/packages/core/scss/components/loader/_index.scss new file mode 100644 index 00000000000..80e8204a3a1 --- /dev/null +++ b/packages/core/scss/components/loader/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../overlay/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-loader--styles() { + @include import-once( "loader" ) { + @include core-styles(); + @include kendo-overlay--styles(); + @include kendo-loader--layout(); + @include kendo-loader--theme(); + @include kendo-utils--typography--text-color(); + } +} diff --git a/packages/core/scss/components/loader/_layout.scss b/packages/core/scss/components/loader/_layout.scss new file mode 100644 index 00000000000..f62c6b0e08f --- /dev/null +++ b/packages/core/scss/components/loader/_layout.scss @@ -0,0 +1,587 @@ +@use "./_variables.scss" as *; +@use "../overlay/_variables.scss" as *; + +@mixin kendo-loader--layout-base() { + + .k-loader { + position: relative; + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + + // Prevents the inline elements from being displaced. + // A good example is the 'pulsing' loader inside a button. + line-height: 0; + } + + .k-loader-canvas { + display: flex; + position: relative; + } + + // Loader segment + .k-loader-segment { + border-radius: $kendo-loader-segment-border-radius; + background-color: currentColor; + position: absolute; + } + + // Loader sizes + .k-loader-sm { + padding: $kendo-loader-sm-padding; + + .k-loader-segment { + width: $kendo-loader-sm-segment-size; + height: $kendo-loader-sm-segment-size; + } + } + .k-loader-md { + padding: $kendo-loader-md-padding; + + .k-loader-segment { + width: $kendo-loader-md-segment-size; + height: $kendo-loader-md-segment-size; + } + } + .k-loader-lg { + padding: $kendo-loader-lg-padding; + + .k-loader-segment { + width: $kendo-loader-lg-segment-size; + height: $kendo-loader-lg-segment-size; + } + } + + + + + // Loader pulsing 2 + @keyframes pulsing-2-segment { + 0% { transform: scale(1); } + 50% { transform: scale(1.5); } + 100% { transform: scale(1); } + } + + + // Component + .k-loader-pulsing-2 { + + .k-loader-canvas { + align-items: center; + } + + .k-loader-segment:nth-child(1) { + left: 0; + transform: scale( 1.5 ); + transform-origin: 0 50%; + animation: pulsing-2-segment 1s ease infinite; + animation-delay: -.5s; + } + .k-loader-segment:nth-child(2) { + right: 0; + transform-origin: 100% 50%; + animation: pulsing-2-segment 1s ease infinite; + } + + &.k-loader-sm { + .k-loader-canvas { + width: calc( #{$kendo-loader-sm-segment-size} * 3 ); + height: calc( #{$kendo-loader-sm-segment-size} * 1.5 ); + } + } + + &.k-loader-md { + .k-loader-canvas { + width: calc( #{$kendo-loader-md-segment-size} * 3 ); + height: calc( #{$kendo-loader-md-segment-size} * 1.5 ); + } + } + + &.k-loader-lg { + .k-loader-canvas { + width: calc( #{$kendo-loader-lg-segment-size} * 3 ); + height: calc( #{$kendo-loader-lg-segment-size} * 1.5 ); + } + } + } + + + + + // Loader spinner 3 + @keyframes spinner-3-segment { + 0% { + top: 0; + left: 50%; + } + + 33.3333% { + top: 100%; + left: 0; + } + + 66.6666% { + top: 100%; + left: 100%; + } + + 100% { + top: 0; + left: 50%; + } + } + + + // Component + .k-loader-spinner-3 { + + // Note: Until we can provide a css variables solution, or something better: + // * the dot center is on the exact point of angle + // * offset dots by artifically reduce dimentions by 1 dot size + // * compensate by setting margin on all sides half a dot size + + .k-loader-segment { + transform: translate( -50%, -50% ); + } + .k-loader-segment:nth-child(1) { + top: 0; + left: 50%; + animation: spinner-3-segment 2s ease infinite; + } + .k-loader-segment:nth-child(2) { + top: 100%; + left: 0; + animation: spinner-3-segment 2s ease infinite; + animation-delay: calc( -2s / 3 ); + } + .k-loader-segment:nth-child(3) { + top: 100%; + left: 100%; + animation: spinner-3-segment 2s ease infinite; + animation-delay: calc( -4s / 3 ); + } + + + &.k-loader-sm { + .k-loader-canvas { + margin: calc( #{$kendo-loader-sm-segment-size} / 2 ); + width: calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} ); + height: calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} ); + } + } + + &.k-loader-md { + .k-loader-canvas { + margin: calc( #{ $kendo-loader-md-segment-size} / 2 ); + width: calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} ); + height: calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} ); + } + } + + &.k-loader-lg { + .k-loader-canvas { + margin: calc( #{$kendo-loader-lg-segment-size} / 2 ); + width: calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} ); + height: calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} ); + } + } + } + + + + + // Loader spinner 4 + @keyframes spinner-4-segment-1 { + 0% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + + 33.3% { + top: 0; + left: 0; + transform: translateX(0) translateY(0); + } + + 66.6% { + top: 0; + left: 0; + transform: translateX(0) translateY(0); + } + + 100% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + } + @keyframes spinner-4-segment-2 { + 0% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + + 33.3% { + top: 0; + left: 100%; + transform: translateX(-100%) translateY(0); + } + + 66.6% { + top: 0; + left: 100%; + transform: translateX(-100%) translateY(0); + } + + 100% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + } + @keyframes spinner-4-segment-3 { + 0% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + + 33.3% { + top: 100%; + left: 100%; + transform: translateX(-100%) translateY(-100%); + } + + 66.6% { + top: 100%; + left: 100%; + transform: translateX(-100%) translateY(-100%); + } + + 100% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + } + @keyframes spinner-4-segment-4 { + 0% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + + 33.3% { + top: 100%; + left: 0; + transform: translateX(0) translateY(-100%); + } + + 66.6% { + top: 100%; + left: 0; + transform: translateX(0) translateY(-100%); + } + + 100% { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + } + @keyframes spinner-4 { + 0% { + transform: rotate(0); + } + + 33.3% { + transform: rotate(0); + } + + 66.6% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(180deg); + } + } + + .k-loader-spinner-4 { + .k-loader-canvas { + animation: spinner-4 1.833s ease infinite; + } + + .k-loader-segment { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + + &:nth-child(1) { + animation: spinner-4-segment-1 1.833s ease infinite; + } + + &:nth-child(2) { + animation: spinner-4-segment-2 1.833s ease infinite; + } + + &:nth-child(3) { + animation: spinner-4-segment-3 1.833s ease infinite; + } + + &:nth-child(4) { + animation: spinner-4-segment-4 1.833s ease infinite; + } + } + + &.k-loader-sm { + .k-loader-canvas { + width: $kendo-loader-sm-spinner-4-width; + height: $kendo-loader-sm-spinner-4-height; + } + } + + &.k-loader-md { + .k-loader-canvas { + width: $kendo-loader-md-spinner-4-width; + height: $kendo-loader-md-spinner-4-height; + } + } + + &.k-loader-lg { + .k-loader-canvas { + width: $kendo-loader-lg-spinner-4-width; + height: $kendo-loader-lg-spinner-4-height; + } + } + } + + + + + // Loader container + .k-loader-container { + display: flex; + align-items: center; + justify-content: center; + z-index: 20001; + + .k-loader { + padding: 0; + } + } + + .k-loader-container, + .k-loader-container-overlay { + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + // TODO: use k-overlay as a base class in rendering + .k-loader-container-overlay { + opacity: $kendo-overlay-opacity; + } + + .k-loader-container-inner { + display: flex; + align-items: center; + position: relative; + z-index: 2; + } + + .k-loader-container-panel { + border-width: $kendo-loader-container-panel-border-width; + border-style: $kendo-loader-container-panel-border-style; + border-radius: $kendo-loader-container-panel-border-radius; + } + + // Loader Container Sizes + .k-loader-container-sm { + .k-loader-container-inner { + padding: $kendo-loader-sm-container-padding; + gap: $kendo-loader-sm-container-gap; + } + + .k-loader-container-label { + font-size: $kendo-loader-sm-container-font-size; + } + } + .k-loader-container-md { + .k-loader-container-inner { + padding: $kendo-loader-md-container-padding; + gap: $kendo-loader-md-container-gap; + } + + .k-loader-container-label { + font-size: $kendo-loader-md-container-font-size; + } + } + .k-loader-container-lg { + .k-loader-container-inner { + padding: $kendo-loader-lg-container-padding; + gap: $kendo-loader-lg-container-gap; + } + + .k-loader-container-label { + font-size: $kendo-loader-lg-container-font-size; + } + } + + // Loader Position + .k-loader-top { + .k-loader-container-inner { + flex-direction: column; + text-align: center; + } + } + .k-loader-end { + .k-loader-container-label { + order: -1; + } + } + +} + +// Legacy implementation of the loading icon inside inputs and pickers +// Replace with loader component +@mixin kendo-loading--layout-base() { + + // Loading mask + .k-loading-mask, + .k-loading-image, + .k-loading-color { + width: 100%; + height: 100%; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + + *, + *::before, + *::after, + &::before, + &::after { + box-sizing: border-box; + } + } + + .k-loading-mask { + z-index: $kendo-zindex-loading; + + &.k-opaque { + .k-loading-color { + opacity: 1; + } + } + } + .k-loading-text { + text-indent: -4000px; + text-align: center; + position: absolute; + color: $kendo-loading-text; + } + .k-loading-image { + z-index: 2; + color: $kendo-loading-text; + } + .k-loading-color { + background-color: $kendo-loading-bg; + opacity: $kendo-loading-opacity; + } + + // Loading indicator + .k-i-loading { + width: 1em; + height: 1em; + line-height: 1; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + vertical-align: middle; + position: relative; + background-color: transparent; + box-sizing: border-box; + color: $kendo-loading-text; + + &::before, + &::after { + box-sizing: border-box; + } + } + + .k-i-loading::before, + .k-i-loading::after, + .k-loading-image::before, + .k-loading-image::after { + position: absolute; + top: 50%; + left: 50%; + display: inline-block; + content: ""; + box-sizing: inherit; + border-radius: 50%; + border-width: .05em; + border-style: solid; + border-color: currentColor; + border-top-color: transparent; + border-bottom-color: transparent; + background-color: transparent; + } + + .k-icon.k-i-loading::before, + .k-icon.k-i-loading::after { + content: ""; + } + + .k-i-loading::before, + .k-loading-image::before { + margin-top: -.5em; + margin-left: -.5em; + width: 1em; + height: 1em; + animation: k-loading-animation .7s linear infinite; + } + + .k-i-loading::after, + .k-loading-image::after { + margin-top: -.25em; + margin-left: -.25em; + width: .5em; + height: .5em; + animation: k-loading-animation reverse 1.4s linear infinite; + } + + .k-loading-image::before, + .k-loading-image::after { + content: ""; + // See https://github.com/telerik/kendo-themes/issues/1925 + border-width: 1px; // TODO: Remove once we drop IE support + border-width: clamp( .015em, 1px, 1px ); + font-size: 4em; + } + + // Loading animation + @keyframes k-loading-animation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + +} + +@mixin kendo-loader--layout() { + @include kendo-loader--layout-base(); + @include kendo-loading--layout-base(); +} diff --git a/packages/core/scss/components/loader/_theme.scss b/packages/core/scss/components/loader/_theme.scss new file mode 100644 index 00000000000..86fdcef855d --- /dev/null +++ b/packages/core/scss/components/loader/_theme.scss @@ -0,0 +1,22 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-loader--theme-base() { + + @each $name, $color in $kendo-theme-colors { + .k-loader-#{$name} { + color: $color; + } + } + + .k-loader-container-panel { + background-color: $kendo-loader-container-panel-bg; + border-color: $kendo-loader-container-panel-border-color; + } + +} + + +@mixin kendo-loader--theme() { + @include kendo-loader--theme-base(); +} diff --git a/packages/core/scss/components/loader/_variables.scss b/packages/core/scss/components/loader/_variables.scss new file mode 100644 index 00000000000..527325842d9 --- /dev/null +++ b/packages/core/scss/components/loader/_variables.scss @@ -0,0 +1,125 @@ +// Loader + +/// The border radius of the Loader segment. +/// @group loader +$kendo-loader-segment-border-radius: null !default; + +/// The size of the small Loader segment. +/// @group loader +$kendo-loader-sm-segment-size: null !default; +/// The size of the medium Loader segment. +/// @group loader +$kendo-loader-md-segment-size: null !default; +/// The size of the large Loader segment. +/// @group loader +$kendo-loader-lg-segment-size: null !default; + +/// The padding of the small Loader. +/// @group loader +$kendo-loader-sm-padding: null !default; +/// The padding of the medium Loader. +/// @group loader +$kendo-loader-md-padding: null !default; +/// The padding of the large Loader. +/// @group loader +$kendo-loader-lg-padding: null !default; + +/// The width of the small spinner-3 Loader. +/// @group loader +$kendo-loader-sm-spinner-3-width: null !default; +/// The width of the medium spinner-3 Loader. +/// @group loader +$kendo-loader-md-spinner-3-width: null !default; +/// The width of the large spinner-3 Loader. +/// @group loader +$kendo-loader-lg-spinner-3-width: null !default; + +/// The height of the small spinner-3 Loader. +/// @group loader +$kendo-loader-sm-spinner-3-height: null !default; +/// The height of the medium spinner-3 Loader. +/// @group loader +$kendo-loader-md-spinner-3-height: null !default; +/// The height of the large spinner-3 Loader. +/// @group loader +$kendo-loader-lg-spinner-3-height: null !default; + +/// The width of the small spinner-4 Loader. +/// @group loader +$kendo-loader-sm-spinner-4-width: null !default; +/// The width of the medium spinner-4 Loader. +/// @group loader +$kendo-loader-md-spinner-4-width: null !default; +/// The width of the large spinner-4 Loader. +/// @group loader +$kendo-loader-lg-spinner-4-width: null !default; + +/// The height of the small spinner-4 Loader. +/// @group loader +$kendo-loader-sm-spinner-4-height: null !default; +/// The height of the medium spinner-4 Loader. +/// @group loader +$kendo-loader-md-spinner-4-height: null !default; +/// The height of the large spinner-4 Loader. +/// @group loader +$kendo-loader-lg-spinner-4-height: null !default; + +/// The border width of the container panel. +/// @group loader +$kendo-loader-container-panel-border-width: null !default; +/// The border style of the container panel. +/// @group loader +$kendo-loader-container-panel-border-style: null !default; +/// The border color of the container panel. +/// @group loader +$kendo-loader-container-panel-border-color: null !default; +/// The border radius of the container panel. +/// @group loader +$kendo-loader-container-panel-border-radius: null !default; +/// The background color of the container panel. +/// @group loader +$kendo-loader-container-panel-bg: null !default; + +/// The padding of the small Loader container. +/// @group loader +$kendo-loader-sm-container-padding: null !default; +/// The padding of the medium Loader container. +/// @group loader +$kendo-loader-md-container-padding: null !default; +/// The padding of the large Loader container. +/// @group loader +$kendo-loader-lg-container-padding: null !default; + +/// The gap of the small Loader container. +/// @group loader +$kendo-loader-sm-container-gap: null !default; +/// The gap of the medium Loader container. +/// @group loader +$kendo-loader-md-container-gap: null !default; +/// The gap of the large Loader container. +/// @group loader +$kendo-loader-lg-container-gap: null !default; + +/// The font size of the small Loader container. +/// @group loader +$kendo-loader-sm-container-font-size: null !default; +/// The font size of the medium Loader container. +/// @group loader +$kendo-loader-md-container-font-size: null !default; +/// The font size of the large Loader container. +/// @group loader +$kendo-loader-lg-container-font-size: null !default; + +// Loading indicator +/// The background color of the Loading indicator. +/// @group loading +$kendo-loading-bg: null !default; +/// The text color of the Loading indicator. +/// @group loading +$kendo-loading-text: null !default; +/// The opacity of the Loading indicator. +/// @group loading +$kendo-loading-opacity: null !default; +/// The z-index of the Loading indicator. +/// @group loading +$kendo-zindex-loading: null !default; diff --git a/packages/core/scss/components/map/_index.scss b/packages/core/scss/components/map/_index.scss new file mode 100644 index 00000000000..788cee98887 --- /dev/null +++ b/packages/core/scss/components/map/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../scroller/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-map--styles() { + @include import-once( "map" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-scroller--styles(); + @include kendo-icon--styles(); + @include kendo-map--layout(); + @include kendo-map--theme(); + } +} diff --git a/packages/core/scss/components/map/_layout.scss b/packages/core/scss/components/map/_layout.scss new file mode 100644 index 00000000000..7709773f769 --- /dev/null +++ b/packages/core/scss/components/map/_layout.scss @@ -0,0 +1,143 @@ +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-map--layout-base() { + + // Map + .k-map { + height: 600px; + box-sizing: border-box; + border-width: $kendo-map-border-width; + border-style: solid; + font-size: $kendo-map-font-size; + line-height: $kendo-map-line-height; + font-family: $kendo-map-font-family; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + + // Scroll + .km-scroll-wrapper { + width: 100%; + height: 100%; + user-select: none; + position: absolute; + } + .km-scroll-container { height: 100%; } + .k-touch-scrollbar { display: none; } + + // Layers + .k-layer { + position: absolute; + left: 0; + top: 0; + } + + // Marker + .k-marker { + transform: translate(-50%, -100%); + cursor: pointer; + position: absolute; + overflow: visible; + } + + + // Attribution + .k-attribution { + padding-block: $kendo-map-attribution-padding-y; + padding-inline: $kendo-map-attribution-padding-x; + border-width: 0; + font-size: $kendo-map-attribution-font-size; + z-index: 1000; + } + + + } + + + // Controls + .k-map-controls { + position: absolute; + display: flex; + align-items: center; + } + + + // Navigator + .k-navigator { + margin: $kendo-map-navigator-margin; + width: $kendo-map-navigator-width; + height: $kendo-map-navigator-width; + border-width: $kendo-map-navigator-border-width; + border-style: solid; + box-sizing: border-box; + border-radius: 50%; + position: relative; + + + // Buttons + .k-button { + padding: 0; + width: auto; + height: auto; + line-height: 1; + box-shadow: none; + position: absolute; + + .k-icon { + min-width: 0; + min-height: 0; + } + } + .k-navigator-n, + .k-navigator-up { + transform: translateX(-50%); + top: $kendo-map-navigator-padding; + left: 50%; + } + .k-navigator-e, + .k-navigator-right { + transform: translateY(-50%); + right: $kendo-map-navigator-padding; + top: 50%; + } + .k-navigator-s, + .k-navigator-down { + transform: translateX(-50%); + bottom: $kendo-map-navigator-padding; + left: 50%; + } + .k-navigator-w, + .k-navigator-left { + transform: translateY(-50%); + left: $kendo-map-navigator-padding; + top: 50%; + } + } + + + // Zoom control + .k-zoom-control { + margin: k-spacing(4); + border: 0; + background: none; + display: flex; + } + + + .k-pdf-export { + .k-navigator, + .k-zoom-control { + display: none; + } + } +} + + +@mixin kendo-map--layout() { + @include kendo-map--layout-base(); +} diff --git a/packages/core/scss/components/map/_theme.scss b/packages/core/scss/components/map/_theme.scss new file mode 100644 index 00000000000..0571c5c8b33 --- /dev/null +++ b/packages/core/scss/components/map/_theme.scss @@ -0,0 +1,39 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../button/_variables.scss" as *; + +@mixin kendo-map--theme-base() { + + // Map theme + .k-map { + @include fill( + $kendo-map-text, + $kendo-map-bg, + $kendo-map-border + ); + + .k-navigator { + @include fill( + $kendo-button-text, + $kendo-button-bg, + $kendo-button-border, + $kendo-button-gradient + ); + @include box-shadow( $kendo-button-shadow ); + } + + .k-marker { + color: $kendo-map-marker-fill; + } + + .k-attribution { + background-color: $kendo-map-attribution-bg; + } + } + +} + + +@mixin kendo-map--theme() { + @include kendo-map--theme-base(); +} diff --git a/packages/core/scss/components/map/_variables.scss b/packages/core/scss/components/map/_variables.scss new file mode 100644 index 00000000000..9cc1741714e --- /dev/null +++ b/packages/core/scss/components/map/_variables.scss @@ -0,0 +1,69 @@ +// Map +/// The border width of the Map. +/// @group map +$kendo-map-border-width: null !default; + +/// The font size of the Map. +/// @group map +$kendo-map-font-size: null !default; +/// The line height of the Map. +/// @group map +$kendo-map-line-height: null !default; +/// The font family of the Map. +/// @group map +$kendo-map-font-family: null !default; + +/// The background color of the Map. +/// @group map +$kendo-map-bg: null !default; +/// The text color of the Map. +/// @group map +$kendo-map-text: null !default; +/// The border color of the Map. +/// @group map +$kendo-map-border: null !default; + +/// The margin of the Map navigator. +/// @group map +$kendo-map-navigator-margin: null !default; +/// The padding of the Map navigator. +/// @group map +$kendo-map-navigator-padding: null !default; +/// The width of the Map navigator. +/// @group map +$kendo-map-navigator-width: null !default; +/// The height of the Map navigator. +/// @group map +$kendo-map-navigator-height: null !default; +/// The border width of the Map navigator. +/// @group map +$kendo-map-navigator-border-width: null !default; + +/// The margin of the Map zoom control. +/// @group map +$kendo-map-zoom-control-margin: null !default; +/// The horizontal padding of the Map zoom control. +/// @group map +$kendo-map-zoom-control-button-padding-x: null !default; +/// The vertical padding of the Map zoom control. +/// @group map +$kendo-map-zoom-control-button-padding-y: null !default; + +/// The horizontal padding of the Map attribution. +/// @group map +$kendo-map-attribution-padding-x: null !default; +/// The vertical padding of the Map attribution. +/// @group map +$kendo-map-attribution-padding-y: null !default; +/// The font size of the Map attribution. +/// @group map +$kendo-map-attribution-font-size: null !default; +/// The background color of the Map attribution. +/// @group map +$kendo-map-attribution-bg: null !default; + +/// The fill color of the Map marker. +/// @group map +$kendo-map-marker-fill: null !default; + +$kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default; diff --git a/packages/core/scss/components/maskedtextbox/_index.scss b/packages/core/scss/components/maskedtextbox/_index.scss new file mode 100644 index 00000000000..3de4f10efc2 --- /dev/null +++ b/packages/core/scss/components/maskedtextbox/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-masked-textbox--styles() { + @include import-once( "masked-textbox" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-icon--styles(); + @include kendo-masked-textbox--layout(); + @include kendo-masked-textbox--theme(); + } +} diff --git a/packages/core/scss/components/maskedtextbox/_layout.scss b/packages/core/scss/components/maskedtextbox/_layout.scss new file mode 100644 index 00000000000..ebfbe693489 --- /dev/null +++ b/packages/core/scss/components/maskedtextbox/_layout.scss @@ -0,0 +1,11 @@ +@mixin kendo-masked-textbox--layout-base() { + + // Masked textbox + .k-maskedtextbox {} + +} + + +@mixin kendo-masked-textbox--layout() { + @include kendo-masked-textbox--layout-base(); +} diff --git a/packages/core/scss/components/maskedtextbox/_theme.scss b/packages/core/scss/components/maskedtextbox/_theme.scss new file mode 100644 index 00000000000..a76f3534844 --- /dev/null +++ b/packages/core/scss/components/maskedtextbox/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-masked-textbox--theme-base() { + + // Masked textbox + .k-maskedtextbox {} + +} + + +@mixin kendo-masked-textbox--theme() { + @include kendo-masked-textbox--theme-base(); +} diff --git a/packages/core/scss/components/maskedtextbox/_variables.scss b/packages/core/scss/components/maskedtextbox/_variables.scss new file mode 100644 index 00000000000..68580fbd566 --- /dev/null +++ b/packages/core/scss/components/maskedtextbox/_variables.scss @@ -0,0 +1 @@ +// Masked textbox diff --git a/packages/core/scss/components/mediaplayer/_index.scss b/packages/core/scss/components/mediaplayer/_index.scss new file mode 100644 index 00000000000..3558eb203c8 --- /dev/null +++ b/packages/core/scss/components/mediaplayer/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../slider/_index.scss" as *; +@use "../toolbar/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-media-player--styles() { + @include import-once( "media-player" ) { + @include core-styles(); + @include kendo-slider--styles(); + @include kendo-toolbar--styles(); + @include kendo-icon--styles(); + @include kendo-media-player--layout(); + @include kendo-media-player--theme(); + } +} diff --git a/packages/core/scss/components/mediaplayer/_layout.scss b/packages/core/scss/components/mediaplayer/_layout.scss new file mode 100644 index 00000000000..9f07e744565 --- /dev/null +++ b/packages/core/scss/components/mediaplayer/_layout.scss @@ -0,0 +1,110 @@ +@use "sass:math"; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-media-player--layout-base() { + + // Base + .k-mediaplayer { + border-width: $kendo-media-player-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-media-player-font-family; + font-size: $kendo-media-player-font-size; + line-height: $kendo-media-player-line-height; + display: block; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + > iframe { + width: 100%; + height: 100%; + border: 0; + vertical-align: top; + } + } + + + // Title bar + .k-mediaplayer-titlebar { + padding-block: $kendo-media-player-titlebar-padding-y; + padding-inline: $kendo-media-player-titlebar-padding-x; + position: absolute; + z-index: 2; + top: 0; + left: 0; + right: 0; + } + + + // Toolbar + .k-mediaplayer-toolbar-wrap { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + } + .k-mediaplayer-toolbar { + border-width: 0; + width: 100% !important; // stylelint-disable-line declaration-no-important + box-shadow: none; + + + .k-dropdown-list { + width: auto; + } + } + .k-mediaplayer-time-wrap { + flex: 1; + } + .k-mediaplayer-volume-wrap { + // TODO: When slider draghandle size is exposed, use it instead + padding: 0 math.div( 14px, 2 ); + align-items: center; + } + .k-mediaplayer-volume { + width: 100px; + } + + + // Seekbar + .k-slider.k-mediaplayer-seekbar { + width: 100%; + position: absolute; + z-index: 3; + top: 0; + left: 0; + transform: translateY( -50% ); + } + .k-mediaplayer-seekbar .k-slider-track { + width: 100% !important; // stylelint-disable-line declaration-no-important + border-radius: 0; + } + .k-mediaplayer-seekbar .k-slider-selection { + border-radius: 0; + } + + .k-mediaplayer-fullscreen { + z-index: 10000; + position: fixed; + top: 0; + left: 0; + width: 100% !important; // stylelint-disable-line declaration-no-important + height: 100% !important; // stylelint-disable-line declaration-no-important + } + +} + + +@mixin kendo-media-player--layout() { + @include kendo-media-player--layout-base(); +} diff --git a/packages/core/scss/components/mediaplayer/_theme.scss b/packages/core/scss/components/mediaplayer/_theme.scss new file mode 100644 index 00000000000..26f3a914c06 --- /dev/null +++ b/packages/core/scss/components/mediaplayer/_theme.scss @@ -0,0 +1,30 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../_variables.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-media-player--theme-base() { + + // Theme + .k-mediaplayer { + @include fill( + $kendo-media-player-text, + $kendo-media-player-bg, + $kendo-media-player-border + ); + } + + + // Title bar + .k-mediaplayer-titlebar { + color: $kendo-media-player-titlebar-text; + background-image: linear-gradient( $kendo-media-player-titlebar-gradient ); + text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 )); + } + +} + + +@mixin kendo-media-player--theme() { + @include kendo-media-player--theme-base(); +} diff --git a/packages/core/scss/components/mediaplayer/_variables.scss b/packages/core/scss/components/mediaplayer/_variables.scss new file mode 100644 index 00000000000..34cb278f971 --- /dev/null +++ b/packages/core/scss/components/mediaplayer/_variables.scss @@ -0,0 +1,43 @@ +// Media player + +/// The border width of the MediaPlayer. +/// @group mediaplayer +$kendo-media-player-border-width: null !default; +/// The font family of the MediaPlayer. +/// @group mediaplayer +$kendo-media-player-font-family: null !default; +/// The font size of the MediaPlayer. +/// @group mediaplayer +$kendo-media-player-font-size: null !default; +/// The line height of the MediaPlayer. +/// @group mediaplayer +$kendo-media-player-line-height: null !default; + +/// The background color of the MediaPlayer. +/// @group mediaplayer +$kendo-media-player-bg: null !default; +/// The text color of the MediaPlayer. +/// @group mediaplayer +$kendo-media-player-text: null !default; +/// The border color of the MediaPlayer. +/// @group mediaplayer +$kendo-media-player-border: null !default; + +/// The horizontal padding of the MediaPlayer title. +/// @group mediaplayer +$kendo-media-player-titlebar-padding-x: null !default; +/// The vertical padding of the MediaPlayer title. +/// @group mediaplayer +$kendo-media-player-titlebar-padding-y: null !default; +/// The background color of the MediaPlayer title. +/// @group mediaplayer +$kendo-media-player-titlebar-bg: null !default; +/// The text color of the MediaPlayer title. +/// @group mediaplayer +$kendo-media-player-titlebar-text: null !default; +/// The border color of the MediaPlayer title. +/// @group mediaplayer +$kendo-media-player-titlebar-border: null !default; +/// The gradient of the MediaPlayer title. +/// @group mediaplayer +$kendo-media-player-titlebar-gradient: null !default; diff --git a/packages/core/scss/components/menu-button/_index.scss b/packages/core/scss/components/menu-button/_index.scss new file mode 100644 index 00000000000..3fd3fcade34 --- /dev/null +++ b/packages/core/scss/components/menu-button/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../menu/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-menu-button--styles() { + @include import-once( "menu-button" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-menu--styles(); + @include kendo-menu-button--layout(); + @include kendo-menu-button--theme(); + } +} diff --git a/packages/core/scss/components/menu-button/_layout.scss b/packages/core/scss/components/menu-button/_layout.scss new file mode 100644 index 00000000000..4c0f330387a --- /dev/null +++ b/packages/core/scss/components/menu-button/_layout.scss @@ -0,0 +1,37 @@ +@use "./_variables.scss" as *; +@use "../button/_variables.scss" as *; + +@mixin kendo-menu-button--layout-base() { + + // Menu button + .k-menu-button, + .k-dropdown-button { + aspect-ratio: auto; + outline: 0; + display: inline-flex; + flex-flow: row nowrap; + vertical-align: middle; + + > .k-button-arrow { + margin-inline-start: calc( #{$kendo-menu-button-arrow-padding-x} * -1 ); + margin-inline-end: calc( #{$kendo-button-padding-x} * -1 ); + padding-left: $kendo-menu-button-arrow-padding-x; + padding-right: $kendo-menu-button-arrow-padding-x; + flex: none; + display: inline-flex; + align-items: center; + justify-content: center; + } + + &.k-icon-button > .k-button-arrow { + margin-inline-start: 0; + margin-inline-end: calc( #{$kendo-button-padding-y} * -1 ); + } + } + +} + + +@mixin kendo-menu-button--layout() { + @include kendo-menu-button--layout-base(); +} diff --git a/packages/core/scss/components/menu-button/_theme.scss b/packages/core/scss/components/menu-button/_theme.scss new file mode 100644 index 00000000000..b8f4b97bea6 --- /dev/null +++ b/packages/core/scss/components/menu-button/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-menu-button--theme-base() { + + // Menu button + .k-menu-button {} + +} + + +@mixin kendo-menu-button--theme() { + @include kendo-menu-button--theme-base(); +} diff --git a/packages/core/scss/components/menu-button/_variables.scss b/packages/core/scss/components/menu-button/_variables.scss new file mode 100644 index 00000000000..8d6d7dbc097 --- /dev/null +++ b/packages/core/scss/components/menu-button/_variables.scss @@ -0,0 +1,5 @@ +// Menu-button + +/// The horizontal padding of the button arrow in the Menu Button.. +/// @group menu-button +$kendo-menu-button-arrow-padding-x: null !default; diff --git a/packages/core/scss/components/menu/_index.scss b/packages/core/scss/components/menu/_index.scss new file mode 100644 index 00000000000..5b88091fe7e --- /dev/null +++ b/packages/core/scss/components/menu/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; +@use "../button/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-menu--styles() { + @include import-once( "menu" ) { + @include core-styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-icon--styles(); + @include kendo-button--styles(); + @include kendo-menu--layout(); + @include kendo-menu--theme(); + } +} diff --git a/packages/core/scss/components/menu/_layout.scss b/packages/core/scss/components/menu/_layout.scss new file mode 100644 index 00000000000..afdb2948318 --- /dev/null +++ b/packages/core/scss/components/menu/_layout.scss @@ -0,0 +1,325 @@ +@use "../../color-system/_constants.scss" as *; +@use "../icons/_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-menu--layout-base() { + + // Menu bar + .k-menu-bar { + border-width: $kendo-menu-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-menu-font-family; + font-size: $kendo-menu-font-size; + line-height: $kendo-menu-line-height; + display: flex; + flex-wrap: nowrap; + align-items: stretch; + position: relative; + cursor: default; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + .k-menu { @extend .k-menu-bar !optional; } + + // Menu item + .k-menu-item { + border-width: 0; + outline: 0; + display: flex; + flex-flow: column nowrap; + flex: none; + position: relative; + user-select: none; + + &.k-selected { + font-weight: $kendo-menu-item-selected-font-weight; + } + } + .k-menu-item-content { + display: block; + height: auto; + overflow: visible; + + .k-actions { + margin-top: 0; + } + } + + + // Menu link + .k-menu-link { + padding-block: $kendo-menu-item-padding-y; + padding-inline: $kendo-menu-item-padding-x; + outline: 0; + color: inherit; + display: flex; + flex-flow: row nowrap; + flex: 1 1 auto; + gap: $kendo-menu-item-icon-spacing; + align-items: center; + position: relative; + white-space: nowrap; + cursor: pointer; + } + + + // Menu item text + .k-menu-link-text { + display: flex; + flex-flow: row nowrap; + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + } + + + // Expand arrow + .k-menu-expand-arrow { + margin-inline-end: calc( #{$kendo-icon-spacing} * -1 ); + display: inline-flex; + flex-flow: row wrap; + align-items: center; + flex: none; + position: relative; + } + + + // Orientation -- horizontal + .k-menu-horizontal { + flex-direction: row; + + > .k-menu-item + .k-menu-item { + margin-inline-start: $kendo-menu-item-spacing; + } + + > .k-separator { + margin-block: $kendo-menu-separator-margin-block; + margin-inline: $kendo-menu-separator-margin-inline; + width: 0; + height: auto; + border-width: 0 0 0 1px; + border-style: solid; + } + } + + + // Orientation -- vertical + .k-menu-vertical { + flex-direction: column; + width: 100%; + + > .k-menu-item + .k-menu-item { + margin-top: $kendo-menu-item-spacing; + } + + > .k-menu-item > .k-menu-link { + padding-block: $kendo-menu-popup-item-padding-y; + padding-inline: $kendo-menu-popup-item-padding-x; + padding-inline-end: $kendo-menu-popup-item-padding-end; + } + + > .k-menu-item > .k-menu-link > .k-menu-expand-arrow { + margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start; + margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end; + } + + > .k-separator { + margin-block: $kendo-menu-separator-margin-block; + margin-inline: 0; + height: 0; + border-width: 1px 0 0; + border-style: solid; + display: block; + } + } + + + // Menu popup + .k-menu-popup { + padding-block: $kendo-menu-popup-padding-y; + padding-inline: $kendo-menu-popup-padding-x; + box-sizing: border-box; + border-width: $kendo-menu-popup-border-width; + border-style: solid; + overflow: auto; + max-height: 80vh; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + .k-menu-item { + font-weight: initial; + } + } + + + // Sub menu + .k-menu-group { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-flow: column nowrap; + position: absolute; + + .k-menu-item + .k-menu-item { + margin-top: $kendo-menu-popup-item-spacing; + } + + .k-separator { + margin-block: $kendo-menu-separator-margin-inline; + margin-inline: 0; + height: 0; + border-width: 1px 0 0; + border-style: solid; + display: block; + } + } + .k-menu-popup .k-menu-group { + position: relative; + } + + + // Sizes + .k-menu-group-sm { + font-size: $kendo-menu-popup-sm-font-size; + line-height: $kendo-menu-popup-sm-line-height; + + // jquery popup overrides those + .k-menu-item { + font-size: $kendo-menu-popup-sm-font-size; + line-height: $kendo-menu-popup-sm-line-height; + } + + .k-menu-link { + padding-block: $kendo-menu-popup-sm-item-padding-y; + padding-inline: $kendo-menu-popup-sm-item-padding-x; + padding-inline-end: $kendo-menu-popup-sm-item-padding-end; + } + + .k-menu-expand-arrow { + margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start; + margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end; + } + } + .k-menu-group-md { + font-size: $kendo-menu-popup-md-font-size; + line-height: $kendo-menu-popup-md-line-height; + + // jquery popup overrides those + .k-menu-item { + font-size: $kendo-menu-popup-md-font-size; + line-height: $kendo-menu-popup-md-line-height; + } + + .k-menu-link { + padding-block: $kendo-menu-popup-md-item-padding-y; + padding-inline: $kendo-menu-popup-md-item-padding-x; + padding-inline-end: $kendo-menu-popup-md-item-padding-end; + } + + .k-menu-expand-arrow { + margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start; + margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end; + } + } + .k-menu-group-lg { + font-size: $kendo-menu-popup-lg-font-size; + line-height: $kendo-menu-popup-lg-line-height; + + // jquery popup overrides those + .k-menu-item { + font-size: $kendo-menu-popup-lg-font-size; + line-height: $kendo-menu-popup-lg-line-height; + } + + .k-menu-link { + padding-block: $kendo-menu-popup-lg-item-padding-y; + padding-inline: $kendo-menu-popup-lg-item-padding-x; + padding-inline-end: $kendo-menu-popup-lg-item-padding-end; + } + + .k-menu-expand-arrow { + margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start; + margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end; + } + } + + + // Context menu + .k-popups-wrapper { + position: relative; + border: 0; + margin: 0; + padding: 0; + } + .k-context-menu { + margin: 0; + padding-block: $kendo-menu-popup-padding-y; + padding-inline: $kendo-menu-popup-padding-x; + border-width: $kendo-menu-popup-border-width; + border-style: solid; + + &.k-menu-horizontal { + padding-block: $kendo-menu-popup-padding-x; + padding-inline: $kendo-menu-popup-padding-y; + } + } + .k-animation-container .k-context-menu.k-menu-horizontal { + // kendo-jquery adds `display: block` via js and we need to override it. + display: flex !important; // stylelint-disable-line declaration-no-important + flex-wrap: nowrap; + } + .k-context-menu-popup { + z-index: 12000; + + .k-context-menu { + border-width: 0; + } + } + .k-popup .k-context-menu, + .k-context-menu-popup .k-context-menu { + border-width: 0; + } + + + // Scrolling + .k-menu-scroll-wrapper { + margin: 0; + padding: 0; + border: 0; + position: relative; + display: flex; + align-items: center; + + .k-menu { + overflow: hidden; + flex-wrap: nowrap; + } + } + + .k-menu-scroll-wrapper-vertical { + flex-direction: column; + + > .k-menu-scroll-button { + width: 100%; + } + } + +} + + +@mixin kendo-menu--layout() { + @include kendo-menu--layout-base(); +} diff --git a/packages/core/scss/components/menu/_theme.scss b/packages/core/scss/components/menu/_theme.scss new file mode 100644 index 00000000000..ef2b05be24b --- /dev/null +++ b/packages/core/scss/components/menu/_theme.scss @@ -0,0 +1,145 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-menu--theme-base() { + + .k-menu:not(.k-context-menu) { + @include fill( + $kendo-menu-text, + $kendo-menu-bg, + $kendo-menu-border, + $kendo-menu-gradient + ); + + > .k-item { + @include fill( + $kendo-menu-item-text, + $kendo-menu-item-bg, + $kendo-menu-item-border, + $kendo-menu-item-gradient + ); + + &:hover, + &.k-hover { + @include fill( + $kendo-menu-item-hover-text, + $kendo-menu-item-hover-bg, + $kendo-menu-item-hover-border, + $kendo-menu-item-hover-gradient + ); + } + + &:active, + &.k-active { + @include fill( + $kendo-menu-item-active-text, + $kendo-menu-item-active-bg, + $kendo-menu-item-active-border, + $kendo-menu-item-active-gradient + ); + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-menu-item-focus-shadow, true ); + } + + &.k-selected { + @include fill( + $kendo-menu-item-selected-text, + $kendo-menu-item-selected-bg, + $kendo-menu-item-selected-border, + $kendo-menu-item-selected-gradient + ); + } + } + + > .k-separator { + @include fill( + $border: $kendo-menu-separator-border + ); + } + } + + .k-menu-group, + .k-menu.k-context-menu { + @include fill( + $kendo-menu-popup-text, + $kendo-menu-popup-bg, + $kendo-menu-popup-border, + $kendo-menu-popup-gradient + ); + + .k-item > .k-link { + @include fill( + $kendo-menu-popup-item-text, + $kendo-menu-popup-item-bg, + $kendo-menu-popup-item-border, + $kendo-menu-popup-item-gradient + ); + + &:hover, + &.k-hover { + @include fill( + $kendo-menu-popup-item-hover-text, + $kendo-menu-popup-item-hover-bg, + $kendo-menu-popup-item-hover-border, + $kendo-menu-popup-item-hover-gradient + ); + } + + &:active, + &.k-active, + &.k-selected { + @include fill( + $kendo-menu-popup-item-active-text, + $kendo-menu-popup-item-active-bg, + $kendo-menu-popup-item-active-border, + $kendo-menu-popup-item-active-gradient + ); + } + } + + .k-item:focus, + .k-item.k-focus { + > .k-link { + @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true ); + } + } + + > .k-separator { + @include fill( + $border: $kendo-menu-separator-border + ); + } + } + + + // Scrolling + .k-menu-scroll-wrapper .k-menu-scroll-button { + @include fill( + $kendo-menu-scroll-button-text, + $kendo-menu-scroll-button-bg, + $kendo-menu-scroll-button-border, + $kendo-menu-scroll-button-gradient + ); + + &:hover { + @include fill( + $kendo-menu-scroll-button-hover-text, + $kendo-menu-scroll-button-hover-bg, + $kendo-menu-scroll-button-hover-border, + $kendo-menu-scroll-button-hover-gradient + ); + + &::before { + opacity: 0; + } + } + } +} + + +@mixin kendo-menu--theme() { + @include kendo-menu--theme-base(); +} diff --git a/packages/core/scss/components/menu/_variables.scss b/packages/core/scss/components/menu/_variables.scss new file mode 100644 index 00000000000..fba582db08c --- /dev/null +++ b/packages/core/scss/components/menu/_variables.scss @@ -0,0 +1,267 @@ +// Menu + +/// The width of the border around the Menu. +/// @group menu +$kendo-menu-border-width: null !default; + +/// The font family of the Menu. +/// @group menu +$kendo-menu-font-family: null !default; +/// The font size of the Menu. +/// @group menu +$kendo-menu-font-size: null !default; +/// The line height of the Menu used along with $kendo-font-size. +/// @group menu +$kendo-menu-line-height: null !default; + +/// The background color of the Menu. +/// @group menu +$kendo-menu-bg: null !default; +/// The text color of the Menu. +/// @group menu +$kendo-menu-text: null !default; +/// The border color of the Menu. +/// @group menu +$kendo-menu-border: null !default; +/// The background gradient of the Menu. +/// @group menu +$kendo-menu-gradient: null !default; + +// Menu item + +/// The horizontal padding of the Menu item. +/// @group menu +$kendo-menu-item-padding-x: null !default; +/// The vertical padding of the Menu item. +/// @group menu +$kendo-menu-item-padding-y: null !default; +/// The spacing between the Menu items. +/// @group menu +$kendo-menu-item-spacing: null !default; +/// The spacing between the Menu item text and icons. +/// @group menu +$kendo-menu-item-icon-spacing: null !default; + +/// The font weight of the selected Menu item. +/// @group menu +$kendo-menu-item-selected-font-weight: null !default; + +/// The background color of the Menu item. +/// @group menu +$kendo-menu-item-bg: null !default; +/// The text color of the Menu item. +/// @group menu +$kendo-menu-item-text: null !default; +/// The border color of the Menu item. +/// @group menu +$kendo-menu-item-border: null !default; +/// The background gradient of the Menu item. +/// @group menu +$kendo-menu-item-gradient: null !default; + +/// The background color of hovered Menu item. +/// @group menu +$kendo-menu-item-hover-bg: null !default; +/// The text color of hovered Menu item. +/// @group menu +$kendo-menu-item-hover-text: null !default; +/// The border color of hovered Menu item. +/// @group menu +$kendo-menu-item-hover-border: null !default; +/// The background gradient of hovered Menu item. +/// @group menu +$kendo-menu-item-hover-gradient: null !default; + +/// The background color of active Menu item. +/// @group menu +$kendo-menu-item-active-bg: null !default; +/// The text color of active Menu item. +/// @group menu +$kendo-menu-item-active-text: null !default; +/// The border color of active Menu item. +/// @group menu +$kendo-menu-item-active-border: null !default; +/// The background gradient of active Menu item. +/// @group menu +$kendo-menu-item-active-gradient: null !default; + +/// The base shadow of focused Menu item. +/// @group menu +$kendo-menu-item-focus-shadow: null !default; + +/// The background color of selected Menu item. +/// @group menu +$kendo-menu-item-selected-bg: null !default; +/// The text color of selected Menu item. +/// @group menu +$kendo-menu-item-selected-text: null !default; +/// The border color of selected Menu item. +/// @group menu +$kendo-menu-item-selected-border: null !default; +/// The background gradient of selected Menu item. +/// @group menu +$kendo-menu-item-selected-gradient: null !default; + +/// The background color of the Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-bg: null !default; +/// The text color of the Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-text: null !default; +/// The border color of the Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-border: null !default; +/// The background gradient of the Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-gradient: null !default; + +/// The background color of hovered Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-hover-bg: null !default; +/// The text color of hovered Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-hover-text: null !default; +/// The border color of hovered Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-hover-border: null !default; +/// The background gradient of hovered Menu scroll buttons. +/// @group menu +$kendo-menu-scroll-button-hover-gradient: null !default; + + +// Menu Separator + +/// The inline margin of the horizontal Menu separator. +/// @group menu +$kendo-menu-separator-margin-inline: null !default; +/// The block margin of the horizontal Menu separator. +/// @group menu +$kendo-menu-separator-margin-block: null !default; +/// The border color of the Menu separator. +/// @group menu +$kendo-menu-separator-border: null !default; + + +// Menu popup + +/// The horizontal padding of the Menu popup. +/// @group menu +$kendo-menu-popup-padding-x: null !default; + +/// The vertical padding of the Menu popup. +/// @group menu +$kendo-menu-popup-padding-y: null !default; + +/// The width of the border around the Menu popup. +/// @group menu +$kendo-menu-popup-border-width: null !default; + +/// The font sizes of the Menu popup. +/// @group menu +$kendo-menu-popup-font-size: null !default; +$kendo-menu-popup-sm-font-size: null !default; +$kendo-menu-popup-md-font-size: null !default; +$kendo-menu-popup-lg-font-size: null !default; + +/// The line heights used along with $kendo-font-size. +/// @group menu +$kendo-menu-popup-line-height: null !default; +$kendo-menu-popup-sm-line-height: null !default; +$kendo-menu-popup-md-line-height: null !default; +$kendo-menu-popup-lg-line-height: null !default; + +/// The background color of the Menu popup. +/// @group menu +$kendo-menu-popup-bg: null !default; +/// The text color of the Menu popup. +/// @group menu +$kendo-menu-popup-text: null !default; +/// The border color of the Menu popup. +/// @group menu +$kendo-menu-popup-border: null !default; +/// The background gradient of the Menu popup. +/// @group menu +$kendo-menu-popup-gradient: null !default; + + +// Menu popup item + +/// The horizontal padding of the Menu item in popup. +/// @group menu +$kendo-menu-popup-item-padding-x: null !default; +$kendo-menu-popup-sm-item-padding-x: null !default; +$kendo-menu-popup-md-item-padding-x: null !default; +$kendo-menu-popup-lg-item-padding-x: null !default; + +/// The vertical padding of the Menu item in popup. +/// @group menu +$kendo-menu-popup-item-padding-y: null !default; +$kendo-menu-popup-sm-item-padding-y: null !default; +$kendo-menu-popup-md-item-padding-y: null !default; +$kendo-menu-popup-lg-item-padding-y: null !default; + +/// The end padding of the Menu item in popup. +/// @group menu +$kendo-menu-popup-item-padding-end: null !default; +$kendo-menu-popup-sm-item-padding-end: null !default; +$kendo-menu-popup-md-item-padding-end: null !default; +$kendo-menu-popup-lg-item-padding-end: null !default; + +/// The start margin of the Menu item expand icon. +/// @group menu +$kendo-menu-popup-sm-item-icon-margin-start: null !default; +$kendo-menu-popup-md-item-icon-margin-start: null !default; +$kendo-menu-popup-lg-item-icon-margin-start: null !default; + +/// The end margin of the Menu item expand icon. +/// @group menu +$kendo-menu-popup-sm-item-icon-margin-end: null !default; +$kendo-menu-popup-md-item-icon-margin-end: null !default; +$kendo-menu-popup-lg-item-icon-margin-end: null !default; + +/// The spacing between the Menu items in popup. +/// @group menu +$kendo-menu-popup-item-spacing: null !default; + +/// The background color of the Menu item in popup. +/// @group menu +$kendo-menu-popup-item-bg: null !default; +/// The text color of the Menu item in popup. +/// @group menu +$kendo-menu-popup-item-text: null !default; +/// The border color of the Menu item in popup. +/// @group menu +$kendo-menu-popup-item-border: null !default; +/// The background gradient of the Menu item in popup. +/// @group menu +$kendo-menu-popup-item-gradient: null !default; + +/// The background color of hovered Menu item in popup. +/// @group menu +$kendo-menu-popup-item-hover-bg: null !default; +/// The text color of hovered Menu item in popup. +/// @group menu +$kendo-menu-popup-item-hover-text: null !default; +/// The border color of hovered Menu item in popup. +/// @group menu +$kendo-menu-popup-item-hover-border: null !default; +/// The background gradient of hovered Menu item in popup. +/// @group menu +$kendo-menu-popup-item-hover-gradient: null !default; + +/// The background color of active Menu item in popup. +/// @group menu +$kendo-menu-popup-item-active-bg: null !default; +/// The text color of active Menu item in popup. +/// @group menu +$kendo-menu-popup-item-active-text: null !default; +/// The border color of active Menu item in popup. +/// @group menu +$kendo-menu-popup-item-active-border: null !default; +/// The background gradient of active Menu item in popup. +/// @group menu +$kendo-menu-popup-item-active-gradient: null !default; + +/// The base shadow of focused Menu item in popup. +/// @group menu +$kendo-menu-popup-item-focus-shadow: null !default; diff --git a/packages/core/scss/components/messagebox/_index.scss b/packages/core/scss/components/messagebox/_index.scss new file mode 100644 index 00000000000..8a090ec256c --- /dev/null +++ b/packages/core/scss/components/messagebox/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-messagebox--styles() { + @include import-once( "messagebox" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-messagebox--layout(); + @include kendo-messagebox--theme(); + } +} diff --git a/packages/core/scss/components/messagebox/_layout.scss b/packages/core/scss/components/messagebox/_layout.scss new file mode 100644 index 00000000000..1cfd4d41533 --- /dev/null +++ b/packages/core/scss/components/messagebox/_layout.scss @@ -0,0 +1,28 @@ +@use "./_variables.scss" as *; + +@mixin kendo-messagebox--layout-base() { + + // Base + .k-messagebox { + margin: $kendo-message-box-margin; + padding-block: $kendo-message-box-padding-y; + padding-inline: $kendo-message-box-padding-x; + border-width: $kendo-message-box-border-width; + border-style: solid; + box-sizing: border-box; + font-size: $kendo-message-box-font-size; + line-height: $kendo-message-box-line-height; + + a { + color: inherit; + font-style: $kendo-message-box-link-font-style; + text-decoration: $kendo-message-box-link-text-decoration; + } + } + +} + + +@mixin kendo-messagebox--layout() { + @include kendo-messagebox--layout-base(); +} diff --git a/packages/core/scss/components/messagebox/_theme.scss b/packages/core/scss/components/messagebox/_theme.scss new file mode 100644 index 00000000000..af1c3cf7f6f --- /dev/null +++ b/packages/core/scss/components/messagebox/_theme.scss @@ -0,0 +1,34 @@ + +@use "../../functions/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "./_variables.scss" as *; +@use "../../_variables.scss" as *; + +@mixin kendo-messagebox--theme-base() { + + @each $color-name, $color in $kendo-theme-colors { + .k-messagebox-#{$color-name} { + @if $color-name == "inverse" { + @include fill( + if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), + if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), + if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level )) + ); + } @else { + @include fill( + if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), + if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), + if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level )) + ); + } + } + } + +} + + +@mixin kendo-messagebox--theme() { + @include kendo-messagebox--theme-base(); +} diff --git a/packages/core/scss/components/messagebox/_variables.scss b/packages/core/scss/components/messagebox/_variables.scss new file mode 100644 index 00000000000..b1d9d8cf1d4 --- /dev/null +++ b/packages/core/scss/components/messagebox/_variables.scss @@ -0,0 +1,15 @@ +// Message box +$kendo-message-box-margin: null !default; +$kendo-message-box-padding-x: null !default; +$kendo-message-box-padding-y: null !default; +$kendo-message-box-border-width: null !default; + +$kendo-message-box-font-size: null !default; +$kendo-message-box-line-height: null !default; + +$kendo-message-box-bg-level: null !default; +$kendo-message-box-text-level: null !default; +$kendo-message-box-border-level: null !default; + +$kendo-message-box-link-font-style: null !default; +$kendo-message-box-link-text-decoration: null !default; diff --git a/packages/core/scss/components/multiselect/_index.scss b/packages/core/scss/components/multiselect/_index.scss new file mode 100644 index 00000000000..0385b6f23a1 --- /dev/null +++ b/packages/core/scss/components/multiselect/_index.scss @@ -0,0 +1,30 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../chip/_index.scss" as *; +@use "../floating-label/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-multiselect--styles() { + @include import-once( "multiselect" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-input--styles(); + @include kendo-chip--styles(); + @include kendo-floating-label--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-icon--styles(); + @include kendo-multiselect--layout(); + @include kendo-multiselect--theme(); + } +} diff --git a/packages/core/scss/components/multiselect/_layout.scss b/packages/core/scss/components/multiselect/_layout.scss new file mode 100644 index 00000000000..0e8b506a1ae --- /dev/null +++ b/packages/core/scss/components/multiselect/_layout.scss @@ -0,0 +1,11 @@ +@mixin kendo-multiselect--layout-base() { + + // Multiselect + .k-multiselect {} + +} + + +@mixin kendo-multiselect--layout() { + @include kendo-multiselect--layout-base(); +} diff --git a/packages/core/scss/components/multiselect/_theme.scss b/packages/core/scss/components/multiselect/_theme.scss new file mode 100644 index 00000000000..7c90de4106d --- /dev/null +++ b/packages/core/scss/components/multiselect/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-multiselect--theme-base() { + + // Multiselect + .k-multiselect {} + +} + + +@mixin kendo-multiselect--theme() { + @include kendo-multiselect--theme-base(); +} diff --git a/packages/core/scss/components/multiselect/_variables.scss b/packages/core/scss/components/multiselect/_variables.scss new file mode 100644 index 00000000000..ae5ad09d52b --- /dev/null +++ b/packages/core/scss/components/multiselect/_variables.scss @@ -0,0 +1 @@ +// Multiselect diff --git a/packages/core/scss/components/no-data/_index.scss b/packages/core/scss/components/no-data/_index.scss new file mode 100644 index 00000000000..0a1fa750ee5 --- /dev/null +++ b/packages/core/scss/components/no-data/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-no-data--styles() { + @include import-once( "no-data" ) { + @include core-styles(); + @include kendo-no-data--layout(); + @include kendo-no-data--theme(); + } +} diff --git a/packages/core/scss/components/no-data/_layout.scss b/packages/core/scss/components/no-data/_layout.scss new file mode 100644 index 00000000000..1d9a4e3c349 --- /dev/null +++ b/packages/core/scss/components/no-data/_layout.scss @@ -0,0 +1,26 @@ +@use "./variables.scss" as *; + +@mixin kendo-no-data--layout-base() { + + .k-no-data { + min-height: $kendo-no-data-min-height; + display: flex; + align-items: center; + justify-content: center; + font-weight: lighter; + text-align: center; + white-space: normal; + } + + + // Alias + .k-nodata { + @extend .k-no-data !optional; + } + + +} + +@mixin kendo-no-data--layout() { + @include kendo-no-data--layout-base(); +} diff --git a/packages/core/scss/components/no-data/_theme.scss b/packages/core/scss/components/no-data/_theme.scss new file mode 100644 index 00000000000..1b1dcdf85e3 --- /dev/null +++ b/packages/core/scss/components/no-data/_theme.scss @@ -0,0 +1,14 @@ +@use "./variables.scss" as *; + +@mixin kendo-no-data--theme-base() { + + .k-no-data { + color: $kendo-no-data-text; + } + +} + + +@mixin kendo-no-data--theme() { + @include kendo-no-data--theme-base(); +} diff --git a/packages/core/scss/components/no-data/_variables.scss b/packages/core/scss/components/no-data/_variables.scss new file mode 100644 index 00000000000..402342d97e7 --- /dev/null +++ b/packages/core/scss/components/no-data/_variables.scss @@ -0,0 +1,7 @@ +/// The minimum height of the 'No Data' text container. +/// @group no-data +$kendo-no-data-min-height: null !default; + +/// The color of the 'No Data' text. +/// @group no-data +$kendo-no-data-text: null !default; diff --git a/packages/core/scss/components/notification/_index.scss b/packages/core/scss/components/notification/_index.scss new file mode 100644 index 00000000000..3211a336c69 --- /dev/null +++ b/packages/core/scss/components/notification/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../popup/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-notification--styles() { + @include import-once( "notification" ) { + @include core-styles(); + @include kendo-popup--styles(); + @include kendo-icon--styles(); + @include kendo-notification--layout(); + @include kendo-notification--theme(); + } +} diff --git a/packages/core/scss/components/notification/_layout.scss b/packages/core/scss/components/notification/_layout.scss new file mode 100644 index 00000000000..34b4b7ff73a --- /dev/null +++ b/packages/core/scss/components/notification/_layout.scss @@ -0,0 +1,79 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-notification--layout-base() { + + // Base + .k-notification-group { + max-height: 100%; + display: inline-flex; + flex-flow: column-reverse wrap; + position: fixed; + z-index: 1000; + gap: $kendo-notification-group-gap 0; + } + + // Needed due to the specifics in the implementation of animations in Angular + .k-notification-container-animating { + overflow: hidden; + } + + .k-notification { + @include border-radius( $kendo-notification-border-radius ); + padding-block: $kendo-notification-padding-y; + padding-inline: $kendo-notification-padding-x; + border-width: $kendo-notification-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-notification-font-family; + font-size: $kendo-notification-font-size; + line-height: $kendo-notification-line-height; + cursor: default; + position: relative; + display: flex; + align-items: center; + justify-content: center; + gap: $kendo-notification-icon-spacing; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + > .k-notification-content { + flex: 1 1 auto; + } + + > .k-notification-status { + flex-shrink: 0; + } + } + + .k-notification-actions { + flex: none; + display: flex; + gap: $kendo-notification-icon-spacing; + flex-flow: row nowrap; + align-items: center; + align-self: center; + cursor: pointer; + } + .k-notification-action { + flex: none; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-self: center; + } + +} + + +@mixin kendo-notification--layout() { + @include kendo-notification--layout-base(); +} diff --git a/packages/core/scss/components/notification/_theme.scss b/packages/core/scss/components/notification/_theme.scss new file mode 100644 index 00000000000..3374699259d --- /dev/null +++ b/packages/core/scss/components/notification/_theme.scss @@ -0,0 +1,32 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-notification--theme-base() { + + // Theme + .k-notification { + @include fill( + $kendo-notification-text, + $kendo-notification-bg, + $kendo-notification-border + ); + @include box-shadow( $kendo-notification-shadow ); + } + + @each $name, $props in $kendo-notification-theme { + .k-notification-#{$name} { + @include fill( + map.get( $props, color ), + map.get( $props, background-color ), + map.get( $props, border ) + ); + } + } + +} + + +@mixin kendo-notification--theme() { + @include kendo-notification--theme-base(); +} diff --git a/packages/core/scss/components/notification/_variables.scss b/packages/core/scss/components/notification/_variables.scss new file mode 100644 index 00000000000..b24f52c5585 --- /dev/null +++ b/packages/core/scss/components/notification/_variables.scss @@ -0,0 +1,64 @@ +// Notification + +/// The row-gap between the elements in the Notification group. +/// @group notification +$kendo-notification-group-gap: null !default; + +/// The horizontal padding of the Notification. +/// @group notification +$kendo-notification-padding-x: null !default; +/// The vertical padding of the Notification. +/// @group notification +$kendo-notification-padding-y: null !default; +/// The width of the border around the Notification. +/// @group notification +$kendo-notification-border-width: null !default; +/// The border radius of the Notification. +/// @group notification +$kendo-notification-border-radius: k-border-radius(md)!default; +/// The font family of the Notification. +/// @group notification +$kendo-notification-font-family: null !default; +/// The font size of the Notification. +/// @group notification +$kendo-notification-font-size: null !default; +/// The line height of the Notification. +/// @group notification +$kendo-notification-line-height: null !default; +/// The background color of the Notification. +/// @group notification +$kendo-notification-bg: null !default; +/// The text color of the Notification. +/// @group notification +$kendo-notification-text: null !default; +/// The border color of the Notification. +/// @group notification +$kendo-notification-border: null !default; +/// The box shadow of the Notification. +/// @group notification +$kendo-notification-shadow: null !default; + +/// The horizontal spacing of the Notification icon. +/// @group notification +$kendo-notification-icon-spacing: null !default; + +@function notification-theme( $colors ) { + $_theme: (); + + @each $name, $color in $colors { + $_theme: map.merge(( $name: ( + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + background-color: $color, + border: $color, + )), $_theme ); + } + + @return $_theme; +} + +/// The theme colors map for the Notification. +/// @group notification +$kendo-notification-theme-colors: null !default; +/// The generated theme colors map for the Notification. +/// @group notification +$kendo-notification-theme: null !default; diff --git a/packages/core/scss/components/numerictextbox/_index.scss b/packages/core/scss/components/numerictextbox/_index.scss new file mode 100644 index 00000000000..725bb6b26d8 --- /dev/null +++ b/packages/core/scss/components/numerictextbox/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-numeric-textbox--styles() { + @include import-once( "numeric-textbox" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-icon--styles(); + @include kendo-numeric-textbox--layout(); + @include kendo-numeric-textbox--theme(); + } +} diff --git a/packages/core/scss/components/numerictextbox/_layout.scss b/packages/core/scss/components/numerictextbox/_layout.scss new file mode 100644 index 00000000000..20de66bd45e --- /dev/null +++ b/packages/core/scss/components/numerictextbox/_layout.scss @@ -0,0 +1,15 @@ +@mixin kendo-numeric-textbox--layout-base() { + + // Numeric textbox + .k-numeric-textbox {} + + + // Alias + .k-numerictextbox { @extend .k-numeric-textbox !optional; } + +} + + +@mixin kendo-numeric-textbox--layout() { + @include kendo-numeric-textbox--layout-base(); +} diff --git a/packages/core/scss/components/numerictextbox/_theme.scss b/packages/core/scss/components/numerictextbox/_theme.scss new file mode 100644 index 00000000000..573910390a9 --- /dev/null +++ b/packages/core/scss/components/numerictextbox/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-numeric-textbox--theme-base() { + + // Numeric textbox + .k-numeric-textbox {} + +} + + +@mixin kendo-numeric-textbox--theme() { + @include kendo-numeric-textbox--theme-base(); +} diff --git a/packages/core/scss/components/numerictextbox/_variables.scss b/packages/core/scss/components/numerictextbox/_variables.scss new file mode 100644 index 00000000000..2a650c84ecf --- /dev/null +++ b/packages/core/scss/components/numerictextbox/_variables.scss @@ -0,0 +1 @@ +// Numeric Textbox diff --git a/packages/core/scss/components/orgchart/_index.scss b/packages/core/scss/components/orgchart/_index.scss new file mode 100644 index 00000000000..f40d6950d8d --- /dev/null +++ b/packages/core/scss/components/orgchart/_index.scss @@ -0,0 +1,37 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../forms/_index.scss" as *; +@use "../textbox/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../upload/_index.scss" as *; +@use "../menu/_index.scss" as *; +@use "../card/_index.scss" as *; +@use "../window/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-orgchart--styles() { + @include import-once( "orgchart" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-form--styles(); + @include kendo-textbox--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-upload--styles(); + @include kendo-menu--styles(); + @include kendo-card--styles(); + @include kendo-window--styles(); + @include kendo-orgchart--layout(); + @include kendo-orgchart--theme(); + @include kendo-utils--layout--overflow(); + @include kendo-utils--layout--position(); + @include kendo-utils--flex-grid--align-items(); + @include kendo-utils--flex-grid--justify-content(); + } +} diff --git a/packages/core/scss/components/orgchart/_layout.scss b/packages/core/scss/components/orgchart/_layout.scss new file mode 100644 index 00000000000..3c828e61e9e --- /dev/null +++ b/packages/core/scss/components/orgchart/_layout.scss @@ -0,0 +1,117 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-orgchart--layout-base() { + + // OrgChart + .k-orgchart { + width: 100%; + padding-block: $kendo-orgchart-padding-x; + padding-inline: $kendo-orgchart-padding-y; + box-sizing: border-box; + font-size: $kendo-orgchart-font-size; + font-family: $kendo-orgchart-font-family; + line-height: $kendo-orgchart-line-height; + overflow: auto; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + .k-orgchart-container { + margin-block: 0; + margin-inline: auto; + width: 100%; + height: 100%; + position: relative; + } + + // Nodes + .k-orgchart-group { + gap: $kendo-orgchart-group-gap; + } + + .k-orgchart-group.k-vstack > .k-orgchart-node-container { + gap: 0; + } + + .k-orgchart-node-container { + gap: $kendo-orgchart-node-gap; + } + + .k-orgchart-node-group-container { + @include border-radius( $kendo-orgchart-node-group-border-radius ); + padding-block: $kendo-orgchart-node-group-padding-y; + padding-inline: $kendo-orgchart-node-group-padding-x; + border-width: $kendo-orgchart-node-group-border-width; + border-style: solid; + outline: 0; + } + + .k-orgchart-node-group-title { + margin: 0 0 $kendo-orgchart-node-group-title-margin-bottom; + font-size: $kendo-orgchart-node-group-title-font-size; + line-height: $kendo-orgchart-node-group-title-line-height; + } + + .k-orgchart-node-group-subtitle { + margin: 0 0 $kendo-orgchart-node-group-subtitle-margin-bottom; + font-size: $kendo-orgchart-node-group-subtitle-font-size; + } + + // Card + .k-orgchart-card { + width: $kendo-orgchart-card-width; + border-width: $kendo-orgchart-card-border-width; + + .k-card-title { + margin: 0 0 $kendo-orgchart-card-title-margin-bottom; + font-size: $kendo-orgchart-card-title-font-size; + } + + .k-card-subtitle { + margin: 0 0 $kendo-orgchart-card-subtitle-margin-bottom; + font-size: $kendo-orgchart-card-subtitle-font-size; + } + + .k-card-body { + border-width: $kendo-orgchart-card-body-border-width; + border-style: solid; + flex-grow: 0; + } + .k-card-body .k-card-title-wrap { + margin: 0 $kendo-orgchart-card-body-vbox-margin-right 0 0; + min-width: 0; + min-height: $kendo-orgchart-card-body-vbox-min-height; + } + } + + // Lines + .k-orgchart-line { + background-color: currentColor; + } + + .k-orgchart-line-h { + height: $kendo-orgchart-line-size; + } + + .k-orgchart-line-v { + margin-block: 0; + margin-inline: auto; + width: $kendo-orgchart-line-size; + height: $kendo-orgchart-line-v-height; + } + + // Buttons + .k-orgchart-button { + z-index: 1; + } +} + + +@mixin kendo-orgchart--layout() { + @include kendo-orgchart--layout-base(); +} diff --git a/packages/core/scss/components/orgchart/_theme.scss b/packages/core/scss/components/orgchart/_theme.scss new file mode 100644 index 00000000000..5ed678b063b --- /dev/null +++ b/packages/core/scss/components/orgchart/_theme.scss @@ -0,0 +1,58 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-orgchart--theme-base() { + + // OrgChart + .k-orgchart { + @include fill ( + $kendo-orgchart-text, + $kendo-orgchart-bg, + $kendo-orgchart-border + ); + } + + // Card + .k-orgchart-card { + @include box-shadow( $kendo-orgchart-card-shadow ); + + .k-card-body { + @include fill( $border: $kendo-orgchart-card-body-border-color ); + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-orgchart-card-focus-shadow ); + } + } + + // Group + .k-orgchart-node-group-container { + @include fill ( + $kendo-orgchart-node-group-text, + $kendo-orgchart-node-group-bg, + $kendo-orgchart-node-group-border + ); + } + .k-orgchart-node-group-container:focus, + .k-orgchart-node-group-container.k-focus { + @include focus-indicator( $kendo-orgchart-node-group-focus-shadow ); + @include fill ( $border: $kendo-orgchart-node-group-focus-border ); + } + + .k-orgchart-node-group-subtitle { + @include fill( $color: $kendo-orgchart-node-group-subtitle-text ); + } + + // Lines + .k-orgchart-line-h, + .k-orgchart-line-v { + @include fill( $color: $kendo-orgchart-line-fill ); + } + +} + + +@mixin kendo-orgchart--theme() { + @include kendo-orgchart--theme-base(); +} diff --git a/packages/core/scss/components/orgchart/_variables.scss b/packages/core/scss/components/orgchart/_variables.scss new file mode 100644 index 00000000000..67f1fc021ef --- /dev/null +++ b/packages/core/scss/components/orgchart/_variables.scss @@ -0,0 +1,146 @@ +// Orgchart + +/// The spacing index of the OrgChart. +/// @group orgchart +$kendo-orgchart-spacer: null !default; +/// The vertical padding of the OrgChart. +/// @group orgchart +$kendo-orgchart-padding-y: null !default; +/// The horizontal padding of the OrgChart. +/// @group orgchart +$kendo-orgchart-padding-x: null !default; +/// The font family of the OrgChart. +/// @group orgchart +$kendo-orgchart-font-family: null !default; +/// The font size of the OrgChart. +/// @group orgchart +$kendo-orgchart-font-size: null !default; +/// The line height of the OrgChart. +/// @group orgchart +$kendo-orgchart-line-height: null !default; +/// The background color of the OrgChart. +/// @group orgchart +$kendo-orgchart-bg: null !default; +/// The text color of the OrgChart. +/// @group orgchart +$kendo-orgchart-text: null !default; +/// The border color of the OrgChart. +/// @group orgchart +$kendo-orgchart-border: null !default; + +/// The spacing of the OrgChart node. +/// @group orgchart +$kendo-orgchart-node-gap: null !default; +/// The spacing of the OrgChart group. +/// @group orgchart +$kendo-orgchart-group-gap: null !default; +/// The spacing of the OrgChart node container. +/// @group orgchart +$kendo-orgchart-node-container-gap: null !default; + +/// The vertical padding of the OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-padding-y: null !default; +/// The horizontal padding of the OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-padding-x: null !default; +/// The border width of the OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-border-width: null !default; +/// The border radius of the OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-border-radius: null !default; +/// The background color of the OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-bg: null !default; +/// The text color of the OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-text: null !default; +/// The border color of the OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-border: null !default; + +/// The border color of the focused OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-focus-border: null !default; +/// The shadow of the focused OrgChart node group. +/// @group orgchart +$kendo-orgchart-node-group-focus-shadow: null !default; + +/// The font size of the OrgChart node group title. +/// @group orgchart +$kendo-orgchart-node-group-title-font-size: null !default; +/// The bottom margin of the OrgChart node group title. +/// @group orgchart +$kendo-orgchart-node-group-title-margin-bottom: null !default; +/// The line height of the OrgChart node group title. +/// @group orgchart +$kendo-orgchart-node-group-title-line-height: null !default; + +/// The font size of the OrgChart node group subtitle. +/// @group orgchart +$kendo-orgchart-node-group-subtitle-font-size: null !default; +/// The bottom margin of the OrgChart node group subtitle. +/// @group orgchart +$kendo-orgchart-node-group-subtitle-margin-bottom: null !default; +/// The line height of the OrgChart node group subtitle. +/// @group orgchart +$kendo-orgchart-node-group-subtitle-text: null !default; + +/// The width of the OrgChart Card. +/// @group orgchart +$kendo-orgchart-card-width: null !default; +/// The vertical padding of the OrgChart Card. +/// @group orgchart +$kendo-orgchart-card-padding-y: null !default; +/// The horizontal padding of the OrgChart Card. +/// @group orgchart +$kendo-orgchart-card-padding-x: null !default; +/// The border width of the OrgChart Card. +/// @group orgchart +$kendo-orgchart-card-border-width: null !default; +/// The shadow of the OrgChart Card. +/// @group orgchart +$kendo-orgchart-card-shadow: null !default; +/// The shadow of the focused OrgChart Card. +/// @group orgchart +$kendo-orgchart-card-focus-shadow: null !default; + +/// The bottom margin of the OrgChart Card title. +/// @group orgchart +$kendo-orgchart-card-title-margin-bottom: null !default; +/// The font size of the OrgChart Card title. +/// @group orgchart +$kendo-orgchart-card-title-font-size: null !default; + +/// The bottom margin of the OrgChart Card subtitle. +/// @group orgchart +$kendo-orgchart-card-subtitle-margin-bottom: null !default; +/// The font size of the OrgChart Card subtitle. +/// @group orgchart +$kendo-orgchart-card-subtitle-font-size: null !default; + +/// The border width of the OrgChart Card body. +/// @group orgchart +$kendo-orgchart-card-body-border-width: null !default; +/// The border color of the OrgChart Card body. +/// @group orgchart +$kendo-orgchart-card-body-border-color: null !default; + +/// The right margin of the OrgChart Card body title wrap. +/// @group orgchart +$kendo-orgchart-card-body-vbox-margin-right: null !default; +/// The min height of the OrgChart Card body title wrap. +/// @group orgchart +$kendo-orgchart-card-body-vbox-min-height: null !default; + +/// The size of the OrgChart connecting line. +/// @group orgchart +$kendo-orgchart-line-size: null !default; +/// The fill color of the OrgChart connecting line. +/// @group orgchart +$kendo-orgchart-line-fill: null !default; + +/// The height of the OrgChart connecting line. +/// @group orgchart +$kendo-orgchart-line-v-height: null !default; diff --git a/packages/core/scss/components/otp/_index.scss b/packages/core/scss/components/otp/_index.scss new file mode 100644 index 00000000000..98417283cff --- /dev/null +++ b/packages/core/scss/components/otp/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-otp--styles() { + @include import-once( "otp" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-otp--layout(); + @include kendo-otp--theme(); + } +} diff --git a/packages/core/scss/components/otp/_layout.scss b/packages/core/scss/components/otp/_layout.scss new file mode 100644 index 00000000000..8e9a55e9ce2 --- /dev/null +++ b/packages/core/scss/components/otp/_layout.scss @@ -0,0 +1,41 @@ +@use "sass:map"; +@use "./_variables.scss" as *; + +@use "../input/_variables.scss" as *; + +@mixin kendo-otp--layout-base() { + // OTP + .k-otp { + display: flex; + width: min-content; + align-items: center; + flex-direction: row; + + .k-otp-input > .k-input-inner { + text-align: center; + padding-inline: 0; + } + } + + @each $size, $size-props in $kendo-otp-sizes { + $_gap: map.get($size-props, gap); + $_separator-padding-x: map.get($size-props, separator-padding-x); + $_input-width: map.get($size-props, input-width); + + .k-otp-#{$size} { + gap: $_gap; + + .k-otp-input { + min-width: $_input-width; + } + + .k-otp-separator:not(:empty) { + padding-inline: $_separator-padding-x; + } + } + } +} + +@mixin kendo-otp--layout() { + @include kendo-otp--layout-base(); +} diff --git a/packages/core/scss/components/otp/_theme.scss b/packages/core/scss/components/otp/_theme.scss new file mode 100644 index 00000000000..8da3afa067f --- /dev/null +++ b/packages/core/scss/components/otp/_theme.scss @@ -0,0 +1,12 @@ +@use "sass:map"; + +@mixin kendo-otp--theme-base() { + + // OTP + .k-otp {}; + +} + +@mixin kendo-otp--theme() { + @include kendo-otp--theme-base(); +} diff --git a/packages/core/scss/components/otp/_variables.scss b/packages/core/scss/components/otp/_variables.scss new file mode 100644 index 00000000000..39ec681abfb --- /dev/null +++ b/packages/core/scss/components/otp/_variables.scss @@ -0,0 +1,42 @@ +// OTP + +/// The gap between the items in the OTP. +/// @group one-time-password +$kendo-otp-gap: null !default; +/// The gap between the items in the small OTP. +/// @group one-time-password +$kendo-otp-sm-gap: null !default; +/// The gap between the items in the medium OTP. +/// @group one-time-password +$kendo-otp-md-gap: null !default; +/// The gap between the items in the large OTP. +/// @group one-time-password +$kendo-otp-lg-gap: null !default; + +/// The horizontal padding of the OTP separator. +/// @group one-time-password +$kendo-otp-separator-padding-x: null !default; +/// The horizontal padding of the small OTP separator. +/// @group one-time-password +$kendo-otp-sm-separator-padding-x: null !default; +/// The horizontal padding of the medium OTP separator. +/// @group one-time-password +$kendo-otp-md-separator-padding-x: null !default; +/// The horizontal padding of the large OTP separator. +/// @group one-time-password +$kendo-otp-lg-separator-padding-x: null !default; + +/// The horizontal padding of the OTP separator. +/// @group one-time-password +$kendo-otp-input-width: null !default; +/// The horizontal padding of the small OTP separator. +/// @group one-time-password +$kendo-otp-sm-input-width: null !default; +/// The horizontal padding of the medium OTP separator. +/// @group one-time-password +$kendo-otp-md-input-width: null !default; +/// The horizontal padding of the large OTP separator. +/// @group one-time-password +$kendo-otp-lg-input-width: null !default; + +$kendo-otp-sizes: null !default; diff --git a/packages/core/scss/components/overlay/_index.scss b/packages/core/scss/components/overlay/_index.scss new file mode 100644 index 00000000000..f13fa0d6af6 --- /dev/null +++ b/packages/core/scss/components/overlay/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-overlay--styles() { + @include import-once( "overlay" ) { + @include core-styles(); + @include kendo-overlay--layout(); + @include kendo-overlay--theme(); + } +} diff --git a/packages/core/scss/components/overlay/_layout.scss b/packages/core/scss/components/overlay/_layout.scss new file mode 100644 index 00000000000..70ae9a41264 --- /dev/null +++ b/packages/core/scss/components/overlay/_layout.scss @@ -0,0 +1,21 @@ +@use "./_variables.scss" as *; + +@mixin kendo-overlay--layout-base() { + + // Overlay + .k-overlay { + width: 100%; + height: 100%; + opacity: $kendo-overlay-opacity; + position: fixed; + top: 0; + left: 0; + z-index: 10001; + } + +} + + +@mixin kendo-overlay--layout() { + @include kendo-overlay--layout-base(); +} diff --git a/packages/core/scss/components/overlay/_theme.scss b/packages/core/scss/components/overlay/_theme.scss new file mode 100644 index 00000000000..3b098fd4765 --- /dev/null +++ b/packages/core/scss/components/overlay/_theme.scss @@ -0,0 +1,22 @@ +@use "./_variables.scss" as *; + +@mixin kendo-overlay--theme-base() { + + // Overlay + .k-overlay { + background-color: $kendo-overlay-bg; + } + + + @each $name, $color in $kendo-overlay-theme-colors { + .k-overlay-#{$name} { + background-color: $color; + } + } + +} + + +@mixin kendo-overlay--theme() { + @include kendo-overlay--theme-base(); +} diff --git a/packages/core/scss/components/overlay/_variables.scss b/packages/core/scss/components/overlay/_variables.scss new file mode 100644 index 00000000000..ee63fe7f55b --- /dev/null +++ b/packages/core/scss/components/overlay/_variables.scss @@ -0,0 +1,4 @@ +$kendo-overlay-theme-colors: null !default; + +$kendo-overlay-bg: null !default; +$kendo-overlay-opacity: null !default; diff --git a/packages/core/scss/components/pager/_index.scss b/packages/core/scss/components/pager/_index.scss new file mode 100644 index 00000000000..59a6ea00a16 --- /dev/null +++ b/packages/core/scss/components/pager/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../button/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-pager--styles() { + @include import-once( "pager" ) { + @include core-styles(); + @include kendo-dropdown-list--styles(); + @include kendo-icon--styles(); + @include kendo-button--styles(); + @include kendo-pager--layout(); + @include kendo-pager--theme(); + } +} diff --git a/packages/core/scss/components/pager/_layout.scss b/packages/core/scss/components/pager/_layout.scss new file mode 100644 index 00000000000..b0db6d93dcf --- /dev/null +++ b/packages/core/scss/components/pager/_layout.scss @@ -0,0 +1,191 @@ +@use "sass:map"; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-pager--layout-base() { + + .k-pager { + padding: 0; + border-width: $kendo-pager-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-pager-font-family; + font-size: $kendo-pager-font-size; + line-height: $kendo-pager-line-height; + white-space: nowrap; + display: flex; + align-items: center; + position: relative; + overflow: hidden; + cursor: default; + flex: 0 0 auto; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Base pager section + %base-pager-section { + display: flex; + flex-direction: row; + align-items: center; + } + + + // Base pager item + %base-pager-item { + color: inherit; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + + &:hover { + z-index: 2; + } + &.k-disabled { + color: inherit; + } + } + + + // Pager items + .k-pager-nav { + @extend %base-pager-item !optional; + } + + + // Pager numbers + .k-pager-numbers-wrap { + display: flex; + flex-direction: row; + position: relative; + + select.k-dropdown-list { + width: $kendo-pager-md-dropdown-width; + } + } + .k-pager-numbers { + display: flex; + flex-direction: row; + + // Selected state + .k-selected { + cursor: inherit; + z-index: 2; + } + } + + + // Spacing between items + .k-pager-nav + .k-pager-nav, + .k-pager-nav + .k-pager-numbers-wrap, + .k-pager-numbers-wrap + .k-pager-nav { + @if ($kendo-pager-item-spacing) { + margin-left: $kendo-pager-item-spacing; + } + } + + .k-rtl, + [dir="rtl"] { + .k-pager-nav + .k-pager-nav, + .k-pager-nav + .k-pager-numbers-wrap, + .k-pager-numbers-wrap + .k-pager-nav { + @if ($kendo-pager-item-spacing) { + margin-left: 0; + margin-right: $kendo-pager-item-spacing; + } + } + } + + + // Pager input + .k-pager-input { + @extend %base-pager-section !optional; + gap: 1ex; + + .k-textbox, + .k-numerictextbox { + margin-block: 0; + width: $kendo-pager-input-width; + } + } + + + // Pager sizes + .k-pager-sizes { + @extend %base-pager-section !optional; + gap: 1ex; + + .k-input-inner, + .k-input-value-text { + text-overflow: clip; + } + } + + + // Pager info + .k-pager-info { + @extend %base-pager-section !optional; + text-align: end; + justify-content: flex-end; + flex: 1 1 0%; + order: 9; + } + + + // Pager refresh + .k-pager-refresh { + margin-inline-start: auto; + color: inherit; + order: 10; + } + + // Pager sizes + @each $size, $size-props in $kendo-pager-sizes { + $_padding-x: map.get($size-props, padding-x); + $_padding-y: map.get($size-props, padding-y); + $_item-group-spacing: map.get($size-props, item-group-spacing); + $_item-min-width: map.get($size-props, item-min-width); + $_pager-dropdown-width: map.get($size-props, pager-dropdown-width); + + .k-pager-#{$size} { + padding-inline: $_padding-x; + padding-block: $_padding-y; + gap: $_item-group-spacing; + + .k-pager-numbers-wrap { + .k-button { + min-width: $_item-min-width; + } + + .k-pager-input, + > select.k-dropdown-list { + margin-inline-start: $_item-group-spacing; + margin-inline-end: $_item-group-spacing; + } + } + + .k-pager-sizes { + .k-dropdown-list, + > select { + width: $_pager-dropdown-width; + } + } + } + } + +} + + +@mixin kendo-pager--layout() { + @include kendo-pager--layout-base(); +} diff --git a/packages/core/scss/components/pager/_theme.scss b/packages/core/scss/components/pager/_theme.scss new file mode 100644 index 00000000000..eb5a0a3a397 --- /dev/null +++ b/packages/core/scss/components/pager/_theme.scss @@ -0,0 +1,26 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-pager--theme-base() { + + // Pager + .k-pager { + @include fill( + $kendo-pager-text, + $kendo-pager-bg, + $kendo-pager-border + ); + + &:focus, + &.k-focus { + @include fill( $bg: $kendo-pager-focus-bg ); + @include focus-indicator( $kendo-pager-focus-shadow, true ); + } + } + +} + + +@mixin kendo-pager--theme() { + @include kendo-pager--theme-base(); +} diff --git a/packages/core/scss/components/pager/_variables.scss b/packages/core/scss/components/pager/_variables.scss new file mode 100644 index 00000000000..efe83c80d8d --- /dev/null +++ b/packages/core/scss/components/pager/_variables.scss @@ -0,0 +1,147 @@ +// Pager + +/// The horizontal padding of the Pager. +/// @group pager +$kendo-pager-padding-x: null !default; +/// The horizontal padding of the small Pager. +/// @group pager +$kendo-pager-sm-padding-x: null !default; +/// The horizontal padding of the medium Pager. +/// @group pager +$kendo-pager-md-padding-x: null !default; +/// The horizontal padding of the large Pager. +/// @group pager +$kendo-pager-lg-padding-x: null !default; +/// The vertical padding of the Pager. +/// @group pager +$kendo-pager-padding-y: null !default; +/// The vertical padding of the small Pager. +/// @group pager +$kendo-pager-sm-padding-y: null !default; +/// The vertical padding of the medium Pager. +/// @group pager +$kendo-pager-md-padding-y: null !default; +/// The vertical padding of the large Pager. +/// @group pager +$kendo-pager-lg-padding-y: null !default; + +/// The minimum width of the items in the small Pager. +/// @group pager +$kendo-pager-sm-item-min-width: null !default; +/// The minimum width of the items in the medium Pagers. +/// @group pager +$kendo-pager-md-item-min-width: null !default; +/// The minimum width of the items in the large Pagers. +/// @group pager +$kendo-pager-lg-item-min-width: null !default; + +/// The margin between the item groups in the small Pager. +/// @group pager +$kendo-pager-sm-item-group-spacing: null !default; +/// The margin between the item groups in the medium Pager. +/// @group pager +$kendo-pager-md-item-group-spacing: null !default; +/// The margin between the item groups in the large Pager. +/// @group pager +$kendo-pager-lg-item-group-spacing: null !default; + +/// The border width of the Pager. +/// @group pager +$kendo-pager-border-width: null !default; +/// The font family of the Pager. +/// @group pager +$kendo-pager-font-family: null !default; +/// The font size of the Pager. +/// @group pager +$kendo-pager-font-size: null !default; +/// The line height of the Pager. +/// @group pager +$kendo-pager-line-height: null !default; +/// The background color of the Pager. +/// @group pager +$kendo-pager-bg: null !default; +/// The text color of the Pager. +/// @group pager +$kendo-pager-text: null !default; +/// The border color of the Pager. +/// @group pager +$kendo-pager-border: null !default; + +/// The background color of the focused Pager. +/// @group pager +$kendo-pager-focus-bg: null !default; +/// The box shadow of the focused Pager. +/// @group pager +$kendo-pager-focus-shadow: null !default; +/// The spacing between the sections of the Pager. +/// @group pager +$kendo-pager-section-spacing: null !default; + +/// The border width of the Pager items. +/// @group pager +$kendo-pager-item-border-width: null !default; +/// The border radius of the Pager items. +/// @group pager +$kendo-pager-item-border-radius: null !default; +/// The spacing around the Pager items. +/// @group pager +$kendo-pager-item-spacing: null !default; +/// The background color of the Pager items. +/// @group pager +$kendo-pager-item-bg: null !default; +/// The text color of the Pager items. +/// @group pager +$kendo-pager-item-text: null !default; +/// The border color of the Pager items. +/// @group pager +$kendo-pager-item-border: null !default; + +/// The background color of the hovered Pager items. +/// @group pager +$kendo-pager-item-hover-bg: null !default; +/// The text color of the hovered Pager items. +/// @group pager +$kendo-pager-item-hover-text: null !default; +/// The border color of the hovered Pager items. +/// @group pager +$kendo-pager-item-hover-border: null !default; +/// The background color of the selected Pager items. +/// @group pager +$kendo-pager-item-selected-bg: null !default; +/// The text color of the selected Pager items. +/// @group pager +$kendo-pager-item-selected-text: null !default; +/// The border color of the selected Pager items. +/// @group pager +$kendo-pager-item-selected-border: null !default; +/// The opacity of the focused Pager items. +/// @group pager +$kendo-pager-item-focus-opacity: null !default; +/// The background color of the focused Pager items. +/// @group pager +$kendo-pager-item-focus-bg: null !default; +/// The box shadow of the focused Pager items. +/// @group pager +$kendo-pager-item-focus-shadow: null !default; + +/// The border radius of the Pager numbers. +/// @group pager +$kendo-pager-number-border-radius: null !default; + +/// The width of the Inputs in the Pager. +/// @group pager +$kendo-pager-input-width: null !default; + +/// The width of the DropDowns in the small Pager. +/// @group pager +$kendo-pager-sm-dropdown-width: null !default; +/// The width of the DropDowns in the medium Pager. +/// @group pager +$kendo-pager-md-dropdown-width: null !default; +/// The width of the DropDowns in the large Pager. +/// @group pager +$kendo-pager-lg-dropdown-width: null !default; + +/// The sizes map of the Pager. +/// @group pager +$kendo-pager-sizes: null !default; diff --git a/packages/core/scss/components/panel/_index.scss b/packages/core/scss/components/panel/_index.scss new file mode 100644 index 00000000000..2e7b03404d5 --- /dev/null +++ b/packages/core/scss/components/panel/_index.scss @@ -0,0 +1,17 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as*; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-panel--styles() { + @include import-once( "panel" ) { + @include core-styles(); + @include kendo-panel--layout(); + @include kendo-panel--theme(); + } +} diff --git a/packages/core/scss/components/panel/_layout.scss b/packages/core/scss/components/panel/_layout.scss new file mode 100644 index 00000000000..9ca505654b0 --- /dev/null +++ b/packages/core/scss/components/panel/_layout.scss @@ -0,0 +1,28 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-panel--layout--base() { + // Panels + .k-block, + .k-panel { + @include border-radius( $kendo-panel-border-radius ); + padding: 0; + border-width: $kendo-panel-border-width; + border-style: $kendo-panel-border-style; + box-sizing: border-box; + + > .k-header { + @include border-top-radius( $kendo-panel-border-radius ); + padding-inline: $kendo-panel-header-padding-inline; + padding-block: $kendo-panel-header-padding-block; + } + > .k-content { + padding-inline: $kendo-panel-content-padding-inline; + padding-block: $kendo-panel-content-padding-block; + } + } +} + +@mixin kendo-panel--layout() { + @include kendo-panel--layout--base(); +} diff --git a/packages/core/scss/components/panel/_theme.scss b/packages/core/scss/components/panel/_theme.scss new file mode 100644 index 00000000000..3254e6bd3c9 --- /dev/null +++ b/packages/core/scss/components/panel/_theme.scss @@ -0,0 +1,35 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-panel--theme--base() { + // Panels + .k-block, + .k-panel { + @include fill( + $kendo-panel-text, + $kendo-panel-bg, + $kendo-panel-border + ); + + > .k-header { + @include fill( + var( --kendo-component-text, #{$kendo-component-text} ), + var( --kendo-component-bg, #{$kendo-component-bg} ), + var( --kendo-component-border, #{$kendo-component-border} ) + ); + } + } + + :where(.k-content) { + @include fill( + $kendo-panel-text, + $kendo-panel-bg, + $kendo-panel-border + ); + } +} + +@mixin kendo-panel--theme() { + @include kendo-panel--theme--base(); +} diff --git a/packages/core/scss/components/panel/_variables.scss b/packages/core/scss/components/panel/_variables.scss new file mode 100644 index 00000000000..bc3a003fc82 --- /dev/null +++ b/packages/core/scss/components/panel/_variables.scss @@ -0,0 +1,33 @@ +/// The border radius of the Panel. +/// @group panel +$kendo-panel-border-radius: null !default; +/// The width of the border around the Panel. +/// @group panel +$kendo-panel-border-width: null !default; +/// The style of the border around the Panel. +/// @group panel +$kendo-panel-border-style: null !default; + +/// The inline padding of the Panel header. +/// @group panel +$kendo-panel-header-padding-inline: null !default; +/// The block padding of the Panel header. +/// @group panel +$kendo-panel-header-padding-block: null !default; + +/// The inline padding of the Panel content. +/// @group panel +$kendo-panel-content-padding-inline: null !default; +/// The block padding of the Panel content. +/// @group panel +$kendo-panel-content-padding-block: null !default; + +/// The text color of the Panel. +/// @group panel +$kendo-panel-text: null !default; +/// The background color of the Panel. +/// @group panel +$kendo-panel-bg: null !default; +/// The color of the border around the Panel. +/// @group panel +$kendo-panel-border: null !default; diff --git a/packages/core/scss/components/panelbar/_index.scss b/packages/core/scss/components/panelbar/_index.scss new file mode 100644 index 00000000000..fee5f8df83f --- /dev/null +++ b/packages/core/scss/components/panelbar/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-panelbar--styles() { + @include import-once( "panelbar" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-list--styles(); + @include kendo-panelbar--layout(); + @include kendo-panelbar--theme(); + } +} diff --git a/packages/core/scss/components/panelbar/_layout.scss b/packages/core/scss/components/panelbar/_layout.scss new file mode 100644 index 00000000000..44a834ffde4 --- /dev/null +++ b/packages/core/scss/components/panelbar/_layout.scss @@ -0,0 +1,147 @@ +@use "../../color-system/_constants.scss" as *; +@use "../icons/_variables.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-panelbar--layout-base() { + + // Base + .k-panelbar { + margin: 0; + padding: 0; + border-width: $kendo-panelbar-border-width; + border-style: $kendo-panelbar-border-style; + box-sizing: border-box; + outline: 0; + font-family: $kendo-panelbar-font-family; + font-size: $kendo-panelbar-font-size; + line-height: $kendo-panelbar-line-height; + list-style: none; + display: block; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + + // Root + > .k-panelbar-header { + // TODO + border-width: 0; + border-style: $kendo-panelbar-item-border-style; + border-color: inherit; + display: block; + + > .k-link { + padding-block: $kendo-panelbar-header-padding-y; + padding-inline: $kendo-panelbar-header-padding-x; + color: inherit; + background: none; + text-decoration: none; + font-weight: 500; + display: flex; + flex-flow: row nowrap; + gap: $kendo-icon-spacing; + align-items: center; + align-content: center; + position: relative; + user-select: none; + cursor: default; + transition: $kendo-transition; + } + } + > .k-panelbar-header + .k-panelbar-header { + border-top-width: $kendo-panelbar-item-border-width; + } + + + // Sub + .k-panelbar-group { + margin: 0; + padding: 0; + border-width: 0; + border-color: inherit; + color: inherit; + background-color: transparent; + list-style: none; + } + .k-panelbar-group > .k-panelbar-item { + display: block; + + > .k-link { + padding-block: $kendo-panelbar-item-padding-y; + padding-inline: $kendo-panelbar-item-padding-x; + color: inherit; + text-decoration: none; + display: flex; + flex-flow: row nowrap; + gap: $kendo-icon-spacing; + align-items: center; + align-content: center; + position: relative; + user-select: none; + cursor: default; + transition: $kendo-transition; + } + + // Hierarchy items + @for $i from 1 through $kendo-panelbar-item-level-count { + &.k-level-#{$i} { + .k-link { + padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} ); + } + } + } + } + + // Panelbar item + .k-panelbar-item { + outline-style: none; + } + + // Panelbar content + .k-panelbar-content { + display: flow-root; + } + + + // Toggle icon + .k-panelbar-expand, + .k-panelbar-collapse, + .k-panelbar-toggle { + margin-inline-start: auto; + } + .k-panelbar-group .k-panelbar-expand, + .k-panelbar-group .k-panelbar-collapse, + .k-panelbar-group .k-panelbar-toggle { + margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} ); + } + } + + .k-rtl .k-panelbar, + .k-panelbar.k-rtl, + .k-panelbar [dir = "rtl"] { + .k-panelbar-group > .k-panelbar-item { + // Hierarchy items + @for $i from 1 through $kendo-panelbar-item-level-count { + &.k-level-#{$i} { + .k-link { + padding-left: $kendo-panelbar-item-padding-x; + padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} ); + } + } + } + } + } + +} + + +@mixin kendo-panelbar--layout() { + @include kendo-panelbar--layout-base(); +} diff --git a/packages/core/scss/components/panelbar/_theme.scss b/packages/core/scss/components/panelbar/_theme.scss new file mode 100644 index 00000000000..825ae68c199 --- /dev/null +++ b/packages/core/scss/components/panelbar/_theme.scss @@ -0,0 +1,214 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-panelbar--theme-base() { + + // Panelbar + .k-panelbar { + @include fill( + $kendo-panelbar-text, + $kendo-panelbar-bg, + $kendo-panelbar-border + ); + + + // Root + > .k-panelbar-header { + + &.k-expanded.k-level-0 > .k-link { + @include fill( + $kendo-panelbar-header-expanded-text, + $kendo-panelbar-header-expanded-bg, + $kendo-panelbar-header-expanded-border, + $kendo-panelbar-header-expanded-gradient + ); + } + + // Normal + > .k-link { + @include fill( + $kendo-panelbar-header-text, + $kendo-panelbar-header-bg, + $kendo-panelbar-header-border, + $kendo-panelbar-header-gradient + ); + + .k-icon, + .k-panelbar-item-icon { + color: $kendo-panelbar-text; + } + } + + // Hover + > .k-link:hover, + > .k-link.k-hover { + @include fill( + $kendo-panelbar-header-hover-text, + $kendo-panelbar-header-hover-bg, + $kendo-panelbar-header-hover-border, + $kendo-panelbar-header-hover-gradient + ); + } + + // Focus + > .k-link:focus, + > .k-link.k-focus { + @include fill( + $kendo-panelbar-header-focus-text, + $kendo-panelbar-header-focus-bg, + $kendo-panelbar-header-focus-border, + $kendo-panelbar-header-focus-gradient + ); + @include focus-indicator( $kendo-panelbar-header-focus-shadow, true ); + } + + // Focus & Hover + > .k-link:focus:hover, + > .k-link.k-focus.k-hover { + @include fill( + $kendo-panelbar-header-hover-focus-text, + $kendo-panelbar-header-hover-focus-bg, + $kendo-panelbar-header-hover-focus-border, + $kendo-panelbar-header-hover-focus-gradient + ); + } + + // Selected + > .k-link.k-selected { + @include fill( + $kendo-panelbar-header-selected-text, + $kendo-panelbar-header-selected-bg, + $kendo-panelbar-header-selected-border, + $kendo-panelbar-header-selected-gradient + ); + + .k-icon, + .k-panelbar-item-icon { + color: inherit; + } + } + + // Selected Hover + > .k-link.k-selected:hover, + > .k-link.k-selected.k-hover { + @include fill( + $kendo-panelbar-header-selected-hover-text, + $kendo-panelbar-header-selected-hover-bg, + $kendo-panelbar-header-selected-hover-border, + $kendo-panelbar-header-selected-hover-gradient + ); + } + + // Selected Focus + > .k-link.k-selected:focus, + > .k-link.k-selected.k-focus { + @include fill( + $kendo-panelbar-header-selected-focus-text, + $kendo-panelbar-header-selected-focus-bg, + $kendo-panelbar-header-selected-focus-border, + $kendo-panelbar-header-selected-focus-gradient + ); + } + + // Selected Focus & Hover + > .k-link.k-selected:hover:focus, + > .k-link.k-selected.k-hover.k-focus { + @include fill( + $kendo-panelbar-header-selected-hover-focus-text, + $kendo-panelbar-header-selected-hover-focus-bg, + $kendo-panelbar-header-selected-hover-focus-border, + $kendo-panelbar-header-selected-hover-focus-gradient + ); + } + } + + + // Sub + .k-panelbar-group { + + // Hover + > .k-panelbar-item > .k-link:hover, + > .k-panelbar-item > .k-link.k-hover { + @include fill( + $kendo-panelbar-item-hover-text, + $kendo-panelbar-item-hover-bg, + $kendo-panelbar-item-hover-border, + $kendo-panelbar-item-hover-gradient + ); + } + + // Focus + > .k-panelbar-item > .k-link:focus, + > .k-panelbar-item > .k-link.k-focus { + @include fill( + $kendo-panelbar-item-focus-text, + $kendo-panelbar-item-focus-bg, + $kendo-panelbar-item-focus-border, + $kendo-panelbar-item-focus-gradient + ); + @include focus-indicator( $kendo-panelbar-item-focus-shadow, true ); + } + + // Focus & Hover + > .k-panelbar-item > .k-link:focus:hover, + > .k-panelbar-item > .k-link.k-focus.k-hover { + @include fill( + $kendo-panelbar-item-hover-focus-text, + $kendo-panelbar-item-hover-focus-bg, + $kendo-panelbar-item-hover-focus-border, + $kendo-panelbar-item-hover-focus-gradient + ); + } + + // Selected + > .k-panelbar-item > .k-link.k-selected { + @include fill( + $kendo-panelbar-item-selected-text, + $kendo-panelbar-item-selected-bg, + $kendo-panelbar-item-selected-border, + $kendo-panelbar-item-selected-gradient + ); + } + + // Selected Hover + > .k-panelbar-item > .k-link.k-selected:hover, + > .k-panelbar-item > .k-link.k-selected.k-hover { + @include fill( + $kendo-panelbar-item-selected-hover-text, + $kendo-panelbar-item-selected-hover-bg, + $kendo-panelbar-item-selected-hover-border, + $kendo-panelbar-item-selected-hover-gradient + ); + } + + // Selected Focus + > .k-panelbar-item > .k-link.k-selected:focus, + > .k-panelbar-item > .k-link.k-selected.k-focus { + @include fill( + $kendo-panelbar-item-selected-focus-text, + $kendo-panelbar-item-selected-focus-bg, + $kendo-panelbar-item-selected-focus-border, + $kendo-panelbar-item-selected-focus-gradient + ); + } + + // Selected Focus & Hover + > .k-panelbar-item > .k-link.k-selected:focus:hover, + > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover { + @include fill( + $kendo-panelbar-item-selected-hover-focus-text, + $kendo-panelbar-item-selected-hover-focus-bg, + $kendo-panelbar-item-selected-hover-focus-border, + $kendo-panelbar-item-selected-hover-focus-gradient + ); + } + } + + } + +} + + +@mixin kendo-panelbar--theme() { + @include kendo-panelbar--theme-base(); +} diff --git a/packages/core/scss/components/panelbar/_variables.scss b/packages/core/scss/components/panelbar/_variables.scss new file mode 100644 index 00000000000..58683af110e --- /dev/null +++ b/packages/core/scss/components/panelbar/_variables.scss @@ -0,0 +1,271 @@ +// Panelbar + +/// The horizontal padding of the PanelBar. +/// @group panelbar +$kendo-panelbar-padding-x: null !default; +/// The vertical padding of the PanelBar. +/// @group panelbar +$kendo-panelbar-padding-y: null !default; +/// The font family of the PanelBar. +/// @group panelbar +$kendo-panelbar-font-family: null !default; +/// The font size of the PanelBar. +/// @group panelbar +$kendo-panelbar-font-size: null !default; +/// The line height of the PanelBar. +/// @group panelbar +$kendo-panelbar-line-height: null !default; +/// The width of the border around the PanelBar. +/// @group panelbar +$kendo-panelbar-border-width: null !default; +/// The border style around the the PanelBar. +/// @group panelbar +$kendo-panelbar-border-style: null !default; +/// The width of the border around the PanelBar items. +/// @group panelbar +$kendo-panelbar-item-border-width: null !default; +/// The style of the border around the PanelBar items. +/// @group panelbar +$kendo-panelbar-item-border-style: null !default; + +/// The horizontal padding of the PanelBar header. +/// @group panelbar +$kendo-panelbar-header-padding-x: null !default; +/// The vertical padding of the PanelBar header. +/// @group panelbar +$kendo-panelbar-header-padding-y: null !default; + +/// The horizontal padding of the PanelBar items. +/// @group panelbar +$kendo-panelbar-item-padding-x: null !default; +/// The vertical padding of the PanelBar items. +/// @group panelbar +$kendo-panelbar-item-padding-y: null !default; + +/// The maximum nesting of the PanelBar items. +/// @group panelbar +$kendo-panelbar-item-level-count: null !default; + +/// The background color of the PanelBar. +/// @group panelbar +$kendo-panelbar-bg: null !default; +/// The text color of the PanelBar. +/// @group panelbar +$kendo-panelbar-text: null !default; +/// The border color of the PanelBar. +/// @group panelbar +$kendo-panelbar-border: null !default; + +/// The background color of the PanelBar header. +/// @group panelbar +$kendo-panelbar-header-bg: null !default; +/// The text color of the PanelBar header. +/// @group panelbar +$kendo-panelbar-header-text: null !default; +/// The border color of the PanelBar header. +/// @group panelbar +$kendo-panelbar-header-border: null !default; +/// The gradient of the PanelBar header. +/// @group panelbar +$kendo-panelbar-header-gradient: null !default; + +/// The background color of the hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-bg: null !default; +/// The text color of the hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-text: null !default; +/// The border color of the hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-border: null !default; +/// The gradient of the hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-gradient: null !default; + +/// The background color of the focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-focus-bg: null !default; +/// The text color of the focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-focus-text: null !default; +/// The border color of the focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-focus-border: null !default; +/// The gradient of the focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-focus-gradient: null !default; +/// The shadow of the focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-focus-shadow: null !default; + +/// The background color of the focused and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-focus-bg: null !default; +/// The text color of the focused and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-focus-text: null !default; +/// The border color of the focused and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-focus-border: null !default; +/// The gradient of the focused and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-hover-focus-gradient: null !default; + +/// The background color of the selected PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-bg: null !default; +/// The text color of the selected PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-text: null !default; +/// The border color of the selected PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-border: null !default; +/// The gradient of the selected PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-gradient: null !default; + +/// The background color of the selected and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-bg: null !default; +/// The text color of the selected and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-text: null !default; +/// The border color of the selected and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-border: null !default; +/// The gradient of the selected and hovered PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-gradient: null !default; + +/// The background color of the selected and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-focus-bg: null !default; +/// The text color of the selected and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-focus-text: null !default; +/// The border color of the selected and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-focus-border: null !default; +/// The gradient of the selected and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-focus-gradient: null !default; + +/// The background color of the selected, hovered and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-focus-bg: null !default; +/// The text color of the selected, hovered and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-focus-text: null !default; +/// The border color of the selected, hovered and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-focus-border: null !default; +/// The gradient of the selected, hovered and focused PanelBar header. +/// @group panelbar +$kendo-panelbar-header-selected-hover-focus-gradient: null !default; + +/// The background color of the hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-bg: null !default; +/// The text color of the hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-text: null !default; +/// The border color of the hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-border: null !default; +/// The gradient of the hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-gradient: null !default; + +/// The background color of the focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-focus-bg: null !default; +/// The text color of the focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-focus-text: null !default; +/// The border color of the focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-focus-border: null !default; +/// The gradient of the focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-focus-gradient: null !default; +/// The box shadow of the focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-focus-shadow: null !default; + +/// The background color of the focused and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-focus-bg: null !default; +/// The text color of the focused and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-focus-text: null !default; +/// The border color of the focused and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-focus-border: null !default; +/// The gradient of the focused and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-hover-focus-gradient: null !default; + +/// The background color of the selected PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-bg: null !default; +/// The text color of the selected PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-text: null !default; +/// The border color of the selected PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-border: null !default; +/// The gradient of the selected PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-gradient: null !default; + +/// The background color of the selected and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-bg: null !default; +/// The text color of the selected and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-text: null !default; +/// The border color of the selected and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-border: null !default; +/// The gradient of the selected and hovered PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-gradient: null !default; + +/// The background color of the selected and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-focus-bg: null !default; +/// The text color of the selected and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-focus-text: null !default; +/// The border color of the selected and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-focus-border: null !default; +/// The gradient of the selected and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-focus-gradient: null !default; + +/// The background color of the selected, hovered and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-focus-bg: null !default; +/// The text color of the selected, hovered and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-focus-text: null !default; +/// The border color of the selected, hovered and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-focus-border: null !default; +/// The gradient of the selected, hovered and focused PanelBar items. +/// @group panelbar +$kendo-panelbar-item-selected-hover-focus-gradient: null !default; + +/// The background color of the expanded PanelBar header. +/// @group panelbar +$kendo-panelbar-header-expanded-bg: null !default; +/// The text color of the expanded PanelBar header. +/// @group panelbar +$kendo-panelbar-header-expanded-text: null !default; +/// The border color of the expanded PanelBar header. +/// @group panelbar +$kendo-panelbar-header-expanded-border: null !default; +/// The gradient of the expanded PanelBar header. +/// @group panelbar +$kendo-panelbar-header-expanded-gradient: null !default; diff --git a/packages/core/scss/components/pdf-viewer/_index.scss b/packages/core/scss/components/pdf-viewer/_index.scss new file mode 100644 index 00000000000..e9698adca87 --- /dev/null +++ b/packages/core/scss/components/pdf-viewer/_index.scss @@ -0,0 +1,33 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../combobox/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../dialog/_index.scss" as *; +@use "../pager/_index.scss" as *; +@use "../dropzone/_index.scss" as *; +@use "../window/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-pdf-viewer--styles() { + @include import-once( "pdf-viewer" ) { + @include core-styles(); + @include kendo-combobox--styles(); + @include kendo-toolbar--styles(); + @include kendo-dialog--styles(); + @include kendo-pager--styles(); + @include kendo-icon--styles(); + @include kendo-dropzone--styles(); + @include kendo-window--styles(); + @include kendo-pdf-viewer--layout(); + @include kendo-pdf-viewer--theme(); + @include kendo-utils--layout--overflow(); + @include kendo-utils--layout--position(); + } +} diff --git a/packages/core/scss/components/pdf-viewer/_layout.scss b/packages/core/scss/components/pdf-viewer/_layout.scss new file mode 100644 index 00000000000..1acce4c4b36 --- /dev/null +++ b/packages/core/scss/components/pdf-viewer/_layout.scss @@ -0,0 +1,337 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; +@use "../button/_variables.scss" as *; + +@mixin kendo-pdf-viewer--layout-base() { + + // PDF Viewer + .k-pdf-viewer { + border-width: $kendo-pdf-viewer-border-width; + border-style: solid; + box-sizing: border-box; + position: relative; + outline: 0; + font-family: $kendo-pdf-viewer-font-family; + font-size: $kendo-pdf-viewer-font-size; + line-height: $kendo-pdf-viewer-line-height; + display: flex; + flex-direction: column; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + // Toolbar + .k-toolbar { + border-top-width: 0; + border-right-width: 0; + border-left-width: 0; + border-color: inherit; + flex: 0 0 auto; + z-index: 2; + } + .k-toolbar .k-pager-wrap, + .k-toolbar .k-pager { + padding: 0; + border-width: 0; + color: inherit; + background: none; + overflow: visible; + } + } + + + // Canvas + .k-pdf-viewer-canvas { + display: flex; + flex-direction: column; + flex: 1 1 auto; + outline: none; + + &.k-enable-text-select { + user-select: text; + cursor: text; + } + + &.k-enable-panning { + cursor: grab !important; // stylelint-disable-line declaration-no-important + + span::selection { + background-color: transparent; + } + } + } + + // Pages + .k-pdf-viewer-pages { + flex: 1 1 auto; + + .k-page { + position: relative; + margin-block: $kendo-pdf-viewer-page-spacing; + margin-inline: auto; + z-index: 1; + + // Canvas + .k-canvas-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + + canvas { + direction: ltr; + } + + svg { + transform: none; + } + + .k-highlight { + position: absolute; + mix-blend-mode: multiply; + fill-opacity: 1; + + } + .k-highlight-outline { + position: absolute; + fill: none; + stroke-width: 2px; + stroke-dasharray: 2; + } + } + + + .k-text-layer { + position: absolute; + top: 0; + left: 0; + opacity: .2; + overflow: hidden; + + .k-marked-content > span, + > span, br { + position: absolute; + line-height: $kendo-pdf-viewer-selection-line-height; + transform-origin: 0% 0%; + color: transparent; + white-space: pre; + cursor: text; + } + + .k-marked-content { + top: 0; + height: 0; + } + + .k-end-of-content { + display: block; + position: absolute; + inset: 100% 0 0; + z-index: 0; + cursor: default; + user-select: none; + } + + .k-search-highlight-mark { + color: transparent; + } + + .k-highlighting { + touch-action: none; + } + } + + .k-annotation-layer { + position: absolute; + top: 0; + left: 0; + transform-origin: 0 0; + pointer-events: none; + + section { + position: absolute; + pointer-events: auto; + } + + .k-annotation-text-content { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + color: transparent; + user-select: none; + pointer-events: none; + } + + .k-link-annotation > a { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + .k-annotation-editor-layer { + background: transparent; + position: absolute; + inset: 0; + transform-origin: 0 0; + cursor: auto; + + .k-selected { + z-index: 100000 !important; // stylelint-disable-line declaration-no-important + } + + .k-highlight-editor { + position: absolute; + background: transparent; + z-index: 1; + cursor: auto; + max-width: 100%; + max-height: 100%; + border: none; + outline: none; + pointer-events: none; + transform-origin: 0 0; + + .k-internal { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: auto; + } + + &.k-highlight-editor-disabled { + .k-internal { + pointer-events: none; + } + } + } + + .k-free-text-editor { + position: absolute; + background: transparent; + z-index: 1; + transform-origin: 0 0; + cursor: text; + caret-color: $kendo-pdf-viewer-free-text-annotation-text; + max-width: 100%; + max-height: 100%; + border: solid 2px transparent; + + &.k-selected.k-draggable { + cursor: move;; + } + + &.k-selected .k-internal { + border-radius: 0px; + outline: 2px dashed $kendo-pdf-viewer-free-text-annotation-border; + } + + .k-internal { + background: transparent; + border: none; + inset: 0; + overflow: visible; + white-space: nowrap; + user-select: none; + } + + .k-internal:empty::before { + content: attr(default-content); + } + } + } + + .k-annotation-editor-layer-disabled { + pointer-events: none; + } + } + + .k-blank-page { + margin: 0; + display: flex; + flex-flow: column nowrap; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + background-color: inherit !important; // stylelint-disable-line declaration-no-important + + .k-upload, + .k-dropzone, + .k-dropzone-inner { + border: 0; + background: none; + } + } + } + + // Search + .k-pdf-viewer-canvas > .k-search-panel { + width: max-content; + margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 ); + padding-block: $kendo-pdf-viewer-search-panel-padding-y; + padding-inline: $kendo-pdf-viewer-search-panel-padding-x; + border-width: $kendo-pdf-viewer-search-panel-border-width; + border-style: solid; + border-radius: $kendo-pdf-viewer-search-panel-border-radius; + display: flex; + gap: $kendo-pdf-viewer-search-panel-spacing; + flex-flow: row nowrap; + flex: 0 0 auto; + justify-content: flex-start; + align-items: center; + z-index: 10; + cursor: default; + + .k-search-dialog-draghandle { + cursor: move; + margin-left: 0; + } + + .k-textbox { + width: 10em; + flex: none; + + .k-button { + border-width: 0; + } + } + + .k-search-matches { + display: inline-flex; + gap: $kendo-pdf-viewer-search-panel-matches-spacing; + } + } + + // Annotation Toolbar + .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar { + width: min-content; + border-bottom-width: 0; + } + + + // Annotation Editor + .k-pdf-viewer-annotation-editor { + padding-block: $kendo-pdf-viewer-popup-padding-y; + padding-inline: $kendo-pdf-viewer-popup-padding-x; + + .k-column-menu-group-header { + padding-inline: 0; + } + + .k-form-field { + margin-top: 0; + } + + } + +} + + +@mixin kendo-pdf-viewer--layout() { + @include kendo-pdf-viewer--layout-base(); +} diff --git a/packages/core/scss/components/pdf-viewer/_theme.scss b/packages/core/scss/components/pdf-viewer/_theme.scss new file mode 100644 index 00000000000..1c3a9093ad0 --- /dev/null +++ b/packages/core/scss/components/pdf-viewer/_theme.scss @@ -0,0 +1,94 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-pdf-viewer--theme-base() { + + // PDF Viewer + .k-pdf-viewer { + @include fill( + $kendo-pdf-viewer-text, + $kendo-pdf-viewer-bg, + $kendo-pdf-viewer-border + ); + + + // Toolbar + .k-toolbar { + @include fill( + $kendo-pdf-viewer-toolbar-text, + $kendo-pdf-viewer-toolbar-bg, + $kendo-pdf-viewer-toolbar-border, + $kendo-pdf-viewer-toolbar-gradient + ); + } + + + // Canvas + .k-pdf-viewer-canvas { + @include fill( + $kendo-pdf-viewer-canvas-text, + $kendo-pdf-viewer-canvas-bg, + $kendo-pdf-viewer-canvas-border + ); + } + + + // Page + .k-page { + @include fill( + $kendo-pdf-viewer-page-text, + $kendo-pdf-viewer-page-bg, + $kendo-pdf-viewer-page-border + ); + @include box-shadow( $kendo-pdf-viewer-page-shadow ); + } + + .k-blank-page > .k-icon { + @include fill( $color: $kendo-pdf-viewer-icon-text ); + } + + .k-canvas-wrapper .k-highlight-outline { + &.k-hover, + &:hover { + stroke: $kendo-pdf-viewer-highlight-annotation-hover-border; + } + + &.k-selected { + stroke: $kendo-pdf-viewer-highlight-annotation-border; + } + } + + // Search + .k-search-highlight { + background-color: $kendo-pdf-viewer-search-highlight-bg; + } + + .k-search-highlight-mark { + @include fill( $bg: $kendo-pdf-viewer-search-highlight-mark-bg ); + } + + .k-annotation-editor-layer .k-free-text-editor .k-internal { + color: $kendo-pdf-viewer-free-text-annotation-text; + + &:empty::before { + color: $kendo-pdf-viewer-free-text-annotation-placeholder-text; + } + } + + } + + .k-pdf-viewer-canvas > .k-search-panel { + @include fill( + $kendo-pdf-viewer-search-panel-text, + $kendo-pdf-viewer-search-panel-bg, + $kendo-pdf-viewer-search-panel-border, + ); + @include box-shadow( $kendo-pdf-viewer-search-panel-shadow ); + } + +} + + +@mixin kendo-pdf-viewer--theme() { + @include kendo-pdf-viewer--theme-base(); +} diff --git a/packages/core/scss/components/pdf-viewer/_variables.scss b/packages/core/scss/components/pdf-viewer/_variables.scss new file mode 100644 index 00000000000..cbe38c76ce6 --- /dev/null +++ b/packages/core/scss/components/pdf-viewer/_variables.scss @@ -0,0 +1,136 @@ +// PDFViewer + +/// The border width of the PDFViewer. +/// @group pdf-viewer +$kendo-pdf-viewer-border-width: null !default; +/// The font family of the PDFViewer. +/// @group pdf-viewer +$kendo-pdf-viewer-font-family: null !default; +/// The font size of the PDFViewer. +/// @group pdf-viewer +$kendo-pdf-viewer-font-size: null !default; +/// The line height of the PDFViewer. +/// @group pdf-viewer +$kendo-pdf-viewer-line-height: null !default; + +/// The background color of the PDFViewer. +/// @group pdf-viewer +$kendo-pdf-viewer-bg: null !default; +/// The text color of the PDFViewer. +/// @group pdf-viewer +$kendo-pdf-viewer-text: null !default; +/// The border color of the PDFViewer. +/// @group pdf-viewer +$kendo-pdf-viewer-border: null !default; + +/// The background color of the PDFViewer Toolbar. +/// @group pdf-viewer +$kendo-pdf-viewer-toolbar-bg: null !default; +/// The text color of the PDFViewer Toolbar. +/// @group pdf-viewer +$kendo-pdf-viewer-toolbar-text: null !default; +/// The border color of the PDFViewer Toolbar. +/// @group pdf-viewer +$kendo-pdf-viewer-toolbar-border: null !default; +/// The gradient of the PDFViewer Toolbar. +/// @group pdf-viewer +$kendo-pdf-viewer-toolbar-gradient: null !default; + +/// The background color of the PDFViewer canvas. +/// @group pdf-viewer +$kendo-pdf-viewer-canvas-bg: null !default; +/// The text color of the PDFViewer canvas. +/// @group pdf-viewer +$kendo-pdf-viewer-canvas-text: null !default; +/// The border color of the PDFViewer canvas. +/// @group pdf-viewer +$kendo-pdf-viewer-canvas-border: null !default; + +/// The spacing of the PDFViewer page. +/// @group pdf-viewer +$kendo-pdf-viewer-page-spacing: null !default; + +/// The background color of the PDFViewer page. +/// @group pdf-viewer +$kendo-pdf-viewer-page-bg: null !default; +/// The text color of the PDFViewer page. +/// @group pdf-viewer +$kendo-pdf-viewer-page-text: null !default; +/// The border color of the PDFViewer page. +/// @group pdf-viewer +$kendo-pdf-viewer-page-border: null !default; +/// The shadow of the PDFViewer page. +/// @group pdf-viewer +$kendo-pdf-viewer-page-shadow: null !default; + +/// The horizontal padding of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-padding-x: null !default; +/// The vertical padding of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-padding-y: null !default; +/// The spacing of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-spacing: null !default; +/// The border width of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-border-width: null !default; +/// The border radius of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-border-radius: null !default; +/// The background color of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-bg: null !default; +/// The text color of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-text: null !default; +/// The border color of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-border: null !default; +/// The shadow of the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-shadow: null !default; +/// The spacing of the matches container in the PDFViewer search panel. +/// @group pdf-viewer +$kendo-pdf-viewer-search-panel-matches-spacing: null !default; + +/// The line height of the PDFViewer selection. +/// @group pdf-viewer +$kendo-pdf-viewer-selection-line-height: null !default; + +/// The background color of the PDFViewer highlight. +/// @group pdf-viewer +$kendo-pdf-viewer-search-highlight-bg: null !default; +/// The background color of the PDFViewer highlight mark. +/// @group pdf-viewer +$kendo-pdf-viewer-search-highlight-mark-bg: null !default; + +/// The text color of the PDFViewer icon. +/// @group pdf-viewer +$kendo-pdf-viewer-icon-text: null !default; + +/// The vertical padding of the PDFViewer popup. +/// @group pdf-viewer +$kendo-pdf-viewer-popup-padding-x: null !default; +/// The horizontal padding of the PDFViewer popup. +/// @group pdf-viewer +$kendo-pdf-viewer-popup-padding-y: null !default; + +/// The border color of the PDFViewer selected highlight annotation. +/// @group pdf-viewer +$kendo-pdf-viewer-highlight-annotation-border: null !default; +/// The background color of the PDFViewer hover highlight annotation. +/// @group pdf-viewer +$kendo-pdf-viewer-highlight-annotation-hover-border: null !default; +/// The border color of the PDFViewer selected free text annotation. +/// @group pdf-viewer +$kendo-pdf-viewer-free-text-annotation-border: null !default; +/// The placeholder text color of the PDFViewer free text annotation. +/// @group pdf-viewer +$kendo-pdf-viewer-free-text-annotation-placeholder-text: null !default; +/// The text color of the PDFViewer free text annotation. +/// @group pdf-viewer +$kendo-pdf-viewer-free-text-annotation-text: null !default; +/// The text color of the PDFViewer free text annotation. +/// @group pdf-viewer +$kendo-pdf-viewer-free-text-annotation-text: null !default; diff --git a/packages/core/scss/components/pivotgrid/_index.scss b/packages/core/scss/components/pivotgrid/_index.scss new file mode 100644 index 00000000000..02635ecfc6d --- /dev/null +++ b/packages/core/scss/components/pivotgrid/_index.scss @@ -0,0 +1,30 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../dialog/_index.scss" as *; +@use "../treeview/_index.scss" as *; +@use "../grid/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-pivotgrid--styles() { + @include import-once( "pivotgrid" ) { + @include core-styles(); + @include kendo-dialog--styles(); + @include kendo-treeview--styles(); + @include kendo-grid--styles(); + @include kendo-icon--styles(); + @include kendo-list--styles(); + @include kendo-pivotgrid--layout(); + @include kendo-pivotgrid--theme(); + @include kendo-utils--layout--display(); + @include kendo-utils--layout--position(); + @include kendo-utils--flex-grid--flex-direction(); + } +} diff --git a/packages/core/scss/components/pivotgrid/_layout.scss b/packages/core/scss/components/pivotgrid/_layout.scss new file mode 100644 index 00000000000..16b082db936 --- /dev/null +++ b/packages/core/scss/components/pivotgrid/_layout.scss @@ -0,0 +1,660 @@ +@use "../../spacing/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-pivotgrid--layout-base() { + + // Pivotgrid + .k-pivotgrid { + padding-block: $kendo-pivotgrid-padding-y; + padding-inline: $kendo-pivotgrid-padding-x; + border-width: $kendo-pivotgrid-border-width; + border-style: solid; + box-sizing: content-box; + font-size: $kendo-pivotgrid-font-size; + font-family: $kendo-pivotgrid-font-family; + line-height: $kendo-pivotgrid-line-height; + text-align: start; + vertical-align: top; + display: grid; + grid-template-columns: $kendo-pivotgrid-row-header-width auto; + grid-template-rows: $kendo-pivotgrid-column-header-height auto; + position: relative; + + table { + margin: 0; + width: 100%; + max-width: none; + border-width: 0; + border-color: inherit; + border-collapse: separate; + border-spacing: 0; + outline: 0; + text-align: inherit; + empty-cells: show; + } + + thead, + tbody, + th, + tr, + td { + border-color: inherit; + text-align: inherit; + } + } + + + // Table Layout + .k-pivotgrid-table { + table-layout: fixed; + + th { + font-weight: 400; + text-transform: initial; + } + + .k-pivotgrid-header-root { + font-weight: 600; + text-transform: uppercase; + } + } + + + // Header empty cell + .k-pivotgrid-empty-cell { + border-right-style: solid; + border-right-width: $kendo-pivotgrid-cell-border-width; + border-bottom-style: solid; + border-bottom-width: $kendo-pivotgrid-cell-border-width; + + &:focus { + outline: none; + } + } + + + // Column Headers + .k-pivotgrid-column-headers { + overflow: hidden; + } + + .k-pivotgrid-column-headers .k-pivotgrid-table { + padding-inline-start: 0; + padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); + } + + .k-pivotgrid-column-headers .k-pivotgrid-cell { + border-bottom-style: solid; + border-bottom-width: $kendo-pivotgrid-cell-border-width; + border-left-style: solid; + border-left-width: $kendo-pivotgrid-cell-border-width; + + &:first-child { + border-left-width: 0; + } + + &.k-first { + border-left-width: $kendo-pivotgrid-cell-border-width; + } + } + + + // Row Headers + .k-pivotgrid-row-headers { + overflow: hidden; + } + + .k-pivotgrid-row-headers .k-pivotgrid-table { + padding-bottom: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); + } + + .k-pivotgrid-row-headers .k-pivotgrid-cell { + border-right-style: solid; + border-right-width: $kendo-pivotgrid-cell-border-width; + border-bottom-style: solid; + border-bottom-width: $kendo-pivotgrid-cell-border-width; + white-space: nowrap; + } + + + // Values + .k-pivotgrid-values { + border-color: inherit; + overflow: scroll; + } + + .k-pivotgrid-values .k-pivotgrid-cell { + border-bottom-style: solid; + border-bottom-width: $kendo-pivotgrid-cell-border-width; + border-left-style: solid; + border-left-width: $kendo-pivotgrid-cell-border-width; + + &:first-child { + border-left-width: 0; + } + } + + .k-pivotgrid-cell { + padding-block: $kendo-pivotgrid-cell-padding-y; + padding-inline: $kendo-pivotgrid-cell-padding-x; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: top; + overflow: hidden; + + &:focus { + outline: none; + } + } + + .k-pivotgrid-cell .k-icon { + cursor: pointer; + padding-inline-end: $kendo-pivotgrid-icon-spacing; + } + + .k-pivotgrid-total { + font-weight: 600; + } + + // Column menus + .k-column-menu .k-treeview { + padding-block: $kendo-pivotgrid-treeview-padding-y; + padding-inline: $kendo-pivotgrid-treeview-padding-x; + overflow: auto; + } + + + // Pivotgrid configurator + .k-pivotgrid-configurator { + display: flex; + } + + .k-pivotgrid-configurator-panel { + padding-block: $kendo-pivotgrid-configurator-padding-y; + padding-inline: $kendo-pivotgrid-configurator-padding-x; + border-width: $kendo-pivotgrid-configurator-border-width; + border-style: solid; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + z-index: 2; + } + + // Configurator Button + .k-pivotgrid-configurator-button { + padding-block: $kendo-pivotgrid-configurator-button-padding-y; + padding-inline: $kendo-pivotgrid-configurator-button-padding-x; + border-width: $kendo-pivotgrid-configurator-button-border-width; + border-style: solid; + box-sizing: border-box; + cursor: pointer; + user-select: none; + + .k-flex-row-reverse & > span { + transform: rotate(-180deg); + } + } + + + // Modes + .k-pivotgrid-configurator-overlay { + position: absolute; + overflow: hidden; + z-index: 2; + } + + // Panel Content + .k-pivotgrid-configurator-header { + padding-block: $kendo-pivotgrid-configurator-header-padding-y; + padding-inline: $kendo-pivotgrid-configurator-header-padding-x; + font-size: $kendo-pivotgrid-configurator-header-font-size; + font-weight: $kendo-pivotgrid-configurator-header-font-weight; + display: flex; + flex-direction: row; + align-items: center; + } + + .k-pivotgrid-configurator-header-text { + word-break: normal; + overflow-wrap: anywhere; + } + + .k-pivotgrid-configurator-content { + padding-block: $kendo-pivotgrid-configurator-content-padding-y; + padding-inline: $kendo-pivotgrid-configurator-content-padding-x; + flex: 1 1 auto; + overflow: auto; + + .k-form { + .k-label { + font-size: 16px; + font-weight: 500; + align-items: flex-start; + } + .k-dropdown-list { + max-width: 90px; + } + .k-textbox { + flex-basis: 50%; + } + } + + // Rows, Cols and Filters + .k-row-fields, + .k-column-fields, + .k-filter-fields { + margin-top: $kendo-pivotgrid-configurator-fields-margin-y; + flex-wrap: wrap; + } + + // Values + .k-value-fields { + margin-block: $kendo-pivotgrid-configurator-fields-margin-y; + margin-inline: $kendo-pivotgrid-configurator-fields-margin-x; + display: flex; + flex-direction: column; + gap: calc( #{$kendo-pivotgrid-spacer} / 2 ); + } + + .k-select-all .k-checkbox { + margin-inline-end: k-spacing(1); + } + + .k-fields-list-wrapper { + max-height: 200px; + border-width: 1px; + border-style: solid; + flex: 1 1 auto; + overflow-x: hidden; + overflow-y: auto; + } + + .k-settings-description { + margin-top: k-spacing(4); + text-align: center; + } + + .k-treeview { + padding-block: $kendo-pivotgrid-treeview-padding-y; + padding-inline: $kendo-pivotgrid-treeview-padding-x; + overflow: auto; + } + } + + + // Calculated field + .k-calculated-field { + padding-block: $kendo-pivotgrid-calculated-field-padding-y; + padding-inline: $kendo-pivotgrid-calculated-field-padding-x; + border-width: $kendo-pivotgrid-calculated-field-border-width; + border-radius: $kendo-pivotgrid-calculated-field-border-radius; + border-style: solid; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: $kendo-pivotgrid-calculated-field-gap; + } + .k-calculated-field-header { + display: flex; + flex-direction: row; + align-items: center; + } + + .k-calculated-field-header .k-textbox { + min-width: 200px; + } + + .k-calculated-field-header-text { + margin-right: 5px; + word-break: normal; + overflow-wrap: anywhere; + } + + .k-calculated-field-header-actions { + flex-shrink: 0; + align-self: flex-start; + } + + .k-calculated-field-content .k-textbox { + width: 100%; + } + + .k-calculated-field-actions { + display: flex; + flex-direction: row; + align-items: center; + + .k-icon { + margin-right: k-spacing(2); + } + .k-dropdown-list { + max-width: 100px; + } + } + + .k-filter-menu .k-calculated-item { + border-bottom-width: 1px; + border-bottom-style: solid; + } + + + // Vertical Layout + .k-pivotgrid-configurator-vertical { + min-width: $kendo-pivotgrid-configurator-vertical-width; + } + + .k-flex-row { + .k-pivotgrid-configurator-overlay { + right: $kendo-pivotgrid-configurator-button-size; + } + + &-reverse .k-pivotgrid-configurator-overlay { + left: $kendo-pivotgrid-configurator-button-size; + } + } + + .k-flex-row, + .k-flex-row-reverse { + .k-pivotgrid-configurator-button { + display: flex; + align-items: center; + justify-content: center; + writing-mode: vertical-rl; + + .k-icon { + vertical-align: baseline; + } + } + + .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel { + border-right-width: 0; + border-left-width: 0; + } + } + + // Horizontal Layout + .k-pivotgrid-configurator-horizontal { + width: 100%; + height: $kendo-pivotgrid-configurator-horizontal-height; + + .k-pivotgrid-configurator-content { + .k-form { + display: flex; + flex-direction: row; + } + + .k-form-field-wrapper { + padding-left: $kendo-pivotgrid-spacer; + + & > *:first-child { + margin-top: 0; + } + &:first-child { + padding-left: 0; + flex: 1 1 30%; + } + &:nth-child(2) { + flex: 1 1 30%; + } + + &:last-child { + border-left-width: 1px; + border-left-style: solid; + flex: 1 1 40%; + } + } + + .k-row-fields, + .k-column-fields, + .k-filter-fields { + max-height: 100px; + overflow-x: hidden; + overflow-y: auto; + } + .k-value-fields { + max-height: 250px; + flex-flow: row wrap; + overflow-x: hidden; + overflow-y: auto; + } + } + } + + .k-flex-col { + .k-pivotgrid-configurator-overlay { + bottom: $kendo-pivotgrid-configurator-button-size; + } + + &-reverse .k-pivotgrid-configurator-overlay { + top: $kendo-pivotgrid-configurator-button-size; + } + } + + + .k-flex-col, + .k-flex-col-reverse { + .k-pivotgrid-configurator-button { + text-align: center; + } + + .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel { + border-top-width: 0; + border-bottom-width: 0; + } + } + + + // Pivotgrid export + .k-pdf-export-shadow { + + .k-pivotgrid { + height: auto !important; // stylelint-disable-line declaration-no-important + } + + .k-pivotgrid-values { + height: auto; + overflow: visible; + } + + .k-pivotgrid-column-headers .k-pivotgrid-table { + padding-inline-end: 0; + } + + } + + + // Legacy pivotgrid + // TODO: remove + .k-pivot { + border-width: $kendo-pivotgrid-border-width; + border-style: solid; + position: relative; + + .k-grid td { + white-space: nowrap; + } + + .k-grid-content { + flex: 1 1 auto; + } + } + + .k-pivot-toolbar { + border-width: 0 0 1px; + border-style: solid; + align-items: flex-start; + flex-wrap: wrap; + box-shadow: none; + + > * { + max-width: 100%; + } + + &::before { + display: none; + } + } + + .k-pivot-layout { + border-spacing: 0; + table-layout: auto; + + .k-grid-footer, + .k-grid .k-table-alt-row { + font-weight: bold; + } + } + + .k-pivot-layout > tbody, + .k-pivot .k-table-td, + .k-pivot td { + vertical-align: top; + } + + .k-pivot-layout > tbody > tr > td { + padding: 0; + } + + .k-pivot-rowheaders > .k-grid, + .k-pivot-table > .k-grid { + border-width: 0; + color: inherit; + background: none; + } + + .k-pivot-rowheaders > .k-grid td:first-child, + .k-pivot-table .k-grid-header .k-header.k-first { + border-left-width: 1px; + } + + .k-pivot-rowheaders > .k-grid td.k-first { + border-left-width: 0; + } + + .k-pivot-rowheaders > .k-grid { + overflow: hidden; + } + + .k-pivot-table { + border-left-width: 1px; + border-left-style: solid; + } + + .k-pivot-table .k-grid-header-wrap { + margin-right: -1px; + } + + .k-pivot-table .k-grid-header-wrap > table { + height: 100%; + } + + .k-pivot .k-grid-header .k-header { + vertical-align: top; + } + + .k-pivot .k-grid tr { + .k-grid-footer { + border-bottom-width: 0; + } + &:last-child:not(.k-grid-footer) { + td:not(.k-grid-footer) { + border-bottom-width: 1px; + } + } + } + + .k-pivot-layout .k-grid td { + border-bottom-width: 1px; + } + + .k-pivot-layout .k-grid-footer > td { + border-top-width: 0; + } + + .k-pivot-filter-window .k-treeview { + max-height: 600px; + } + + + // jquery specific -- old pivot + // TODO: remove + .k-pivotgrid-wrapper { + box-sizing: border-box; + display: flex; + flex-flow: row nowrap; + align-items: flex-start; + gap: k-spacing(2); + + > .k-pivotgrid-configurator-panel { + max-width: 320px; + flex: none; + } + > .k-pivot { + flex: 1; + } + } + .k-pivotgrid-configurator-panel.kendo-jquery { + box-sizing: border-box; + display: inline-flex; + + .k-pivotgrid-configurator { + height: 100%; + } + + .k-pivotgrid-configurator-content { + padding: k-spacing(4); + max-height: 100%; + display: flex; + flex-flow: column nowrap; + gap: k-spacing(4); + overflow-x: hidden; + overflow-y: auto; + } + + .k-pivotgrid-targets { + display: flex; + flex-flow: column nowrap; + gap: k-spacing(4); + } + + .k-pivotgrid-configurator-section { + display: flex; + flex-flow: column nowrap; + gap: k-spacing(2); + } + + .k-column-fields { + margin: 0; + padding: k-spacing(1); + max-height: 200px; + border-width: 1px; + border-style: solid; + display: flex; + flex-flow: row wrap; + gap: k-spacing(1); + overflow-x: hidden; + overflow-y: auto; + + > * { + margin: 0; + } + } + } + + // PivotGrid toggle icon + .k-pivotgrid-toggle { + margin-block: calc( #{$kendo-icon-padding} * -1 ); + padding: $kendo-icon-padding; + box-sizing: content-box; + cursor: pointer; + } + +} + + +@mixin kendo-pivotgrid--layout() { + @include kendo-pivotgrid--layout-base(); +} diff --git a/packages/core/scss/components/pivotgrid/_theme.scss b/packages/core/scss/components/pivotgrid/_theme.scss new file mode 100644 index 00000000000..fb4d980779b --- /dev/null +++ b/packages/core/scss/components/pivotgrid/_theme.scss @@ -0,0 +1,251 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; +@use "../popup/_variables.scss" as *; + +@mixin kendo-pivotgrid--theme-base() { + + // PivotGrid + .k-pivotgrid { + @include fill ( + $kendo-pivotgrid-text, + $kendo-pivotgrid-bg, + $kendo-pivotgrid-border + ); + } + + .k-pivotgrid-column-headers, + .k-pivotgrid-row-headers, + .k-pivotgrid-empty-cell { + @include fill ( + $kendo-pivotgrid-headers-text, + $kendo-pivotgrid-headers-bg, + $kendo-pivotgrid-headers-border + ); + } + + .k-pivotgrid-empty-cell { + @include fill ( + $border: $kendo-pivotgrid-alt-border + ); + } + + .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child { + border-right-color: $kendo-pivotgrid-alt-border; + } + + .k-pivotgrid-column-headers .k-pivotgrid-column-total:nth-last-of-type(2) .k-pivotgrid-cell:not(.k-pivotgrid-expanded), + .k-pivotgrid-column-headers .k-pivotgrid-row:last-child { + border-bottom-color: $kendo-pivotgrid-alt-border; + } + + + .k-pivotgrid-header-total, + .k-pivotgrid-total { + @include fill ( + $kendo-pivotgrid-total-text, + $kendo-pivotgrid-total-bg, + $kendo-pivotgrid-total-border + ); + } + + + // Hover state + .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover, + .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover, + .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover, + .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover, + .k-pivotgrid-values tbody > .k-pivotgrid-row:hover, + .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover { + @include fill ( + $kendo-pivotgrid-hover-text, + $kendo-pivotgrid-hover-bg, + $kendo-pivotgrid-hover-border + ); + } + + // Focus state + .k-pivotgrid-cell:focus, + .k-pivotgrid-cell.k-focus, + .k-pivotgrid-empty-cell:focus, + .k-pivotgrid-empty-cell.k-focus, + .k-master-row > .k-pivotgrid-cell:focus, + .k-grouping-row > .k-pivotgrid-cell:focus, + .k-detail-row > .k-pivotgrid-cell:focus, + .k-group-footer > .k-pivotgrid-cell:focus { + @include focus-indicator( $kendo-pivotgrid-focus-shadow, true ); + } + + // Selected state + .k-pivotgrid-cell.k-selected, + .k-pivotgrid-row.k-selected > .k-pivotgrid-cell { + @include fill ( + $kendo-pivotgrid-selected-text, + $kendo-pivotgrid-selected-bg, + $kendo-pivotgrid-selected-border + ); + } + + + // Pivotgrid configurator + .k-pivotgrid-configurator-button, + .k-pivotgrid-configurator-panel { + @include fill ( + $kendo-pivotgrid-configurator-text, + $kendo-pivotgrid-configurator-bg, + $kendo-pivotgrid-configurator-border + ); + } + + .k-pivotgrid-configurator-header { + @include fill( + $kendo-pivotgrid-configurator-header-text, + $kendo-pivotgrid-configurator-header-bg, + $kendo-pivotgrid-configurator-header-border + ); + } + + .k-pivotgrid-configurator-content .k-fields-list-wrapper { + @include fill( + $border: $kendo-pivotgrid-configurator-border + ); + } + + + // Calculated field + .k-calculated-field { + @include fill ( + $kendo-pivotgrid-calculated-field-text, + $kendo-pivotgrid-calculated-field-bg, + $kendo-pivotgrid-calculated-field-border + ); + } + + .k-calculated-field-header { + @include fill( + $kendo-pivotgrid-calculated-field-header-text, + $kendo-pivotgrid-calculated-field-header-bg, + $kendo-pivotgrid-calculated-field-header-border + ); + } + + .k-filter-menu .k-calculated-item { + @include fill( $border: $kendo-popup-border ); + } + + .k-pivotgrid-configurator-content .k-form-field-wrapper { + @include fill( $border: $kendo-component-border ); + } + + + // Overlay mode + .k-flex-row { + .k-pivotgrid-configurator-overlay { + @include box-shadow( $kendo-pivotgrid-configurator-end-shadow ); + } + + &-reverse .k-pivotgrid-configurator-overlay { + @include box-shadow( $kendo-pivotgrid-configurator-start-shadow ); + } + } + + .k-flex-col { + .k-pivotgrid-configurator-overlay { + @include box-shadow( $kendo-pivotgrid-configurator-top-shadow ); + } + + &-reverse .k-pivotgrid-configurator-overlay { + @include box-shadow( $kendo-pivotgrid-configurator-bottom-shadow ); + } + } + + // Legacy pivotgrid + // TODO: remove + .k-pivot { + @include fill ( + $kendo-pivotgrid-text, + $kendo-pivotgrid-bg, + $kendo-pivotgrid-border + ); + } + .k-pivot-table { + border-color: $kendo-pivotgrid-border; + } + + // Pivotgrid header + .k-pivot-rowheaders { + @include fill( + $kendo-pivotgrid-headers-text, + $kendo-pivotgrid-headers-bg, + $kendo-pivotgrid-headers-border + ); + } + + + // Pivotgrid toolbar + .k-pivot-toolbar { + @include fill( + $kendo-pivotgrid-headers-text, + $kendo-pivotgrid-headers-bg, + $kendo-pivotgrid-headers-border + ); + + .k-empty { + color: $kendo-subtle-text; + } + } + + .k-pivot .k-alt { + background-color: $kendo-pivotgrid-alt-bg; + } + + .k-pivot-toolbar, + .k-pivot-table, + .k-pivot-rowheaders > .k-grid td:first-child, + .k-pivot-table .k-grid-header .k-header.k-first { + border-color: $kendo-pivotgrid-chrome-border; + } + + .k-header.k-alt { + background-color: $kendo-pivotgrid-row-headers-bg; + } + + .k-pivot-layout .k-grid-footer { + color: $kendo-pivotgrid-alt-text; + background-color: $kendo-pivotgrid-alt-bg; + } + + // KPI icons + .k-i-kpi-trend-increase, + .k-i-kpi-trend-decrease, + .k-i-kpi-trend-equal { + color: inherit; + } + + .k-i-kpi-status-hold { + color: $kendo-color-warning; + } + + .k-i-kpi-status-deny { + color: $kendo-color-error; + } + + .k-i-kpi-status-open { + color: $kendo-color-success; + } + + + // Configurator + .k-pivotgrid-configurator-panel.kendo-jquery { + + .k-column-fields { + border-color: $kendo-component-border; + } + } + +} + + +@mixin kendo-pivotgrid--theme() { + @include kendo-pivotgrid--theme-base(); +} diff --git a/packages/core/scss/components/pivotgrid/_variables.scss b/packages/core/scss/components/pivotgrid/_variables.scss new file mode 100644 index 00000000000..38a609fd943 --- /dev/null +++ b/packages/core/scss/components/pivotgrid/_variables.scss @@ -0,0 +1,259 @@ +// Pivot grid +/// The spacer of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-spacer: null !default; +/// The horizontal padding of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-padding-x: null !default; +/// The vertical of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-padding-y: null !default; +/// The font family of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-font-family: null !default; +/// The font size of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-font-size: null !default; +/// The line height of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-line-height: null !default; +/// The border width of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-border-width: null !default; +/// The icon spacing of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-icon-spacing: null !default; + +/// The default width of the PivotGrid row header. +/// @group pivotgrid +$kendo-pivotgrid-row-header-width: null !default; +/// The default height of the PivotGrid column header. +/// @group pivotgrid +$kendo-pivotgrid-column-header-height: null !default; + +/// The horizontal padding of the PivotGrid cell. +/// @group pivotgrid +$kendo-pivotgrid-cell-padding-x: null !default; +/// The vertical padding of the PivotGrid cell. +/// @group pivotgrid +$kendo-pivotgrid-cell-padding-y: null !default; +/// The border width of the PivotGrid cell. +/// @group pivotgrid +$kendo-pivotgrid-cell-border-width: null !default; + +/// The background color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-bg: null !default; +/// The text color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-text: null !default; +/// The border color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-border: null !default; + +/// The alt border color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-alt-border: null !default; + +/// The background color of the PivotGrid header. +/// @group pivotgrid +$kendo-pivotgrid-headers-bg: null !default; +/// The text color of the PivotGrid header. +/// @group pivotgrid +$kendo-pivotgrid-headers-text: null !default; +/// The border color of the PivotGrid header. +/// @group pivotgrid +$kendo-pivotgrid-headers-border: null !default; + +/// The background color of the PivotGrid total cells. +/// @group pivotgrid +$kendo-pivotgrid-total-bg: null !default; +/// The text color of the PivotGrid total cells. +/// @group pivotgrid +$kendo-pivotgrid-total-text: null !default; +/// The border color of the PivotGrid total cells. +/// @group pivotgrid +$kendo-pivotgrid-total-border: null !default; + +/// The hover background color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-hover-bg: null !default; +/// The hover text color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-hover-text: null !default; +/// The hover border color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-hover-border: null !default; + +/// The selected background color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-selected-bg: null !default; +/// The selected text color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-selected-text: null !default; +/// The selected border color of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-selected-border: null !default; + +/// The focus shadow of the PivotGrid. +/// @group pivotgrid +$kendo-pivotgrid-focus-shadow: null !default; + + +// Pivotgrid Configurator +/// The horizontal padding of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-padding-y: null !default; +/// The border width of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-border-width: null !default; + +/// The horizontal padding of the PivotGrid configurator header. +/// @group pivotgrid +$kendo-pivotgrid-configurator-header-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator header. +/// @group pivotgrid +$kendo-pivotgrid-configurator-header-padding-y: null !default; +/// The font size of the PivotGrid configurator header. +/// @group pivotgrid +$kendo-pivotgrid-configurator-header-font-size: null !default; +/// The font weight of the PivotGrid configurator header. +/// @group pivotgrid +$kendo-pivotgrid-configurator-header-font-weight: null !default; + +/// The horizontal padding of the PivotGrid configurator content. +/// @group pivotgrid +$kendo-pivotgrid-configurator-content-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator content. +/// @group pivotgrid +$kendo-pivotgrid-configurator-content-padding-y: null !default; + +/// The horizontal margin of the PivotGrid configurator fields. +/// @group pivotgrid +$kendo-pivotgrid-configurator-fields-margin-x: null !default; +/// The vertical margin of the PivotGrid configurator fields. +/// @group pivotgrid +$kendo-pivotgrid-configurator-fields-margin-y: null !default; + +/// The default width of the PivotGrid vertical configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-vertical-width: null !default; +/// The default height of the PivotGrid horizontal configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-horizontal-height: null !default; + +/// The background color of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-bg: null !default; +/// The text color of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-text: null !default; +/// The border color of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-border: null !default; + +/// The background color of the PivotGrid configurator header. +/// @group pivotgrid +$kendo-pivotgrid-configurator-header-bg: null !default; +/// The text color of the PivotGrid configurator header. +/// @group pivotgrid +$kendo-pivotgrid-configurator-header-text: null !default; +/// The border color of the PivotGrid configurator header. +/// @group pivotgrid +$kendo-pivotgrid-configurator-header-border: null !default; + +/// The shadow of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-shadow: null !default; +/// The end shadow of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-end-shadow: null !default; // -3px 0px 6px rgba(0, 0, 0, .16) +/// The start shadow of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-start-shadow: null !default; // 3px 0px 6px rgba(0, 0, 0, .16) +/// The top shadow of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-top-shadow: null !default; // 0px -3px 6px rgba(0, 0, 0, .16) +/// The bottom shadow of the PivotGrid configurator. +/// @group pivotgrid +$kendo-pivotgrid-configurator-bottom-shadow: null !default; // 0px 3px 6px rgba(0, 0, 0, .16) + +/// The horizontal padding of the PivotGrid configurator button. +/// @group pivotgrid +$kendo-pivotgrid-configurator-button-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator button. +/// @group pivotgrid +$kendo-pivotgrid-configurator-button-padding-y: null !default; +/// The border width of the PivotGrid configurator button. +/// @group pivotgrid +$kendo-pivotgrid-configurator-button-border-width: null !default; +/// The size of the PivotGrid configurator button. +/// @group pivotgrid +$kendo-pivotgrid-configurator-button-size: null !default; + + +// Calculated fields +/// The horizontal padding of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-padding-x: null !default; +/// The vertical padding of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-padding-y: null !default; +/// The border width of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-border-width: null !default; +/// The border radius of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-border-radius: null !default; +/// The spacing of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-gap: null !default; + +/// The background color of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-bg: null !default; +/// The text color of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-text: null !default; +/// The border color of the PivotGrid calculated field. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-border: null !default; + +/// The background color of the PivotGrid calculated field header. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-header-bg: null !default; +/// The text color of the PivotGrid calculated field header. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-header-text: null !default; +/// The border color of the PivotGrid calculated field header. +/// @group pivotgrid +$kendo-pivotgrid-calculated-field-header-border: null !default; + + +/// The horizontal padding of the PivotGrid treeview. +/// @group pivotgrid +$kendo-pivotgrid-treeview-padding-x: null !default; +/// The vertical padding of the PivotGrid treeview. +/// @group pivotgrid +$kendo-pivotgrid-treeview-padding-y: null !default; + +// Legacy variables +$kendo-pivotgrid-alt-bg: null !default; +$kendo-pivotgrid-alt-text: null !default; +$kendo-pivotgrid-chrome-border: null !default; + +$kendo-pivotgrid-container-bg: null !default; +$kendo-pivotgrid-row-headers-bg: null !default; + +$kendo-pivotgrid-button-bg: null !default; +$kendo-pivotgrid-button-text: null !default; +$kendo-pivotgrid-button-hover-bg: null !default; +$kendo-pivotgrid-button-hover-text: null !default; +$kendo-pivotgrid-button-active-bg: null !default; +$kendo-pivotgrid-button-active-text: null !default; + +$kendo-pivotgrid-remove-bg: null !default; +$kendo-pivotgrid-remove-text: null !default; diff --git a/packages/core/scss/components/popover/_index.scss b/packages/core/scss/components/popover/_index.scss new file mode 100644 index 00000000000..25bb7e35855 --- /dev/null +++ b/packages/core/scss/components/popover/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../card/_index.scss" as *; +@use "../popup/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-popover--styles() { + @include import-once( "popover" ) { + @include core-styles(); + @include kendo-card--styles(); + @include kendo-popup--styles(); + @include kendo-popover--layout(); + @include kendo-popover--theme(); + } +} diff --git a/packages/core/scss/components/popover/_layout.scss b/packages/core/scss/components/popover/_layout.scss new file mode 100644 index 00000000000..81d2b71eef9 --- /dev/null +++ b/packages/core/scss/components/popover/_layout.scss @@ -0,0 +1,99 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-popover--layout-base() { + + // Popover + .k-popover { + @include border-radius( $kendo-popover-border-radius ); + padding: 0; + border-width: $kendo-popover-border-width; + border-style: $kendo-popover-border-style; + box-sizing: border-box; + outline: 0; + font-size: $kendo-popover-font-size; + font-family: $kendo-popover-font-family; + line-height: $kendo-popover-line-height; + display: flex; + flex-flow: column nowrap; + z-index: 12000; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + .k-popover-inner { + height: inherit; + position: relative; + border-radius: inherit; + border-color: inherit; + } + + // Header + .k-popover-header { + @include border-top-radius( $kendo-popover-border-radius ); + padding-block: $kendo-popover-header-padding-y; + padding-inline: $kendo-popover-header-padding-x; + border-width: 0 0 $kendo-popover-header-border-width; + border-style: $kendo-popover-header-border-style; + border-color: inherit; + } + + // Body + .k-popover-body { + padding-block: $kendo-popover-body-padding-y; + padding-inline: $kendo-popover-body-padding-x; + } + + // Actions + .k-popover-actions { + border-width: $kendo-popover-actions-border-width 0 0; + } + + + // Popover callout + .k-popover-callout { + margin: 0; + width: $kendo-popover-callout-width; + height: $kendo-popover-callout-height; + border-width: $kendo-popover-callout-border-width; + border-style: $kendo-popover-callout-border-style; + position: absolute; + + &.k-callout-n { + top: 0; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + } + + &.k-callout-e { + top: 50%; + right: 0; + transform: translate(50%, -50%) rotate(-45deg); + } + + &.k-callout-s { + bottom: 0; + left: 50%; + transform: translate(-50%, 50%) rotate(45deg); + } + + &.k-callout-w { + top: 50%; + left: 0; + transform: translate(-50%, -50%) rotate(45deg); + } + } + +} + + +@mixin kendo-popover--layout() { + @include kendo-popover--layout-base(); +} diff --git a/packages/core/scss/components/popover/_theme.scss b/packages/core/scss/components/popover/_theme.scss new file mode 100644 index 00000000000..8e847ca6352 --- /dev/null +++ b/packages/core/scss/components/popover/_theme.scss @@ -0,0 +1,46 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-popover--theme-base() { + + // Popover + .k-popover { + @include box-shadow( $kendo-popover-shadow ); + + @include fill( + $kendo-popover-text, + $kendo-popover-bg, + $kendo-popover-border + ); + } + + .k-popover-inner { + background-color: inherit; + border-color: inherit; + } + + // Header + .k-popover-header { + @include fill( + $kendo-popover-header-text, + $kendo-popover-header-bg, + $kendo-popover-header-border + ); + } + + // Callout + .k-popover-callout { + @include fill( + $bg: inherit, + $border: inherit + ); + + @include box-shadow( inherit ) + } + +} + + +@mixin kendo-popover--theme() { + @include kendo-popover--theme-base(); +} diff --git a/packages/core/scss/components/popover/_variables.scss b/packages/core/scss/components/popover/_variables.scss new file mode 100644 index 00000000000..fe4458be965 --- /dev/null +++ b/packages/core/scss/components/popover/_variables.scss @@ -0,0 +1,85 @@ +// Popover + +/// The width of the border around the Popover. +/// @group popover +$kendo-popover-border-width: null !default; +/// The style of the border around the Popover. +/// @group popover +$kendo-popover-border-style: null !default; +/// The radius of the border around the Popover. +/// @group popover +$kendo-popover-border-radius: null !default; +/// The font family of the Popover. +/// @group popover +$kendo-popover-font-family: null !default; +/// The font size of the Popover. +/// @group popover +$kendo-popover-font-size: null !default; +/// The line height of the Popover. +/// @group popover +$kendo-popover-line-height: null !default; + +/// The text color of the Popover. +/// @group popover +$kendo-popover-text: null !default; +/// The background color of the Popover. +/// @group popover +$kendo-popover-bg: null !default; +/// The border color of the Popover. +/// @group popover +$kendo-popover-border: null !default; +/// The box shadow of the Popover. +/// @group popover +$kendo-popover-shadow: null !default; + +/// The horizontal padding of the Popover header. +/// @group popover +$kendo-popover-header-padding-x: null !default; +/// The vertical padding of the Popover header. +/// @group popover +$kendo-popover-header-padding-y: null !default; +/// The border width of the Popover header. +/// @group popover +$kendo-popover-header-border-width: null !default; +/// The border style of the Popover header. +/// @group popover +$kendo-popover-header-border-style: null !default; +/// The text color of the Popover header. +/// @group popover +$kendo-popover-header-text: null !default; +/// The background color of the Popover header. +/// @group popover +$kendo-popover-header-bg: null !default; +/// The border color of the Popover header. +/// @group popover +$kendo-popover-header-border: null !default; + +/// The horizontal padding of the Popover body. +/// @group popover +$kendo-popover-body-padding-x: null !default; +/// The vertical padding of the Popover body. +/// @group popover +$kendo-popover-body-padding-y: null !default; + +/// The border width of the Popover actions. +/// @group popover +$kendo-popover-actions-border-width: null !default; + +/// The width of the Popover callout. +/// @group popover +$kendo-popover-callout-width: null !default; +/// The height of the Popover callout. +/// @group popover +$kendo-popover-callout-height: null !default; +/// The border width of the Popover callout. +/// @group popover +$kendo-popover-callout-border-width: null !default; +/// The border style of the Popover callout. +/// @group popover +$kendo-popover-callout-border-style: null !default; +/// The background color of the Popover callout. +/// @group popover +$kendo-popover-callout-bg: null !default; +/// The border color of the Popover callout. +/// @group popover +$kendo-popover-callout-border: null !default; diff --git a/packages/core/scss/components/popup/_index.scss b/packages/core/scss/components/popup/_index.scss new file mode 100644 index 00000000000..ebe8a404381 --- /dev/null +++ b/packages/core/scss/components/popup/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-popup--styles() { + @include import-once( "popup" ) { + @include core-styles(); + @include kendo-popup--layout(); + @include kendo-popup--theme(); + } +} diff --git a/packages/core/scss/components/popup/_layout.scss b/packages/core/scss/components/popup/_layout.scss new file mode 100644 index 00000000000..46374ff5a7e --- /dev/null +++ b/packages/core/scss/components/popup/_layout.scss @@ -0,0 +1,85 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-popup--layout-base() { + + // Animation Container + .k-animation-container { + position: absolute; + overflow: hidden; + z-index: 100; + + &-fixed { + position: fixed; + } + + &-relative { + position: relative; + display: inline-block; + } + } + + .k-animation-container { + @include border-bottom-radius-only( $kendo-border-radius-md ); + } + + .k-animation-container-shown { + overflow: visible; + } + + // Popup + .k-popup { + @include border-radius( $kendo-popup-border-radius ); + margin: 0; + padding: 0; + // padding-block: $kendo-popup-padding-y; + // padding-inline: $kendo-popup-padding-x; + border-width: $kendo-popup-border-width; + border-style: solid; + box-sizing: border-box; + font-size: $kendo-popup-font-size; + line-height: $kendo-popup-line-height; + display: flex; + flex-direction: column; + align-items: stretch; + + .k-item { + outline: none; + } + } + + .k-popup > .k-colorpalette { + padding-block: $kendo-popup-content-padding-y; + padding-inline: $kendo-popup-content-padding-x; + } + + // Transparent popup + .k-popup.k-popup-transparent { + border-width: 0; + background-color: transparent; + box-shadow: none; + } + + // Flush popup + .k-popup.k-popup-flush { + padding: 0; + } + + // Child components + .k-popup > .k-widget, + .k-popup > .k-coloreditor { + border-width: 0; + } + + // Legacy shadow + .k-shadow { + box-shadow: $kendo-popup-shadow; + } + +} + + +@mixin kendo-popup--layout() { + @include kendo-popup--layout-base(); +} diff --git a/packages/core/scss/components/popup/_theme.scss b/packages/core/scss/components/popup/_theme.scss new file mode 100644 index 00000000000..579c85477b2 --- /dev/null +++ b/packages/core/scss/components/popup/_theme.scss @@ -0,0 +1,24 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-popup--theme-base() { + + .k-popup { + @include fill( + $kendo-popup-text, + $kendo-popup-bg, + $kendo-popup-border + ); + @include box-shadow( $kendo-popup-shadow ); + } + + .k-animation-container { + @include border-bottom-radius-only( k-border-radius(md) ); + } + +} + + +@mixin kendo-popup--theme() { + @include kendo-popup--theme-base(); +} diff --git a/packages/core/scss/components/popup/_variables.scss b/packages/core/scss/components/popup/_variables.scss new file mode 100644 index 00000000000..1da4cb08693 --- /dev/null +++ b/packages/core/scss/components/popup/_variables.scss @@ -0,0 +1,39 @@ +/// Horizontal padding of the popup. +/// @group popup +$kendo-popup-padding-x: null !default; +/// Vertical padding of the popup. +/// @group popup +$kendo-popup-padding-y: null !default; +/// Width of the border around the popup. +/// @group popup +$kendo-popup-border-width: null !default; +/// Border radius of the popup. +/// @group popup +$kendo-popup-border-radius: null !default; + +/// Font size of the popup. +/// @group popup +$kendo-popup-font-size: null !default; +/// Line height of the popup. +/// @group popup +$kendo-popup-line-height: null !default; + +/// Horizontal padding of the popup content. +/// @group popup +$kendo-popup-content-padding-x: null !default; +/// Vertical padding of the popup content. +/// @group popup +$kendo-popup-content-padding-y: null !default; + +/// Background color of the popup. +/// @group popup +$kendo-popup-bg: null !default; +/// Text color of the popup. +/// @group popup +$kendo-popup-text: null !default; +/// Border color of the popup. +/// @group popup +$kendo-popup-border: null !default; +/// Box shadow of the popup. +/// @group popup +$kendo-popup-shadow: null !default; diff --git a/packages/core/scss/components/progressbar/_index.scss b/packages/core/scss/components/progressbar/_index.scss new file mode 100644 index 00000000000..af100bf2a45 --- /dev/null +++ b/packages/core/scss/components/progressbar/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-progressbar--styles() { + @include import-once( "progressbar" ) { + @include core-styles(); + @include kendo-progressbar--layout(); + @include kendo-progressbar--theme(); + } +} diff --git a/packages/core/scss/components/progressbar/_layout.scss b/packages/core/scss/components/progressbar/_layout.scss new file mode 100644 index 00000000000..0b1131f5bba --- /dev/null +++ b/packages/core/scss/components/progressbar/_layout.scss @@ -0,0 +1,252 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-progressbar--layout-base() { + + // Base + .k-progressbar { + @include border-radius( k-border-radius(md) ); + --kendo-progressbar-value: 0; + border-width: $kendo-progressbar-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-progressbar-font-family; + font-size: $kendo-progressbar-font-size; + line-height: $kendo-progressbar-line-height; + display: inline-grid; + vertical-align: middle; + position: relative; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + + // Selection + > .k-progressbar-value { + border-width: 0; + border-style: solid; + display: flex; + overflow: hidden; + grid-column: 1 / -1; + grid-row: 1 / -1; + } + + + // Chunks + > .k-progressbar-chunks { + border-width: inherit; + border-style: inherit; + white-space: nowrap; + display: flex; + align-items: stretch; + flex: 1; + gap: 1px; + grid-column: 1 / -1; + grid-row: 1 / -1; + } + .k-progressbar-chunk { + display: block; + border-width: 0; + flex: 1; + } + + } + + + // Status + .k-progress-status-wrap { + width: 100%; + height: 100%; + display: flex; + align-items: center; + flex-shrink: 0; + grid-column: 1 / -1; + grid-row: 1 / -1; + + &.k-progress-start { justify-content: flex-start; } + &.k-progress-center { justify-content: center; } + &.k-progress-end { justify-content: flex-end; } + } + .k-progress-status { + padding-block: 0; + padding-inline: k-spacing(2); + min-width: 10px; + text-align: center; + display: inline-block; + white-space: nowrap; + } + + + // Horizontal + .k-progressbar-horizontal { + width: $kendo-progressbar-horizontal-width; + height: var( --kendo-progressbar-height, #{$kendo-progressbar-height} ); + grid-template-columns: 1fr; + grid-template-rows: 100%; + + + .k-progress-status-wrap { + flex-direction: row; + } + + > .k-progressbar-value { + width: calc( var( --kendo-progressbar-value, 0 ) * 1% ); + flex-direction: row; + + > .k-progress-status-wrap { + width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); + } + } + + + // Chunks + > .k-progressbar-chunks { + flex-direction: row; + } + + // Horizontal reverse + &.k-progressbar-reverse { + + > .k-progressbar-value { + flex-direction: row-reverse; + justify-self: flex-end; + } + + > .k-progressbar-chunks { + flex-direction: row-reverse; + } + } + } + + + // Vertical + .k-progressbar-vertical { + width: var( --kendo-progressbar-height, #{$kendo-progressbar-height} ); + height: 27em; + grid-template-columns: 100%; + grid-template-rows: 1fr; + + + .k-progress-status-wrap { + flex-direction: column-reverse; + } + .k-progress-status { + writing-mode: vertical-lr; + } + + > .k-progressbar-value { + height: calc( var( --kendo-progressbar-value, 0 ) * 1% ); + flex-direction: column-reverse; + align-self: flex-end; + align-items: flex-end; + + > .k-progress-status-wrap { + height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); + } + } + + + // Chunk + > .k-progressbar-chunks { + flex-direction: column-reverse; + } + + // Vertical reverse + &.k-progressbar-reverse { + flex-direction: column; + + > .k-progressbar-value { + flex-direction: column; + align-self: flex-start; + } + + > .k-progressbar-chunks { + flex-direction: column; + } + } + } + + + // Indeterminate + .k-progressbar-indeterminate { + .k-progress-status-wrap, + .k-progressbar-value, + .k-progressbar-chunk { + display: none; + } + } + + + // Blazor specific + .telerik-blazor.k-progressbar-horizontal { + + > .k-progressbar-value, + > .k-progressbar-value > .k-progress-status-wrap { + transition: width .1s ease-in-out; + } + } + + + // RTL + .k-rtl .k-progressbar, + .k-progressbar[dir="rtl"] { + direction: rtl; + } + + + // Circular progressbar + .k-circular-progressbar { + display: inline-block; + text-align: start; + position: relative; + } + + .k-circular-progressbar-surface { + height: 100%; + + & > div { + width: 100%; + height: 100%; + } + + svg { + width: 100%; + height: 100%; + } + } + + .k-circular-progressbar-scale { + fill: none; + } + + .k-circular-progressbar-arc { + transform-box: fill-box; + transform-origin: center center; + transform: rotate(-90deg); + stroke-linecap: round; + fill: none; + } + + .k-circular-progressbar-label { + position: absolute; + text-align: center; + padding: 0; + margin: 0; + } + +} + + +@mixin kendo-progressbar--layout() { + @include kendo-progressbar--layout-base(); +} diff --git a/packages/core/scss/components/progressbar/_theme.scss b/packages/core/scss/components/progressbar/_theme.scss new file mode 100644 index 00000000000..ec47faa0961 --- /dev/null +++ b/packages/core/scss/components/progressbar/_theme.scss @@ -0,0 +1,60 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../../color-system/_functions.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-progressbar--theme-base() { + + @keyframes kendo-progressbar-indeterminate-animation { + from { background-position: 0 0; } + to { background-position: $kendo-progressbar-height 0; } + } + + .k-progressbar { + @include fill( $kendo-progressbar-text, $kendo-progressbar-bg, $kendo-progressbar-border, $kendo-progressbar-gradient ); + + .k-selected { + @include fill( $kendo-progressbar-value-text, $kendo-progressbar-value-bg, $kendo-progressbar-value-border, $kendo-progressbar-value-gradient ); + } + } + + // Chunk progressbar + .k-chunk-progressbar { + // TODO uncomment for 2023 R1 + // background-color: k-if-var( $progressbar-chunk-border, transparent ); + background-color: transparent; + } + .k-progressbar-chunk { + background-color: $kendo-progressbar-bg; + + .k-selected { + background-color: $kendo-progressbar-value-bg; + } + } + + .k-progressbar-indeterminate { + @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border ); + @include striped-gradient( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) ); + background-size: $kendo-progressbar-height $kendo-progressbar-height; + animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing; + } + + + // Circular progressbar + .k-circular-progressbar-scale { + stroke: $kendo-circular-progressbar-scale-stroke; + } + + .k-circular-progressbar-arc { + stroke: $kendo-circular-progressbar-arc-stroke; + transition: stroke .5s ease; + } + +} + + +@mixin kendo-progressbar--theme() { + @include kendo-progressbar--theme-base(); +} diff --git a/packages/core/scss/components/progressbar/_variables.scss b/packages/core/scss/components/progressbar/_variables.scss new file mode 100644 index 00000000000..dc327065863 --- /dev/null +++ b/packages/core/scss/components/progressbar/_variables.scss @@ -0,0 +1,74 @@ +// ProgressBar + +/// The height of the ProgressBar. +/// @group progressbar +$kendo-progressbar-height: null !default; +/// The horizontal width of the ProgressBar. +/// @group progressbar +$kendo-progressbar-horizontal-width: null !default; +/// The animation timing of the ProgressBar. +/// @group progressbar +$kendo-progressbar-animation-timing: null !default; +/// The width of the border around the ProgressBar. +/// @group progressbar +$kendo-progressbar-border-width: null !default; +/// The font family of the ProgressBar. +/// @group progressbar +$kendo-progressbar-font-family: null !default; +/// The font size of the ProgressBar. +/// @group progressbar +$kendo-progressbar-font-size: null !default; +/// The line height of the ProgressBar. +/// @group progressbar +$kendo-progressbar-line-height: null !default; + +/// The background color of the ProgressBar. +/// @group progressbar +$kendo-progressbar-bg: null !default; +/// The text color of the ProgressBar. +/// @group progressbar +$kendo-progressbar-text: null !default; +/// The border color of the ProgressBar. +/// @group progressbar +$kendo-progressbar-border: null !default; +/// The background gradient of the ProgressBar. +/// @group progressbar +$kendo-progressbar-gradient: null !default; + +/// The progress background color of the ProgressBar. +/// @group progressbar +$kendo-progressbar-value-bg: null !default; +/// The progress text color of the ProgressBar. +/// @group progressbar +$kendo-progressbar-value-text: null !default; +/// The progress border color of the ProgressBar. +/// @group progressbar +$kendo-progressbar-value-border: null !default; +/// The progress background gradient of the ProgressBar. +/// @group progressbar +$kendo-progressbar-value-gradient: null !default; + +/// The background color of the indeterminate ProgressBar. +/// @group progressbar +$kendo-progressbar-indeterminate-bg: null !default; +/// The text color of the indeterminate ProgressBar. +/// @group progressbar +$kendo-progressbar-indeterminate-text: null !default; +/// The border color of the indeterminate ProgressBar. +/// @group progressbar +$kendo-progressbar-indeterminate-border: null !default; +/// The background gradient of the indeterminate ProgressBar. +/// @group progressbar +$kendo-progressbar-indeterminate-gradient: null !default; + +/// The border color of the chunk ProgressBar. +/// @group progressbar +$kendo-progressbar-chunk-border: null !default; + +// Circular Progressbar +/// The arc stroke color of the circular ProgressBar. +/// @group progressbar +$kendo-circular-progressbar-arc-stroke: null !default; +/// The scale stroke background color of the circular ProgressBar. +/// @group progressbar +$kendo-circular-progressbar-scale-stroke: null !default; diff --git a/packages/core/scss/components/prompt/_index.scss b/packages/core/scss/components/prompt/_index.scss new file mode 100644 index 00000000000..fb8cb6f6cb3 --- /dev/null +++ b/packages/core/scss/components/prompt/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-prompt--styles() { + @include import-once( "prompt" ) { + @include core-styles(); + @include kendo-prompt--layout(); + @include kendo-prompt--theme(); + @include kendo-utils--flex-grid--flex-direction(); + } +} diff --git a/packages/core/scss/components/prompt/_layout.scss b/packages/core/scss/components/prompt/_layout.scss new file mode 100644 index 00000000000..177d27679cc --- /dev/null +++ b/packages/core/scss/components/prompt/_layout.scss @@ -0,0 +1,78 @@ +@use "./variables.scss" as *; + +@mixin kendo-prompt--layout-base() { + + // Prompt + .k-prompt { + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + + // Toolbar + .k-toolbar { + border-top-width: 0; + border-inline-width: 0; + } + } + + // Content + .k-prompt-content { + padding-block: $kendo-prompt-content-padding-y; + padding-inline: $kendo-prompt-content-padding-x; + display: flex; + flex-flow: column nowrap; + flex: 1 1 auto; + gap: $kendo-prompt-content-spacing; + overflow: auto; + } + + .k-prompt-view { + display: flex; + flex-direction: column; + flex: 1 1 auto; + gap: $kendo-prompt-content-spacing; + } + + // Prompt Expander + .k-prompt-expander { + display: flex; + flex-direction: column; + flex: 1; + align-items: flex-start; + gap: $kendo-prompt-expander-spacing; + } + + .k-prompt-expander-content { + display: flex; + flex-flow: column; + flex: 0 0 auto; + gap: $kendo-prompt-expander-spacing; + align-self: stretch; + } + + .k-prompt-suggestion { + border-width: 1px; + border-style: solid; + border-radius: $kendo-prompt-suggestion-border-radius; + padding-block: $kendo-prompt-suggestion-padding-y; + padding-inline: $kendo-prompt-suggestion-padding-x; + cursor: pointer; + } + + .k-prompt-setting { + display: flex; + flex-direction: column; + } + + // Actions + .k-prompt-actions.k-actions { + margin: 0; + } + +} + + +@mixin kendo-prompt--layout() { + @include kendo-prompt--layout-base(); +} diff --git a/packages/core/scss/components/prompt/_theme.scss b/packages/core/scss/components/prompt/_theme.scss new file mode 100644 index 00000000000..97485343876 --- /dev/null +++ b/packages/core/scss/components/prompt/_theme.scss @@ -0,0 +1,44 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-prompt--theme-base() { + + .k-prompt { + @include fill( + $kendo-prompt-text, + $kendo-prompt-bg, + $kendo-prompt-border + ); + } + + .k-prompt-header { + @include fill( + $kendo-prompt-header-text, + $kendo-prompt-header-bg, + $kendo-prompt-header-border + ); + } + + .k-prompt-content { + @include fill( + $kendo-prompt-content-text, + $kendo-prompt-content-bg, + $kendo-prompt-content-border + ); + } + + .k-prompt-suggestion { + @include fill( + $kendo-prompt-suggestion-text, + $kendo-prompt-suggestion-bg, + $kendo-prompt-suggestion-border + ); + @include box-shadow( $kendo-prompt-suggestion-shadow ); + } + +} + + +@mixin kendo-prompt--theme() { + @include kendo-prompt--theme-base(); +} diff --git a/packages/core/scss/components/prompt/_variables.scss b/packages/core/scss/components/prompt/_variables.scss new file mode 100644 index 00000000000..963728861de --- /dev/null +++ b/packages/core/scss/components/prompt/_variables.scss @@ -0,0 +1,66 @@ +// AIPrompt + +/// The text color of the AIPrompt. +/// @group prompt +$kendo-prompt-text: null !default; +/// The background color of the AIPrompt. +/// @group prompt +$kendo-prompt-bg: null !default; +/// The border color of the AIPrompt. +/// @group prompt +$kendo-prompt-border: null !default; + +/// The text color of the AIPrompt header. +/// @group prompt +$kendo-prompt-header-text: null !default; +/// The background color of the AIPrompt header. +/// @group prompt +$kendo-prompt-header-bg: null !default; +/// The border color of the AIPrompt header. +/// @group prompt +$kendo-prompt-header-border: null !default; + +/// The vertical padding of the AIPrompt content. +/// @group prompt +$kendo-prompt-content-padding-y: null !default; +/// The horizontal padding of the AIPrompt content. +/// @group prompt +$kendo-prompt-content-padding-x: null !default; +/// The spacing between the items of the AIPrompt content. +/// @group prompt +$kendo-prompt-content-spacing: null !default; +/// The text color of the AIPrompt content. +/// @group prompt +$kendo-prompt-content-text: null !default; +/// The background color of the AIPrompt content. +/// @group prompt +$kendo-prompt-content-bg: null !default; +/// The text border of the AIPrompt content. +/// @group prompt +$kendo-prompt-content-border: null !default; + +/// The spacing between the items of the AIPrompt content expander. +/// @group prompt +$kendo-prompt-expander-spacing: null !default; + +/// The vertical padding of the AIPrompt suggestion container. +/// @group prompt +$kendo-prompt-suggestion-padding-y: null !default; +/// The horizontal padding of the AIPrompt suggestion container. +/// @group prompt +$kendo-prompt-suggestion-padding-x: null !default; +/// The border radius of the AIPrompt suggestion container. +/// @group prompt +$kendo-prompt-suggestion-border-radius: null !default; +/// The text color of the AIPrompt suggestion container. +/// @group prompt +$kendo-prompt-suggestion-text: null !default; +/// The background color of the AIPrompt suggestion container. +/// @group prompt +$kendo-prompt-suggestion-bg: null !default; +/// The border color of the AIPrompt suggestion container. +/// @group prompt +$kendo-prompt-suggestion-border: null !default; +/// The elevation of the AIPrompt suggestion container. +/// @group prompt +$kendo-prompt-suggestion-shadow: null !default; diff --git a/packages/core/scss/components/radio/_index.scss b/packages/core/scss/components/radio/_index.scss new file mode 100644 index 00000000000..3f267bdcaee --- /dev/null +++ b/packages/core/scss/components/radio/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-radio--styles() { + @include import-once( "radio" ) { + @include core-styles(); + @include kendo-radio--layout(); + @include kendo-radio--theme(); + } +} diff --git a/packages/core/scss/components/radio/_layout.scss b/packages/core/scss/components/radio/_layout.scss new file mode 100644 index 00000000000..86f443f2410 --- /dev/null +++ b/packages/core/scss/components/radio/_layout.scss @@ -0,0 +1,233 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-radio--layout-base() { + + // Radio + .k-radio { + @include border-radius( $kendo-radio-radius ); + margin: 0; + padding: 0; + line-height: initial; + border-width: $kendo-radio-border-width; + border-style: solid; + outline: 0; + box-sizing: border-box; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + flex: none; + vertical-align: middle; + position: relative; + cursor: pointer; + -webkit-appearance: none; + } + + + // Radio indicator + .k-radio::before { + @if $kendo-radio-indicator-type == "glyph" { + content: $kendo-radio-checked-glyph; + width: 1em; + height: 1em; + font-family: $kendo-radio-glyph-font-family; + line-height: 1; + transform: scale(0) translate(-50%, -50%); + overflow: hidden; + position: absolute; + top: 50%; + left: 50%; + } + + @if $kendo-radio-indicator-type == "image" { + content: ""; + display: block; + width: 100%; + height: 100%; + mask-repeat: no-repeat; + } + } + + + // Checked state + .k-radio:checked, + .k-radio.k-checked { + @if $kendo-radio-indicator-type == "image" { + &::before { + background-color: currentColor; + mask-image: $kendo-radio-checked-image; + } + } + + @if $kendo-radio-indicator-type == "glyph" { + &::before { + transform: scale(1) translate(-50%, -50%); + } + } + } + + + // Disabled state + .k-radio:disabled, + .k-radio.k-disabled { + @include disabled( $kendo-disabled-styling... ); + } + .k-radio:disabled:checked, + .k-radio.k-disabled.k-checked { + @if $kendo-radio-indicator-type == "image" { + background-image: $kendo-radio-disabled-checked-image; + } + } + + + // Radio wrap + .k-radio-wrap { + flex: none; + display: inline-flex; + flex-flow: row nowrap; + gap: 0; + align-items: center; + align-self: start; + vertical-align: middle; + position: relative; + + &::before { + content: "\200b"; + width: 0px; + overflow: hidden; + flex: none; + display: inline-block; + vertical-align: top; + } + } + + + // Radio label + .k-radio-label { + margin: 0; + padding: 0; + display: inline-flex; + align-items: flex-start; + gap: $kendo-radio-label-margin-x; + vertical-align: middle; + position: relative; + cursor: pointer; + + .k-ripple { + // Hide ripple temporarily + visibility: hidden !important; // stylelint-disable-line declaration-no-important + } + } + .k-radio + .k-label, + .k-radio-wrap + .k-label, + .k-radio + .k-radio-label, + .k-radio-wrap + .k-radio-label { + display: inline; + margin-inline-start: $kendo-radio-label-margin-x; + } + + + // Empty label + .k-radio-label:empty { + display: none !important; // stylelint-disable-line declaration-no-important + } + .k-radio-label.k-no-text { + min-width: 1px; + } + + + // Radio list + .k-radio-list { + margin: 0; + padding: 0; + display: flex; + flex-flow: column nowrap; + gap: 0; + list-style: none; + } + .k-radio-item, + .k-radio-list-item { + padding-block: $kendo-radio-list-item-padding-y; + padding-inline: $kendo-radio-list-item-padding-x; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + gap: k-spacing(1); + + .k-radio-label { + margin: 0; + } + } + .k-radio-list-horizontal, + .k-radio-list.k-list-horizontal { + display: flex; + flex-flow: row wrap; + gap: $kendo-radio-list-spacing; + } + + + // Ripple + .k-ripple-container { + .k-radio::after { + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + border-radius: 100%; + z-index: -1; + transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); + transform: translate(-50%, -50%) scale(0); + transform-origin: center center; + } + + .k-radio:focus, + .k-radio.k-focus { + box-shadow: none !important; // stylelint-disable-line declaration-no-important + } + + .k-radio:disabled::after, + .k-radio.k-disabled::after { + display: none; + } + + .k-radio:disabled::after, + .k-radio.k-disabled::after { + display: none; + } + } + + + // Radio size + @each $size, $size-props in $kendo-radio-sizes { + $_size: map.get( $size-props, size ); + $_glyph-size: map.get( $size-props, glyph-size ); + $_ripple-size: map.get( $size-props, ripple-size ); + + .k-radio-#{$size} { + width: $_size; + height: $_size; + + &::before { + font-size: $_glyph-size; + } + } + .k-ripple-container { + .k-radio-#{$size}::after { + width: $_ripple-size; + height: $_ripple-size; + } + } + } + +} + + +@mixin kendo-radio--layout() { + @include kendo-radio--layout-base(); +} diff --git a/packages/core/scss/components/radio/_theme.scss b/packages/core/scss/components/radio/_theme.scss new file mode 100644 index 00000000000..9e615bd019d --- /dev/null +++ b/packages/core/scss/components/radio/_theme.scss @@ -0,0 +1,96 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-radio--theme-base() { + + // Radio + .k-radio { + @include fill( + $kendo-radio-text, + $kendo-radio-bg, + $kendo-radio-border + ); + } + + + // Hover state + .k-radio:hover, + .k-radio.k-hover { + @include fill( + $kendo-radio-hover-text, + $kendo-radio-hover-bg, + $kendo-radio-hover-border + ); + } + + + // Focus state + .k-radio:focus, + .k-radio.k-focus { + @include fill( $border: $kendo-radio-focus-border ); + @include focus-indicator( $kendo-radio-focus-shadow ); + } + + + // Invalid state + .k-radio.k-invalid, + .k-radio.ng-invalid.ng-touched, + .k-radio.ng-invalid.ng-dirty { + @include fill( $border: $kendo-radio-invalid-border ); + } + .k-radio.k-invalid + .k-radio-label, + .k-radio.ng-invalid.ng-touched + .k-radio-label, + .k-radio.ng-invalid.ng-dirty + .k-radio-label { + @include fill( $color: $kendo-radio-invalid-text ); + } + + + // Checked + .k-radio:checked, + .k-radio.k-checked { + @include fill( + $kendo-radio-checked-text, + $kendo-radio-checked-bg, + $kendo-radio-checked-border + ); + } + .k-radio:checked:focus, + .k-radio.k-checked.k-focus { + @include fill( $border: $kendo-radio-focus-checked-border ); + @include focus-indicator( $kendo-radio-focus-checked-shadow ); + } + + + // Disabled + .k-radio:disabled, + .k-radio.k-disabled { + @include fill( + $kendo-radio-disabled-text, + $kendo-radio-disabled-bg, + $kendo-radio-disabled-border + ); + } + .k-radio:checked:disabled, + .k-radio.k-checked.k-disabled { + @include fill( + $kendo-radio-disabled-checked-text, + $kendo-radio-disabled-checked-bg, + $kendo-radio-disabled-checked-border + ); + } + + + // Ripple + .k-ripple-container { + .k-radio::after { + background: $kendo-radio-ripple-bg; + opacity: $kendo-radio-ripple-opacity; + } + } + +} + + +@mixin kendo-radio--theme() { + @include kendo-radio--theme-base(); +} diff --git a/packages/core/scss/components/radio/_variables.scss b/packages/core/scss/components/radio/_variables.scss new file mode 100644 index 00000000000..fca8b4176a6 --- /dev/null +++ b/packages/core/scss/components/radio/_variables.scss @@ -0,0 +1,167 @@ +// Radio button + +/// The border radius of the RadioButton. +/// @group radio +$kendo-radio-radius: null !default; +/// The border width of the RadioButton. +/// @group radio +$kendo-radio-border-width: null !default; + +/// The size of a small RadioButton. +/// @group radio +$kendo-radio-sm-size: null !default; +/// The size of a medium RadioButton. +/// @group radio +$kendo-radio-md-size: null !default; +/// The size of a large RadioButton. +/// @group radio +$kendo-radio-lg-size: null !default; + +/// The glyph size of a small RadioButton. +/// @group radio +$kendo-radio-sm-glyph-size: null !default; +/// The glyph size of a medium RadioButton. +/// @group radio +$kendo-radio-md-glyph-size: null !default; +/// The glyph size of a large RadioButton. +/// @group radio +$kendo-radio-lg-glyph-size: null !default; + +/// The ripple size of a small RadioButton. +/// @group radio +$kendo-radio-sm-ripple-size: null !default; +/// The ripple size of a medium RadioButton. +/// @group radio +$kendo-radio-md-ripple-size: null !default; +/// The ripple size of a large RadioButton. +/// @group radio +$kendo-radio-lg-ripple-size: null !default; + +/// The map with the different RadioButton sizes. +/// @group radio +$kendo-radio-sizes: null !default; + +/// The background color of the RadioButton. +/// @group radio +$kendo-radio-bg: null !default; +/// The color of the RadioButton. +/// @group radio +$kendo-radio-text: null !default; +/// The border color of the RadioButton. +/// @group radio +$kendo-radio-border: null !default; + +/// The background color of the hovered RadioButton. +/// @group radio +$kendo-radio-hover-bg: null !default; +/// The color of the hovered RadioButton. +/// @group radio +$kendo-radio-hover-text: null !default; +/// The border color of the hovered RadioButton. +/// @group radio +$kendo-radio-hover-border: null !default; + +/// The background color of the checked RadioButton. +/// @group radio +$kendo-radio-checked-bg: null !default; +/// The color of the checked RadioButton. +/// @group radio +$kendo-radio-checked-text: null !default; +/// The border color of the checked RadioButton. +/// @group radio +$kendo-radio-checked-border: null !default; + +/// The border color of the focused RadioButton. +/// @group radio +$kendo-radio-focus-border: null !default; +/// The box shadow of the focused RadioButton. +/// @group radio +$kendo-radio-focus-shadow: null !default; + +/// The border color of the focused and checked RadioButton. +/// @group radio +$kendo-radio-focus-checked-border: null !default; +/// The box shadow of the focused and checked RadioButton. +/// @group radio +$kendo-radio-focus-checked-shadow: null !default; + +/// The background color of the disabled RadioButton. +/// @group radio +$kendo-radio-disabled-bg: null !default; +/// The color of the disabled RadioButton. +/// @group radio +$kendo-radio-disabled-text: null !default; +/// The border color of the disabled RadioButton. +/// @group radio +$kendo-radio-disabled-border: null !default; + +/// The background color of the disabled and checked RadioButton. +/// @group radio +$kendo-radio-disabled-checked-bg: null !default; +/// The color of the disabled and checked RadioButton. +/// @group radio +$kendo-radio-disabled-checked-text: null !default; +/// The border color of disabled and checked RadioButton. +/// @group radio +$kendo-radio-disabled-checked-border: null !default; + +/// The background color of the invalid RadioButton. +/// @group radio +$kendo-radio-invalid-bg: null !default; +/// The color of the invalid RadioButton. +/// @group radio +$kendo-radio-invalid-text: null !default; +/// The border color of the invalid RadioButton. +/// @group radio +$kendo-radio-invalid-border: null !default; + + +// Radio indicator + +/// The type of the RadioButton indicator. +/// @group radio +$kendo-radio-indicator-type: null !default; + +/// The font family of the RadioButton indicator glyph. +/// @group radio +$kendo-radio-glyph-font-family: null !default; +/// The glyph of the RadioButton indicator. +/// @group radio +$kendo-radio-checked-glyph: null !default; + +/// The image of the checked RadioButton indicator. +/// @group radio +$kendo-radio-checked-image: null !default; +/// The image of the disabled and checked RadioButton indicator. +/// @group radio +$kendo-radio-disabled-checked-image: null !default; + + +// Radio label + +/// The horizontal margin of the RadioButton inside of a label. +/// @group radio +$kendo-radio-label-margin-x: null !default; + + +// Radio list + +/// The horizontal list item margin of the RadioButton. +/// @group radio +$kendo-radio-list-spacing: null !default; +/// The horizontal list item padding of the RadioButton. +/// @group radio +$kendo-radio-list-item-padding-x: null !default; +/// The vertical list item padding of the RadioButton. +/// @group radio +$kendo-radio-list-item-padding-y: null !default; + + +// Radio ripple + +/// The background color of the RadioButton ripple. +/// @group radio +$kendo-radio-ripple-bg: null !default; +/// The opacity of the RadioButton ripple. +/// @group radio +$kendo-radio-ripple-opacity: null !default; diff --git a/packages/core/scss/components/rating/_index.scss b/packages/core/scss/components/rating/_index.scss new file mode 100644 index 00000000000..cd542bff8a2 --- /dev/null +++ b/packages/core/scss/components/rating/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-rating--styles() { + @include import-once( "rating" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-rating--layout(); + @include kendo-rating--theme(); + } +} diff --git a/packages/core/scss/components/rating/_layout.scss b/packages/core/scss/components/rating/_layout.scss new file mode 100644 index 00000000000..0ff82533b3e --- /dev/null +++ b/packages/core/scss/components/rating/_layout.scss @@ -0,0 +1,98 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-rating--layout-base() { + + .k-rating { + margin: 0; + padding: 0; + border-width: 0; + box-sizing: border-box; + outline: 0; + background: none; + font-family: $kendo-rating-font-family; + font-size: $kendo-rating-font-size; + line-height: $kendo-rating-line-height; + display: inline-flex; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + &.k-readonly { + pointer-events: none; + } + } + + .k-rating-container { + flex: 0 1 auto; + position: relative; + margin-block: 0; + margin-inline: $kendo-rating-container-margin-x; + + .k-rating-item { + display: inline-flex; + position: relative; + padding-block: $kendo-rating-item-padding-y; + padding-inline: $kendo-rating-item-padding-x; + align-items: center; + vertical-align: middle; + margin: 0; + outline: 0; + overflow: hidden; + transition: color 200ms ease-out 0s; + + * { + pointer-events: none; + } + + .k-rating-precision-part, + .k-rating-precision-complement { + display: inherit; + position: absolute; + top: $kendo-rating-item-padding-y; + left: $kendo-rating-item-padding-x; + overflow: hidden; + } + + .k-rating-precision-complement { + direction: rtl; + } + + svg { + fill: currentColor; + } + } + } + + .k-rating-label { + display: inline-flex; + align-items: center; + vertical-align: middle; + line-height: $kendo-rating-label-line-height; + margin-block: $kendo-rating-label-margin-y; + margin-inline: $kendo-rating-label-margin-x; + } + + .k-rtl, + [dir="rtl"] { + .k-rating-precision-part { + left: auto; + right: $kendo-rating-item-padding-x; + } + + .k-rating-item .k-rating-precision-complement { + direction: ltr; + } + } + +} + + +@mixin kendo-rating--layout() { + @include kendo-rating--layout-base(); +} diff --git a/packages/core/scss/components/rating/_theme.scss b/packages/core/scss/components/rating/_theme.scss new file mode 100644 index 00000000000..ef42525fc0f --- /dev/null +++ b/packages/core/scss/components/rating/_theme.scss @@ -0,0 +1,48 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-rating--theme-base() { + + .k-rating { + color: $kendo-component-text; + + &:focus, + &.k-focus { + + .k-rating-item { + > .k-icon { + filter: drop-shadow( $kendo-rating-icon-focus-shadow ); + } + + &.k-selected > .k-icon { + filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow ); + } + } + } + } + + .k-rating-item { + color: $kendo-rating-icon-text; + + &.k-selected { + color: $kendo-rating-icon-selected-text; + + &:focus, + &.k-focus { + color: $kendo-rating-icon-focus-text; + } + } + + &:hover, + &.k-hover { + color: $kendo-rating-icon-hover-text; + cursor: pointer; + } + } + +} + + +@mixin kendo-rating--theme() { + @include kendo-rating--theme-base(); +} diff --git a/packages/core/scss/components/rating/_variables.scss b/packages/core/scss/components/rating/_variables.scss new file mode 100644 index 00000000000..fd4185b4ba2 --- /dev/null +++ b/packages/core/scss/components/rating/_variables.scss @@ -0,0 +1,56 @@ +// Rating + +/// The font family of the Rating. +/// @group rating +$kendo-rating-font-family: null !default; +/// The font size of the Rating. +/// @group rating +$kendo-rating-font-size: null !default; +/// The line height of the Rating. +/// @group rating +$kendo-rating-line-height: null !default; + +/// The horizontal margin of the Rating container. +/// @group rating +$kendo-rating-container-margin-x: null !default; + +/// The horizontal padding of the Rating item. +/// @group rating +$kendo-rating-item-padding-x: null !default; +/// The vertical padding of the Rating item. +/// @group rating +$kendo-rating-item-padding-y: null !default; + +/// The horizontal margin of the Rating label. +/// @group rating +$kendo-rating-label-margin-x: null !default; +/// The vertical margin of the Rating label. +/// @group rating +$kendo-rating-label-margin-y: null !default; +/// The line height of the Rating label. +/// @group rating +$kendo-rating-label-line-height: null !default; + +/// The size of the Rating icon. +/// @group rating +$kendo-rating-icon-size: null !default; + +/// The text color of the Rating icon. +/// @group rating +$kendo-rating-icon-text: null !default; +/// The text color of the selected Rating icon. +/// @group rating +$kendo-rating-icon-selected-text: null !default; +/// The text color of the hovered Rating icon. +/// @group rating +$kendo-rating-icon-hover-text: null !default; +/// The text color of the focused Rating icon. +/// @group rating +$kendo-rating-icon-focus-text: null !default; + +/// The shadow of the focused Rating icon. +/// @group rating +$kendo-rating-icon-focus-shadow: null !default; +/// The shadow of the focused and selected Rating icon. +/// @group rating +$kendo-rating-icon-focus-selected-shadow: null !default; diff --git a/packages/core/scss/components/responsivepanel/_index.scss b/packages/core/scss/components/responsivepanel/_index.scss new file mode 100644 index 00000000000..0651bec6d49 --- /dev/null +++ b/packages/core/scss/components/responsivepanel/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-responsive-panel--styles() { + @include import-once( "responsive-panel" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-responsive-panel--layout(); + @include kendo-responsive-panel--theme(); + } +} diff --git a/packages/core/scss/components/responsivepanel/_layout.scss b/packages/core/scss/components/responsivepanel/_layout.scss new file mode 100644 index 00000000000..e828d0bd9f7 --- /dev/null +++ b/packages/core/scss/components/responsivepanel/_layout.scss @@ -0,0 +1,52 @@ +@mixin kendo-responsive-panel--layout-base() { + + .k-rpanel {} + + // Variants + .k-rpanel-left, + .k-rpanel-right { + position: fixed; + display: block; + overflow: auto; + min-width: 320px; + height: 100%; + top: 0; + + & + * { + overflow: auto; + } + + &.k-rpanel-expanded { + transform: translateX(0) translateZ(0); + } + } + .k-rpanel-left { + transform: translateX(-100%) translateZ(0); + left: 0; + } + .k-rpanel-right { + transform: translateX(100%) translateZ(0); + right: 0; + } + + // Top + .k-rpanel-top { + position: static; + max-height: 0; + } + .k-rpanel-top.k-rpanel-expanded { + max-height: 568px; + overflow: visible !important; // stylelint-disable-line declaration-no-important + } + + // Toggle button + .k-rpanel-toggle { + touch-action: manipulation; + } + +} + + +@mixin kendo-responsive-panel--layout() { + @include kendo-responsive-panel--layout-base(); +} diff --git a/packages/core/scss/components/responsivepanel/_theme.scss b/packages/core/scss/components/responsivepanel/_theme.scss new file mode 100644 index 00000000000..f329ecfbe0f --- /dev/null +++ b/packages/core/scss/components/responsivepanel/_theme.scss @@ -0,0 +1,10 @@ +@mixin kendo-responsive-panel--theme-base() { + + .k-rpanel {} + +} + + +@mixin kendo-responsive-panel--theme() { + @include kendo-responsive-panel--theme-base(); +} diff --git a/packages/core/scss/components/responsivepanel/_variables.scss b/packages/core/scss/components/responsivepanel/_variables.scss new file mode 100644 index 00000000000..f2fccb563bb --- /dev/null +++ b/packages/core/scss/components/responsivepanel/_variables.scss @@ -0,0 +1 @@ +// Responsive panel diff --git a/packages/core/scss/components/ripple/_index.scss b/packages/core/scss/components/ripple/_index.scss new file mode 100644 index 00000000000..cd8d5e10a93 --- /dev/null +++ b/packages/core/scss/components/ripple/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-ripple--styles() { + @include import-once( "ripple" ) { + @include core-styles(); + @include kendo-ripple--layout(); + @include kendo-ripple--theme(); + } +} diff --git a/packages/core/scss/components/ripple/_layout.scss b/packages/core/scss/components/ripple/_layout.scss new file mode 100644 index 00000000000..d6420a0c253 --- /dev/null +++ b/packages/core/scss/components/ripple/_layout.scss @@ -0,0 +1,56 @@ +@mixin kendo-ripple--layout-base() { + + .k-ripple-target { + position: relative; + } + + .k-ripple { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + overflow: hidden; + pointer-events: none; + } + + .k-ripple-blob { + pointer-events: none; + position: absolute; + border-radius: 50%; + padding: 0; + transform: translate(-50%, -50%) scale(0); + transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1); + opacity: .1; + background-color: currentColor; + } + + .k-primary .k-ripple-blob { + opacity: .2; + } + + .k-ripple-focus::after { + visibility: visible; + animation: ripple 600ms ease-out; + } + + @keyframes ripple { + 0% { + transform: translate(-50%, -50%) scale(0); + } + 20% { + transform: translate(-50%, -50%) scale(1); + } + 100% { + opacity: 0; + transform: translate(-50%, -50%) scale(1); + } + } + +} + + +@mixin kendo-ripple--layout() { + @include kendo-ripple--layout-base(); +} diff --git a/packages/core/scss/components/ripple/_theme.scss b/packages/core/scss/components/ripple/_theme.scss new file mode 100644 index 00000000000..1cb200986d5 --- /dev/null +++ b/packages/core/scss/components/ripple/_theme.scss @@ -0,0 +1,10 @@ +@mixin kendo-ripple--theme-base() { + + .k-ripple {} + +} + + +@mixin kendo-ripple--theme() { + @include kendo-ripple--theme-base(); +} diff --git a/packages/core/scss/components/ripple/_variables.scss b/packages/core/scss/components/ripple/_variables.scss new file mode 100644 index 00000000000..0e12cdbc45b --- /dev/null +++ b/packages/core/scss/components/ripple/_variables.scss @@ -0,0 +1 @@ +// Ripple diff --git a/packages/core/scss/components/scheduler/_index.scss b/packages/core/scss/components/scheduler/_index.scss new file mode 100644 index 00000000000..2f3822b24cb --- /dev/null +++ b/packages/core/scss/components/scheduler/_index.scss @@ -0,0 +1,34 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../adaptive/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../datetimepicker/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../dialog/_index.scss" as *; +@use "../tooltip/_index.scss" as *; +@use "../time-marker/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-scheduler--styles() { + @include import-once( "scheduler" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-adaptive--styles(); + @include kendo-button--styles(); + @include kendo-date-time-picker--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-dialog--styles(); + @include kendo-tooltip--styles(); + @include kendo-time-marker--styles(); + @include kendo-scheduler--layout(); + @include kendo-scheduler--theme(); + @include kendo-utils--typography--text-overflow(); + } +} diff --git a/packages/core/scss/components/scheduler/_layout.scss b/packages/core/scss/components/scheduler/_layout.scss new file mode 100644 index 00000000000..c94f5871832 --- /dev/null +++ b/packages/core/scss/components/scheduler/_layout.scss @@ -0,0 +1,1048 @@ +@use "sass:list"; +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../toolbar/_variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-scheduler--layout-base() { + + // Layout + .k-scheduler { + border-width: $kendo-scheduler-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-scheduler-font-family; + font-size: $kendo-scheduler-font-size; + line-height: $kendo-scheduler-line-height; + display: flex; + flex-direction: column; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + table, + thead, + tfoot, + tbody, + tr, + th, + td, + div, + .k-scheduler-edit-dialog, + > * { + border-color: inherit; + } + } + + kendo-scheduler.k-scheduler { + overflow: hidden; + + &.k-readonly-scheduler .k-event-delete { + display: none; + } + } + + // Common + .k-scheduler-table { + width: 100%; + max-width: none; + border-collapse: separate; + border-spacing: 0; + table-layout: fixed; + + td, + th { + padding-block: $kendo-scheduler-cell-padding-y; + padding-inline: $kendo-scheduler-cell-padding-x; + height: $kendo-scheduler-cell-height; + overflow: hidden; + white-space: nowrap; + border-style: solid; + border-width: 0 0 1px 1px; + vertical-align: top; + box-sizing: content-box; + } + td:first-child, + th:first-child { + border-left-width: 0; + } + .k-middle-row td { + border-bottom-style: dotted; + } + + .k-link { + cursor: pointer; + } + } + + .k-scheduler-layout-flex { + overflow: auto; + + .k-scheduler-head { + position: sticky; + top: 0; + z-index: 3; + } + .k-scheduler-body { + position: relative; + } + + .k-scheduler-head, + .k-scheduler-body { + display: flex; + flex: 100%; + flex-wrap: wrap; + } + + .k-scheduler-row { + display: flex; + flex: 1 1 100%; + width: 100%; + min-width: 0; + } + + .k-scheduler-group { + display: flex; + flex: 1 1 100%; + width: 100%; + min-width: 0; + flex-wrap: wrap; + + .k-group-cell { + display: flex; + flex: 1 1 auto; + flex-wrap: wrap; + overflow: auto; + } + + .k-group-content { + padding: 0; + display: flex; + flex: 1 1 100%; + width: 100%; + border-width: 0; + flex-wrap: wrap; + } + + &.k-group-horizontal { + .k-group-cell { + flex-basis: 100%; + border-width: 0; + padding: 0; + } + } + } + + &.k-scheduler-timeline-view .k-scheduler-body .k-scheduler-cell { + flex-basis: auto; + } + + + .k-more-events { + bottom: 2px; + left: 0; + width: 100%; + } + + .k-scheduler-cell { + display: flex; + flex: 1 1 100%; + padding-block: $kendo-scheduler-cell-padding-y; + padding-inline: $kendo-scheduler-cell-padding-y; + min-height: 1.5em; + overflow: hidden; + white-space: nowrap; + border-style: solid; + border-width: 0 1px 1px 0; + vertical-align: top; + box-sizing: content-box; + + &.k-slot-cell { + position: relative; + } + + &.k-heading-cell { + justify-content: center; + font-weight: bold; + } + + &.k-side-cell { + justify-content: flex-end; + flex-grow: 0; + flex-basis: auto; + overflow: visible; + } + + &.k-major-cell { + border-bottom-width: 0; + } + } + + .k-middle-row .k-scheduler-cell { + border-bottom-style: dotted; + } + + .k-resource-cell { + flex: none; + display: flex; + flex-wrap: wrap; + overflow: visible; + } + + .k-resource-content { + display: flex; + flex-wrap: wrap; + padding: 0; + border-width: 0; + } + + .k-sticky-cell { + display: flex; + flex-wrap: wrap; + flex-basis: 0; + position: sticky; + left: 0; + z-index: 3; + } + } + + + // Header and footer + .k-scheduler-toolbar { + border-width: 0; + border-bottom-width: $kendo-toolbar-border-width; + white-space: nowrap; + flex-shrink: 0; + position: relative; + z-index: 2; + + .k-widget { + font-size: inherit; + } + + // Current date + .k-nav-current { + color: inherit; + outline: 0; + text-decoration: none; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + gap: $kendo-icon-spacing; + cursor: pointer; + } + + + // Scheduler search + .k-scheduler-search { + display: inline-flex; + flex-flow: row nowrap; + } + } + + + // Scheduler navigation + .k-scheduler-navigation {} + + .k-scheduler-toolbar .k-views-dropdown { + width: auto; + font: inherit; + } + + // Scheduler footer + .k-scheduler-footer { + @include box-shadow( none ); + border-width: 0; + border-top-width: $kendo-toolbar-border-width; + white-space: nowrap; + flex-shrink: 0; + position: relative; + } + + + // Layout + .k-scheduler-layout { + width: 100%; + border-collapse: separate; + border-spacing: 0; + flex: 1 1 auto; + position: relative; + z-index: 1; + + > tbody > tr > td { + padding: 0; + vertical-align: top; + } + + td.k-selected, + .k-scheduler-cell.k-selected { + outline: none; + } + + // Remove bottom border from first cell of hours cells spaning on two rows + tr + tr, + .k-scheduler-pane + .k-scheduler-pane { + .k-scheduler-times tr { + th { + border-bottom-color: transparent; + } + + .k-slot-cell, + .k-scheduler-times-all-day, + &:last-child th { + border-bottom-color: inherit; + } + } + } + } + .k-scheduler-layout.k-scheduler-flex-layout { + display: flex; + flex-direction: column; + + &.k-scheduler-weekview, + &.k-scheduler-dayview { + .k-scheduler-pane:first-child .k-scheduler-table { + table-layout: fixed; + } + } + } + + + // Scheduler view header + .k-scheduler-header, + .k-scheduler-view-header { + padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); + } + .k-scheduler-header th { + text-align: center; + } + + .k-scheduler-header, + .k-scheduler-header-wrap, + .k-scheduler-header-wrap > div { + border-color: inherit; + overflow: hidden; + } + .k-scheduler-header-wrap { + border-width: 0; + border-style: solid; + position: relative; + } + .k-scheduler-times { + border-color: inherit; + position: relative; + overflow: hidden; + + .k-scheduler-table { table-layout: auto; } + + th { + border-width: 0 1px 1px 0; + text-align: end; + } + + .k-slot-cell, + .k-scheduler-times-all-day { + border-bottom-color: inherit; + } + + .k-slot-cell.k-last-resource { + border-right: 0; + } + .k-slot-cell.k-empty-slot { + padding-left: 0; + padding-right: 0; + } + } + + .k-scheduler-datecolumn { + width: $kendo-scheduler-datecolumn-width; + } + .k-scheduler-timecolumn { + width: $kendo-scheduler-timecolumn-width; + white-space: nowrap; + } + + + // Scheduler content + .k-scheduler-content { + border-color: inherit; + position: relative; + overflow: auto; + + &:focus { + outline: none; + } + } + + + // Appointments + kendo-scheduler .k-event, + .k-event { + @include border-radius( k-border-radius(md) ); + min-height: $kendo-scheduler-event-min-height; + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-radius: $kendo-scheduler-event-border-radius; + text-align: start; + outline: 0; + cursor: default; + position: absolute; + overflow: hidden; + padding-inline-end: $kendo-scheduler-appointments-padding; + + > div { + position: relative; + z-index: 2; + } + + // Template + .k-event-template { + line-height: $kendo-scheduler-event-line-height; + padding-block: $kendo-scheduler-event-template-padding-y; + padding-inline: $kendo-scheduler-event-template-padding-x; + // TODO: incompatible units + // padding-right: k-spacing(1) + k-spacing(4); + } + .k-event-time { + padding-bottom: 0; + font-size: .875em; + white-space: nowrap; + display: none; + } + + + // Actions + .k-event-actions { + white-space: nowrap; + position: absolute; + top: 0; + bottom: 0; + right: $kendo-scheduler-event-actions-inset-x; + z-index: 2; + + .k-event-delete { + opacity: .5; + visibility: hidden; + } + + &:hover, + &.k-hover { + .k-event-delete { + opacity: 1; + } + } + + a { color: inherit; } + } + + + // Indicators + .k-event-actions:first-child { + margin: $kendo-scheduler-indicators-margin; + top: 0; + right: 0; + float: left; + position: relative; + opacity: 1; + visibility: visible; + line-height: normal; + } + + + // Resize handles + .k-resize-handle { + z-index: 4; + opacity: .5; + visibility: hidden; + } + .k-resize-handle::before { border-color: currentColor; } + .k-resize-n { + height: .5em; + top: 0; + } + .k-resize-s { + height: .5em; + bottom: 0; + } + .k-resize-n::before, + .k-resize-s::before { + width: k-spacing(8); + border-bottom-width: 1px; + } + .k-resize-w { + width: .5em; + left: 0; + } + .k-resize-e { + width: .5em; + right: 0; + } + .k-resize-w::before, + .k-resize-e::before { + height: k-spacing(8); + border-left-width: 1px; + } + + + // Hover + &:hover, + &.k-hover { + .k-event-actions .k-event-delete, + .k-resize-handle { + visibility: visible; + } + } + + &.k-event-drag-hint .k-event-time { + display: block; + } + + .k-event-top-actions, + .k-event-bottom-actions { + position: absolute; + top: 0; + left: 0; + width: 100%; + text-align: center; + } + + .k-event-bottom-actions { + top: auto; + bottom: 0; + } + } + + + // Tasks + .k-scheduler-mark { + width: 1em; + height: 1em; + display: inline-block; + vertical-align: middle; + } + + + // More events indicator + .k-more-events { + padding: 0; + height: 13px; + border-style: solid; + border-width: 1px; + overflow: hidden; + position: absolute; + justify-content: center; + + > .k-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + // Draging hint + .k-event-drag-hint { + opacity: .5; + z-index: 3; + + .k-event-actions, + .k-event-top-actions, + .k-event-bottom-actions, + .k-resize-handle { + display: none; + } + + .k-event-time { + display: block; + } + } + + + // Resizing + .k-scheduler-marquee { + border-width: 0; + border-style: solid; + + // label + .k-label-top, + .k-label-bottom { + font-size: .75em; + position: absolute; + } + .k-label-top { + left: $kendo-scheduler-marquee-label-inset-x; + top: $kendo-scheduler-marquee-label-inset-y; + } + .k-label-bottom { + right: $kendo-scheduler-marquee-label-inset-x; + bottom: $kendo-scheduler-marquee-label-inset-y; + } + + // Angle tingie + &.k-first::before, + &.k-last::after { + content: ""; + border-width: 3px; + border-style: solid; + position: absolute; + width: 0; + height: 0; + } + &.k-first::before { + top: 0; + left: 0; + border-right-color: transparent; + border-bottom-color: transparent; + } + &.k-last::after { + bottom: 0; + right: 0; + border-left-color: transparent; + border-top-color: transparent; + } + } + + // remove scrollbars during PDF export + // stylelint-disable declaration-no-important + .k-pdf-export-shadow .k-scheduler, + .k-scheduler-pdf-export .k-scheduler-content, + .k-scheduler-pdf-export .k-scheduler-times { + height: auto !important; + overflow: visible !important; + } + + .k-scheduler-pdf-export { + overflow: hidden; + + .k-scheduler-header { + padding: 0 !important; + } + + .k-scheduler-header-wrap { + border-width: 0 !important; + } + + .k-scheduler-header .k-scheduler-table, + .k-scheduler-content .k-scheduler-table { + width: 100% !important; + } + } + // stylelint-enable declaration-no-important + + + // TODO: add this class to jQuery rendering + // after refactoring jQuery scheduler layout to be flex + .k-recurrence-editor { + display: flex; + flex-direction: column; + } + kendo-scheduler .k-recurrence-editor { + display: block; + } + + + // Day view + .k-scheduler-dayview {} + + + // Workweek view + .k-scheduler-workWeekview {} // stylelint-disable-line + + + // Week view + .k-scheduler-weekview {} + + + // Month view + .k-scheduler-monthview { + + .k-scheduler-table { + height: 100%; + } + .k-scheduler-table td { + height: 80px; + text-align: end; + } + .k-scheduler-body .k-scheduler-cell { + min-height: 80px; + } + + // hidden cells must have no layout + .k-hidden { + padding-left: 0 !important; // stylelint-disable-line declaration-no-important + padding-right: 0 !important; // stylelint-disable-line declaration-no-important + border-right-width: 0 !important; // stylelint-disable-line declaration-no-important + } + + .k-scheduler-table-auto, + .k-scheduler-table-auto td, + .k-scheduler-content .k-scheduler-table-auto { + height: auto; + } + + // Force vertical scroll in monthview for jquery + .k-scheduler-content { + overflow-y: scroll; + } + &.k-scheduler-flex-layout .k-scheduler-content { + overflow-y: auto; + } + } + + + // Agenda view + .k-scheduler-agendaview { + + .k-scheduler-mark { + margin-right: .5em; + width: 1em; + height: 1em; + display: inline-block; + vertical-align: middle; + } + + .k-scheduler-table { + th:first-child, + td:first-child { + border-left-width: 1px; + } + + td.k-first { + border-left-width: 0; + } + } + + .k-task > .k-event-delete { + color: inherit; + position: absolute; + top: $kendo-scheduler-marquee-label-inset-y; + right: $kendo-scheduler-marquee-label-inset-y; + opacity: .5; + visibility: hidden; + } + .k-hover .k-task > .k-event-delete, + .k-scheduler-content tr:hover .k-event-delete, + .k-scheduler-content .k-scheduler-row:hover .k-event-delete, + .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete { + visibility: visible; + } + } + .k-scheduler-agendaday { + margin: 0 .2em 0 0; + font-size: 3em; + line-height: 1; + font-weight: 400; + float: left; + } + .k-scheduler-agendaweek { + display: block; + margin: .4em 0 0; + line-height: 1; + font-style: normal; + } + .k-scheduler-agendadate { + font-size: .75em; + } + + + // Timeline view + .k-scheduler-timelineview { + .k-slot-cell { + overflow: hidden; + } + .k-scheduler-content { + overflow: auto; + } + } + + .k-scheduler-pane { + display: flex; + flex-direction: row; + } + .k-scheduler-pane .k-scheduler-times { + flex: 0 0 auto; + } + .k-scheduler-pane .k-scheduler-times .k-scheduler-table { + height: 100%; + } + .k-scheduler-pane .k-scheduler-header, + .k-scheduler-pane .k-scheduler-content { + flex: 1 1 auto; + } + + + // Year view + .k-scheduler-yearview { + .k-scheduler-body { + padding-block: $kendo-scheduler-yearview-padding-y; + padding-inline: $kendo-scheduler-yearview-padding-x; + justify-content: center; + } + + .k-calendar { + width: 100%; + border-width: 0; + + .k-calendar-view { + flex-wrap: wrap; + justify-content: center; + gap: $kendo-scheduler-yearview-calendar-gap; + } + + .k-content { + flex: 0; + } + + .k-link { + position: relative; + } + + td.k-selected { + background-color: inherit; + } + } + + .k-day-indicator { + margin-top: $kendo-scheduler-yearview-indicator-calc-offset-top; + width: $kendo-scheduler-yearview-indicator-size; + height: $kendo-scheduler-yearview-indicator-size; + border-radius: $kendo-scheduler-yearview-indicator-border-radius; + position: absolute; + left: $kendo-scheduler-yearview-indicator-calc-offset-left; + } + } + + + + // Scheduler tooltip + .k-scheduler-tooltip { + padding-block: $kendo-scheduler-tooltip-padding-y; + padding-inline: $kendo-scheduler-tooltip-padding-x; + border-width: $kendo-scheduler-tooltip-border-width; + color: inherit; + + .k-tooltip-title { + margin-bottom: $kendo-scheduler-tooltip-title-margin-y; + + .k-month { + font-size: $kendo-scheduler-tooltip-month-font-size; + text-transform: uppercase; + } + + .k-day { + font-size: $kendo-scheduler-tooltip-day-font-size; + } + } + + .k-tooltip-events-container { + overflow: auto; + } + + .k-tooltip-events { + max-height: $kendo-scheduler-tooltip-events-max-height; + display: flex; + flex-direction: column; + gap: $kendo-scheduler-tooltip-events-gap; + } + + .k-tooltip-event { + padding-block: $kendo-scheduler-tooltip-event-padding-y; + padding-inline: $kendo-scheduler-tooltip-event-padding-x; + border-radius: $kendo-scheduler-tooltip-event-border-radius; + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + flex-shrink: 0; + position: relative; + gap: $kendo-scheduler-tooltip-event-gap; + } + .k-tooltip-event .k-event-time { + display: flex; + flex-shrink: 0; + font-size: inherit; + } + + .k-no-data { + height: auto; + min-height: auto; + color: inherit; + } + } + + + + // Scheduler edit dialog + .k-scheduler-edit-dialog { + .k-dialog { + max-height: 100vh; + } + } + + .k-scheduler-edit-form { + + .k-edit-form-container { width: 100%; } + .k-edit-label { width: 17%; } + .k-edit-field { width: 77%; } + + .k-edit-field > ul > li { + display: flex; + flex-flow: row nowrap; + align-items: center; + } + .k-recurrence-editor { + .k-radio-list .k-radio-wrap, + .k-checkbox-list .k-checkbox-wrap { + align-self: center; + } + } + + .k-recur-interval, + .k-recur-count, + .k-recur-monthday { + width: 5em; + } + .k-recur-until, + .k-recur-month, + .k-recur-weekday, + .k-recur-weekday-offset { + width: 10em; + } + + .k-scheduler-datetime-picker { + display: flex; + flex-flow: row nowrap; + gap: k-spacing(2); + } + + } + + + + // Scheduler rtl + .k-rtl { + .k-scheduler-header th, + .k-scheduler-table td { + border-width: 0 1px 1px 0; + } + + .k-scheduler-table { + td, + th { + &:first-child { + border-right-width: 0; + } + } + } + + .k-scheduler-times th { + border-width: 0 0 1px 1px; + } + + .k-scheduler .k-scrollbar-v .k-scheduler-header-wrap { + border-right-width: 0; + border-left-width: 1px; + } + + .k-event { + padding-right: 0; + padding-left: $kendo-scheduler-tooltip-event-padding-x; + + .k-resize-w { + left: auto; + right: 0; + } + + .k-resize-e { + right: auto; + left: 0; + } + + .k-event-actions { + right: auto; + left: 2px; + } + + .k-event-actions:first-child { + margin: $kendo-scheduler-rtl-indicators-margin; + float: right; + } + } + .k-scheduler-agendaview .k-task { + + > .k-event-delete { + left: 2px; + right: auto; + } + + .k-scheduler-mark { + margin-left: .5em; + margin-right: 0; + } + + } + + .k-scheduler-marquee .k-label-top { + left: auto; + right: 4px; + } + + .k-scheduler-marquee .k-label-bottom { + left: 4px; + right: auto; + } + + .k-scheduler-edit-form .k-scheduler-delete { + float: right; + } + + .k-scheduler, + &.k-scheduler { + + .k-scheduler-header-wrap { + border-right-width: 0; + } + + .k-scheduler-agendaday { + float: right; + margin: 0 0 0 .2em; + } + + .k-scheduler-agendaview .k-scheduler-table { + td:first-child, + th:first-child { + border-left-width: 0; + } + + tr + tr { + td:first-child, + th:first-child { + border-right-width: 1px; + } + } + } + } + } + + .k-safari { + .k-scheduler-tooltip .k-tooltip-event:not(:last-child) { + margin-bottom: $kendo-scheduler-tooltip-event-gap; + } + + .k-scheduler-yearview .k-calendar-view .k-month { + margin-block: 0; + margin-inline: list.slash( $kendo-scheduler-yearview-calendar-gap, 2 ); + } + } + +} + + +@mixin kendo-scheduler--layout() { + @include kendo-scheduler--layout-base(); +} diff --git a/packages/core/scss/components/scheduler/_theme.scss b/packages/core/scss/components/scheduler/_theme.scss new file mode 100644 index 00000000000..f0209bcd459 --- /dev/null +++ b/packages/core/scss/components/scheduler/_theme.scss @@ -0,0 +1,244 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-scheduler--theme-base() { + + // Appearance + .k-scheduler { + @include fill( + $kendo-scheduler-text, + $kendo-scheduler-bg, + $kendo-scheduler-border + ); + } + + // Header and footer + .k-scheduler-toolbar { + @include fill( + $kendo-scheduler-toolbar-text, + $kendo-scheduler-toolbar-bg, + $kendo-scheduler-toolbar-border, + $kendo-scheduler-toolbar-gradient + ); + } + .k-scheduler-footer { + @include fill( + $kendo-scheduler-footer-text, + $kendo-scheduler-footer-bg, + $kendo-scheduler-footer-border, + $kendo-scheduler-footer-gradient + ); + } + + .k-scheduler-header { + background-color: $kendo-base-bg; + } + + .k-scheduler-header-wrap { + background-color: $kendo-scheduler-bg; + } + + + // Scheduler navigation + .k-scheduler-navigation {} + + + // View switcher + .k-scheduler-views {} + + + // Scheduler footer + .k-scheduler-footer {} + + + // Scheduler content + .k-scheduler-content {} + .k-scheduler-nonwork, + .k-scheduler .k-nonwork-hour { + @include fill( + $kendo-scheduler-nonwork-text, + $kendo-scheduler-nonwork-bg + ); + } + .k-scheduler-other-month, + .k-scheduler .k-other-month { + @include fill( + $kendo-scheduler-othermonth-text, + $kendo-scheduler-othermonth-bg + ); + } + + .k-scheduler-layout td.k-selected, + .k-scheduler-layout .k-scheduler-cell.k-selected { + background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)); + } + + .k-scheduler-layout-flex { + .k-scheduler-head, + .k-sticky-cell { + background-color: $kendo-scheduler-bg; + } + } + + + // Events + .k-event { + @include fill( + $kendo-scheduler-event-text, + $kendo-scheduler-event-bg, + $kendo-scheduler-event-border, + $kendo-scheduler-event-gradient + ); + @include box-shadow( $kendo-scheduler-event-shadow ); + + &:hover, + &.k-hover { + @include fill( + $kendo-scheduler-event-hover-text, + $kendo-scheduler-event-hover-bg, + $kendo-scheduler-event-hover-border, + $kendo-scheduler-event-hover-gradient + ); + @include box-shadow( $kendo-scheduler-event-hover-shadow ); + } + + &.k-selected { + @include fill( + $kendo-scheduler-event-selected-text, + $kendo-scheduler-event-selected-bg, + $kendo-scheduler-event-selected-border, + $kendo-scheduler-event-selected-gradient + ); + @include box-shadow( $kendo-scheduler-event-selected-shadow ); + } + + &.k-event-inverse { + color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text )); + } + + &.k-event-ongoing { + @include box-shadow( $kendo-scheduler-event-ongoing-shadow ); + } + } + + + // Drag hint + .k-event-drag-hint {} + + + // Resizing + .k-scheduler-marquee {} + .k-scheduler-marquee::before, + .k-scheduler-marquee::after { + border-color: $kendo-color-primary; + } + + // Edit dialog + .k-scheduler-edit-dialog { + .k-dialog-actions { + border-color: $kendo-scheduler-border; + } + } + + + + // Day view + .k-scheduler-dayview {} + + + // Workweek view + .k-scheduler-workWeekview {} // stylelint-disable-line + + + // Week view + .k-scheduler-weekview {} + + + // Month view + .k-scheduler-monthview {} + + + // Agenda view + .k-scheduler-agendaview { + + // Hover + .k-scheduler-content tr:hover, + .k-scheduler-content tr.k-hover, + .k-scheduler-content .k-scheduler-row:hover, + .k-scheduler-content .k-scheduler-row.k-hover { + @include fill( + $kendo-hover-text, + $kendo-hover-bg, + $kendo-hover-border, + $kendo-hover-gradient + ); + } + + .k-scheduler-content tr:hover .k-scheduler-datecolumn, + .k-scheduler-content tr:hover .k-scheduler-groupcolumn, + .k-scheduler-content tr.k-hover .k-scheduler-datecolumn, + .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn { + @include fill( + $kendo-scheduler-text, + $kendo-scheduler-bg, + $kendo-scheduler-border + ); + } + + // Selected + .k-scheduler-content tr.k-selected { + background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)); + } + .k-scheduler-content tr.k-selected .k-scheduler-datecolumn, + .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn { + background-color: $kendo-scheduler-bg; + } + } + + + // Timeline view + .k-scheduler-timelineview {} + + + // Year view + .k-scheduler-yearview { + + .k-day-indicator { + @include fill( $bg: $kendo-scheduler-yearview-indicator-bg ); + } + + .k-selected .k-day-indicator { + @include fill( $bg: $kendo-scheduler-yearview-indicator-selected-bg ); + } + } + + + + // Scheduler tooltip + .k-tooltip.k-scheduler-tooltip { + @include fill( + $kendo-scheduler-tooltip-text, + $kendo-scheduler-tooltip-bg, + $kendo-scheduler-tooltip-border + ); + @include box-shadow( $kendo-scheduler-tooltip-shadow ); + + .k-callout { + @include fill( $color: $kendo-scheduler-tooltip-callout-text ); + } + } + + + // Scheduler edit form + .k-scheduler-edit-form {} + +} + + +@mixin kendo-scheduler--theme() { + @include kendo-scheduler--theme-base(); +} diff --git a/packages/core/scss/components/scheduler/_variables.scss b/packages/core/scss/components/scheduler/_variables.scss new file mode 100644 index 00000000000..2851aa8ce4f --- /dev/null +++ b/packages/core/scss/components/scheduler/_variables.scss @@ -0,0 +1,264 @@ +// Scheduler + +/// The width of the border around the Scheduler. +/// @group scheduler +$kendo-scheduler-border-width: null !default; +/// The font family of the Scheduler. +/// @group scheduler +$kendo-scheduler-font-family: null !default; +/// The font size of the Scheduler. +/// @group scheduler +$kendo-scheduler-font-size: null !default; +/// The line height of the Scheduler. +/// @group scheduler +$kendo-scheduler-line-height: null !default; + +/// The background color of the Scheduler. +/// @group scheduler +$kendo-scheduler-bg: null !default; +/// The text color of the Scheduler. +/// @group scheduler +$kendo-scheduler-text: null !default; +/// The border color of the Scheduler. +/// @group scheduler +$kendo-scheduler-border: null !default; + +/// The background color of the Scheduler ToolBar. +/// @group scheduler +$kendo-scheduler-toolbar-bg: null !default; +/// The text color of the Scheduler ToolBar. +/// @group scheduler +$kendo-scheduler-toolbar-text: null !default; +/// The border color of the Scheduler ToolBar. +/// @group scheduler +$kendo-scheduler-toolbar-border: null !default; +/// The gradient of the Scheduler ToolBar. +/// @group scheduler +$kendo-scheduler-toolbar-gradient: null !default; + +/// The background color of the Scheduler footer. +/// @group scheduler +$kendo-scheduler-footer-bg: null !default; +/// The text color of the Scheduler footer. +/// @group scheduler +$kendo-scheduler-footer-text: null !default; +/// The border color of the Scheduler footer. +/// @group scheduler +$kendo-scheduler-footer-border: null !default; +/// The gradient of the Scheduler footer. +/// @group scheduler +$kendo-scheduler-footer-gradient: null !default; + +/// The minimum height of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-min-height: null !default; +/// The border radius of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-border-radius: null !default; +/// The line height of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-line-height: null !default; + +/// The background color of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-bg: null !default; +/// The text color of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-text: null !default; +/// The border color of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-border: null !default; +/// The gradient of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-gradient: null !default; +/// The shadow of the Scheduler event. +/// @group scheduler +$kendo-scheduler-event-shadow: null !default; + +/// The background color of the hovered Scheduler event. +/// @group scheduler +$kendo-scheduler-event-hover-bg: null !default; +/// The text color of the hovered Scheduler event. +/// @group scheduler +$kendo-scheduler-event-hover-text: null !default; +/// The border color of the hovered Scheduler event. +/// @group scheduler +$kendo-scheduler-event-hover-border: null !default; +/// The gradient of the hovered Scheduler event. +/// @group scheduler +$kendo-scheduler-event-hover-gradient: null !default; +/// The shadow of the hovered Scheduler event. +/// @group scheduler +$kendo-scheduler-event-hover-shadow: null !default; + +/// The background color of the selected Scheduler event. +/// @group scheduler +$kendo-scheduler-event-selected-bg: null !default; +/// The text color of the selected Scheduler event. +/// @group scheduler +$kendo-scheduler-event-selected-text: null !default; +/// The border color of the selected Scheduler event. +/// @group scheduler +$kendo-scheduler-event-selected-border: null !default; +/// The gradient of the selected Scheduler event. +/// @group scheduler +$kendo-scheduler-event-selected-gradient: null !default; +/// The shadow of the selected Scheduler event. +/// @group scheduler +$kendo-scheduler-event-selected-shadow: null !default; + +/// The shadow of the ongoing Scheduler event. +/// @group scheduler +$kendo-scheduler-event-ongoing-shadow: null !default; + +/// The horizontal padding of the Scheduler cell. +/// @group scheduler +$kendo-scheduler-cell-padding-x: null !default; +/// The vertical padding of the Scheduler cell. +/// @group scheduler +$kendo-scheduler-cell-padding-y: null !default; +/// The height of the Scheduler cell. +/// @group scheduler +$kendo-scheduler-cell-height: null !default; +/// The width of the Scheduler date column. +/// @group scheduler +$kendo-scheduler-datecolumn-width: null !default; +/// The width of the Scheduler time column. +/// @group scheduler +$kendo-scheduler-timecolumn-width: null !default; + +/// The background color of the non-working hours in the Scheduler. +/// @group scheduler +$kendo-scheduler-nonwork-bg: null !default; +/// The text color of the non-working hours in the Scheduler. +/// @group scheduler +$kendo-scheduler-nonwork-text: null !default; + +/// The background color of the weekends in the Scheduler. +/// @group scheduler +$kendo-scheduler-weekend-bg: null !default; +/// The text color of the weekends in the Scheduler. +/// @group scheduler +$kendo-scheduler-weekend-text: null !default; + +/// The background color of the preceding/subsequent month cells in the Calendar. +/// @group scheduler +$kendo-scheduler-othermonth-bg: null !default; +/// The text color of the preceding/subsequent month cells in the Calendar. +/// @group scheduler +$kendo-scheduler-othermonth-text: null !default; + +/// The horizontal padding of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-padding-x: null !default; +/// The vertical padding of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-padding-y: null !default; + +/// The spacing between the calendars of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-calendar-gap: null !default; + +/// The days with events indicator size of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-indicator-size: null !default; +/// The top position of the days with events indicator of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-indicator-calc-offset-top: null !default; +/// The left position of the days with events indicator of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-indicator-calc-offset-left: null !default; +/// The border radius of the days with events indicator of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-indicator-border-radius: null !default; +/// The background color of the days with events indicator of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-indicator-bg: null !default; +/// The background color of the selected days with events indicator of the year view in the Scheduler. +/// @group scheduler +$kendo-scheduler-yearview-indicator-selected-bg: null !default; + +/// The horizontal padding of the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-padding-x: null !default; +/// The vertical padding of the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-padding-y: null !default; +/// The width of the border of the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-border-width: null !default; +/// The background color of the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-bg: null !default; +/// The text color of the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-text: null !default; +/// The border color of the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-border: null !default; +/// The shadow of the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-shadow: null !default; + +/// The vertical margin of the Scheduler Tooltip title. +/// @group scheduler +$kendo-scheduler-tooltip-title-margin-y: null !default; +/// The font size of the month inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-month-font-size: null !default; +/// The font size of the day inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-day-font-size: null !default; + +/// The max height of the events inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-events-max-height: null !default; +/// The spacing between the events inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-events-gap: null !default; + +/// The horizontal padding of the events inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-event-padding-x: null !default; +/// The vertical padding of the events inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-event-padding-y: null !default; +/// The border radius of the events inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-event-border-radius: null !default; +/// The spacing between the events items inside the Scheduler Tooltip. +/// @group scheduler +$kendo-scheduler-tooltip-event-gap: null !default; + +/// The color of the Scheduler Tooltip callout. +/// @group scheduler +$kendo-scheduler-tooltip-callout-text: null !default; + +/// The padding of the Scheduler appointments. +/// @group scheduler +$kendo-scheduler-appointments-padding: null !default; + +/// The horizontal padding of the Scheduler event template. +/// @group scheduler +$kendo-scheduler-event-template-padding-x: null !default; +/// The vertical padding of the Scheduler event template. +/// @group scheduler +$kendo-scheduler-event-template-padding-y: null !default; + +/// The inline inset of the Scheduler event actions. +/// @group scheduler +$kendo-scheduler-event-actions-inset-x: null !default; + +/// The margin of the Scheduler event indicators. +/// @group scheduler +$kendo-scheduler-indicators-margin: null !default; +/// The margin of the Scheduler event indicators in rtl. +/// @group scheduler +$kendo-scheduler-rtl-indicators-margin: null !default; + +/// The inline inset of the Scheduler marquee labels. +/// @group scheduler +$kendo-scheduler-marquee-label-inset-x: null !default; +/// The block inset of the Scheduler marquee labels. +/// @group scheduler +$kendo-scheduler-marquee-label-inset-y: null !default; diff --git a/packages/core/scss/components/scroller/_index.scss b/packages/core/scss/components/scroller/_index.scss new file mode 100644 index 00000000000..dbedd578ef7 --- /dev/null +++ b/packages/core/scss/components/scroller/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-scroller--styles() { + @include import-once( "scroller" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-scroller--layout(); + @include kendo-scroller--theme(); + } +} diff --git a/packages/core/scss/components/scroller/_layout.scss b/packages/core/scss/components/scroller/_layout.scss new file mode 100644 index 00000000000..8535487d20c --- /dev/null +++ b/packages/core/scss/components/scroller/_layout.scss @@ -0,0 +1,90 @@ +@mixin kendo-scroller--layout-base() { + + // Layout + .km-scrollview, + .km-scroll-container { + user-select: none; + border-collapse: separate; + } + .km-scroll-wrapper { + position: relative; + } + .km-scroll-header { + position: absolute; + z-index: 1001; + width: 100%; + top: 0; + left: 0; + } + + + // Pull to refresh + .km-scroller-pull { + width: 100%; + display: block; + position: absolute; + line-height: 3em; + font-size: 1.4em; + text-align: center; + transform: translate3d(0, -3em, 0); + } + .km-scroller-pull .km-template { + display: inline-block; + min-width: 200px; + text-align: start; + } + .km-load-more .km-icon, + .km-widget .km-scroller-pull .km-icon { + display: inline-block; + height: 2rem; + margin-right: 1rem; + vertical-align: middle; + width: 2rem; + font-size: 2rem; + transform: rotate(0deg); + transition: transform 300ms linear; + } + .km-widget .km-scroller-release .km-icon { + transform: rotate(180deg); + } + .km-widget .km-scroller-refresh .km-icon { + transition: none; + } + + + // Scrollbar + .km-touch-scrollbar { + position: absolute; + visibility: hidden; + z-index: 200000; + height: .4em; + width: .4em; + opacity: 0; + transform-origin: 0 0; + transition: opacity .3s linear; + } + + .k-map, + .k-diagram { + .km-touch-scrollbar { + display: none; + } + } + + .km-vertical-scrollbar { + height: 100%; + right: 2px; + top: 0; + } + .km-horizontal-scrollbar { + width: 100%; + left: 0; + bottom: 2px; + } + +} + + +@mixin kendo-scroller--layout() { + @include kendo-scroller--layout-base(); +} diff --git a/packages/core/scss/components/scroller/_theme.scss b/packages/core/scss/components/scroller/_theme.scss new file mode 100644 index 00000000000..3114447e122 --- /dev/null +++ b/packages/core/scss/components/scroller/_theme.scss @@ -0,0 +1,12 @@ +@mixin kendo-scroller--theme-base() { + + .km-touch-scrollbar { + background-color: #333333; + } + +} + + +@mixin kendo-scroller--theme() { + @include kendo-scroller--theme-base(); +} diff --git a/packages/core/scss/components/scroller/_variables.scss b/packages/core/scss/components/scroller/_variables.scss new file mode 100644 index 00000000000..ddd74c0c028 --- /dev/null +++ b/packages/core/scss/components/scroller/_variables.scss @@ -0,0 +1 @@ +// Scroller diff --git a/packages/core/scss/components/scrollview/_index.scss b/packages/core/scss/components/scrollview/_index.scss new file mode 100644 index 00000000000..c2afd6589bf --- /dev/null +++ b/packages/core/scss/components/scrollview/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-scrollview--styles() { + @include import-once( "scrollview" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-icon--styles(); + @include kendo-scrollview--layout(); + @include kendo-scrollview--theme(); + } +} diff --git a/packages/core/scss/components/scrollview/_layout.scss b/packages/core/scss/components/scrollview/_layout.scss new file mode 100644 index 00000000000..17888825643 --- /dev/null +++ b/packages/core/scss/components/scrollview/_layout.scss @@ -0,0 +1,170 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-scrollview--layout-base() { + + .k-scrollview { + border-width: $kendo-scrollview-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-scrollview-font-family; + font-size: $kendo-scrollview-font-size; + line-height: $kendo-scrollview-line-height; + position: relative; + overflow: hidden; + display: block; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + } + + .k-scrollview-wrap { + position: absolute; + margin: 0; + padding: 0; + height: 100%; + width: 100%; + display: flex; + flex-flow: row nowrap; + cursor: default; + white-space: nowrap; + + > .k-scrollview-view { + display: inline-block; + overflow: hidden; + flex-shrink: 0; + } + + img { + user-select: none; + } + + } + + .k-scrollview-wrap.k-scrollview-animate { + width: calc( var(--kendo-scrollview-views, 1) * 100% ); + transition-duration: $kendo-scrollview-transition-duration; + transition-timing-function: $kendo-scrollview-transition-timing-function; + transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) ); + + .k-scrollview-view { + width: calc( 100% / var(--kendo-scrollview-views, 1) ); + flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) ); + } + + } + + :is([dir="rtl"], .k-rtl) .k-scrollview-wrap.k-scrollview-animate { + transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) ); + } + + .k-scrollview-nav-wrap { + padding: 0; + margin: 0; + position: absolute; + left: 0; + right: 0; + bottom: $kendo-scrollview-pager-offset; + height: $kendo-scrollview-pager-height; + text-align: center; + } + + kendo-scrollview.k-scrollview kendo-scrollview-pager { + pointer-events: none; + } + + kendo-scrollview.k-scrollview .k-scrollview-nav { + pointer-events: initial; + } + + .k-scrollview-nav { + margin: 0; + padding: $kendo-scrollview-pager-item-spacing; + max-width: 100%; + box-sizing: border-box; + line-height: 0; + text-align: center; + white-space: nowrap; + list-style: none; + display: inline-flex; + align-items: center; + overflow-x: scroll; + overflow-y: hidden; + pointer-events: initial; + + &:focus { + outline: none; + } + } + + .k-scrollview-nav > .k-link { + margin-block: 0; + margin-inline: calc( #{$kendo-scrollview-pager-item-spacing} / 2 ); + padding: 0; + width: $kendo-scrollview-pagebutton-size; + height: $kendo-scrollview-pagebutton-size; + border-width: $kendo-scrollview-pager-item-border-width; + border-style: solid; + border-radius: 50%; + box-sizing: content-box; + display: inline-block; + position: relative; + flex: 0 0 auto; + cursor: pointer; + pointer-events: all; + vertical-align: top; + + &::before { + content: ""; + width: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} ); + height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} ); + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: initial; + border-radius: 0; + } + } + + .k-scrollview-next, + .k-scrollview-prev { + display: table; + position: absolute; + padding: 0; + height: 60%; + top: 20%; + text-decoration: none; + user-select: none; + cursor: pointer; + + .k-icon { + display: table-cell; + overflow: visible; + margin: 0; + padding: 0; + vertical-align: middle; + font-weight: normal; + } + } + + .k-scrollview-prev { + inset-inline-start: 0; + } + + .k-scrollview-next { + inset-inline-end: 0; + } + + + .k-scrollview-animation { + transition-duration: .3s; + transition-timing-function: ease-in-out; + } +} + + +@mixin kendo-scrollview--layout() { + @include kendo-scrollview--layout-base(); +} diff --git a/packages/core/scss/components/scrollview/_theme.scss b/packages/core/scss/components/scrollview/_theme.scss new file mode 100644 index 00000000000..0271cf0c0cc --- /dev/null +++ b/packages/core/scss/components/scrollview/_theme.scss @@ -0,0 +1,96 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-scrollview--theme-base() { + + .k-scrollview { + @include fill( + $kendo-scrollview-text, + $kendo-scrollview-bg, + $kendo-scrollview-border + ); + + &.k-scrollview-dark { + kendo-scrollview-pager, + .k-scrollview-nav-wrap { + background-color: $kendo-scrollview-dark-bg; + } + .k-scrollview-next, + .k-scrollview-prev { + color: $kendo-scrollview-dark-bg; + + } + } + + &.k-scrollview-light { + kendo-scrollview-pager, + .k-scrollview-nav-wrap { + background-color: $kendo-scrollview-light-bg; + } + + } + } + + .k-scrollview:focus, + .k-scrollview-wrap:focus { + outline: none; + + } + .k-scrollview-elements { + color: $kendo-scrollview-navigation-color; + } + + .k-scrollview-next, + .k-scrollview-prev { + color: $kendo-scrollview-navigation-color; + background-color: $kendo-scrollview-navigation-bg; + text-shadow: $kendo-scrollview-navigation-icon-shadow; + opacity: $kendo-scrollview-navigation-default-opacity; + outline-width: 0; + -webkit-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color; + + &:focus, + &.k-focus { + color: $kendo-scrollview-navigation-color; + opacity: $kendo-scrollview-navigation-hover-opacity; + + .k-icon::before { + @include focus-indicator( $kendo-scrollview-pagebutton-shadow ); + } + } + + &:hover, + &.k-hover { + color: $kendo-scrollview-navigation-color; + opacity: $kendo-scrollview-navigation-hover-opacity; + + } + } + + // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done + .k-scrollview-nav > .k-link { + background: $kendo-scrollview-pagebutton-bg; + border: $kendo-scrollview-pagebutton-border; + + &.k-primary { + background: $kendo-scrollview-pagebutton-primary-bg; + border: $kendo-scrollview-pagebutton-primary-border; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-scrollview-pagebutton-shadow ); + } + + &:hover, + &.k-hover { + box-shadow: $kendo-scrollview-pagebutton-shadow; + } + } + +} + + +@mixin kendo-scrollview--theme() { + @include kendo-scrollview--theme-base(); +} diff --git a/packages/core/scss/components/scrollview/_variables.scss b/packages/core/scss/components/scrollview/_variables.scss new file mode 100644 index 00000000000..c34e32128d2 --- /dev/null +++ b/packages/core/scss/components/scrollview/_variables.scss @@ -0,0 +1,92 @@ +// ScrollView + +/// The width of the border around the ScrollView. +/// @group scrollview +$kendo-scrollview-border-width: null !default; +/// The font family of the ScrollView. +/// @group scrollview +$kendo-scrollview-font-family: null !default; +/// The font size of the ScrollView. +/// @group scrollview +$kendo-scrollview-font-size: null !default; +/// The line height of the ScrollView. +/// @group scrollview +$kendo-scrollview-line-height: null !default; + +/// The text color of the ScrollView. +/// @group scrollview +$kendo-scrollview-text: null !default; +/// The background color of the ScrollView. +/// @group scrollview +$kendo-scrollview-bg: null !default; +/// The border color of the ScrollView. +/// @group scrollview +$kendo-scrollview-border: null !default; + +/// The size of the ScrollView page button. +/// @group scrollview +$kendo-scrollview-pagebutton-size: null !default; +/// The background color of the ScrollView page button. +/// @group scrollview +$kendo-scrollview-pagebutton-bg: null !default; +/// The border color of the ScrollView page button. +/// @group scrollview +$kendo-scrollview-pagebutton-border: null !default; +/// The primary background color of the ScrollView page button. +/// @group scrollview +$kendo-scrollview-pagebutton-primary-bg: null !default; +/// The primary border color of the ScrollView page button. +/// @group scrollview +$kendo-scrollview-pagebutton-primary-border: null !default; +/// The box shadow of the ScrollView page button. +/// @group scrollview +$kendo-scrollview-pagebutton-shadow: null !default; + +/// The offset of the ScrollView pager. +/// @group scrollview +$kendo-scrollview-pager-offset: null !default; +/// The spacing between the ScrollView pager items. +/// @group scrollview +$kendo-scrollview-pager-item-spacing: null !default; +/// The border width of the ScrollView pager items. +/// @group scrollview +$kendo-scrollview-pager-item-border-width: null !default; +/// The height of the ScrollView pager. +/// @group scrollview +$kendo-scrollview-pager-height: null !default; + +/// The text color of the highlight over the tapped ScrollView navigation arrows. +/// @group scrollview +$kendo-scrollview-arrow-tap-highlight-color: null !default; +/// The color of the ScrollView navigation arrows. +/// @group scrollview +$kendo-scrollview-navigation-color: null !default; +/// The box shadow of the ScrollView navigation arrows. +/// @group scrollview +$kendo-scrollview-navigation-icon-shadow: null !default; +/// The background color of the ScrollView navigation. +/// @group scrollview +$kendo-scrollview-navigation-bg: null !default; +/// The opacity of the ScrollView navigation. +/// @group scrollview +$kendo-scrollview-navigation-default-opacity: null !default; +/// The hover opacity of the ScrollView navigation. +/// @group scrollview +$kendo-scrollview-navigation-hover-opacity: null !default; +/// The hover background color of the ScrollView navigation arrows. +/// @group scrollview +$kendo-scrollview-navigation-hover-span-bg: null !default; + +/// The background color of the ScrollView pager in light mode. +/// @group scrollview +$kendo-scrollview-light-bg: null !default; +/// The background color of the ScrollView pager in dark mode. +/// @group scrollview +$kendo-scrollview-dark-bg: null !default; + +/// The duration of the ScrollView transition. +/// @group scrollview +$kendo-scrollview-transition-duration: null !default; +/// The timing function of the ScrollView transition. +/// @group scrollview +$kendo-scrollview-transition-timing-function: null !default; diff --git a/packages/core/scss/components/searchbox/_index.scss b/packages/core/scss/components/searchbox/_index.scss new file mode 100644 index 00000000000..07fae33ac54 --- /dev/null +++ b/packages/core/scss/components/searchbox/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../input/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-searchbox--styles() { + @include import-once( "searchbox" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-button--styles(); + @include kendo-input--styles(); + @include kendo-searchbox--layout(); + @include kendo-searchbox--theme(); + } +} diff --git a/packages/core/scss/components/searchbox/_layout.scss b/packages/core/scss/components/searchbox/_layout.scss new file mode 100644 index 00000000000..3d9ae6e29c0 --- /dev/null +++ b/packages/core/scss/components/searchbox/_layout.scss @@ -0,0 +1,11 @@ +@mixin kendo-searchbox--layout-base() { + + // Searchbox + .k-searchbox {} + +} + + +@mixin kendo-searchbox--layout() { + @include kendo-searchbox--layout-base(); +} diff --git a/packages/core/scss/components/searchbox/_theme.scss b/packages/core/scss/components/searchbox/_theme.scss new file mode 100644 index 00000000000..1db68284f07 --- /dev/null +++ b/packages/core/scss/components/searchbox/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-searchbox--theme-base() { + + // Searchbox + .k-searchbox {} + +} + + +@mixin kendo-searchbox--theme() { + @include kendo-searchbox--theme-base(); +} diff --git a/packages/core/scss/components/searchbox/_variables.scss b/packages/core/scss/components/searchbox/_variables.scss new file mode 100644 index 00000000000..3a17dd4892f --- /dev/null +++ b/packages/core/scss/components/searchbox/_variables.scss @@ -0,0 +1 @@ +// Searchbox diff --git a/packages/core/scss/components/signature/_index.scss b/packages/core/scss/components/signature/_index.scss new file mode 100644 index 00000000000..a4ef5f7f580 --- /dev/null +++ b/packages/core/scss/components/signature/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../input/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-signature--styles() { + @include import-once( "signature" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-input--styles(); + @include kendo-signature--layout(); + @include kendo-signature--theme(); + } +} diff --git a/packages/core/scss/components/signature/_layout.scss b/packages/core/scss/components/signature/_layout.scss new file mode 100644 index 00000000000..abee0ff57ad --- /dev/null +++ b/packages/core/scss/components/signature/_layout.scss @@ -0,0 +1,79 @@ +@use "sass:map"; +@use "./variables.scss" as *; + +@mixin kendo-signature--layout-base() { + + .k-signature { + width: $kendo-signature-width; + min-height: $kendo-signature-height; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + + &.k-signature-maximized { + width: $kendo-signature-maximized-width; + height: $kendo-signature-maximized-height; + + > .k-signature-line { + border-bottom-width: $kendo-signature-maximized-line-width; + } + } + } + + .k-signature-actions { + display: flex; + width: min-content; + margin-inline-start: auto; + gap: $kendo-signature-actions-gap; + z-index: 2; + } + + .k-signature-canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + z-index: 1; + outline: none; + } + + .k-signature-line { + position: absolute; + bottom: $kendo-signature-line-bottom-offset; + z-index: 2; + pointer-events: none; + border-bottom-width: $kendo-signature-line-width; + border-bottom-style: $kendo-signature-line-style; + } + + // Sizes + @each $size, $size-props in $kendo-signature-sizes { + $_padding-x: map.get($size-props, padding-x); + $_padding-y: map.get($size-props, padding-y); + $_line-size: map.get($size-props, line-size); + $_line-offset: map.get($size-props, line-offset); + + .k-signature-#{$size} { + padding-inline: $_padding-x; + padding-block: $_padding-y; + + .k-signature-line { + width: $_line-size; + } + } + } + + .k-signature-lg { + min-height: $kendo-signature-lg-min-height; + } + +} + + +@mixin kendo-signature--layout() { + @include kendo-signature--layout-base(); +} diff --git a/packages/core/scss/components/signature/_theme.scss b/packages/core/scss/components/signature/_theme.scss new file mode 100644 index 00000000000..38eb844d774 --- /dev/null +++ b/packages/core/scss/components/signature/_theme.scss @@ -0,0 +1,18 @@ +@use "./variables.scss" as *; + +@mixin kendo-signature--theme-base() { + + // Solid signature + .k-signature { + + .k-signature-line { + border-bottom-color: $kendo-signature-line-color; + } + } + +} + + +@mixin kendo-signature--theme() { + @include kendo-signature--theme-base(); +} diff --git a/packages/core/scss/components/signature/_variables.scss b/packages/core/scss/components/signature/_variables.scss new file mode 100644 index 00000000000..5ccaf154020 --- /dev/null +++ b/packages/core/scss/components/signature/_variables.scss @@ -0,0 +1,33 @@ +$kendo-signature-width: null !default; +$kendo-signature-height: null !default; + +$kendo-signature-lg-min-height: null !default; + +$kendo-signature-maximized-width: null !default; +$kendo-signature-maximized-height: null !default; + +$kendo-signature-padding-x: null !default; +$kendo-signature-sm-padding-x: null !default; +$kendo-signature-md-padding-x: null !default; +$kendo-signature-lg-padding-x: null !default; + +$kendo-signature-padding-y: null !default; +$kendo-signature-sm-padding-y: null !default; +$kendo-signature-md-padding-y: null !default; +$kendo-signature-lg-padding-y: null !default; + +$kendo-signature-line-width: null !default; +$kendo-signature-line-style: null !default; +$kendo-signature-line-color: null !default; + +$kendo-signature-line-size: null !default; +$kendo-signature-sm-line-size: null !default; +$kendo-signature-md-line-size: null !default; +$kendo-signature-lg-line-size: null !default; + +$kendo-signature-line-bottom-offset: null !default; + +$kendo-signature-sizes: null !default; + +$kendo-signature-actions-gap: null !default; +$kendo-signature-maximized-line-width: null !default; diff --git a/packages/core/scss/components/skeleton/_index.scss b/packages/core/scss/components/skeleton/_index.scss new file mode 100644 index 00000000000..7ce15e86617 --- /dev/null +++ b/packages/core/scss/components/skeleton/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-skeleton--styles() { + @include import-once( "skeleton" ) { + @include core-styles(); + @include kendo-skeleton--layout(); + @include kendo-skeleton--theme(); + } +} diff --git a/packages/core/scss/components/skeleton/_layout.scss b/packages/core/scss/components/skeleton/_layout.scss new file mode 100644 index 00000000000..54e0af79be7 --- /dev/null +++ b/packages/core/scss/components/skeleton/_layout.scss @@ -0,0 +1,97 @@ + +@use "./_variables.scss" as *; + +@mixin kendo-skeleton--layout-base() { + + .k-skeleton { + display: block; + } + + .k-skeleton-text { + border-radius: $kendo-skeleton-text-border-radius; + transform: $kendo-skeleton-text-transform; + + &:empty::before { + content: "\200b"; + } + } + + .k-skeleton-rect { + border-radius: $kendo-skeleton-rect-border-radius; + } + + .k-skeleton-circle { + border-radius: $kendo-skeleton-circle-border-radius; + } + + + // Legacy alias + .k-placeholder-line { + @extend .k-skeleton !optional; + @extend .k-skeleton-text !optional; + } + + + // Skeleton wave + @keyframes k-skeleton-wave { + 0% { + transform: translateX(-100%); + } + 60% { + transform: translateX(100%); + } + 100% { + transform: translateX(100%); + } + } + + .k-skeleton-wave { + + .k-skeleton, + &.k-skeleton { + position: relative; + overflow: hidden; + + &::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + animation: k-skeleton-wave 1.6s linear .5s infinite; + } + } + + } + + + // Skeleton pulse + @keyframes k-skeleton-pulse { + 0% { + opacity: 1; + } + 50% { + opacity: .4; + } + 100% { + opacity: 1; + } + } + + .k-skeleton-pulse { + + .k-skeleton, + &.k-skeleton { + animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite; + } + + } + +} + + +@mixin kendo-skeleton--layout() { + @include kendo-skeleton--layout-base(); +} diff --git a/packages/core/scss/components/skeleton/_theme.scss b/packages/core/scss/components/skeleton/_theme.scss new file mode 100644 index 00000000000..82e8314c157 --- /dev/null +++ b/packages/core/scss/components/skeleton/_theme.scss @@ -0,0 +1,31 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-skeleton--theme-base() { + + .k-skeleton { + @include fill( $bg: $kendo-skeleton-item-bg ); + } + + + // Skeleton wave + .k-skeleton-wave { + + .k-skeleton::after, + &.k-skeleton::after { + background-image: linear-gradient( + to right, + transparent, + $kendo-skeleton-wave-bg, + transparent + ); + } + + } + +} + + +@mixin kendo-skeleton--theme() { + @include kendo-skeleton--theme-base(); +} diff --git a/packages/core/scss/components/skeleton/_variables.scss b/packages/core/scss/components/skeleton/_variables.scss new file mode 100644 index 00000000000..c939f967269 --- /dev/null +++ b/packages/core/scss/components/skeleton/_variables.scss @@ -0,0 +1,20 @@ +// Skeleton + +/// The transform scale of the Skeleton text. +/// @group skeleton +$kendo-skeleton-text-transform: null !default; +/// The border radius of the Skeleton text. +/// @group skeleton +$kendo-skeleton-text-border-radius: null !default; + +/// The border radius of the rectangular Skeleton. +/// @group skeleton +$kendo-skeleton-rect-border-radius: null !default; + +/// The border radius of the circular Skeleton. +/// @group skeleton +$kendo-skeleton-circle-border-radius: null !default; + +$kendo-skeleton-item-bg: null !default; + +$kendo-skeleton-wave-bg: null !default; diff --git a/packages/core/scss/components/slider/_index.scss b/packages/core/scss/components/slider/_index.scss new file mode 100644 index 00000000000..a33fdf785c4 --- /dev/null +++ b/packages/core/scss/components/slider/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../tooltip/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-slider--styles() { + @include import-once( "slider" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-tooltip--styles(); + @include kendo-icon--styles(); + @include kendo-slider--layout(); + @include kendo-slider--theme(); + } +} diff --git a/packages/core/scss/components/slider/_layout.scss b/packages/core/scss/components/slider/_layout.scss new file mode 100644 index 00000000000..f281fe1992d --- /dev/null +++ b/packages/core/scss/components/slider/_layout.scss @@ -0,0 +1,406 @@ +@use "sass:math"; +@use "sass:list"; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; +@use "../tooltip/_variables.scss" as *; + +@mixin kendo-slider--layout-base() { + + // Slider + .k-slider { + border: 0; + box-sizing: border-box; + outline: 0; + font-family: $kendo-slider-font-family; + font-size: $kendo-slider-font-size; + line-height: $kendo-slider-line-height; + background: none; + display: inline-flex; + align-items: center; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + .k-label { + width: auto; + font-size: .92em; + line-height: 1; + white-space: nowrap; + position: absolute; + } + + .k-tick, + .k-slider-track { + cursor: pointer; + } + + .k-tick { + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; + margin: 0; + padding: 0; + position: relative; + } + + + &.k-disabled { + .k-tick, + .k-slider-track, + .k-draghandle { + cursor: default; + } + } + } + + // New rendering + .k-slider { + width: min-content; + height: min-content; + gap: calc( #{$kendo-slider-draghandle-size} / 2 ); + + .k-button { + flex: none; + } + .k-slider-track-wrap { + flex: 1 1 auto; + display: flex; + flex-flow: inherit; + position: relative; + touch-action: none; + + .k-slider-items { + margin: 0; + padding: 0; + list-style: none; + // For some reason, Safari does not understand `flex-basis: 100%` + // See telerik/kendo-themes#2197 + // flex-basis: 100%; + flex: 1 1 100%; + display: flex; + flex-flow: inherit; + justify-content: space-between; + user-select: none; + } + .k-tick { + flex: 0 0 1px; + } + + .k-tick-horizontal { + width: 1px; + min-height: 100%; + } + + .k-tick-vertical { + width: 100%; + min-height: 1px; + } + + .k-draghandle { + position: absolute; + } + } + + &-horizontal { + .k-slider-track-wrap { + height: 26px; + + .k-slider-track { + width: 100%; + } + + .k-draghandle { + top: 50%; + transform: translate(-50%, -50%); + } + .k-draghandle:focus, + .k-draghandle:active { + transform: translate(-50%, -50%) scale($kendo-slider-draghandle-active-scale); + } + + .k-slider-selection { + width: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% ); + inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% ); + } + .k-draghandle-start { + inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% ); + } + .k-draghandle-end { + inset-inline-start: calc( var(--kendo-slider-end, 0) * 1% ); + } + } + } + + &-vertical { + .k-slider-track-wrap { + width: 26px; + + .k-slider-track { + height: 100%; + } + .k-draghandle { + left: 50%; + transform: translate(-50%, 50%); + } + .k-draghandle:focus, + .k-draghandle:active { + transform: translate(-50%, 50%) scale($kendo-slider-draghandle-active-scale); + } + + .k-slider-selection { + bottom: calc( var(--kendo-slider-start, 0) * 1% ); + height: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% ); + } + .k-draghandle-start { + bottom: calc( var(--kendo-slider-start, 0) * 1% ); + } + .k-draghandle-end { + bottom: calc( var(--kendo-slider-end, 0) * 1% ); + } + } + } + + } + + + // Slider vertical + .k-slider-vertical { + height: $kendo-slider-size; + flex-flow: column-reverse nowrap; + + .k-tick { + text-align: end; + margin-left: 2px; + } + + .k-slider-topleft .k-tick { + text-align: start; + } + + // ticks + + .k-tick { background-position: -94px center; } + .k-slider-topleft .k-tick { background-position: -124px center; } + .k-slider-bottomright .k-tick { background-position: -154px center; } + + .k-tick-large { + display: flex; + align-items: center; + background-position: -4px center; + } + + .k-slider-topleft .k-tick-large { background-position: -34px center; } + .k-slider-bottomright .k-tick-large { background-position: -64px center; } + + .k-first { background-position: -94px 100%; } + .k-tick-large.k-first { background-position: -4px 100%; } + .k-slider-topleft .k-first { background-position: -124px 100%; } + .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; } + .k-slider-bottomright .k-first { background-position: -154px 100%; } + .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; } + + .k-last { background-position: -94px 0; } + .k-tick-large.k-last { background-position: -4px 0; } + .k-slider-topleft .k-last { background-position: -124px 0; } + .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; } + .k-slider-bottomright .k-last { background-position: -154px 0; } + .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; } + + // labels + + .k-label { + text-align: start; + inset-inline-start: 120%; + top: 50%; + transform: translateY(-50%); + } + .k-first .k-label { top: 100%; } + .k-last .k-label { top: 0; } + + .k-slider-topleft .k-label { + inset-inline-start: auto; + inset-inline-end: 120%; + } + + } + + + // Slider horizontal + .k-slider-horizontal { + width: $kendo-slider-size; + flex-flow: row nowrap; + + .k-tick { background-position: center -92px; } + .k-slider-topleft .k-tick { background-position: center -122px; } + .k-slider-bottomright .k-tick { background-position: center -152px; } + + .k-tick-large { background-position: center -2px; } + .k-slider-topleft .k-tick-large { background-position: center -32px; } + .k-slider-bottomright .k-tick-large { background-position: center -62px; } + + .k-first { background-position: 0 -92px; } + .k-tick-large.k-first { background-position: 0 -2px; } + .k-slider-topleft .k-first { background-position: 0 -122px; } + .k-slider-topleft .k-tick-large.k-first { background-position: 0 -32px; } + .k-slider-bottomright .k-first { background-position: 0 -152px; } + .k-slider-bottomright .k-tick-large.k-first { background-position: 0 -62px; } + + .k-last { background-position: 100% -92px; } + .k-tick-large.k-last { background-position: 100% -2px; } + .k-slider-topleft .k-last { background-position: 100% -122px; } + .k-slider-topleft .k-tick-large.k-last { background-position: 100% -32px; } + .k-slider-bottomright .k-last { background-position: 100% -152px; } + .k-slider-bottomright .k-tick-large.k-last { background-position: 100% -62px; } + + // labels + + .k-label { + inset-inline-start: 50%; + bottom: -1.2em; + transform: translateX(-50%); + } + .k-first .k-label { inset-inline-start: 0; } + .k-last .k-label { inset-inline-start: 100%; } + + .k-slider-topleft .k-label { + top: -1.2em; + } + } + + .k-slider-track, + .k-slider-selection { + margin: 0; + padding: 0; + position: absolute; + } + + .k-slider-horizontal :is(.k-slider-track, .k-slider-selection) { + height: $kendo-slider-track-thickness; + left: 0; + margin-top: - math.div( $kendo-slider-track-thickness, 2 ); + top: 50%; + } + + .k-slider-vertical :is(.k-slider-track, .k-slider-selection) { + bottom: 0; + left: 50%; + margin-left: - math.div( $kendo-slider-track-thickness, 2 ); + width: $kendo-slider-track-thickness; + } + + .k-draghandle { + background-color: transparent; + background-repeat: no-repeat; + border-style: solid; + border-width: $kendo-slider-draghandle-border-width; + outline: 0; + position: absolute; + text-align: center; + text-decoration: none; + width: $kendo-slider-draghandle-size; + height: $kendo-slider-draghandle-size; + + &.k-pressed { + transition: none; + } + } + + .k-slider-selection { + &.k-pressed { + transition: none; + } + } + + .k-slider-transitions { + &.k-slider-horizontal { + .k-draghandle { + transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function; + } + .k-slider-selection { + transition: width $kendo-slider-transition-speed $kendo-slider-transition-function; + } + } + + &.k-slider-vertical { + .k-draghandle { + transition: bottom $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function; + } + + .k-slider-selection { + transition: height $kendo-slider-transition-speed $kendo-slider-transition-function; + } + } + } + + // Slider readonly + .k-slider.k-readonly { + .k-button, + .k-slider-track, + .k-tick, + .k-draghandle { + pointer-events: none; + } + } + + + // Slider tooltip + .k-slider-tooltip { + .k-callout-n, + .k-callout-s { + margin-inline-start: - list.slash( $kendo-tooltip-callout-size, 2 ); + } + + .k-callout-w, + .k-callout-e { + margin-top: - list.slash( $kendo-tooltip-callout-size, 2 ); + } + } + + // RTL + .k-slider-rtl { + &.k-slider-horizontal { + + .k-draghandle { + transform: translate(50%, -50%); + } + + .k-draghandle:focus, + .k-draghandle:active { + transform: if( $kendo-slider-draghandle-active-scale, translate(50%, -50%) scale($kendo-slider-draghandle-active-scale), null ); + } + + .k-label { + transform: translateX(50%); + } + } + } + + .k-slider[dir="rtl"], + [dir="rtl"] .k-slider, + .k-slider.k-rtl, + .k-rtl .k-slider { + @extend .k-slider-rtl !optional; + } + + + // Angular specific + .k-slider kendo-resize-sensor { + position: absolute; + } + + // Aliases + .k-draghandle { @extend .k-slider-thumb !optional; } + .k-draghandle-start { @extend .k-slider-thumb-start !optional; } + .k-draghandle-end { @extend .k-slider-thumb-end !optional; } +} + + +@mixin kendo-slider--layout() { + @include kendo-slider--layout-base(); +} diff --git a/packages/core/scss/components/slider/_theme.scss b/packages/core/scss/components/slider/_theme.scss new file mode 100644 index 00000000000..0c8fcc40f4f --- /dev/null +++ b/packages/core/scss/components/slider/_theme.scss @@ -0,0 +1,87 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-slider--theme-base() { + + // Slider + .k-slider { + // TODO: extract variables + color: $kendo-component-text; + + .k-slider-track, + .k-slider-selection { + @include border-radius( k-border-radius(md) ); + } + + .k-slider-track { + @include fill( $bg: $kendo-slider-track-bg ); + } + + .k-slider-selection { + @include fill( $bg: $kendo-slider-selection-bg ); + } + + .k-draghandle { + @include fill( + $kendo-slider-draghandle-text, + $kendo-slider-draghandle-bg, + $kendo-slider-draghandle-border, + $kendo-slider-draghandle-gradient + ); + @include border-radius( 50% ); + + &:hover, + &.k-hover { + @include fill( + $kendo-slider-draghandle-hover-text, + $kendo-slider-draghandle-hover-bg, + $kendo-slider-draghandle-hover-border, + $kendo-slider-draghandle-hover-gradient + ); + } + + // TODO: remove k-pressed and rely on k-active + &:active, + &.k-active, + &.k-pressed { + @include fill( + $kendo-slider-draghandle-pressed-text, + $kendo-slider-draghandle-pressed-bg, + $kendo-slider-draghandle-pressed-border, + $kendo-slider-draghandle-pressed-gradient + ); + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-slider-draghandle-focus-shadow ); + } + } + + &.k-focus { + .k-draghandle { + @include focus-indicator( $kendo-slider-draghandle-focus-shadow ); + } + } + + &.k-disabled { + opacity: $kendo-slider-disabled-opacity; + } + } + + .k-slider-horizontal .k-tick { + @include background-image( $kendo-slider-tick-horizontal-image ); + } + + .k-slider-vertical .k-tick { + @include background-image( $kendo-slider-tick-vertical-image ); + } + +} + + +@mixin kendo-slider--theme() { + @include kendo-slider--theme-base(); +} diff --git a/packages/core/scss/components/slider/_variables.scss b/packages/core/scss/components/slider/_variables.scss new file mode 100644 index 00000000000..10158756c74 --- /dev/null +++ b/packages/core/scss/components/slider/_variables.scss @@ -0,0 +1,122 @@ +// Slider +/// The default size of the Slider. +/// @group slider +$kendo-slider-size: null !default; +/// The default size of the Slider tick. +/// @group slider +$kendo-slider-tick-size: null !default; +/// The default size of the Slider's track wrap. +/// @group slider +$kendo-slider-alt-size: null !default; + +/// The font family of the Slider. +/// @group slider +$kendo-slider-font-family: null !default; +/// The font size of the Slider. +/// @group slider +$kendo-slider-font-size: null !default; +/// The line height of the Slider. +/// @group slider +$kendo-slider-line-height: null !default; + +/// The offset of the Slider Buttons. +/// @group slider +$kendo-slider-button-offset: null !default; +/// The size of the Slider Buttons. +/// @group slider +$kendo-slider-button-size: null !default; +/// The spacing of the Slider Buttons. +/// @group slider +$kendo-slider-button-spacing: null !default; +/// The shadow of the focused Slider Buttons. +/// @group slider +$kendo-slider-button-focus-shadow: null !default; + +/// The thickness of the Slider track. +/// @group slider +$kendo-slider-track-thickness: null !default; +/// The size of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-size: null !default; +/// The border width of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-border-width: null !default; +/// The transition scale of the active Slider drag handle. +/// @group slider +$kendo-slider-draghandle-active-scale: null !default; +/// The size of the active Slider drag handle. +/// @group slider +$kendo-slider-draghandle-active-size: null !default; + +/// The background color of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-bg: null !default; +/// The text color of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-text: null !default; +/// The border color of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-border: null !default; +/// The gradient of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-gradient: null !default; + +/// The background color of the hovered Slider drag handle. +/// @group slider +$kendo-slider-draghandle-hover-bg: null !default; +/// The text color of the hovered Slider drag handle. +/// @group slider +$kendo-slider-draghandle-hover-text: null !default; +/// The border color of the hovered Slider drag handle. +/// @group slider +$kendo-slider-draghandle-hover-border: null !default; +/// The gradient of the hovered Slider drag handle. +/// @group slider +$kendo-slider-draghandle-hover-gradient: null !default; + +/// The background color of the active Slider drag handle. +/// @group slider +$kendo-slider-draghandle-pressed-bg: null !default; +/// The text color of the active Slider drag handle. +/// @group slider +$kendo-slider-draghandle-pressed-text: null !default; +/// The border color of the active Slider drag handle. +/// @group slider +$kendo-slider-draghandle-pressed-border: null !default; +/// The gradient of the active Slider drag handle. +/// @group slider +$kendo-slider-draghandle-pressed-gradient: null !default; + +/// The shadow of the focused Slider drag handle. +/// @group slider +$kendo-slider-draghandle-focus-shadow: null !default; + +/// The transition speed of the Slider. +/// @group slider +$kendo-slider-transition-speed: null !default; +/// The transition function of the Slider. +/// @group slider +$kendo-slider-transition-function: null !default; +/// The transition speed of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-transition-speed: null !default; +/// The transition function of the Slider drag handle. +/// @group slider +$kendo-slider-draghandle-transition-function: null !default; + +/// The background color of the Slider track. +/// @group slider +$kendo-slider-track-bg: null !default; +/// The background color of the Slider's track selection. +/// @group slider +$kendo-slider-selection-bg: null !default; +/// @group slider +/// The opacity of the disabled Slider. +$kendo-slider-disabled-opacity: null !default; + +/// The background image of the horizontal Slider tick. +/// @group slider +$kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default; +/// The background image of the vertical Slider tick. +/// @group slider +$kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default; diff --git a/packages/core/scss/components/split-button/_index.scss b/packages/core/scss/components/split-button/_index.scss new file mode 100644 index 00000000000..deb45eb2d46 --- /dev/null +++ b/packages/core/scss/components/split-button/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../menu/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + + +// Dependencies + + +// Expose +@mixin kendo-split-button--styles() { + @include import-once( "split-button" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-menu--styles(); + @include kendo-split-button--layout(); + @include kendo-split-button--theme(); + } +} diff --git a/packages/core/scss/components/split-button/_layout.scss b/packages/core/scss/components/split-button/_layout.scss new file mode 100644 index 00000000000..98df76a5086 --- /dev/null +++ b/packages/core/scss/components/split-button/_layout.scss @@ -0,0 +1,41 @@ +@use "./_variables.scss" as *; + +@mixin kendo-split-button--layout-base() { + + // Split button + .k-split-button {} + + // Split button arrow + .k-split-button .k-split-button-arrow { + padding-block: $kendo-split-button-arrow-padding-y; + padding-inline: $kendo-split-button-arrow-padding-x; + width: auto; + aspect-ratio: auto; + flex: none; + + &.k-button-sm { + padding-block: $kendo-split-button-sm-arrow-padding-y; + padding-inline: $kendo-split-button-sm-arrow-padding-x; + } + + &.k-button-md { + padding-block: $kendo-split-button-md-arrow-padding-y; + padding-inline: $kendo-split-button-md-arrow-padding-x; + } + + &.k-button-lg { + padding-block: $kendo-split-button-lg-arrow-padding-y; + padding-inline: $kendo-split-button-lg-arrow-padding-x; + } + + .k-button-icon { + min-width: 0; + } + } + +} + + +@mixin kendo-split-button--layout() { + @include kendo-split-button--layout-base(); +} diff --git a/packages/core/scss/components/split-button/_theme.scss b/packages/core/scss/components/split-button/_theme.scss new file mode 100644 index 00000000000..82f7750a04e --- /dev/null +++ b/packages/core/scss/components/split-button/_theme.scss @@ -0,0 +1,17 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-split-button--theme-base() { + + // Split button + .k-split-button:focus, + .k-split-button.k-focus { + @include focus-indicator( $kendo-split-button-focus-shadow ); + } + +} + + +@mixin kendo-split-button--theme() { + @include kendo-split-button--theme-base(); +} diff --git a/packages/core/scss/components/split-button/_variables.scss b/packages/core/scss/components/split-button/_variables.scss new file mode 100644 index 00000000000..d3b76f8f4b1 --- /dev/null +++ b/packages/core/scss/components/split-button/_variables.scss @@ -0,0 +1,31 @@ +// Split-button + +/// The focus shadow of the SplitButton. +/// @group split-button +$kendo-split-button-focus-shadow: null !default; + +/// The horizontal padding of the arrow Button. +/// @group split-button +$kendo-split-button-arrow-padding-x: null !default; +/// The horizontal padding of the small arrow Button. +/// @group split-button +$kendo-split-button-sm-arrow-padding-x: null !default; +/// The horizontal padding of the medium arrow Button. +/// @group split-button +$kendo-split-button-md-arrow-padding-x: null !default; +/// The horizontal padding of the large arrow Button. +/// @group split-button +$kendo-split-button-lg-arrow-padding-x: null !default; + +/// The vertical padding of the arrow Button. +/// @group split-button +$kendo-split-button-arrow-padding-y: null !default; +/// The vertical padding of the small arrow Button. +/// @group split-button +$kendo-split-button-sm-arrow-padding-y: null !default; +/// The vertical padding of the medium arrow Button. +/// @group split-button +$kendo-split-button-md-arrow-padding-y: null !default; +/// The vertical padding of the large arrow Button. +/// @group split-button +$kendo-split-button-lg-arrow-padding-y: null !default; diff --git a/packages/core/scss/components/splitter/_index.scss b/packages/core/scss/components/splitter/_index.scss new file mode 100644 index 00000000000..6b812f3a936 --- /dev/null +++ b/packages/core/scss/components/splitter/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + + +// Dependencies + + +// Expose +@mixin kendo-splitter--styles() { + @include import-once( "splitter" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-splitter--layout(); + @include kendo-splitter--theme(); + } +} diff --git a/packages/core/scss/components/splitter/_layout.scss b/packages/core/scss/components/splitter/_layout.scss new file mode 100644 index 00000000000..8379de628de --- /dev/null +++ b/packages/core/scss/components/splitter/_layout.scss @@ -0,0 +1,196 @@ +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-splitter--layout-base() { + + // Base + .k-splitter { + height: 300px; + border-width: $kendo-splitter-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-splitter-font-family; + font-size: $kendo-splitter-font-size; + line-height: $kendo-splitter-line-height; + display: block; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + // Pane + .k-pane { + overflow: hidden; + box-sizing: border-box; + } + .k-scrollable { + overflow: auto; + } + .k-splitter-resizing { + overflow: hidden; + } + + // Loading + .k-pane-loading { + position: static; + top: 50%; + left: 50%; + } + + } + + + // Splitbar + .k-ghost-splitbar, + .k-splitbar { + border-style: solid; + outline: 0; + position: absolute; + user-select: none; + touch-action: none; + display: flex; + align-items: center; + justify-content: center; + + .k-collapse-prev, + .k-collapse-next { + cursor: pointer; + padding: $kendo-splitter-collapse-icon-padding-y $kendo-splitter-collapse-icon-padding-x; + } + + } + + .k-splitbar-draggable-horizontal { cursor: col-resize; } + .k-splitbar-draggable-vertical { cursor: row-resize; } + + .k-ghost-splitbar-horizontal, + .k-splitbar-horizontal { + width: $kendo-splitter-splitbar-size; + border-width: 0; + background-repeat: repeat-y; + flex-direction: column; + top: 0; + } + .k-ghost-splitbar-vertical, + .k-splitbar-vertical { + height: $kendo-splitter-splitbar-size; + border-width: 0; + background-repeat: repeat-x; + flex-direction: row; + left: 0; + } + + .k-splitbar-static-horizontal { width: 1px; } + .k-splitbar-static-vertical { height: 1px; } + + .k-splitbar-draggable-horizontal .k-resize-handle { + width: $kendo-splitter-drag-handle-thickness; + height: $kendo-splitter-drag-handle-length; + position: static; + z-index: 1; + } + + .k-splitbar .k-resize-handle { + display: none; + background-color: currentColor; + } + + .k-splitbar-draggable-horizontal, + .k-splitbar-draggable-vertical { + + .k-resize-handle { + display: block; + } + } + + .k-splitbar-horizontal .k-collapse-prev { + margin-bottom: $kendo-splitter-drag-icon-margin; + } + + .k-splitbar-horizontal .k-collapse-next { + margin-top: $kendo-splitter-drag-icon-margin; + } + + .k-splitbar-vertical .k-collapse-prev { + margin-right: $kendo-splitter-drag-icon-margin; + } + + .k-splitbar-vertical .k-collapse-next { + margin-left: $kendo-splitter-drag-icon-margin; + } + + .k-splitbar-draggable-vertical .k-resize-handle { + width: $kendo-splitter-drag-handle-length; + height: $kendo-splitter-drag-handle-thickness; + position: static; + z-index: 1; + } + + .k-pane > { + .k-splitter { + border-width: 0; + overflow: hidden; + } + + .k-splitter-overlay { + opacity: 0; + position: absolute; + } + } + + // flexbox-based splitter + + .k-splitter-flex { + display: flex; + width: 100%; + height: auto; + + .k-pane { + position: relative; + flex: 1 1 auto; + min-width: 0; + max-width: 100%; + min-height: 0; + max-height: 100%; + height: 100%; // allows nested elements to use height: 100% + } + + .k-pane-static { + flex-grow: 0; + flex-shrink: 0; + } + + .k-pane-flex { + display: flex; + } + + .k-splitbar { + position: static; + flex: 0 0 auto; + } + + .k-pane, + .k-pane-flex { + &.k-hidden, + &[hidden] { + // hidden panes need to be zero-width to allow pane animation + flex: 0 1 0% !important; // stylelint-disable-line declaration-no-important + overflow: hidden !important; // stylelint-disable-line declaration-no-important + display: block !important; // stylelint-disable-line declaration-no-important + } + } + + &.k-splitter-horizontal { + flex-direction: row; + } + &.k-splitter-vertical { + flex-direction: column; + } + } + +} + + +@mixin kendo-splitter--layout() { + @include kendo-splitter--layout-base(); +} diff --git a/packages/core/scss/components/splitter/_theme.scss b/packages/core/scss/components/splitter/_theme.scss new file mode 100644 index 00000000000..c536f9b8905 --- /dev/null +++ b/packages/core/scss/components/splitter/_theme.scss @@ -0,0 +1,43 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-splitter--theme-base() { + + // Splitter + .k-splitter { + @include fill( + $kendo-splitter-text, + $kendo-splitter-bg, + $kendo-splitter-border + ); + } + + // Splitbar + .k-splitbar { + color: $kendo-splitbar-text; + background-color: $kendo-splitbar-bg; + } + .k-splitbar:hover, + .k-splitbar.k-hover, + .k-splitbar-horizontal-hover, + .k-splitbar-vertical-hover { + color: $kendo-splitbar-hover-text; + background-color: $kendo-splitbar-hover-bg; + } + .k-splitbar:focus, + .k-splitbar.k-focus { + color: $kendo-splitbar-selected-text; + background: $kendo-splitbar-selected-bg; + } + + // Ghost splitbar + .k-ghost-splitbar { + background-color: $kendo-splitbar-hover-bg; + } + +} + + +@mixin kendo-splitter--theme() { + @include kendo-splitter--theme-base(); +} diff --git a/packages/core/scss/components/splitter/_variables.scss b/packages/core/scss/components/splitter/_variables.scss new file mode 100644 index 00000000000..9f5294a9ec6 --- /dev/null +++ b/packages/core/scss/components/splitter/_variables.scss @@ -0,0 +1,64 @@ +// Splitter + +/// The width of the border around the Splitter. +/// @group splitter +$kendo-splitter-border-width: null !default; +/// The font family of the Splitter. +/// @group splitter +$kendo-splitter-font-family: null !default; +/// The font size of the Splitter. +/// @group splitter +$kendo-splitter-font-size: null !default; +/// The line height of the Splitter. +/// @group splitter +$kendo-splitter-line-height: null !default; + +/// The background color of the Splitter. +/// @group splitter +$kendo-splitter-bg: null !default; +/// The text color of the Splitter. +/// @group splitter +$kendo-splitter-text: null !default; +/// The border color of the Splitter. +/// @group splitter +$kendo-splitter-border: null !default; + +/// The size of the Splitter split bar. +/// @group splitter +$kendo-splitter-splitbar-size: null !default; +/// The length of the Splitter drag handle. +/// @group splitter +$kendo-splitter-drag-handle-length: null !default; +/// The thickness of the Splitter drag handle. +/// @group splitter +$kendo-splitter-drag-handle-thickness: null !default; +/// The margin of the Splitter drag handle icon. +/// @group splitter +$kendo-splitter-drag-icon-margin: null !default; +/// The horizontal padding of the collapse icon in the Splitter. +/// @group splitter +$kendo-splitter-collapse-icon-padding-x: null !default; +/// The vertical padding of the collapse icon in the Splitter. +/// @group splitter +$kendo-splitter-collapse-icon-padding-y: null !default; + +/// The background color of the Splitter split bar. +/// @group splitter +$kendo-splitbar-bg: null !default; +/// The text color of the Splitter split bar. +/// @group splitter +$kendo-splitbar-text: null !default; + +/// The hover background color of the Splitter split bar. +/// @group splitter +$kendo-splitbar-hover-bg: null !default; +/// The hover text color of the Splitter split bar. +/// @group splitter +$kendo-splitbar-hover-text: null !default; + +/// The selected background color of the Splitter split bar. +/// @group splitter +$kendo-splitbar-selected-bg: null !default; +/// The selected text color of the Splitter split bar. +/// @group splitter +$kendo-splitbar-selected-text: null !default; diff --git a/packages/core/scss/components/spreadsheet/_index.scss b/packages/core/scss/components/spreadsheet/_index.scss new file mode 100644 index 00000000000..2ae3b10975f --- /dev/null +++ b/packages/core/scss/components/spreadsheet/_index.scss @@ -0,0 +1,48 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../checkbox/_index.scss" as *; +@use "../radio/_index.scss" as *; +@use "../colorpicker/_index.scss" as *; +@use "../combobox/_index.scss" as *; +@use "../datetimepicker/_index.scss" as *; +@use "../dropdownlist/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../upload/_index.scss" as *; +@use "../menu/_index.scss" as *; +@use "../window/_index.scss" as *; +@use "../tabstrip/_index.scss" as *; +@use "../treeview/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-spreadsheet--styles() { + @include import-once( "spreadsheet" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-checkbox--styles(); + @include kendo-radio--styles(); + @include kendo-color-picker--styles(); + @include kendo-combobox--styles(); + @include kendo-date-time-picker--styles(); + @include kendo-dropdown-list--styles(); + @include kendo-toolbar--styles(); + @include kendo-upload--styles(); + @include kendo-menu--styles(); + @include kendo-window--styles(); + @include kendo-tabstrip--styles(); + @include kendo-treeview--styles(); + @include kendo-icon--styles(); + @include kendo-list--styles(); + @include kendo-spreadsheet--layout(); + @include kendo-spreadsheet--theme(); + @include kendo-utils--flex-grid--order(); + } +} diff --git a/packages/core/scss/components/spreadsheet/_layout.scss b/packages/core/scss/components/spreadsheet/_layout.scss new file mode 100644 index 00000000000..22fc2feeee3 --- /dev/null +++ b/packages/core/scss/components/spreadsheet/_layout.scss @@ -0,0 +1,913 @@ +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../list/_variables.scss" as *; +@use "../icons/_variables.scss" as *; +@use "../menu/_variables.scss" as *; +@use "../toolbar/_variables.scss" as *; + +@mixin kendo-spreadsheet--layout-base() { + + // Spreadsheet + .k-spreadsheet { + width: 100%; + height: 600px; + border-width: $kendo-spreadsheet-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-spreadsheet-font-family; + font-size: $kendo-spreadsheet-font-size; + line-height: $kendo-spreadsheet-line-height; + display: flex; + flex-direction: column; + cursor: default; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + .k-vertical-align-center { + position: relative; + top: 50%; + transform: translateY(-50%); + } + .k-vertical-align-bottom { + position: relative; + top: 100%; + transform: translateY( -100% ); + } + } + + // Toolbar + .k-spreadsheet-toolbar { + border-top-width: 0; + border-inline-width: 0; + } + + // Action bar + .k-spreadsheet-action-bar { + border-width: 0 0 $kendo-spreadsheet-action-bar-border-width; + border-style: solid; + border-color: inherit; + padding-block: $kendo-spreadsheet-action-bar-padding-y; + padding-inline: $kendo-spreadsheet-action-bar-padding-x; + font-size: $kendo-spreadsheet-action-bar-font-size; + font-family: $kendo-spreadsheet-action-bar-font-family; + position: relative; + display: flex; + flex-direction: row; + gap: $kendo-spreadsheet-action-bar-spacing; + } + // Todo check + .k-spreadsheet-name-editor { + width: 10em; + } + .k-spreadsheet-formula-bar { + min-width: 0px; + border-color: inherit; + display: flex; + flex-direction: row; + align-items: center; + flex: 1; + gap: $kendo-spreadsheet-formula-bar-gap; + + // move to legacy selector + > .k-icon { + padding-block: 0; + padding-inline: $kendo-spreadsheet-formula-bar-icon-padding; + box-sizing: content-box; + border-width: 0 1px 0 0; + border-style: solid; + border-color: inherit; + flex-shrink: 0; + } + + // add k-hidden from component + .k-tooltip, + .k-group-header, + .k-list-scroller { + display: none; + } + + .k-spreadsheet-formula-input { + padding-block: $kendo-spreadsheet-formula-input-padding-y; + padding-inline: $kendo-spreadsheet-formula-input-padding-x; + line-height: $kendo-spreadsheet-formula-input-line-height; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.k-spreadsheet-array-formula { + &::before { + content: "{"; + font-weight: 700; + } + &::after { + content: "}"; + font-weight: 700; + } + } + } + } + .k-spreadsheet-formula-input { + outline: 0; + white-space: pre; + flex: 1; + box-sizing: border-box; + + > .k-syntax-func.k-syntax-at-point, + > .k-syntax-bool.k-syntax-at-point, + > .k-syntax-ref.k-syntax-at-point, + > .k-syntax-str.k-syntax-at-point, + > .k-syntax-num.k-syntax-at-point { + text-decoration: underline; + } + + > .k-series-a, + > .k-series-b, + > .k-series-c, + > .k-series-d { + background-color: transparent; + } + } + .k-spreadsheet-formula-list { + min-width: 100px; + + .k-item { + padding-block: $kendo-list-md-item-padding-y; + padding-inline: $kendo-list-md-item-padding-x; + } + } + .k-syntax-func, + .k-syntax-startexp { + font-weight: bold; + } + + + // Cell editor + .k-spreadsheet-cell-editor { + padding-block: $kendo-spreadsheet-cell-editor-padding-y; + padding-inline: $kendo-spreadsheet-cell-editor-padding-x; + line-height: $kendo-spreadsheet-cell-editor-line-height; + display: none; + overflow: hidden; + position: absolute; + z-index: 100; + } + + + // Sheets bar + .k-spreadsheet-sheets-bar { + padding-block-end: $kendo-spreadsheet-sheets-bar-padding-y; + padding-inline: $kendo-spreadsheet-sheets-bar-padding-x; + border-width: $kendo-spreadsheet-sheets-bar-border-width 0 0; + border-style: solid; + border-color: inherit; + display: flex; + flex-direction: row; + align-items: center; + position: relative; + } + + .k-spreadsheet-sheets { + flex: 1 1 auto; + overflow: hidden; + } + .k-spreadsheet-sheets .k-tabstrip-items-wrapper { + border-width: 0; + } + + .k-spreadsheet-sheets-bar-add { + align-self: center; + + &:not(:hover) { + border-color: transparent; + color: inherit; + background: none; + } + } + + .k-spreadsheet-sheets-items { + flex: 1; + overflow: hidden; + + .k-tabstrip-items-wrapper { + margin: 0; + border-width: 0; + } + + .k-item { + .k-link { + display: inline-block; + } + + .k-spreadsheet-sheets-remove { + margin-right: k-spacing(2); + margin-left: calc( #{k-spacing(2)} * -1 ); + padding: 0; + line-height: 1; + display: inline-flex; + flex-direction: row; + vertical-align: middle; + align-self: center; + } + } + } + + + // Spreadsheet view + .k-spreadsheet-view { + height: auto !important; // stylelint-disable-line declaration-no-important + border-color: inherit; + font-size: $kendo-spreadsheet-view-font-size; + font-family: $kendo-spreadsheet-view-font-family; + flex: 1; + position: relative; + overflow: hidden; + + // disabled cells in the Spreadsheet should allow navigation if link is used + .k-disabled { + pointer-events: auto; + } + } + + .k-spreadsheet-fixed-container { + width: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) ); + height: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) ); + border-color: inherit; + box-sizing: border-box; + user-select: none; + position: absolute; + z-index: 2; + overflow: hidden; + } + + // todo check if used - probably not + .k-spreadsheet-overflow { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + border-color: inherit; + } + + .k-spreadsheet-pane { + padding: 0 1px 0 0; + border-width: 2px 0 0 2px; + border-style: solid; + border-color: inherit; + box-sizing: border-box; + position: absolute; + overflow: hidden; + + @each $side in (top, left) { + &.k-#{$side} { border-#{$side}-width: 0; } + } + + } + + .k-spreadsheet-top-corner { + border-width: 0 1px 1px 0; + border-style: solid; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + z-index: 10000; + + &::after { + content: ""; + display: block; + width: 0; + height: 0; + overflow: hidden; + position: absolute; + bottom: 0; + right: 0; + border: 6px solid transparent; + border-right-color: inherit; + border-bottom-color: inherit; + } + } + + .k-spreadsheet-scroller { + width: 100%; + height: 100%; + overflow: scroll; + position: absolute; + z-index: 1; + + @media (hover: none), (pointer: coarse) { + // on touch devices we want this to stay on top. + z-index: 3; + } + } + + + // Grid lines + .k-spreadsheet-haxis, + .k-spreadsheet-vaxis { + border: 0 solid; + border-color: inherit; + position: absolute; + } + .k-spreadsheet-haxis { + border-width: 1px 0 0; + left: 0; + } + .k-spreadsheet-vaxis { + border-width: 0 0 0 1px; + top: 0; + } + + + // Row / Column headers + .k-spreadsheet-row-header, + .k-spreadsheet-column-header { + text-align: center; + z-index: 100; + + > div { + position: relative; + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: inherit; + + &::after { + content: ""; + border-width: 0; + border-style: solid; + border-color: inherit; + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + } + } + .k-spreadsheet-row-header { + position: relative; + } + .k-spreadsheet-column-header { + position: absolute; + } + .k-spreadsheet-row-header > div { + border-top-width: 1px; + + &:first-child { border-top-width: 0; } + } + .k-spreadsheet-row-header > .k-selection-partial, + .k-spreadsheet-row-header > .k-selection-full { + &::after { + border-right-width: 2px; + display: block; + } + } + .k-spreadsheet-column-header > div { + border-left-width: 1px; + + &:first-child { border-left-width: 0; } + } + .k-spreadsheet-column-header > .k-selection-partial, + .k-spreadsheet-column-header > .k-selection-full { + &::after { + border-bottom-width: 2px; + display: block; + } + } + + + // Spreadsheet data + .k-spreadsheet-data { + border-color: inherit; + cursor: cell; + position: relative; + } + + + // Cells + .k-spreadsheet-cell { + padding-block: $kendo-spreadsheet-cell-padding-y; + padding-inline: $kendo-spreadsheet-cell-padding-x; + box-sizing: border-box; + position: absolute; + line-height: normal; + white-space: pre; + overflow: hidden; + } + .k-spreadsheet-merged-cells-wrapper { + position: relative; + } + + .k-spreadsheet-disabled-mask { + position: absolute; + } + + // Selection + .k-spreadsheet .k-selection-wrapper { + position: relative; + cursor: cell; + } + .k-spreadsheet .k-spreadsheet-selection { + border-width: 1px; + border-style: solid; + box-sizing: border-box; + position: absolute; + } + .k-spreadsheet .k-spreadsheet-selection-highlight { + border-width: 2px; + border-style: dashed; + box-sizing: border-box; + position: absolute; + } + .k-spreadsheet .k-spreadsheet-editor-button { + position: absolute; + padding: 0; + z-index: 60; + } + + .k-spreadsheet-active-cell { + // always show exact active cell border, regardless of inline cell styles + outline-color: transparent !important; // stylelint-disable-line declaration-no-important + z-index: 10; + } + + .k-spreadsheet .k-auto-fill-wrapper { + position: relative; + } + .k-spreadsheet .k-auto-fill, + .k-spreadsheet .k-auto-fill-punch, + .k-spreadsheet .k-auto-fill-br-hint { + box-sizing: border-box; + position: absolute; + } + .k-spreadsheet .k-auto-fill { + border-width: 1px; + border-style: solid; + cursor: crosshair; + } + + .k-spreadsheet .k-single-selection {} + .k-spreadsheet .k-single-selection::after { + content: ""; + margin-bottom: -4px; + margin-right: -4px; + width: 6px; + height: 6px; + border-width: 1px; + border-style: solid; + border-radius: 50%; + display: block; + position: absolute; + bottom: 0; + right: 0; + z-index: 300; + cursor: crosshair; + } + + .k-spreadsheet .k-selection-full, + .k-spreadsheet .k-selection-partial { + &::after { + display: none; + } + } + + + // Autofill + .k-spreadsheet .k-autofill-wrapper { + position: relative; + cursor: cell; + } + + + // Border rendering + .k-spreadsheet-vborder { + position: absolute; + border-left-style: solid; + border-left-width: 1px; + } + + .k-spreadsheet-hborder { + position: absolute; + border-top-style: solid; + border-top-width: 1px; + } + + + // Comments + .k-spreadsheet-has-comment::after { + content: ""; + display: block; + position: absolute; + top: 0; + inset-inline-end: 0; + inset-inline-start: auto; + border-width: 3px; + border-style: solid; + } + + + // Validation + .k-spreadsheet-cell .k-dirty { + inset-inline-start: 0; + inset-inline-end: auto; + } + + + // Filter button + .k-spreadsheet .k-filter-wrapper { + position: relative; + z-index: 50; + } + + .k-spreadsheet .k-filter-range { + border-width: 2px; + border-style: solid; + position: absolute; + box-sizing: border-box; + pointer-events: none; + } + + .k-spreadsheet-filter { + @include border-radius( k-border-radius(md) ); + padding: $kendo-spreadsheet-filter-padding; + line-height: 1; + position: absolute; + cursor: pointer; + + .k-icon { vertical-align: middle; } + } + + + // Filter menu + .k-spreadsheet-filter-menu { + width: 280px; + + .k-animation-container { + position: relative; + } + + > .k-menu, + > .k-menu.k-menu-vertical { + border-width: 0; + + .k-item { + color: inherit; + } + .k-link { + padding-left: $kendo-spreadsheet-filter-menu-link-padding-x; + } + .k-icon { + margin: $kendo-spreadsheet-filter-menu-icon-margin; + } + + } + + .k-spreadsheet-value-treeview-wrapper { + height: 200px; + border-width: 1px; + border-style: solid; + overflow-y: scroll; + overflow-x: auto; + + .k-treeview { + padding: $kendo-spreadsheet-filter-padding; + overflow: visible; + } + } + + // Details + .k-details, + .k-expander { + padding: 0; + border-width: 1px 0 0; + border-style: solid; + border-color: inherit; + } + .k-expander { + border: 0; + background: inherit; + } + .k-details-summary, + .k-columnmenu-item { + padding-block: $kendo-menu-popup-item-padding-y; + padding-inline: $kendo-menu-popup-item-padding-x; + display: flex; + align-items: center; + cursor: pointer; + + > .k-icon, + > .k-expander-indicator { + margin-right: $kendo-spreadsheet-filter-padding; + } + } + .k-details-content, + .k-columnmenu-item-content { + padding: k-spacing(2); + display: flex; + flex-flow: column nowrap; + gap: k-spacing(2); + + .k-filter-and { + width: min-content; + align-self: flex-start; + } + } + + .k-actions { + margin: 0; + padding: 0; + } + } + + // Spreadsheet toolbar + .k-spreadsheet-popup { + padding: 0; + + .k-separator { + display: block; + } + + .k-reset-color, + .k-custom-color { + @include border-radius( 0 ); + width: 100%; + border-width: 0; + box-sizing: border-box; + display: flex; + } + .k-reset-color { border-bottom-width: 1px; } + .k-custom-color { border-top-width: 1px; } + .k-spreadsheet-border-type-palette { + padding: k-spacing(2); + display: grid; + grid-template-columns: repeat(5, max-content); + gap: k-spacing(2); + } + } + + + .k-spreadsheet-clipboard, + .k-spreadsheet-clipboard-paste { + margin: 0; + padding: 0; + width: 1px; + height: 1px; + border: 0; + opacity: 0; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + } + + + + // Spreadsheet window + .k-spreadsheet-window .k-external-dropzone { + margin-block-end: $kendo-spreadsheet-dropzone-spacing-y; + } + + .k-spreadsheet-window .k-edit-form-container { + width: auto; + min-width: 0; + } + + + // Format preview window + .k-spreadsheet-format-cells { + + .k-spreadsheet-preview { + margin-top: k-spacing(2); + text-align: center; + } + + .k-list-scroller { + margin-top: k-spacing(2); + height: 210px; + border-width: 1px; + border-style: solid; + border-color: inherit; + } + } + + + // Export dialog + .k-export-config { + clear: both; + position: relative; + + &::after { + content: ""; + clear: both; + display: block; + } + + + .k-edit-field { + margin-left: 5%; + width: 45%; + float: left; + } + + .k-page-orientation { + position: absolute; + right: 0; + top: k-spacing(2); + + .k-font-icon { + font-size: 6em; + } + .k-svg-icon { + width: 6em; + height: 6em; + } + } + } + + + // Insert comment dialog + .k-spreadsheet-insert-comment textarea { + height: auto; + } + + // Insert image dialog - Delete after new rendering adoption R3 23 + .k-spreadsheet-insert-image-dialog { + @include border-radius( $kendo-spreadsheet-insert-image-dialog-preview-border-radius ); + border-style: $kendo-spreadsheet-insert-image-dialog-border-style; + border-width: $kendo-spreadsheet-insert-image-dialog-border-width; + + label { + display: flex; + justify-content: center; + min-width: 100%; + width: $kendo-spreadsheet-insert-image-dialog-preview-width; + height: $kendo-spreadsheet-insert-image-dialog-preview-height; + background-image: url(#{$kendo-spreadsheet-insert-image-dialog-preview-img}); + background-size: auto 70%; + background-position: 50% 30%; + background-repeat: no-repeat; + + div { + display: flex; + align-self: flex-end; + margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom; + pointer-events: none; + } + + input { + display: none; + } + } + + .k-spreadsheet-has-image { + background-size: auto 90%; + background-position: 50% 50%; + + &:hover div, + &.k-hover div { + margin: 0; + align-self: center; + opacity: 1; + } + + div { + opacity: 0; + } + } + } + + + + // Spreadsheet drawing + .k-spreadsheet-drawing { + position: absolute; + box-sizing: border-box; + z-index: 101; + + &.k-spreadsheet-active-drawing { + outline-style: $kendo-spreadsheet-drawing-outline-style; + outline-width: $kendo-spreadsheet-drawing-outline-width; + } + + .k-spreadsheet-drawing-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: 50% 50%; + background-size: 100% 100%; + background-repeat: no-repeat; + cursor: move; + } + + .k-spreadsheet-drawing-handle { + width: $kendo-spreadsheet-drawing-handle-width; + height: $kendo-spreadsheet-drawing-handle-height; + border-style: $kendo-spreadsheet-drawing-handle-border-style; + border-width: $kendo-spreadsheet-drawing-handle-border-width; + border-radius: $kendo-spreadsheet-drawing-handle-border-radius; + position: absolute; + transform: translate(-50%, -50%); + + // stylelint-disable declaration-block-single-line-max-declarations, selector-class-pattern + &.N { left: 50%; top: 0; cursor: ns-resize; } + &.NE { left: 100%; top: 0; cursor: nesw-resize; } + &.E { left: 100%; top: 50%; cursor: ew-resize; } + &.SE { left: 100%; top: 100%; cursor: nwse-resize; } + &.S { left: 50%; top: 100%; cursor: ns-resize; } + &.SW { left: 0; top: 100%; cursor: nesw-resize; } + &.W { left: 0; top: 50%; cursor: ew-resize; } + &.NW { left: 0; top: 0; cursor: nwse-resize; } + // stylelint-enable declaration-block-single-line-max-declarations, selector-class-pattern + } + + .k-spreadsheet-insert-image-dialog { + .k-spreadsheet-has-image { + &:hover, + &.k-hover { + border-radius: $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius; + } + } + } + } + + + // Legacy styles + .k-spreadsheet-legacy { + .k-spreadsheet, + .k-spreadsheet-action-bar, + .k-spreadsheet-view { + font-size: 12px; + } + + .k-spreadsheet-cell { + padding: 1px; + } + + .k-spreadsheet-filter { + padding: 0px; + } + + .k-filter-range { + border-width: 1px; + } + + .k-spreadsheet .k-spreadsheet-selection-highlight { + border-width: 1px; + border-style: solid; + } + } + + // Tabstrip + .k-spreadsheet .k-tabstrip-wrapper { + border-width: 0 0 1px; + border-style: solid; + border-color: inherit; + position: relative; + } + + .k-spreadsheet-quick-access-toolbar { + padding: $kendo-toolbar-md-padding-y; + display: inline-flex; + flex-direction: row; + position: absolute; + z-index: 2; + top: 0; + left: 0; + } + + .k-spreadsheet-tabstrip { + padding-top: $kendo-toolbar-md-padding-y; + position: relative; + z-index: 1; + } + .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper { + margin: 0; + } + .k-spreadsheet-tabstrip .k-loading { + display: none; + } + .k-spreadsheet-tabstrip .k-content, + .k-spreadsheet-tabstrip .k-tabstrip-content { + @include border-radius( 0 ); + padding: 0; + border-width: 0; + overflow: hidden; + } + +} + + +@mixin kendo-spreadsheet--layout() { + @include kendo-spreadsheet--layout-base(); +} diff --git a/packages/core/scss/components/spreadsheet/_theme.scss b/packages/core/scss/components/spreadsheet/_theme.scss new file mode 100644 index 00000000000..2e537a13bdd --- /dev/null +++ b/packages/core/scss/components/spreadsheet/_theme.scss @@ -0,0 +1,217 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; +@use "../button/_variables.scss" as *; +@use "../list/_variables.scss" as *; + +@mixin kendo-spreadsheet--theme-base() { + + // Spreadsheet + .k-spreadsheet { + @include fill( + $kendo-spreadsheet-text, + $kendo-spreadsheet-bg, + $kendo-spreadsheet-border + ); + } + + // Header + .k-spreadsheet-header { + @include fill( + $kendo-spreadsheet-header-text, + $kendo-spreadsheet-header-bg, + $kendo-spreadsheet-header-border, + $kendo-spreadsheet-header-gradient + ); + } + + // Row / Column Headers + .k-spreadsheet-top-corner, + .k-spreadsheet-row-header, + .k-spreadsheet-column-header { + @include fill( + $kendo-spreadsheet-table-header-text, + $kendo-spreadsheet-table-header-bg, + $kendo-spreadsheet-table-header-border, + $kendo-spreadsheet-table-header-gradient + ); + } + + // Cell editor + .k-spreadsheet-cell-editor { + @include fill( + $kendo-spreadsheet-cell-editor-text, + $kendo-spreadsheet-cell-editor-bg, + $kendo-spreadsheet-cell-editor-border + ) + } + + // Cells + .k-spreadsheet-merged-cell { + @include fill( $bg: $kendo-spreadsheet-bg ); + } + .k-spreadsheet-disabled-mask { + @include fill( $bg: $kendo-spreadsheet-bg ); + } + + // Selection + .k-spreadsheet .k-selection-full, + .k-spreadsheet .k-selection-partial { + @include fill( $bg: $kendo-spreadsheet-partial-selection-bg ); + } + .k-spreadsheet-selection { + @include fill( + $kendo-spreadsheet-selection-text, + $kendo-spreadsheet-selection-bg, + $kendo-spreadsheet-selection-border + ); + @include box-shadow( $kendo-spreadsheet-selection-shadow ); + } + .k-spreadsheet-selection-highlight { + @include fill( $border: $kendo-spreadsheet-selection-border ); + } + .k-spreadsheet .k-single-selection::after { + @include fill( + $kendo-spreadsheet-single-selection-text, + $kendo-spreadsheet-single-selection-bg, + $kendo-spreadsheet-single-selection-border + ) + } + .k-spreadsheet-active-cell { + @include fill ( $bg: $kendo-spreadsheet-active-cell-bg ); + @include box-shadow( $kendo-spreadsheet-active-cell-shadow ); + } + + .k-spreadsheet .k-auto-fill { + @include fill( + $kendo-spreadsheet-auto-fill-text, + $kendo-spreadsheet-auto-fill-bg, + $kendo-spreadsheet-auto-fill-border + ); + @include box-shadow( $kendo-spreadsheet-auto-fill-shadow ); + } + .k-spreadsheet .k-auto-fill-punch { + @include fill( $bg: $kendo-spreadsheet-auto-fill-punch-bg ); + } + + // Resize handle + .k-spreadsheet .k-resize-handle, + .k-spreadsheet .k-resize-hint-handle, + .k-spreadsheet .k-resize-hint-marker { + @include fill( $bg: $kendo-spreadsheet-resize-handle-bg ); + } + + // Comments + .k-spreadsheet-has-comment::after { + border-block-color: $kendo-spreadsheet-cell-comment-border transparent; + border-inline-color: transparent $kendo-spreadsheet-cell-comment-border; + } + + // Validation + .k-spreadsheet-cell .k-dirty { + border-block-color: $kendo-spreadsheet-cell-dirty-border transparent; + border-inline-color: $kendo-spreadsheet-cell-dirty-border transparent; + } + + // Filter button + .k-spreadsheet .k-filter-range { + border-color: $kendo-color-primary; + } + .k-spreadsheet-filter { + @include fill( + $kendo-button-text, + $kendo-button-bg, + $kendo-button-border, + $kendo-button-gradient + ); + box-shadow: inset 0 0 0 1px $kendo-button-border; + + &:hover { + @include fill( + $kendo-button-hover-text, + $kendo-button-hover-bg, + $kendo-button-hover-border, + $kendo-button-hover-gradient + ); + } + + &.k-active { + @include fill( + $kendo-button-active-text, + $kendo-button-active-bg, + $kendo-button-active-border, + $kendo-button-active-gradient + ); + } + } + + // Filter menu legacy - delete after new rendering adoption R3 23 + .k-spreadsheet-filter-menu { + > .k-menu, + > .k-menu:not(.k-context-menu) { + + .k-item:hover, + .k-item.k-hover { + @include fill( + $kendo-list-item-hover-text, + $kendo-list-item-hover-bg + ); + } + } + + .k-spreadsheet-value-treeview-wrapper { + @include fill( + $kendo-spreadsheet-text, + $kendo-spreadsheet-bg, + $kendo-spreadsheet-border + ); + } + } + + // Delete after new rendering adoption R3 23 + .k-spreadsheet-insert-image-dialog { + border-color: $kendo-spreadsheet-insert-image-dialog-preview-border; + + .k-spreadsheet-has-image { + &:hover, + &.k-hover { + box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow; + } + + &:hover div, + &.k-hover div { + color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text; + } + } + } + + // Drawing + .k-spreadsheet-drawing { + &.k-spreadsheet-active-drawing { + outline-color: $kendo-spreadsheet-drawing-handle-outline-color; + } + + .k-spreadsheet-drawing-handle { + border-color: $kendo-spreadsheet-drawing-handle-border-color; + background-color: $kendo-spreadsheet-drawing-handle-bg; + } + } + + .k-spreadsheet-drawing-anchor-cell { + background: $kendo-spreadsheet-drawing-anchor-bg; + } + + // Formula bar + .k-spreadsheet-formula-list {} + .k-syntax-ref { color: #ff8822; } + .k-syntax-num { color: #0099ff; } + .k-syntax-str { color: #38b714; } + .k-syntax-error { color: red; } + .k-syntax-bool { color: #a9169c; } + .k-syntax-paren-match { background-color: #caf200; } + +} + +@mixin kendo-spreadsheet--theme() { + @include kendo-spreadsheet--theme-base(); +} diff --git a/packages/core/scss/components/spreadsheet/_variables.scss b/packages/core/scss/components/spreadsheet/_variables.scss new file mode 100644 index 00000000000..54ebd4182b5 --- /dev/null +++ b/packages/core/scss/components/spreadsheet/_variables.scss @@ -0,0 +1,273 @@ +// Spreadsheet + +/// The width of the border around the Spreadsheet. +/// @group spreadsheet +$kendo-spreadsheet-border-width: null !default; +/// The font family of the Spreadsheet. +/// @group spreadsheet +$kendo-spreadsheet-font-family: null !default; +/// The font size of the Spreadsheet. +/// @group spreadsheet +$kendo-spreadsheet-font-size: null !default; +/// The line height of the Spreadsheet. +/// @group spreadsheet +$kendo-spreadsheet-line-height: null !default; + +/// The background color of the Spreadsheet. +/// @group spreadsheet +$kendo-spreadsheet-bg: null !default; +/// The text color of the Spreadsheet. +/// @group spreadsheet +$kendo-spreadsheet-text: null !default; +/// The border color of the Spreadsheet. +/// @group spreadsheet +$kendo-spreadsheet-border: null !default; + +/// The background color of the Spreadsheet header. +/// @group spreadsheet +$kendo-spreadsheet-header-bg: null !default; +/// The text color of the Spreadsheet header. +/// @group spreadsheet +$kendo-spreadsheet-header-text: null !default; +/// The border color of the Spreadsheet header. +/// @group spreadsheet +$kendo-spreadsheet-header-border: null !default; +/// The gradient of the Spreadsheet header. +/// @group spreadsheet +$kendo-spreadsheet-header-gradient: null !default; + +/// The background color of the Spreadsheet table headers. +/// @group spreadsheet +$kendo-spreadsheet-table-header-bg: null !default; +/// The text color of the Spreadsheet table headers. +/// @group spreadsheet +$kendo-spreadsheet-table-header-text: null !default; +/// The border color of the Spreadsheet table headers. +/// @group spreadsheet +$kendo-spreadsheet-table-header-border: null !default; +/// The gradient of the Spreadsheet table headers. +/// @group spreadsheet +$kendo-spreadsheet-table-header-gradient: null !default; + +/// The border width of the Spreadsheet action bar. +/// @group spreadsheet +$kendo-spreadsheet-action-bar-border-width: null !default; +/// The horizontal padding of the Spreadsheet action bar. +/// @group spreadsheet +$kendo-spreadsheet-action-bar-padding-y: null !default; +/// The vertical padding of the Spreadsheet action bar. +/// @group spreadsheet +$kendo-spreadsheet-action-bar-padding-x: null !default; +/// The font size of the Spreadsheet action bar. +/// @group spreadsheet +$kendo-spreadsheet-action-bar-font-size: null !default; +/// The font family of the Spreadsheet action bar. +/// @group spreadsheet +$kendo-spreadsheet-action-bar-font-family: null !default; +/// The spacings of the Spreadsheet action bar. +/// @group spreadsheet +$kendo-spreadsheet-action-bar-spacing: null !default; + +/// The gap of the Spreadsheet formula bar. +/// @group spreadsheet +$kendo-spreadsheet-formula-bar-gap: null !default; + +/// The horizontal padding of the Spreadsheet formula input. +/// @group spreadsheet +$kendo-spreadsheet-formula-input-padding-x: null !default; +/// The vertical padding of the Spreadsheet formula input. +/// @group spreadsheet +$kendo-spreadsheet-formula-input-padding-y: null !default; +/// The line height of the Spreadsheet formula input. +/// @group spreadsheet +$kendo-spreadsheet-formula-input-line-height: null !default; + +/// The padding of the Spreadsheet formula bar icon. +/// @group spreadsheet +$kendo-spreadsheet-formula-bar-icon-padding: null !default; + +/// The font family of the Spreadsheet view. +/// @group spreadsheet +$kendo-spreadsheet-view-font-family: null !default; +/// The font size of the Spreadsheet view. +/// @group spreadsheet +$kendo-spreadsheet-view-font-size: null !default; + +/// The background color of the Spreadsheet selection. +/// @group spreadsheet +$kendo-spreadsheet-selection-bg: null !default; +/// The text color of the Spreadsheet selection. +/// @group spreadsheet +$kendo-spreadsheet-selection-text: null !default; +/// The border color of the Spreadsheet selection. +/// @group spreadsheet +$kendo-spreadsheet-selection-border: null !default; +/// The shadow of the Spreadsheet selection. +/// @group spreadsheet +$kendo-spreadsheet-selection-shadow: null !default; + +/// The background color of the Spreadsheet single selection. +/// @group spreadsheet +$kendo-spreadsheet-single-selection-bg: null !default; +/// The text color of the Spreadsheet single selection. +/// @group spreadsheet +$kendo-spreadsheet-single-selection-text: null !default; +/// The border color of the Spreadsheet single selection. +/// @group spreadsheet +$kendo-spreadsheet-single-selection-border: null !default; + +/// The background color of the Spreadsheet partial selection. +/// @group spreadsheet +$kendo-spreadsheet-partial-selection-bg: null !default; + +/// The background color of the Spreadsheet active cell. +/// @group spreadsheet +$kendo-spreadsheet-active-cell-bg: null !default; +/// The shadow of the Spreadsheet active cell. +/// @group spreadsheet +$kendo-spreadsheet-active-cell-shadow: null !default; + +/// The background color of the Spreadsheet auto fill. +/// @group spreadsheet +$kendo-spreadsheet-auto-fill-bg: null !default; +/// The text color of the Spreadsheet auto fill. +/// @group spreadsheet +$kendo-spreadsheet-auto-fill-text: null !default; +/// The border color of the Spreadsheet auto fill. +/// @group spreadsheet +$kendo-spreadsheet-auto-fill-border: null !default; +/// The shadow of the Spreadsheet auto fill. +/// @group spreadsheet +$kendo-spreadsheet-auto-fill-shadow: null !default; +/// The background color of the Spreadsheet auto fill punch. +/// @group spreadsheet +$kendo-spreadsheet-auto-fill-punch-bg: null !default; + +/// The vertical padding of the Spreadsheet cell. +/// @group spreadsheet +$kendo-spreadsheet-cell-padding-y: null !default; +/// The horizontal padding of the Spreadsheet cell. +/// @group spreadsheet +$kendo-spreadsheet-cell-padding-x: null !default; + +/// The line height of the Spreadsheet cell editor. +/// @group spreadsheet +$kendo-spreadsheet-cell-editor-line-height: null !default; +/// The horizontal padding of the Spreadsheet cell editor. +/// @group spreadsheet +$kendo-spreadsheet-cell-editor-padding-x: null !default; +/// The vertical padding of the Spreadsheet cell editor. +/// @group spreadsheet +$kendo-spreadsheet-cell-editor-padding-y: null !default; +/// The background color of the Spreadsheet cell editor. +/// @group spreadsheet +$kendo-spreadsheet-cell-editor-bg: null !default; +/// The text color of the Spreadsheet cell editor. +/// @group spreadsheet +$kendo-spreadsheet-cell-editor-text: null !default; +/// The border color of the Spreadsheet cell editor. +/// @group spreadsheet +$kendo-spreadsheet-cell-editor-border: null !default; + +/// The background color of the Spreadsheet resize handle. +/// @group spreadsheet +$kendo-spreadsheet-resize-handle-bg: null !default; + +/// The border color of the Spreadsheet cell comment indicator. +/// @group spreadsheet +$kendo-spreadsheet-cell-comment-border: null !default; + +/// The border color of the Spreadsheet cell dirty indicator. +/// @group spreadsheet +$kendo-spreadsheet-cell-dirty-border: null !default; + +/// The horizontal padding of the Spreadsheet sheets bar. +/// @group spreadsheet +$kendo-spreadsheet-sheets-bar-padding-x: null !default; +/// The vertical padding of the Spreadsheet sheets bar. +/// @group spreadsheet +$kendo-spreadsheet-sheets-bar-padding-y: null !default; +/// The border width of the Spreadsheet sheets bar. +/// @group spreadsheet +$kendo-spreadsheet-sheets-bar-border-width: null !default; + +/// The border style of the Spreadsheet image Dialog. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-border-style: null !default; +/// The border width of the Spreadsheet image Dialog. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-border-width: null !default; +/// The bottom margin of the Spreadsheet image Dialog. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-text-margin-bottom: null !default; +/// The width of the Spreadsheet image Dialog preview. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-width: null !default; +/// The height of the Spreadsheet image Dialog preview. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-height: null !default; +/// The image of the Spreadsheet image Dialog preview. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAGQCAYAAAAjl1AKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMGVmMzZmZi04YmI1LTRlN2YtOTcwMS04OTU5ZTg1N2ZhY2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDNDOTBDNUQ2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDNDOTBDNUM2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmZmZjM0Mi05NjEyLTQwM2YtYWZhYS01MTE1ZjQ2NThmMWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphYjlhMmUwMy1kNmIwLTY3NGMtODc4ZS0yMjUzMjdkNDI5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68UHLbAAAgpElEQVR42uzd2ZNc9dnY8TOL9gU0IAkjgwpkI8QOQmI1FS+FHW9VLt/7wpWb900qKV+lTL3vTZzElSvnJilfvM4fkQunfEOw2LUgiUUsNhiMAFsjtIzQrpmJnhOdoaent+np5SyfT1XXiJ4R0hz19Lef31l6ZHZ2NgEAWhu1CQBAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQQAwQQAwQQAwQQAMuP9/gNGRkZsZQAGop/v8WzCBIA8TJj9GFr9swGUYyAUTHEEoLvn+NxGdLwgG1BEAaoxYY7kNZ55C+bIEu4DoFixHGkT0JE8RTMvwWwXxRHBBKhMQGcbPN8PPZx5COZIh6EcEU+AQgex2fRYH8tm4RxqNIcdzGbxa/dROAGKOT3WhnCk5nOzTX5PbqI5zGB2Estmv24XTwDyO2HOtohi/f25ieawgtkqlvW/HukgnqIJULxY1v96tsV0OvRo5mkfZn0YR5tEs920CUB+o9kokvW3mQ6iWYkJc6RNLOtvo7/85S/X/eIXv/jntWvX/mjZsmVfGRsbG3eNWoCClvOq6enpy1f9/Ysvvvjfv/nNb/7zr3/96zM1oRxN2u/THHhAR/p5odr0D1gYtvpg1kdztObj6N///vf/NDEx8e/Gx8eXeZgBlM+VK1cunzhx4n9u3rz5n65Fc6Zm0my0dFs/tdbGuG9/z2FefL1ROOdi+ZOf/GTl1NTU/920adMvxBKgvOI5/upz/X+I5/x47q8bnEaSnByvMugJs1EkRxoEcyw23Lp16x72UAKojjNnzuxfv379N6/+crrBlDnbbsos44TZ7Mo+aTSPHTv2X8USoHriuT8a0GS6HOqUOewl2QW3OMBnYmLiHz1sAKopGhAtSFqfJTH4aA1pSbbRUmx6m5yc/O833njjv/GQAaiu48eP/6+NGzf+++TLg4AaLc0mSQWWZJuN1iNr1qz5vocKQLVdbcG/TnJ2cZpBBrPV1Xnmps1ly5Zt8lABqLarLdiYNL9YTbOmlCaY9fFsdHm8kbgogYcKQLVda0HTVpR9wuwonq7gA0CD418qtSTbzdQJQIW7macujOZgYwBA7psxmrONIKAA5LIN42XaIFeuXEmmpqaSixcvJjMzMx5qAMOYxEZHkxUrViTr16+P68T2shGVe3uvvohYTk5OCiXAkMXz8Pnz59PhZePGjb2IZj5eCJTlHygmS7EEyFc447m5NJNzWb6ReCUDQL5cuHBBMPP4SgaAfOn39coFEwBypjQH/bhCEAAmTAAQTAAQTAAQTAAQTABAMAFAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQSAAhkvyzcyMjLiXxMAEyYACCYACCYACCYACCYAIJgAIJgAIJgAIJgAIJgAIJgAIJgAIJgAgGACwBJ5ey8AMGECgGACgGACgGACgGACgGACgGACAIIJAIIJAIIJAIIJAIIJAKXg4usAYMIEAMEEAMEEAMEEAMEEAMEEAMEEAAQTAAQTAAQTAAQTAAQTAErBxdcBwIQJAIIJAAMzbhMA9cbGxpLx8fH0Fr8eHR1NP8auj+wWZmdn527T09PJzMxM+vHKlSvpLX4NggmUKpDLly9Pb8uWLUsD2YnaeMb/o14E9PLly8mlS5fSm4AimEDhRBRXrlyZ3mKSrHXmzJnk5MmTyalTp5IvvvgivV28eDG9RfQigukTyLUpdMWKFWls165dm96uv/76ZMOGDcn69evTz8UtxNR54cKF9BYxBcEEcivCtmrVqrmIZYGcnJxMPv300+Rvf/tbGsZMLLc2ky29nj9/Pv3vY8eOzft8/Bk33XRTsmXLlmTTpk3JunXr5qIaf0b8vpg8oQhGWv0w9OQP+PJ0j5Gaj9lttOYW6zljV/8+J7v5c+p/UIFkQbzWrFkzb5r88MMPk7/85S9pKOt18tzQ6msafe7mm29Otm3bltx2223zonv27Nl5kaZc4sVSl/3YcPXD9LXbTM1ttuaW1HxM+tk0wYSSi32SMdHFx5BNku++++7c0mqvItlpROPvsmPHjrnJM8TfJZZ+6/9OCKZgCib0VeyjjFDGPsrw+eefpxPlO++80/NpsptpM3PXXXelE+eNN96Y/nfs34xw2scpmIIpmNB3sfwa+wuzo13/9Kc/JXv37h1oJFt9vtH9jz32WLJ9+/b01xHL2K9qmVYwBVMwoW8/bxHKbKr8+OOPkwMHDqT7CPMwTbb7XEzEu3fvTrZu3To3bUY4+/08hWAKJlRInAcZp3HE/sE49ePgwYPpfsphT5OLnTRD7N/ctWtX+j3FPs2pqSnncArm0IPptBIogYjkddddly7BxkE9L7/8cseT2bCmyVb3HzlyJDl69Gjy1FNPpU+2cU7n6dOnHRDEUJVmwownCaiiOK8yJsv4WfvrX/+avPTSS+mpGkWZJlt9LibMiGYcFBRfE5Om8zaLZ+PGjaWYMF18HQosDu7JYvn+++8ne/bsaRnL7Lqv3Xy+9rqx3Xyu099Te398L88++2zy3nvvpd9jduUgGAZLslDgyTIO8ImQ/PnPf05eeeWVQk+Tre6PFwLxMY6ije85fm3SZNBMmFDEV7rj43OTZbNYFm2abHf/888/nx7ElE2a9de/BcEE5v/Qjo6mB/hky7D1sew2hJ3+3l4GdLH3x6SZLc9mBzmBYAILZNNVhOKjjz5Kj4btVQjzNE22uv+5555LPvjgg3kvHGAQxsv0RAJlFxdPj1NI4jJ3EctBnxLS632Tnd7fKJqxLTZv3pxe7CAupQcmTCCVvS1XiGXYZuckLnVizNM02ey++N4jmnExg7iqkSNnEUwgFSsoMUmF2Id34sSJjqPWj8/18/5O4xlvbp3tv41p0yoTggmkQYh9dnFt2FdffbWjqbCbyXCQU2Mn02S7qL7xxhvp+3nGtoltBIIJFRanT2QXU9+3b1/HU+FiJr28TpOdRPXFF19MP8Y2cqoJggkVVrsUGwe3DOKUkF6dKtLLabLZ/XHN3LfeemvetgLBhIqJg1liaoqjYltdnGBQ50cOI4jtvjZ+/cc//jF9x6LYVg4AQjChgrKjYuO8w35Nk0sJaK+j2s3XZuJNsmu3GQgmVEScRhITU0xOb7/9du5PCRnENNnqaw8dOpR89tln6TaLbQeCCRWRHejzySef5PpydYOcJuuXYuvvi7c3q912IJhQ9h/M0dH0ij7hnXfeyd00OYggtvvaRvcdPnx4bjp3nVl6zaXxIIfiwJV4TMf1YrO3scr75ery8LWxreIdTeJtwGLKPH/+vAcTJkwoezBDHOxjmmy/FFt7fwSzdhuCCRPK+ip2dDQ9cGVqaiqdMAc5NRZpmmx2X2yzuGze9ddfn27LmZkZDypMmFBG2RGecXTsoKfGok2TzX7/p59+Om9bgmBCCWUH+xw9ejT3R7q2+38sNZ7d/v4PP/xw3raEXrAkCzkNZjYl1YahmaUudy72/n4spfby98dF6gUTwYQSGxsbS4+Ojf2XFy9e7Hv4ihrEdvfF0bHZfszYpvG+mSCYULJghtOnTw88fGWL5+TkZBrMOIBKMOkF+zAhh8GM6ag+BHm++Hke92MeP3583jYFEyaU6RXstavTxIRpmlza12bb0BV/EMw6rvRDKX4gr70BcuzDbDRFDTuIRYpnbMNswvT8gGBCyWRP7OfOnRPEJX5ttg3FEsGEEgfzwoULhb/izrDjmV1HVjARTChxMOsv5yaei//aK1euCCaCCWUPZrzrhiAu/Z1LBBPBhJJbygE/4tn6qkggmFCSUMZEFJd0u3z5cqGClLe/a3bhdfFEMKHEwYxTIbIlxbIEbdDnlGYXLBBMBBNKGsxsOsqO8ixj/AYRz5UrVwomggllD+bq1asXXB4vD0Ea9u9fzP8jtqFg0kuuGQU5kl0kfP369fNiMKjrr/bjWrG9vNbsYq6Zm21DF17HhFnHoeOUQXb+5XXXXVf5pdil/j9iG2bb1PMDggklnTA3bNhQyCAO+mtb3b9x48Z5L0JAMKGEwYz3cazaOZK9jmcWzOyKPyCYUCIxDcWTfiwnxlGecU3ZPMQv79Nk/f2rVq1KJiYm0vtNmPSKg34gZ+KCBWHLli2FPDCn26/t9v/R6P9z6623ztuWIJhQQtkSYvak30lMlhq0QQSxl0fAtro/brfddtu8bQm9YEkWcjphfuUrX6nc1Xl6df9Xv/pVEyYmTCi72OcWB//Efsxt27a1nMSKuhTbr/tDTJc33HBDug3tv0QwoeSy68h+/etfL/xS7CDvj9s999wzbxtCr1iShZwGM470jAkzrivbi/fHHPTyar+XYht9LrbV3XffLZiYMKEqYikx2/9233335XqaHNaU2ehzDz/8cPoxtp3lWASTwjt+/LiN0IGLFy+mH7du3drz+PU6fIPYN9ns/trP3X777fO2HfSSa8ky8Fg+//zzyZNPPpls2rTJBmkhTomIA1fiaNkHHnggOXjw4IJINApHs6AM6msHcX+jz+3evTu55ZZb0m0W285zAiZMCh3LPXv2pO/zGNE8duyYjdJGdqWfOPin22kyr0fALnaKbfe5u+66a942A8Gk8LHMntREs73YFxcT00033ZR885vfzEUQlxq9pQS02ee+973vJTfffHO6rZx7iWBSmljWTk+i2d65c+fSj/fee2+ybt26wl6urpcBrf1cvO/lQw89NG9bgWBSyFhGFOtjKZqdi6kpO0XiqaeeGug02cvL1fXi9zT6fU8//XT6MbaRN4tGMCl0LNu96s+iOTk5aaM1ES84IhJf+9rXkm9961uluMBAN9Nk/ed37dqVbN++Pb2/2YsyEExKEcvaaMayrWgmTYORbcs4LzN7r8eiXK6uV9NkrXiT7XjxUPuCAgSTQsYynsTi0P5Ob3HunEmzuTiYJTu/8Dvf+U4yPj5eqWmy9vPxvf/4xz9OP8ZSrKv6IJgUOpbdsDzbfvtkR81+97vfXXTI8nKBgW4/l30+YhnvSBLbwlIsgkkhY/nCCy8s+QlMNJuLYJw9ezb9eMcdd8xFMy9TZi8/1+zPi1ju2LFj3raAQRjp94Ot5mobIzUfs9tozW0sblf/Pie7+XNOnz7tX3OIIm69iGWtlStXuiJQE2NjY8maNWvSn6833ngj+cMf/tAwNs0i1Iv7h/G5H/7wh+lVj7JYOiq2GOKt6rrsx4arH6av3WZqbrM1t6TmY19fQJkwyWUss0kz/r9OOVkoQhEHAcWTQ5yfWTtplmmarPWDH/xgLpbxvYslgyaYLEm2DBtxW8wBPos5EEg0G4vrpWZHh0Y042o3ebtcXSch7OTzP/rRj5IHH3xw7vSR+N5BMClULGNfY7+v3SmazcWRs9mkGW+cnB05mofL1S31SNjsaNif/vSnyf333z83Wbr0HcNiHya5jmWtFStW2KfZRO0+zU8++ST5/e9/n5w8eXIuPq2mt8Xcv5TPLfbzExMT6QuAeAcS+yyLrSz7MAWTrmLZj32WncgOBMpO3OdLo6OjyerVq9N4Rliee+65ZP/+/T0J3lJC2M3vjSv4fPvb306WLVs2t7/WG0ILpmAKpliKZk9/3mL7LF++PP3v9957L3n22WfTn488T5O1T6xxbdg777wz/e+4IEGsYjh1RDAFUzALGcs8vN9gtjwrmo3FZLZq1aq5n7948+n6U0+GMU22+prvf//7yc6dO+e+Jl6U2V8pmIIpmGIpmgOfNj/99NPk7bffTvbu3ZuLaTLzyCOPJHfffXeyZcsWU6VgCqZgFtvnn38+9GVY0exeHGka4Yx9m+Ho0aPJBx98kOzbty+NU7+WZFt9Tfy77d69O9m2bVt6UE+IfZURSqeMCKZg9jmYU1NTHpV9nCzzfL3OiMETTzzh6NkOwhmhysIZ3n333eTNN99MPw5imox9k3H6S1zaLhOhjFOHhLK84k2+BVMwxVI0CxnO2McZt9pVhI8//jh5//33k48++mjBv3m302TsR926dWv6Pp633nprcsMNN8x9LvZPxk0oBVMwBbPwsXzxxRcL9U4QlmcX/7OZhbN26swCGheKiNupU6fSW5zakV1lJ3s7rez3xwuWOA/0+uuvT2/xb7B58+Z5gcymySyU9lEKpmAKpljmYNIUzcWJczhj8oxwxsean9slieeXCGyEMj46l1IwBVMwSyMmi4hlTBNFJZq9CWjEMz5mt+z6vrU/19nzR3YpuwhidotICiSCKZiljmUZ3pA3lmdFEwSzpy8k/VNStliGOOoyvh9vQg0IJmLZQTRfeukl0QQEE7FsJ06EF01AMFlyLCMm/Xrz57zcskkzjv4FEEy6imVZJ8t62T5N0QS6VZqjZM+cOeNfcxGxLPMybCtxysnjjz/u6FkYoHXr1nXbD0fJIpbDYp8mYMI0YXYcyzy9RdewxHmaJk0wYZowaRjL7AAfnHICCCYtYlnVZdhW0Xz55ZdFExBMxLKdmLgjmo6eBdqxD7PETpw4IZYdyvZp3njjjTYG9Jh9mIhlibi4AVCZCfOLL77wr3mNA3yWNmk+9thjjp6FHlq7dq0JE7Es46TpQCBAMCsQy3iyF0vRZPg8fgSTnMfSPsveRfOVV17xpEdXYl/4888/nxw7dszGKBH7ME2WtJDt03T0LIuJ5Z49e9IXr3Ht4m984xvJpk2bKr1N7MMkF+JoWLHs76TpPE26iWWIn0uTZnkIplgimvQhlhnRFExyEkv7LEWTfMQyotjszdjj8fPCCy+IZsHZh2myZBFin+ajjz5qnyYLYtnJi9fYp/nkk09Wbp9mWfZhliaYZ8+ercQDzwE++YmmixsQR1F3GsvaaFbtQKA1a9aUIpiWZAsWyzjVQSyHyykn1May2TJss1s8fuzTLCbBLFgs7bMUTfIVy24fP6JZPJZkC8A+y/yyT7OasYwDeHrx4rUq+zQtySKWzE2ajp4Vy27Ez7WjZ4tDMMUS0WQIsRTN4rEkm+NYOsCnWGJ59pFHHrE8W0K151n2SyzPPvHEE6VcnrUki1iyYNJ89dVXTZpi2fWk+eKLL5o0c0wwxRLRZMixFE3BRCxFk0LHMvYtDvrnUTTzqzT7MM+dO1fof4g4zzKeZMWyPOzTLK5+HeCzGGU65WT16tXd9sM+TMTSpEneY7nYK/j0+haPH5NmvgjmkMUyrFiWO5p79+4VzQLGMg8sz+aLJVmxZABieXb37t2WZ3Ms22eZx8tPFv2UE0uyiCUmTbE0aVaIYIolA4zmvn37RFMsRVMwEUs6edITzfzFctgH+DgQqBjswxxwLGNZTizJ9mnecMMNNsYQYxnxKeJb5mX7NIvyJub2YSKWdC3bpxmnFDF4sd0jlkWZLJtNmt6P1YRZugnz5MmT6TJsPMih1vLly02aQ4plGd6MPSbNxx9/PPeTZlkmzNIEM68PfpMl7cTy7K5du5xyMgBFXoZtF808n3KyatWqUgTTkqxYMmSOnhXLpYjnl5deesny7ACYMPscS8uwdMrybP9jWeYXr7FSkdcDgUyYiCU9denSJQcC9SmWMYGVfaUnnm9Mmv0lmH2IZSyviSXdRjMeP6LZ21iWbRm2Gcuz/WVJVizJoViejQOBLM+KZTfydvRsWZZkBVMsEc3SqT3Psqpin2ZeomkfJnPiPMv9+/eLJT0Vy7PxuLI8K5bdiOejl19+2fKsCTM/E2bE0mRJvyfNhx9+2KQpll2J5dnHHntsqJOmJVnBFEsGGs1Ynp2YmLAxWsSyCkfDdiNbnh3WxTEsyVacWDJI2fJs7CtHLBcrO+XExTFMmKlB/qDEk5Z9lgxr0rQ8O19VzrPshWEtz8afa8KsILEkD5OmA4HEstvBwoFAJsyB/MBYhiUvYp/Uzp07Kz1pWoZd2uNnkJOmCbNixJI8icfhgQMHKjtpiuXSHz8mTRNm32JpGZY8in2aVZs0xbK3k9+jjz7a90nThFmhyVIsyavYpxmTZlWOno1YxmQklr0R2/GVV15x9KwJUyyp1qQZR8+W+TxNseyfbJ9mv87TLMuEKZgtYhmv3MWSIkUzlmfLGE2xLHY0LcmWmFhSRGVdnhXLwcgOBLI8K5hiiWgWUHwfsY9NLAcXTfs0W0y8lmS/dOrUqXSfZTzpQJHF8uxDDz1U6OXZiKXJcjhieTaOnu3V8qwl2ZKJWMYrc7GkLJPmwYMHCztpiqVJM48EsyaWlmEp25NeEaMplqKZV6VZku02drHP8rXXXhNLSqtIy7NxgE88SQ/r/W1ZKLu4wVKWZ2OJt8t+OK0kL8EUS6oinrAefPDBXEczi6XJMp+Pn6VEsyzBrOySrFhSJXlfnhXL/D9+LM9WdMKMfZZiSRXF8mzeJs3s1BHLsOWdNC3JFjSYYoknvRXJAw88kItoOs+ymI+fRx55ZFHRFMwCBjOLpVNHMGkuH3o0xbI60bQPs2AilrEPRyzh/5+neejQoXRf/rBi+eqrr4plQcWAEv9+VdunWYlgZrG0DAvDj2YWS/ssix/NvXv3VupNzEu/JCuW0Fq2T3PDhg0mS7p6/MTybKs3MbcPswDBPH36tH2W0IFsn2Y/oxmTrH2W1YymYOY8mBFLkyXkI5oRS5Nl+aO5e/fuhtF00E/ORJizm1jC4tXu06z9eVrqTSyroXafZv1joDSdKcuEmS27OhoW8jNp2mdZ3Umz9pSTeEyVYcIsVTAjlvEK2WQJw49mxDImDrGsZjR37do1F03BzFkwjx07lsbSZAm9sWzZsq6jKZbURrMswSzNPkyxhN66fPlycvjw4UWfpymWhFjp27dvX6nO0yxNMMUS+vNztZhoiiX10YzHQ1mMl+UbKdORWJDHSfP+++9vuTwbUY2JIp4k/TxSxmFm1D8n0Gk0m02acb/JkrITTKDjaL7++uvp0ehiiWACtBDLa0eOHEmmp6fFksqxDxPoWJxqct999yVjY2NzsbTPEhMmQF0sd+7cmaxdu3beAT4gmADXxInnEct169bNxdIyLFVjSRZoO1k+9NBDaSzjPEuxRDABWsQyJsv9+/fbZ0llWZIFOoqlyRITZkl4xQu9j2XtAT5iiWACtImlZViwJAu0iGW2zxKwJAtkTwbj4wtiaRkWShhMYGmT5YMPPpjGMq4V62hYWMiSLIjlvFi6gg+UfML0Shi6eAIYH284WQIlDiaw+MnygQcesAwLJkygVSzvv//+BVfwAUyYQIPJUixBMIEOYnngwIH0TaGt0ECFgukHHtrHMpZha2NpsoTOOa0ExBKo0oQJtI9lHA372muvWYaFKgfTDz80+AEfH58XS5MlCCbQYLK877775k4dMVnC0tiHCRWJpckSTJgpr5rh2g/1+LhYgmACnUyW2dGwBw8eFEsQTKCTWFp9AcGcx5MClf5BvrYMa7KE/nHQD4glUKUJE6oolmHvvffeufMsDx065NQRMGECrWJpsgQTZke8oqZSP7jj42IJggm0myzvueeeebG0DAuCacKEusmyUSwBwQRqYhnLsGvWrJl3gA8wGA76gYLG0j5LMGECNbJ9llksDx8+bJ8lCGb3PHlQ1smyPpYmSxgOS7JQgFiePn1aLMGECdSLZdi777577mhYy7AgmD3jiYQyTZb1sTRZgmACdbG0zxIEE2ghW4Z1NCwIZl95UqHok2WjWAL54ShZyFksX3/9dbEEwQSaxTJOHYlY2mcJOf15tQkgH7G0zxIEcyA8yVC0WN51110LYgkIJtAklrEMe/nyZS/6IOfsw4Qhx9JkCSbMgfLqnKLEcvXq1WIJggl0Ess33njDMiwUjCVZGEIsTZZgwhwar9TJayx37NghlmDCBDqN5ZtvvimWYMI0YUJ9LO+8884FsfQ4BRMmUDdZxqkjU1NTyVtvvWWyBBMm0CiWJksQzNzyhEQeYtloGRYoB0uy0IdYWoYFwQQ6iKW36ALBBMQSqvnzXpZvxD5MhhHL7du3L1iG9VgEE2aujY2N+ddkKLGMU0eOHDlinyWU/Lm5NBPm+vXrk5MnT3p0MvBYmiyhuYmJCcHMm1tuuSU5c+ZMMj097RFKX18tN4ol0PjF5W233Vaa72dkdna2v3/Al6+6R2o+ZrfRmlvM7WNX/z5dj4kXLlxIjh49mj6RCSf9+OG/4447xBI6eGEZk2XEMn5eltCPDVc/TF+7zdTcZmtuSc3HpJ9Ny0MwR67FMn49vpRgAlAe14J55Vokp6+FcWjBzMtBPwu+aQAqL1dtGM3JxgCAXDdjNGcbQkAByGUXRvO2Qaanp0UToOJmZmZyF85hBbPRN5/ed+UqDxWAart8+fKVVq0oezAb7bydrdsAsxcuXJj0UAGotnPnzk0mLY6GTYZwQFBelmTnfn3mzJnfe6gAVNupU6f+T5NADk2eTitJb7/97W//+eoo7qoDABV16dKl6d/97nf/1GDCHKpBXrgg/c8GHxdc9efEiRP/bcOGDf/Wwwagej744IP/sW3btv+YdHZ1n3kRK8uVfmpDWR/LBVf+OX/+/HMrV67c6aEDUB3Hjh07sHnz5n+VNL+yT/3EObBgDnpJttnRTvW3mZ/97GdPX7hw4S0PH4BqmJycPPLzn//86RaRnG3TlP4OgAOeMJtNmUndhDm3RHvixIn/snr16n9YsWLFMg8ngPK5Ohxd/uyzz357++23P5MsXIKdSRaeUdE0mGW/luxsk4kzvdjuxMTEM7/61a9uPXr06L9MTU19dunSpSv9jjwA/RMXJbh48eKVkydPfvbhhx/+yzPPPHPr1Vj+MvnyXUnaLr0OwzAmzEZTZu202ektafARgHxqdLDOYm5JJwHtZ9PGc7IRRxpsiFaRHGkRXgDyGctGwUzaBDI371gyPsSNN9Immo3imYglQKmimXQQyaEe7JOHCbNVNEeabKDa++sjKZoA+Y9lJ/HMXSyHHczFTpr1X18fTkcCAZQnnLmKZR6C2SyaSdJ+iTYXGxCAvsUzN7HMSzAbRbCTcAJQnmC2imIuGjCew4030mZDCShAeaOZu1DmMZiNNtBI3jcgAAONqGAuYsM5GhZAHAWzbBsYgHIYtQkAQDABoCf6viTrnUUAMGECgGACAIIJAIIJAIIJAIIJAIIJAIIJAIIJAIIJAAgmAAgmAAgmAAgmAAgmAAgmAAgmACCYACCYACCYACCYACCYAFB0/0+AAQDHHxQEMMRIrwAAAABJRU5ErkJggg==" !default; +/// The border of the Spreadsheet image Dialog preview. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-border: null !default; +/// The border radius of the Spreadsheet image Dialog preview. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-border-radius: null !default; +/// The shadow of the Spreadsheet image Dialog preview. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: null !default; +/// The border radius of the Spreadsheet image Dialog preview overlay. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: null !default; +/// The text color of the hovered Spreadsheet image Dialog preview. +/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: null !default; + +/// The width of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-width: null !default; +/// The height of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-height: null !default; +/// The border style of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-border-style: null !default; +/// The border width of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-border-width: null !default; +/// The border color of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-outline-color: null !default; +/// The outline color of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-border-color: null !default; +/// The border color of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-bg: null !default; +/// The border radius of the Spreadsheet drawing handle. +/// @group spreadsheet +$kendo-spreadsheet-drawing-handle-border-radius: null !default; +/// The outline style of the Spreadsheet drawing. +/// @group spreadsheet +$kendo-spreadsheet-drawing-outline-style: null !default; +/// The outline width of the Spreadsheet drawing. +/// @group spreadsheet +$kendo-spreadsheet-drawing-outline-width: null !default; +/// The background color of the Spreadsheet drawing anchor. +/// @group spreadsheet +$kendo-spreadsheet-drawing-anchor-bg: null !default; + +/// The vertical spacing of the Spreadsheet DropZone. +/// @group spreadsheet +$kendo-spreadsheet-dropzone-spacing-y: null !default; + +/// The padding of the Spreadsheet filter. +/// @group spreadsheet +$kendo-spreadsheet-filter-padding: null !default; + + +$kendo-spreadsheet-filter-menu-link-padding-x: null !default; + +$kendo-spreadsheet-filter-menu-icon-margin: null !default; diff --git a/packages/core/scss/components/spreadsheet/images/image-default.png b/packages/core/scss/components/spreadsheet/images/image-default.png new file mode 100644 index 0000000000000000000000000000000000000000..10ef28195ca3574424c8ed4c7dc2ebeb697155b9 GIT binary patch literal 9364 zcmaJ{3p~^7|DQ`qosw4M7DrjBVP;{PA-811;gm_a%r=(G+;YDqmAf*nnah&Ul{Q7m zB^p{Iw=PCF5t2#n*YW@Aob&si|Nnnpf3L^OvuDrcbALY1`yEXVA6N|np^U=(-95aC!76y7C)v+Xb@D}>stTE4sOoqW z3&Z-G61~VLA_9pH5jMYjM0k53393eD6;zl3uz@cz*j**e*T*l&Ak0wp=e`C&e`8on zRpsZDU~fa!KZ(L&?Nm%Dfkc&~nz|Yu+K8hndPq%eT^$4x2~~l^wDq-M`dZpL8rr%B z2$%sJuJYH9DsWmLfn;EBX7Sfqz$Zghui#*R11+u4&``}#9ZgE0re)n1)}_{=auHBL;Z{lKq3p6hD=X9o_Mi3&Dn}0HuGj;OmdY{%2#qpuYqK zh)gTY-Cs*v6QcO-% z^pQuAME#?BBzF&wzxVmK^)MY%B+T@vnJ)6Ug|@ai5((4M)i;Oh>FS!8=$Yx7{=L@9 zFDTgE&x82)*<|4Czt)=mziSOl1Bvdzl)&F96raDXz|M;jObPO$_^X(jZfG5;atQ10 zLH64iRNqk4pM0AU1IZyof<++3SLLUq4aomOg$JBOBIzLD8c1DjxCR2IL(*_3xw~r| z)z&^rLg*gVCusu`_;Wqs9}@i2Qh^bG6aT*n0?YyF4kyBNGzhwQn1-$%!b3w}PoJm( zhac5}>k$xeBvMaR3m{Qz!+8E-On(mn7P`^>k81!Q{^MLkKft2`0oSRv3+x4fRPI=r znfxBsBk1E(&(86?r*u;0Hz8Cc_g~sd*w5K<9Dj6=)@3EiDb0bEh8sBx*u(0sMVOjN zY%b@)T4AOdoeYRY@|3>h4ViIq!dx+FqKSln>4;C@HBN8yki)ZBKnn z%$M#|oSUs=4md>+LPB&!KxY)5N`j1GBLBC6>c#)1!H0xvVipz_K19&w+sw%+p9b+b z6oxL`dq!9;lI5YY8xtUY>&58eCyU@}6$Lvpk^9>2>0gfKhi@Bsz3aQ!EgVac3~s-U zGS|_n_mORst{1HpbTPHnPPnWEYQA=O=3mnm*?KwjvQP6h2QHc^uC_Oq;9QH>Q$* zThgu?_hCJvqA}QD)@y{UOp4xXnPXPo_e9b-rjUOqbFMOb$8D!1$)Gz}=s2aYZgp7e zqi|5RZgKRf_s2CaKAY$&r=Xw^nsz2Go;GuTY;26@C={k>)h-UyEwxhCX3AoP<2pwR z6tO*%U5a7GmdoJ#ts7mYN3@lRAB#1Unl&{m}G`65HnP5>@k?{wRKl%3LK3zkBy?z3&ORON+DX zR`noq?OTvAHgR+{?0cC)u0>|9Vj29aWchCgEak<6pt_%`E{yM+w-ddauH*Su;93_W z)GJ#Htg6pK_WHen4khpfZ_s2!hSITl*T!A9A_kuu$+r`#6u)I51#0|FmHIC|@%TYy zLm$w6b@`ndC(ba{v=_a$ldUQ`?0q6~a&uQF_4>nx>ZY!V+$|ky&R8!?Q_x#m`NF#t zC$G^8vD!o<!ioJx7~So~CjO^o6~Bh}fgzSbEl~xVShoMOF) z$UnU)PE<~drw50_2VKD+Fa)&aA5Dc0`qvicCi-$$c%&8x<}M2K|5pRWOa6~m^vB>h z$gSbud{`U|`e!>?-}q7FWx~(pVmf|c&|FhfQ|8pv)T~V1J|!irQB!G#K!)V$IqKKd z)x~XT!7NX`xp8DnBW8QNWY*zpyqj9K6dp~(T8y966V|j|=psHlJNo;iBqK; ze>U3<=q9@#pZV~@NK5vYFI+13ocBYs_a==wtTF`YAqdAu*Kqx z5H|ZoYH>O^<2oaQ@B3s#W*q6^xQ;&fVkzibtldR|N%e<^PC69E>W^1a)Q$K+J~Vz| z`cwNiZ~5r&BRLeC3g2GZr;uLXncI=`0)F`Q;jZr~7g_`!P1EbAuZ0Q*QvG|H)#>r-^!8BJs{G2f z^1^fLvn57qkqh6Iybd@=*LDaq4Cis|=#}}|kJ7yEvh&%eVVfLa1r#HS^c$c1tBXS! zR56JicUHE{z_1l7XEB@?p_4Whetiadz83l`Leyn|oZnC6O30N2aMtSe=Z5~Mzcd!} z#@&{hl7}!A419X(?YL~%h;F@iPkq#X>qz^hu_wC@T}=FP;p4fRn)OX4hFW#2fz4F@ z<6`dV1!ZL50c6Ci*YrCF+alYF0GrXVt`eo49J?E&hSY*L!6Cdwr4U zr}fx9dGlDclAfN=Y98XYH z))!SfU&ZQ+D(xC@h>VTWYD2I1O!r4l77ciW46E$jY|Xa&gA3pBBk9`eQd_KzOZf1O z7jF|g4Sy;y0$2!0o zN7mcZ(~Bh*3B1R1EP-x9-dexQ=3v%B^POysHj)JLqMPV8Lf5H;!NLsm$&4!#r?$)> zuoYG7&qwpE(Tjgv3fEF}+u6jMH4`Pu%Gzc)oEU_MO7l#ZyE@0Csd@bahZrmkT}pqh zi$F!QNCJXUxlyCxm`LmxF}iCWzl zVYAVic69UY?$bL!$6*EW>_Yrd^{W^x)mqZ4tgxr`BWV!J_O6uM0{Pu6*J2mg0b@g{ z6NY@Zm6YQk_}{#xlnk<>=J}pux+%UA02SAjzRqwDGQTVbUbvJC8NZ1ipG>LLd(ao6 zLbsb&Zt3WlO-6st3+?CjA&`kG6)Qa!3rgsyFh7IPJg11(qA8WDgD-D{VVdXg<&~^A zE5qNWe>`P98dSm#`o6@!LB+0BOMoGmLy<63MS%yyr*5}%WUP33h(f$1_|5X+kYI$N zKk@we!+9_XHL6T!L5>}+gNIA%z6nk z#(?4+?{-|0D6yhw7=c)@tg2Xvg&xiCTU(PdTJ`U*NN{<4U>kBfNmuRtm4fUd%}~wx zwHRp8{PaSz`L|8r`h;CThGLzOo+i90tK}kyTuhedge)|6u=p`8-NjS2*#Q4+w<}#G zwo<4lV#?^3F9i7({kW5`u}v$mU$54uj@?Czhu1EK?_2QLXA~3Fue%8h$r{@uc>17= zlR##i?fFRRZQm2Sv&Eov)>J)4rL0CIQ1HqJVZQxXqIt5X&nusX+0{6=<6MHRVDxPs zn4=csTd}=y7eJZBOvB}Em+J=KJ|4m+zkd=+3ljGTVJK_(jxGU_pFVWu14(=L=J2umVnfs>82r zwMMqMZ~JH#Nfx>jBMv?(-{NENCVd*}vAS7$BgxwObN7*N?;psX-KQmGB0oRr+OodC zqQI@wx>RlxGV|PlDB<$l3?6oOylj5x46CO4g8*Neo#SgN>(ZRy)Lbx>WfHPB3`8-< zrK0YlH6y$NsrTKCSiGcK9!$@t+wQf>j%9D>zPf;+rf{v}#;}5f`qYJhhds#5nsiT@ z7D2KRz=W#y_C{(9^kCC(`2koyila5zMGy)foPKl?0)cd{VCl2Tmts^r2je%n1NZ1< z6s)ATY+`=Btj+fywFXwL7NuN!X)G0mEo3hZXI6Hm5 z?j~L#TC?JPU+91aoenEFj91t0T@M+EUKoyGD1OM|e+}BO+GXvEykVR;wc%LI>a(== zi$GFVtX%2W*E6#?XApI%TaPbT>uKwYS(%urP@2v3=E8sA(Ce!+T&gWP+o$IVcQg4{ zo1{cB$3ZW?#J(^UWY~{C;!hy9T9)7X<(s!eKx|>#M1Re(=fgDTPG6bcw?U#1%vL3y zVdVUs$(g+!s1N}?t1 zvfwVPUSC$!OwK@y`Ocg2HAUi2_@lK8HIr(315rU$k8&fE-0T^+4>q>9`Tfs>MmsYW z`Xec9zrLylm(tRkB9DY;t0#v|r3?`i=ZkLkuW=T;$34^;c`5hQkC_kNE6JDtis18j z@8<>=5X;fFM#5k~I@k45EMV%v(B7JFZMOlif?Rl1T1#Jbm+MN;$4pA}xO367m&SU4 zos5P~^xW_ns5Pvq6P+YJ50A#^hhH>x=y+F!kS|9A;e3GM1T( z3J=soKPs+l{8X3KrZGPQ27|}8#f3@iT7jlKg08?eQA_dsjA&Zk>mA~6Y(9-z7Zw(B zfk@UBW`WC({QjJ|$o1Y^hIe9|CtjkWuOgC!eX9JjCl?FxyB8x5@EP)dOx7s3VND zM#9e|n^_k&Gq&ttdqo>tvCNo^U0>n8%{w+)3vtQfyZ%f&@#+jQrmoRO7CuoqU^D-{ zFDHczpLxAM<3Q*@bSRK|%QzGP1i8udjxuA>vqW5nz(tWP|2Z`}=kwQ&LM|ZUYl7ZN ztu%)^8o@alyZU0ox%m~o&JlLDiP1NtPnM(tDe*j#?%?3C??!YkbSA3iZDKvx7WMfn ze@BB{!J7uT{^*6iFRgk57^59{Mrt%QVA=X?k0!Vv)!}LayLu2?3$WK{kJu*nw!2xb zvgcGnhS8dS__}a`nt@*Ss;>*L>>>y(`>HN@FQfA}a+knY+x1$aHRo-cu!n%Po63K% zqNW;Ux6Rq?q|E6XJvsW!?^yU_y1UTB@ru~K{ ztoK7w5{VeFxf-KJ(u<>mCRGZSYo8i@+v@*?a_RPh4Bv; zdZjG6s9 zGzag*aM*eDXZsoH`I~xJQso?*T>W2ZN^j=L0IHCtyLpx#O;02yJ$oi%mn}I1;4DAN z!qdc}Xu4$de78q>{^fmVUW7c71hb$+cgBoWjA2K1^1|4%)*XaJRE#(^x49F|>o=dd z;pj4T$I=n+y10?6D;^7JX*wjm0>jdtT$|_$o`t3)4d)w1cFL9oObk+@h7`EP*qp;P zSi!3UvV&eYmSFPE7z$gJL`-B_Q%T`ligBup*o4 z1_*|Uqu)k2qp&BIu>0 z;uM9QmcNC{1Ht_Cgz>GT-XF45=`_MN8J_-o6X;c*`oVWiY(Ctl+!+-k=z>D(p*ZM7 z`EKm=9-g1F(QPLbF!v>zx5~CHXRuPm!Xl;ypB`R8XaHJi!2;3+rg7Sy7J8?%Vsm`B!KRr}K_gzsK|LBa5@kG8xKLQtg(JYmM-SINC7=@J!v) zD%u2>g0_vMs5!9+Abfbp!uLL!XArd4GrO5*D$^+D$m;tC>V z8Zt8Pu1X8m=q-^e*{vPM>f28<&xYn;8T}dW6P&6fX8?d=4DN$^UGM?GF|Z8NWWd2v z4I!<~%CV>gD#;1b(kZS}CKW?fo8U|fO3%H>4TOWtU9R}bwxXDUYyg?C7w^h^h=UV0 z^iY&Idh@1B1b12hqQh1ct$B}w-%R_gdpM2Ama*)we-yijp(m;tUKs0ClMtO#r)gij z5nXgJpMqfs)#%ZQL}*!(TAzi^KBL?GUL4I=u0oDiE+kr=hH?vV`DtPop>4@Tz3Gry zA14}NlLJ(`wey}~8~Z+7KciUrv2jG`2=;$_0-#P!DV-i zwkD=`!$TF;0V!&+*hLPzx4z+`F{I_<>Py@eH7z{z9dM-_F(jY4a;|5{^BT2SvK-IJ zL?tzUz9=Sf_!v2PxKr5(f(4TX@MJj}Dmj{QDhJWXuA~kC?$)zl)s^5>z_o{RA9R<< zQAwxL^V4umgafo1>E0sZlyrdJ`*26jvW>Qc!m8>foV^+G9H72>;Qj@KM#m?4$=F3Hvof$y30dq4!WmOdBh&?d zdv`CGNkokqUvHci06F0AUx)dLMchDre7J6U{>1y~hid%HBwW*xAl4lyb)^21#5RDP zA}gH?@p1@_=C0mLb&)Pqr`^tWEON@6&<$a=O+WqU0=7Q+-~_KcAkG$LB{eSebvpFo zS-m~Y(<7;p7o-2^fEJ*c`>Oem_eK4vKWnLzQpANbGnhqY<Jd_)xuo?;#ZAg zplzpv8&acbc&j~)(?0!>R>3=I-s9msfJqqyz}3N;JzOy<)U^~ZgElrjgK4=hobX%6 z?iSI_z^)FKFtVm{1R!dIjwe#(ZmKkvlqK}@I)K=d(zgd?$wZUJxLxZp zr+Q1AlH5qFC%2KH;>$(F+XzgbzY=Zz$4`N*vvC5hDd7!6V zDOC=tM@26`iKew*1k_?wC`Wx5O?#hO>^6d;OIuUbzU*fJe~3$k&w)sBr6aiA_N^Jc zJO|e>`2Ks>Lt*%tZ&>Jqf)FN2=y3~?r_M{r)_7qcFEgz}?(uZ$vnrp@qK08^xHmvg z!S>Upw(<#*0C5~RWC!aZ2?1o+M`f|~Elw~16Q?zG5+rL_K74j5ppthMfHa}4XbdZ% zzY2JO1}^^iY|boErzPOVdI31(9$-LNATln`1U;pDC9BPKq&Ay6rQRG?Q17~qyVh(q z1K?4V=O~5W(vnp34+v5AP41+3MhDx;2q4%5)NwP}V9c!{uiCZc@v)At_#`*cCp&rG zmg$OC#U&+;nQvH9;IFvc^MSzQN)1SkgIG`6c7Y+r=b)kAKV?5W_adZU1PwsNA2~^* z(mdc+Zf)#@Lr-~F$#@-eLeI9FlA%K=YnB;IItil?% z)npJSM9@EvPAVee0HEPXBC(=v7tkTtZXO!i2KbxI$-NjiGIjWp6q?=yFWoclg~Pqh zgeDGG6Wyy!(RUJ6+W~pJ$eq3@vG4IO+aQ=*r=XK{>uZ}Fe~4h{ z#+LveHGy5+fe-)V<;7WS!J~HL%kg6p`+Az;G<+R|5d*h>eoAQ$uI>RmnX`081FUdKu$$kJQ}a zGhDozXdZ^f?|3XBwQslePRuPT?o6~ueQq;V^v0S=ZN)F%?1Z&|cBw=)yCO;O{X;bO z$(n`!=QB_MRr>Ny8o<~e;mK@qFv+s|cCo$Dv!Nk8fOI{{fldOjUHFED$CDcps<`am zpd$6+=kap9$3W2|J2XxTws*(!#rUR9v^B8FQFb)V2`Z(G_F<}RAuXW7?LKhXXd1+N z?+yTejKk%lqt8I=6C~fI5W8PY)<%B!!toxf&<%%@65v?c91GzDFmho-@#0{wU!AX9 zKtQ*UT*K`PzEX*WIMJoghn!wJL0w~o7g*x;;*3VPjZzY>$5Rq141X%AqWp7VkP3=x z_XO7upcvcml7R3I&{)4jE=?1)mQ_XtuM&Q32CN>4#naz%Z*u~H8+(J(;9Wf674`}a z-JPoDwD&j^OLJ>blrMY7^@fHDx_<>ei5sL1=TK_ZfiA-RcrN!GXIIQuF zRhH+0th$5Y+%mBN`Jc;3lGQwWB7L7B1ASfcpm6bX-B9{5&Mt#6cR4DN1CMc`wP$R1 zG{U&PXnpsI-ahP7F4qIUZ}#)l7|IZ#q|Il!yFg=b>4t(FWr ztmWvtx0TxjiaV?4f$&r~ZY=VeC~GlOVFEb1Ir!EfP`VD3ee1rdyhD%KA3A(kYERsG z0P~u@arzN}H!4h2=RN8Ll>^k#XE#b`L8EW65RLRJ*em|Vb}lr+XiPLvSQ&`C3;KQI zC9-BqHQs^Ew>e@3;H49k^`&ozzTX!E?EzAZqOk$t_t5osfHLo!xI9x4wry6HJv%qb zNdm9?0)ct`!>i4=A~sOzbrygat*NV|IZpy%5mrExw)w68Rq)x zn9TKD->$5+9dTm$upDf*RbK+K(kv3ds@K^ObKhcdEPNwe>R{aTa|6Y5Yl8B&n8=lh zN+T-tYC|+8=WsYWb<6L|{0t*zzt&-}*ys>|&m+Qg6i5h` zReKgTHFyKCk(l|rs%&E^Dw1_D_jxjL zUpybmufoqPmYv literal 0 HcmV?d00001 diff --git a/packages/core/scss/components/stacklayout/_index.scss b/packages/core/scss/components/stacklayout/_index.scss new file mode 100644 index 00000000000..9989cb5e4d7 --- /dev/null +++ b/packages/core/scss/components/stacklayout/_index.scss @@ -0,0 +1,19 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-stack-layout--styles() { + @include import-once( "stack-layout" ) { + @include core-styles(); + @include kendo-stack-layout--layout(); + @include kendo-stack-layout--theme(); + @include kendo-utils--flex-grid--align-items(); + @include kendo-utils--flex-grid--justify-content(); + } +} diff --git a/packages/core/scss/components/stacklayout/_layout.scss b/packages/core/scss/components/stacklayout/_layout.scss new file mode 100644 index 00000000000..d5daf1dc2e0 --- /dev/null +++ b/packages/core/scss/components/stacklayout/_layout.scss @@ -0,0 +1,10 @@ +@mixin kendo-stack-layout--layout-base() { + + // StackLayout + .k-stack-layout {} + +} + +@mixin kendo-stack-layout--layout() { + @include kendo-stack-layout--layout-base(); +} diff --git a/packages/core/scss/components/stacklayout/_theme.scss b/packages/core/scss/components/stacklayout/_theme.scss new file mode 100644 index 00000000000..9e7b696abc8 --- /dev/null +++ b/packages/core/scss/components/stacklayout/_theme.scss @@ -0,0 +1,10 @@ +@mixin kendo-stack-layout--theme-base() { + + // StackLayout + .k-stack-layout {} + +} + +@mixin kendo-stack-layout--theme() { + @include kendo-stack-layout--theme-base(); +} diff --git a/packages/core/scss/components/stacklayout/_variables.scss b/packages/core/scss/components/stacklayout/_variables.scss new file mode 100644 index 00000000000..4c1521ac3ab --- /dev/null +++ b/packages/core/scss/components/stacklayout/_variables.scss @@ -0,0 +1 @@ +// StackLayout diff --git a/packages/core/scss/components/stepper/_index.scss b/packages/core/scss/components/stepper/_index.scss new file mode 100644 index 00000000000..be3eaa90d69 --- /dev/null +++ b/packages/core/scss/components/stepper/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../progressbar/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-stepper--styles() { + @include import-once( "stepper" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-progressbar--styles(); + @include kendo-stepper--layout(); + @include kendo-stepper--theme(); + } +} diff --git a/packages/core/scss/components/stepper/_layout.scss b/packages/core/scss/components/stepper/_layout.scss new file mode 100644 index 00000000000..1113637aaae --- /dev/null +++ b/packages/core/scss/components/stepper/_layout.scss @@ -0,0 +1,298 @@ +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-stepper--layout-base() { + + // Base + .k-stepper { + margin-block: $kendo-stepper-margin-y; + margin-inline: $kendo-stepper-margin-x; + padding-block: $kendo-stepper-padding-y; + padding-inline: $kendo-stepper-padding-x; + border-width: $kendo-stepper-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-size: $kendo-stepper-font-size; + line-height: $kendo-stepper-line-height; + font-family: $kendo-stepper-font-family; + display: block; + position: relative; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + // TODO: remove those once k-widget styles are removed. Link: https://github.com/telerik/kendo-themes/issues/1359 + color: inherit; + background: none; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + + // Step list + .k-step-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + position: relative; + z-index: 1; + } + + + // Step + .k-step { } + + + // Step link + .k-step-link { + outline: none; + color: inherit; + text-decoration: none; + white-space: nowrap; + display: flex; + align-items: center; + overflow: hidden; + } + + // Step indicator + .k-step-indicator { + @include border-radius( $kendo-stepper-indicator-border-radius ); + margin: if($kendo-stepper-indicator-focus-offset > 0, $kendo-stepper-indicator-focus-offset, null); + width: $kendo-stepper-indicator-width; + height: $kendo-stepper-indicator-height; + border-width: $kendo-stepper-indicator-border-width; + border-style: solid; + display: flex; + align-items: center; + justify-content: center; + flex: none; + position: relative; + z-index: 1; + overflow: visible; + transition-property: color, background-color, border-color; + transition-duration: .4s; + transition-timing-function: ease-in-out; + + &::before { + @include border-radius( $kendo-stepper-indicator-border-radius ); + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + + &::after { + @include border-radius( 100% ); + content: ""; + border-width: $kendo-stepper-indicator-focus-border-width; + border-style: solid; + border-color: inherit; + pointer-events: none; + display: none; + position: absolute; + top: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); + right: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); + bottom: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); + left: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); + z-index: 2; + } + } + + .k-step.k-focus, + .k-step-link:focus { + .k-step-indicator::after { + display: block; + } + } + + + // Step label + .k-step-label { + max-width: clamp(100%, 10em, 100%); + display: inline-flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + z-index: 1; + } + .k-step-label:only-child { + @include border-radius( $kendo-stepper-label-border-radius ); + padding-block: $kendo-stepper-label-padding-y; + padding-inline: $kendo-stepper-label-padding-x; + border-width: 0; + } + .k-step-label .k-step-text { + max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing})); + flex-grow: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .k-step-label .k-icon { + margin-left: $kendo-icon-spacing; + } + + .k-step-current .k-step-label { + font-weight: bold; + } + + + // Optional label + .k-step-label-optional { + flex-basis: 100%; + font-size: $kendo-stepper-optional-label-font-size; + font-style: $kendo-stepper-optional-label-font-style; + opacity: $kendo-stepper-optional-label-opacity; + } + + + .k-step-disabled, + .k-step.k-disabled { + opacity: 1; + pointer-events: none; + + .k-step-link { cursor: default; } + + .k-step-label-optional { + color: inherit; + } + } + + + // Progressbar + .k-progressbar { + pointer-events: none; + z-index: 0; + overflow: visible; + } + + .k-progressbar-horizontal { + grid-row: 1 / -1; + } + + .k-progressbar-vertical { + position: absolute; + } + } + + + // Horizontal + .k-step-list-horizontal { + flex-direction: row; + grid-row: 1; + + .k-step { + flex: 1 0 auto; + text-align: center; + } + + .k-step-link { + margin: auto; + max-width: 10em; + flex-direction: column; + } + + // Label + .k-step-label { + text-align: center; + } + .k-step-indicator + .k-step-label { + margin-top: if($kendo-stepper-indicator-focus-offset > 0, k-spacing(1), 8px); + } + + // Progressbar + & ~ .k-progressbar { + width: 100%; + height: $kendo-stepper-progressbar-size; + top: calc(((#{$kendo-stepper-indicator-height} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2); + } + } + + // Vertical + .k-step-list-vertical { + flex-direction: column; + + .k-step { + min-height: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) + 20px); + } + + // Label + .k-step-label { + justify-content: flex-start; + } + .k-step-indicator + .k-step-label { + margin-left: $kendo-stepper-label-margin-x; + } + + + // Progressbar + & ~ .k-progressbar { + width: $kendo-stepper-progressbar-size; + height: 100%; + min-height: 20px; + left: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2); + } + + // Inline content + .k-step-content { + height: 0; + overflow: hidden; + transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function; + } + + .k-step-current .k-step-content { + height: auto; + overflow: visible; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width; + padding-block: $kendo-stepper-inline-content-padding-x; + padding-inline: $kendo-stepper-inline-content-padding-y; + } + } + + + // Stepper rtl + .k-rtl .k-stepper, + .k-stepper[dir="rtl"] { + direction: rtl; + + .k-step-label .k-icon { + margin-left: 0; + margin-right: $kendo-icon-spacing; + } + + // Horizontal + .k-step-list-horizontal { } + + + // Vertical + .k-step-list-vertical { + .k-step-indicator + .k-step-label { + margin-left: 0; + margin-right: $kendo-stepper-label-margin-x; + } + + & ~ .k-progressbar { + left: auto; + right: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2); + } + } + } + +} + + +@mixin kendo-stepper--layout() { + @include kendo-stepper--layout-base(); +} diff --git a/packages/core/scss/components/stepper/_theme.scss b/packages/core/scss/components/stepper/_theme.scss new file mode 100644 index 00000000000..e8860adba10 --- /dev/null +++ b/packages/core/scss/components/stepper/_theme.scss @@ -0,0 +1,246 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-stepper--theme-base() { + + // Base + .k-stepper { + @include fill( + $kendo-stepper-text, + $kendo-stepper-bg, + $kendo-stepper-border + ); + + + // Not done steps + .k-step { + // Hover + &:hover, + &.k-hover, + &.k-step-hover { + .k-step-label { + color: $kendo-stepper-label-hover-text; + } + + .k-step-indicator { + @include fill( + $kendo-stepper-indicator-hover-text, + $kendo-stepper-indicator-hover-bg, + $kendo-stepper-indicator-hover-border + ); + } + } + + &.k-focus, + .k-step-link:focus { + // Labels only + .k-step-label:only-child { + @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-border ), $inset: true ); + } + } + + // Disabled + &.k-step-disabled, + &.k-disabled, + &:disabled { + .k-step-indicator { + @if($kendo-enable-color-system) { + @include fill( + $kendo-stepper-indicator-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-disabled-bg; + } + } @else { + @include fill( + $kendo-stepper-indicator-disabled-text, + $kendo-stepper-indicator-disabled-bg, + $kendo-stepper-indicator-disabled-border + ); + } + } + + .k-step-label { + @include fill( $color: $kendo-stepper-label-disabled-text ); + } + } + } + .k-step-indicator { + @include fill( + $kendo-stepper-indicator-text, + $kendo-stepper-indicator-bg, + $kendo-stepper-indicator-border + ); + } + .k-step-indicator::after { + @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-bg ); + } + .k-step-label:only-child { + @include fill( + $kendo-component-text, + $kendo-component-bg, + $kendo-component-border + ); + } + + + // Done steps + .k-step-done { + + .k-step-indicator { + @include fill( + $kendo-stepper-indicator-done-text, + $kendo-stepper-indicator-done-bg, + $kendo-stepper-indicator-done-border + ); + } + + + // Hover + &:hover, + &.k-hover, + &.k-step-hover { + .k-step-indicator { + @include fill( + $kendo-stepper-indicator-done-hover-text, + $kendo-stepper-indicator-done-hover-bg, + $kendo-stepper-indicator-done-hover-border + ); + } + } + + + // Disabled + &.k-step-disabled, + &.k-disabled, + &:disabled { + .k-step-indicator { + @if($kendo-enable-color-system) { + @include fill( + $kendo-stepper-indicator-done-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-done-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-done-disabled-bg; + } + } @else { + @include fill( + $kendo-stepper-indicator-done-disabled-text, + $kendo-stepper-indicator-done-disabled-bg, + $kendo-stepper-indicator-done-disabled-border + ); + } + } + } + } + + + // Current + .k-step-current { + + .k-step-indicator { + @include fill( + $kendo-stepper-indicator-current-text, + $kendo-stepper-indicator-current-bg, + $kendo-stepper-indicator-current-border + ); + } + + + // Hover + &:hover, + &.k-hover, + &.k-step-hover { + .k-step-indicator { + @include fill( + $kendo-stepper-indicator-current-hover-text, + $kendo-stepper-indicator-current-hover-bg, + $kendo-stepper-indicator-current-hover-border + ); + } + } + + + // Disabled + &.k-step-disabled, + &.k-disabled, + &:disabled { + .k-step-indicator { + @if($kendo-enable-color-system) { + @include fill( + $kendo-stepper-indicator-current-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-current-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-current-disabled-bg; + } + } @else { + @include fill( + $kendo-stepper-indicator-current-disabled-text, + $kendo-stepper-indicator-current-disabled-bg, + $kendo-stepper-indicator-current-disabled-border + ); + } + } + } + } + + // Label + .k-step-label { + @include fill( $color: $kendo-stepper-label-text ); + } + .k-step-success .k-step-label .k-icon { + @include fill( $color: $kendo-stepper-label-success-text ); + } + + .k-step-error { + .k-step-label { + @include fill( $color: $kendo-stepper-label-error-text ); + } + + &:hover, + &.k-hover, + &.k-step-hover { + .k-step-label { + @include fill( $color: $kendo-stepper-label-error-text ); + } + } + } + + // Optional Label + .k-step-label-optional { + color: $kendo-stepper-optional-label-text; + } + + // Progressbar + .k-progressbar { + @include fill( + $color: $kendo-stepper-progressbar-text, + $bg: $kendo-stepper-progressbar-bg + ); + + .k-selected { + @include fill( + $color: $kendo-stepper-progressbar-fill-text, + $bg: $kendo-stepper-progressbar-fill-bg + ); + } + } + } + +} + + +@mixin kendo-stepper--theme() { + @include kendo-stepper--theme-base(); +} diff --git a/packages/core/scss/components/stepper/_variables.scss b/packages/core/scss/components/stepper/_variables.scss new file mode 100644 index 00000000000..2a309369619 --- /dev/null +++ b/packages/core/scss/components/stepper/_variables.scss @@ -0,0 +1,227 @@ +// Stepper + +/// The horizontal margin the Stepper. +/// @group stepper +$kendo-stepper-margin-x: null !default; +/// The vertical margin the Stepper. +/// @group stepper +$kendo-stepper-margin-y: null !default; +/// The horizontal padding the Stepper. +/// @group stepper +$kendo-stepper-padding-x: null !default; +/// The vertical padding the Stepper. +/// @group stepper +$kendo-stepper-padding-y: null !default; +/// The horizontal margin the Stepper label. +/// @group stepper +$kendo-stepper-label-margin-x: null !default; +/// The horizontal padding the Stepper label. +/// @group stepper +$kendo-stepper-label-padding-x: null !default; +/// The vertical padding the Stepper label. +/// @group stepper +$kendo-stepper-label-padding-y: null !default; +/// The border radius of the Stepper label. +/// @group stepper +$kendo-stepper-label-border-radius: null !default; +/// The width of the border around the Stepper. +/// @group stepper +$kendo-stepper-border-width: null !default; + +/// The horizontal padding of the Stepper content. +/// @group stepper +$kendo-stepper-inline-content-padding-x: null !default; +/// The vertical padding of the Stepper content. +/// @group stepper +$kendo-stepper-inline-content-padding-y: null !default; + +// The font size of the Stepper. +/// @group stepper +$kendo-stepper-font-size: null !default; +// The line height of the Stepper. +/// @group stepper +$kendo-stepper-line-height: null !default; +// The font family of the Stepper. +/// @group stepper +$kendo-stepper-font-family: null !default; + +/// The background color of the Stepper. +/// @group stepper +$kendo-stepper-bg: null !default; +/// The text color of the Stepper. +/// @group stepper +$kendo-stepper-text: null !default; +/// The border color of the Stepper. +/// @group stepper +$kendo-stepper-border: null !default; + +/// The width of the Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-width: null !default; +/// The height of the Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-height: null !default; +/// The border width of the Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-border-width: null !default; +/// The border radius of the Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-border-radius: null !default; + +/// The border width of the focused Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-focus-border-width: null !default; +/// The size of the focused Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-focus-size: null !default; +/// The offset of the Stepper's focused indicator. +/// @group stepper +$kendo-stepper-indicator-focus-offset: null !default; +/// The calculated offset of the Stepper's focused indicator. +/// @group stepper +$kendo-stepper-indicator-focus-calc-offset: null !default; + +/// The background color of the Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-bg: null !default; +/// The text color of the Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-text: null !default; +/// The border color of the Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-border: null !default; + +/// The background color of the hovered Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-hover-bg: null !default; +/// The text color of the hovered Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-hover-text: null !default; +/// The border color of the hovered Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-hover-border: null !default; + +/// The background color of the disabled Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-disabled-bg: null !default; +/// The text color of the disabled Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-disabled-text: null !default; +/// The border color of the disabled Stepper indicator. +/// @group stepper +$kendo-stepper-indicator-disabled-border: null !default; + +/// The background color of the Stepper's done indicator. +/// @group stepper +$kendo-stepper-indicator-done-bg: null !default; +/// The text color of the Stepper's done indicator. +/// @group stepper +$kendo-stepper-indicator-done-text: null !default; +/// The border color of the Stepper's done indicator. +/// @group stepper +$kendo-stepper-indicator-done-border: null !default; + +/// The background color of the Stepper's hovered done indicator. +/// @group stepper +$kendo-stepper-indicator-done-hover-bg: null !default; +/// The text color of the Stepper's hovered done indicator. +/// @group stepper +$kendo-stepper-indicator-done-hover-text: null !default; +/// The border color of the Stepper's hovered done indicator. +/// @group stepper +$kendo-stepper-indicator-done-hover-border: null !default; + +/// The background color of the Stepper's disabled done indicator. +/// @group stepper +$kendo-stepper-indicator-done-disabled-bg: null !default; +/// The text color of the Stepper's disabled done indicator. +/// @group stepper +$kendo-stepper-indicator-done-disabled-text: null !default; +/// The border color of the Stepper's disabled done indicator. +/// @group stepper +$kendo-stepper-indicator-done-disabled-border: null !default; + +/// The background color of the Stepper current indicator. +/// @group stepper +$kendo-stepper-indicator-current-bg: null !default; +/// The text color of the Stepper current indicator. +/// @group stepper +$kendo-stepper-indicator-current-text: null !default; +/// The border color of the Stepper current indicator. +/// @group stepper +$kendo-stepper-indicator-current-border: null !default; + +/// The background color of the Stepper's hovered current indicator. +/// @group stepper +$kendo-stepper-indicator-current-hover-bg: null !default; +/// The text color of the Stepper's hovered current indicator. +/// @group stepper +$kendo-stepper-indicator-current-hover-text: null !default; +/// The border color of the Stepper's hovered current indicator. +/// @group stepper +$kendo-stepper-indicator-current-hover-border: null !default; + +/// The background color of the Stepper's disabled current indicator. +/// @group stepper +$kendo-stepper-indicator-current-disabled-bg: null !default; +/// The text color of the Stepper's disabled current indicator. +/// @group stepper +$kendo-stepper-indicator-current-disabled-text: null !default; +/// The border color of the Stepper's disabled current indicator. +/// @group stepper +$kendo-stepper-indicator-current-disabled-border: null !default; + +/// The text color of the Stepper label. +/// @group stepper +$kendo-stepper-label-text: null !default; +/// The success text color of the Stepper label. +/// @group stepper +$kendo-stepper-label-success-text: null !default; +/// The error text color of the Stepper label. +/// @group stepper +$kendo-stepper-label-error-text: null !default; +/// The text color of the hovered Stepper label. +/// @group stepper +$kendo-stepper-label-hover-text: null !default; +/// The text color of the disabled Stepper label. +/// @group stepper +$kendo-stepper-label-disabled-text: null !default; + +/// The text color of the optional Stepper label. +/// @group stepper +$kendo-stepper-optional-label-text: null !default; +/// The opacity of the optional Stepper label. +/// @group stepper +$kendo-stepper-optional-label-opacity: null !default; +/// The font size of the optional Stepper label. +/// @group stepper +$kendo-stepper-optional-label-font-size: null !default; +/// The font style of the optional Stepper label. +/// @group stepper +$kendo-stepper-optional-label-font-style: null !default; + +/// The size of the Stepper ProgressBar. +/// @group stepper +$kendo-stepper-progressbar-size: null !default; +/// The background color of the Stepper ProgressBar. +/// @group stepper +$kendo-stepper-progressbar-bg: null !default; +/// The text color of the Stepper ProgressBar. +/// @group stepper +$kendo-stepper-progressbar-text: null !default; +/// The background color of the selected Stepper ProgressBar. +/// @group stepper +$kendo-stepper-progressbar-fill-bg: null !default; +/// The text color of the selected Stepper ProgressBar. +/// @group stepper +$kendo-stepper-progressbar-fill-text: null !default; + +/// The property name of the Stepper transition. +/// @group stepper +$kendo-stepper-content-transition-property: null !default; +/// The duration of the Stepper transition. +/// @group stepper +$kendo-stepper-content-transition-duration: null !default; +/// The timing function of the Stepper transition. +/// @group stepper +$kendo-stepper-content-transition-timing-function: null !default; diff --git a/packages/core/scss/components/switch/_index.scss b/packages/core/scss/components/switch/_index.scss new file mode 100644 index 00000000000..5a4d20a9498 --- /dev/null +++ b/packages/core/scss/components/switch/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-switch--styles() { + @include import-once( "switch" ) { + @include core-styles(); + @include kendo-switch--layout(); + @include kendo-switch--theme(); + } +} diff --git a/packages/core/scss/components/switch/_layout.scss b/packages/core/scss/components/switch/_layout.scss new file mode 100644 index 00000000000..37481aa5972 --- /dev/null +++ b/packages/core/scss/components/switch/_layout.scss @@ -0,0 +1,164 @@ +@use "sass:map"; +@use "sass:math"; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-switch--layout-base() { + + .k-switch { + box-sizing: border-box; + font-family: $kendo-switch-font-family; + outline: 0; + display: inline-flex; + align-items: center; + vertical-align: middle; + line-height: 1; + position: relative; + cursor: pointer; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + [type="checkbox"] { + display: none; + } + + &[aria-readonly="true"] { + pointer-events: none; + } + } + + + // Readonly + .k-switch.k-readonly { + pointer-events: none; + } + + + // Switch track + .k-switch-track { + border-width: $kendo-switch-track-border-width; + border-style: if( $kendo-switch-track-border-width == null, null, solid ); + outline: 0; + display: flex; + flex-flow: row nowrap; + flex: 1 0 auto; + position: relative; + transition: background-color 200ms ease-in-out; + } + + + // Switch thumb + .k-switch-thumb-wrap { + width: 0; + height: 0; + overflow: visible; + position: absolute; + transition: left 200ms ease-in-out; + top: 50%; + } + .k-switch-thumb { + border-width: $kendo-switch-thumb-border-width; + border-style: if( $kendo-switch-thumb-border-width == null, null, solid ); + display: block; + position: absolute; + transform: translate( -50%, -50% ); + } + + + // Switch label + .k-switch-label-on, + .k-switch-label-off { + text-transform: $kendo-switch-label-text-transform; + display: $kendo-switch-label-display; + position: absolute; + top: 50%; + transform: translateY( -50% ); + overflow: hidden; + } + + + // Switch sizes + @each $size, $size-props in $kendo-switch-sizes { + + $_font-size: map.get( $size-props, font-size ); + $_track-width: map.get( $size-props, track-width ); + $_track-height: map.get( $size-props, track-height ); + $_thumb-width: map.get( $size-props, thumb-width ); + $_thumb-height: map.get( $size-props, thumb-height ); + $_thumb-offset: map.get( $size-props, thumb-offset ); + $_label-offset: map.get( $size-props, label-offset ); + + .k-switch-#{$size} { + width: $_track-width; + height: $_track-height; + font-size: $_font-size; + + .k-switch-track { + width: $_track-width; + height: $_track-height; + } + + .k-switch-label-on { left: $_label-offset; } + .k-switch-label-off { right: $_label-offset; } + + .k-switch-thumb { + width: $_thumb-width; + height: $_thumb-height; + } + + &.k-switch-on .k-switch-thumb-wrap { + left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} ); + } + &.k-switch-off .k-switch-thumb-wrap { + left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} ); + } + } + + .k-switch-#{$size}[dir="rtl"], + [dir="rtl"] .k-switch-#{$size}, + .k-rtl .k-switch-#{$size} { + + .k-switch-label-on { + left: auto; + right: $_label-offset; + } + .k-switch-label-off { + right: auto; + left: $_label-offset; + } + + &.k-switch-on .k-switch-thumb-wrap { + left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} ); + } + &.k-switch-off .k-switch-thumb-wrap { + left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} ); + } + } + } + + + // RTL + .k-switch[dir="rtl"], + [dir="rtl"] .k-switch, + .k-switch.k-rtl, + .k-rtl .k-switch { + + .k-switch-thumb { + transform: translate( 50%, -50% ); + } + + } + +} + + +@mixin kendo-switch--layout() { + @include kendo-switch--layout-base(); +} diff --git a/packages/core/scss/components/switch/_theme.scss b/packages/core/scss/components/switch/_theme.scss new file mode 100644 index 00000000000..734ca4c6a13 --- /dev/null +++ b/packages/core/scss/components/switch/_theme.scss @@ -0,0 +1,175 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-switch--theme-base() { + + // Switch + .k-switch {} + + + // Switch OFF + .k-switch-off { + + // Normal state + .k-switch-track { + @include fill( + $kendo-switch-off-track-text, + $kendo-switch-off-track-bg, + $kendo-switch-off-track-border, + $kendo-switch-off-track-gradient + ); + } + .k-switch-thumb { + @include fill( + $kendo-switch-off-thumb-text, + $kendo-switch-off-thumb-bg, + $kendo-switch-off-thumb-border, + $kendo-switch-off-thumb-gradient + ); + } + + // Hover + &:hover, + &.k-hover { + .k-switch-track { + @include fill( + $kendo-switch-off-track-hover-text, + $kendo-switch-off-track-hover-bg, + $kendo-switch-off-track-hover-border, + $kendo-switch-off-track-hover-gradient + ); + } + + .k-switch-thumb { + @include fill( + $kendo-switch-off-thumb-hover-text, + $kendo-switch-off-thumb-hover-bg, + $kendo-switch-off-thumb-hover-border, + $kendo-switch-off-thumb-hover-gradient + ); + } + } + + // Focus + &:focus, + &.k-focus { + .k-switch-track { + @include fill( + $kendo-switch-off-track-focus-text, + $kendo-switch-off-track-focus-bg, + $kendo-switch-off-track-focus-border, + $kendo-switch-off-track-focus-gradient + ); + @if $kendo-enable-focus-contrast { + @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); + } @else { + outline: $kendo-switch-off-track-focus-ring; + } + } + } + + // Disabled + &:disabled, + &.k-disabled { + .k-switch-track { + @include fill( + $kendo-switch-off-track-disabled-text, + $kendo-switch-off-track-disabled-bg, + $kendo-switch-off-track-disabled-border, + $kendo-switch-off-track-disabled-gradient + ); + } + } + + .k-switch-label-on { + color: transparent; + } + } + + + // Switch ON + .k-switch-on { + + // Normal state + .k-switch-track { + @include fill( + $kendo-switch-on-track-text, + $kendo-switch-on-track-bg, + $kendo-switch-on-track-border, + $kendo-switch-on-track-gradient + ); + } + .k-switch-thumb { + @include fill( + $kendo-switch-on-thumb-text, + $kendo-switch-on-thumb-bg, + $kendo-switch-on-thumb-border, + $kendo-switch-on-thumb-gradient + ); + } + + // Hover + &:hover, + &.k-hover { + .k-switch-track { + @include fill( + $kendo-switch-on-track-hover-text, + $kendo-switch-on-track-hover-bg, + $kendo-switch-on-track-hover-border, + $kendo-switch-on-track-hover-gradient + ); + } + + .k-switch-thumb { + @include fill( + $kendo-switch-on-thumb-hover-text, + $kendo-switch-on-thumb-hover-bg, + $kendo-switch-on-thumb-hover-border, + $kendo-switch-on-thumb-hover-gradient + ); + } + } + + // Focus + &:focus, + &.k-focus { + .k-switch-track { + @include fill( + $kendo-switch-on-track-focus-text, + $kendo-switch-on-track-focus-bg, + $kendo-switch-on-track-focus-border, + $kendo-switch-on-track-focus-gradient + ); + @if $kendo-enable-focus-contrast { + @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); + } @else { + outline: $kendo-switch-on-track-focus-ring; + } + } + } + + // Disabled + &:disabled, + &.k-disabled { + .k-switch-track { + @include fill( + $kendo-switch-on-track-disabled-text, + $kendo-switch-on-track-disabled-bg, + $kendo-switch-on-track-disabled-border, + $kendo-switch-on-track-disabled-gradient + ); + } + } + + .k-switch-label-off { + color: transparent; + } + } + +} + + +@mixin kendo-switch--theme() { + @include kendo-switch--theme-base(); +} diff --git a/packages/core/scss/components/switch/_variables.scss b/packages/core/scss/components/switch/_variables.scss new file mode 100644 index 00000000000..2d387f65fd7 --- /dev/null +++ b/packages/core/scss/components/switch/_variables.scss @@ -0,0 +1,188 @@ +// Switch + +/// The font family of the Switch. +/// @group switch +$kendo-switch-font-family: null !default; + +/// The border width of the Switch track. +/// @group switch +$kendo-switch-track-border-width: null !default; + +/// The border width of the Switch thumb. +/// @group switch +$kendo-switch-thumb-border-width: null !default; + +/// The text transform of the Switch label. +/// @group switch +$kendo-switch-label-text-transform: null !default; + +/// The display of the Switch label. +/// @group switch +$kendo-switch-label-display: null !default; + +/// The map with the different Switch sizes. +/// @group switch +$kendo-switch-sizes: null !default; + +/// The background of the track when the Switch is not checked. +/// @group switch +$kendo-switch-off-track-bg: null !default; +/// The text color of the track when the Switch is not checked. +/// @group switch +$kendo-switch-off-track-text: null !default; +/// The border color of the track when the Switch is not checked. +/// @group switch +$kendo-switch-off-track-border: null !default; +/// The background gradient of the track when the Switch is not checked. +/// @group switch +$kendo-switch-off-track-gradient: null !default; + +/// The background of the track when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-track-hover-bg: null !default; +/// The text color of the track when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-track-hover-text: null !default; +/// The border color of the track when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-track-hover-border: null !default; +/// The background gradient of the track when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-track-hover-gradient: null !default; + +/// The background of the track when the focused Switch is not checked. +/// @group switch +$kendo-switch-off-track-focus-bg: null !default; +/// The text color of the track when the focused Switch is not checked. +/// @group switch +$kendo-switch-off-track-focus-text: null !default; +/// The border color of the track when the focused Switch is not checked. +/// @group switch +$kendo-switch-off-track-focus-border: null !default; +/// The background gradient of the track when the focused Switch is not checked. +/// @group switch +$kendo-switch-off-track-focus-gradient: null !default; +/// The ring around the track when the focused Switch is not checked. +/// @group switch +$kendo-switch-off-track-focus-ring: null !default; + +/// The background of the track when the disabled Switch is not checked. +/// @group switch +$kendo-switch-off-track-disabled-bg: null !default; +/// The text color of the track when the disabled Switch is not checked. +/// @group switch +$kendo-switch-off-track-disabled-text: null !default; +/// The border color of the track when the disabled Switch is not checked. +/// @group switch +$kendo-switch-off-track-disabled-border: null !default; +/// The background gradient of the track when the disabled Switch is not checked. +/// @group switch +$kendo-switch-off-track-disabled-gradient: null !default; + +/// The background of the thumb when the Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-bg: null !default; +/// The text color of the thumb when the Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-text: null !default; +/// The border color of the thumb when the Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-border: null !default; +/// The background gradient of the thumb when the Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-gradient: null !default; + +/// The background of the thumb when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-hover-bg: null !default; +/// The text color of the thumb when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-hover-text: null !default; +/// The border color of the thumb when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-hover-border: null !default; +/// The background gradient of the thumb when the hovered Switch is not checked. +/// @group switch +$kendo-switch-off-thumb-hover-gradient: null !default; + + +/// The background of the track when the Switch is checked. +/// @group switch +$kendo-switch-on-track-bg: null !default; +/// The text color of the track when the Switch is checked. +/// @group switch +$kendo-switch-on-track-text: null !default; +/// The border color of the track when the Switch is checked. +/// @group switch +$kendo-switch-on-track-border: null !default; +/// The background gradient of the track when the Switch is checked. +/// @group switch +$kendo-switch-on-track-gradient: null !default; + +/// The background of the track when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-track-hover-bg: null !default; +/// The text color of the track when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-track-hover-text: null !default; +/// The border color of the track when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-track-hover-border: null !default; +/// The background gradient of the track when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-track-hover-gradient: null !default; + +/// The background of the track when the focused Switch is checked. +/// @group switch +$kendo-switch-on-track-focus-bg: null !default; +/// The text color of the track when the focused Switch is checked. +/// @group switch +$kendo-switch-on-track-focus-text: null !default; +/// The border color of the track when the focused Switch is checked. +/// @group switch +$kendo-switch-on-track-focus-border: null !default; +/// The background gradient of the track when the focused Switch is checked. +/// @group switch +$kendo-switch-on-track-focus-gradient: null !default; +/// The ring around the track when the focused Switch is checked. +/// @group switch +$kendo-switch-on-track-focus-ring: null !default; + +/// The background of the track when the disabled Switch is checked. +/// @group switch +$kendo-switch-on-track-disabled-bg: null !default; +/// The text color of the track when the disabled Switch is checked. +/// @group switch +$kendo-switch-on-track-disabled-text: null !default; +/// The border color of the track when the disabled Switch is checked. +/// @group switch +$kendo-switch-on-track-disabled-border: null !default; +/// The background gradient of the track when the disabled Switch is checked. +/// @group switch +$kendo-switch-on-track-disabled-gradient: null !default; + +/// The background of the thumb when the Switch is checked. +/// @group switch +$kendo-switch-on-thumb-bg: null !default; +/// The text color of the thumb when the Switch is checked. +/// @group switch +$kendo-switch-on-thumb-text: null !default; +/// The border color of the thumb when the Switch is checked. +/// @group switch +$kendo-switch-on-thumb-border: null !default; +/// The background gradient of the thumb when the Switch is checked. +/// @group switch +$kendo-switch-on-thumb-gradient: null !default; + +/// The background of the thumb when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-thumb-hover-bg: null !default; +/// The text color of the thumb when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-thumb-hover-text: null !default; +/// The border color of the thumb when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-thumb-hover-border: null !default; +/// The background gradient of the thumb when the hovered Switch is checked. +/// @group switch +$kendo-switch-on-thumb-hover-gradient: null !default; diff --git a/packages/core/scss/components/table/_index.scss b/packages/core/scss/components/table/_index.scss new file mode 100644 index 00000000000..1a64ff1579c --- /dev/null +++ b/packages/core/scss/components/table/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-table--styles() { + @include import-once( "table" ) { + @include core-styles(); + @include kendo-table--layout(); + @include kendo-table--theme(); + } +} diff --git a/packages/core/scss/components/table/_layout.scss b/packages/core/scss/components/table/_layout.scss new file mode 100644 index 00000000000..076fc1b0e4a --- /dev/null +++ b/packages/core/scss/components/table/_layout.scss @@ -0,0 +1,293 @@ +@use "./_variables.scss" as *; +@use "sass:map"; + +@mixin kendo-table--layout-base() { + + // Table + .k-table { + width: 100%; + max-width: none; + border-width: $kendo-table-border-width; + border-style: solid; + font-size: $kendo-table-font-size; + line-height: $kendo-table-line-height; + text-align: start; + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + outline: none; + } + + + // Data table + .k-data-table { + border-width: $kendo-table-border-width; + border-style: solid; + + .k-table { + table-layout: fixed; + } + } + + + // Table native parts + .k-table-thead, + .k-table-tbody, + .k-table-tfoot, + .k-table-row, + .k-table-alt-row { + border-color: inherit; + text-align: inherit; + } + .k-table-th, + .k-table-td { + padding-block: $kendo-table-cell-padding-y; + padding-inline: $kendo-table-cell-padding-x; + border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width; + border-style: solid; + border-color: inherit; + box-sizing: border-box; + font-weight: normal; + text-align: inherit; + white-space: nowrap; + text-overflow: ellipsis; + display: table-cell; + overflow: hidden; + position: relative; + + &:first-child { + border-left-width: 0; + } + } + .k-table-th { + border-bottom-width: 1px; + } + + + // Table header + .k-table-header { + padding-inline-end: var(--kendo-scrollbar-width); + border-width: 0 0 1px; + border-style: solid; + box-sizing: border-box; + + .k-table { + border-width: 0; + } + } + .k-table-header-wrap { + margin-right: -1px; + width: 100%; + border-width: 0 $kendo-table-cell-vertical-border-width 0 0; + border-style: solid; + border-color: inherit; + overflow: hidden; + } + .k-table-header, + .k-table-header-wrap { + > .k-table { + margin-bottom: -1px; + } + } + .k-table-group-sticky-header { + flex: none; + + .k-table-th { + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + } + } + + + // Table list + .k-table-list { + margin: 0; + padding: 0; + width: 100%; + max-width: none; + border-width: 0; + display: table; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + empty-cells: show; + list-style: none; + outline: none; + + .k-table-row { + position: relative; + } + + .k-table-row, + .k-table-group-row { + width: 100%; + box-sizing: border-box; + display: table-row; + } + .k-table-row.k-first { + border-top: 1px solid currentColor; + } + + .k-table-th, + .k-table-td { + vertical-align: middle; + } + + .k-table-group-row { + position: sticky; + + &::before { + content: "\200b"; + padding-block: $kendo-table-cell-padding-y; + padding-inline: 0; + width: 0; + display: block; + overflow: hidden; + } + + .k-table-th { + width: 100%; + border-color: inherit; + color: inherit; + background-color: inherit; + position: absolute; + top: 0; + } + } + + // stylelint-disable declaration-no-important + .k-table-spacer-td { + padding: 0 !important; + width: 0 !important; + border-left-width: 0 !important; + border-right-width: 0 !important; + } + .k-table-group-td { + padding: 0 !important; + width: 0 !important; + border-left-width: 0 !important; + border-right-width: 0 !important; + overflow: visible; + + > span { + font-size: .75em; + position: absolute; + top: 0; + right: 0; + } + } + // stylelint-enable declaration-no-important + } + + + // Virtualization + .k-virtual-table .k-table-row, + .k-virtual-table .k-table-group-row { + position: absolute; + width: 100%; + } + + + // Table scroller + .k-table-scroller { + position: relative; + overflow: auto; + + > .k-table { + border-width: 0; + } + } + + + // Table footer + .k-table-footer { + padding-inline-end: var(--kendo-scrollbar-width); + border-width: 1px 0 0; + border-style: solid; + box-sizing: border-box; + + .k-table { + border-width: 0; + } + } + .k-table-footer-wrap { + margin-right: -1px; + width: 100%; + border-width: 0 $kendo-table-cell-vertical-border-width 0 0; + border-style: solid; + border-color: inherit; + overflow: hidden; + } + + + // Sizes + @each $size, $size-props in $kendo-table-sizes { + $_font-size: map.get( $size-props, font-size); + $_line-height: map.get( $size-props, line-height); + $_cell-padding-x: map.get( $size-props, cell-padding-x); + $_cell-padding-y: map.get( $size-props, cell-padding-y); + + .k-table-#{$size} { + font-size: $_font-size; + line-height: $_line-height; + } + + .k-table-#{$size} .k-table-th, + .k-table-#{$size} .k-table-td { + padding-block: $_cell-padding-y; + padding-inline: $_cell-padding-x; + } + + .k-table-#{$size} .k-table-list .k-table-group-td > span { + padding-block: 0; + padding-inline: calc( #{$_cell-padding-x} / 2 ); + } + + .k-table-#{$size} .k-table-list .k-table-group-row::before { + padding-block: $_cell-padding-y; + padding-inline: 0; + } + } + + + // RTL + .k-rtl, + [dir="rtl"] { + &.k-table, + .k-table { + + .k-table-th, + .k-table-td { + border-left-width: 0; + border-right-width: $kendo-table-cell-vertical-border-width; + + &:first-child { + border-right-width: 0; + } + } + + .k-table-header-wrap, + .k-table-footer-wrap { + margin-right: 0; + margin-left: -1px; + border-left-width: $kendo-table-cell-vertical-border-width; + border-right-width: 0; + } + } + + .k-table-list { + .k-table-group-td > span { + left: 0; + right: auto; + } + } + } + +} + + +@mixin kendo-table--layout() { + @include kendo-table--layout-base(); +} diff --git a/packages/core/scss/components/table/_theme.scss b/packages/core/scss/components/table/_theme.scss new file mode 100644 index 00000000000..b98e73f0a1e --- /dev/null +++ b/packages/core/scss/components/table/_theme.scss @@ -0,0 +1,93 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-table--theme-base() { + + // Table + .k-table, + .k-data-table { + border-color: $kendo-table-border; + color: $kendo-table-text; + background-color: $kendo-table-bg; + } + + + // Table header + .k-table-thead, + .k-table-header, + .k-table-group-sticky-header { + border-color: $kendo-table-header-border; + color: $kendo-table-header-text; + background-color: $kendo-table-header-bg; + } + + + // Table footer + .k-table-tfoot, + .k-table-footer { + border-color: $kendo-table-footer-border; + color: $kendo-table-footer-text; + background-color: $kendo-table-footer-bg; + } + + + // Group row + .k-table-group-row { + border-color: $kendo-table-group-row-border; + color: $kendo-table-group-row-text; + background-color: $kendo-table-group-row-bg; + } + .k-table-group-td > span { + color: $kendo-table-bg; + background-color: $kendo-table-text; + } + + + // Alternating row + .k-table-alt-row { + border-color: $kendo-table-alt-row-border; + color: $kendo-table-alt-row-text; + background-color: $kendo-table-alt-row-bg; + } + + + // Hover state + .k-table-tbody .k-table-row:hover, + .k-table-list .k-table-row:hover, + .k-table-tbody .k-table-row.k-hover, + .k-table-list .k-table-row.k-hover { + border-color: $kendo-table-hover-border; + color: $kendo-table-hover-text; + background-color: $kendo-table-hover-bg; + } + + + // Focus state + .k-table-tbody .k-table-row, + .k-table-list .k-table-row, + .k-table-tbody .k-table-td, + .k-table-list .k-table-td { + &.k-focus, + &:focus { + border-color: $kendo-table-focus-border; + color: $kendo-table-focus-text; + background-color: $kendo-table-focus-bg; + @include focus-indicator( $kendo-table-focus-shadow, inset ); + } + } + + + // Selected state + .k-table-tbody .k-table-row.k-selected > .k-table-td, + .k-table-list .k-table-row.k-selected { + border-color: $kendo-table-selected-border; + color: $kendo-table-selected-text; + background-color: $kendo-table-selected-bg; + } + +} + + +@mixin kendo-table--theme() { + @include kendo-table--theme-base(); +} diff --git a/packages/core/scss/components/table/_variables.scss b/packages/core/scss/components/table/_variables.scss new file mode 100644 index 00000000000..d8c30f46d34 --- /dev/null +++ b/packages/core/scss/components/table/_variables.scss @@ -0,0 +1,133 @@ +// Table + +/// The width of the table border. +/// @group table +$kendo-table-border-width: null !default; +/// The width of vertical border of table cells. +/// @group table +$kendo-table-cell-vertical-border-width: null !default; +/// The width of horizontal border of table cells. +/// @group table +$kendo-table-cell-horizontal-border-width: null !default; + +/// The font size of the table if no size is specified. +/// @group table +$kendo-table-font-size: null !default; + +/// The line-height of the table if no size is specified. +/// @group table +$kendo-table-line-height: null !default; + +/// The horizontal padding of the cells in the table if no size is specified. +/// @group table +$kendo-table-cell-padding-x: null !default; + +/// The vertical padding of the cells in the table if no size is specified. +/// @group table +$kendo-table-cell-padding-y: null !default; + +$kendo-table-sm-cell-padding-x: null !default; +$kendo-table-sm-cell-padding-y: null !default; + +$kendo-table-md-cell-padding-x: null !default; +$kendo-table-md-cell-padding-y: null !default; + +$kendo-table-lg-cell-padding-x: null !default; +$kendo-table-lg-cell-padding-y: null !default; + +/// The sizes of the table. +/// @group table +$kendo-table-sizes: null !default; + + +/// Background color of tables. +/// @group table +$kendo-table-bg: null !default; +/// Text color of tables. +/// @group table +$kendo-table-text: null !default; +/// Border color of tables. +/// @group table +$kendo-table-border: null !default; + + +/// Background color of table headers. +/// @group table +$kendo-table-header-bg: null !default; +/// Text color of table headers. +/// @group table +$kendo-table-header-text: null !default; +/// Border color of table headers. +/// @group table +$kendo-table-header-border: null !default; +/// Gradient of table headers. +/// @group table +$kendo-table-header-gradient: null !default; + + +/// Background color of table footers. +/// @group table +$kendo-table-footer-bg: null !default; +/// Text color of table footers. +/// @group table +$kendo-table-footer-text: null !default; +/// Border color of table footers. +/// @group table +$kendo-table-footer-border: null !default; + + +/// Background color of group rows in table. +/// @group table +$kendo-table-group-row-bg: null !default; +/// Text color of group rows in table. +/// @group table +$kendo-table-group-row-text: null !default; +/// Border color of group rows in table. +/// @group table +$kendo-table-group-row-border: null !default; + +/// Background color of alternating rows in table. +/// @group table +$kendo-table-alt-row-bg: null !default; +/// Text color of alternating rows in table. +/// @group table +$kendo-table-alt-row-text: null !default; +/// Border color of alternating rows in table. +/// @group table +$kendo-table-alt-row-border: null !default; + + +/// Background color of hovered rows in table. +/// @group table +$kendo-table-hover-bg: null !default; +/// Text color of hovered rows in table. +/// @group table +$kendo-table-hover-text: null !default; +/// Border color of hovered rows in table. +/// @group table +$kendo-table-hover-border: null !default; + + +/// Background color of focused rows in table. +/// @group table +$kendo-table-focus-bg: null !default; +/// Text color of focused rows in table. +/// @group table +$kendo-table-focus-text: null !default; +/// Border color of focused rows in table. +/// @group table +$kendo-table-focus-border: null !default; +/// Box shadow of focused rows in table. +/// @group table +$kendo-table-focus-shadow: null !default; + + +/// Background color of selected rows in table. +/// @group table +$kendo-table-selected-bg: null !default; +/// Text color of selected rows in table. +/// @group table +$kendo-table-selected-text: null !default; +/// Border color of selected rows in table. +/// @group table +$kendo-table-selected-border: null !default; diff --git a/packages/core/scss/components/tabstrip/_index.scss b/packages/core/scss/components/tabstrip/_index.scss new file mode 100644 index 00000000000..f38a92ea5ea --- /dev/null +++ b/packages/core/scss/components/tabstrip/_index.scss @@ -0,0 +1,25 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-tabstrip--styles() { + @include import-once( "tabstrip" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-icon--styles(); + @include kendo-list--styles(); + @include kendo-tabstrip--layout(); + @include kendo-tabstrip--theme(); + @include kendo-utils--layout--overflow(); + @include kendo-utils--layout--position(); + } +} diff --git a/packages/core/scss/components/tabstrip/_layout.scss b/packages/core/scss/components/tabstrip/_layout.scss new file mode 100644 index 00000000000..46d21b514a2 --- /dev/null +++ b/packages/core/scss/components/tabstrip/_layout.scss @@ -0,0 +1,496 @@ +@use "sass:map"; +@use "../../color-system/_constants.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../icons/_variables.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-tabstrip--layout-base() { + + // Tabstrip wrapper + .k-tabstrip-wrapper { + padding-block: $kendo-tabstrip-wrapper-padding-y; + padding-inline: $kendo-tabstrip-wrapper-padding-x; + box-sizing: border-box; + border-width: $kendo-tabstrip-wrapper-border-width; + border-style: solid; + display: flex; + flex-direction: column; + position: relative; + } + + + // Tabstrip + .k-tabstrip { + border-width: 0; + border-color: transparent; + box-sizing: border-box; + outline: 0; + font-family: $kendo-tabstrip-font-family; + font-size: $kendo-tabstrip-font-size; + line-height: $kendo-tabstrip-line-height; + color: inherit; + background-color: transparent; + display: flex; + flex-flow: column nowrap; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + } + .k-tabstrip-wrapper > .k-tabstrip { + flex: 1 1 auto; + } + + + // Tabstrip items wrapper + .k-tabstrip-items-wrapper { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: inherit; + position: relative; + } + + + // Tabstrip items + .k-tabstrip-items { + box-sizing: border-box; + outline: 0; + display: flex; + flex-direction: inherit; + flex-wrap: wrap; + flex: 1 1 auto; + gap: $kendo-tabstrip-item-gap; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + .k-item { + margin: 0; + padding: 0; + border: $kendo-tabstrip-item-border-width solid transparent; + position: relative; + flex-shrink: 0; + display: flex; + flex-direction: row; + align-items: stretch; + justify-items: stretch; + outline: 0; + + // Active state + &:active, + &.k-active, + &.k-selected { + font-weight: $kendo-tabstrip-item-selected-font-weight; + } + } + + .k-item-actions { + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + } + + .k-link { + padding-block: $kendo-tabstrip-item-padding-y; + padding-inline: $kendo-tabstrip-item-padding-x; + color: inherit; + cursor: pointer; + display: inline-flex; + vertical-align: middle; + flex: 1 1 auto; + flex-direction: row; + align-content: center; + align-items: center; + gap: $kendo-icon-spacing; + } + + + // Disabled state + .k-item.k-disabled, + .k-item[disabled] { + opacity: $kendo-tabstrip-item-disabled-opacity; + filter: $kendo-tabstrip-item-disabled-filter; + } + } + + + // Tabstrip content + .k-tabstrip-content, + .k-tabstrip > .k-content { + margin: 0 !important; // stylelint-disable-line declaration-no-important + padding-block: $kendo-tabstrip-content-padding-y; + padding-inline: $kendo-tabstrip-content-padding-x; + box-sizing: border-box; + border-width: $kendo-tabstrip-content-border-width; + border-style: solid; + border-color: inherit; + display: none; + overflow: auto; + flex: 1 1 auto; + position: relative; + + &.k-active { + display: block; + } + + &:focus, + &.k-focus { + outline-width: 1px; + outline-style: dotted; + outline-offset: -1px; + } + } + + + // Loading indicator + .k-tabstrip-items .k-loading { + width: 20%; + height: 0; + border: 0; + border-top: 1px solid transparent; + border-color: inherit; + background: none; + position: absolute; + top: 0; + left: 0; + transition: width .2s linear; + + // TODO: a better name + display: none; + + &.k-complete { + width: 100%; + border-top-width: 0; + } + } + + + // Scrolling + .k-tabstrip-scrollable { + > .k-tabstrip-items-wrapper { + > .k-tabstrip-items { + flex-wrap: nowrap; + white-space: nowrap; + overflow: hidden; + + &.k-tabstrip-items-scroll { + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + } + } + + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items.k-tabstrip-items-scroll { + overflow-x: auto; + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items.k-tabstrip-items-scroll { + overflow-y: auto; + } + } + } + + .k-tabstrip-scrollable-overlay { + .k-tabstrip-items-wrapper { + &::before, + &::after { + content: ''; + position: absolute; + z-index: 3; + } + } + + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before, + &::after { + height: 100%; + aspect-ratio: 1; + } + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items-wrapper { + &::before, + &::after { + width: 100%; + } + &::before { + inset-block-start: 0; + } + + &::after { + inset-block-end: 0; + } + } + } + + &.k-tabstrip-scrollable-start { + .k-tabstrip-items-wrapper { + &::before { + display: none; + } + } + } + + &.k-tabstrip-scrollable-end { + .k-tabstrip-items-wrapper { + &::after { + display: none; + } + } + } + } + + + // Tabstrip orientation + .k-tabstrip-horizontal { + flex-direction: row; + } + .k-tabstrip-vertical { + flex-direction: column; + } + + + // Tabstrip position + .k-tabstrip-top { + > .k-tabstrip-items-wrapper { + @extend .k-tabstrip-horizontal !optional; + border-bottom-width: $kendo-tabstrip-border-width; + + .k-item { + @include border-top-radius( $kendo-tabstrip-item-border-radius ); + border-bottom-width: 0; + + .k-link { + justify-content: center; + } + } + .k-item:active, + .k-item.k-active { + margin-bottom: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); + border-bottom-width: $kendo-tabstrip-border-width; + border-bottom-color: transparent !important; // stylelint-disable-line declaration-no-important + } + } + + > .k-content, + > .k-tabstrip-content { + @include border-bottom-radius( $kendo-tabstrip-item-border-radius ); + border-top-width: 0 !important; // stylelint-disable-line declaration-no-important + } + } + .k-tabstrip-bottom { + > .k-tabstrip-items-wrapper { + @extend .k-tabstrip-horizontal !optional; + border-top-width: $kendo-tabstrip-border-width; + + .k-item { + @include border-bottom-radius( $kendo-tabstrip-item-border-radius ); + border-top-width: 0; + } + .k-item:active, + .k-item.k-active { + margin-top: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); + border-top-width: $kendo-tabstrip-border-width; + border-top-color: transparent !important; // stylelint-disable-line declaration-no-important + } + } + + > .k-content, + > .k-tabstrip-content { + @include border-top-radius( $kendo-tabstrip-item-border-radius ); + border-bottom-width: 0 !important; // stylelint-disable-line declaration-no-important + } + } + .k-tabstrip-left { + flex-direction: row; + + > .k-tabstrip-items-wrapper { + @extend .k-tabstrip-vertical !optional; + border-right-width: $kendo-tabstrip-border-width; + + .k-item { + @include border-left-radius( $kendo-tabstrip-item-border-radius ); + border-right-width: 0; + } + .k-item:active, + .k-item.k-active { + margin-right: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); + border-right-width: $kendo-tabstrip-border-width; + border-right-color: transparent !important; // stylelint-disable-line declaration-no-important + } + } + + > .k-content, + > .k-tabstrip-content { + @include border-right-radius( $kendo-tabstrip-item-border-radius ); + border-left-width: 0 !important; // stylelint-disable-line declaration-no-important + } + + } + .k-tabstrip-right { + flex-direction: row-reverse; + + > .k-tabstrip-items-wrapper { + @extend .k-tabstrip-vertical !optional; + border-left-width: $kendo-tabstrip-border-width; + + .k-item { + @include border-right-radius( $kendo-tabstrip-item-border-radius ); + border-left-width: 0; + } + .k-item:active, + .k-item.k-active { + margin-left: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); + border-left-width: $kendo-tabstrip-border-width; + border-left-color: transparent !important; // stylelint-disable-line declaration-no-important + } + } + + > .k-content, + > .k-tabstrip-content { + @include border-left-radius( $kendo-tabstrip-item-border-radius ); + border-right-width: 0; + } + } + + + // Tabstrip align + .k-tabstrip-items-start { + justify-content: flex-start; + } + .k-tabstrip-items-center { + justify-content: center; + } + .k-tabstrip-items-end { + justify-content: flex-end; + } + .k-tabstrip-items-justify { + justify-content: space-between; + } + .k-tabstrip-items-stretched > * { + flex: 1 0 0; + } + + + // Selected indicator + @if ($kendo-tabstrip-indicator-size) { + + .k-tabstrip-items-wrapper { + + .k-item::after { + content: ""; + border-width: 0; + border-style: solid; + display: none; + position: absolute; + z-index: 2; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + } + .k-item.k-active::after { + display: block; + } + + .k-item > .k-link { + z-index: 1; + } + } + + + // Variants + .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after { + border-bottom-width: $kendo-tabstrip-indicator-size; + } + .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::after { + border-top-width: $kendo-tabstrip-indicator-size; + } + .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after { + border-right-width: $kendo-tabstrip-indicator-size; + } + .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after { + border-left-width: $kendo-tabstrip-indicator-size; + } + + + // Hide tabstrip indicator when dragging + .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging { + &::after { + display: none !important; // stylelint-disable-line declaration-no-important + } + } + + } + + + // RTL + .k-rtl .k-tabstrip, + .k-tabstrip[dir="rtl"] { + + &.k-tabstrip-left, + &.k-tabstrip-right { + > .k-tabstrip-items-wrapper { + order: 1; + } + + > .k-content { order: 0; } + > .k-tabstrip-content { order: 0; } + } + + } + + // TabStrip sizes + @each $size, $size-props in $kendo-tabstrip-sizes { + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_item-padding-x: map.get( $size-props, item-padding-x ); + $_item-padding-y: map.get( $size-props, item-padding-y ); + + .k-tabstrip-#{$size} { + .k-tabstrip-items .k-link { + font-size: $_font-size; + line-height: $_line-height; + padding-block: $_item-padding-y; + padding-inline: $_item-padding-x; + } + + :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){ + &::before, + &::after { + height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) ); + } + } + } + } + +} + + +@mixin kendo-tabstrip--layout() { + @include kendo-tabstrip--layout-base(); +} diff --git a/packages/core/scss/components/tabstrip/_theme.scss b/packages/core/scss/components/tabstrip/_theme.scss new file mode 100644 index 00000000000..745f0c4d6fa --- /dev/null +++ b/packages/core/scss/components/tabstrip/_theme.scss @@ -0,0 +1,156 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-tabstrip--theme-base() { + + // Wrapper + .k-tabstrip-wrapper { + @include fill( + $kendo-tabstrip-wrapper-text, + $kendo-tabstrip-wrapper-bg, + $kendo-tabstrip-wrapper-border + ); + } + + + // Items + .k-tabstrip-items-wrapper { + @include fill( + $kendo-tabstrip-text, + $kendo-tabstrip-bg, + $kendo-tabstrip-border + ); + + .k-item { + @include fill( + $kendo-tabstrip-item-text, + $kendo-tabstrip-item-bg, + $kendo-tabstrip-item-border, + $kendo-tabstrip-item-gradient + ); + + &:hover, + &.k-hover { + @include fill( + $kendo-tabstrip-item-hover-text, + $kendo-tabstrip-item-hover-bg, + $kendo-tabstrip-item-hover-border, + $kendo-tabstrip-item-hover-gradient + ); + } + + &:active, + &.k-active, + &.k-selected { + @include fill( + $kendo-tabstrip-item-selected-text, + $kendo-tabstrip-item-selected-bg, + $kendo-tabstrip-item-selected-border, + $kendo-tabstrip-item-selected-gradient + ); + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-tabstrip-item-focus-shadow, true ); + } + + &.k-tabstrip-dragging { + @include focus-indicator( $kendo-tabstrip-item-dragging-shadow ); + } + + + // Disabled + &.k-disabled, + &[disabled] { + @include fill( + $kendo-tabstrip-item-disabled-text, + $kendo-tabstrip-item-disabled-bg, + $kendo-tabstrip-item-disabled-border, + $kendo-tabstrip-item-disabled-gradient + ); + } + } + + } + + + // Content + .k-tabstrip-content, + .k-tabstrip > .k-content { + @include fill( + $kendo-tabstrip-content-text, + $kendo-tabstrip-content-bg, + $kendo-tabstrip-content-border + ); + + &:focus, + &.k-focus { + outline-color: $kendo-tabstrip-content-focus-border; + } + } + + + // Selected indicator + @if ($kendo-tabstrip-indicator-size) { + + .k-tabstrip-items-wrapper { + .k-item.k-active::after { + border-color: $kendo-tabstrip-indicator-color; + } + } + } + + // Scrolling + .k-tabstrip-scrollable-overlay { + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); + } + } + } + + &.k-tabstrip-left, + &.k-tabstrip-right { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay); + } + } + } + } +} + +// RTL +.k-rtl, +[dir="rtl"] { + &.k-tabstrip-scrollable-overlay { + &.k-tabstrip-top, + &.k-tabstrip-bottom { + .k-tabstrip-items-wrapper { + &::before { + background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); + } + + &::after { + background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); + } + } + } + } +} + + +@mixin kendo-tabstrip--theme() { + @include kendo-tabstrip--theme-base(); +} diff --git a/packages/core/scss/components/tabstrip/_variables.scss b/packages/core/scss/components/tabstrip/_variables.scss new file mode 100644 index 00000000000..2ea1be65e78 --- /dev/null +++ b/packages/core/scss/components/tabstrip/_variables.scss @@ -0,0 +1,206 @@ +// TabStrip + + +/// The horizontal padding of the TabStrip wrapper. +/// @group tabstrip +$kendo-tabstrip-wrapper-padding-x: null !default; +/// The vertical padding of the TabStrip wrapper. +/// @group tabstrip +$kendo-tabstrip-wrapper-padding-y: null !default; +/// The border width around the TabStrip wrapper. +/// @group tabstrip +$kendo-tabstrip-wrapper-border-width: null !default; + +/// The font family of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-font-family: null !default; +/// The font size of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-font-size: null !default; +/// The line height of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-line-height: null !default; +/// The border width around the TabStrip. +/// @group tabstrip +$kendo-tabstrip-border-width: null !default; + +/// The font size of the small TabStrip. +/// @group tabstrip +$kendo-tabstrip-sm-font-size: null !default; +/// The line height of the small TabStrip. +/// @group tabstrip +$kendo-tabstrip-sm-line-height: null !default; +/// The font size of the medium TabStrip. +/// @group tabstrip +$kendo-tabstrip-md-font-size: null !default; +/// The line height of the medium TabStrip. +/// @group tabstrip +$kendo-tabstrip-md-line-height: null !default; +/// The font size of the large TabStrip. +/// @group tabstrip +$kendo-tabstrip-lg-font-size: null !default; +/// The line height of the large TabStrip. +/// @group tabstrip +$kendo-tabstrip-lg-line-height: null !default; + +/// The background color of the TabStrip wrapper. +/// @group tabstrip +$kendo-tabstrip-wrapper-bg: null !default; +/// The text color of the TabStrip wrapper. +/// @group tabstrip +$kendo-tabstrip-wrapper-text: null !default; +/// The border color of the TabStrip wrapper. +/// @group tabstrip +$kendo-tabstrip-wrapper-border: null !default; + +/// The background color of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-bg: null !default; +/// The text color of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-text: null !default; +/// The border color of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-border: null !default; + +/// The horizontal padding of the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-padding-x: null !default; +/// The vertical padding of the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-padding-y: null !default; +/// The border width around the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-border-width: null !default; +/// The border radius of the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-border-radius: null !default; +/// The gap between the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-gap: null !default; +/// The horizontal padding of the small TabStrip items. +/// @group tabstrip +$kendo-tabstrip-sm-item-padding-x: null !default; +/// The vertical padding of the small TabStrip items. +/// @group tabstrip +$kendo-tabstrip-sm-item-padding-y: null !default; +/// The horizontal padding of the medium TabStrip items. +/// @group tabstrip +$kendo-tabstrip-md-item-padding-x: null !default; +/// The vertical padding of the medium TabStrip items. +/// @group tabstrip +$kendo-tabstrip-md-item-padding-y: null !default; +/// The horizontal padding of the large TabStrip items. +/// @group tabstrip +$kendo-tabstrip-lg-item-padding-x: null !default; +/// The vertical padding of the large TabStrip items. +/// @group tabstrip +$kendo-tabstrip-lg-item-padding-y: null !default; + +/// The background color of the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-bg: null !default; +/// The text color of the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-text: null !default; +/// The border color of the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-border: null !default; +/// The gradient of the TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-gradient: null !default; + +/// The background color of the hovered TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-hover-bg: null !default; +/// The text color of the hovered TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-hover-text: null !default; +/// The border color of the hovered TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-hover-border: null !default; +/// The gradient of the hovered TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-hover-gradient: null !default; + +/// The background color of the selected TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-selected-bg: null !default; +/// The text color of the selected TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-selected-text: null !default; +/// The border color of the selected TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-selected-border: null !default; +/// The gradient of the selected TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-selected-gradient: null !default; +/// The font weight of the selected TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-selected-font-weight: null !default; + + +/// The shadow of the focused TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-focus-shadow: null !default; + +/// The shadow of the dragged TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-dragging-shadow: null !default; + +/// The background color of the disabled TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-disabled-bg: null !default; +/// The text color of the disabled TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-disabled-text: null !default; +/// The border color of the disabled TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-disabled-border: null !default; +/// The gradient of the disabled TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-disabled-gradient: null !default; +/// The opacity of the disabled TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-disabled-opacity: null !default; +/// The filter of the disabled TabStrip items. +/// @group tabstrip +$kendo-tabstrip-item-disabled-filter: null !default; + +/// The border width of the TabStrip indicator. +/// @group tabstrip +$kendo-tabstrip-indicator-size: null !default; +/// The border color of the TabStrip ripple. +/// @group tabstrip +$kendo-tabstrip-indicator-color: null !default; + +/// The horizontal padding of the TabStrip content. +/// @group tabstrip +$kendo-tabstrip-content-padding-x: null !default; +/// The vertical padding of the TabStrip content. +/// @group tabstrip +$kendo-tabstrip-content-padding-y: null !default; +/// The border width around the TabStrip content. +/// @group tabstrip +$kendo-tabstrip-content-border-width: null !default; + +/// The background color of the TabStrip content. +/// @group tabstrip +$kendo-tabstrip-content-bg: null !default; +/// The text color of the TabStrip content. +/// @group tabstrip +$kendo-tabstrip-content-text: null !default; +/// The border color of the TabStrip content. +/// @group tabstrip +$kendo-tabstrip-content-border: null !default; +/// The border color of the focused TabStrip content. +/// @group tabstrip +$kendo-tabstrip-content-focus-border: null !default; + +/// The left and right scroll overlay of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-scroll-overlay: null !default; + +/// The size map of the TabStrip. +/// @group tabstrip +$kendo-tabstrip-sizes: null !default; diff --git a/packages/core/scss/components/taskboard/_index.scss b/packages/core/scss/components/taskboard/_index.scss new file mode 100644 index 00000000000..6747d5efce6 --- /dev/null +++ b/packages/core/scss/components/taskboard/_index.scss @@ -0,0 +1,32 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../forms/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../textbox/_index.scss" as *; +@use "../searchbox/_index.scss" as *; +@use "../toolbar/_index.scss" as *; +@use "../card/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-task-board--styles() { + @include import-once( "task-board" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-form--styles(); + @include kendo-input--styles(); + @include kendo-textbox--styles(); + @include kendo-searchbox--styles(); + @include kendo-toolbar--styles(); + @include kendo-card--styles(); + @include kendo-task-board--layout(); + @include kendo-task-board--theme(); + @include kendo-utils--typography--text-overflow(); + } +} diff --git a/packages/core/scss/components/taskboard/_layout.scss b/packages/core/scss/components/taskboard/_layout.scss new file mode 100644 index 00000000000..2923f1585cc --- /dev/null +++ b/packages/core/scss/components/taskboard/_layout.scss @@ -0,0 +1,222 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-task-board--layout-base() { + + // TaskBoard + .k-taskboard { + padding-block: $kendo-taskboard-padding-y; + padding-inline: $kendo-taskboard-padding-x; + box-sizing: border-box; + font-size: $kendo-taskboard-font-size; + font-family: $kendo-taskboard-font-family; + line-height: $kendo-taskboard-line-height; + display: flex; + flex-direction: column; + position: relative; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + // Toolbar + .k-taskboard-toolbar { + padding-block: $kendo-taskboard-toolbar-padding-y; + padding-inline: $kendo-taskboard-toolbar-padding-x; + border-width: 0; + box-shadow: none; + background: none; + } + + // Content + .k-taskboard-content { + padding: 0 $kendo-taskboard-toolbar-padding-x $kendo-taskboard-content-padding-y; + display: flex; + position: relative; + flex: 1 1 auto; + overflow-x: auto; + } + + // Columns + .k-taskboard-columns-container { + outline: none; + display: flex; + flex-direction: row; + overflow: hidden; + gap: $kendo-taskboard-columns-container-gap; + overflow-x: visible; + } + + .k-taskboard-column { + width: $kendo-taskboard-column-width; + border-width: $kendo-taskboard-column-border-width; + border-radius: $kendo-taskboard-column-border-radius; + border-style: solid; + outline: none; + display: flex; + flex-direction: column; + flex-shrink: 0; + overflow: hidden; + } + + .k-taskboard-column-header { + padding-block: $kendo-taskboard-column-header-padding-y; + padding-inline: $kendo-taskboard-column-header-padding-x; + font-weight: $kendo-taskboard-column-header-font-weight; + display: flex; + flex-direction: row; + align-items: center; + gap: $kendo-taskboard-column-header-gap; + } + + .k-taskboard-column-header-actions { + display: inline-flex; + flex-shrink: 0; + align-self: flex-start; + gap: $kendo-taskboard-column-header-actions-gap; + } + + .k-taskboard-column-cards-container { + margin-bottom: $kendo-taskboard-column-container-spacing-y; + padding-block: $kendo-taskboard-column-container-padding-y; + padding-inline: $kendo-taskboard-column-container-padding-x; + outline: none; + overflow: auto; + flex: 1 1 auto; + } + + .k-taskboard-column-cards { + padding-block: $kendo-taskboard-column-cards-padding-y; + padding-inline: $kendo-taskboard-column-cards-padding-x; + min-height: 100%; + display: flex; + flex-direction: column; + gap: $kendo-taskboard-column-cards-gap 0; + } + + // Edit/New Columns + .k-taskboard-column-new { + // TODO: we need better way + // max-height: $kendo-taskboard-column-new-calc-height; + } + + .k-taskboard-column-new, + .k-taskboard-column-edit { + .k-taskboard-column-header { + font-weight: inherit; + } + + .k-taskboard-column-header-text { + flex: 1 1 100%; + } + } + + // Preview/Edit Pane + .k-taskboard-pane { + padding-block: $kendo-taskboard-pane-padding-y; + padding-inline: $kendo-taskboard-pane-padding-x; + width: $kendo-taskboard-pane-width; + border-width: $kendo-taskboard-pane-border-width; + border-style: solid; + display: flex; + flex-direction: column; + position: absolute; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + z-index: 2; + } + + .k-taskboard-pane-header { + padding-block: $kendo-taskboard-pane-header-padding-y; + padding-inline: $kendo-taskboard-pane-header-padding-x; + font-weight: $kendo-taskboard-pane-header-font-weight; + display: flex; + flex-direction: row; + align-items: center; + } + + .k-taskboard-pane-header-text { + word-break: normal; + overflow-wrap: anywhere; + } + + .k-taskboard-pane-header-actions { + flex-shrink: 0; + align-self: flex-start; + } + + .k-taskboard-pane-content { + padding-block: $kendo-taskboard-pane-content-padding-y; + padding-inline: $kendo-taskboard-pane-content-padding-x; + overflow: auto; + flex: 1 1 auto; + } + + .k-taskboard-pane-actions { + padding-block: $kendo-taskboard-pane-actions-padding-y; + padding-inline: $kendo-taskboard-pane-actions-padding-x; + } + + .k-taskboard-pane-start { + right: auto; + left: 0; + } + + // Cards + .k-taskboard-card { + @include border-radius( $kendo-taskboard-card-border-radius ); + border-width: $kendo-taskboard-card-border-width; + + &.k-taskboard-card-category { + border-inline-start-width: $kendo-taskboard-card-category-border-width; + } + + .k-card-header + .k-card-body, + .k-card-footer { + padding-block: $kendo-taskboard-card-padding-y; + padding-inline: $kendo-taskboard-card-padding-x; + } + + .k-card-header { + align-items: center; + } + + .k-card-title { + font-size: inherit; + font-weight: inherit; + word-break: normal; + overflow-wrap: anywhere; + + &:focus, + &.k-focus, + &:hover, + &.k-hover { + text-decoration: underline; + } + } + + .k-card-header-actions { + align-self: flex-start; + } + } + + // Card Drag Placeholder + .k-taskboard-drag-placeholder { + @include border-radius( $kendo-taskboard-drag-placeholder-border-radius ); + border-width: $kendo-taskboard-drag-placeholder-border-width; + border-style: solid; + position: relative; + } + +} + + +@mixin kendo-task-board--layout() { + @include kendo-task-board--layout-base(); +} diff --git a/packages/core/scss/components/taskboard/_theme.scss b/packages/core/scss/components/taskboard/_theme.scss new file mode 100644 index 00000000000..8008d8acc03 --- /dev/null +++ b/packages/core/scss/components/taskboard/_theme.scss @@ -0,0 +1,117 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-task-board--theme-base() { + + // TaskBoard + .k-taskboard { + @include fill( + $kendo-taskboard-text, + $kendo-taskboard-bg, + $kendo-taskboard-border + ); + } + + // Toolbar + .k-taskboard-toolbar { + @include fill( + $kendo-taskboard-toolbar-text, + $kendo-taskboard-toolbar-bg, + $kendo-taskboard-toolbar-border, + $kendo-taskboard-toolbar-gradient + ); + } + + // Columns + .k-taskboard-column { + @include fill( + $kendo-taskboard-column-text, + $kendo-taskboard-column-bg, + $kendo-taskboard-column-border + ); + } + .k-taskboard-column:focus, + .k-taskboard-column.k-focus { + @include fill( + $kendo-taskboard-column-focus-text, + $kendo-taskboard-column-focus-bg, + $kendo-taskboard-column-focus-border + ); + } + + .k-taskboard-column-header { + @include fill( $color: $kendo-taskboard-column-header-text ); + } + + // Preview/Edit Pane + .k-taskboard-pane { + @include fill ( + $kendo-taskboard-pane-text, + $kendo-taskboard-pane-bg, + $kendo-taskboard-pane-border + ); + } + + .k-taskboard-pane-header { + @include fill( $color: $kendo-taskboard-pane-header-text ); + } + + // Cards + .k-taskboard-card { + @include fill( + $kendo-taskboard-card-text, + $kendo-taskboard-card-bg, + $kendo-taskboard-card-border + ); + @include box-shadow( $kendo-taskboard-card-shadow ); + + .k-card-title { + @include fill( $color: $kendo-taskboard-card-header-text ); + + &:focus, + &.k-focus { + @include fill( $color: $kendo-taskboard-card-header-focus-text ); + } + + &:hover, + &.k-hover { + @include fill( $color: $kendo-taskboard-card-header-hover-text ); + } + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-taskboard-card-focus-shadow ); + @include fill( $border: $kendo-taskboard-card-focus-border ); + } + + &:hover, + &.k-hover { + @include fill( $border: $kendo-taskboard-card-hover-border ); + } + + &.k-selected { + @include fill( $border: $kendo-taskboard-card-selected-border ); + @include box-shadow( $kendo-taskboard-card-selected-shadow ); + } + + &.k-disabled { + @include disabled( $kendo-disabled-styling... ); + } + } + + // Card Drag Placeholder + .k-taskboard-drag-placeholder { + @include fill( + $bg: $kendo-taskboard-drag-placeholder-bg, + $border: $kendo-taskboard-drag-placeholder-border + ); + } + +} + + +@mixin kendo-task-board--theme() { + @include kendo-task-board--theme-base(); +} diff --git a/packages/core/scss/components/taskboard/_variables.scss b/packages/core/scss/components/taskboard/_variables.scss new file mode 100644 index 00000000000..93b6bfab316 --- /dev/null +++ b/packages/core/scss/components/taskboard/_variables.scss @@ -0,0 +1,245 @@ +// TaskBoard + +/// The spacing index of the TaskBoard. +/// @group taskboard +$kendo-taskboard-spacer: null !default; +/// The vertical padding of the TaskBoard. +/// @group taskboard +$kendo-taskboard-padding-y: null !default; +/// The horizontal of the TaskBoard. +/// @group taskboard +$kendo-taskboard-padding-x: null !default; +/// The font family of the TaskBoard. +/// @group taskboard +$kendo-taskboard-font-family: null !default; +/// The font size of the TaskBoard. +/// @group taskboard +$kendo-taskboard-font-size: null !default; +/// The line height of the TaskBoard. +/// @group taskboard +$kendo-taskboard-line-height: null !default; +/// The background color of the TaskBoard. +/// @group taskboard +$kendo-taskboard-bg: null !default; +/// The text color of the TaskBoard. +/// @group taskboard +$kendo-taskboard-text: null !default; +/// The border color of the TaskBoard. +/// @group taskboard +$kendo-taskboard-border: null !default; + +/// The vertical padding of the TaskBoard Toolbar. +/// @group taskboard +$kendo-taskboard-toolbar-padding-y: null !default; +/// The horizontal padding of the TaskBoard Toolbar. +/// @group taskboard +$kendo-taskboard-toolbar-padding-x: null !default; +/// The background color of the TaskBoard Toolbar. +/// @group taskboard +$kendo-taskboard-toolbar-bg: null !default; +/// The text color of the TaskBoard Toolbar. +/// @group taskboard +$kendo-taskboard-toolbar-text: null !default; +/// The border color of the TaskBoard Toolbar. +/// @group taskboard +$kendo-taskboard-toolbar-border: null !default; +/// The gradient of the TaskBoard Toolbar. +/// @group taskboard +$kendo-taskboard-toolbar-gradient: null !default; + +/// The vertical padding of the TaskBoard content. +/// @group taskboard +$kendo-taskboard-content-padding-y: null !default; +/// The horizontal padding of the TaskBoard content. +/// @group taskboard +$kendo-taskboard-content-padding-x: null !default; + +/// The vertical spacing of the TaskBoard column container. +/// @group taskboard +$kendo-taskboard-column-container-spacing-y: null !default; +/// The vertical padding of the TaskBoard column container. +/// @group taskboard +$kendo-taskboard-column-container-padding-y: null !default; +/// The horizontal padding of the TaskBoard column container. +/// @group taskboard +$kendo-taskboard-column-container-padding-x: null !default; +/// The spacing of the TaskBoard columns container. +/// @group taskboard +$kendo-taskboard-columns-container-gap: null !default; + +/// The default width of the TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-width: null !default; +/// The border width of the TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-border-width: null !default; +/// The border radius of the TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-border-radius: null !default; +/// The background color of the TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-bg: null !default; +/// The text color of the TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-text: null !default; +/// The border color of the TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-border: null !default; + +/// The background color of the focused TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-focus-bg: null !default; +/// The text color of the focused TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-focus-text: null !default; +/// The border color of the focused TaskBoard column. +/// @group taskboard +$kendo-taskboard-column-focus-border: null !default; + +/// The vertical padding of the TaskBoard column header. +/// @group taskboard +$kendo-taskboard-column-header-padding-y: null !default; +/// The horizontal padding of the TaskBoard column header. +/// @group taskboard +$kendo-taskboard-column-header-padding-x: null !default; +/// The spacing of the TaskBoard column header. +/// @group taskboard +$kendo-taskboard-column-header-gap: null !default; +/// The spacing of the TaskBoard column header actions. +/// @group taskboard +$kendo-taskboard-column-header-actions-gap: null !default; +/// The font weight of the TaskBoard column header. +/// @group taskboard +$kendo-taskboard-column-header-font-weight: null !default; +/// The text color of the TaskBoard column header. +/// @group taskboard +$kendo-taskboard-column-header-text: null !default; + +/// The vertical padding of the TaskBoard column Card wrapper. +/// @group taskboard +$kendo-taskboard-column-cards-padding-y: null !default; +/// The horizontal padding of the TaskBoard column Card wrapper. +/// @group taskboard +$kendo-taskboard-column-cards-padding-x: null !default; +/// The spacing of the TaskBoard column Card wrapper. +/// @group taskboard +$kendo-taskboard-column-cards-gap: null !default; + +/// The default width of the TaskBoard pane. +/// @group taskboard +$kendo-taskboard-pane-width: null !default; +/// The vertical padding of the TaskBoard pane. +/// @group taskboard +$kendo-taskboard-pane-padding-y: null !default; +/// The horizontal padding of the TaskBoard pane. +/// @group taskboard +$kendo-taskboard-pane-padding-x: null !default; +/// The border width of the TaskBoard pane. +/// @group taskboard +$kendo-taskboard-pane-border-width: null !default; +/// The background color of the TaskBoard pane. +/// @group taskboard +$kendo-taskboard-pane-bg: null !default; +/// The text color of the TaskBoard pane. +/// @group taskboard +$kendo-taskboard-pane-text: null !default; +/// The border color of the TaskBoard pane. +/// @group taskboard +$kendo-taskboard-pane-border: null !default; + +/// The vertical padding of the TaskBoard pane header. +/// @group taskboard +$kendo-taskboard-pane-header-padding-y: null !default; +/// The horizontal padding of the TaskBoard pane header. +/// @group taskboard +$kendo-taskboard-pane-header-padding-x: null !default; +/// The font weight of the TaskBoard pane header. +/// @group taskboard +$kendo-taskboard-pane-header-font-weight: null !default; +/// The text color of the TaskBoard pane header. +/// @group taskboard +$kendo-taskboard-pane-header-text: null !default; + +/// The vertical padding of the TaskBoard pane content. +/// @group taskboard +$kendo-taskboard-pane-content-padding-y: null !default; +/// The horizontal padding of the TaskBoard pane content. +/// @group taskboard +$kendo-taskboard-pane-content-padding-x: null !default; + +/// The vertical padding of the TaskBoard pane actions. +/// @group taskboard +$kendo-taskboard-pane-actions-padding-y: null !default; +/// The horizontal padding of the TaskBoard pane actions. +/// @group taskboard +$kendo-taskboard-pane-actions-padding-x: null !default; + +/// The vertical padding of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-padding-y: null !default; +/// The horizontal padding of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-padding-x: null !default; +/// The border width of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-border-width: null !default; +/// The border radius of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-border-radius: null !default; +/// The shadow of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-shadow: null !default; +/// The background color of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-bg: null !default; +/// The text color of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-text: null !default; +/// The border color of the TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-border: null !default; + +/// The border width of the TaskBoard Card category. +/// @group taskboard +$kendo-taskboard-card-category-border-width: null !default; + +/// The border color of the hovered TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-hover-border: null !default; + +/// The border color of the focused TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-focus-border: null !default; +/// The shadow of the focused TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-focus-shadow: null !default; + +/// The border of the selected TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-selected-border: null !default; +/// The shadow of the selected TaskBoard Card. +/// @group taskboard +$kendo-taskboard-card-selected-shadow: null !default; + +/// The text color of the TaskBoard Card header text. +/// @group taskboard +$kendo-taskboard-card-header-text: null !default; +/// The text color of the hovered TaskBoard Card header text. +/// @group taskboard +$kendo-taskboard-card-header-hover-text: null !default; +/// The text color of the focused TaskBoard Card header text. +/// @group taskboard +$kendo-taskboard-card-header-focus-text: null !default; + +/// The border width of the TaskBoard Card placeholder. +/// @group taskboard +$kendo-taskboard-drag-placeholder-border-width: null !default; +/// The border radius of the TaskBoard Card placeholder. +/// @group taskboard +$kendo-taskboard-drag-placeholder-border-radius: null !default; +/// The background color of the TaskBoard Card placeholder. +/// @group taskboard +$kendo-taskboard-drag-placeholder-bg: null !default; +/// The border color of the TaskBoard Card placeholder. +/// @group taskboard +$kendo-taskboard-drag-placeholder-border: null !default; diff --git a/packages/core/scss/components/textarea/_index.scss b/packages/core/scss/components/textarea/_index.scss new file mode 100644 index 00000000000..2cef59b1d99 --- /dev/null +++ b/packages/core/scss/components/textarea/_index.scss @@ -0,0 +1,27 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-textarea--styles() { + @include import-once( "textarea" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-textarea--layout(); + @include kendo-textarea--theme(); + @include kendo-utils--flex-grid--align-items(); + @include kendo-utils--flex-grid--flex-direction(); + @include kendo-utils--flex-grid--flex(); + @include kendo-utils--flex-grid--flex-wrap(); + @include kendo-utils--layout--overflow(); + @include kendo-utils--interactivity--resize(); + } +} diff --git a/packages/core/scss/components/textarea/_layout.scss b/packages/core/scss/components/textarea/_layout.scss new file mode 100644 index 00000000000..af17b749cb8 --- /dev/null +++ b/packages/core/scss/components/textarea/_layout.scss @@ -0,0 +1,13 @@ +@mixin kendo-textarea--layout-base() { + + // Textarea + .k-textarea:has(.k-input-inner[style*="width"]) { + width: max-content; + } + +} + + +@mixin kendo-textarea--layout() { + @include kendo-textarea--layout-base(); +} diff --git a/packages/core/scss/components/textarea/_theme.scss b/packages/core/scss/components/textarea/_theme.scss new file mode 100644 index 00000000000..68116ea1d5e --- /dev/null +++ b/packages/core/scss/components/textarea/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-textarea--theme-base() { + + // Textarea + .k-textarea {} + +} + + +@mixin kendo-textarea--theme() { + @include kendo-textarea--theme-base(); +} diff --git a/packages/core/scss/components/textarea/_variables.scss b/packages/core/scss/components/textarea/_variables.scss new file mode 100644 index 00000000000..031970cd20c --- /dev/null +++ b/packages/core/scss/components/textarea/_variables.scss @@ -0,0 +1 @@ +// Textarea diff --git a/packages/core/scss/components/textbox/_index.scss b/packages/core/scss/components/textbox/_index.scss new file mode 100644 index 00000000000..0313b1586e9 --- /dev/null +++ b/packages/core/scss/components/textbox/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../floating-label/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-textbox--styles() { + @include import-once( "textbox" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-floating-label--styles(); + @include kendo-textbox--layout(); + @include kendo-textbox--theme(); + } +} diff --git a/packages/core/scss/components/textbox/_layout.scss b/packages/core/scss/components/textbox/_layout.scss new file mode 100644 index 00000000000..76408cebf56 --- /dev/null +++ b/packages/core/scss/components/textbox/_layout.scss @@ -0,0 +1,11 @@ +@mixin kendo-textbox--layout-base() { + + // Textbox + .k-textbox {} + +} + + +@mixin kendo-textbox--layout() { + @include kendo-textbox--layout-base(); +} diff --git a/packages/core/scss/components/textbox/_theme.scss b/packages/core/scss/components/textbox/_theme.scss new file mode 100644 index 00000000000..a16a77579d0 --- /dev/null +++ b/packages/core/scss/components/textbox/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-textbox--theme-base() { + + // Textbox + .k-textbox {} + +} + + +@mixin kendo-textbox--theme() { + @include kendo-textbox--theme-base(); +} diff --git a/packages/core/scss/components/textbox/_variables.scss b/packages/core/scss/components/textbox/_variables.scss new file mode 100644 index 00000000000..924406f39bd --- /dev/null +++ b/packages/core/scss/components/textbox/_variables.scss @@ -0,0 +1 @@ +// Textbox diff --git a/packages/core/scss/components/tilelayout/_index.scss b/packages/core/scss/components/tilelayout/_index.scss new file mode 100644 index 00000000000..fd5180d6435 --- /dev/null +++ b/packages/core/scss/components/tilelayout/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../card/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-tile-layout--styles() { + @include import-once( "tile-layout" ) { + @include core-styles(); + @include kendo-card--styles(); + @include kendo-icon--styles(); + @include kendo-tile-layout--layout(); + @include kendo-tile-layout--theme(); + @include kendo-utils--interactivity--resize(); + @include kendo-utils--layout--position(); + @include kendo-utils--flex-grid--grid-auto-flow(); + } +} diff --git a/packages/core/scss/components/tilelayout/_layout.scss b/packages/core/scss/components/tilelayout/_layout.scss new file mode 100644 index 00000000000..8a04e27536e --- /dev/null +++ b/packages/core/scss/components/tilelayout/_layout.scss @@ -0,0 +1,53 @@ +@use "../../color-system/_constants.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-tile-layout--layout-base() { + + .k-tilelayout { + border-width: $kendo-tile-layout-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + display: grid; + position: relative; + padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + .k-card { + @include box-shadow( none ); + border-width: $kendo-tile-layout-card-border-width; + } + } + + .k-tilelayout-item { + position: relative; + z-index: 0; + } + + .k-layout-item-hint { + @include border-radius( $kendo-tile-layout-hint-border-radius ); + border-width: $kendo-tile-layout-hint-border-width; + border-style: solid; + position: relative; + + &.k-layout-item-hint-resize { + z-index: 3; + } + } + + .k-tilelayout-item-header.k-card-header { + z-index: 0; + } + + .k-tilelayout-item-body { + min-height: 0; + } + +} + + +@mixin kendo-tile-layout--layout() { + @include kendo-tile-layout--layout-base(); +} diff --git a/packages/core/scss/components/tilelayout/_theme.scss b/packages/core/scss/components/tilelayout/_theme.scss new file mode 100644 index 00000000000..6d32f822dca --- /dev/null +++ b/packages/core/scss/components/tilelayout/_theme.scss @@ -0,0 +1,29 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-tile-layout--theme-base() { + + .k-tilelayout { + @include fill( + $bg: $kendo-tile-layout-bg + ); + } + + .k-tilelayout-item:focus, + .k-tilelayout-item.k-focus { + @include focus-indicator($kendo-tile-layout-card-focus-shadow); + } + + .k-layout-item-hint { + @include fill( + $bg: $kendo-tile-layout-hint-bg, + $border: $kendo-tile-layout-hint-border + ); + } + +} + + +@mixin kendo-tile-layout--theme() { + @include kendo-tile-layout--theme-base(); +} diff --git a/packages/core/scss/components/tilelayout/_variables.scss b/packages/core/scss/components/tilelayout/_variables.scss new file mode 100644 index 00000000000..6373aed5b97 --- /dev/null +++ b/packages/core/scss/components/tilelayout/_variables.scss @@ -0,0 +1,39 @@ +// TileLayout + +/// The width of the border around the TileLayout. +/// @group tile-layout +$kendo-tile-layout-border-width: null !default; +/// The background color of the TileLayout. +/// @group tile-layout +$kendo-tile-layout-bg: null !default; + +/// The horizontal padding of the TileLayout. +/// @group tile-layout +$kendo-tile-layout-padding-x: null !default; + +/// The vertical padding of the TileLayout +/// @group tile-layout +$kendo-tile-layout-padding-y: null !default; + +/// The width of the border around the TileLayout card. +/// @group tile-layout +$kendo-tile-layout-card-border-width: null !default; +/// The focus box shadow of the TileLayout card. +/// @group tile-layout +$kendo-tile-layout-card-focus-shadow: null !default; + +/// The width of the border around the TileLayout hint. +/// @group tile-layout +$kendo-tile-layout-hint-border-width: null !default; +/// The radius of the border around the TileLayout hint. +/// @group tile-layout +$kendo-tile-layout-hint-border-radius: null !default; +/// The color of the border around the TileLayout hint. +/// @group tile-layout +$kendo-tile-layout-hint-border: null !default; +/// The background color of the TileLayout hint. +/// @group tile-layout +$kendo-tile-layout-hint-bg: null !default; + + + diff --git a/packages/core/scss/components/time-marker/_index.scss b/packages/core/scss/components/time-marker/_index.scss new file mode 100644 index 00000000000..f94f90a9107 --- /dev/null +++ b/packages/core/scss/components/time-marker/_index.scss @@ -0,0 +1,16 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-time-marker--styles() { + @include import-once( "time-marker" ) { + @include core-styles(); + @include kendo-time-marker--layout(); + @include kendo-time-marker--theme(); + } +} diff --git a/packages/core/scss/components/time-marker/_layout.scss b/packages/core/scss/components/time-marker/_layout.scss new file mode 100644 index 00000000000..09ce0267f07 --- /dev/null +++ b/packages/core/scss/components/time-marker/_layout.scss @@ -0,0 +1,23 @@ +@use "./_variables.scss" as *; + +@mixin kendo-time-marker--layout-base() { + + .k-current-time { + width: $kendo-current-time-width; + position: absolute; + + &.k-current-time-arrow-left, + &.k-current-time-arrow-right, + &.k-current-time-arrow-down { + width: 0; + height: 0; + background: transparent; + border: 4px solid transparent; + } + } + +} + +@mixin kendo-time-marker--layout() { + @include kendo-time-marker--layout-base(); +} diff --git a/packages/core/scss/components/time-marker/_theme.scss b/packages/core/scss/components/time-marker/_theme.scss new file mode 100644 index 00000000000..667177fca6f --- /dev/null +++ b/packages/core/scss/components/time-marker/_theme.scss @@ -0,0 +1,26 @@ +@use "./_variables.scss" as *; + +@mixin kendo-time-marker--theme-base() { + + .k-current-time { + background: $kendo-current-time-color; + + &.k-current-time-arrow-left { + border-right-color: $kendo-current-time-color; + } + + &.k-current-time-arrow-right { + border-left-color: $kendo-current-time-color; + } + + &.k-current-time-arrow-down { + border-top-color: $kendo-current-time-color; + } + } + +} + + +@mixin kendo-time-marker--theme() { + @include kendo-time-marker--theme-base(); +} diff --git a/packages/core/scss/components/time-marker/_variables.scss b/packages/core/scss/components/time-marker/_variables.scss new file mode 100644 index 00000000000..a9f095e22f9 --- /dev/null +++ b/packages/core/scss/components/time-marker/_variables.scss @@ -0,0 +1,6 @@ +/// The border width of the current time indicator. +/// @group time-marker +$kendo-current-time-width: null !default; +/// The color of the current time indicator. +/// @group time-marker +$kendo-current-time-color: null !default; diff --git a/packages/core/scss/components/timedurationpicker/_index.scss b/packages/core/scss/components/timedurationpicker/_index.scss new file mode 100644 index 00000000000..2c2a98336c7 --- /dev/null +++ b/packages/core/scss/components/timedurationpicker/_index.scss @@ -0,0 +1,28 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; +@use "../timeselector/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-time-duration-picker--styles() { + @include import-once( "time-duration-picker" ) { + @include core-styles(); + @include kendo-icon--styles(); + @include kendo-button--styles(); + @include kendo-input--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-time-selector--styles(); + @include kendo-time-duration-picker--layout(); + @include kendo-time-duration-picker--theme(); + } +} diff --git a/packages/core/scss/components/timedurationpicker/_layout.scss b/packages/core/scss/components/timedurationpicker/_layout.scss new file mode 100644 index 00000000000..f417e86c4f5 --- /dev/null +++ b/packages/core/scss/components/timedurationpicker/_layout.scss @@ -0,0 +1,17 @@ +@mixin kendo-time-duration-picker--layout-base() { + + // Time duration picker + .k-time-duration-picker {} + + + // Legacy aliases + .k-timedurationpicker { + @extend .k-time-duration-picker; + } + +} + + +@mixin kendo-time-duration-picker--layout() { + @include kendo-time-duration-picker--layout-base(); +} diff --git a/packages/core/scss/components/timedurationpicker/_theme.scss b/packages/core/scss/components/timedurationpicker/_theme.scss new file mode 100644 index 00000000000..65191df4ca8 --- /dev/null +++ b/packages/core/scss/components/timedurationpicker/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-time-duration-picker--theme-base() { + + // Time duration picker + .k-time-duration-picker {} + +} + + +@mixin kendo-time-duration-picker--theme() { + @include kendo-time-duration-picker--theme-base(); +} diff --git a/packages/core/scss/components/timedurationpicker/_variables.scss b/packages/core/scss/components/timedurationpicker/_variables.scss new file mode 100644 index 00000000000..bf919fb5ee2 --- /dev/null +++ b/packages/core/scss/components/timedurationpicker/_variables.scss @@ -0,0 +1 @@ +// Timedurationpicker diff --git a/packages/core/scss/components/timeline/_index.scss b/packages/core/scss/components/timeline/_index.scss new file mode 100644 index 00000000000..6440fc10de8 --- /dev/null +++ b/packages/core/scss/components/timeline/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../card/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-timeline--styles() { + @include import-once( "timeline" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-card--styles(); + @include kendo-icon--styles(); + @include kendo-timeline--layout(); + @include kendo-timeline--theme(); + } +} diff --git a/packages/core/scss/components/timeline/_layout.scss b/packages/core/scss/components/timeline/_layout.scss new file mode 100644 index 00000000000..26f7cc8ea82 --- /dev/null +++ b/packages/core/scss/components/timeline/_layout.scss @@ -0,0 +1,451 @@ +@use "sass:math"; +@use "../../color-system/_constants.scss" as *; +@use "../../border-radii/index.import.scss" as *; +@use "../icons/_variables.scss" as *; +@use "./variables.scss" as *; +@use "../card/_variables.scss" as *; + +@mixin kendo-timeline--layout-base() { + + .k-timeline { + box-sizing: border-box; + outline: 0; + font-family: $kendo-timeline-font-family; + font-size: $kendo-timeline-font-size; + line-height: $kendo-timeline-line-height; + display: block; + background-color: transparent; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after, + &::before, + &::after { + box-sizing: border-box; + } + + ul { + margin: 0; + padding: 0; + + li { + list-style-type: none; + } + } + + .k-timeline-flag { + display: inline-block; + text-align: center; + padding-block: $kendo-timeline-flag-padding-y; + padding-inline: $kendo-timeline-flag-padding-x; + border-radius: k-border-radius(md); + line-height: $kendo-timeline-flag-line-height; + min-width: $kendo-timeline-flag-min-width; + max-width: $kendo-timeline-flag-max-width; + position: relative; + z-index: 1; + } + + .k-timeline-circle { + width: $kendo-timeline-circle-width; + height: $kendo-timeline-circle-height; + border-radius: 50%; + flex-shrink: 0; + position: relative; + z-index: 1; + } + + &.k-timeline-dates-hidden { + .k-timeline-date { + display: none; + } + } + + &.k-timeline-collapsible { + .k-card-header { + cursor: pointer; + } + + .k-event-collapse { + display: flex; + } + } + } + + .k-timeline-card { + .k-card { + position: relative; + overflow: visible; + + .k-card-header { + overflow: visible; + border-bottom: 0; + } + + .k-card-header + .k-card-body { + padding-top: 0; + } + + .k-card-body { + overflow-y: auto; + + // Scrollbar styles for Mozilla + scrollbar-width: thin; + + // Scrollbar styles for Chrome, Safari and Opera + &::-webkit-scrollbar { + width: 5px; + } + + &::-webkit-scrollbar-thumb { + border-radius: k-border-radius(md); + } + } + } + + .k-timeline-card-callout { + &.k-callout-w, + &.k-callout-e { + top: $kendo-timeline-track-event-offset; + } + } + } + + .k-timeline-vertical, + .k-timeline-horizontal { + padding-block: 0; + padding-inline: $kendo-timeline-spacing-x; + margin-block: $kendo-timeline-spacing-y; + margin-inline: 0; + width: 100%; + position: relative; + border: 0; + } + + .k-timeline-vertical, + .k-timeline-horizontal .k-timeline-track-wrap { + &::after { + content: ""; + position: absolute; + top: 0; + border-width: $kendo-timeline-track-border-width; + border-style: solid; + } + } + + .k-timeline-vertical { + padding-left: $kendo-timeline-vertical-padding-with-dates-calc; + + &.k-timeline-dates-hidden { + padding-left: $kendo-timeline-vertical-padding-calc; + } + + &::after { + height: 100%; + width: $kendo-timeline-track-size; + transform: translateX(-50%); + border-radius: k-border-radius(lg); + } + + .k-timeline-flag-wrap { + display: flex; + align-items: center; + + &:first-child { + padding-top: $kendo-timeline-spacing-y; + } + } + + .k-timeline-flag { + transform: translateX(-50%); + } + + .k-timeline-date-wrap { + position: absolute; + padding-right: $kendo-timeline-items-padding; + margin-top: $kendo-timeline-track-event-offset; + transform: translate(-100%, -50%); + text-align: end; + } + + .k-timeline-event { + display: flex; + align-items: flex-start; + padding-block: $kendo-timeline-spacing-y; + padding-inline: 0; + } + + .k-timeline-card { + padding-left: $kendo-timeline-items-padding; + + .k-card { + margin-left: $kendo-timeline-items-padding; + min-height: $kendo-timeline-event-min-height-calc; + width: $kendo-timeline-event-width; + max-width: 100%; + + .k-card-header { + border-radius: $kendo-card-border-radius; // In vertical collapsed mode there shold be a bottom border radius + } + + .k-card-title { + display: flex; + justify-content: space-between; + + .k-event-title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + } + } + + .k-event-collapse { + margin-block: calc( #{$kendo-icon-spacing} * -1 ); + margin-inline: 0; + transform: rotate(90deg); + transition: transform .2s ease-in-out; + } + + &.k-collapsed { + .k-card-body, + .k-card-actions { + display: none; + } + + .k-event-collapse { + transform: rotate(0deg); + } + } + + } + + .k-timeline-circle { + margin-top: $kendo-timeline-track-event-offset; + transform: translate(-50%, -50%); + margin-right: - math.div( $kendo-timeline-circle-width, 2 ); + } + + &.k-timeline-alternating { + padding-left: $kendo-timeline-spacing-x; + + &::after { + left: 50%; + } + + .k-timeline-flag-wrap { + justify-content: center; + } + + .k-timeline-flag { + transform: translateX(0); + } + + .k-timeline-event { + justify-content: space-between; + + &.k-reverse { + flex-direction: row-reverse; + + .k-timeline-date-wrap { + text-align: start; + padding-right: 0; + padding-left: $kendo-timeline-items-padding; + } + + .k-timeline-card { + padding-left: 0; + padding-right: $kendo-timeline-items-padding; + + .k-card { + margin-right: $kendo-timeline-items-padding; + margin-left: auto; + } + } + } + } + + .k-timeline-card, + .k-timeline-date-wrap { + flex-basis: 50%; + min-width: 0; + } + + .k-timeline-date-wrap { + position: static; + transform: translateY(-50%); + } + + .k-timeline-circle { + transform: translateY(-50%); + margin-right: 0; + } + } + } + + .k-timeline-horizontal { + + .k-timeline-track-item { + flex: 1 0 20%; // 20% are default, this will be calculated when rendered + display: flex; + align-items: center; + justify-content: flex-start; + position: relative; + flex-direction: column; + + &:hover { + cursor: pointer; + } + + &.k-timeline-flag-wrap:hover { + cursor: default; + } + } + + .k-timeline-date-wrap { + margin-top: auto; + margin-bottom: $kendo-timeline-date-margin-bottom; + } + + .k-timeline-card { + height: 100%; + } + + .k-card { + max-height: 100%; + } + + .k-timeline-events-list { + overflow-x: hidden; + padding-top: $kendo-timeline-track-margin-bottom; + + .k-timeline-scrollable-wrap { + position: relative; + height: $kendo-timeline-event-height; + + .k-timeline-event { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + } + + .k-timeline-track-wrap { + position: relative; + padding: calc( #{$kendo-timeline-track-arrow-height} / 2 ) 0; + + &::after { + top: auto; + bottom: $kendo-timeline-track-bottom-calc; + left: $kendo-timeline-track-start-calc; + right: $kendo-timeline-track-end-calc; + transform: translateY(-50%); + height: $kendo-timeline-track-size; + } + + .k-timeline-track { + overflow: hidden; + margin-block: 0; + margin-inline: $kendo-timeline-track-arrow-width; + position: relative; + z-index: 2; + + .k-timeline-scrollable-wrap { + transition: transform 1s ease-in-out; + } + } + + .k-timeline-flag { + margin-bottom: $kendo-timeline-flag-margin-bottom-calc; + position: relative; + min-width: $kendo-timeline-horizontal-flag-min-width; + + &::after { + content: ""; + width: $kendo-timeline-flag-callout-width; + height: $kendo-timeline-flag-callout-height; + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 50%) rotate(45deg); + } + } + } + + .k-timeline-scrollable-wrap { + padding-bottom: $kendo-timeline-track-wrap-padding-bottom; + display: flex; + outline: 0; + } + } + + .k-timeline-arrow { + width: $kendo-timeline-track-arrow-width; + height: $kendo-timeline-track-arrow-height; + border-radius: 50%; + position: absolute; + bottom: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width}); + z-index: 3; + display: flex; + align-items: center; + justify-content: center; + } + + .k-timeline-arrow-left { + left: 0; + } + + .k-timeline-arrow-right { + right: 0; + } + + .k-timeline-mobile { + padding-block: 0; + padding-inline: $kendo-timeline-mobile-spacing-x; + margin-block: $kendo-timeline-mobile-spacing-y; + margin-inline: 0; + + .k-timeline-flag { + max-width: $kendo-timeline-mobile-flag-max-width; + } + + &.k-timeline-horizontal { + .k-timeline-flag-wrap { + display: none; + } + } + + &.k-timeline-vertical { + padding-left: $kendo-timeline-mobile-vertical-padding-with-dates-calc; + + &.k-timeline-dates-hidden { + padding-left: $kendo-timeline-mobile-vertical-padding-calc; + } + + &.k-timeline-alternating { + padding-left: $kendo-timeline-mobile-spacing-x; + } + + .k-timeline-card { + width: 100%; + + + .k-card { + width: auto; + } + } + } + } + +} + + +@mixin kendo-timeline--layout() { + @include kendo-timeline--layout-base(); +} diff --git a/packages/core/scss/components/timeline/_theme.scss b/packages/core/scss/components/timeline/_theme.scss new file mode 100644 index 00000000000..18725927794 --- /dev/null +++ b/packages/core/scss/components/timeline/_theme.scss @@ -0,0 +1,78 @@ +@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../card/_variables.scss" as *; + +@mixin kendo-timeline--theme-base() { + + .k-timeline { + .k-timeline-flag { + color: $kendo-timeline-flag-text; + background-color: $kendo-timeline-flag-bg; + } + + .k-timeline-circle { + background-color: $kendo-timeline-circle-bg; + } + + .k-timeline-card { + .k-card-header { + background-color: $kendo-card-bg; + color: $kendo-card-text; + } + + .k-card-body { + + // Scrollbar styles for Mozilla + scrollbar-color: $kendo-card-border $kendo-card-bg; + + // Scrollbar styles for Chrome, Safari and Opera + &::-webkit-scrollbar-track { + background: $kendo-card-bg; + } + + &::-webkit-scrollbar-thumb { + background: $kendo-card-border; + } + + &::-webkit-scrollbar-thumb:hover { + background: $kendo-hover-border; + } + } + } + + // TODO: remove + .k-timeline-date { + color: $kendo-body-text; + } + + .k-timeline-arrow.k-disabled { + opacity: 1; // The arrow button in disabled mode should have a solid background + color: $kendo-timeline-track-arrow-disabled-text; + background-color: $kendo-timeline-track-arrow-disabled-bg; + border-color: $kendo-timeline-track-arrow-disabled-border; + } + } + + .k-timeline-vertical, + .k-timeline-horizontal .k-timeline-track-wrap { + &::after { + background-color: $kendo-timeline-track-bg; + border-color: $kendo-timeline-track-border-color; + } + } + + .k-timeline-horizontal .k-timeline-flag::after { + background-color: $kendo-timeline-flag-bg; + } + + .k-timeline-track-item.k-focus .k-timeline-circle { + @include focus-indicator( $kendo-timeline-track-item-focus-shadow ); + } + +} + + +@mixin kendo-timeline--theme() { + @include kendo-timeline--theme-base(); +} diff --git a/packages/core/scss/components/timeline/_variables.scss b/packages/core/scss/components/timeline/_variables.scss new file mode 100644 index 00000000000..bebc3728df2 --- /dev/null +++ b/packages/core/scss/components/timeline/_variables.scss @@ -0,0 +1,167 @@ +// Timeline + +/// The horizontal spacing of the Timeline. +/// @group timeline +$kendo-timeline-spacing-x: null !default; +/// The vertical spacing of the Timeline. +/// @group timeline +$kendo-timeline-spacing-y: null !default; +/// The padding between the Timeline's track items. +/// @group timeline +$kendo-timeline-items-padding: null !default; + +/// The font family of the Timeline. +/// @group timeline +$kendo-timeline-font-family: null !default; +/// The font size of the Timeline. +/// @group timeline +$kendo-timeline-font-size: null !default; +/// The line height of the Timeline. +/// @group timeline +$kendo-timeline-line-height: null !default; + +/// The horizontal spacing of the mobile Timeline. +/// @group timeline +$kendo-timeline-mobile-spacing-x: null !default; +/// The vertical spacing of the mobile Timeline. +/// @group timeline +$kendo-timeline-mobile-spacing-y: null !default; + +/// The width of the Timeline track arrow. +/// @group timeline +$kendo-timeline-track-arrow-width: null !default; +/// The height of the Timeline track arrow. +/// @group timeline +$kendo-timeline-track-arrow-height: null !default; + +/// The background color of the disabled Timeline track arrow. +/// @group timeline +$kendo-timeline-track-arrow-disabled-bg: null !default; +/// The text color of the disabled Timeline track arrow. +/// @group timeline +$kendo-timeline-track-arrow-disabled-text: null !default; +/// The border color of the disabled Timeline track arrow. +/// @group timeline +$kendo-timeline-track-arrow-disabled-border: null !default; + +/// The size of the Timeline track. +/// @group timeline +$kendo-timeline-track-size: null !default; +/// The bottom padding of the Timeline's track wrapper. +/// @group timeline +$kendo-timeline-track-wrap-padding-bottom: null !default; +/// The border width of the Timeline track. +/// @group timeline +$kendo-timeline-track-border-width: null !default; +/// The bottom margin of the Timeline track. +/// @group timeline +$kendo-timeline-track-margin-bottom: null !default; +/// The bottom offset of the Timeline track. +/// @group timeline +$kendo-timeline-track-bottom-calc: null !default; +/// The left offset of the Timeline track. +/// @group timeline +$kendo-timeline-track-start-calc: null !default; +/// The right offset of the Timeline track. +/// @group timeline +$kendo-timeline-track-end-calc: null !default; +/// The background color of the Timeline track. +/// @group timeline +$kendo-timeline-track-bg: null !default; +/// The border color of the Timeline track. +/// @group timeline +$kendo-timeline-track-border-color: null !default; + +/// The shadow of the Timeline's focused track items. +/// @group timeline +$kendo-timeline-track-item-focus-shadow: null !default; + +/// The offset of the Timeline track event. +/// @group timeline +$kendo-timeline-track-event-offset: null !default; + +/// The horizontal padding of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-padding-x: null !default; +/// The vertical padding of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-padding-y: null !default; +/// The line height of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-line-height: null !default; +/// The minimum width of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-min-width: null !default; +/// The maximum width of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-max-width: null !default; +/// The maximum width of the mobile Timeline flag. +/// @group timeline +$kendo-timeline-mobile-flag-max-width: null !default; +/// The minimum width of the horizontal Timeline flag. +/// @group timeline +$kendo-timeline-horizontal-flag-min-width: null !default; +/// The background color of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-bg: null !default; +/// The text color of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-text: null !default; + +/// The width of the Timeline's flag callout. +/// @group timeline +$kendo-timeline-flag-callout-width: null !default; +/// The height of the Timeline's flag callout. +/// @group timeline +$kendo-timeline-flag-callout-height: null !default; + +/// The bottom offset of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-offset-bottom: null !default; +/// The bottom margin of the Timeline flag. +/// @group timeline +$kendo-timeline-flag-margin-bottom-calc: null !default; + +/// The width of the Timeline date. +/// @group timeline +$kendo-timeline-date-width: null !default; +/// The bottom margin of the Timeline date. +/// @group timeline +$kendo-timeline-date-margin-bottom: null !default; + +/// The padding of the vertical Timeline. +/// @group timeline +$kendo-timeline-vertical-padding-calc: null !default; +/// The padding of the vertical Timeline date. +/// @group timeline +$kendo-timeline-vertical-padding-with-dates-calc: null !default; +/// The padding of the vertical mobile Timeline. +/// @group timeline +$kendo-timeline-mobile-vertical-padding-calc: null !default; +/// The padding of the vertical mobile Timeline date. +/// @group timeline +$kendo-timeline-mobile-vertical-padding-with-dates-calc: null !default; + +/// The width of the Timeline circle. +/// @group timeline +$kendo-timeline-circle-width: null !default; +/// The height of the Timeline circle. +/// @group timeline +$kendo-timeline-circle-height: null !default; +/// The background color of the Timeline circle. +/// @group timeline +$kendo-timeline-circle-bg: null !default; + +/// The horizontal padding of the Timeline collapse arrow. +/// @group timeline +$kendo-timeline-collapse-arrow-padding-x: null !default; + +/// The width of the Timeline event. +/// @group timeline +$kendo-timeline-event-width: null !default; +/// The height of the Timeline event. +/// @group timeline +$kendo-timeline-event-height: null !default; +/// The minimum height of the Timeline event. +/// @group timeline +$kendo-timeline-event-min-height-calc: null !default; diff --git a/packages/core/scss/components/timepicker/_index.scss b/packages/core/scss/components/timepicker/_index.scss new file mode 100644 index 00000000000..986ae7d4942 --- /dev/null +++ b/packages/core/scss/components/timepicker/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../input/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../list/_index.scss" as *; +@use "../timeselector/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-time-picker--styles() { + @include import-once( "time-picker" ) { + @include core-styles(); + @include kendo-input--styles(); + @include kendo-button--styles(); + @include kendo-popup--styles(); + @include kendo-list--styles(); + @include kendo-time-selector--styles(); + @include kendo-time-picker--layout(); + @include kendo-time-picker--theme(); + } +} diff --git a/packages/core/scss/components/timepicker/_layout.scss b/packages/core/scss/components/timepicker/_layout.scss new file mode 100644 index 00000000000..6a60eca9611 --- /dev/null +++ b/packages/core/scss/components/timepicker/_layout.scss @@ -0,0 +1,17 @@ +@mixin kendo-time-picker--layout-base() { + + // Time picker + .k-time-picker {} + + + // Legacy aliases + .k-timepicker { + @extend .k-time-picker !optional; + } + +} + + +@mixin kendo-time-picker--layout() { + @include kendo-time-picker--layout-base(); +} diff --git a/packages/core/scss/components/timepicker/_theme.scss b/packages/core/scss/components/timepicker/_theme.scss new file mode 100644 index 00000000000..995aad27aea --- /dev/null +++ b/packages/core/scss/components/timepicker/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-time-picker--theme-base() { + + // Time picker + .k-time-picker {} + +} + + +@mixin kendo-time-picker--theme() { + @include kendo-time-picker--theme-base(); +} diff --git a/packages/core/scss/components/timepicker/_variables.scss b/packages/core/scss/components/timepicker/_variables.scss new file mode 100644 index 00000000000..730536c554b --- /dev/null +++ b/packages/core/scss/components/timepicker/_variables.scss @@ -0,0 +1 @@ +// Time picker diff --git a/packages/core/scss/components/timeselector/_index.scss b/packages/core/scss/components/timeselector/_index.scss new file mode 100644 index 00000000000..16e58bd3c0f --- /dev/null +++ b/packages/core/scss/components/timeselector/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; +@use "../list/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-time-selector--styles() { + @include import-once( "time-selector" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-action-buttons--styles(); + @include kendo-list--styles(); + @include kendo-time-selector--layout(); + @include kendo-time-selector--theme(); + } +} diff --git a/packages/core/scss/components/timeselector/_layout.scss b/packages/core/scss/components/timeselector/_layout.scss new file mode 100644 index 00000000000..839a08123fc --- /dev/null +++ b/packages/core/scss/components/timeselector/_layout.scss @@ -0,0 +1,266 @@ +@use "sass:map"; +@use "sass:list"; +@use "../../color-system/_constants.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../button/_variables.scss" as *; + +@mixin kendo-time-selector--layout-base() { + + // Time selector + .k-timeselector { + border-width: $kendo-time-selector-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-time-selector-font-family; + font-size: $kendo-time-selector-font-size; + line-height: $kendo-time-selector-line-height; + position: relative; + overflow: hidden; + display: flex; + flex-flow: column nowrap; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + } + + .k-popup > .k-timeselector { + border-width: 0; + } + + // Time selector header + .k-time-header, + .k-time-selector-header { + padding-block: $kendo-time-selector-header-padding-y; + padding-inline: $kendo-time-selector-header-padding-x; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + flex: 0 0 auto; + + .k-title, + .k-time-selector-header-title { + padding-block: $kendo-button-padding-y; + padding-inline: $kendo-button-padding-x; + font-weight: bold; + display: inline-block; + } + + .k-time-now { + border-width: 0; + line-height: inherit; + cursor: pointer; + } + } + + // Fast selection + .k-actions.k-time-fast-selection { + margin-top: 0; + } + + + // Time selector footer + // .k-time-footer {} + // .k-time-selector-footer {} + + + // Time list container + .k-time-list-container { + display: flex; + position: relative; + flex: 1 1 auto; + overflow: hidden; + } + + + // Time list highlight + .k-time-highlight, + .k-time-list-highlight { + width: 100%; + height: $kendo-time-list-highlight-height; + border-width: $kendo-time-list-highlight-border-width; + border-style: solid; + box-sizing: border-box; + position: absolute; + top: calc( 50% + #{list.slash( $kendo-time-list-title-height, 2 )}); + left: 0; + right: 0; + transform: translateY(-50%); + z-index: 1; + } + + + // Time list wrapper + .k-time-list-wrapper { + min-width: $kendo-time-list-width; + height: $kendo-time-list-height; + box-sizing: content-box; + display: inline-flex; + flex-flow: column nowrap; + align-items: stretch; + overflow: hidden; + position: relative; + text-align: center; + flex: 1 1 auto; + + .k-title { + font-size: $kendo-time-list-title-font-size; + line-height: $kendo-time-list-title-line-height; + font-weight: bold; + text-align: center; + text-transform: capitalize; + display: block; + } + + &.k-focus { + &::before, + &::after { + display: block; + content: "\200b"; + position: absolute; + width: 100%; + left: 0; + pointer-events: none; + height: calc( 50% - #{list.slash( $kendo-time-list-highlight-height, 2 )} ); + box-sizing: border-box; + border-width: 0; + border-style: solid; + } + + &::before { + top: $kendo-time-list-title-height; + } + + &::after { + bottom: 0; + } + } + } + + + // Time list + .k-time-list { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + flex: 1; + position: relative; + z-index: 1; + outline: 0; + overflow: hidden; + + &::before, + &::after { + display: block; + position: absolute; + content: "\200b"; + height: 0; + line-height: 0; + z-index: 1; + width: 200%; + left: -50%; + } + + &::before { top: 0; } + &::after { bottom: 0; } + } + + + // Time list content + .k-time-container, + .k-time-list-content { + position: relative; + flex: 1 1 auto; + display: block; + overflow-x: hidden; + overflow-y: scroll; + + @include hide-scrollbar("right"); + + > ul { + height: auto; + width: $kendo-time-list-width; + margin: auto; + } + + .k-scrollable-placeholder { + position: absolute; + width: 1px; + top: 0; + right: 0; + } + } + + + // Time list item + .k-time-list-item, + .k-time-list .k-item { + padding-block: $kendo-time-list-item-padding-y; + padding-inline: $kendo-time-list-item-padding-x; + } + + + // Time separator + .k-time-separator { + width: 0; + height: $kendo-time-list-highlight-height; + align-self: center; + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + z-index: 11; + top: calc( #{list.slash( $kendo-time-list-title-height, 2 )} ); + } + + + // Time selector sizes + @each $size, $size-props in $kendo-time-selector-sizes { + $_font-size: map.get( $size-props, font-size ); + $_line-height: map.get( $size-props, line-height ); + $_list-item-padding-x: map.get( $size-props, list-item-padding-x ); + $_list-item-padding-y: map.get( $size-props, list-item-padding-y ); + $_highlight-height: calc( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) ); + + + .k-timeselector-#{$size} { + font-size: $_font-size; + line-height: $_line-height; + + .k-time-highlight, + .k-time-list-highlight { + height: $_highlight-height; + } + + .k-time-separator { + height: $_highlight-height; + } + + .k-time-list-item, + .k-time-list .k-item { + padding-block: $_list-item-padding-y; + padding-inline: $_list-item-padding-x; + } + } + } + + + + .k-rtl, + [dir="rtl"] { + + // Time list content + .k-time-container, + .k-time-list-content { + @include hide-scrollbar("left"); + } + } + +} + + +@mixin kendo-time-selector--layout() { + @include kendo-time-selector--layout-base(); +} diff --git a/packages/core/scss/components/timeselector/_theme.scss b/packages/core/scss/components/timeselector/_theme.scss new file mode 100644 index 00000000000..4b39b02405b --- /dev/null +++ b/packages/core/scss/components/timeselector/_theme.scss @@ -0,0 +1,82 @@ +@use "sass:math"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-time-selector--theme-base() { + + // Time selector + .k-timeselector { + @include fill( + $kendo-time-selector-text, + $kendo-time-selector-bg, + $kendo-time-selector-border + ); + } + + + // Time selector header + .k-time-header, + .k-time-selector-header { + + .k-time-now { + // TODO: use a variable + color: $kendo-link-text; + } + .k-time-now:hover { + // TODO: use a variable + color: $kendo-link-hover-text; + } + } + + + // Time list wrapper + .k-time-list-wrapper { + + .k-title { + color: $kendo-time-list-title-text; + } + + &.k-focus { + .k-title { + color: $kendo-time-list-title-focus-text; + } + + &::before, + &::after { + background-color: $kendo-time-list-focus-bg; + } + } + } + + + // Time list + .k-time-list { + &::before, + &::after { + $shadow-size: 3em; + box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-time-selector-bg; + } + + .k-item:hover { + color: $kendo-color-primary; + } + } + + .k-time-container { + background: transparent; + } + + .k-time-highlight { + @include fill( + $bg: $kendo-time-list-highlight-bg, + $border: $kendo-time-list-highlight-border + ); + } + +} + + +@mixin kendo-time-selector--theme() { + @include kendo-time-selector--theme-base(); +} diff --git a/packages/core/scss/components/timeselector/_variables.scss b/packages/core/scss/components/timeselector/_variables.scss new file mode 100644 index 00000000000..1905cfc52ad --- /dev/null +++ b/packages/core/scss/components/timeselector/_variables.scss @@ -0,0 +1,54 @@ +// Time selector + +$kendo-time-selector-border-width: null !default; +$kendo-time-selector-font-family: null !default; +$kendo-time-selector-font-size: null !default; +$kendo-time-selector-line-height: null !default; + +$kendo-time-selector-bg: null !default; +$kendo-time-selector-text: null !default; +$kendo-time-selector-border: null !default; + +$kendo-time-selector-header-padding-x: null !default; +$kendo-time-selector-header-padding-y: null !default; +$kendo-time-selector-header-border-width: null !default; + +$kendo-time-selector-fast-selection-gap: null !default; + +$kendo-time-list-width: null !default; +$kendo-time-list-height: null !default; + +$kendo-time-list-title-font-size: null !default; +$kendo-time-list-title-line-height: null !default; +$kendo-time-list-title-height: null !default; +$kendo-time-list-title-text: null !default; +$kendo-time-list-title-focus-text: null !default; + +$kendo-time-list-item-padding-x: null !default; +$kendo-time-list-item-padding-y: null !default; + +$kendo-time-list-highlight-border-width: null !default; +$kendo-time-list-highlight-height: null !default; +$kendo-time-list-highlight-bg: null !default; +$kendo-time-list-highlight-border: null !default; + +$kendo-time-list-focus-bg: null !default; + + +// Time selector sizes +$kendo-time-selector-sm-font-size: null !default; +$kendo-time-selector-sm-line-height: null !default; +$kendo-time-selector-sm-list-item-padding-x: null !default; +$kendo-time-selector-sm-list-item-padding-y: null !default; + +$kendo-time-selector-md-font-size: null !default; +$kendo-time-selector-md-line-height: null !default; +$kendo-time-selector-md-list-item-padding-x: null !default; +$kendo-time-selector-md-list-item-padding-y: null !default; + +$kendo-time-selector-lg-font-size: null !default; +$kendo-time-selector-lg-line-height: null !default; +$kendo-time-selector-lg-list-item-padding-x: null !default; +$kendo-time-selector-lg-list-item-padding-y: null !default; + +$kendo-time-selector-sizes: null !default; diff --git a/packages/core/scss/components/toolbar/_index.scss b/packages/core/scss/components/toolbar/_index.scss new file mode 100644 index 00000000000..4153e99df80 --- /dev/null +++ b/packages/core/scss/components/toolbar/_index.scss @@ -0,0 +1,27 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../popup/_index.scss" as *; +@use "../menu/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-toolbar--styles() { + @include import-once( "toolbar" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-popup--styles(); + @include kendo-menu--styles(); + @include kendo-icon--styles(); + @include kendo-toolbar--layout(); + @include kendo-toolbar--theme(); + @include kendo-utils--layout--overflow(); + @include kendo-utils--typography--vertical-align(); + } +} diff --git a/packages/core/scss/components/toolbar/_layout.scss b/packages/core/scss/components/toolbar/_layout.scss new file mode 100644 index 00000000000..f48299cd775 --- /dev/null +++ b/packages/core/scss/components/toolbar/_layout.scss @@ -0,0 +1,360 @@ +@use "sass:map"; +@use "../../color-system/_constants.scss" as *; +@use "../../typography/index.import.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; +@use "../button/_variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-toolbar--layout-base() { + + // Base + .k-toolbar { + margin: 0; + padding-block: $kendo-toolbar-padding-y; + padding-inline: $kendo-toolbar-padding-x; + border-width: $kendo-toolbar-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-toolbar-font-family; + font-size: $kendo-toolbar-font-size; + line-height: $kendo-toolbar-line-height; + list-style: none; + display: flex; + flex-flow: row wrap; + gap: $kendo-toolbar-spacing; + align-items: center; + justify-content: flex-start; + position: relative; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + // Remove once we decide to not size empty containers + &::before { + content: ""; + height: $kendo-button-calc-size; + } + + &.k-toolbar-resizable { + flex-wrap: nowrap; + } + + &.k-toolbar-scrollable { + flex-wrap: nowrap; + position: relative; + } + + &.k-toolbar-scrollable-overlay { + &::before, + &::after { + content: ''; + height: 100%; + aspect-ratio: 1; + position: absolute; + z-index: 3; + } + + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + + &.k-toolbar-scrollable-start::before, + &.k-toolbar-scrollable-end::after { + display: none; + } + + } + + > * { + flex-shrink: 0; + display: inline-flex; + align-content: center; + vertical-align: middle; + + > label { + margin-inline-end: $kendo-toolbar-spacing; + align-self: center; + } + } + + + // Button + .k-button {} + + + // Toggle button + .k-toggle-button {} + + + // Button group + .k-button-group {} + + + // Split button + .k-split-button {} + + + // Input + .k-input, + .k-picker { + width: $kendo-toolbar-input-width; + } + .k-color-picker { + width: min-content; + } + + + // Overflow anchor + .k-toolbar-overflow-button { + margin-inline-start: auto; + } + + // Overflow separator + .k-toolbar-button-separator { + height: $kendo-toolbar-separator-height; + margin-inline-start: auto; + + + .k-toolbar-overflow-button { + margin-inline-start: 0; + } + } + + // Spacer + .k-toolbar-spacer { + height: $kendo-line-height-em; + flex: 1 0 0%; + } + + + // Template item + .k-toolbar-item:focus, + .k-toolbar-item.k-focus { + text-decoration: none; + outline: 0; + } + } + + // Separator + .k-toolbar .k-separator, + .k-toolbar-separator { + width: 0; + height: $kendo-line-height-em; + border-width: 0 0 0 1px; + border-style: solid; + align-self: center; + } + + .k-toolbar-items { + display: flex; + flex-flow: row nowrap; + gap: $kendo-toolbar-spacing; + align-items: center; + justify-content: flex-start; + flex: 1 1 auto; + overflow: hidden; + } + + .k-toolbar-items-scroll { + overflow-x: auto; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + + .k-toolbar-items-list { + display: flex; + flex-flow: row wrap; + gap: $kendo-toolbar-spacing; + align-items: center; + justify-content: flex-start; + flex: 1 1 auto; + overflow: hidden; + } + + // Outline Toolbar + .k-toolbar-outline { + border-width: $kendo-toolbar-outline-border-width; + background: none; + } + + // Flat Toolbar + .k-toolbar-flat { + border-top-color: transparent !important; // stylelint-disable-line declaration-no-important + border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important + background: none !important; // stylelint-disable-line declaration-no-important + } + + + // Toolbar group + .k-toolbar-group { + display: flex; + flex-direction: inherit; + flex-wrap: nowrap; + gap: inherit; + } + + + // Toolbar sizes + @each $size, $size-props in $kendo-toolbar-sizes { + $_padding-x: map.get( $size-props, padding-x ); + $_padding-y: map.get( $size-props, padding-y ); + $_spacing: map.get( $size-props, spacing ); + $_separator-height: map.get( $size-props, separator-height ); + + .k-toolbar-#{$size} { + padding-block: $_padding-y; + padding-inline: $_padding-x; + gap: $_spacing; + + // Remove once we decide to not size empty containers + &::before { + margin-inline-start: calc( #{$_spacing} * -1 ); + } + + &.k-toolbar-scrollable-overlay::before { + inset-inline-start: $_spacing; + } + + > * > label { + margin-inline-end: $_spacing; + } + + .k-toolbar-items { + gap: $_spacing; + } + + .k-toolbar-button-separator { + height: $_separator-height; + } + + } + + .k-toolbar-items-list-#{$size} { + padding-block: $_padding-y; + padding-inline: $_padding-x; + gap: $_spacing; + } + } + + // Remove once we decide to not size empty containers + .k-toolbar-sm::before { + height: $kendo-button-sm-calc-size; + } + .k-toolbar-md::before { + height: $kendo-button-md-calc-size; + } + .k-toolbar-lg::before { + height: $kendo-button-lg-calc-size; + } + + .k-floating-toolbar, + .editorToolbarWindow.k-window-content { // stylelint-disable-line + padding-block: $kendo-toolbar-md-padding-y !important; // stylelint-disable-line declaration-no-important + padding-inline: $kendo-toolbar-md-padding-x !important; // stylelint-disable-line declaration-no-important + border-width: $kendo-toolbar-border-width; + border-style: solid; + display: flex; + flex-flow: row nowrap; + gap: $kendo-toolbar-md-spacing; + align-items: center; + + .k-toolbar { + padding: 0; + border-width: 0; + flex-shrink: 1; + color: inherit; + background: none; + } + } + .k-editortoolbar-dragHandle { // stylelint-disable-line + cursor: move; + display: flex; + align-items: center; + align-self: stretch; + flex-shrink: 0; + } + + + + // Remove once the Overflow Popup uses + // the proper Menu rendering in all suites. + + // Overflow container + .k-overflow-container { + font-size: $kendo-toolbar-overflow-container-font-size; + line-height: $kendo-toolbar-overflow-container-line-height; + + > .k-item { + border-color: inherit; + } + + .k-separator { + margin: k-spacing(1) 0; + } + + // Group + .k-overflow-tool-group { + display: block; + } + + // Button + .k-overflow-button { + padding-block: $kendo-toolbar-overflow-button-padding-y; + padding-inline: $kendo-toolbar-overflow-button-padding-x; + width: 100%; + height: auto; + border-width: 0; + border-radius: 0; + aspect-ratio: auto; + color: inherit; + background-color: transparent; + background-image: none; + font: inherit; + cursor: pointer; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + gap: $kendo-icon-spacing; + justify-content: flex-start; + position: relative; + } + + // Button group + .k-button-group { + @include box-shadow( none ); + display: flex; + flex-flow: column nowrap; + + .k-button { + margin: if( $kendo-button-border-width == 0, null, 0); + } + } + + // Split button + .k-split-button { + display: flex; + flex-direction: column; + } + + // Hidden items + .k-overflow-hidden { + display: none; + } + } + +} + + +@mixin kendo-toolbar--layout() { + @include kendo-toolbar--layout-base(); +} diff --git a/packages/core/scss/components/toolbar/_theme.scss b/packages/core/scss/components/toolbar/_theme.scss new file mode 100644 index 00000000000..5f33d1ef2ed --- /dev/null +++ b/packages/core/scss/components/toolbar/_theme.scss @@ -0,0 +1,197 @@ +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; +@use "../menu/_variables.scss" as *; + +@mixin kendo-toolbar--theme-base() { + + // Theme + .k-toolbar { + // Template item + .k-toolbar-item:focus, + .k-toolbar-item.k-focus { + @include focus-indicator( $kendo-toolbar-item-shadow ); + } + + + // Button group + .k-button-group {} + + } + + .k-toolbar-items { + border-color: inherit; + } + + // Separator + .k-toolbar .k-separator, + .k-toolbar-separator { + border-color: $kendo-toolbar-separator-border; + } + + // Solid Toolbar + .k-toolbar-solid { + @include fill( + $kendo-toolbar-text, + $kendo-toolbar-bg, + $kendo-toolbar-border, + $kendo-toolbar-gradient + ); + @include box-shadow( $kendo-toolbar-shadow ); + + &.k-toolbar-scrollable-overlay { + &::before { + background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay); + } + + &::after { + background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay); + } + } + } + + .k-toolbar-items-list-solid { + border-color: $kendo-toolbar-border; + } + + // Outline Toolbar + .k-toolbar-outline { + @include fill( + $color: $kendo-toolbar-outline-text, + $border: $kendo-toolbar-outline-border + ); + @include box-shadow( $kendo-toolbar-outline-shadow ); + + &.k-toolbar-scrollable-overlay { + &::before { + background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay); + } + + &::after { + background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay); + } + } + } + + .k-toolbar-items-list-outline { + border-color: $kendo-toolbar-outline-border; + } + + // Flat Toolbar + .k-toolbar-flat { + @include fill( + $color: $kendo-toolbar-flat-text, + $border: $kendo-toolbar-flat-border + ); + @include box-shadow( $kendo-toolbar-flat-shadow ); + + + > .k-separator, + .k-toolbar-separator { + border-inline-color: $kendo-toolbar-flat-border; + } + + &.k-toolbar-scrollable-overlay { + &::before { + background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay); + } + + &::after { + background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay); + } + } + } + + .k-toolbar-items-list-flat { + border-color: $kendo-toolbar-flat-border; + } + + .k-floating-toolbar, + .editorToolbarWindow.k-window-content { // stylelint-disable-line + @include fill( + $kendo-toolbar-text, + $kendo-toolbar-bg, + $kendo-toolbar-border, + $kendo-toolbar-gradient + ); + } + + // Overflow container + .k-overflow-container { + + .k-button { + + // Hover state + &:hover, + &.k-hover { + color: $kendo-menu-popup-item-hover-text; + background: $kendo-menu-popup-item-hover-bg; + } + + // Button focus state + &:focus, + &.k-focus { + @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true ); + } + + // Active state + &:active, + &.k-active { + color: $kendo-menu-popup-item-hover-text; + background: $kendo-menu-popup-item-hover-bg; + } + + // Selected + &.k-selected { + color: $kendo-menu-popup-item-active-text; + background: $kendo-menu-popup-item-active-bg; + } + + // Disabled state + &:disabled, + &.k-disabled { + color: inherit; + } + } + + } + + // RTL + .k-rtl, + [dir="rtl"] { + .k-toolbar-scrollable-overlay { + &::before { + background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay); + } + + &::after { + background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay); + } + + &.k-toolbar-outline { + &::before { + background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay); + } + + &::after { + background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay); + } + } + + &.k-toolbar-flat { + &::before { + background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay); + } + + &::after { + background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay); + } + } + } + } + +} + + +@mixin kendo-toolbar--theme() { + @include kendo-toolbar--theme-base(); +} diff --git a/packages/core/scss/components/toolbar/_variables.scss b/packages/core/scss/components/toolbar/_variables.scss new file mode 100644 index 00000000000..8c8c4933032 --- /dev/null +++ b/packages/core/scss/components/toolbar/_variables.scss @@ -0,0 +1,156 @@ +// Toolbar + +/// The horizontal padding of the Toolbar. +/// @group toolbar +$kendo-toolbar-padding-x: null !default; +/// The horizontal padding of the small Toolbar. +/// @group toolbar +$kendo-toolbar-sm-padding-x: null !default; +/// The horizontal padding of the medium Toolbar. +/// @group toolbar +$kendo-toolbar-md-padding-x: null !default; +/// The horizontal padding of the large Toolbar. +/// @group toolbar +$kendo-toolbar-lg-padding-x: null !default; + +/// The vertical padding of the Toolbar. +/// @group toolbar +$kendo-toolbar-padding-y: null !default; +/// The vertical padding of the small Toolbar. +/// @group toolbar +$kendo-toolbar-sm-padding-y: null !default; +/// The vertical padding of the medium Toolbar. +/// @group toolbar +$kendo-toolbar-md-padding-y: null !default; +/// The vertical padding of the large Toolbar. +/// @group toolbar +$kendo-toolbar-lg-padding-y: null !default; + +/// The spacing between the Toolbar tools. +/// @group toolbar +$kendo-toolbar-spacing: null !default; +/// The spacing between the tools of the small Toolbar. +/// @group toolbar +$kendo-toolbar-sm-spacing: null !default; +/// The spacing between the tools of the medium Toolbar. +/// @group toolbar +$kendo-toolbar-md-spacing: null !default; +/// The spacing between the tools of the large Toolbar. +/// @group toolbar +$kendo-toolbar-lg-spacing: null !default; + +/// The height of the Toolbar button separator. +/// @group toolbar +$kendo-toolbar-separator-height: null !default; +/// The height of the small Toolbar button separator. +/// @group toolbar +$kendo-toolbar-sm-separator-height: null !default; +/// The height of the medium Toolbar button separator. +/// @group toolbar +$kendo-toolbar-md-separator-height: null !default; +/// The height of the large Toolbar button separator. +/// @group toolbar +$kendo-toolbar-lg-separator-height: null !default; + +/// The width of the border around the Toolbar. +/// @group toolbar +$kendo-toolbar-border-width: null !default; +/// The border radius of the Toolbar. +/// @group toolbar +$kendo-toolbar-border-radius: null !default; + +/// The font family of the Toolbar. +/// @group toolbar +$kendo-toolbar-font-family: null !default; +/// The font size of the Toolbar. +/// @group toolbar +$kendo-toolbar-font-size: null !default; +/// The line height of the Toolbar. +/// @group toolbar +$kendo-toolbar-line-height: null !default; + +/// The background color of the Toolbar. +/// @group toolbar +$kendo-toolbar-bg: null !default; +/// The text color of the Toolbar. +/// @group toolbar +$kendo-toolbar-text: null !default; +/// The color of the border around the Toolbar. +/// @group toolbar +$kendo-toolbar-border: null !default; +/// The gradient of the Toolbar. +/// @group toolbar +$kendo-toolbar-gradient: null !default; +/// The box shadow of the Toolbar. +/// @group toolbar +$kendo-toolbar-shadow: null !default; +/// The left and right scroll overlay of the Toolbar. +/// @group toolbar +$kendo-toolbar-scroll-overlay: null !default; + +/// The text color of the outline Toolbar. +/// @group toolbar +$kendo-toolbar-outline-text: null !default; +/// The color of the border around the outline Toolbar. +/// @group toolbar +$kendo-toolbar-outline-border: null !default; +/// The gradient of the outline Toolbar. +/// @group toolbar +$kendo-toolbar-outline-gradient: null !default; +/// The box shadow of the outline Toolbar. +/// @group toolbar +$kendo-toolbar-outline-shadow: null !default; +/// The width of the border around the outline Toolbar. +/// @group toolbar +$kendo-toolbar-outline-border-width: null !default; +/// The left and right scroll overlay of the outline Toolbar. +/// @group toolbar +$kendo-toolbar-outline-scroll-overlay: null !default; + +/// The text color of the flat Toolbar. +/// @group toolbar +$kendo-toolbar-flat-text: null !default; +/// The color of the border around the flat Toolbar. +/// @group toolbar +$kendo-toolbar-flat-border: null !default; +/// The gradient of the flat Toolbar. +/// @group toolbar +$kendo-toolbar-flat-gradient: null !default; +/// The box shadow of the flat Toolbar. +/// @group toolbar +$kendo-toolbar-flat-shadow: null !default; +/// Border width of the flat Toolbar. +/// @group toolbar +$kendo-toolbar-flat-border-width: null !default; +/// The left and right scroll overlay of the flat Toolbar. +/// @group toolbar +$kendo-toolbar-flat-scroll-overlay: null !default; + +/// The color of the separator border of the Toolbar. +/// @group toolbar +$kendo-toolbar-separator-border: null !default; + +/// The width of the input in the Toolbar. +/// @group toolbar +$kendo-toolbar-input-width: null !default; + +/// The box shadow of the focused Toolbar item. +/// @group toolbar +$kendo-toolbar-item-shadow: null !default; + +/// The font size of the Toolbar overflow container. +/// @group toolbar +$kendo-toolbar-overflow-container-font-size: null !default; +/// The line-height of the Toolbar overflow container. +/// @group toolbar +$kendo-toolbar-overflow-container-line-height: null !default; +/// The vertical padding of the Toolbar overflow button. +/// @group toolbar +$kendo-toolbar-overflow-button-padding-y: null !default; +/// The horizontal padding of the Toolbar overflow button. +/// @group toolbar +$kendo-toolbar-overflow-button-padding-x: null !default; + +/// The sizes map for the Toolbar. +/// @group toolbar +$kendo-toolbar-sizes: null !default; diff --git a/packages/core/scss/components/tooltip/_index.scss b/packages/core/scss/components/tooltip/_index.scss new file mode 100644 index 00000000000..d4028935139 --- /dev/null +++ b/packages/core/scss/components/tooltip/_index.scss @@ -0,0 +1,22 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../utils/_index.scss" as *; +@use "../popup/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-tooltip--styles() { + @include import-once( "tooltip" ) { + @include core-styles(); + @include kendo-popup--styles(); + @include kendo-icon--styles(); + @include kendo-tooltip--layout(); + @include kendo-tooltip--theme(); + @include kendo-utils--typography--text-color(); + } +} diff --git a/packages/core/scss/components/tooltip/_layout.scss b/packages/core/scss/components/tooltip/_layout.scss new file mode 100644 index 00000000000..14e6611711d --- /dev/null +++ b/packages/core/scss/components/tooltip/_layout.scss @@ -0,0 +1,122 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "../icons/_variables.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-tooltip--layout-base() { + + .k-tooltip { + @include border-radius( $kendo-tooltip-border-radius ); + margin: 0; + padding-block: $kendo-tooltip-padding-y; + padding-inline: $kendo-tooltip-padding-x; + border-width: $kendo-tooltip-border-width; + border-style: solid; + box-sizing: border-box; + background-repeat: repeat-x; + outline: 0; + font-family: $kendo-tooltip-font-family; + font-size: $kendo-tooltip-font-size; + line-height: $kendo-tooltip-line-height; + display: flex; + flex-flow: row nowrap; + align-items: flex-start; + position: absolute; + z-index: 12000; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + .k-tooltip-icon { + margin-inline-end: $kendo-icon-spacing; + flex-shrink: 0; + } + + .k-tooltip-title { + margin-bottom: .25em; + font-size: $kendo-tooltip-title-font-size; + line-height: $kendo-tooltip-title-line-height; + } + + .k-tooltip-content { + align-self: stretch; + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + } + + .k-tooltip-button { + margin-inline-start: $kendo-icon-spacing; + flex-shrink: 0; + + .k-icon { + color: inherit; + vertical-align: top; + } + } + + + // Callout + .k-callout { + width: calc( #{$kendo-tooltip-callout-size} * 2); + height: calc( #{$kendo-tooltip-callout-size} * 2); + border-width: $kendo-tooltip-callout-size; + border-style: solid; + border-color: transparent; + position: absolute; + pointer-events: none; + } + + // TODO: + // Some implementations rely on margin + transform-rotate to position callout + // Remove margin tweaking and uncomment when their implementation is fixed. + + .k-callout-n { + margin-left: calc( #{$kendo-tooltip-callout-size} * -1 ); + border-bottom-color: currentColor; + // top: 0; + top: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 ); + left: 50%; + // transform: translate(-50%, -100%); + pointer-events: none; + } + .k-callout-e { + margin-top: calc( #{$kendo-tooltip-callout-size} * -1 ); + border-left-color: currentColor; + top: 50%; + // right: 0; + right: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 ); + // transform: translate(100%, -50%); + pointer-events: none; + } + .k-callout-s { + margin-left: calc( #{$kendo-tooltip-callout-size} * -1 ); + border-top-color: currentColor; + // bottom: 0; + bottom: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2); + left: 50%; + // transform: translate(-50%, 100%); + pointer-events: none; + } + .k-callout-w { + margin-top: calc( #{$kendo-tooltip-callout-size} * -1 ); + border-right-color: currentColor; + top: 50%; + // left: 0; + left: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2); + // transform: translate(-100%, -50%); + pointer-events: none; + } + +} + + +@mixin kendo-tooltip--layout() { + @include kendo-tooltip--layout-base(); +} diff --git a/packages/core/scss/components/tooltip/_theme.scss b/packages/core/scss/components/tooltip/_theme.scss new file mode 100644 index 00000000000..f591edc2457 --- /dev/null +++ b/packages/core/scss/components/tooltip/_theme.scss @@ -0,0 +1,41 @@ +@use "sass:map"; +@use "../../mixins/index.import.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-tooltip--theme-base() { + // Default tooltip + .k-tooltip { + @include fill( + $kendo-tooltip-text, + $kendo-tooltip-bg, + $kendo-tooltip-border + ); + + @include box-shadow( $kendo-tooltip-shadow ); + + .k-callout { + color: $kendo-tooltip-bg; + } + } + + // Tooltip variants + @each $name, $props in $kendo-tooltip-theme { + .k-tooltip-#{$name} { + @include fill( + map.get( $props, color ), + map.get( $props, background-color ), + map.get( $props, border ) + ); + + .k-callout { + color: map.get( $props, background-color ); + } + } + } + +} + + +@mixin kendo-tooltip--theme() { + @include kendo-tooltip--theme-base(); +} diff --git a/packages/core/scss/components/tooltip/_variables.scss b/packages/core/scss/components/tooltip/_variables.scss new file mode 100644 index 00000000000..7e03a1c91c3 --- /dev/null +++ b/packages/core/scss/components/tooltip/_variables.scss @@ -0,0 +1,70 @@ +// Tooltip + +/// The vertical padding of the Tooltip. +/// @group tooltip +$kendo-tooltip-padding-y: null !default; +/// The horizontal padding of the Tooltip. +/// @group tooltip +$kendo-tooltip-padding-x: null !default; +/// The width of the border around the Tooltip. +/// @group tooltip +$kendo-tooltip-border-width: null !default; +/// The border radius of the Tooltip. +/// @group tooltip +$kendo-tooltip-border-radius: null !default; + +/// The font family of the Tooltip. +/// @group tooltip +$kendo-tooltip-font-family: null !default; +/// The font size of the Tooltip. +/// @group tooltip +$kendo-tooltip-font-size: null !default; +/// The line height of the Tooltip. +/// @group tooltip +$kendo-tooltip-line-height: null !default; + +/// The font size of the Tooltip title. +/// @group tooltip +$kendo-tooltip-title-font-size: null !default; +/// The line height of the Tooltip title. +/// @group tooltip +$kendo-tooltip-title-line-height: null !default; + +/// The size of the Tooltip callout. +/// @group tooltip +$kendo-tooltip-callout-size: null !default; + +/// The default background of the Tooltip. +/// @group tooltip +$kendo-tooltip-bg: null !default; +/// The default text color of the Tooltip. +/// @group tooltip +$kendo-tooltip-text: null !default; +/// The default border color of the Tooltip. +/// @group tooltip +$kendo-tooltip-border: null !default; + +/// The box-shadow of the Tooltip. +/// @group tooltip +$kendo-tooltip-shadow: null !default; + +@function tooltip-theme( $colors ) { + $_theme: (); + + @each $name, $color in $colors { + $_theme: map.merge(( $name: ( + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + background-color: $color, + border: $color, + )), $_theme ); + } + + @return $_theme; +} + +/// The theme colors map for the Tooltip. +/// @group tooltip +$kendo-tooltip-theme-colors: null !default; +/// The generated theme colors map for the Tooltip. +/// @group tooltip +$kendo-tooltip-theme: null !default; diff --git a/packages/core/scss/components/treelist/_index.scss b/packages/core/scss/components/treelist/_index.scss new file mode 100644 index 00000000000..656c0c1bc54 --- /dev/null +++ b/packages/core/scss/components/treelist/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../grid/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-treelist--styles() { + @include import-once( "treelist" ) { + @include core-styles(); + @include kendo-grid--styles(); + @include kendo-icon--styles(); + @include kendo-treelist--layout(); + @include kendo-treelist--theme(); + } +} diff --git a/packages/core/scss/components/treelist/_layout.scss b/packages/core/scss/components/treelist/_layout.scss new file mode 100644 index 00000000000..67f00acfd73 --- /dev/null +++ b/packages/core/scss/components/treelist/_layout.scss @@ -0,0 +1,114 @@ +@use "../icons/_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-treelist--layout-base() { + + // Base + .k-treelist { + &.k-grid-display-block.k-grid-lockedcolumns { + display: block; + } + + .k-status { + padding-block: .4em; + padding-inline: .6em; + line-height: 1.6em; + + // TODO: see what this does and use a better name + .k-loading { + vertical-align: baseline; + margin-right: 5px; + + // TODO + display: none; + } + } + + tr.k-hidden { + display: none; + } + + .k-treelist-dragging, + .k-treelist-dragging .k-hover { + cursor: default; + } + + .k-drop-hint { + transform: translate(0, -50%); + } + + .k-table-row.k-footer td, + .k-table-row.k-footer-template td, + .k-table-row.k-footer .k-table-td, + .k-table-row.k-footer-template .k-table-td { + border-width: $kendo-treelist-footer-row-border-width 0; + border-style: solid; + font-weight: bold; + } + + .k-table-row.k-footer + .k-table-row.k-footer td, + .k-table-row.k-footer + .k-table-row.k-footer .k-table-td { + border-top-width: 0; + } + } + + + // Sticky headers + .k-treelist-scrollable { + > .k-table, + .k-grid-header .k-table-row, + .k-grid-header .k-table-th { + background-color: inherit; + } + + .k-grid-toolbar { + position: sticky; + z-index: 3; + top: 0; + left: 0; + } + + .k-grid-header .k-table-th { + position: sticky; + z-index: 1; + } + + .k-grid-header .k-table-th.k-grid-header-sticky { + z-index: 3; + } + + thead.k-grid-header { + padding-right: 0; + } + + .k-table-row.k-group-footer + .k-table-row.k-group-footer td { + border-top-width: 0; + } + } + + :is(.k-treelist-scrollable[dir="rtl"], .k-rtl .k-treelist-scrollable) thead.k-grid-header { + padding-left: 0; + } + + .k-drag-separator { + display: inline-block; + border-right: 1px solid; + height: 1em; + vertical-align: top; + margin-block: 0; + margin-inline: .5em; + } + + .k-treelist-toggle { + margin-block: calc( #{$kendo-icon-padding} * -1 ); + padding: $kendo-icon-padding; + box-sizing: content-box; + cursor: pointer; + } + +} + + +@mixin kendo-treelist--layout() { + @include kendo-treelist--layout-base(); +} diff --git a/packages/core/scss/components/treelist/_theme.scss b/packages/core/scss/components/treelist/_theme.scss new file mode 100644 index 00000000000..7c6d395950f --- /dev/null +++ b/packages/core/scss/components/treelist/_theme.scss @@ -0,0 +1,18 @@ +@use "./variables.scss" as *; + +@mixin kendo-treelist--theme-base() { + + // Theme + .k-treelist { + tr.k-footer, + tr.k-footer-template { + background-color: $kendo-treelist-footer-row-bg; + } + } + +} + + +@mixin kendo-treelist--theme() { + @include kendo-treelist--theme-base(); +} diff --git a/packages/core/scss/components/treelist/_variables.scss b/packages/core/scss/components/treelist/_variables.scss new file mode 100644 index 00000000000..e6a9b1bc96a --- /dev/null +++ b/packages/core/scss/components/treelist/_variables.scss @@ -0,0 +1,8 @@ +// Treelist + +/// The background color of the TreeList footer row. +/// @group treelist +$kendo-treelist-footer-row-bg: null !default; +/// The border width of the TreeList footer row. +/// @group treelist +$kendo-treelist-footer-row-border-width: null !default; diff --git a/packages/core/scss/components/treeview/_index.scss b/packages/core/scss/components/treeview/_index.scss new file mode 100644 index 00000000000..acc0305c14c --- /dev/null +++ b/packages/core/scss/components/treeview/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../checkbox/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-treeview--styles() { + @include import-once( "treeview" ) { + @include core-styles(); + @include kendo-checkbox--styles(); + @include kendo-icon--styles(); + @include kendo-treeview--layout(); + @include kendo-treeview--theme(); + } +} diff --git a/packages/core/scss/components/treeview/_layout.scss b/packages/core/scss/components/treeview/_layout.scss new file mode 100644 index 00000000000..c6e644d7682 --- /dev/null +++ b/packages/core/scss/components/treeview/_layout.scss @@ -0,0 +1,206 @@ +@use "sass:map"; +@use "../../color-system/_constants.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-treeview--layout-base() { + + // Treeview + .k-treeview { + padding: 0; + border-width: 0; + background: none; + box-sizing: border-box; + outline: 0; + font-family: $kendo-treeview-font-family; + font-size: $kendo-treeview-font-size; + line-height: $kendo-treeview-line-height; + display: block; + cursor: default; + overflow: auto; + white-space: nowrap; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + + // Treeview filter + .k-treeview-filter { + padding: k-spacing(2); + display: block; + position: relative; + flex: none; + } + + + // Treeview group + .k-treeview-group { + margin: 0; + padding: 0; + list-style: none; + position: relative; + outline: 0; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + &.ng-animating { + overflow: hidden; + } + } + + + // Treeview wrappers + .k-treeview-top, + .k-treeview-mid, + .k-treeview-bot { + display: flex; + flex-direction: row; + align-items: center; + align-content: center; + } + + + // Treeview item + .k-treeview-item { + outline-style: none; + margin: 0; + padding: 0 0 0 $kendo-treeview-indent; + border-width: 0; + display: block; + } + + + // Treeview toggle + .k-treeview-toggle { + margin-inline-start: -$kendo-treeview-indent; + flex: none; + display: inline-flex; + flex-flow: row nowrap; + align-items: center; + cursor: pointer; + } + .k-treeview-toggle .k-icon { + padding: $kendo-icon-padding; + box-sizing: content-box; + } + + + // Loading icon + .k-treeview-loading { + margin-right: $kendo-icon-spacing; + } + + + // Checkbox + .k-treeview .k-checkbox-wrap, + .k-treeview .k-checkbox-wrapper { + align-self: center; + } + + + // Treeview leaf + .k-treeview-leaf { + @include border-radius( $kendo-treeview-item-border-radius ); + padding-block: $kendo-treeview-item-padding-y; + padding-inline: $kendo-treeview-item-padding-x; + border: $kendo-treeview-item-border-width solid transparent; + text-decoration: none; + display: inline-flex; + align-items: center; + align-content: center; + vertical-align: middle; + position: relative; + + .k-icon, + .k-image, + .k-sprite { + margin-right: $kendo-icon-spacing; + } + + &.k-focus { + z-index: 1; + } + } + + + // Treeview load more button + .k-treeview .k-treeview-load-more-button { + cursor: pointer; + + &:hover, + &.k-hover, + &:focus, + &.k-focus { + text-decoration: underline; + } + } + + + // RTL + .k-rtl .k-treeview, + [dir="rtl"] .k-treeview, + .k-treeview.k-rtl, + .k-treeview[dir="rtl"] { + + // Treeview item + .k-treeview-item { + padding-left: 0; + padding-right: $kendo-treeview-indent; + } + + // Loading + .k-treeview-loading { + margin-right: 0; + margin-left: $kendo-icon-spacing; + } + + // Treeview leaf + .k-treeview-leaf, + .k-in { + .k-icon, + .k-image, + .k-sprite { + margin-right: 0; + margin-left: $kendo-icon-spacing; + } + } + } + + @each $size, $size-props in $kendo-treeview-sizes { + $_font-size: map.get( $size-props, font-size); + $_line-height: map.get( $size-props, line-height); + $_item-padding-x: map.get( $size-props, item-padding-x); + $_item-padding-y: map.get( $size-props, item-padding-y); + $_checkbox-padding-x: map.get( $size-props, checkbox-padding-x ); + $_checkbox-padding-y: map.get( $size-props, checkbox-padding-y ); + + .k-treeview-#{$size} { + font-size: $_font-size; + line-height: $_line-height; + + .k-treeview-leaf { + padding-block: $_item-padding-y; + padding-inline: $_item-padding-x; + } + + .k-checkbox-wrap { + padding-block: $_checkbox-padding-y; + padding-inline: $_checkbox-padding-x; + } + } + } + +} + + +@mixin kendo-treeview--layout() { + @include kendo-treeview--layout-base(); +} diff --git a/packages/core/scss/components/treeview/_theme.scss b/packages/core/scss/components/treeview/_theme.scss new file mode 100644 index 00000000000..71faff587b0 --- /dev/null +++ b/packages/core/scss/components/treeview/_theme.scss @@ -0,0 +1,87 @@ +@use "../../mixins/index.import.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-treeview--theme-base() { + + // Treeview + .k-treeview { + @include fill( + $kendo-treeview-text, + $kendo-treeview-bg, + $kendo-treeview-border + ); + } + + + // Treeview item + .k-treeview-item {} + + + // Treeview leaf + .k-treeview-leaf { + + // Hover state + &:hover, + &.k-hover { + @include fill( + $kendo-treeview-item-hover-text, + $kendo-treeview-item-hover-bg, + $kendo-treeview-item-hover-border, + $kendo-treeview-item-hover-gradient + ); + } + + // Focus state + &:focus, + &.k-focus { + @include focus-indicator( $kendo-treeview-item-focus-shadow, true ); + } + + // Selected state + &.k-selected { + @include fill( + $kendo-treeview-item-selected-text, + $kendo-treeview-item-selected-bg, + $kendo-treeview-item-selected-border, + $kendo-treeview-item-selected-gradient + ); + } + } + + + // Treeview load more button + .k-treeview .k-treeview-load-more-button { + @include fill( + $kendo-treeview-loadmore-text, + $kendo-treeview-loadmore-bg, + $kendo-treeview-loadmore-border + ); + + // Hover state + &:hover, + &.k-hover { + @include fill( + $kendo-treeview-loadmore-hover-text, + $kendo-treeview-loadmore-hover-bg, + $kendo-treeview-loadmore-hover-border + ); + } + + // Focus state + &:focus, + &.k-focus { + @include fill( + $kendo-treeview-loadmore-focus-text, + $kendo-treeview-loadmore-focus-bg, + $kendo-treeview-loadmore-focus-border + ); + @include focus-indicator( $kendo-treeview-loadmore-focus-shadow, true ); + } + } + +} + + +@mixin kendo-treeview--theme() { + @include kendo-treeview--theme-base(); +} diff --git a/packages/core/scss/components/treeview/_variables.scss b/packages/core/scss/components/treeview/_variables.scss new file mode 100644 index 00000000000..e15c631090a --- /dev/null +++ b/packages/core/scss/components/treeview/_variables.scss @@ -0,0 +1,162 @@ +// TreeView + +/// The font family of the TreeView. +/// @group treeview +$kendo-treeview-font-family: null !default; +/// The font size of the TreeView. +/// @group treeview +$kendo-treeview-font-size: null !default; +/// The font size of the small TreeView. +/// @group treeview +$kendo-treeview-sm-font-size: null !default; +/// The font size of the medium TreeView. +/// @group treeview +$kendo-treeview-md-font-size: null !default; +/// The font size of the large TreeView. +/// @group treeview +$kendo-treeview-lg-font-size: null !default; +/// The line height of the TreeView. +/// @group treeview +$kendo-treeview-line-height: null !default; +/// The line height of the small TreeView. +/// @group treeview +$kendo-treeview-sm-line-height: null !default; +/// The line height of the medium TreeView. +/// @group treeview +$kendo-treeview-md-line-height: null !default; +/// The line height of the large TreeView. +/// @group treeview +$kendo-treeview-lg-line-height: null !default; +/// The indentation of child groups in the TreeView. +/// @group treeview +$kendo-treeview-indent: null !default; + +/// The horizontal padding of the TreeView items. +/// @group treeview +$kendo-treeview-item-padding-x: null !default; +/// The horizontal padding of the small TreeView items. +/// @group treeview +$kendo-treeview-sm-item-padding-x: null !default; +/// The horizontal padding of the medium TreeView items. +/// @group treeview +$kendo-treeview-md-item-padding-x: null !default; +/// The horizontal padding of the large TreeView items. +/// @group treeview +$kendo-treeview-lg-item-padding-x: null !default; +/// The vertical padding of the TreeView items. +/// @group treeview +$kendo-treeview-item-padding-y: null !default; +/// The vertical padding of the small TreeView items. +/// @group treeview +$kendo-treeview-sm-item-padding-y: null !default; +/// The vertical padding of the medium TreeView items. +/// @group treeview +$kendo-treeview-md-item-padding-y: null !default; +/// The vertical padding of the large TreeView items. +/// @group treeview +$kendo-treeview-lg-item-padding-y: null !default; +/// The border width of the TreeView items. +/// @group treeview +$kendo-treeview-item-border-width: null !default; +/// The border radius of the TreeView items. +/// @group treeview +$kendo-treeview-item-border-radius: null !default; + +/// The horizontal padding of the checkbox in the small TreeView. +/// @group treeview +$kendo-treeview-sm-checkbox-padding-x: null !default; +/// The horizontal padding of the checkbox in the medium TreeView. +/// @group treeview +$kendo-treeview-md-checkbox-padding-x: null !default; +/// The horizontal padding of the checkbox in the large TreeView. +/// @group treeview +$kendo-treeview-lg-checkbox-padding-x: null !default; +/// The vertical padding of the checkbox in the small TreeView. +/// @group treeview +$kendo-treeview-sm-checkbox-padding-y: null !default; +/// The vertical padding of the checkbox in the medium TreeView. +/// @group treeview +$kendo-treeview-md-checkbox-padding-y: null !default; +/// The vertical padding of the checkbox in the large TreeView. +/// @group treeview +$kendo-treeview-lg-checkbox-padding-y: null !default; + + +/// The sizes map of the TreeView. +/// @group treeview +$kendo-treeview-sizes: null !default; + + +/// The background color of the TreeView. +/// @group treeview +$kendo-treeview-bg: null !default; +/// The text color of the TreeView. +/// @group treeview +$kendo-treeview-text: null !default; +/// The border color of the TreeView. +/// @group treeview +$kendo-treeview-border: null !default; + +/// The background color of hovered TreeView items. +/// @group treeview +$kendo-treeview-item-hover-bg: null !default; +/// The text color of hovered TreeView items. +/// @group treeview +$kendo-treeview-item-hover-text: null !default; +/// The border color of hovered TreeView items. +/// @group treeview +$kendo-treeview-item-hover-border: null !default; +/// The background gradient of hovered TreeView items. +/// @group treeview +$kendo-treeview-item-hover-gradient: null !default; + +/// The background color of selected TreeView items. +/// @group treeview +$kendo-treeview-item-selected-bg: null !default; +/// The text color of selected TreeView items. +/// @group treeview +$kendo-treeview-item-selected-text: null !default; +/// The border color of selected TreeView items. +/// @group treeview +$kendo-treeview-item-selected-border: null !default; +/// The background gradient of selected TreeView items. +/// @group treeview +$kendo-treeview-item-selected-gradient: null !default; + +/// The box shadow of focused TreeView items. +/// @group treeview +$kendo-treeview-item-focus-shadow: null !default; + +/// The background color of the Load More button in the TreeView +/// @group treeview +$kendo-treeview-loadmore-bg: null !default; +/// The text color of the Load More button in the TreeView +/// @group treeview +$kendo-treeview-loadmore-text: null !default; +/// The border color of the Load More button in the TreeView +/// @group treeview +$kendo-treeview-loadmore-border: null !default; + +/// The background color of the hovered Load More button in the TreeView +/// @group treeview +$kendo-treeview-loadmore-hover-bg: null !default; +/// The text color of the hovered Load More button in the TreeView. +/// @group treeview +$kendo-treeview-loadmore-hover-text: null !default; +/// The border color of the hovered Load More button in the TreeView. +/// @group treeview +$kendo-treeview-loadmore-hover-border: null !default; + +/// The background color of the focused Load More button in the TreeView. +/// @group treeview +$kendo-treeview-loadmore-focus-bg: null !default; +/// The text color of the focused Load More button in the TreeView. +/// @group treeview +$kendo-treeview-loadmore-focus-text: null !default; +/// The border color of the focused Load More button in the TreeView. +/// @group treeview +$kendo-treeview-loadmore-focus-border: null !default; +/// The box shadow of the focused Load More button in the TreeView. +/// @group treeview +$kendo-treeview-loadmore-focus-shadow: null !default; + diff --git a/packages/core/scss/components/typography/_index.scss b/packages/core/scss/components/typography/_index.scss new file mode 100644 index 00000000000..e5e88ade965 --- /dev/null +++ b/packages/core/scss/components/typography/_index.scss @@ -0,0 +1,18 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../utils/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-typography--styles() { + @include import-once( "typography" ) { + @include core-styles(); + @include kendo-typography--layout(); + @include kendo-typography--theme(); + @include kendo-utils--typography(); + } +} diff --git a/packages/core/scss/components/typography/_layout.scss b/packages/core/scss/components/typography/_layout.scss new file mode 100644 index 00000000000..86b3958579e --- /dev/null +++ b/packages/core/scss/components/typography/_layout.scss @@ -0,0 +1,129 @@ +@use "sass:map"; +@use "../../typography/index.import.scss" as *; +@use "./_variables.scss" as *; +@use "../../_variables.scss" as *; + +@mixin kendo-typography--layout-base() { + + @if $kendo-enable-typography { + body { @extend .k-body !optional; } + h1 { @extend .k-h1 !optional; } + h2 { @extend .k-h2 !optional; } + h3 { @extend .k-h3 !optional; } + h4 { @extend .k-h4 !optional; } + h5 { @extend .k-h5 !optional; } + h6 { @extend .k-h6 !optional; } + p { @extend .k-paragraph !optional; } + pre { @extend .k-pre !optional; } + code { @extend .k-code !optional; } + } + + // TODO delete k-typography class for R1 2022 + .k-body, + .k-typography { + @include typography( + var( --kendo-font-size, inherit ), + var( --kendo-font-family, inherit ), + var( --kendo-line-height, normal ), + var( --kendo-font-weight-normal, normal ), + var( --kendo-letter-spacing, normal ) + ); + margin: 0; + + p { + margin: $kendo-paragraph-margin; + } + } + + // Headings + @each $heading, $heading-props in $kendo-headings { + $_font-size: map.get( $heading-props, font-size ); + $_font-family: map.get( $heading-props, font-family ); + $_line-height: map.get( $heading-props, line-height ); + $_font-weight: map.get( $heading-props, font-weight ); + $_letter-spacing: map.get( $heading-props, letter-spacing ); + $_margin: map.get( $heading-props, margin ); + + .k-#{$heading} { + @include typography( + var( --kendo-#{$heading}-font-size, #{$_font-size} ), + var( --kendo-#{$heading}-font-family, #{$_font-family} ), + var( --kendo-#{$heading}-line-height, #{$_line-height} ), + var( --kendo-#{$heading}-font-weight, #{$_font-weight} ), + var( --kendo-#{$heading}-letter-spacing, #{$_letter-spacing} ), + ); + margin: var( --kendo-#{$heading}-margin, #{$_margin} ); + } + } + + // Paragraph + .k-paragraph { + @include typography( + var( --kendo-paragraph-font-size, #{$kendo-paragraph-font-size}), + var( --kendo-paragraph-font-family, #{$kendo-paragraph-font-family}), + var( --kendo-paragraph-line-height, #{$kendo-paragraph-line-height}), + var( --kendo-paragraph-font-weight, #{$kendo-paragraph-font-weight}), + var( --kendo-paragraph-letter-spacing, #{$kendo-paragraph-letter-spacing}) + ); + margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin}); + } + + // Code snippet + .k-pre, + .k-code { + @include typography( + var( --kendo-code-font-size, #{$kendo-code-font-size}), + var( --kendo-code-font-family, #{$kendo-code-font-family}), + var( --kendo-code-line-height, #{$kendo-code-line-height}), + var( --kendo-code-font-weight, #{$kendo-code-font-weight}), + var( --kendo-code-letter-spacing, #{$kendo-code-letter-spacing}) + ); + border-style: solid; + border-width: $kendo-code-border-width; + } + + .k-pre { + padding-block: $kendo-pre-padding-y; + padding-inline: $kendo-pre-padding-x; + overflow: auto; + } + + .k-pre > .k-code { + padding: 0; + border-width: 0; + border-color: transparent; + background-color: transparent; + font-family: inherit; + font-size: inherit; + } + + .k-code { + padding-block: $kendo-code-padding-y; + padding-inline: $kendo-code-padding-x; + } + + // Display + @each $display, $kendo-display-props in $kendo-display { + $_font-size: map.get( $kendo-display-props, font-size ); + $_font-family: map.get( $kendo-display-props, font-family ); + $_line-height: map.get( $kendo-display-props, line-height ); + $_font-weight: map.get( $kendo-display-props, font-weight ); + $_letter-spacing: map.get( $kendo-display-props, letter-spacing ); + $_margin: map.get( $kendo-display-props, margin ); + + .k-display-#{$display} { + @include typography( + var( --kendo-display#{$display}-font-size, #{$_font-size} ), + var( --kendo-display#{$display}-font-family, #{$_font-family} ), + var( --kendo-display#{$display}-line-height, #{$_line-height} ), + var( --kendo-display#{$display}-font-weight, #{$_font-weight} ), + var( --kendo-display#{$display}-letter-spacing, #{$_letter-spacing} ), + ); + } + } +} + + +@mixin kendo-typography--layout() { + @include kendo-typography--layout-base(); +} diff --git a/packages/core/scss/components/typography/_theme.scss b/packages/core/scss/components/typography/_theme.scss new file mode 100644 index 00000000000..45aa036f002 --- /dev/null +++ b/packages/core/scss/components/typography/_theme.scss @@ -0,0 +1,29 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./_variables.scss" as *; + +@mixin kendo-typography--theme-base() { + + .k-body { + @include fill( + $kendo-body-text, + $kendo-body-bg + ); + } + + // Code snippet + .k-pre, + .k-code { + @include fill( + $kendo-code-text, + $kendo-code-bg, + $kendo-code-border + ); + } + +} + + +@mixin kendo-typography--theme() { + @include kendo-typography--theme-base(); +} diff --git a/packages/core/scss/components/typography/_variables.scss b/packages/core/scss/components/typography/_variables.scss new file mode 100644 index 00000000000..b1784d0cab7 --- /dev/null +++ b/packages/core/scss/components/typography/_variables.scss @@ -0,0 +1,259 @@ +// Typography + + +// Headings + +/// The font size of the highest level heading. +/// @group typography +$kendo-h1-font-size: null !default; +/// The font size of the second highest level heading. +/// @group typography +$kendo-h2-font-size: null !default; +/// The font size of the third highest level heading. +/// @group typography +$kendo-h3-font-size: null !default; +/// The font size of the fourth highest level heading. +/// @group typography +$kendo-h4-font-size: null !default; +/// The font size of the fifth highest level heading. +/// @group typography +$kendo-h5-font-size: null !default; +/// The font size of the sixth highest level heading. +/// @group typography +$kendo-h6-font-size: null !default; + +/// The font family of the highest level heading. +/// @group typography +$kendo-h1-font-family: null !default; +/// The font family of the second highest level heading. +/// @group typography +$kendo-h2-font-family: null !default; +/// The font family of the third highest level heading. +/// @group typography +$kendo-h3-font-family: null !default; +/// The font family of the fourth highest level heading. +/// @group typography +$kendo-h4-font-family: null !default; +/// The font family of the fifth highest level heading. +/// @group typography +$kendo-h5-font-family: null !default; +/// The font family of the sixth highest level heading. +/// @group typography +$kendo-h6-font-family: null !default; + +/// The line height of the highest level heading. +/// @group typography +$kendo-h1-line-height: null !default; +/// The line height of the second highest level heading. +/// @group typography +$kendo-h2-line-height: null !default; +/// The line height of the third highest level heading. +/// @group typography +$kendo-h3-line-height: null !default; +/// The line height of the fourth highest level heading. +/// @group typography +$kendo-h4-line-height: null !default; +/// The line height of the fifth highest level heading. +/// @group typography +$kendo-h5-line-height: null !default; +/// The line height of the sixth highest level heading. +/// @group typography +$kendo-h6-line-height: null !default; + +/// The font weight of the highest level heading. +/// @group typography +$kendo-h1-font-weight: null !default; +/// The font weight of the second highest level heading. +/// @group typography +$kendo-h2-font-weight: null !default; +/// The font weight of the third highest level heading. +/// @group typography +$kendo-h3-font-weight: null !default; +/// The font weight of the fourth highest level heading. +/// @group typography +$kendo-h4-font-weight: null !default; +/// The font weight of the fifth highest level heading. +/// @group typography +$kendo-h5-font-weight: null !default; +/// The font weight of the sixth highest level heading. +/// @group typography +$kendo-h6-font-weight: null !default; + +/// The letter spacing of the highest level heading. +/// @group typography +$kendo-h1-letter-spacing: null !default; +/// The letter spacing of the second highest level heading. +/// @group typography +$kendo-h2-letter-spacing: null !default; +/// The letter spacing of the third highest level heading. +/// @group typography +$kendo-h3-letter-spacing: null !default; +/// The letter spacing of the fourth highest level heading. +/// @group typography +$kendo-h4-letter-spacing: null !default; +/// The letter spacing of the fifth highest level heading. +/// @group typography +$kendo-h5-letter-spacing: null !default; +/// The letter spacing of the sixth highest level heading. +/// @group typography +$kendo-h6-letter-spacing: null !default; + +/// The margin of the highest level heading. +/// @group typography +$kendo-h1-margin: null !default; +/// The margin of the second highest level heading. +/// @group typography +$kendo-h2-margin: null !default; +/// The margin of the third highest level heading. +/// @group typography +$kendo-h3-margin: null !default; +/// The margin of the fourth highest level heading. +/// @group typography +$kendo-h4-margin: null !default; +/// The margin of the fifth highest level heading. +/// @group typography +$kendo-h5-margin: null !default; +/// The margin of the sixth highest level heading. +/// @group typography +$kendo-h6-margin: null !default; + +/// The headings Map. +/// @group typography +$kendo-headings: null !default; + + +// Paragraph + +/// The margin of the paragraph. +/// @group typography +$kendo-paragraph-margin: null !default; +/// The font size of the paragraph. +/// @group typography +$kendo-paragraph-font-size: null !default; +/// The font family of the paragraph. +/// @group typography +$kendo-paragraph-font-family: null !default; +/// The line height of the paragraph. +/// @group typography +$kendo-paragraph-line-height: null !default; +/// The font weight of the paragraph. +/// @group typography +$kendo-paragraph-font-weight: null !default; +/// The letter spacing of the paragraph. +/// @group typography +$kendo-paragraph-letter-spacing: null !default; + + +// Code + +/// The font size of the code tag. +/// @group typography +$kendo-code-font-size: null !default; +/// The font family of the code tag. +/// @group typography +$kendo-code-font-family: null !default; +/// The line height of the code tag. +/// @group typography +$kendo-code-line-height: null !default; +/// The font weight of the code tag. +/// @group typography +$kendo-code-font-weight: null !default; +/// The letter spacing of the code tag. +/// @group typography +$kendo-code-letter-spacing: null !default; + +/// The horizontal padding of the code tag. +/// @group typography +$kendo-code-padding-x: null !default; +/// The vertical padding of the code tag. +/// @group typography +$kendo-code-padding-y: null !default; +/// The horizontal padding of the preformatted text. +/// @group typography +$kendo-pre-padding-x: null !default; +/// The vertical padding of the preformatted text. +/// @group typography +$kendo-pre-padding-y: null !default; +/// The width of the border of the code tag. +/// @group typography +$kendo-code-border-width: null !default; + +/// The background color of the code tag. +/// @group typography +$kendo-code-bg: null !default; +/// The color of the code tag. +/// @group typography +$kendo-code-text: null !default; +/// The border color of the code tag. +/// @group typography +$kendo-code-border: null !default; + +// Display + +/// The font size of the largest display text. +/// @group typography +$kendo-display1-font-size: null !default; +/// The font size of the second largest display text. +/// @group typography +$kendo-display2-font-size: null !default; +/// The font size of the third largest display text. +/// @group typography +$kendo-display3-font-size: null !default; +/// The font size of the fourth largest display text. +/// @group typography +$kendo-display4-font-size: null !default; + +/// The font family of the largest display text. +/// @group typography +$kendo-display1-font-family: null !default; +/// The font family of the second largest display text. +/// @group typography +$kendo-display2-font-family: null !default; +/// The font family of the third largest display text. +/// @group typography +$kendo-display3-font-family: null !default; +/// The font family of the fourth largest display text. +/// @group typography +$kendo-display4-font-family: null !default; + +/// The line height of the largest display text. +/// @group typography +$kendo-display1-line-height: null !default; +/// The line height of the second largest display text. +/// @group typography +$kendo-display2-line-height: null !default; +/// The line height of the third largest display text. +/// @group typography +$kendo-display3-line-height: null !default; +/// The line height of the fourth largest display text. +/// @group typography +$kendo-display4-line-height: null !default; + +/// The font weight of the largest display text. +/// @group typography +$kendo-display1-font-weight: null !default; +/// The font weight of the second largest display text. +/// @group typography +$kendo-display2-font-weight: null !default; +/// The font weight of the third largest display text. +/// @group typography +$kendo-display3-font-weight: null !default; +/// The font weight of the fourth largest display text. +/// @group typography +$kendo-display4-font-weight: null !default; + +/// The letter spacing of the largest display text. +/// @group typography +$kendo-display1-letter-spacing: null !default; +/// The letter spacing of the second largest display text. +/// @group typography +$kendo-display2-letter-spacing: null !default; +/// The letter spacing of the third largest display text. +/// @group typography +$kendo-display3-letter-spacing: null !default; +/// The letter spacing of the fourth largest display text. +/// @group typography +$kendo-display4-letter-spacing: null !default; + +/// The displays Map. +$kendo-display: null !default; diff --git a/packages/core/scss/components/upload/_index.scss b/packages/core/scss/components/upload/_index.scss new file mode 100644 index 00000000000..b01073ad080 --- /dev/null +++ b/packages/core/scss/components/upload/_index.scss @@ -0,0 +1,28 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; +@use "../dropzone/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + + +// Dependencies + + +// Expose +@mixin kendo-upload--styles() { + @include import-once( "upload" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-action-buttons--styles(); + @include kendo-icon--styles(); + @include kendo-dropzone--styles(); + @include kendo-upload--layout(); + @include kendo-upload--theme(); + } +} diff --git a/packages/core/scss/components/upload/_layout.scss b/packages/core/scss/components/upload/_layout.scss new file mode 100644 index 00000000000..106779b47ec --- /dev/null +++ b/packages/core/scss/components/upload/_layout.scss @@ -0,0 +1,254 @@ +@use "../../color-system/_constants.scss" as *; +@use "../../spacing/index.import.scss" as *; +@use "./variables.scss" as *; +@use "../icons/_variables.scss" as *; + +@mixin kendo-upload--layout-base() { + + .k-upload { + border-width: $kendo-upload-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-upload-font-family; + font-size: $kendo-upload-font-size; + line-height: $kendo-upload-line-height; + position: relative; + display: block; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + *, + *::before, + *::after { + box-sizing: border-box; + } + + .k-upload-button { + min-width: 7em; + } + + // Drop zone + .k-dropzone, + .k-upload-dropzone { + padding-block: $kendo-upload-dropzone-padding-y; + padding-inline: $kendo-upload-dropzone-padding-x; + border-width: 0; + text-align: end; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + background-color: transparent; + + .k-dropzone-hint { + font-style: normal; + font-weight: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + flex: 1; + } + + .k-upload-status { + font-weight: normal; + display: flex; + align-items: center; + position: relative; + + > .k-icon { + margin-inline-end: $kendo-upload-icon-spacing; + } + } + + .k-upload-status + .k-dropzone-hint { + display: none; + } + } + + .k-dropzone-active { + .k-upload-status { + display: none; + } + + .k-upload-status + .k-dropzone-hint { + display: block; + } + } + + // Upload files list + .k-upload-files { + max-height: $kendo-upload-max-height; + overflow-y: auto; + margin: 0; + padding: 0; + border-width: 1px 0 0; + border-style: solid; + border-color: inherit; + list-style: none; + + .k-file-multiple, + .k-file-single { + width: 100%; + display: flex; + justify-content: space-between; + } + + .k-file-single { + align-items: center; + } + + .k-file-multiple { + align-items: flex-start; + } + + .k-file { + padding: $kendo-upload-item-padding-y $kendo-upload-item-padding-x calc(#{$kendo-upload-item-padding-y} + #{$kendo-upload-progress-thickness}); + border-width: 0 0 1px; + border-style: solid; + outline: none; + display: flex; + align-items: flex-start; + position: relative; + } + + .k-file:last-child { + border-width: 0; + } + + .k-filename { + margin-left: k-spacing(4); + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position: relative; + } + + .k-upload-pct { + margin-block: 0; + margin-inline: $kendo-upload-icon-spacing; + font-weight: normal; + vertical-align: middle; + } + + ~ .k-clear-selected, + ~ .k-upload-selected { + margin-top: $kendo-upload-files-list-margin; + border-width: 0; + } + + ~ .k-upload-selected { + border-left-width: 1px; + border-left-style: solid; + margin-left: -1px; + } + + .k-file-name, + .k-file-size, + .k-file-validation-message, + .k-file-summary { + display: block; + } + + .k-file-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position: relative; + } + + .k-file-size, + .k-file-summary, + .k-file-validation-message { + font-size: $kendo-upload-validation-font-size; + line-height: $kendo-upload-validation-line-height; + } + + + .k-file-icon-wrapper { + + .k-file-state { + position: absolute; + } + } + + .k-file-state { + visibility: hidden; + } + } + + .k-upload-files .k-file-info { + min-height: $kendo-icon-size-xxl; + display: block; + overflow: hidden; + flex: 1 0 0; + } + + .k-multiple-files-wrapper, + .k-file-single > .k-file-info { + margin-inline-start: $kendo-upload-file-info-margin; + min-height: $kendo-icon-size-xxl; + display: block; + overflow: hidden; + flex: 1 0 0; + } + + .k-multiple-files-wrapper { + .k-file-info { + margin-bottom: $kendo-upload-multiple-items-spacing; + display: block; + } + + .k-file-summary { + margin-top: calc( calc( #{$kendo-upload-multiple-items-spacing} / 3) * -1 ); + } + } + + .k-progressbar { + --kendo-progressbar-height: #{$kendo-upload-progress-thickness}; + position: absolute; + left: $kendo-upload-item-padding-x; + right: $kendo-upload-item-padding-x; + bottom: calc( #{$kendo-upload-item-padding-y} / 2 ); + width: auto; + } + + // Action buttons + .k-actions { + border-top-width: 1px; + } + + } + + .k-upload-button-wrap { + position: relative; + direction: ltr; + + input { + // font should not depend on outside styles, otherwise upload may break + font: 170px monospace !important; // stylelint-disable-line declaration-no-important + margin: 0; + padding: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + position: absolute; + bottom: 0; + right: 0; + z-index: 1; + } + input[disabled], + input.k-disabled { + visibility: hidden; + } + } + +} + + +@mixin kendo-upload--layout() { + @include kendo-upload--layout-base(); +} diff --git a/packages/core/scss/components/upload/_theme.scss b/packages/core/scss/components/upload/_theme.scss new file mode 100644 index 00000000000..29287f4d7f6 --- /dev/null +++ b/packages/core/scss/components/upload/_theme.scss @@ -0,0 +1,111 @@ +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_swatch-legacy.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-upload--theme-base() { + + .k-upload { + @include fill( + $kendo-upload-text, + $kendo-upload-bg, + $kendo-upload-border + ); + + .k-dropzone, + .k-upload-dropzone { + @include fill( + $kendo-upload-dropzone-text, + $kendo-upload-dropzone-bg, + $kendo-upload-dropzone-border + ); + + &.k-hover { + background-color: $kendo-upload-dropzone-hover-bg; + } + + .k-dropzone-hint { + color: $kendo-upload-status-text; + opacity: $kendo-upload-status-text-opacity; + } + + } + + .k-upload-files, + .k-file { + border-color: $kendo-upload-border; + } + + .k-file { + &.k-focus { + @include focus-indicator( $indicator: ( inset $kendo-upload-focus-shadow ), $inset: true ); + } + + .k-upload-action.k-focus { + @include focus-indicator( $kendo-upload-focus-shadow ); + } + + } + + .k-upload-status { + color: $kendo-upload-status-text; + opacity: $kendo-upload-status-text-opacity; + } + + // Upload status: uploading + .k-file-progress { + .k-progressbar .k-selected { + background-color: $kendo-upload-progress-bg; + } + } + + + // Upload status: success + .k-file-success { + .k-file-validation-message { + color: $kendo-upload-success-text; + } + + .k-progressbar .k-selected { + background-color: $kendo-upload-success-bg; + } + } + + // Upload status: error + .k-file-error { + .k-file-validation-message { + color: $kendo-upload-error-text; + } + .k-progressbar .k-selected { + background-color: $kendo-upload-error-bg; + } + } + + .k-file-icon-wrapper { + color: $kendo-upload-icon-color; + border-color: $kendo-upload-icon-color; + } + + .k-file-size, + .k-file-validation-message, + .k-file-summary { + color: $kendo-subtle-text; + } + + .k-multiple-files-wrapper .k-file-summary { + color: $kendo-upload-text; + } + + // Invalid, + &.k-invalid, + &.ng-invalid.ng-touched, + &.ng-invalid.ng-dirty { + border-color: $kendo-invalid-border; + } + } + +} + + +@mixin kendo-upload--theme() { + @include kendo-upload--theme-base(); +} diff --git a/packages/core/scss/components/upload/_variables.scss b/packages/core/scss/components/upload/_variables.scss new file mode 100644 index 00000000000..a8434b7298d --- /dev/null +++ b/packages/core/scss/components/upload/_variables.scss @@ -0,0 +1,106 @@ +// Upload + +/// The width of the border around the Upload. +/// @group upload +$kendo-upload-border-width: null !default; +/// The font family of the Upload. +/// @group upload +$kendo-upload-font-family: null !default; +/// The font size of the Upload. +/// @group upload +$kendo-upload-font-size: null !default; +/// The line height of the Upload. +/// @group upload +$kendo-upload-line-height: null !default; +/// The maximum height of the list with uploaded items. +/// @group upload +$kendo-upload-max-height: null !default; + +/// The text color of the Upload. +/// @group upload +$kendo-upload-text: null !default; +/// The background color of the Upload. +/// @group upload +$kendo-upload-bg: null !default; +/// The border color of the Upload. +/// @group upload +$kendo-upload-border: null !default; + +/// The horizontal padding of the Upload dropzone. +/// @group upload +$kendo-upload-dropzone-padding-x: null !default; +/// The vertical padding of the Upload dropzone. +/// @group upload +$kendo-upload-dropzone-padding-y: null !default; +/// The text color of the Upload dropzone. +/// @group upload +$kendo-upload-dropzone-text: null !default; +/// The background color of the Upload dropzone. +/// @group upload +$kendo-upload-dropzone-bg: null !default; +/// The border color of the Upload dropzone. +/// @group upload +$kendo-upload-dropzone-border: null !default; +/// The background color of the hovered Upload dropzone. +/// @group upload +$kendo-upload-dropzone-hover-bg: null !default; + +/// The text color of the Upload status message. +/// @group upload +$kendo-upload-status-text: null !default; +/// The opacity of the Upload status message. +/// @group upload +$kendo-upload-status-text-opacity: null !default; + +/// The horizontal padding of an uploaded item. +/// @group upload +$kendo-upload-item-padding-x: null !default; +/// The vertical padding of an uploaded item. +/// @group upload +$kendo-upload-item-padding-y: null !default; + +/// The vertical spacing between uploaded batch items. +/// @group upload +$kendo-upload-multiple-items-spacing: null !default; + +/// The font size of the Upload validation message. +/// @group upload +$kendo-upload-validation-font-size: null !default; +/// The line height of the Upload validation message. +/// @group upload +$kendo-upload-validation-line-height: null !default; +/// The horizontal spacing of the Upload status icon. +/// @group upload +$kendo-upload-icon-spacing: null !default; +/// The color of the uploaded items icon. +/// @group upload +$kendo-upload-icon-color: null !default; + +/// The thickness of the Upload progress bar. +/// @group upload +$kendo-upload-progress-thickness: null !default; +/// The background color of the Upload progress bar. +/// @group upload +$kendo-upload-progress-bg: null !default; + +/// The success text color of the Upload. +/// @group upload +$kendo-upload-success-text: null !default; +/// The success background color of the Upload progress bar. +/// @group upload +$kendo-upload-success-bg: null !default; + +/// The error text color of the Upload. +/// @group upload +$kendo-upload-error-text: null !default; +/// The error background color of the Upload progress bar. +/// @group upload +$kendo-upload-error-bg: null !default; + +/// The shadow of the focused Upload button, actions and uploaded items. +/// @group upload +$kendo-upload-focus-shadow: null !default; + +$kendo-upload-files-list-margin: null !default; + +$kendo-upload-file-info-margin: null !default; diff --git a/packages/core/scss/components/utils/_index.scss b/packages/core/scss/components/utils/_index.scss new file mode 100644 index 00000000000..cc02caddfc1 --- /dev/null +++ b/packages/core/scss/components/utils/_index.scss @@ -0,0 +1 @@ +@forward "@progress/kendo-theme-utils/scss/index.import.scss"; diff --git a/packages/core/scss/components/validator/_index.scss b/packages/core/scss/components/validator/_index.scss new file mode 100644 index 00000000000..511335df45e --- /dev/null +++ b/packages/core/scss/components/validator/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../tooltip/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + + +// Dependencies + + +// Expose +@mixin kendo-validator--styles() { + @include import-once( "validator" ) { + @include core-styles(); + @include kendo-tooltip--styles(); + @include kendo-icon--styles(); + @include kendo-validator--layout(); + @include kendo-validator--theme(); + } +} diff --git a/packages/core/scss/components/validator/_layout.scss b/packages/core/scss/components/validator/_layout.scss new file mode 100644 index 00000000000..c40ef85e229 --- /dev/null +++ b/packages/core/scss/components/validator/_layout.scss @@ -0,0 +1,30 @@ +@use "../tooltip/_variables.scss" as *; + +@mixin kendo-validator--layout-base() { + + // Validator + .k-validator {} + + + // Validator tooltip + .k-validator-tooltip { + margin-top: calc( #{$kendo-tooltip-callout-size} + #{$kendo-tooltip-border-width} ); + width: auto; + white-space: normal; + display: flex; + align-items: center; + // NOTE: This works around popup / tooltip stacking issue + z-index: 9999; + + // .k-callout-n { inset-inline-start: 16px; } + } + .k-grid .k-validator-tooltip { + max-width: 300px; + } + +} + + +@mixin kendo-validator--layout() { + @include kendo-validator--layout-base(); +} diff --git a/packages/core/scss/components/validator/_theme.scss b/packages/core/scss/components/validator/_theme.scss new file mode 100644 index 00000000000..c857d36769f --- /dev/null +++ b/packages/core/scss/components/validator/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-validator--theme-base() { + + // Validator + .k-validator {} + +} + + +@mixin kendo-validator--theme() { + @include kendo-validator--theme-base(); +} diff --git a/packages/core/scss/components/validator/_variables.scss b/packages/core/scss/components/validator/_variables.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/core/scss/components/virtual-scroller/_index.scss b/packages/core/scss/components/virtual-scroller/_index.scss new file mode 100644 index 00000000000..7eae7175705 --- /dev/null +++ b/packages/core/scss/components/virtual-scroller/_index.scss @@ -0,0 +1,20 @@ +// Dependencies +@use "../core/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + + +// Dependencies + + +// Expose +@mixin kendo-virtual-scroller--styles() { + @include import-once( "virtual-scroller" ) { + @include core-styles(); + @include kendo-virtual-scroller--layout(); + @include kendo-virtual-scroller--theme(); + } +} diff --git a/packages/core/scss/components/virtual-scroller/_layout.scss b/packages/core/scss/components/virtual-scroller/_layout.scss new file mode 100644 index 00000000000..b43735c5db4 --- /dev/null +++ b/packages/core/scss/components/virtual-scroller/_layout.scss @@ -0,0 +1,40 @@ +@mixin kendo-virtual-scroller--layout-base() { + + // Virtual scroller + .k-virtual-scroller { + width: 100%; + height: 100%; + flex: 1 1 auto; + overflow: auto; + position: relative; + } + + + // Virtual scroller wrap + .k-virtual-scroller-wrap { + position: relative; + z-index: 1; + } + + + // Virtual scroller content + .k-virtual-scroller-content { + position: absolute; + width: 100%; + top: 0; + inset-inline-start: 0; + } + + + // Virtual scroller size + .k-virtual-scroller-size { + position: relative; + z-index: 0; + } + +} + + +@mixin kendo-virtual-scroller--layout() { + @include kendo-virtual-scroller--layout-base(); +} diff --git a/packages/core/scss/components/virtual-scroller/_theme.scss b/packages/core/scss/components/virtual-scroller/_theme.scss new file mode 100644 index 00000000000..898fb37135e --- /dev/null +++ b/packages/core/scss/components/virtual-scroller/_theme.scss @@ -0,0 +1,11 @@ +@mixin kendo-virtual-scroller--theme-base() { + + // Virtual scroller + .k-virtual-scroller {} + +} + + +@mixin kendo-virtual-scroller--theme() { + @include kendo-virtual-scroller--theme-base(); +} diff --git a/packages/core/scss/components/virtual-scroller/_variables.scss b/packages/core/scss/components/virtual-scroller/_variables.scss new file mode 100644 index 00000000000..08604f24eb5 --- /dev/null +++ b/packages/core/scss/components/virtual-scroller/_variables.scss @@ -0,0 +1 @@ +// Virtual-scroller diff --git a/packages/core/scss/components/window/_index.scss b/packages/core/scss/components/window/_index.scss new file mode 100644 index 00000000000..08d6743bd74 --- /dev/null +++ b/packages/core/scss/components/window/_index.scss @@ -0,0 +1,26 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../overlay/_index.scss" as *; +@use "../forms/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../action-buttons/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-window--styles() { + @include import-once( "window" ) { + @include core-styles(); + @include kendo-overlay--styles(); + @include kendo-form--styles(); + @include kendo-button--styles(); + @include kendo-action-buttons--styles(); + @include kendo-icon--styles(); + @include kendo-window--layout(); + @include kendo-window--theme(); + } +} diff --git a/packages/core/scss/components/window/_layout.scss b/packages/core/scss/components/window/_layout.scss new file mode 100644 index 00000000000..609600992fb --- /dev/null +++ b/packages/core/scss/components/window/_layout.scss @@ -0,0 +1,179 @@ +@use "sass:list"; +@use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-window--layout-base() { + + .k-window { + @include border-radius( $kendo-window-border-radius ); + padding: 0; + border-width: $kendo-window-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-family: $kendo-window-font-family; + font-size: $kendo-window-font-size; + line-height: $kendo-window-line-height; + display: inline-flex; + flex-direction: column; + position: absolute; + z-index: 10002; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: $kendo-color-rgba-transparent; + + // overlay during dragging + // .k-overlay { + // position: absolute; + // opacity: 0; + // } + } + .k-window.k-window-maximized { + max-width: 100vw; + max-height: 100vh; + box-shadow: none; + } + + + // Window sizes + @each $size, $width in $kendo-window-sizes { + .k-window-#{$size} { width: $width; } + } + + + // Title bar + .k-window-titlebar { + @include border-top-radius( $kendo-window-border-radius ); + padding-block: $kendo-window-titlebar-padding-y; + padding-inline: $kendo-window-titlebar-padding-x; + border-width: $kendo-window-titlebar-border-width; + border-style: $kendo-window-titlebar-border-style; + white-space: nowrap; + display: flex; + flex-direction: row; + flex-shrink: 0; + align-items: center; + } + + .k-window-minimized { + .k-window-titlebar { + border-width: 0; + } + } + + // Title bar title text + .k-window-title { + padding-block: .5em; + padding-inline: 0; + margin-block: -.5em; + margin-inline: 0; + font-size: $kendo-window-title-font-size; + line-height: $kendo-window-title-line-height; + text-overflow: ellipsis; + overflow: hidden; + cursor: default; + flex: 1; + + &:empty::before { + content: "\200b"; + } + } + + + // Actions + .k-window-titlebar-actions { + margin-block: -5em; + margin-inline: 0; + margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} ); + line-height: 1; + display: flex; + gap: $kendo-window-actions-gap; + flex-flow: row nowrap; + flex-shrink: 0; + align-items: center; + vertical-align: top; + } + .k-window-titlebar-action { + flex-shrink: 0; + opacity: $kendo-window-action-opacity; + } + .k-window-titlebar-action:hover { + opacity: $kendo-window-action-hover-opacity; + } + + + // Content + .k-window-content, + .k-prompt-container { + padding-block: $kendo-window-inner-padding-y; + padding-inline: $kendo-window-inner-padding-x; + border-width: 0; + border-color: inherit; + color: inherit; + background: none; + outline: 0; + overflow: auto; + position: relative; + flex: 1 1 auto; + } + .k-window-content + .k-prompt-container { + margin-top: - list.slash( $kendo-window-inner-padding-y, 2 ); + } + .k-window-content:first-child { + padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} ); + } + .k-window-content:last-child { + padding-bottom: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} ); + } + + .k-window-iframecontent { + padding: 0; + overflow: visible; + + .k-content-frame { + vertical-align: top; + border: 0; + width: 100%; + height: 100%; + } + } + + // Buttons Layout + .k-window-actions { + @include border-bottom-radius( $kendo-window-border-radius ); + padding-block: $kendo-window-buttongroup-padding-y; + padding-inline: $kendo-window-buttongroup-padding-x; + border-width: $kendo-window-buttongroup-border-width 0 0; + border-style: solid; + border-color: inherit; + flex: 0 0 auto; + display: flex; + flex-flow: row wrap; + align-items: center; + overflow: hidden; + } + + + // Prompt + .k-prompt-container { + + > .k-textarea { + width: 100%; + } + + } + + // Resize Handles + .k-window { // stylelint-disable-line + .k-resize-n { top: 0; } + .k-resize-e { right: 0; } + .k-resize-s { bottom: 0; } + .k-resize-w { left: 0; } + } + +} + + +@mixin kendo-window--layout() { + @include kendo-window--layout-base(); +} diff --git a/packages/core/scss/components/window/_theme.scss b/packages/core/scss/components/window/_theme.scss new file mode 100644 index 00000000000..1b572de0f37 --- /dev/null +++ b/packages/core/scss/components/window/_theme.scss @@ -0,0 +1,48 @@ +@use "../../color-system/_functions.import.scss" as *; +@use "../../mixins/index.import.scss" as *; +@use "../../functions/index.import.scss" as *; +@use "../../_variables.scss" as *; +@use "./variables.scss" as *; + +@mixin kendo-window--theme-base() { + + // Window + .k-window { + @include fill( + $kendo-window-text, + $kendo-window-bg, + $kendo-window-border + ); + @include box-shadow( $kendo-window-shadow ); + } + + .k-window:focus, + .k-window.k-focus { + @include focus-indicator( $kendo-window-focus-shadow ); + } + + + // Titlebar + .k-window-titlebar { + @include fill( + $kendo-window-titlebar-text, + $kendo-window-titlebar-bg, + $kendo-window-titlebar-border, + $kendo-window-titlebar-gradient + ); + } + + // Window theme colors + @each $name, $color in $kendo-window-theme-colors { + .k-window-#{$name} .k-window-titlebar { + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + background-color: $color; + } + } + +} + + +@mixin kendo-window--theme() { + @include kendo-window--theme-base(); +} diff --git a/packages/core/scss/components/window/_variables.scss b/packages/core/scss/components/window/_variables.scss new file mode 100644 index 00000000000..d8ffc1bb1e9 --- /dev/null +++ b/packages/core/scss/components/window/_variables.scss @@ -0,0 +1,101 @@ +// Window + +/// The width of the border around the Window. +/// @group window +$kendo-window-border-width: null !default; +/// The border radius of the Window. +/// @group window +$kendo-window-border-radius: null !default; +/// The font family of the Window. +/// @group window +$kendo-window-font-family: null !default; +/// The font size of the Window. +/// @group window +$kendo-window-font-size: null !default; +/// The line height of the Window. +/// @group window +$kendo-window-line-height: null !default; + +/// The horizontal padding of the Window titlebar. +/// @group window +$kendo-window-titlebar-padding-x: null !default; +/// The vertical padding of the Window titlebar. +/// @group window +$kendo-window-titlebar-padding-y: null !default; +/// The width of the border of the Window titlebar. +/// @group window +$kendo-window-titlebar-border-width: null !default; +/// The style of the border of the Window titlebar. +/// @group window +$kendo-window-titlebar-border-style: null !default; + +/// The font size of the title of the Window. +/// @group window +$kendo-window-title-font-size: null !default; +/// The line height of the title of the Window. +/// @group window +$kendo-window-title-line-height: null !default; + +/// The spacing between the buttons in the Window titlebar. +/// @group window +$kendo-window-actions-gap: null !default; +/// The opacity of the buttons in the Window titlebar. +/// @group window +$kendo-window-action-opacity: null !default; +/// The opacity of the hovered buttons in the Window titlebar. +/// @group window +$kendo-window-action-hover-opacity: null !default; + +/// The horizontal padding of the content of the Window. +/// @group window +$kendo-window-inner-padding-x: null !default; +/// The vertical padding of the content of the Window. +/// @group window +$kendo-window-inner-padding-y: null !default; + +/// The horizontal padding of the Window action buttons. +/// @group window +$kendo-window-buttongroup-padding-x: null !default; +/// The vertical padding of the Window action buttons. +/// @group window +$kendo-window-buttongroup-padding-y: null !default; +/// The width of the top border of the Window action buttons. +/// @group window +$kendo-window-buttongroup-border-width: null !default; + +/// The background color of the Window. +/// @group window +$kendo-window-bg: null !default; +/// The text color of the Window. +/// @group window +$kendo-window-text: null !default; +/// The border color of the Window. +/// @group window +$kendo-window-border: null !default; +/// The box shadow of the Window. +/// @group window +$kendo-window-shadow: null !default; +/// The box shadow of the focused Window. +/// @group window +$kendo-window-focus-shadow: null !default; + +/// The background color of the Window titlebar. +/// @group window +$kendo-window-titlebar-bg: null !default; +/// The text color of the Window titlebar. +/// @group window +$kendo-window-titlebar-text: null !default; +/// The border color of the Window titlebar. +/// @group window +$kendo-window-titlebar-border: null !default; +/// The background gradient of the Window titlebar. +/// @group window +$kendo-window-titlebar-gradient: null !default; + +/// The map of the width for the different Window sizes. +/// @group window +$kendo-window-sizes: null !default; + +/// The theme colors map for the Window. +/// @group window +$kendo-window-theme-colors: null !default; diff --git a/packages/core/scss/components/wizard/_index.scss b/packages/core/scss/components/wizard/_index.scss new file mode 100644 index 00000000000..3ca56eca444 --- /dev/null +++ b/packages/core/scss/components/wizard/_index.scss @@ -0,0 +1,24 @@ +// Dependencies +@use "../core/_index.scss" as *; +@use "../icons/_index.scss" as *; +@use "../button/_index.scss" as *; +@use "../stepper/_index.scss" as *; +@use "../forms/_index.scss" as *; + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + +// Expose +@mixin kendo-wizard--styles() { + @include import-once( "wizard" ) { + @include core-styles(); + @include kendo-button--styles(); + @include kendo-stepper--styles(); + @include kendo-form--styles(); + @include kendo-icon--styles(); + @include kendo-wizard--layout(); + @include kendo-wizard--theme(); + } +} diff --git a/packages/core/scss/components/wizard/_layout.scss b/packages/core/scss/components/wizard/_layout.scss new file mode 100644 index 00000000000..d65a174e277 --- /dev/null +++ b/packages/core/scss/components/wizard/_layout.scss @@ -0,0 +1,129 @@ +@use "sass:list"; +@use "./variables.scss" as *; + +@mixin kendo-wizard--layout-base() { + + // Wizard + .k-wizard { + padding-block: $kendo-wizard-padding-y; + padding-inline: $kendo-wizard-padding-x; + border-width: $kendo-wizard-border-width; + border-style: solid; + box-sizing: border-box; + outline: 0; + font-size: $kendo-wizard-font-size; + line-height: $kendo-wizard-line-height; + font-family: $kendo-wizard-font-family; + position: relative; + color: inherit; + background: none; + display: flex; + align-items: stretch; + overflow: hidden; + + .k-wizard-steps { + box-sizing: border-box; + display: flex; + overflow: hidden; + } + + .k-wizard-step { + box-sizing: border-box; + padding: calc(#{list.slash( $kendo-wizard-content-padding-x, 4 )} + 2px); + width: 100%; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: space-between; + + &:focus, + &.k-focus { + outline-width: 1px; + outline-style: dotted; + outline-offset: -1px; + } + } + + .k-wizard-content { + box-sizing: border-box; + overflow-y: auto; + } + + .k-wizard-buttons { + margin-top: $kendo-wizard-content-padding-y; + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + + .k-button { + margin-right: $kendo-wizard-buttons-margin-x; + } + + .k-wizard-pager { + vertical-align: middle; + } + } + + .k-wizard-buttons-right { + .k-button:last-of-type { + margin-right: 0; + } + } + + .k-stepper { + .k-step-list-vertical { + .k-step { + flex: 1 0 auto; + } + } + + .k-step-indicator { + flex-shrink: 0; + } + } + } + + .k-wizard-horizontal { + flex-direction: column; + + .k-wizard-steps { + margin-top: $kendo-wizard-content-padding-y; + } + + .k-wizard-steps, + .k-wizard-content { + flex: 1 1 auto; + } + } + + .k-wizard-vertical { + + .k-wizard-steps { + margin-left: $kendo-wizard-content-padding-x; + flex: 1 0 0%; + } + + .k-wizard-content { + flex: 1 1 0%; + } + + } + + .k-wizard-left { + flex-direction: row-reverse; + + .k-wizard-steps { + margin-right: $kendo-wizard-content-padding-x; + margin-left: 0; + } + } + +} + + +@mixin kendo-wizard--layout() { + @include kendo-wizard--layout-base(); +} diff --git a/packages/core/scss/components/wizard/_theme.scss b/packages/core/scss/components/wizard/_theme.scss new file mode 100644 index 00000000000..0c19b20f27e --- /dev/null +++ b/packages/core/scss/components/wizard/_theme.scss @@ -0,0 +1,17 @@ +@use "./variables.scss" as *; + +@mixin kendo-wizard--theme-base() { + + .k-wizard-step { + &:focus, + &.k-focus { + outline-color: $kendo-wizard-step-focus-border; + } + } + +} + + +@mixin kendo-wizard--theme() { + @include kendo-wizard--theme-base(); +} diff --git a/packages/core/scss/components/wizard/_variables.scss b/packages/core/scss/components/wizard/_variables.scss new file mode 100644 index 00000000000..3544ba6ae85 --- /dev/null +++ b/packages/core/scss/components/wizard/_variables.scss @@ -0,0 +1,34 @@ +// Wizard + +/// The horizontal padding of the Wizard. +/// @group wizard +$kendo-wizard-padding-x: null !default; +/// The vertical padding of the Wizard. +/// @group wizard +$kendo-wizard-padding-y: null !default; +/// The horizontal padding of the Wizard content. +/// @group wizard +$kendo-wizard-content-padding-x: null !default; +/// The vertical padding of the Wizard content. +/// @group wizard +$kendo-wizard-content-padding-y: null !default; +/// The horizontal margin of the Wizard's Button container. +/// @group wizard +$kendo-wizard-buttons-margin-x: null !default; + +/// The border width of the Wizard. +/// @group wizard +$kendo-wizard-border-width: null !default; +/// The font size of the Wizard. +/// @group wizard +$kendo-wizard-font-size: null !default; +/// The line height of the Wizard. +/// @group wizard +$kendo-wizard-line-height: null !default; +/// The font family of the Wizard. +/// @group wizard +$kendo-wizard-font-family: null !default; + +/// The outline of the focused Wizard step. +/// @group wizard +$kendo-wizard-step-focus-border: null !default; From c56ed03b120f2b094bc63d7170e30cb43d260949 Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Wed, 8 Jan 2025 16:29:18 +0200 Subject: [PATCH 02/10] chore(material): use component styles from core --- packages/material/scss/_variables.scss | 8 -------- packages/material/scss/action-buttons/_layout.scss | 2 +- packages/material/scss/action-buttons/_theme.scss | 2 +- .../material/scss/action-buttons/_variables.scss | 2 +- packages/material/scss/action-sheet/_layout.scss | 2 +- packages/material/scss/action-sheet/_theme.scss | 2 +- packages/material/scss/action-sheet/_variables.scss | 2 +- packages/material/scss/adaptive/_layout.scss | 2 +- packages/material/scss/adaptive/_theme.scss | 2 +- packages/material/scss/adaptive/_variables.scss | 2 +- packages/material/scss/appbar/_layout.scss | 2 +- packages/material/scss/appbar/_theme.scss | 2 +- packages/material/scss/appbar/_variables.scss | 2 +- packages/material/scss/autocomplete/_layout.scss | 2 +- packages/material/scss/autocomplete/_theme.scss | 2 +- packages/material/scss/avatar/_layout.scss | 2 +- packages/material/scss/avatar/_theme.scss | 2 +- packages/material/scss/avatar/_variables.scss | 2 +- packages/material/scss/badge/_layout.scss | 2 +- packages/material/scss/badge/_theme.scss | 2 +- packages/material/scss/badge/_variables.scss | 2 +- .../material/scss/bottom-navigation/_layout.scss | 2 +- .../material/scss/bottom-navigation/_theme.scss | 2 +- .../material/scss/bottom-navigation/_variables.scss | 2 +- packages/material/scss/breadcrumb/_layout.scss | 2 +- packages/material/scss/breadcrumb/_theme.scss | 2 +- packages/material/scss/breadcrumb/_variables.scss | 2 +- packages/material/scss/button/_layout.scss | 2 +- packages/material/scss/button/_theme.scss | 2 +- packages/material/scss/button/_variables.scss | 2 +- packages/material/scss/calendar/_layout.scss | 2 +- packages/material/scss/calendar/_theme.scss | 2 +- packages/material/scss/calendar/_variables.scss | 2 +- packages/material/scss/captcha/_layout.scss | 2 +- packages/material/scss/captcha/_theme.scss | 2 +- packages/material/scss/captcha/_variables.scss | 2 +- packages/material/scss/card/_layout.scss | 2 +- packages/material/scss/card/_theme.scss | 2 +- packages/material/scss/card/_variables.scss | 2 +- packages/material/scss/chart-wizard/_layout.scss | 2 +- packages/material/scss/chart-wizard/_theme.scss | 2 +- packages/material/scss/chart-wizard/_variables.scss | 2 +- packages/material/scss/chat/_layout.scss | 2 +- packages/material/scss/chat/_theme.scss | 2 +- packages/material/scss/chat/_variables.scss | 2 +- packages/material/scss/checkbox/_layout.scss | 2 +- packages/material/scss/checkbox/_theme.scss | 2 +- packages/material/scss/checkbox/_variables.scss | 2 +- packages/material/scss/chip/_layout.scss | 2 +- packages/material/scss/chip/_theme.scss | 2 +- packages/material/scss/chip/_variables.scss | 2 +- packages/material/scss/color-preview/_layout.scss | 2 +- packages/material/scss/color-preview/_theme.scss | 2 +- .../material/scss/color-preview/_variables.scss | 2 +- packages/material/scss/coloreditor/_layout.scss | 2 +- packages/material/scss/coloreditor/_theme.scss | 2 +- packages/material/scss/coloreditor/_variables.scss | 5 +++-- packages/material/scss/colorgradient/_layout.scss | 2 +- packages/material/scss/colorgradient/_theme.scss | 2 +- .../material/scss/colorgradient/_variables.scss | 5 +++-- packages/material/scss/colorpalette/_layout.scss | 2 +- packages/material/scss/colorpalette/_theme.scss | 2 +- packages/material/scss/colorpalette/_variables.scss | 5 +++-- packages/material/scss/colorpicker/_layout.scss | 2 +- packages/material/scss/colorpicker/_theme.scss | 2 +- packages/material/scss/combobox/_layout.scss | 2 +- packages/material/scss/combobox/_theme.scss | 2 +- packages/material/scss/core/_index.scss | 2 ++ .../scss/core/color-system/_swatch-legacy.scss | 2 +- packages/material/scss/dataviz/_layout.scss | 2 +- packages/material/scss/dataviz/_theme.scss | 2 +- packages/material/scss/dataviz/_variables.scss | 2 +- packages/material/scss/dateinput/_layout.scss | 2 +- packages/material/scss/dateinput/_theme.scss | 2 +- packages/material/scss/datepicker/_layout.scss | 2 +- packages/material/scss/datepicker/_theme.scss | 2 +- packages/material/scss/daterangepicker/_layout.scss | 2 +- packages/material/scss/daterangepicker/_theme.scss | 2 +- .../material/scss/daterangepicker/_variables.scss | 2 +- packages/material/scss/datetimepicker/_layout.scss | 2 +- packages/material/scss/datetimepicker/_theme.scss | 2 +- .../material/scss/datetimepicker/_variables.scss | 2 +- packages/material/scss/dialog/_layout.scss | 2 +- packages/material/scss/dialog/_theme.scss | 2 +- packages/material/scss/dialog/_variables.scss | 2 +- packages/material/scss/dock-manager/_layout.scss | 2 +- packages/material/scss/dock-manager/_theme.scss | 2 +- packages/material/scss/dock-manager/_variables.scss | 2 +- packages/material/scss/draggable/_layout.scss | 2 +- packages/material/scss/draggable/_theme.scss | 2 +- packages/material/scss/draggable/_variables.scss | 2 +- packages/material/scss/drawer/_layout.scss | 2 +- packages/material/scss/drawer/_theme.scss | 2 +- packages/material/scss/drawer/_variables.scss | 2 +- packages/material/scss/dropdowngrid/_layout.scss | 2 +- packages/material/scss/dropdowngrid/_theme.scss | 2 +- packages/material/scss/dropdownlist/_layout.scss | 2 +- packages/material/scss/dropdownlist/_theme.scss | 2 +- packages/material/scss/dropdowntree/_layout.scss | 2 +- packages/material/scss/dropdowntree/_theme.scss | 2 +- packages/material/scss/dropdowntree/_variables.scss | 2 +- packages/material/scss/dropzone/_layout.scss | 2 +- packages/material/scss/dropzone/_theme.scss | 2 +- packages/material/scss/dropzone/_variables.scss | 2 +- packages/material/scss/editor/_layout.scss | 2 +- packages/material/scss/editor/_theme.scss | 2 +- packages/material/scss/editor/_variables.scss | 2 +- packages/material/scss/expansion-panel/_layout.scss | 2 +- packages/material/scss/expansion-panel/_theme.scss | 2 +- .../material/scss/expansion-panel/_variables.scss | 2 +- packages/material/scss/fab/_layout.scss | 2 +- packages/material/scss/fab/_theme.scss | 2 +- packages/material/scss/fab/_variables.scss | 2 +- packages/material/scss/filemanager/_layout.scss | 2 +- packages/material/scss/filemanager/_theme.scss | 2 +- packages/material/scss/filemanager/_variables.scss | 2 +- packages/material/scss/filter/_layout.scss | 2 +- packages/material/scss/filter/_theme.scss | 2 +- packages/material/scss/filter/_variables.scss | 2 +- packages/material/scss/floating-label/_layout.scss | 2 +- packages/material/scss/floating-label/_theme.scss | 2 +- .../material/scss/floating-label/_variables.scss | 2 +- packages/material/scss/forms/_layout.scss | 2 +- packages/material/scss/forms/_theme.scss | 2 +- packages/material/scss/forms/_variables.scss | 2 +- packages/material/scss/gantt/_layout.scss | 2 +- packages/material/scss/gantt/_theme.scss | 2 +- packages/material/scss/gantt/_variables.scss | 2 +- packages/material/scss/grid/_layout.scss | 2 +- packages/material/scss/grid/_theme.scss | 2 +- packages/material/scss/grid/_variables.scss | 2 +- packages/material/scss/gridlayout/_layout.scss | 2 +- packages/material/scss/gridlayout/_theme.scss | 2 +- packages/material/scss/icons/_layout.scss | 2 +- packages/material/scss/icons/_theme.scss | 2 +- packages/material/scss/icons/_variables.scss | 2 +- packages/material/scss/imageeditor/_layout.scss | 2 +- packages/material/scss/imageeditor/_theme.scss | 2 +- packages/material/scss/imageeditor/_variables.scss | 2 +- packages/material/scss/input/_layout.scss | 2 +- packages/material/scss/input/_theme.scss | 2 +- packages/material/scss/input/_variables.scss | 2 +- packages/material/scss/list/_layout.scss | 2 +- packages/material/scss/list/_theme.scss | 2 +- packages/material/scss/list/_variables.scss | 2 +- packages/material/scss/listbox/_layout.scss | 2 +- packages/material/scss/listbox/_theme.scss | 2 +- packages/material/scss/listbox/_variables.scss | 2 +- packages/material/scss/listgroup/_layout.scss | 2 +- packages/material/scss/listgroup/_theme.scss | 2 +- packages/material/scss/listgroup/_variables.scss | 2 +- packages/material/scss/listview/_layout.scss | 2 +- packages/material/scss/listview/_theme.scss | 2 +- packages/material/scss/listview/_variables.scss | 2 +- packages/material/scss/loader/_layout.scss | 2 +- packages/material/scss/loader/_theme.scss | 2 +- packages/material/scss/loader/_variables.scss | 2 +- packages/material/scss/map/_layout.scss | 2 +- packages/material/scss/map/_theme.scss | 2 +- packages/material/scss/map/_variables.scss | 2 +- packages/material/scss/maskedtextbox/_layout.scss | 2 +- packages/material/scss/maskedtextbox/_theme.scss | 2 +- packages/material/scss/mediaplayer/_layout.scss | 2 +- packages/material/scss/mediaplayer/_theme.scss | 2 +- packages/material/scss/mediaplayer/_variables.scss | 2 +- packages/material/scss/menu-button/_layout.scss | 2 +- packages/material/scss/menu-button/_theme.scss | 2 +- packages/material/scss/menu-button/_variables.scss | 2 +- packages/material/scss/menu/_layout.scss | 2 +- packages/material/scss/menu/_theme.scss | 2 +- packages/material/scss/menu/_variables.scss | 2 +- packages/material/scss/messagebox/_layout.scss | 2 +- packages/material/scss/messagebox/_theme.scss | 2 +- packages/material/scss/messagebox/_variables.scss | 2 +- packages/material/scss/multiselect/_layout.scss | 2 +- packages/material/scss/multiselect/_theme.scss | 2 +- packages/material/scss/no-data/_layout.scss | 2 +- packages/material/scss/no-data/_theme.scss | 2 +- packages/material/scss/no-data/_variables.scss | 2 +- packages/material/scss/notification/_layout.scss | 2 +- packages/material/scss/notification/_theme.scss | 2 +- packages/material/scss/notification/_variables.scss | 2 +- packages/material/scss/numerictextbox/_layout.scss | 2 +- packages/material/scss/numerictextbox/_theme.scss | 2 +- packages/material/scss/orgchart/_layout.scss | 2 +- packages/material/scss/orgchart/_theme.scss | 2 +- packages/material/scss/orgchart/_variables.scss | 2 +- packages/material/scss/otp/_layout.scss | 2 +- packages/material/scss/otp/_theme.scss | 2 +- packages/material/scss/otp/_variables.scss | 2 +- packages/material/scss/overlay/_layout.scss | 2 +- packages/material/scss/overlay/_theme.scss | 2 +- packages/material/scss/overlay/_variables.scss | 2 +- packages/material/scss/pager/_layout.scss | 2 +- packages/material/scss/pager/_theme.scss | 2 +- packages/material/scss/pager/_variables.scss | 2 +- packages/material/scss/panel/_layout.scss | 2 +- packages/material/scss/panel/_theme.scss | 2 +- packages/material/scss/panel/_variables.scss | 2 +- packages/material/scss/panelbar/_layout.scss | 2 +- packages/material/scss/panelbar/_theme.scss | 2 +- packages/material/scss/panelbar/_variables.scss | 2 +- packages/material/scss/pdf-viewer/_layout.scss | 2 +- packages/material/scss/pdf-viewer/_theme.scss | 2 +- packages/material/scss/pdf-viewer/_variables.scss | 2 +- packages/material/scss/pivotgrid/_layout.scss | 2 +- packages/material/scss/pivotgrid/_theme.scss | 2 +- packages/material/scss/pivotgrid/_variables.scss | 2 +- packages/material/scss/popover/_layout.scss | 2 +- packages/material/scss/popover/_theme.scss | 2 +- packages/material/scss/popover/_variables.scss | 2 +- packages/material/scss/popup/_layout.scss | 2 +- packages/material/scss/popup/_theme.scss | 2 +- packages/material/scss/popup/_variables.scss | 2 +- packages/material/scss/progressbar/_layout.scss | 2 +- packages/material/scss/progressbar/_theme.scss | 2 +- packages/material/scss/progressbar/_variables.scss | 2 +- packages/material/scss/prompt/_layout.scss | 2 +- packages/material/scss/prompt/_theme.scss | 2 +- packages/material/scss/prompt/_variables.scss | 2 +- packages/material/scss/radio/_layout.scss | 2 +- packages/material/scss/radio/_theme.scss | 2 +- packages/material/scss/radio/_variables.scss | 2 +- packages/material/scss/rating/_layout.scss | 2 +- packages/material/scss/rating/_theme.scss | 2 +- packages/material/scss/rating/_variables.scss | 2 +- packages/material/scss/responsivepanel/_layout.scss | 2 +- packages/material/scss/responsivepanel/_theme.scss | 2 +- packages/material/scss/ripple/_layout.scss | 2 +- packages/material/scss/ripple/_theme.scss | 2 +- packages/material/scss/scheduler/_layout.scss | 2 +- packages/material/scss/scheduler/_theme.scss | 2 +- packages/material/scss/scheduler/_variables.scss | 2 +- packages/material/scss/scroller/_layout.scss | 2 +- packages/material/scss/scroller/_theme.scss | 2 +- packages/material/scss/scrollview/_layout.scss | 2 +- packages/material/scss/scrollview/_theme.scss | 2 +- packages/material/scss/scrollview/_variables.scss | 2 +- packages/material/scss/searchbox/_layout.scss | 2 +- packages/material/scss/searchbox/_theme.scss | 2 +- packages/material/scss/signature/_layout.scss | 2 +- packages/material/scss/signature/_theme.scss | 2 +- packages/material/scss/signature/_variables.scss | 2 +- packages/material/scss/skeleton/_layout.scss | 2 +- packages/material/scss/skeleton/_theme.scss | 2 +- packages/material/scss/skeleton/_variables.scss | 2 +- packages/material/scss/slider/_layout.scss | 2 +- packages/material/scss/slider/_theme.scss | 2 +- packages/material/scss/slider/_variables.scss | 2 +- packages/material/scss/split-button/_layout.scss | 2 +- packages/material/scss/split-button/_theme.scss | 2 +- packages/material/scss/split-button/_variables.scss | 2 +- packages/material/scss/splitter/_layout.scss | 2 +- packages/material/scss/splitter/_theme.scss | 2 +- packages/material/scss/splitter/_variables.scss | 2 +- packages/material/scss/spreadsheet/_layout.scss | 2 +- packages/material/scss/spreadsheet/_theme.scss | 2 +- packages/material/scss/spreadsheet/_variables.scss | 3 ++- packages/material/scss/stacklayout/_layout.scss | 2 +- packages/material/scss/stacklayout/_theme.scss | 2 +- packages/material/scss/stepper/_layout.scss | 2 +- packages/material/scss/stepper/_theme.scss | 2 +- packages/material/scss/stepper/_variables.scss | 2 +- packages/material/scss/switch/_layout.scss | 2 +- packages/material/scss/switch/_theme.scss | 2 +- packages/material/scss/switch/_variables.scss | 2 +- packages/material/scss/table/_layout.scss | 2 +- packages/material/scss/table/_theme.scss | 2 +- packages/material/scss/table/_variables.scss | 2 +- packages/material/scss/tabstrip/_layout.scss | 2 +- packages/material/scss/tabstrip/_theme.scss | 2 +- packages/material/scss/tabstrip/_variables.scss | 5 +++-- packages/material/scss/taskboard/_layout.scss | 2 +- packages/material/scss/taskboard/_theme.scss | 2 +- packages/material/scss/taskboard/_variables.scss | 2 +- packages/material/scss/textarea/_layout.scss | 2 +- packages/material/scss/textarea/_theme.scss | 2 +- packages/material/scss/textbox/_layout.scss | 2 +- packages/material/scss/textbox/_theme.scss | 2 +- packages/material/scss/tilelayout/_layout.scss | 2 +- packages/material/scss/tilelayout/_theme.scss | 2 +- packages/material/scss/tilelayout/_variables.scss | 2 +- packages/material/scss/time-marker/_layout.scss | 2 +- packages/material/scss/time-marker/_theme.scss | 2 +- packages/material/scss/time-marker/_variables.scss | 2 +- .../material/scss/timedurationpicker/_layout.scss | 2 +- .../material/scss/timedurationpicker/_theme.scss | 2 +- packages/material/scss/timeline/_layout.scss | 2 +- packages/material/scss/timeline/_theme.scss | 2 +- packages/material/scss/timeline/_variables.scss | 2 +- packages/material/scss/timepicker/_layout.scss | 2 +- packages/material/scss/timepicker/_theme.scss | 2 +- packages/material/scss/timeselector/_layout.scss | 2 +- packages/material/scss/timeselector/_theme.scss | 2 +- packages/material/scss/timeselector/_variables.scss | 2 +- packages/material/scss/toolbar/_layout.scss | 2 +- packages/material/scss/toolbar/_theme.scss | 2 +- packages/material/scss/toolbar/_variables.scss | 13 ++++++++++--- packages/material/scss/tooltip/_layout.scss | 2 +- packages/material/scss/tooltip/_theme.scss | 2 +- packages/material/scss/tooltip/_variables.scss | 2 +- packages/material/scss/treelist/_layout.scss | 2 +- packages/material/scss/treelist/_theme.scss | 2 +- packages/material/scss/treelist/_variables.scss | 2 +- packages/material/scss/treeview/_layout.scss | 2 +- packages/material/scss/treeview/_theme.scss | 2 +- packages/material/scss/treeview/_variables.scss | 2 +- packages/material/scss/typography/_layout.scss | 2 +- packages/material/scss/typography/_theme.scss | 2 +- packages/material/scss/typography/_variables.scss | 2 +- packages/material/scss/upload/_layout.scss | 2 +- packages/material/scss/upload/_theme.scss | 2 +- packages/material/scss/upload/_variables.scss | 2 +- packages/material/scss/validator/_layout.scss | 2 +- packages/material/scss/validator/_theme.scss | 2 +- .../material/scss/virtual-scroller/_layout.scss | 2 +- packages/material/scss/virtual-scroller/_theme.scss | 2 +- packages/material/scss/window/_layout.scss | 2 +- packages/material/scss/window/_theme.scss | 2 +- packages/material/scss/window/_variables.scss | 2 +- packages/material/scss/wizard/_layout.scss | 2 +- packages/material/scss/wizard/_theme.scss | 2 +- packages/material/scss/wizard/_variables.scss | 2 +- 323 files changed, 341 insertions(+), 335 deletions(-) diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss index 89a76720f45..1fc76a3ed6d 100644 --- a/packages/material/scss/_variables.scss +++ b/packages/material/scss/_variables.scss @@ -1,10 +1,2 @@ -$kendo-enable-typography: false !default; - -$kendo-use-input-button-width: false !default; -$kendo-use-input-spinner-width: false !default; -$kendo-use-input-spinner-icon-offset: false !default; - $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; - -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; diff --git a/packages/material/scss/action-buttons/_layout.scss b/packages/material/scss/action-buttons/_layout.scss index 3219b1e7e2a..9c0b9cf1d02 100644 --- a/packages/material/scss/action-buttons/_layout.scss +++ b/packages/material/scss/action-buttons/_layout.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/action-buttons/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-buttons/_layout.scss" as *; @mixin kendo-action-buttons--layout() { diff --git a/packages/material/scss/action-buttons/_theme.scss b/packages/material/scss/action-buttons/_theme.scss index 7c263fa3bbb..347fd0c3504 100644 --- a/packages/material/scss/action-buttons/_theme.scss +++ b/packages/material/scss/action-buttons/_theme.scss @@ -1,7 +1,7 @@ @use "../core/_index.scss" as *; @use "../button/_variables.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/action-buttons/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-buttons/_theme.scss" as *; @mixin kendo-action-buttons--theme() { diff --git a/packages/material/scss/action-buttons/_variables.scss b/packages/material/scss/action-buttons/_variables.scss index 9b172c75d52..a607d7136b5 100644 --- a/packages/material/scss/action-buttons/_variables.scss +++ b/packages/material/scss/action-buttons/_variables.scss @@ -13,7 +13,7 @@ $kendo-actions-text: null !default; $kendo-actions-border: null !default; $kendo-actions-gradient: null !default; -@forward "@progress/kendo-theme-default/scss/action-buttons/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/action-buttons/_variables.scss" with ( $kendo-actions-margin-top: $kendo-actions-margin-top, $kendo-actions-padding-x: $kendo-actions-padding-x, $kendo-actions-padding-y: $kendo-actions-padding-y, diff --git a/packages/material/scss/action-sheet/_layout.scss b/packages/material/scss/action-sheet/_layout.scss index dc4b16cd261..954a36f134e 100644 --- a/packages/material/scss/action-sheet/_layout.scss +++ b/packages/material/scss/action-sheet/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-sheet/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-sheet/_layout.scss" as *; @mixin kendo-action-sheet--layout() { diff --git a/packages/material/scss/action-sheet/_theme.scss b/packages/material/scss/action-sheet/_theme.scss index f9176b04dbd..e8d2b47d172 100644 --- a/packages/material/scss/action-sheet/_theme.scss +++ b/packages/material/scss/action-sheet/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-sheet/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-sheet/_theme.scss" as *; @mixin kendo-action-sheet--theme() { diff --git a/packages/material/scss/action-sheet/_variables.scss b/packages/material/scss/action-sheet/_variables.scss index ff04a15172a..9ebbc38fdf5 100644 --- a/packages/material/scss/action-sheet/_variables.scss +++ b/packages/material/scss/action-sheet/_variables.scss @@ -92,7 +92,7 @@ $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default; $kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default; $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default; -@forward "@progress/kendo-theme-default/scss/action-sheet/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/action-sheet/_variables.scss" with ( $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x, $kendo-actionsheet-padding-y: $kendo-actionsheet-padding-y, $kendo-actionsheet-width: $kendo-actionsheet-width, diff --git a/packages/material/scss/adaptive/_layout.scss b/packages/material/scss/adaptive/_layout.scss index 18110d73c24..1fcc635d639 100644 --- a/packages/material/scss/adaptive/_layout.scss +++ b/packages/material/scss/adaptive/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/adaptive/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/adaptive/_layout.scss" as *; @mixin kendo-adaptive--layout() { diff --git a/packages/material/scss/adaptive/_theme.scss b/packages/material/scss/adaptive/_theme.scss index 9627e79f9f8..67ce73312da 100644 --- a/packages/material/scss/adaptive/_theme.scss +++ b/packages/material/scss/adaptive/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/adaptive/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/adaptive/_theme.scss" as *; @mixin kendo-adaptive--theme() { diff --git a/packages/material/scss/adaptive/_variables.scss b/packages/material/scss/adaptive/_variables.scss index 3abc23611d3..fa2ed1522be 100644 --- a/packages/material/scss/adaptive/_variables.scss +++ b/packages/material/scss/adaptive/_variables.scss @@ -30,7 +30,7 @@ $kendo-adaptive-scheduler-current-text: $kendo-color-primary !default; $kendo-adaptive-scheduler-base-text: inherit !default; $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default; -@forward "@progress/kendo-theme-default/scss/adaptive/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with ( $kendo-adaptive-bg: $kendo-adaptive-bg, $kendo-adaptive-text: $kendo-adaptive-text, $kendo-adaptive-border: $kendo-adaptive-border, diff --git a/packages/material/scss/appbar/_layout.scss b/packages/material/scss/appbar/_layout.scss index 165eb6ee06e..2c63afa1dd4 100644 --- a/packages/material/scss/appbar/_layout.scss +++ b/packages/material/scss/appbar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/appbar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/appbar/_layout.scss" as *; @mixin kendo-appbar--layout() { diff --git a/packages/material/scss/appbar/_theme.scss b/packages/material/scss/appbar/_theme.scss index 52e605eb86b..88327180bed 100644 --- a/packages/material/scss/appbar/_theme.scss +++ b/packages/material/scss/appbar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/appbar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/appbar/_theme.scss" as *; @mixin kendo-appbar--theme() { diff --git a/packages/material/scss/appbar/_variables.scss b/packages/material/scss/appbar/_variables.scss index ce8189c93a6..7424c0ecb96 100644 --- a/packages/material/scss/appbar/_variables.scss +++ b/packages/material/scss/appbar/_variables.scss @@ -56,7 +56,7 @@ $kendo-appbar-box-shadow: k-elevation(4) !default; /// @group appbar $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default; -@forward "@progress/kendo-theme-default/scss/appbar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with ( $kendo-appbar-margin-x: $kendo-appbar-margin-x, $kendo-appbar-margin-y: $kendo-appbar-margin-y, $kendo-appbar-padding-x: $kendo-appbar-padding-x, diff --git a/packages/material/scss/autocomplete/_layout.scss b/packages/material/scss/autocomplete/_layout.scss index 17bbe156d7f..abe4d723e1d 100644 --- a/packages/material/scss/autocomplete/_layout.scss +++ b/packages/material/scss/autocomplete/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/autocomplete/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/autocomplete/_layout.scss" as *; @mixin kendo-autocomplete--layout() { diff --git a/packages/material/scss/autocomplete/_theme.scss b/packages/material/scss/autocomplete/_theme.scss index 09089392cca..308a4c551eb 100644 --- a/packages/material/scss/autocomplete/_theme.scss +++ b/packages/material/scss/autocomplete/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/autocomplete/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/autocomplete/_theme.scss" as *; @mixin kendo-autocomplete--theme() { diff --git a/packages/material/scss/avatar/_layout.scss b/packages/material/scss/avatar/_layout.scss index 36396213312..fadb2ebfa9b 100644 --- a/packages/material/scss/avatar/_layout.scss +++ b/packages/material/scss/avatar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/avatar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/avatar/_layout.scss" as *; @mixin kendo-avatar--layout() { diff --git a/packages/material/scss/avatar/_theme.scss b/packages/material/scss/avatar/_theme.scss index 43f6377f11e..06cc19355cf 100644 --- a/packages/material/scss/avatar/_theme.scss +++ b/packages/material/scss/avatar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/avatar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/avatar/_theme.scss" as *; @mixin kendo-avatar--theme() { diff --git a/packages/material/scss/avatar/_variables.scss b/packages/material/scss/avatar/_variables.scss index 19255c8a2ad..c3ede129411 100644 --- a/packages/material/scss/avatar/_variables.scss +++ b/packages/material/scss/avatar/_variables.scss @@ -28,7 +28,7 @@ $kendo-avatar-sizes: ( /// @group avatar $kendo-avatar-theme-colors: $kendo-theme-colors !default; -@forward "@progress/kendo-theme-default/scss/avatar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with ( $kendo-avatar-border-width: $kendo-avatar-border-width, $kendo-avatar-font-family: $kendo-avatar-font-family, $kendo-avatar-font-size: $kendo-avatar-font-size, diff --git a/packages/material/scss/badge/_layout.scss b/packages/material/scss/badge/_layout.scss index f6d2e4c727c..995495f5afc 100644 --- a/packages/material/scss/badge/_layout.scss +++ b/packages/material/scss/badge/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/badge/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *; @mixin kendo-badge--layout() { diff --git a/packages/material/scss/badge/_theme.scss b/packages/material/scss/badge/_theme.scss index d61e955cf7b..005813cdc52 100644 --- a/packages/material/scss/badge/_theme.scss +++ b/packages/material/scss/badge/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/badge/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/badge/_theme.scss" as *; @mixin kendo-badge--theme() { diff --git a/packages/material/scss/badge/_variables.scss b/packages/material/scss/badge/_variables.scss index 2efbcadfe36..97d3efc9f8b 100644 --- a/packages/material/scss/badge/_variables.scss +++ b/packages/material/scss/badge/_variables.scss @@ -102,7 +102,7 @@ $kendo-badge-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/badge/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with ( $kendo-badge-border-width: $kendo-badge-border-width, $kendo-badge-border-radius: $kendo-badge-border-radius, $kendo-badge-padding-x: $kendo-badge-padding-x, diff --git a/packages/material/scss/bottom-navigation/_layout.scss b/packages/material/scss/bottom-navigation/_layout.scss index a5b50f1d6ca..e1d6f5dab6e 100644 --- a/packages/material/scss/bottom-navigation/_layout.scss +++ b/packages/material/scss/bottom-navigation/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/bottom-navigation/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *; @mixin kendo-bottom-navigation--layout() { diff --git a/packages/material/scss/bottom-navigation/_theme.scss b/packages/material/scss/bottom-navigation/_theme.scss index f27c71070d6..fb7d685781b 100644 --- a/packages/material/scss/bottom-navigation/_theme.scss +++ b/packages/material/scss/bottom-navigation/_theme.scss @@ -1,6 +1,6 @@ @use "../core/_index.scss" as *; @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/bottom-navigation/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *; @mixin kendo-bottom-navigation--theme() { diff --git a/packages/material/scss/bottom-navigation/_variables.scss b/packages/material/scss/bottom-navigation/_variables.scss index 05182de7b35..f864f5e3a7e 100644 --- a/packages/material/scss/bottom-navigation/_variables.scss +++ b/packages/material/scss/bottom-navigation/_variables.scss @@ -64,7 +64,7 @@ $kendo-bottom-nav-flat-bg: $kendo-component-bg !default; /// @group bottom-navigation $kendo-bottom-nav-flat-border: $kendo-component-border !default; -@forward "@progress/kendo-theme-default/scss/bottom-navigation/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with ( $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x, $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y, $kendo-bottom-nav-gap: $kendo-bottom-nav-gap, diff --git a/packages/material/scss/breadcrumb/_layout.scss b/packages/material/scss/breadcrumb/_layout.scss index d060aec0381..96a7a9dcf19 100644 --- a/packages/material/scss/breadcrumb/_layout.scss +++ b/packages/material/scss/breadcrumb/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/breadcrumb/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_layout.scss" as *; @mixin kendo-breadcrumb--layout() { diff --git a/packages/material/scss/breadcrumb/_theme.scss b/packages/material/scss/breadcrumb/_theme.scss index f11e25e8b43..5b0a91c64b0 100644 --- a/packages/material/scss/breadcrumb/_theme.scss +++ b/packages/material/scss/breadcrumb/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/breadcrumb/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_theme.scss" as *; @mixin kendo-breadcrumb--theme() { diff --git a/packages/material/scss/breadcrumb/_variables.scss b/packages/material/scss/breadcrumb/_variables.scss index ab1a430858b..662796f8135 100644 --- a/packages/material/scss/breadcrumb/_variables.scss +++ b/packages/material/scss/breadcrumb/_variables.scss @@ -234,7 +234,7 @@ $kendo-breadcrumb-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/breadcrumb/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/breadcrumb/_variables.scss" with ( $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width, $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x, $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y, diff --git a/packages/material/scss/button/_layout.scss b/packages/material/scss/button/_layout.scss index e3f0b052abe..4fa8920c391 100644 --- a/packages/material/scss/button/_layout.scss +++ b/packages/material/scss/button/_layout.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../icons/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/button/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *; @mixin kendo-button--layout() { diff --git a/packages/material/scss/button/_theme.scss b/packages/material/scss/button/_theme.scss index 2de5649d4f5..64b7e5ba5c8 100644 --- a/packages/material/scss/button/_theme.scss +++ b/packages/material/scss/button/_theme.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/button/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/button/_theme.scss" as *; @mixin kendo-button--theme() { diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss index 98cc52740f0..4334957fe55 100644 --- a/packages/material/scss/button/_variables.scss +++ b/packages/material/scss/button/_variables.scss @@ -261,7 +261,7 @@ $kendo-flat-button-focus-ring-opacity: unset !default; /// @group button $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default; -@forward "@progress/kendo-theme-default/scss/button/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with ( $kendo-button-border-width: $kendo-button-border-width, $kendo-button-border-radius: $kendo-button-border-radius, $kendo-button-padding-x: $kendo-button-padding-x, diff --git a/packages/material/scss/calendar/_layout.scss b/packages/material/scss/calendar/_layout.scss index 6dc1d198782..7b6563569da 100644 --- a/packages/material/scss/calendar/_layout.scss +++ b/packages/material/scss/calendar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/calendar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *; @mixin kendo-calendar--layout() { diff --git a/packages/material/scss/calendar/_theme.scss b/packages/material/scss/calendar/_theme.scss index 747649d66a8..dbc58ae78b5 100644 --- a/packages/material/scss/calendar/_theme.scss +++ b/packages/material/scss/calendar/_theme.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/calendar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/calendar/_theme.scss" as *; @mixin kendo-calendar--theme() { diff --git a/packages/material/scss/calendar/_variables.scss b/packages/material/scss/calendar/_variables.scss index 06b0902b99f..95a504c3592 100644 --- a/packages/material/scss/calendar/_variables.scss +++ b/packages/material/scss/calendar/_variables.scss @@ -359,7 +359,7 @@ $kendo-calendar-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/calendar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/calendar/_variables.scss" with ( $kendo-calendar-border-width: $kendo-calendar-border-width, $kendo-calendar-font-family: $kendo-calendar-font-family, $kendo-calendar-font-size: $kendo-calendar-font-size, diff --git a/packages/material/scss/captcha/_layout.scss b/packages/material/scss/captcha/_layout.scss index 1fb81b674eb..9abeda7afe0 100644 --- a/packages/material/scss/captcha/_layout.scss +++ b/packages/material/scss/captcha/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/captcha/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/captcha/_layout.scss" as *; @mixin kendo-captcha--layout() { diff --git a/packages/material/scss/captcha/_theme.scss b/packages/material/scss/captcha/_theme.scss index 15a2f7e8e47..a0a20e09ba2 100644 --- a/packages/material/scss/captcha/_theme.scss +++ b/packages/material/scss/captcha/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/captcha/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/captcha/_theme.scss" as *; @mixin kendo-captcha--theme() { diff --git a/packages/material/scss/captcha/_variables.scss b/packages/material/scss/captcha/_variables.scss index f7587237656..30f8c8b9123 100644 --- a/packages/material/scss/captcha/_variables.scss +++ b/packages/material/scss/captcha/_variables.scss @@ -48,7 +48,7 @@ $kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit /// @group captcha $kendo-captcha-validation-message-font-style: italic !default; -@forward "@progress/kendo-theme-default/scss/captcha/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/captcha/_variables.scss" with ( $kendo-captcha-spacer: $kendo-captcha-spacer, $kendo-captcha-width: $kendo-captcha-width, $kendo-captcha-font-family: $kendo-captcha-font-family, diff --git a/packages/material/scss/card/_layout.scss b/packages/material/scss/card/_layout.scss index 1c10ee935b3..9223804361e 100644 --- a/packages/material/scss/card/_layout.scss +++ b/packages/material/scss/card/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/card/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/card/_layout.scss" as *; @mixin kendo-card--layout() { diff --git a/packages/material/scss/card/_theme.scss b/packages/material/scss/card/_theme.scss index d8895742410..55449bc8eda 100644 --- a/packages/material/scss/card/_theme.scss +++ b/packages/material/scss/card/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/card/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *; @mixin kendo-card--theme() { diff --git a/packages/material/scss/card/_variables.scss b/packages/material/scss/card/_variables.scss index 3ce346e2c0f..0d34efed790 100644 --- a/packages/material/scss/card/_variables.scss +++ b/packages/material/scss/card/_variables.scss @@ -185,7 +185,7 @@ $kendo-card-callout-width: 20px !default; /// @group card $kendo-card-callout-height: 20px !default; -@forward "@progress/kendo-theme-default/scss/card/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with ( $kendo-card-padding-x: $kendo-card-padding-x, $kendo-card-padding-y: $kendo-card-padding-y, $kendo-card-border-width: $kendo-card-border-width, diff --git a/packages/material/scss/chart-wizard/_layout.scss b/packages/material/scss/chart-wizard/_layout.scss index a4a684c54fe..b5e8c2b2359 100644 --- a/packages/material/scss/chart-wizard/_layout.scss +++ b/packages/material/scss/chart-wizard/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_layout.scss" as *; @mixin kendo-chart-wizard--layout() { @include kendo-chart-wizard--layout-base(); diff --git a/packages/material/scss/chart-wizard/_theme.scss b/packages/material/scss/chart-wizard/_theme.scss index 7a01fbed74c..9ee84a9f7b7 100644 --- a/packages/material/scss/chart-wizard/_theme.scss +++ b/packages/material/scss/chart-wizard/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_theme.scss" as *; @mixin kendo-chart-wizard--theme() { @include kendo-chart-wizard--theme-base(); diff --git a/packages/material/scss/chart-wizard/_variables.scss b/packages/material/scss/chart-wizard/_variables.scss index 008810e6dc0..9f2b618da30 100644 --- a/packages/material/scss/chart-wizard/_variables.scss +++ b/packages/material/scss/chart-wizard/_variables.scss @@ -40,7 +40,7 @@ $kendo-chart-wizard-chart-type-spacing: k-spacing(6) !default; /// @group chart-wizard $kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; -@forward "@progress/kendo-theme-default/scss/chart-wizard/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chart-wizard/_variables.scss" with ( $kendo-chart-wizard-icon-area-color: $kendo-chart-wizard-icon-area-color, $kendo-chart-wizard-icon-area-bg: $kendo-chart-wizard-icon-area-bg, $kendo-chart-wizard-icon-area-border-radius: $kendo-chart-wizard-icon-area-border-radius, diff --git a/packages/material/scss/chat/_layout.scss b/packages/material/scss/chat/_layout.scss index c7cfb5a7b6a..449f8d236c7 100644 --- a/packages/material/scss/chat/_layout.scss +++ b/packages/material/scss/chat/_layout.scss @@ -1,6 +1,6 @@ @use "../core/_index.scss" as *; @use "../button/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/chat/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chat/_layout.scss" as *; @mixin kendo-chat--layout() { diff --git a/packages/material/scss/chat/_theme.scss b/packages/material/scss/chat/_theme.scss index 60445e29cc2..cf01454fb22 100644 --- a/packages/material/scss/chat/_theme.scss +++ b/packages/material/scss/chat/_theme.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/chat/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chat/_theme.scss" as *; @mixin kendo-chat--theme() { diff --git a/packages/material/scss/chat/_variables.scss b/packages/material/scss/chat/_variables.scss index 6ccae05ed08..2ac1c3691d0 100644 --- a/packages/material/scss/chat/_variables.scss +++ b/packages/material/scss/chat/_variables.scss @@ -216,7 +216,7 @@ $kendo-chat-quick-reply-shadow-spread: unset !default; /// @group chat $kendo-chat-quick-reply-shadow-opacity: 0 !default; -@forward "@progress/kendo-theme-default/scss/chat/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with ( $kendo-chat-padding-x: $kendo-chat-padding-x, $kendo-chat-padding-y: $kendo-chat-padding-y, $kendo-chat-width: $kendo-chat-width, diff --git a/packages/material/scss/checkbox/_layout.scss b/packages/material/scss/checkbox/_layout.scss index ffcf60b31a2..6a08639c6e8 100644 --- a/packages/material/scss/checkbox/_layout.scss +++ b/packages/material/scss/checkbox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/checkbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *; @mixin kendo-checkbox--layout() { diff --git a/packages/material/scss/checkbox/_theme.scss b/packages/material/scss/checkbox/_theme.scss index ec65a6b3c9f..cc953362e35 100644 --- a/packages/material/scss/checkbox/_theme.scss +++ b/packages/material/scss/checkbox/_theme.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/checkbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *; @mixin kendo-checkbox--theme() { diff --git a/packages/material/scss/checkbox/_variables.scss b/packages/material/scss/checkbox/_variables.scss index 2c5d822b4fa..39824db30d0 100644 --- a/packages/material/scss/checkbox/_variables.scss +++ b/packages/material/scss/checkbox/_variables.scss @@ -197,7 +197,7 @@ $kendo-checkbox-ripple-bg: $kendo-color-primary !default; /// @group checkbox $kendo-checkbox-ripple-opacity: .2 !default; -@forward "@progress/kendo-theme-default/scss/checkbox/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/checkbox/_variables.scss" with ( $kendo-checkbox-border-width: $kendo-checkbox-border-width, $kendo-checkbox-sm-size: $kendo-checkbox-sm-size, $kendo-checkbox-md-size: $kendo-checkbox-md-size, diff --git a/packages/material/scss/chip/_layout.scss b/packages/material/scss/chip/_layout.scss index 9fc23d87468..192a18861c7 100644 --- a/packages/material/scss/chip/_layout.scss +++ b/packages/material/scss/chip/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chip/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *; @mixin kendo-chip--layout() { diff --git a/packages/material/scss/chip/_theme.scss b/packages/material/scss/chip/_theme.scss index f467bc9c746..393ac16bfce 100644 --- a/packages/material/scss/chip/_theme.scss +++ b/packages/material/scss/chip/_theme.scss @@ -1,7 +1,7 @@ @use "../core/_index.scss" as *; @use "./_variables.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/chip/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *; @mixin kendo-chip--theme() { diff --git a/packages/material/scss/chip/_variables.scss b/packages/material/scss/chip/_variables.scss index 24e0e2dbbde..1ff215e1ff8 100644 --- a/packages/material/scss/chip/_variables.scss +++ b/packages/material/scss/chip/_variables.scss @@ -182,7 +182,7 @@ $kendo-chip-list-sizes: ( lg: k-spacing(1) ) !default; -@forward "@progress/kendo-theme-default/scss/chip/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with ( $kendo-chip-border-width: $kendo-chip-border-width, $kendo-chip-spacing: $kendo-chip-spacing, $kendo-chip-padding-x: $kendo-chip-padding-x, diff --git a/packages/material/scss/color-preview/_layout.scss b/packages/material/scss/color-preview/_layout.scss index 832d1e19a0c..64faf8bbef5 100644 --- a/packages/material/scss/color-preview/_layout.scss +++ b/packages/material/scss/color-preview/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/color-preview/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/color-preview/_layout.scss" as *; @mixin kendo-color-preview--layout() { diff --git a/packages/material/scss/color-preview/_theme.scss b/packages/material/scss/color-preview/_theme.scss index 6f047067c1e..f91de46dd03 100644 --- a/packages/material/scss/color-preview/_theme.scss +++ b/packages/material/scss/color-preview/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/color-preview/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/color-preview/_theme.scss" as *; @mixin kendo-color-preview--theme() { diff --git a/packages/material/scss/color-preview/_variables.scss b/packages/material/scss/color-preview/_variables.scss index fe470fcd490..80fdd92cf78 100644 --- a/packages/material/scss/color-preview/_variables.scss +++ b/packages/material/scss/color-preview/_variables.scss @@ -16,7 +16,7 @@ $kendo-color-preview-no-color-border: null !default; $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,") ) !default; $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default; -@forward "@progress/kendo-theme-default/scss/color-preview/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/color-preview/_variables.scss" with ( $kendo-color-preview-border-radius: $kendo-color-preview-border-radius, $kendo-color-preview-border-width: $kendo-color-preview-border-width, $kendo-color-preview-bg: $kendo-color-preview-bg, diff --git a/packages/material/scss/coloreditor/_layout.scss b/packages/material/scss/coloreditor/_layout.scss index f9c4066c8d4..988ff3748e6 100644 --- a/packages/material/scss/coloreditor/_layout.scss +++ b/packages/material/scss/coloreditor/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/coloreditor/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/coloreditor/_layout.scss" as *; @mixin kendo-color-editor--layout() { diff --git a/packages/material/scss/coloreditor/_theme.scss b/packages/material/scss/coloreditor/_theme.scss index edd9715eae1..5926d13761b 100644 --- a/packages/material/scss/coloreditor/_theme.scss +++ b/packages/material/scss/coloreditor/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/coloreditor/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/coloreditor/_theme.scss" as *; @mixin kendo-color-editor--theme() { diff --git a/packages/material/scss/coloreditor/_variables.scss b/packages/material/scss/coloreditor/_variables.scss index f5607b7c89f..46b1464e27d 100644 --- a/packages/material/scss/coloreditor/_variables.scss +++ b/packages/material/scss/coloreditor/_variables.scss @@ -200,7 +200,7 @@ $kendo-color-editor-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/coloreditor/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/coloreditor/_variables.scss" with ( $kendo-color-editor-spacer: $kendo-color-editor-spacer, $kendo-color-editor-min-width: $kendo-color-editor-min-width, $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width, @@ -251,5 +251,6 @@ $kendo-color-editor-sizes: ( $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap, $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color, $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline, - $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset + $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset, + $kendo-color-editor-sizes: $kendo-color-editor-sizes ); diff --git a/packages/material/scss/colorgradient/_layout.scss b/packages/material/scss/colorgradient/_layout.scss index 7feb82094bc..dc6ddc4d2eb 100644 --- a/packages/material/scss/colorgradient/_layout.scss +++ b/packages/material/scss/colorgradient/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/colorgradient/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/colorgradient/_layout.scss" as *; @mixin kendo-color-gradient--layout() { diff --git a/packages/material/scss/colorgradient/_theme.scss b/packages/material/scss/colorgradient/_theme.scss index ca382b1cd21..cd771a74dab 100644 --- a/packages/material/scss/colorgradient/_theme.scss +++ b/packages/material/scss/colorgradient/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/colorgradient/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/colorgradient/_theme.scss" as *; @mixin kendo-color-gradient--theme() { diff --git a/packages/material/scss/colorgradient/_variables.scss b/packages/material/scss/colorgradient/_variables.scss index 13054cdccb8..ba1a58db3b3 100644 --- a/packages/material/scss/colorgradient/_variables.scss +++ b/packages/material/scss/colorgradient/_variables.scss @@ -254,7 +254,7 @@ $kendo-color-gradient-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/colorgradient/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/colorgradient/_variables.scss" with ( $kendo-color-gradient-spacer: $kendo-color-gradient-spacer, $kendo-color-gradient-width: $kendo-color-gradient-width, $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width, @@ -321,5 +321,6 @@ $kendo-color-gradient-sizes: ( $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width, $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width, $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight, - $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer + $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer, + $kendo-color-gradient-sizes: $kendo-color-gradient-sizes ); diff --git a/packages/material/scss/colorpalette/_layout.scss b/packages/material/scss/colorpalette/_layout.scss index ea52a17694c..0e2739af44d 100644 --- a/packages/material/scss/colorpalette/_layout.scss +++ b/packages/material/scss/colorpalette/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/colorpalette/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/colorpalette/_layout.scss" as *; @mixin kendo-color-palette--layout() { diff --git a/packages/material/scss/colorpalette/_theme.scss b/packages/material/scss/colorpalette/_theme.scss index a8426a1706c..f81ae3c6951 100644 --- a/packages/material/scss/colorpalette/_theme.scss +++ b/packages/material/scss/colorpalette/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/colorpalette/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/colorpalette/_theme.scss" as *; @mixin kendo-color-palette--theme() { diff --git a/packages/material/scss/colorpalette/_variables.scss b/packages/material/scss/colorpalette/_variables.scss index 12617435fdf..d504073890e 100644 --- a/packages/material/scss/colorpalette/_variables.scss +++ b/packages/material/scss/colorpalette/_variables.scss @@ -63,7 +63,7 @@ $kendo-color-palette-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/colorpalette/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/colorpalette/_variables.scss" with ( $kendo-color-palette-font-family: $kendo-color-palette-font-family, $kendo-color-palette-font-size: $kendo-color-palette-font-size, $kendo-color-palette-line-height: $kendo-color-palette-line-height, @@ -77,5 +77,6 @@ $kendo-color-palette-sizes: ( $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-height, $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow, $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow, - $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow + $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow, + $kendo-color-palette-sizes: $kendo-color-palette-sizes ); diff --git a/packages/material/scss/colorpicker/_layout.scss b/packages/material/scss/colorpicker/_layout.scss index b1388d8e6cb..7e63ddf1fff 100644 --- a/packages/material/scss/colorpicker/_layout.scss +++ b/packages/material/scss/colorpicker/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/colorpicker/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/colorpicker/_layout.scss" as *; @mixin kendo-color-picker--layout() { diff --git a/packages/material/scss/colorpicker/_theme.scss b/packages/material/scss/colorpicker/_theme.scss index deb35549bea..0480dcb7863 100644 --- a/packages/material/scss/colorpicker/_theme.scss +++ b/packages/material/scss/colorpicker/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/colorpicker/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/colorpicker/_theme.scss" as *; @mixin kendo-color-picker--theme() { diff --git a/packages/material/scss/combobox/_layout.scss b/packages/material/scss/combobox/_layout.scss index e72dda4c08f..dd3b1eccf98 100644 --- a/packages/material/scss/combobox/_layout.scss +++ b/packages/material/scss/combobox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/combobox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/combobox/_layout.scss" as *; @mixin kendo-combobox--layout() { diff --git a/packages/material/scss/combobox/_theme.scss b/packages/material/scss/combobox/_theme.scss index 1f1fb5d3524..83cb33c785d 100644 --- a/packages/material/scss/combobox/_theme.scss +++ b/packages/material/scss/combobox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/combobox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/combobox/_theme.scss" as *; @mixin kendo-combobox--theme() { diff --git a/packages/material/scss/core/_index.scss b/packages/material/scss/core/_index.scss index b995e5c4701..d5176f4c7ec 100644 --- a/packages/material/scss/core/_index.scss +++ b/packages/material/scss/core/_index.scss @@ -46,6 +46,8 @@ // Spacing $_default-spacing: $kendo-spacing, $kendo-spacing: $kendo-spacing !default, + $kendo-use-input-button-width: false !default, + $kendo-use-input-spinner-width: false !default, ); // Backward compatibility diff --git a/packages/material/scss/core/color-system/_swatch-legacy.scss b/packages/material/scss/core/color-system/_swatch-legacy.scss index e75491593f3..bd15d7fae6e 100644 --- a/packages/material/scss/core/color-system/_swatch-legacy.scss +++ b/packages/material/scss/core/color-system/_swatch-legacy.scss @@ -199,7 +199,7 @@ $kendo-theme-colors: ( ) !default; -@forward "@progress/kendo-theme-default/scss/core/color-system/_swatch-legacy.scss" with ( +@forward "@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss" with ( $kendo-color-primary: $kendo-color-primary, $kendo-color-primary-lighter: $kendo-color-primary-lighter, $kendo-color-primary-darker: $kendo-color-primary-darker, diff --git a/packages/material/scss/dataviz/_layout.scss b/packages/material/scss/dataviz/_layout.scss index a82dd3452d8..7fa46e3aa68 100644 --- a/packages/material/scss/dataviz/_layout.scss +++ b/packages/material/scss/dataviz/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dataviz/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dataviz/_layout.scss" as *; @mixin kendo-dataviz--layout() { diff --git a/packages/material/scss/dataviz/_theme.scss b/packages/material/scss/dataviz/_theme.scss index c7abd0b309a..0cf3a8cc85f 100644 --- a/packages/material/scss/dataviz/_theme.scss +++ b/packages/material/scss/dataviz/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dataviz/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dataviz/_theme.scss" as *; @mixin kendo-dataviz--theme() { diff --git a/packages/material/scss/dataviz/_variables.scss b/packages/material/scss/dataviz/_variables.scss index d7f140b592e..889721eb358 100644 --- a/packages/material/scss/dataviz/_variables.scss +++ b/packages/material/scss/dataviz/_variables.scss @@ -152,7 +152,7 @@ $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default; $kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default; $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default; -@forward "@progress/kendo-theme-default/scss/dataviz/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/dataviz/_variables.scss" with ( $kendo-series-a: $kendo-series-a, $kendo-series-a-dark: $kendo-series-a-dark, $kendo-series-a-darker: $kendo-series-a-darker, diff --git a/packages/material/scss/dateinput/_layout.scss b/packages/material/scss/dateinput/_layout.scss index 72f3e09cd69..9c221cc3bbd 100644 --- a/packages/material/scss/dateinput/_layout.scss +++ b/packages/material/scss/dateinput/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dateinput/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dateinput/_layout.scss" as *; @mixin kendo-date-input--layout() { diff --git a/packages/material/scss/dateinput/_theme.scss b/packages/material/scss/dateinput/_theme.scss index 59db93e37cd..dace5ad47a9 100644 --- a/packages/material/scss/dateinput/_theme.scss +++ b/packages/material/scss/dateinput/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dateinput/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dateinput/_theme.scss" as *; @mixin kendo-date-input--theme() { diff --git a/packages/material/scss/datepicker/_layout.scss b/packages/material/scss/datepicker/_layout.scss index 5722176e50e..8d712b33102 100644 --- a/packages/material/scss/datepicker/_layout.scss +++ b/packages/material/scss/datepicker/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/datepicker/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/datepicker/_layout.scss" as *; @mixin kendo-date-picker--layout() { diff --git a/packages/material/scss/datepicker/_theme.scss b/packages/material/scss/datepicker/_theme.scss index 58186e13910..2a9002415a4 100644 --- a/packages/material/scss/datepicker/_theme.scss +++ b/packages/material/scss/datepicker/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/datepicker/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/datepicker/_theme.scss" as *; @mixin kendo-date-picker--theme() { diff --git a/packages/material/scss/daterangepicker/_layout.scss b/packages/material/scss/daterangepicker/_layout.scss index 04d5f7a9ef1..d429bf09169 100644 --- a/packages/material/scss/daterangepicker/_layout.scss +++ b/packages/material/scss/daterangepicker/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/daterangepicker/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/daterangepicker/_layout.scss" as *; @mixin kendo-date-range-picker--layout() { diff --git a/packages/material/scss/daterangepicker/_theme.scss b/packages/material/scss/daterangepicker/_theme.scss index d6d8acfb559..b6bb7d1cde1 100644 --- a/packages/material/scss/daterangepicker/_theme.scss +++ b/packages/material/scss/daterangepicker/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/daterangepicker/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/daterangepicker/_theme.scss" as *; @mixin kendo-date-range-picker--theme() { diff --git a/packages/material/scss/daterangepicker/_variables.scss b/packages/material/scss/daterangepicker/_variables.scss index 56cd8eb3381..cc8c6cd3eae 100644 --- a/packages/material/scss/daterangepicker/_variables.scss +++ b/packages/material/scss/daterangepicker/_variables.scss @@ -1,6 +1,6 @@ // Daterangepicker $kendo-daterange-picker-input-width: 10em !default; -@forward "@progress/kendo-theme-default/scss/daterangepicker/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with ( $kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width ); diff --git a/packages/material/scss/datetimepicker/_layout.scss b/packages/material/scss/datetimepicker/_layout.scss index 180730f6f5c..54198b93a19 100644 --- a/packages/material/scss/datetimepicker/_layout.scss +++ b/packages/material/scss/datetimepicker/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/datetimepicker/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/datetimepicker/_layout.scss" as *; @mixin kendo-date-time-picker--layout() { diff --git a/packages/material/scss/datetimepicker/_theme.scss b/packages/material/scss/datetimepicker/_theme.scss index a530468de8c..ced009c166b 100644 --- a/packages/material/scss/datetimepicker/_theme.scss +++ b/packages/material/scss/datetimepicker/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/datetimepicker/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/datetimepicker/_theme.scss" as *; @mixin kendo-date-time-picker--theme() { diff --git a/packages/material/scss/datetimepicker/_variables.scss b/packages/material/scss/datetimepicker/_variables.scss index 95fe341aea6..9cdb7d6af68 100644 --- a/packages/material/scss/datetimepicker/_variables.scss +++ b/packages/material/scss/datetimepicker/_variables.scss @@ -3,6 +3,6 @@ // DateTime $kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default; -@forward "@progress/kendo-theme-default/scss/datetimepicker/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/datetimepicker/_variables.scss" with ( $kendo-datetime-width: $kendo-datetime-width ); diff --git a/packages/material/scss/dialog/_layout.scss b/packages/material/scss/dialog/_layout.scss index 77ff34e1e4e..b23d5650071 100644 --- a/packages/material/scss/dialog/_layout.scss +++ b/packages/material/scss/dialog/_layout.scss @@ -1,6 +1,6 @@ @use "sass:list"; @use "../window/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/dialog/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dialog/_layout.scss" as *; @mixin kendo-dialog--layout() { diff --git a/packages/material/scss/dialog/_theme.scss b/packages/material/scss/dialog/_theme.scss index 83265d4644c..63bee6a2795 100644 --- a/packages/material/scss/dialog/_theme.scss +++ b/packages/material/scss/dialog/_theme.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/dialog/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dialog/_theme.scss" as *; @mixin kendo-dialog--theme() { diff --git a/packages/material/scss/dialog/_variables.scss b/packages/material/scss/dialog/_variables.scss index 574ec2a896d..5eb8e699a06 100644 --- a/packages/material/scss/dialog/_variables.scss +++ b/packages/material/scss/dialog/_variables.scss @@ -35,7 +35,7 @@ $kendo-dialog-theme-colors: ( "dark": map.get($kendo-theme-colors, "dark") ) !default; -@forward "@progress/kendo-theme-default/scss/dialog/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with ( $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg, $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text, $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border, diff --git a/packages/material/scss/dock-manager/_layout.scss b/packages/material/scss/dock-manager/_layout.scss index 68ec4db61c3..174dbd42ca7 100644 --- a/packages/material/scss/dock-manager/_layout.scss +++ b/packages/material/scss/dock-manager/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dock-manager/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dock-manager/_layout.scss" as *; @mixin kendo-dock-manager--layout() { @include kendo-dock-manager--layout-base(); diff --git a/packages/material/scss/dock-manager/_theme.scss b/packages/material/scss/dock-manager/_theme.scss index 737918e7cce..315b71242ab 100644 --- a/packages/material/scss/dock-manager/_theme.scss +++ b/packages/material/scss/dock-manager/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dock-manager/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dock-manager/_theme.scss" as *; @mixin kendo-dock-manager--theme() { @include kendo-dock-manager--theme-base(); diff --git a/packages/material/scss/dock-manager/_variables.scss b/packages/material/scss/dock-manager/_variables.scss index 7033f6642e7..0fc689ca538 100644 --- a/packages/material/scss/dock-manager/_variables.scss +++ b/packages/material/scss/dock-manager/_variables.scss @@ -116,7 +116,7 @@ $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in /// @group dock-manager $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default; -@forward "@progress/kendo-theme-default/scss/dock-manager/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with ( $kendo-dock-manager-border-width: $kendo-dock-manager-border-width, $kendo-dock-manager-border-style: $kendo-dock-manager-border-style, $kendo-dock-manager-border: $kendo-dock-manager-border, diff --git a/packages/material/scss/draggable/_layout.scss b/packages/material/scss/draggable/_layout.scss index f91f7fbea82..42965d79ac7 100644 --- a/packages/material/scss/draggable/_layout.scss +++ b/packages/material/scss/draggable/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/draggable/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/draggable/_layout.scss" as *; @mixin kendo-draggable--layout() { diff --git a/packages/material/scss/draggable/_theme.scss b/packages/material/scss/draggable/_theme.scss index bd6714da6af..b7f5cbb82fc 100644 --- a/packages/material/scss/draggable/_theme.scss +++ b/packages/material/scss/draggable/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/draggable/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/draggable/_theme.scss" as *; @mixin kendo-draggable--theme() { diff --git a/packages/material/scss/draggable/_variables.scss b/packages/material/scss/draggable/_variables.scss index 95b1a747d9f..58e1455e5f2 100644 --- a/packages/material/scss/draggable/_variables.scss +++ b/packages/material/scss/draggable/_variables.scss @@ -30,7 +30,7 @@ $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default; $kendo-drop-hint-bg: $kendo-color-primary !default; -@forward "@progress/kendo-theme-default/scss/draggable/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/draggable/_variables.scss" with ( $kendo-drag-hint-padding-x: $kendo-drag-hint-padding-x, $kendo-drag-hint-padding-y: $kendo-drag-hint-padding-y, $kendo-drag-hint-border-width: $kendo-drag-hint-border-width, diff --git a/packages/material/scss/drawer/_layout.scss b/packages/material/scss/drawer/_layout.scss index 66f7965e895..7e2c09faaa9 100644 --- a/packages/material/scss/drawer/_layout.scss +++ b/packages/material/scss/drawer/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/drawer/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/drawer/_layout.scss" as *; @mixin kendo-drawer--layout() { diff --git a/packages/material/scss/drawer/_theme.scss b/packages/material/scss/drawer/_theme.scss index b7cece67150..a91cbb87c80 100644 --- a/packages/material/scss/drawer/_theme.scss +++ b/packages/material/scss/drawer/_theme.scss @@ -1,5 +1,5 @@ @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/drawer/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/drawer/_theme.scss" as *; @mixin kendo-drawer--theme() { diff --git a/packages/material/scss/drawer/_variables.scss b/packages/material/scss/drawer/_variables.scss index 4f2543ed97b..b4eb5d306bb 100644 --- a/packages/material/scss/drawer/_variables.scss +++ b/packages/material/scss/drawer/_variables.scss @@ -108,7 +108,7 @@ $kendo-drawer-selected-hover-bg: $kendo-hover-bg !default; /// @group drawer $kendo-drawer-selected-hover-text: $kendo-color-secondary !default; -@forward "@progress/kendo-theme-default/scss/drawer/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with ( $kendo-drawer-bg: $kendo-drawer-bg, $kendo-drawer-text: $kendo-drawer-text, $kendo-drawer-border: $kendo-drawer-border, diff --git a/packages/material/scss/dropdowngrid/_layout.scss b/packages/material/scss/dropdowngrid/_layout.scss index 4e7dc7c6913..50d504bd72f 100644 --- a/packages/material/scss/dropdowngrid/_layout.scss +++ b/packages/material/scss/dropdowngrid/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropdowngrid/_layout.scss" as *; @mixin kendo-dropdown-grid--layout() { diff --git a/packages/material/scss/dropdowngrid/_theme.scss b/packages/material/scss/dropdowngrid/_theme.scss index 5a99770772f..359406e671c 100644 --- a/packages/material/scss/dropdowngrid/_theme.scss +++ b/packages/material/scss/dropdowngrid/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropdowngrid/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropdowngrid/_theme.scss" as *; @mixin kendo-dropdown-grid--theme() { diff --git a/packages/material/scss/dropdownlist/_layout.scss b/packages/material/scss/dropdownlist/_layout.scss index b94f5f5fa03..d711cd80d04 100644 --- a/packages/material/scss/dropdownlist/_layout.scss +++ b/packages/material/scss/dropdownlist/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropdownlist/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropdownlist/_layout.scss" as *; @mixin kendo-dropdown-list--layout() { diff --git a/packages/material/scss/dropdownlist/_theme.scss b/packages/material/scss/dropdownlist/_theme.scss index 68893ef09fb..db31763711a 100644 --- a/packages/material/scss/dropdownlist/_theme.scss +++ b/packages/material/scss/dropdownlist/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropdownlist/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropdownlist/_theme.scss" as *; @mixin kendo-dropdown-list--theme() { diff --git a/packages/material/scss/dropdowntree/_layout.scss b/packages/material/scss/dropdowntree/_layout.scss index 6aad291878b..87d99fa1032 100644 --- a/packages/material/scss/dropdowntree/_layout.scss +++ b/packages/material/scss/dropdowntree/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropdowntree/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropdowntree/_layout.scss" as *; @mixin kendo-dropdown-tree--layout() { diff --git a/packages/material/scss/dropdowntree/_theme.scss b/packages/material/scss/dropdowntree/_theme.scss index ca205a1dd05..75da0c260bc 100644 --- a/packages/material/scss/dropdowntree/_theme.scss +++ b/packages/material/scss/dropdowntree/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropdowntree/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropdowntree/_theme.scss" as *; @mixin kendo-dropdown-tree--theme() { diff --git a/packages/material/scss/dropdowntree/_variables.scss b/packages/material/scss/dropdowntree/_variables.scss index 6fe59e97830..25b09b83555 100644 --- a/packages/material/scss/dropdowntree/_variables.scss +++ b/packages/material/scss/dropdowntree/_variables.scss @@ -9,7 +9,7 @@ $kendo-dropdowntree-popup-padding-x: k-spacing(2) !default; /// @group dropdowntree $kendo-dropdowntree-popup-padding-y: k-spacing(2) !default; -@forward "@progress/kendo-theme-default/scss/dropdowntree/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/dropdowntree/_variables.scss" with ( $kendo-dropdowntree-popup-padding-x: $kendo-dropdowntree-popup-padding-x, $kendo-dropdowntree-popup-padding-y: $kendo-dropdowntree-popup-padding-y ); diff --git a/packages/material/scss/dropzone/_layout.scss b/packages/material/scss/dropzone/_layout.scss index cfb428125c8..e15c09e7d85 100644 --- a/packages/material/scss/dropzone/_layout.scss +++ b/packages/material/scss/dropzone/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropzone/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropzone/_layout.scss" as *; @mixin kendo-dropzone--layout() { diff --git a/packages/material/scss/dropzone/_theme.scss b/packages/material/scss/dropzone/_theme.scss index 8d52aac2e5c..544a02f224a 100644 --- a/packages/material/scss/dropzone/_theme.scss +++ b/packages/material/scss/dropzone/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/dropzone/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/dropzone/_theme.scss" as *; @mixin kendo-dropzone--theme() { diff --git a/packages/material/scss/dropzone/_variables.scss b/packages/material/scss/dropzone/_variables.scss index 8c56330e8fd..8746fa5da23 100644 --- a/packages/material/scss/dropzone/_variables.scss +++ b/packages/material/scss/dropzone/_variables.scss @@ -67,7 +67,7 @@ $kendo-dropzone-note-spacing: null !default; /// @group dropzone $kendo-dropzone-note-text: $kendo-subtle-text !default; -@forward "@progress/kendo-theme-default/scss/dropzone/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/dropzone/_variables.scss" with ( $kendo-dropzone-padding-x: $kendo-dropzone-padding-x, $kendo-dropzone-padding-y: $kendo-dropzone-padding-y, $kendo-dropzone-border-width: $kendo-dropzone-border-width, diff --git a/packages/material/scss/editor/_layout.scss b/packages/material/scss/editor/_layout.scss index 3bfc5d69372..c611914c86b 100644 --- a/packages/material/scss/editor/_layout.scss +++ b/packages/material/scss/editor/_layout.scss @@ -1,5 +1,5 @@ @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/editor/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/editor/_layout.scss" as *; @mixin kendo-editor--layout() { diff --git a/packages/material/scss/editor/_theme.scss b/packages/material/scss/editor/_theme.scss index 2a870d95c03..86e8caa32d6 100644 --- a/packages/material/scss/editor/_theme.scss +++ b/packages/material/scss/editor/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/editor/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/editor/_theme.scss" as *; @mixin kendo-editor--theme() { diff --git a/packages/material/scss/editor/_variables.scss b/packages/material/scss/editor/_variables.scss index 97b3922abbb..b19aeac1cc7 100644 --- a/packages/material/scss/editor/_variables.scss +++ b/packages/material/scss/editor/_variables.scss @@ -78,7 +78,7 @@ $kendo-editor-filebrowser-tiles-padding-y: k-spacing(1) !default; /// @group editor $kendo-editor-content-padding: k-spacing(4) !default; -@forward "@progress/kendo-theme-default/scss/editor/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/editor/_variables.scss" with ( $kendo-editor-border-width: $kendo-editor-border-width, $kendo-editor-font-family: $kendo-editor-font-family, $kendo-editor-font-size: $kendo-editor-font-size, diff --git a/packages/material/scss/expansion-panel/_layout.scss b/packages/material/scss/expansion-panel/_layout.scss index 169680d1b1d..40f0bb78a77 100644 --- a/packages/material/scss/expansion-panel/_layout.scss +++ b/packages/material/scss/expansion-panel/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/expansion-panel/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/expansion-panel/_layout.scss" as *; @mixin kendo-expander--layout() { diff --git a/packages/material/scss/expansion-panel/_theme.scss b/packages/material/scss/expansion-panel/_theme.scss index c9a0fff50a8..de4233ed962 100644 --- a/packages/material/scss/expansion-panel/_theme.scss +++ b/packages/material/scss/expansion-panel/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/expansion-panel/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/expansion-panel/_theme.scss" as *; @mixin kendo-expander--theme() { diff --git a/packages/material/scss/expansion-panel/_variables.scss b/packages/material/scss/expansion-panel/_variables.scss index dd3b8abeaa4..b7169bcaa6e 100644 --- a/packages/material/scss/expansion-panel/_variables.scss +++ b/packages/material/scss/expansion-panel/_variables.scss @@ -78,7 +78,7 @@ $kendo-expander-content-padding-x: k-spacing(6) !default; /// @group expander $kendo-expander-content-padding-y: k-spacing(6) !default; -@forward "@progress/kendo-theme-default/scss/expansion-panel/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/expansion-panel/_variables.scss" with ( $kendo-expander-spacing-y: $kendo-expander-spacing-y, $kendo-expander-border-width: $kendo-expander-border-width, $kendo-expander-font-family: $kendo-expander-font-family, diff --git a/packages/material/scss/fab/_layout.scss b/packages/material/scss/fab/_layout.scss index 05985129436..8d8c62535ba 100644 --- a/packages/material/scss/fab/_layout.scss +++ b/packages/material/scss/fab/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/fab/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/fab/_layout.scss" as *; @mixin kendo-fab--layout() { diff --git a/packages/material/scss/fab/_theme.scss b/packages/material/scss/fab/_theme.scss index 8d02bcdc330..a356b114842 100644 --- a/packages/material/scss/fab/_theme.scss +++ b/packages/material/scss/fab/_theme.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/fab/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/fab/_theme.scss" as *; @mixin kendo-fab--theme() { diff --git a/packages/material/scss/fab/_variables.scss b/packages/material/scss/fab/_variables.scss index 12fc550343e..d1c17b761dd 100644 --- a/packages/material/scss/fab/_variables.scss +++ b/packages/material/scss/fab/_variables.scss @@ -157,7 +157,7 @@ $kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default; /// @group floating-action-button $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default; -@forward "@progress/kendo-theme-default/scss/fab/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with ( $kendo-fab-border-width: $kendo-fab-border-width, $kendo-fab-border-radius: $kendo-fab-border-radius, $kendo-fab-font-family: $kendo-fab-font-family, diff --git a/packages/material/scss/filemanager/_layout.scss b/packages/material/scss/filemanager/_layout.scss index 4a07f9ad35a..e8bb3c7e43d 100644 --- a/packages/material/scss/filemanager/_layout.scss +++ b/packages/material/scss/filemanager/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/filemanager/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/filemanager/_layout.scss" as *; @mixin kendo-file-manager--layout() { diff --git a/packages/material/scss/filemanager/_theme.scss b/packages/material/scss/filemanager/_theme.scss index bfdf3b47b0a..366a80d4e5d 100644 --- a/packages/material/scss/filemanager/_theme.scss +++ b/packages/material/scss/filemanager/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/filemanager/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/filemanager/_theme.scss" as *; @mixin kendo-file-manager--theme() { diff --git a/packages/material/scss/filemanager/_variables.scss b/packages/material/scss/filemanager/_variables.scss index 66f6166b838..8522679edf0 100644 --- a/packages/material/scss/filemanager/_variables.scss +++ b/packages/material/scss/filemanager/_variables.scss @@ -185,7 +185,7 @@ $kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( s /// @group file-manager $kendo-file-manager-preview-icon-border: null !default; -@forward "@progress/kendo-theme-default/scss/filemanager/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/filemanager/_variables.scss" with ( $kendo-file-manager-spacer: $kendo-file-manager-spacer, $kendo-file-manager-border-width: $kendo-file-manager-border-width, $kendo-file-manager-font-family: $kendo-file-manager-font-family, diff --git a/packages/material/scss/filter/_layout.scss b/packages/material/scss/filter/_layout.scss index 6683cb0c6bc..799ac4b6a5a 100644 --- a/packages/material/scss/filter/_layout.scss +++ b/packages/material/scss/filter/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/filter/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/filter/_layout.scss" as *; @mixin kendo-filter--layout() { diff --git a/packages/material/scss/filter/_theme.scss b/packages/material/scss/filter/_theme.scss index f9802293f6a..2e886e5786f 100644 --- a/packages/material/scss/filter/_theme.scss +++ b/packages/material/scss/filter/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/filter/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/filter/_theme.scss" as *; @mixin kendo-filter--theme() { diff --git a/packages/material/scss/filter/_variables.scss b/packages/material/scss/filter/_variables.scss index f17dfc491ef..78eeb131bea 100644 --- a/packages/material/scss/filter/_variables.scss +++ b/packages/material/scss/filter/_variables.scss @@ -31,7 +31,7 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default; /// @group filter $kendo-filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default; -@forward "@progress/kendo-theme-default/scss/filter/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/filter/_variables.scss" with ( $kendo-filter-padding-x: $kendo-filter-padding-x, $kendo-filter-padding-y: $kendo-filter-padding-y, $kendo-filter-bottom-margin: $kendo-filter-bottom-margin, diff --git a/packages/material/scss/floating-label/_layout.scss b/packages/material/scss/floating-label/_layout.scss index 7b813a7e283..a56db38e54f 100644 --- a/packages/material/scss/floating-label/_layout.scss +++ b/packages/material/scss/floating-label/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/floating-label/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/floating-label/_layout.scss" as *; @mixin kendo-floating-label--layout() { diff --git a/packages/material/scss/floating-label/_theme.scss b/packages/material/scss/floating-label/_theme.scss index 8fa716e6f94..10d79f8b930 100644 --- a/packages/material/scss/floating-label/_theme.scss +++ b/packages/material/scss/floating-label/_theme.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/floating-label/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/floating-label/_theme.scss" as *; @mixin kendo-floating-label--theme() { diff --git a/packages/material/scss/floating-label/_variables.scss b/packages/material/scss/floating-label/_variables.scss index 3046011715b..3abd681aa47 100644 --- a/packages/material/scss/floating-label/_variables.scss +++ b/packages/material/scss/floating-label/_variables.scss @@ -53,7 +53,7 @@ $kendo-floating-label-focus-bg: null !default; /// @group floating-label $kendo-floating-label-focus-text: $kendo-color-primary !default; -@forward "@progress/kendo-theme-default/scss/floating-label/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with ( $kendo-floating-label-scale: $kendo-floating-label-scale, $kendo-floating-label-font-size: $kendo-floating-label-font-size, $kendo-floating-label-max-width: $kendo-floating-label-max-width, diff --git a/packages/material/scss/forms/_layout.scss b/packages/material/scss/forms/_layout.scss index 14afb8fc5e6..afbd0195c4f 100644 --- a/packages/material/scss/forms/_layout.scss +++ b/packages/material/scss/forms/_layout.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../tooltip/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/forms/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/forms/_layout.scss" as *; @mixin kendo-form--layout() { diff --git a/packages/material/scss/forms/_theme.scss b/packages/material/scss/forms/_theme.scss index 27933ab94e1..6df8661fa5b 100644 --- a/packages/material/scss/forms/_theme.scss +++ b/packages/material/scss/forms/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/forms/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/forms/_theme.scss" as *; @mixin kendo-form--theme() { diff --git a/packages/material/scss/forms/_variables.scss b/packages/material/scss/forms/_variables.scss index d78264e0e12..f27e48d2a9c 100644 --- a/packages/material/scss/forms/_variables.scss +++ b/packages/material/scss/forms/_variables.scss @@ -191,7 +191,7 @@ $kendo-form-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/forms/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/forms/_variables.scss" with ( $kendo-form-spacer: $kendo-form-spacer, $kendo-form-font-size: $kendo-form-font-size, $kendo-form-line-height: $kendo-form-line-height, diff --git a/packages/material/scss/gantt/_layout.scss b/packages/material/scss/gantt/_layout.scss index 3d111feb182..83c1b92c390 100644 --- a/packages/material/scss/gantt/_layout.scss +++ b/packages/material/scss/gantt/_layout.scss @@ -1,5 +1,5 @@ @use "../grid/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/gantt/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/gantt/_layout.scss" as *; @mixin kendo-gantt--layout() { diff --git a/packages/material/scss/gantt/_theme.scss b/packages/material/scss/gantt/_theme.scss index d66a373105b..b884611b5d6 100644 --- a/packages/material/scss/gantt/_theme.scss +++ b/packages/material/scss/gantt/_theme.scss @@ -1,5 +1,5 @@ @use "../grid/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/gantt/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/gantt/_theme.scss" as *; @mixin kendo-gantt--theme() { diff --git a/packages/material/scss/gantt/_variables.scss b/packages/material/scss/gantt/_variables.scss index 023c86c4018..0a8cc727867 100644 --- a/packages/material/scss/gantt/_variables.scss +++ b/packages/material/scss/gantt/_variables.scss @@ -253,7 +253,7 @@ $kendo-gantt-task-tooltip-padding-x: k-spacing(4) !default; /// @group gantt $kendo-gantt-task-tooltip-padding-y: k-spacing(1) !default; -@forward "@progress/kendo-theme-default/scss/gantt/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/gantt/_variables.scss" with ( $kendo-gantt-border-width: $kendo-gantt-border-width, $kendo-gantt-font-family: $kendo-gantt-font-family, $kendo-gantt-font-size: $kendo-gantt-font-size, diff --git a/packages/material/scss/grid/_layout.scss b/packages/material/scss/grid/_layout.scss index ed4be355c4e..50b9a4598e4 100644 --- a/packages/material/scss/grid/_layout.scss +++ b/packages/material/scss/grid/_layout.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/grid/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/grid/_layout.scss" as *; @mixin kendo-grid--layout() { diff --git a/packages/material/scss/grid/_theme.scss b/packages/material/scss/grid/_theme.scss index 5e263ac66c5..74c8ce274c5 100644 --- a/packages/material/scss/grid/_theme.scss +++ b/packages/material/scss/grid/_theme.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../list/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/grid/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/grid/_theme.scss" as *; @mixin kendo-grid--theme() { diff --git a/packages/material/scss/grid/_variables.scss b/packages/material/scss/grid/_variables.scss index e5125de49d9..8998e35feeb 100644 --- a/packages/material/scss/grid/_variables.scss +++ b/packages/material/scss/grid/_variables.scss @@ -328,7 +328,7 @@ $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default; /// @group grid $kendo-grid-row-resizer-height: k-spacing(0.5) !default; -@forward "@progress/kendo-theme-default/scss/grid/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/grid/_variables.scss" with ( $kendo-grid-border-width: $kendo-grid-border-width, $kendo-grid-font-family: $kendo-grid-font-family, $kendo-grid-font-size: $kendo-grid-font-size, diff --git a/packages/material/scss/gridlayout/_layout.scss b/packages/material/scss/gridlayout/_layout.scss index 315462f0d19..3ecb374bb53 100644 --- a/packages/material/scss/gridlayout/_layout.scss +++ b/packages/material/scss/gridlayout/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/gridlayout/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/gridlayout/_layout.scss" as *; @mixin kendo-grid-layout--layout() { @include kendo-grid-layout--layout-base(); diff --git a/packages/material/scss/gridlayout/_theme.scss b/packages/material/scss/gridlayout/_theme.scss index ff0d03bc281..183314941ae 100644 --- a/packages/material/scss/gridlayout/_theme.scss +++ b/packages/material/scss/gridlayout/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/gridlayout/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/gridlayout/_theme.scss" as *; @mixin kendo-grid-layout--theme() { @include kendo-grid-layout--theme-base(); diff --git a/packages/material/scss/icons/_layout.scss b/packages/material/scss/icons/_layout.scss index cefd9bb0035..e3da5795c92 100644 --- a/packages/material/scss/icons/_layout.scss +++ b/packages/material/scss/icons/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/icons/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/icons/_layout.scss" as *; @mixin kendo-icon--layout() { diff --git a/packages/material/scss/icons/_theme.scss b/packages/material/scss/icons/_theme.scss index 97d1622a010..c9404672448 100644 --- a/packages/material/scss/icons/_theme.scss +++ b/packages/material/scss/icons/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/icons/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/icons/_theme.scss" as *; @mixin kendo-icon--theme() { diff --git a/packages/material/scss/icons/_variables.scss b/packages/material/scss/icons/_variables.scss index 160fefef3ed..c0575f48f15 100644 --- a/packages/material/scss/icons/_variables.scss +++ b/packages/material/scss/icons/_variables.scss @@ -32,7 +32,7 @@ $kendo-icon-spacing: k-spacing(2) !default; $kendo-icon-padding: k-spacing(1) !default; -@forward "@progress/kendo-theme-default/scss/icons/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with ( $kendo-icon-size: $kendo-icon-size, $kendo-icon-size-xs: $kendo-icon-size-xs, $kendo-icon-size-sm: $kendo-icon-size-sm, diff --git a/packages/material/scss/imageeditor/_layout.scss b/packages/material/scss/imageeditor/_layout.scss index 45d0305a579..dc7389b80a8 100644 --- a/packages/material/scss/imageeditor/_layout.scss +++ b/packages/material/scss/imageeditor/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/imageeditor/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/imageeditor/_layout.scss" as *; @mixin kendo-image-editor--layout() { diff --git a/packages/material/scss/imageeditor/_theme.scss b/packages/material/scss/imageeditor/_theme.scss index acd950bd285..58b89fd1bdb 100644 --- a/packages/material/scss/imageeditor/_theme.scss +++ b/packages/material/scss/imageeditor/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/imageeditor/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/imageeditor/_theme.scss" as *; @mixin kendo-image-editor--theme() { diff --git a/packages/material/scss/imageeditor/_variables.scss b/packages/material/scss/imageeditor/_variables.scss index aec3cce8eb2..c4d0c40647f 100644 --- a/packages/material/scss/imageeditor/_variables.scss +++ b/packages/material/scss/imageeditor/_variables.scss @@ -43,7 +43,7 @@ $kendo-image-editor-crop-border: white !default; $kendo-image-editor-crop-overlay-bg: rgba( black, .3 ) !default; -@forward "@progress/kendo-theme-default/scss/imageeditor/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with ( $kendo-image-editor-margin-y: $kendo-image-editor-margin-y, $kendo-image-editor-margin-x: $kendo-image-editor-margin-x, $kendo-image-editor-padding-y: $kendo-image-editor-padding-y, diff --git a/packages/material/scss/input/_layout.scss b/packages/material/scss/input/_layout.scss index 0efdbfdad00..fe97f1c8e9c 100644 --- a/packages/material/scss/input/_layout.scss +++ b/packages/material/scss/input/_layout.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/input/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *; @mixin kendo-input--layout() { diff --git a/packages/material/scss/input/_theme.scss b/packages/material/scss/input/_theme.scss index a3798a45331..b873818e87d 100644 --- a/packages/material/scss/input/_theme.scss +++ b/packages/material/scss/input/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/input/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/input/_theme.scss" as *; @mixin kendo-input--theme() { diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss index c7214d88f4d..1c3217d67fb 100644 --- a/packages/material/scss/input/_variables.scss +++ b/packages/material/scss/input/_variables.scss @@ -448,7 +448,7 @@ $kendo-picker-flat-hover-focus-text: null !default; /// @group picker $kendo-picker-flat-hover-focus-border: null !default; -@forward "@progress/kendo-theme-default/scss/input/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/input/_variables.scss" with ( $kendo-input-default-width: $kendo-input-default-width, $kendo-input-border-width: $kendo-input-border-width, $kendo-input-border-height: $kendo-input-border-height, diff --git a/packages/material/scss/list/_layout.scss b/packages/material/scss/list/_layout.scss index 44f2f5a1397..f30fa813767 100644 --- a/packages/material/scss/list/_layout.scss +++ b/packages/material/scss/list/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/list/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/list/_layout.scss" as *; @mixin kendo-list--layout() { diff --git a/packages/material/scss/list/_theme.scss b/packages/material/scss/list/_theme.scss index 7202696ddbb..858a3f51e13 100644 --- a/packages/material/scss/list/_theme.scss +++ b/packages/material/scss/list/_theme.scss @@ -1,7 +1,7 @@ @use "../core/_index.scss" as *; @use "./_variables.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/list/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/list/_theme.scss" as *; @mixin kendo-list--theme() { diff --git a/packages/material/scss/list/_variables.scss b/packages/material/scss/list/_variables.scss index 8da7d223123..d3b7f0bd3de 100644 --- a/packages/material/scss/list/_variables.scss +++ b/packages/material/scss/list/_variables.scss @@ -253,7 +253,7 @@ $kendo-list-group-item-shadow: null !default; /// @group list $kendo-list-option-label-text: $kendo-subtle-text !default; -@forward "@progress/kendo-theme-default/scss/list/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with ( $kendo-list-font-family: $kendo-list-font-family, $kendo-list-font-size: $kendo-list-font-size, $kendo-list-sm-font-size: $kendo-list-sm-font-size, diff --git a/packages/material/scss/listbox/_layout.scss b/packages/material/scss/listbox/_layout.scss index d2064a9609d..d20de09ba8a 100644 --- a/packages/material/scss/listbox/_layout.scss +++ b/packages/material/scss/listbox/_layout.scss @@ -1,5 +1,5 @@ @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/listbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/listbox/_layout.scss" as *; @mixin kendo-listbox--layout() { diff --git a/packages/material/scss/listbox/_theme.scss b/packages/material/scss/listbox/_theme.scss index a45eb017080..f40b43fa9ae 100644 --- a/packages/material/scss/listbox/_theme.scss +++ b/packages/material/scss/listbox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/listbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/listbox/_theme.scss" as *; @mixin kendo-listbox--theme() { diff --git a/packages/material/scss/listbox/_variables.scss b/packages/material/scss/listbox/_variables.scss index ce1dbbbed2c..431a75b0d5f 100644 --- a/packages/material/scss/listbox/_variables.scss +++ b/packages/material/scss/listbox/_variables.scss @@ -52,7 +52,7 @@ $kendo-listbox-drop-hint-width: 2px !default; /// @group listbox $kendo-listbox-drop-hint-border-width: 2px !default; -@forward "@progress/kendo-theme-default/scss/listbox/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/listbox/_variables.scss" with ( $kendo-listbox-spacing: $kendo-listbox-spacing, $kendo-listbox-button-spacing: $kendo-listbox-button-spacing, $kendo-listbox-width: $kendo-listbox-width, diff --git a/packages/material/scss/listgroup/_layout.scss b/packages/material/scss/listgroup/_layout.scss index 40943d2f298..ee285749c27 100644 --- a/packages/material/scss/listgroup/_layout.scss +++ b/packages/material/scss/listgroup/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/listgroup/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/listgroup/_layout.scss" as *; @mixin kendo-listgroup--layout() { diff --git a/packages/material/scss/listgroup/_theme.scss b/packages/material/scss/listgroup/_theme.scss index 466909b4dd9..be2dea85329 100644 --- a/packages/material/scss/listgroup/_theme.scss +++ b/packages/material/scss/listgroup/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/listgroup/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/listgroup/_theme.scss" as *; @mixin kendo-listgroup--theme() { diff --git a/packages/material/scss/listgroup/_variables.scss b/packages/material/scss/listgroup/_variables.scss index 98f23fc182d..f630cc35929 100644 --- a/packages/material/scss/listgroup/_variables.scss +++ b/packages/material/scss/listgroup/_variables.scss @@ -16,7 +16,7 @@ $kendo-listgroup-item-padding-x: k-spacing(2) !default; $kendo-listgroup-item-padding-y: k-spacing(2) !default; $kendo-listgroup-item-border-width: 1px !default; -@forward "@progress/kendo-theme-default/scss/listgroup/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/listgroup/_variables.scss" with ( $kendo-listgroup-border-width: $kendo-listgroup-border-width, $kendo-listgroup-border-radius: $kendo-listgroup-border-radius, $kendo-listgroup-font-size: $kendo-listgroup-font-size, diff --git a/packages/material/scss/listview/_layout.scss b/packages/material/scss/listview/_layout.scss index 9999d38d92d..bff40b2e354 100644 --- a/packages/material/scss/listview/_layout.scss +++ b/packages/material/scss/listview/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/listview/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/listview/_layout.scss" as *; @mixin kendo-listview--layout() { diff --git a/packages/material/scss/listview/_theme.scss b/packages/material/scss/listview/_theme.scss index 969b0f765cb..9103a7ba59e 100644 --- a/packages/material/scss/listview/_theme.scss +++ b/packages/material/scss/listview/_theme.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/listview/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/listview/_theme.scss" as *; @mixin kendo-listview--theme() { diff --git a/packages/material/scss/listview/_variables.scss b/packages/material/scss/listview/_variables.scss index 3ec7277bc98..db473b7e427 100644 --- a/packages/material/scss/listview/_variables.scss +++ b/packages/material/scss/listview/_variables.scss @@ -62,7 +62,7 @@ $kendo-listview-item-focus-border: null !default; /// @group listview $kendo-listview-item-focus-shadow: unset !default; -@forward "@progress/kendo-theme-default/scss/listview/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with ( $kendo-listview-padding-x: $kendo-listview-padding-x, $kendo-listview-padding-y: $kendo-listview-padding-y, $kendo-listview-border-width: $kendo-listview-border-width, diff --git a/packages/material/scss/loader/_layout.scss b/packages/material/scss/loader/_layout.scss index 5f7aa6a6d8f..ea56e4fe45c 100644 --- a/packages/material/scss/loader/_layout.scss +++ b/packages/material/scss/loader/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/loader/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/loader/_layout.scss" as *; @mixin kendo-loader--layout() { diff --git a/packages/material/scss/loader/_theme.scss b/packages/material/scss/loader/_theme.scss index 1806c5ffa19..32a0545446d 100644 --- a/packages/material/scss/loader/_theme.scss +++ b/packages/material/scss/loader/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/loader/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/loader/_theme.scss" as *; @mixin kendo-loader--theme() { diff --git a/packages/material/scss/loader/_variables.scss b/packages/material/scss/loader/_variables.scss index 672d73b3551..4d90b10b474 100644 --- a/packages/material/scss/loader/_variables.scss +++ b/packages/material/scss/loader/_variables.scss @@ -126,7 +126,7 @@ $kendo-loading-opacity: .3 !default; /// @group loading $kendo-zindex-loading: 100 !default; -@forward "@progress/kendo-theme-default/scss/loader/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/loader/_variables.scss" with ( $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius, $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size, $kendo-loader-md-segment-size: $kendo-loader-md-segment-size, diff --git a/packages/material/scss/map/_layout.scss b/packages/material/scss/map/_layout.scss index 793b060adfe..a06b5016489 100644 --- a/packages/material/scss/map/_layout.scss +++ b/packages/material/scss/map/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/map/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/map/_layout.scss" as *; @mixin kendo-map--layout() { diff --git a/packages/material/scss/map/_theme.scss b/packages/material/scss/map/_theme.scss index 53fe4507113..21fd1acb4c7 100644 --- a/packages/material/scss/map/_theme.scss +++ b/packages/material/scss/map/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/map/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/map/_theme.scss" as *; @mixin kendo-map--theme() { diff --git a/packages/material/scss/map/_variables.scss b/packages/material/scss/map/_variables.scss index f618e039140..ae3b2496948 100644 --- a/packages/material/scss/map/_variables.scss +++ b/packages/material/scss/map/_variables.scss @@ -72,7 +72,7 @@ $kendo-map-marker-fill: $kendo-color-primary !default; $kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default; -@forward "@progress/kendo-theme-default/scss/map/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/map/_variables.scss" with ( $kendo-map-border-width: $kendo-map-border-width, $kendo-map-font-size: $kendo-map-font-size, $kendo-map-line-height: $kendo-map-line-height, diff --git a/packages/material/scss/maskedtextbox/_layout.scss b/packages/material/scss/maskedtextbox/_layout.scss index 20c1e6762e7..39621f8149c 100644 --- a/packages/material/scss/maskedtextbox/_layout.scss +++ b/packages/material/scss/maskedtextbox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_layout.scss" as *; @mixin kendo-masked-textbox--layout() { diff --git a/packages/material/scss/maskedtextbox/_theme.scss b/packages/material/scss/maskedtextbox/_theme.scss index 0f3cda0f758..ad76e09bf44 100644 --- a/packages/material/scss/maskedtextbox/_theme.scss +++ b/packages/material/scss/maskedtextbox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_theme.scss" as *; @mixin kendo-masked-textbox--theme() { diff --git a/packages/material/scss/mediaplayer/_layout.scss b/packages/material/scss/mediaplayer/_layout.scss index 20a3673a488..f36721097a1 100644 --- a/packages/material/scss/mediaplayer/_layout.scss +++ b/packages/material/scss/mediaplayer/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/mediaplayer/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/mediaplayer/_layout.scss" as *; @mixin kendo-media-player--layout() { diff --git a/packages/material/scss/mediaplayer/_theme.scss b/packages/material/scss/mediaplayer/_theme.scss index f2a400ebaa5..09d5e6d1d35 100644 --- a/packages/material/scss/mediaplayer/_theme.scss +++ b/packages/material/scss/mediaplayer/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/mediaplayer/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/mediaplayer/_theme.scss" as *; @mixin kendo-media-player--theme() { diff --git a/packages/material/scss/mediaplayer/_variables.scss b/packages/material/scss/mediaplayer/_variables.scss index b764cdb6a86..28ae2671158 100644 --- a/packages/material/scss/mediaplayer/_variables.scss +++ b/packages/material/scss/mediaplayer/_variables.scss @@ -44,7 +44,7 @@ $kendo-media-player-titlebar-border: null !default; /// @group mediaplayer $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; -@forward "@progress/kendo-theme-default/scss/mediaplayer/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with ( $kendo-media-player-border-width: $kendo-media-player-border-width, $kendo-media-player-font-family: $kendo-media-player-font-family, $kendo-media-player-font-size: $kendo-media-player-font-size, diff --git a/packages/material/scss/menu-button/_layout.scss b/packages/material/scss/menu-button/_layout.scss index ddccd782f40..6dc93598909 100644 --- a/packages/material/scss/menu-button/_layout.scss +++ b/packages/material/scss/menu-button/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/menu-button/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/menu-button/_layout.scss" as *; @mixin kendo-menu-button--layout() { diff --git a/packages/material/scss/menu-button/_theme.scss b/packages/material/scss/menu-button/_theme.scss index 57845e82d7c..27b6723b505 100644 --- a/packages/material/scss/menu-button/_theme.scss +++ b/packages/material/scss/menu-button/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/menu-button/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/menu-button/_theme.scss" as *; @mixin kendo-menu-button--theme() { diff --git a/packages/material/scss/menu-button/_variables.scss b/packages/material/scss/menu-button/_variables.scss index 1ccfe4022fa..294556f8528 100644 --- a/packages/material/scss/menu-button/_variables.scss +++ b/packages/material/scss/menu-button/_variables.scss @@ -6,6 +6,6 @@ /// @group menu-button $kendo-menu-button-arrow-padding-x: k-spacing(1) !default; -@forward "@progress/kendo-theme-default/scss/menu-button/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/menu-button/_variables.scss" with ( $kendo-menu-button-arrow-padding-x: $kendo-menu-button-arrow-padding-x ); diff --git a/packages/material/scss/menu/_layout.scss b/packages/material/scss/menu/_layout.scss index 2ce3b4e3e80..f5f2df7a5b9 100644 --- a/packages/material/scss/menu/_layout.scss +++ b/packages/material/scss/menu/_layout.scss @@ -1,6 +1,6 @@ @use "../_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/menu/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/menu/_layout.scss" as *; @mixin kendo-menu--layout() { diff --git a/packages/material/scss/menu/_theme.scss b/packages/material/scss/menu/_theme.scss index b122208a5ee..a68ddccc3a1 100644 --- a/packages/material/scss/menu/_theme.scss +++ b/packages/material/scss/menu/_theme.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/menu/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/menu/_theme.scss" as *; @mixin kendo-menu--theme() { diff --git a/packages/material/scss/menu/_variables.scss b/packages/material/scss/menu/_variables.scss index 4c46f9cd9d8..ca0d1640690 100644 --- a/packages/material/scss/menu/_variables.scss +++ b/packages/material/scss/menu/_variables.scss @@ -275,7 +275,7 @@ $kendo-menu-popup-item-active-gradient: null !default; /// @group menu $kendo-menu-popup-item-focus-shadow: unset !default; -@forward "@progress/kendo-theme-default/scss/menu/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/menu/_variables.scss" with ( $kendo-menu-border-width: $kendo-menu-border-width, $kendo-menu-font-family: $kendo-menu-font-family, $kendo-menu-font-size: $kendo-menu-font-size, diff --git a/packages/material/scss/messagebox/_layout.scss b/packages/material/scss/messagebox/_layout.scss index 3ded30e0164..d740e28defc 100644 --- a/packages/material/scss/messagebox/_layout.scss +++ b/packages/material/scss/messagebox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/messagebox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/messagebox/_layout.scss" as *; @mixin kendo-messagebox--layout() { diff --git a/packages/material/scss/messagebox/_theme.scss b/packages/material/scss/messagebox/_theme.scss index 333d1ce0b3f..144232ecb1a 100644 --- a/packages/material/scss/messagebox/_theme.scss +++ b/packages/material/scss/messagebox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/messagebox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/messagebox/_theme.scss" as *; @mixin kendo-messagebox--theme() { diff --git a/packages/material/scss/messagebox/_variables.scss b/packages/material/scss/messagebox/_variables.scss index c0deee4abf8..1017391cae5 100644 --- a/packages/material/scss/messagebox/_variables.scss +++ b/packages/material/scss/messagebox/_variables.scss @@ -16,7 +16,7 @@ $kendo-message-box-border-level: -9 !default; $kendo-message-box-link-font-style: normal !default; $kendo-message-box-link-text-decoration: underline !default; -@forward "@progress/kendo-theme-default/scss/messagebox/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with ( $kendo-message-box-margin: $kendo-message-box-margin, $kendo-message-box-padding-x: $kendo-message-box-padding-x, $kendo-message-box-padding-y: $kendo-message-box-padding-y, diff --git a/packages/material/scss/multiselect/_layout.scss b/packages/material/scss/multiselect/_layout.scss index 3b513404dbf..284e3c83730 100644 --- a/packages/material/scss/multiselect/_layout.scss +++ b/packages/material/scss/multiselect/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/multiselect/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/multiselect/_layout.scss" as *; @mixin kendo-multiselect--layout() { diff --git a/packages/material/scss/multiselect/_theme.scss b/packages/material/scss/multiselect/_theme.scss index 73f3eac6fd8..3084b95233d 100644 --- a/packages/material/scss/multiselect/_theme.scss +++ b/packages/material/scss/multiselect/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/multiselect/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/multiselect/_theme.scss" as *; @mixin kendo-multiselect--theme() { diff --git a/packages/material/scss/no-data/_layout.scss b/packages/material/scss/no-data/_layout.scss index 1f4b31267ff..d4b9d30c1db 100644 --- a/packages/material/scss/no-data/_layout.scss +++ b/packages/material/scss/no-data/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/no-data/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/no-data/_layout.scss" as *; @mixin kendo-no-data--layout() { @include kendo-no-data--layout-base(); diff --git a/packages/material/scss/no-data/_theme.scss b/packages/material/scss/no-data/_theme.scss index 931e524aee1..73625738abf 100644 --- a/packages/material/scss/no-data/_theme.scss +++ b/packages/material/scss/no-data/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/no-data/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/no-data/_theme.scss" as *; @mixin kendo-no-data--theme() { @include kendo-no-data--theme-base(); diff --git a/packages/material/scss/no-data/_variables.scss b/packages/material/scss/no-data/_variables.scss index cd349af98a4..79a6b11ec05 100644 --- a/packages/material/scss/no-data/_variables.scss +++ b/packages/material/scss/no-data/_variables.scss @@ -8,7 +8,7 @@ $kendo-no-data-min-height: 140px !default; /// @group no-data $kendo-no-data-text: $kendo-subtle-text !default; -@forward "@progress/kendo-theme-default/scss/no-data/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/no-data/_variables.scss" with ( $kendo-no-data-min-height: $kendo-no-data-min-height, $kendo-no-data-text: $kendo-no-data-text ); diff --git a/packages/material/scss/notification/_layout.scss b/packages/material/scss/notification/_layout.scss index 73a7dd63ee0..0af87c40e18 100644 --- a/packages/material/scss/notification/_layout.scss +++ b/packages/material/scss/notification/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/notification/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/notification/_layout.scss" as *; @mixin kendo-notification--layout() { diff --git a/packages/material/scss/notification/_theme.scss b/packages/material/scss/notification/_theme.scss index ba3d5d4fd8d..99bf6bf836a 100644 --- a/packages/material/scss/notification/_theme.scss +++ b/packages/material/scss/notification/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/notification/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/notification/_theme.scss" as *; @mixin kendo-notification--theme() { diff --git a/packages/material/scss/notification/_variables.scss b/packages/material/scss/notification/_variables.scss index 9e3f9bfa247..2141209e88f 100644 --- a/packages/material/scss/notification/_variables.scss +++ b/packages/material/scss/notification/_variables.scss @@ -55,7 +55,7 @@ $kendo-notification-theme-colors: $kendo-theme-colors !default; /// @group notification $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default; -@forward "@progress/kendo-theme-default/scss/notification/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/notification/_variables.scss" with ( $kendo-notification-group-gap: $kendo-notification-group-gap, $kendo-notification-padding-x: $kendo-notification-padding-x, $kendo-notification-padding-y: $kendo-notification-padding-y, diff --git a/packages/material/scss/numerictextbox/_layout.scss b/packages/material/scss/numerictextbox/_layout.scss index be792e947af..68e05e414dd 100644 --- a/packages/material/scss/numerictextbox/_layout.scss +++ b/packages/material/scss/numerictextbox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/numerictextbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/numerictextbox/_layout.scss" as *; @mixin kendo-numeric-textbox--layout() { diff --git a/packages/material/scss/numerictextbox/_theme.scss b/packages/material/scss/numerictextbox/_theme.scss index 72195ffaa0c..76c0567fe9d 100644 --- a/packages/material/scss/numerictextbox/_theme.scss +++ b/packages/material/scss/numerictextbox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/numerictextbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/numerictextbox/_theme.scss" as *; @mixin kendo-numeric-textbox--theme() { diff --git a/packages/material/scss/orgchart/_layout.scss b/packages/material/scss/orgchart/_layout.scss index 780ecfd7dc7..c0ec8698dfd 100644 --- a/packages/material/scss/orgchart/_layout.scss +++ b/packages/material/scss/orgchart/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/orgchart/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/orgchart/_layout.scss" as *; @mixin kendo-orgchart--layout() { diff --git a/packages/material/scss/orgchart/_theme.scss b/packages/material/scss/orgchart/_theme.scss index e986155f221..4c004877b60 100644 --- a/packages/material/scss/orgchart/_theme.scss +++ b/packages/material/scss/orgchart/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/orgchart/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/orgchart/_theme.scss" as *; @mixin kendo-orgchart--theme() { diff --git a/packages/material/scss/orgchart/_variables.scss b/packages/material/scss/orgchart/_variables.scss index 8521ae436ea..7f1a05c7e24 100644 --- a/packages/material/scss/orgchart/_variables.scss +++ b/packages/material/scss/orgchart/_variables.scss @@ -149,7 +149,7 @@ $kendo-orgchart-line-fill: $kendo-base-border !default; /// @group orgchart $kendo-orgchart-line-v-height: k-spacing(6) !default; -@forward "@progress/kendo-theme-default/scss/orgchart/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/orgchart/_variables.scss" with ( $kendo-orgchart-spacer: $kendo-orgchart-spacer, $kendo-orgchart-padding-y: $kendo-orgchart-padding-y, $kendo-orgchart-padding-x: $kendo-orgchart-padding-x, diff --git a/packages/material/scss/otp/_layout.scss b/packages/material/scss/otp/_layout.scss index c8acb8bef1b..b6cd437b028 100644 --- a/packages/material/scss/otp/_layout.scss +++ b/packages/material/scss/otp/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/otp/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/otp/_layout.scss" as *; @mixin kendo-otp--layout() { @include kendo-otp--layout-base(); diff --git a/packages/material/scss/otp/_theme.scss b/packages/material/scss/otp/_theme.scss index b0a3272b71c..5c3b7f5397e 100644 --- a/packages/material/scss/otp/_theme.scss +++ b/packages/material/scss/otp/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/otp/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/otp/_theme.scss" as *; @mixin kendo-otp--theme() { @include kendo-otp--theme-base(); diff --git a/packages/material/scss/otp/_variables.scss b/packages/material/scss/otp/_variables.scss index 900b6810648..d4008117518 100644 --- a/packages/material/scss/otp/_variables.scss +++ b/packages/material/scss/otp/_variables.scss @@ -60,7 +60,7 @@ $kendo-otp-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/otp/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/otp/_variables.scss" with ( $kendo-otp-gap: $kendo-otp-gap, $kendo-otp-sm-gap: $kendo-otp-sm-gap, $kendo-otp-md-gap: $kendo-otp-md-gap, diff --git a/packages/material/scss/overlay/_layout.scss b/packages/material/scss/overlay/_layout.scss index e95f680b058..c77fe318b21 100644 --- a/packages/material/scss/overlay/_layout.scss +++ b/packages/material/scss/overlay/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/overlay/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/overlay/_layout.scss" as *; @mixin kendo-overlay--layout() { diff --git a/packages/material/scss/overlay/_theme.scss b/packages/material/scss/overlay/_theme.scss index d5da2c38b53..32289cb3d86 100644 --- a/packages/material/scss/overlay/_theme.scss +++ b/packages/material/scss/overlay/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/overlay/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/overlay/_theme.scss" as *; @mixin kendo-overlay--theme() { diff --git a/packages/material/scss/overlay/_variables.scss b/packages/material/scss/overlay/_variables.scss index 380d545263c..6a2b523d007 100644 --- a/packages/material/scss/overlay/_variables.scss +++ b/packages/material/scss/overlay/_variables.scss @@ -5,7 +5,7 @@ $kendo-overlay-theme-colors: $kendo-theme-colors !default; $kendo-overlay-bg: $kendo-color-black !default; $kendo-overlay-opacity: .32 !default; -@forward "@progress/kendo-theme-default/scss/overlay/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with ( $kendo-overlay-theme-colors: $kendo-overlay-theme-colors, $kendo-overlay-bg: $kendo-overlay-bg, $kendo-overlay-opacity: $kendo-overlay-opacity diff --git a/packages/material/scss/pager/_layout.scss b/packages/material/scss/pager/_layout.scss index ac8d7f5d6a4..87f75d53fb7 100644 --- a/packages/material/scss/pager/_layout.scss +++ b/packages/material/scss/pager/_layout.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../button/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/pager/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/pager/_layout.scss" as *; @mixin kendo-pager--layout() { diff --git a/packages/material/scss/pager/_theme.scss b/packages/material/scss/pager/_theme.scss index 11d6634f554..5046698be42 100644 --- a/packages/material/scss/pager/_theme.scss +++ b/packages/material/scss/pager/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/pager/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/pager/_theme.scss" as *; @mixin kendo-pager--theme() { diff --git a/packages/material/scss/pager/_variables.scss b/packages/material/scss/pager/_variables.scss index 730606a8fd3..930d4618dc7 100644 --- a/packages/material/scss/pager/_variables.scss +++ b/packages/material/scss/pager/_variables.scss @@ -175,7 +175,7 @@ $kendo-pager-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/pager/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/pager/_variables.scss" with ( $kendo-pager-padding-x: $kendo-pager-padding-x, $kendo-pager-sm-padding-x: $kendo-pager-sm-padding-x, $kendo-pager-md-padding-x: $kendo-pager-md-padding-x, diff --git a/packages/material/scss/panel/_layout.scss b/packages/material/scss/panel/_layout.scss index dffcaa7ba69..150bc3c9e6c 100644 --- a/packages/material/scss/panel/_layout.scss +++ b/packages/material/scss/panel/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/panel/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/panel/_layout.scss" as *; @mixin kendo-panel--layout() { @include kendo-panel--layout--base(); diff --git a/packages/material/scss/panel/_theme.scss b/packages/material/scss/panel/_theme.scss index dc80a431e4e..85dfcca0eda 100644 --- a/packages/material/scss/panel/_theme.scss +++ b/packages/material/scss/panel/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/panel/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/panel/_theme.scss" as *; @mixin kendo-panel--theme() { @include kendo-panel--theme--base(); diff --git a/packages/material/scss/panel/_variables.scss b/packages/material/scss/panel/_variables.scss index c26ca851f87..4345bf09335 100644 --- a/packages/material/scss/panel/_variables.scss +++ b/packages/material/scss/panel/_variables.scss @@ -34,7 +34,7 @@ $kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg}) !default; /// @group panel $kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border}) !default; -@forward "@progress/kendo-theme-default/scss/panel/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with ( $kendo-panel-border-radius: $kendo-panel-border-radius, $kendo-panel-border-width: $kendo-panel-border-width, $kendo-panel-border-style: $kendo-panel-border-style, diff --git a/packages/material/scss/panelbar/_layout.scss b/packages/material/scss/panelbar/_layout.scss index 24573474ff9..fca8809539e 100644 --- a/packages/material/scss/panelbar/_layout.scss +++ b/packages/material/scss/panelbar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/panelbar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/panelbar/_layout.scss" as *; @mixin kendo-panelbar--layout() { diff --git a/packages/material/scss/panelbar/_theme.scss b/packages/material/scss/panelbar/_theme.scss index 5ff6ca3fb3e..5caeaef0759 100644 --- a/packages/material/scss/panelbar/_theme.scss +++ b/packages/material/scss/panelbar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/panelbar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/panelbar/_theme.scss" as *; @mixin kendo-panelbar--theme() { diff --git a/packages/material/scss/panelbar/_variables.scss b/packages/material/scss/panelbar/_variables.scss index c2d5c38f04e..86ade15ef06 100644 --- a/packages/material/scss/panelbar/_variables.scss +++ b/packages/material/scss/panelbar/_variables.scss @@ -275,7 +275,7 @@ $kendo-panelbar-header-expanded-border: null !default; /// @group panelbar $kendo-panelbar-header-expanded-gradient: null !default; -@forward "@progress/kendo-theme-default/scss/panelbar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/panelbar/_variables.scss" with ( $kendo-panelbar-padding-x: $kendo-panelbar-padding-x, $kendo-panelbar-padding-y: $kendo-panelbar-padding-y, $kendo-panelbar-font-family: $kendo-panelbar-font-family, diff --git a/packages/material/scss/pdf-viewer/_layout.scss b/packages/material/scss/pdf-viewer/_layout.scss index 58c65111e8a..0cd70692199 100644 --- a/packages/material/scss/pdf-viewer/_layout.scss +++ b/packages/material/scss/pdf-viewer/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/pdf-viewer/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/pdf-viewer/_layout.scss" as *; @mixin kendo-pdf-viewer--layout() { diff --git a/packages/material/scss/pdf-viewer/_theme.scss b/packages/material/scss/pdf-viewer/_theme.scss index 4778d7b7e6b..35b986d87c3 100644 --- a/packages/material/scss/pdf-viewer/_theme.scss +++ b/packages/material/scss/pdf-viewer/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/pdf-viewer/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/pdf-viewer/_theme.scss" as *; @mixin kendo-pdf-viewer--theme() { diff --git a/packages/material/scss/pdf-viewer/_variables.scss b/packages/material/scss/pdf-viewer/_variables.scss index 39390c89c72..a56d6ff139b 100644 --- a/packages/material/scss/pdf-viewer/_variables.scss +++ b/packages/material/scss/pdf-viewer/_variables.scss @@ -139,7 +139,7 @@ $kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) /// @group pdf-viewer $kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default; -@forward "@progress/kendo-theme-default/scss/pdf-viewer/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/pdf-viewer/_variables.scss" with ( $kendo-pdf-viewer-border-width: $kendo-pdf-viewer-border-width, $kendo-pdf-viewer-font-family: $kendo-pdf-viewer-font-family, $kendo-pdf-viewer-font-size: $kendo-pdf-viewer-font-size, diff --git a/packages/material/scss/pivotgrid/_layout.scss b/packages/material/scss/pivotgrid/_layout.scss index bc070092cfd..b375114d07b 100644 --- a/packages/material/scss/pivotgrid/_layout.scss +++ b/packages/material/scss/pivotgrid/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/pivotgrid/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/pivotgrid/_layout.scss" as *; @mixin kendo-pivotgrid--layout() { diff --git a/packages/material/scss/pivotgrid/_theme.scss b/packages/material/scss/pivotgrid/_theme.scss index 3719078c060..c45a0a29d3b 100644 --- a/packages/material/scss/pivotgrid/_theme.scss +++ b/packages/material/scss/pivotgrid/_theme.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/pivotgrid/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/pivotgrid/_theme.scss" as *; @mixin kendo-pivotgrid--theme() { diff --git a/packages/material/scss/pivotgrid/_variables.scss b/packages/material/scss/pivotgrid/_variables.scss index 12b5afc8653..0dba7533af9 100644 --- a/packages/material/scss/pivotgrid/_variables.scss +++ b/packages/material/scss/pivotgrid/_variables.scss @@ -262,7 +262,7 @@ $kendo-pivotgrid-button-active-text: $kendo-button-text !default; $kendo-pivotgrid-remove-bg: $kendo-pivotgrid-button-text !default; $kendo-pivotgrid-remove-text: $kendo-pivotgrid-button-bg !default; -@forward "@progress/kendo-theme-default/scss/pivotgrid/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/pivotgrid/_variables.scss" with ( $kendo-pivotgrid-spacer: $kendo-pivotgrid-spacer, $kendo-pivotgrid-padding-x: $kendo-pivotgrid-padding-x, $kendo-pivotgrid-padding-y: $kendo-pivotgrid-padding-y, diff --git a/packages/material/scss/popover/_layout.scss b/packages/material/scss/popover/_layout.scss index 6ee58f79a62..d4fc7e0ef8d 100644 --- a/packages/material/scss/popover/_layout.scss +++ b/packages/material/scss/popover/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/popover/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/popover/_layout.scss" as *; @mixin kendo-popover--layout() { diff --git a/packages/material/scss/popover/_theme.scss b/packages/material/scss/popover/_theme.scss index 2557a57e08d..2382a7354eb 100644 --- a/packages/material/scss/popover/_theme.scss +++ b/packages/material/scss/popover/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/popover/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/popover/_theme.scss" as *; @mixin kendo-popover--theme() { diff --git a/packages/material/scss/popover/_variables.scss b/packages/material/scss/popover/_variables.scss index 73fc95a958a..60502bdbf90 100644 --- a/packages/material/scss/popover/_variables.scss +++ b/packages/material/scss/popover/_variables.scss @@ -87,7 +87,7 @@ $kendo-popover-callout-bg: $kendo-popover-bg !default; /// @group popover $kendo-popover-callout-border: $kendo-popover-border !default; -@forward "@progress/kendo-theme-default/scss/popover/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/popover/_variables.scss" with ( $kendo-popover-border-width: $kendo-popover-border-width, $kendo-popover-border-style: $kendo-popover-border-style, $kendo-popover-border-radius: $kendo-popover-border-radius, diff --git a/packages/material/scss/popup/_layout.scss b/packages/material/scss/popup/_layout.scss index 9aebde815cc..9b100bdb9fb 100644 --- a/packages/material/scss/popup/_layout.scss +++ b/packages/material/scss/popup/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/popup/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/popup/_layout.scss" as *; @mixin kendo-popup--layout() { diff --git a/packages/material/scss/popup/_theme.scss b/packages/material/scss/popup/_theme.scss index 2109405f337..6d733623ae7 100644 --- a/packages/material/scss/popup/_theme.scss +++ b/packages/material/scss/popup/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/popup/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/popup/_theme.scss" as *; @mixin kendo-popup--theme() { diff --git a/packages/material/scss/popup/_variables.scss b/packages/material/scss/popup/_variables.scss index 4c0e5d7f108..b77d69cf42f 100644 --- a/packages/material/scss/popup/_variables.scss +++ b/packages/material/scss/popup/_variables.scss @@ -40,7 +40,7 @@ $kendo-popup-border: $kendo-component-border !default; /// @group popup $kendo-popup-shadow: k-elevation(4) !default; -@forward "@progress/kendo-theme-default/scss/popup/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with ( $kendo-popup-padding-x: $kendo-popup-padding-x, $kendo-popup-padding-y: $kendo-popup-padding-y, $kendo-popup-border-width: $kendo-popup-border-width, diff --git a/packages/material/scss/progressbar/_layout.scss b/packages/material/scss/progressbar/_layout.scss index aec13717a8b..b7c4207bc6b 100644 --- a/packages/material/scss/progressbar/_layout.scss +++ b/packages/material/scss/progressbar/_layout.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/progressbar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/progressbar/_layout.scss" as *; @mixin kendo-progressbar--layout() { diff --git a/packages/material/scss/progressbar/_theme.scss b/packages/material/scss/progressbar/_theme.scss index b15673cd44a..28a611d8b8a 100644 --- a/packages/material/scss/progressbar/_theme.scss +++ b/packages/material/scss/progressbar/_theme.scss @@ -1,5 +1,5 @@ @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/progressbar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/progressbar/_theme.scss" as *; @function _translate($direction, $value) { // stylelint-disable-line @return if($direction == horizontal, translateX($value), translateY($value)); diff --git a/packages/material/scss/progressbar/_variables.scss b/packages/material/scss/progressbar/_variables.scss index 6fe49a5000b..a5db561b97f 100644 --- a/packages/material/scss/progressbar/_variables.scss +++ b/packages/material/scss/progressbar/_variables.scss @@ -76,7 +76,7 @@ $kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default; /// @group progressbar $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default; -@forward "@progress/kendo-theme-default/scss/progressbar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/progressbar/_variables.scss" with ( $kendo-progressbar-height: $kendo-progressbar-height, $kendo-progressbar-horizontal-width: $kendo-progressbar-horizontal-width, $kendo-progressbar-animation-timing: $kendo-progressbar-animation-timing, diff --git a/packages/material/scss/prompt/_layout.scss b/packages/material/scss/prompt/_layout.scss index 66ce8ed4a8e..97ceecc2b63 100644 --- a/packages/material/scss/prompt/_layout.scss +++ b/packages/material/scss/prompt/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/prompt/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/prompt/_layout.scss" as *; @mixin kendo-prompt--layout() { diff --git a/packages/material/scss/prompt/_theme.scss b/packages/material/scss/prompt/_theme.scss index 3d7232d6083..2ecd9f387de 100644 --- a/packages/material/scss/prompt/_theme.scss +++ b/packages/material/scss/prompt/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/prompt/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/prompt/_theme.scss" as *; @mixin kendo-prompt--theme() { diff --git a/packages/material/scss/prompt/_variables.scss b/packages/material/scss/prompt/_variables.scss index f7c898a61b3..7336ce1bfa5 100644 --- a/packages/material/scss/prompt/_variables.scss +++ b/packages/material/scss/prompt/_variables.scss @@ -67,7 +67,7 @@ $kendo-prompt-suggestion-border: $kendo-component-border !default; /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; -@forward "@progress/kendo-theme-default/scss/prompt/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/prompt/_variables.scss" with ( $kendo-prompt-text: $kendo-prompt-text, $kendo-prompt-bg: $kendo-prompt-bg, $kendo-prompt-border: $kendo-prompt-border, diff --git a/packages/material/scss/radio/_layout.scss b/packages/material/scss/radio/_layout.scss index 70f177ba22a..139f60b24e7 100644 --- a/packages/material/scss/radio/_layout.scss +++ b/packages/material/scss/radio/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/radio/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/radio/_layout.scss" as *; @mixin kendo-radio--layout() { diff --git a/packages/material/scss/radio/_theme.scss b/packages/material/scss/radio/_theme.scss index db6797641e7..3f1d700456b 100644 --- a/packages/material/scss/radio/_theme.scss +++ b/packages/material/scss/radio/_theme.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/radio/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *; @mixin kendo-radio--theme() { diff --git a/packages/material/scss/radio/_variables.scss b/packages/material/scss/radio/_variables.scss index 2395711824a..ed6fd2f14c5 100644 --- a/packages/material/scss/radio/_variables.scss +++ b/packages/material/scss/radio/_variables.scss @@ -188,7 +188,7 @@ $kendo-radio-ripple-bg: $kendo-color-primary !default; /// @group radio $kendo-radio-ripple-opacity: .2 !default; -@forward "@progress/kendo-theme-default/scss/radio/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/radio/_variables.scss" with ( $kendo-radio-radius: $kendo-radio-radius, $kendo-radio-border-width: $kendo-radio-border-width, $kendo-radio-sm-size: $kendo-radio-sm-size, diff --git a/packages/material/scss/rating/_layout.scss b/packages/material/scss/rating/_layout.scss index 97eb47be48d..18e97c4b0c6 100644 --- a/packages/material/scss/rating/_layout.scss +++ b/packages/material/scss/rating/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/rating/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/rating/_layout.scss" as *; @mixin kendo-rating--layout() { diff --git a/packages/material/scss/rating/_theme.scss b/packages/material/scss/rating/_theme.scss index 2240943e52f..46c2802a6f5 100644 --- a/packages/material/scss/rating/_theme.scss +++ b/packages/material/scss/rating/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/rating/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/rating/_theme.scss" as *; @mixin kendo-rating--theme() { diff --git a/packages/material/scss/rating/_variables.scss b/packages/material/scss/rating/_variables.scss index be4e4b475e2..fac66e37b5d 100644 --- a/packages/material/scss/rating/_variables.scss +++ b/packages/material/scss/rating/_variables.scss @@ -53,7 +53,7 @@ $kendo-rating-icon-focus-shadow: 0 2px 4px rgba( black, .1 ) !default; /// @group rating $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default; -@forward "@progress/kendo-theme-default/scss/rating/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/rating/_variables.scss" with ( $kendo-rating-font-family: $kendo-rating-font-family, $kendo-rating-font-size: $kendo-rating-font-size, $kendo-rating-line-height: $kendo-rating-line-height, diff --git a/packages/material/scss/responsivepanel/_layout.scss b/packages/material/scss/responsivepanel/_layout.scss index 18166633b64..f3feaa8a76f 100644 --- a/packages/material/scss/responsivepanel/_layout.scss +++ b/packages/material/scss/responsivepanel/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/responsivepanel/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/responsivepanel/_layout.scss" as *; @mixin kendo-responsive-panel--layout() { diff --git a/packages/material/scss/responsivepanel/_theme.scss b/packages/material/scss/responsivepanel/_theme.scss index 29acbc480a6..730b6e1689a 100644 --- a/packages/material/scss/responsivepanel/_theme.scss +++ b/packages/material/scss/responsivepanel/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/responsivepanel/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/responsivepanel/_theme.scss" as *; @mixin kendo-responsive-panel--theme() { diff --git a/packages/material/scss/ripple/_layout.scss b/packages/material/scss/ripple/_layout.scss index 683a4642378..1d3c0c0ffe4 100644 --- a/packages/material/scss/ripple/_layout.scss +++ b/packages/material/scss/ripple/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/ripple/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/ripple/_layout.scss" as *; @mixin kendo-ripple--layout() { diff --git a/packages/material/scss/ripple/_theme.scss b/packages/material/scss/ripple/_theme.scss index 188a394c350..c278b1af59d 100644 --- a/packages/material/scss/ripple/_theme.scss +++ b/packages/material/scss/ripple/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/ripple/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/ripple/_theme.scss" as *; @mixin kendo-ripple--theme() { diff --git a/packages/material/scss/scheduler/_layout.scss b/packages/material/scss/scheduler/_layout.scss index 447e0c9fe26..7597f0818fe 100644 --- a/packages/material/scss/scheduler/_layout.scss +++ b/packages/material/scss/scheduler/_layout.scss @@ -1,6 +1,6 @@ @use "sass:math"; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/scheduler/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/scheduler/_layout.scss" as *; @mixin kendo-scheduler--layout() { diff --git a/packages/material/scss/scheduler/_theme.scss b/packages/material/scss/scheduler/_theme.scss index 0e4f8f5fbd4..2dcb3f560a0 100644 --- a/packages/material/scss/scheduler/_theme.scss +++ b/packages/material/scss/scheduler/_theme.scss @@ -1,7 +1,7 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; @use "../floating-label/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/scheduler/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/scheduler/_theme.scss" as *; @mixin kendo-scheduler--theme() { diff --git a/packages/material/scss/scheduler/_variables.scss b/packages/material/scss/scheduler/_variables.scss index 718745ec979..c48032b76f6 100644 --- a/packages/material/scss/scheduler/_variables.scss +++ b/packages/material/scss/scheduler/_variables.scss @@ -271,7 +271,7 @@ $kendo-scheduler-marquee-label-inset-x: k-spacing(2) !default; /// @group scheduler $kendo-scheduler-marquee-label-inset-y: k-spacing(0.5) !default; -@forward "@progress/kendo-theme-default/scss/scheduler/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/scheduler/_variables.scss" with ( $kendo-scheduler-border-width: $kendo-scheduler-border-width, $kendo-scheduler-font-family: $kendo-scheduler-font-family, $kendo-scheduler-font-size: $kendo-scheduler-font-size, diff --git a/packages/material/scss/scroller/_layout.scss b/packages/material/scss/scroller/_layout.scss index 8c7d67a7217..3a27bc106de 100644 --- a/packages/material/scss/scroller/_layout.scss +++ b/packages/material/scss/scroller/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/scroller/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/scroller/_layout.scss" as *; @mixin kendo-scroller--layout() { diff --git a/packages/material/scss/scroller/_theme.scss b/packages/material/scss/scroller/_theme.scss index e7d3b1d565c..046d7a1a20f 100644 --- a/packages/material/scss/scroller/_theme.scss +++ b/packages/material/scss/scroller/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/scroller/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/scroller/_theme.scss" as *; @mixin kendo-scroller--theme() { diff --git a/packages/material/scss/scrollview/_layout.scss b/packages/material/scss/scrollview/_layout.scss index 5bc5e473c72..802bf4e9bc4 100644 --- a/packages/material/scss/scrollview/_layout.scss +++ b/packages/material/scss/scrollview/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/scrollview/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/scrollview/_layout.scss" as *; @mixin kendo-scrollview--layout() { diff --git a/packages/material/scss/scrollview/_theme.scss b/packages/material/scss/scrollview/_theme.scss index 778d9b7c08b..501a7e9c8ed 100644 --- a/packages/material/scss/scrollview/_theme.scss +++ b/packages/material/scss/scrollview/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/scrollview/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/scrollview/_theme.scss" as *; @mixin kendo-scrollview--theme() { diff --git a/packages/material/scss/scrollview/_variables.scss b/packages/material/scss/scrollview/_variables.scss index 7715f3d0bcc..dc1456b7662 100644 --- a/packages/material/scss/scrollview/_variables.scss +++ b/packages/material/scss/scrollview/_variables.scss @@ -94,7 +94,7 @@ $kendo-scrollview-transition-duration: .3s !default; /// @group scrollview $kendo-scrollview-transition-timing-function: ease-in-out !default; -@forward "@progress/kendo-theme-default/scss/scrollview/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/scrollview/_variables.scss" with ( $kendo-scrollview-border-width: $kendo-scrollview-border-width, $kendo-scrollview-font-family: $kendo-scrollview-font-family, $kendo-scrollview-font-size: $kendo-scrollview-font-size, diff --git a/packages/material/scss/searchbox/_layout.scss b/packages/material/scss/searchbox/_layout.scss index 42f729d6f48..a8da5bae1f6 100644 --- a/packages/material/scss/searchbox/_layout.scss +++ b/packages/material/scss/searchbox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/searchbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/searchbox/_layout.scss" as *; @mixin kendo-searchbox--layout() { diff --git a/packages/material/scss/searchbox/_theme.scss b/packages/material/scss/searchbox/_theme.scss index 5fe79da30bf..0b50bdeccb3 100644 --- a/packages/material/scss/searchbox/_theme.scss +++ b/packages/material/scss/searchbox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/searchbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/searchbox/_theme.scss" as *; @mixin kendo-searchbox--theme() { diff --git a/packages/material/scss/signature/_layout.scss b/packages/material/scss/signature/_layout.scss index a8605101b47..916834bca1b 100644 --- a/packages/material/scss/signature/_layout.scss +++ b/packages/material/scss/signature/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/signature/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/signature/_layout.scss" as *; @mixin kendo-signature--layout() { diff --git a/packages/material/scss/signature/_theme.scss b/packages/material/scss/signature/_theme.scss index 03720858c1f..80bc08c9ce4 100644 --- a/packages/material/scss/signature/_theme.scss +++ b/packages/material/scss/signature/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/signature/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/signature/_theme.scss" as *; @mixin kendo-signature--theme() { diff --git a/packages/material/scss/signature/_variables.scss b/packages/material/scss/signature/_variables.scss index 4b09e140a9a..c1787826705 100644 --- a/packages/material/scss/signature/_variables.scss +++ b/packages/material/scss/signature/_variables.scss @@ -50,7 +50,7 @@ $kendo-signature-sizes: ( $kendo-signature-actions-gap: k-spacing(1) !default; $kendo-signature-maximized-line-width: 3px !default; -@forward "@progress/kendo-theme-default/scss/signature/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/signature/_variables.scss" with ( $kendo-signature-width: $kendo-signature-width, $kendo-signature-height: $kendo-signature-height, $kendo-signature-lg-min-height: $kendo-signature-lg-min-height, diff --git a/packages/material/scss/skeleton/_layout.scss b/packages/material/scss/skeleton/_layout.scss index c4cd33c6615..f2ed26a6f97 100644 --- a/packages/material/scss/skeleton/_layout.scss +++ b/packages/material/scss/skeleton/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/skeleton/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/skeleton/_layout.scss" as *; @mixin kendo-skeleton--layout() { diff --git a/packages/material/scss/skeleton/_theme.scss b/packages/material/scss/skeleton/_theme.scss index 985d494764a..14daefbc18f 100644 --- a/packages/material/scss/skeleton/_theme.scss +++ b/packages/material/scss/skeleton/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/skeleton/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/skeleton/_theme.scss" as *; @mixin kendo-skeleton--theme() { diff --git a/packages/material/scss/skeleton/_variables.scss b/packages/material/scss/skeleton/_variables.scss index 2ccd2a6b6e5..bfec8cc65e2 100644 --- a/packages/material/scss/skeleton/_variables.scss +++ b/packages/material/scss/skeleton/_variables.scss @@ -24,7 +24,7 @@ $kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-col /// @group skeleton $kendo-skeleton-wave-bg: rgba( black, .04 ) !default; -@forward "@progress/kendo-theme-default/scss/skeleton/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/skeleton/_variables.scss" with ( $kendo-skeleton-text-transform: $kendo-skeleton-text-transform, $kendo-skeleton-text-border-radius: $kendo-skeleton-text-border-radius, $kendo-skeleton-rect-border-radius: $kendo-skeleton-rect-border-radius, diff --git a/packages/material/scss/slider/_layout.scss b/packages/material/scss/slider/_layout.scss index cf40070fd7d..2a2a0eb078e 100644 --- a/packages/material/scss/slider/_layout.scss +++ b/packages/material/scss/slider/_layout.scss @@ -1,6 +1,6 @@ @use "sass:math"; @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/slider/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/slider/_layout.scss" as *; @mixin kendo-slider--layout() { diff --git a/packages/material/scss/slider/_theme.scss b/packages/material/scss/slider/_theme.scss index 429951efabb..b61813821a3 100644 --- a/packages/material/scss/slider/_theme.scss +++ b/packages/material/scss/slider/_theme.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/slider/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/slider/_theme.scss" as *; @mixin kendo-slider--theme() { diff --git a/packages/material/scss/slider/_variables.scss b/packages/material/scss/slider/_variables.scss index 0598a23a8fd..830534a6914 100644 --- a/packages/material/scss/slider/_variables.scss +++ b/packages/material/scss/slider/_variables.scss @@ -124,7 +124,7 @@ $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5 /// @group slider $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" !default; -@forward "@progress/kendo-theme-default/scss/slider/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with ( $kendo-slider-size: $kendo-slider-size, $kendo-slider-tick-size: $kendo-slider-tick-size, $kendo-slider-alt-size: $kendo-slider-alt-size, diff --git a/packages/material/scss/split-button/_layout.scss b/packages/material/scss/split-button/_layout.scss index 689008e76ae..e588a458c4c 100644 --- a/packages/material/scss/split-button/_layout.scss +++ b/packages/material/scss/split-button/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/split-button/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/split-button/_layout.scss" as *; @mixin kendo-split-button--layout() { diff --git a/packages/material/scss/split-button/_theme.scss b/packages/material/scss/split-button/_theme.scss index ea550a578bf..1408e7b223f 100644 --- a/packages/material/scss/split-button/_theme.scss +++ b/packages/material/scss/split-button/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/split-button/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/split-button/_theme.scss" as *; @mixin kendo-split-button--theme() { diff --git a/packages/material/scss/split-button/_variables.scss b/packages/material/scss/split-button/_variables.scss index 15242143b80..306e2287bed 100644 --- a/packages/material/scss/split-button/_variables.scss +++ b/packages/material/scss/split-button/_variables.scss @@ -33,7 +33,7 @@ $kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default; /// @group split-button $kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default; -@forward "@progress/kendo-theme-default/scss/split-button/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/split-button/_variables.scss" with ( $kendo-split-button-focus-shadow: $kendo-split-button-focus-shadow, $kendo-split-button-arrow-padding-x: $kendo-split-button-arrow-padding-x, $kendo-split-button-sm-arrow-padding-x: $kendo-split-button-sm-arrow-padding-x, diff --git a/packages/material/scss/splitter/_layout.scss b/packages/material/scss/splitter/_layout.scss index ae6eddfa521..9fd410bf1c5 100644 --- a/packages/material/scss/splitter/_layout.scss +++ b/packages/material/scss/splitter/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/splitter/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/splitter/_layout.scss" as *; @mixin kendo-splitter--layout() { diff --git a/packages/material/scss/splitter/_theme.scss b/packages/material/scss/splitter/_theme.scss index 146fbe12958..46244d88b74 100644 --- a/packages/material/scss/splitter/_theme.scss +++ b/packages/material/scss/splitter/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/splitter/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/splitter/_theme.scss" as *; @mixin kendo-splitter--theme() { diff --git a/packages/material/scss/splitter/_variables.scss b/packages/material/scss/splitter/_variables.scss index 312ae27191e..a9e6722043a 100644 --- a/packages/material/scss/splitter/_variables.scss +++ b/packages/material/scss/splitter/_variables.scss @@ -66,7 +66,7 @@ $kendo-splitbar-selected-bg: $kendo-color-primary !default; /// @group splitter $kendo-splitbar-selected-text: $kendo-color-primary-contrast !default; -@forward "@progress/kendo-theme-default/scss/splitter/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/splitter/_variables.scss" with ( $kendo-splitter-border-width: $kendo-splitter-border-width, $kendo-splitter-font-family: $kendo-splitter-font-family, $kendo-splitter-font-size: $kendo-splitter-font-size, diff --git a/packages/material/scss/spreadsheet/_layout.scss b/packages/material/scss/spreadsheet/_layout.scss index 63b07fb5b3e..ec8d90a5224 100644 --- a/packages/material/scss/spreadsheet/_layout.scss +++ b/packages/material/scss/spreadsheet/_layout.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/spreadsheet/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/spreadsheet/_layout.scss" as *; @mixin kendo-spreadsheet--layout() { diff --git a/packages/material/scss/spreadsheet/_theme.scss b/packages/material/scss/spreadsheet/_theme.scss index ed320f61c84..76f68f10afd 100644 --- a/packages/material/scss/spreadsheet/_theme.scss +++ b/packages/material/scss/spreadsheet/_theme.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/spreadsheet/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/spreadsheet/_theme.scss" as *; @mixin kendo-spreadsheet--theme() { diff --git a/packages/material/scss/spreadsheet/_variables.scss b/packages/material/scss/spreadsheet/_variables.scss index 25a72626cbe..719208d3d82 100644 --- a/packages/material/scss/spreadsheet/_variables.scss +++ b/packages/material/scss/spreadsheet/_variables.scss @@ -278,7 +278,7 @@ $kendo-spreadsheet-filter-menu-link-padding-x: calc( #{$kendo-icon-size} + calc( $kendo-spreadsheet-filter-menu-icon-margin: 0 k-spacing(1) 0 calc(-1 * ( #{$kendo-icon-size} + #{k-spacing(1)} ) ) !default; -@forward "@progress/kendo-theme-default/scss/spreadsheet/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/spreadsheet/_variables.scss" with ( $kendo-spreadsheet-border-width: $kendo-spreadsheet-border-width, $kendo-spreadsheet-font-family: $kendo-spreadsheet-font-family, $kendo-spreadsheet-font-size: $kendo-spreadsheet-font-size, @@ -304,6 +304,7 @@ $kendo-spreadsheet-filter-menu-icon-margin: 0 k-spacing(1) 0 calc(-1 * ( #{$kend $kendo-spreadsheet-formula-input-padding-x: $kendo-spreadsheet-formula-input-padding-x, $kendo-spreadsheet-formula-input-padding-y: $kendo-spreadsheet-formula-input-padding-y, $kendo-spreadsheet-formula-input-line-height: $kendo-spreadsheet-formula-input-line-height, + $kendo-spreadsheet-formula-bar-icon-padding: $kendo-spreadsheet-formula-bar-icon-padding, $kendo-spreadsheet-view-font-family: $kendo-spreadsheet-view-font-family, $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-view-font-size, $kendo-spreadsheet-selection-bg: $kendo-spreadsheet-selection-bg, diff --git a/packages/material/scss/stacklayout/_layout.scss b/packages/material/scss/stacklayout/_layout.scss index 2de11b309d7..80f15cebe27 100644 --- a/packages/material/scss/stacklayout/_layout.scss +++ b/packages/material/scss/stacklayout/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/stacklayout/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/stacklayout/_layout.scss" as *; @mixin kendo-stack-layout--layout() { diff --git a/packages/material/scss/stacklayout/_theme.scss b/packages/material/scss/stacklayout/_theme.scss index ac7b7780f39..b02bba8553e 100644 --- a/packages/material/scss/stacklayout/_theme.scss +++ b/packages/material/scss/stacklayout/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/stacklayout/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/stacklayout/_theme.scss" as *; @mixin kendo-stack-layout--theme() { diff --git a/packages/material/scss/stepper/_layout.scss b/packages/material/scss/stepper/_layout.scss index f5677edebb3..bb354249cc6 100644 --- a/packages/material/scss/stepper/_layout.scss +++ b/packages/material/scss/stepper/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/stepper/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/stepper/_layout.scss" as *; @mixin kendo-stepper--layout() { diff --git a/packages/material/scss/stepper/_theme.scss b/packages/material/scss/stepper/_theme.scss index 71e60ac1d04..3c29d3141d1 100644 --- a/packages/material/scss/stepper/_theme.scss +++ b/packages/material/scss/stepper/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/stepper/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/stepper/_theme.scss" as *; @mixin kendo-stepper--theme() { diff --git a/packages/material/scss/stepper/_variables.scss b/packages/material/scss/stepper/_variables.scss index 0faf8eebe82..a22033e9567 100644 --- a/packages/material/scss/stepper/_variables.scss +++ b/packages/material/scss/stepper/_variables.scss @@ -232,7 +232,7 @@ $kendo-stepper-content-transition-duration: 300ms !default; /// @group stepper $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default; -@forward "@progress/kendo-theme-default/scss/stepper/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/stepper/_variables.scss" with ( $kendo-stepper-margin-x: $kendo-stepper-margin-x, $kendo-stepper-margin-y: $kendo-stepper-margin-y, $kendo-stepper-padding-x: $kendo-stepper-padding-x, diff --git a/packages/material/scss/switch/_layout.scss b/packages/material/scss/switch/_layout.scss index 7cfda539562..1973c0a2615 100644 --- a/packages/material/scss/switch/_layout.scss +++ b/packages/material/scss/switch/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/switch/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/switch/_layout.scss" as *; @mixin kendo-switch--layout() { diff --git a/packages/material/scss/switch/_theme.scss b/packages/material/scss/switch/_theme.scss index b6747523705..fb3ea17a22a 100644 --- a/packages/material/scss/switch/_theme.scss +++ b/packages/material/scss/switch/_theme.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/switch/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/switch/_theme.scss" as *; @mixin kendo-switch--theme() { diff --git a/packages/material/scss/switch/_variables.scss b/packages/material/scss/switch/_variables.scss index 80d30caebdb..61c9c940bf5 100644 --- a/packages/material/scss/switch/_variables.scss +++ b/packages/material/scss/switch/_variables.scss @@ -193,7 +193,7 @@ $kendo-switch-on-thumb-hover-border: null !default; /// @group switch $kendo-switch-on-thumb-hover-gradient: null !default; -@forward "@progress/kendo-theme-default/scss/switch/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/switch/_variables.scss" with ( $kendo-switch-font-family: $kendo-switch-font-family, $kendo-switch-track-border-width: $kendo-switch-track-border-width, $kendo-switch-thumb-border-width: $kendo-switch-thumb-border-width, diff --git a/packages/material/scss/table/_layout.scss b/packages/material/scss/table/_layout.scss index 2666566ef8a..af202eeaddf 100644 --- a/packages/material/scss/table/_layout.scss +++ b/packages/material/scss/table/_layout.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/table/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/table/_layout.scss" as *; @mixin kendo-table--layout() { diff --git a/packages/material/scss/table/_theme.scss b/packages/material/scss/table/_theme.scss index d60171f7d6c..16f88ed7429 100644 --- a/packages/material/scss/table/_theme.scss +++ b/packages/material/scss/table/_theme.scss @@ -1,6 +1,6 @@ @use "../core/_index.scss" as *; @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/table/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/table/_theme.scss" as *; @mixin kendo-table--theme() { diff --git a/packages/material/scss/table/_variables.scss b/packages/material/scss/table/_variables.scss index cb2627bbf35..a883fe67aeb 100644 --- a/packages/material/scss/table/_variables.scss +++ b/packages/material/scss/table/_variables.scss @@ -157,7 +157,7 @@ $kendo-table-selected-text: null !default; /// @group table $kendo-table-selected-border: null !default; -@forward "@progress/kendo-theme-default/scss/table/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/table/_variables.scss" with ( $kendo-table-border-width: $kendo-table-border-width, $kendo-table-cell-vertical-border-width: $kendo-table-cell-vertical-border-width, $kendo-table-cell-horizontal-border-width: $kendo-table-cell-horizontal-border-width, diff --git a/packages/material/scss/tabstrip/_layout.scss b/packages/material/scss/tabstrip/_layout.scss index 68db83282b7..055e451a56b 100644 --- a/packages/material/scss/tabstrip/_layout.scss +++ b/packages/material/scss/tabstrip/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/tabstrip/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/tabstrip/_layout.scss" as *; @mixin kendo-tabstrip--layout() { diff --git a/packages/material/scss/tabstrip/_theme.scss b/packages/material/scss/tabstrip/_theme.scss index 2165cc60fac..9621d915e91 100644 --- a/packages/material/scss/tabstrip/_theme.scss +++ b/packages/material/scss/tabstrip/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/tabstrip/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/tabstrip/_theme.scss" as *; @mixin kendo-tabstrip--theme() { diff --git a/packages/material/scss/tabstrip/_variables.scss b/packages/material/scss/tabstrip/_variables.scss index 43b37e4fa5c..22992dedb90 100644 --- a/packages/material/scss/tabstrip/_variables.scss +++ b/packages/material/scss/tabstrip/_variables.scss @@ -228,7 +228,7 @@ $kendo-tabstrip-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/tabstrip/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/tabstrip/_variables.scss" with ( $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x, $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y, $kendo-tabstrip-wrapper-border-width: $kendo-tabstrip-wrapper-border-width, @@ -289,5 +289,6 @@ $kendo-tabstrip-sizes: ( $kendo-tabstrip-content-text: $kendo-tabstrip-content-text, $kendo-tabstrip-content-border: $kendo-tabstrip-content-border, $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border, - $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay + $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay, + $kendo-tabstrip-sizes: $kendo-tabstrip-sizes ); diff --git a/packages/material/scss/taskboard/_layout.scss b/packages/material/scss/taskboard/_layout.scss index dfc1ca7714b..5ed7d59df05 100644 --- a/packages/material/scss/taskboard/_layout.scss +++ b/packages/material/scss/taskboard/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/taskboard/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/taskboard/_layout.scss" as *; @mixin kendo-task-board--layout() { diff --git a/packages/material/scss/taskboard/_theme.scss b/packages/material/scss/taskboard/_theme.scss index 0c73220fb1f..79a2a561040 100644 --- a/packages/material/scss/taskboard/_theme.scss +++ b/packages/material/scss/taskboard/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/taskboard/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/taskboard/_theme.scss" as *; @mixin kendo-task-board--theme() { diff --git a/packages/material/scss/taskboard/_variables.scss b/packages/material/scss/taskboard/_variables.scss index d10d5c3ab0e..601c54ffdc8 100644 --- a/packages/material/scss/taskboard/_variables.scss +++ b/packages/material/scss/taskboard/_variables.scss @@ -249,7 +249,7 @@ $kendo-taskboard-drag-placeholder-bg: rgba( white, .2 ) !default; /// @group taskboard $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default; -@forward "@progress/kendo-theme-default/scss/taskboard/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/taskboard/_variables.scss" with ( $kendo-taskboard-spacer: $kendo-taskboard-spacer, $kendo-taskboard-padding-y: $kendo-taskboard-padding-y, $kendo-taskboard-padding-x: $kendo-taskboard-padding-x, diff --git a/packages/material/scss/textarea/_layout.scss b/packages/material/scss/textarea/_layout.scss index 16781f329b9..3097e76a6bd 100644 --- a/packages/material/scss/textarea/_layout.scss +++ b/packages/material/scss/textarea/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/textarea/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/textarea/_layout.scss" as *; @mixin kendo-textarea--layout() { diff --git a/packages/material/scss/textarea/_theme.scss b/packages/material/scss/textarea/_theme.scss index bef39693e2c..c049556e6b1 100644 --- a/packages/material/scss/textarea/_theme.scss +++ b/packages/material/scss/textarea/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/textarea/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/textarea/_theme.scss" as *; @mixin kendo-textarea--theme() { diff --git a/packages/material/scss/textbox/_layout.scss b/packages/material/scss/textbox/_layout.scss index 58668b4c48a..6143f65bdea 100644 --- a/packages/material/scss/textbox/_layout.scss +++ b/packages/material/scss/textbox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/textbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/textbox/_layout.scss" as *; @mixin kendo-textbox--layout() { diff --git a/packages/material/scss/textbox/_theme.scss b/packages/material/scss/textbox/_theme.scss index ea7449be0eb..bdf8d50f733 100644 --- a/packages/material/scss/textbox/_theme.scss +++ b/packages/material/scss/textbox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/textbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/textbox/_theme.scss" as *; @mixin kendo-textbox--theme() { diff --git a/packages/material/scss/tilelayout/_layout.scss b/packages/material/scss/tilelayout/_layout.scss index 2a750806991..fe98a587d60 100644 --- a/packages/material/scss/tilelayout/_layout.scss +++ b/packages/material/scss/tilelayout/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/tilelayout/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/tilelayout/_layout.scss" as *; @mixin kendo-tile-layout--layout() { diff --git a/packages/material/scss/tilelayout/_theme.scss b/packages/material/scss/tilelayout/_theme.scss index 4d48e8d71b3..988584a8634 100644 --- a/packages/material/scss/tilelayout/_theme.scss +++ b/packages/material/scss/tilelayout/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/tilelayout/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/tilelayout/_theme.scss" as *; @mixin kendo-tile-layout--theme() { diff --git a/packages/material/scss/tilelayout/_variables.scss b/packages/material/scss/tilelayout/_variables.scss index 8e2ccbae64b..579130dd7ff 100644 --- a/packages/material/scss/tilelayout/_variables.scss +++ b/packages/material/scss/tilelayout/_variables.scss @@ -39,7 +39,7 @@ $kendo-tile-layout-hint-border: $kendo-component-border !default; $kendo-tile-layout-hint-bg: rgba( white, .2 ) !default; -@forward "@progress/kendo-theme-default/scss/tilelayout/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/tilelayout/_variables.scss" with ( $kendo-tile-layout-border-width: $kendo-tile-layout-border-width, $kendo-tile-layout-bg: $kendo-tile-layout-bg, $kendo-tile-layout-padding-x: $kendo-tile-layout-padding-x, diff --git a/packages/material/scss/time-marker/_layout.scss b/packages/material/scss/time-marker/_layout.scss index d05ea4bc1af..2e696fa2780 100644 --- a/packages/material/scss/time-marker/_layout.scss +++ b/packages/material/scss/time-marker/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/time-marker/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/time-marker/_layout.scss" as *; @mixin kendo-time-marker--layout() { @include kendo-time-marker--layout-base(); diff --git a/packages/material/scss/time-marker/_theme.scss b/packages/material/scss/time-marker/_theme.scss index 146ffcb38b1..f2bdb6f525e 100644 --- a/packages/material/scss/time-marker/_theme.scss +++ b/packages/material/scss/time-marker/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/time-marker/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/time-marker/_theme.scss" as *; @mixin kendo-time-marker--theme() { diff --git a/packages/material/scss/time-marker/_variables.scss b/packages/material/scss/time-marker/_variables.scss index e1a1c20f204..0be9398be05 100644 --- a/packages/material/scss/time-marker/_variables.scss +++ b/packages/material/scss/time-marker/_variables.scss @@ -5,7 +5,7 @@ $kendo-current-time-width: 1px !default; /// @group time-marker $kendo-current-time-color: #ff0000 !default; -@forward "@progress/kendo-theme-default/scss/time-marker/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/time-marker/_variables.scss" with ( $kendo-current-time-width: $kendo-current-time-width, $kendo-current-time-color: $kendo-current-time-color ); diff --git a/packages/material/scss/timedurationpicker/_layout.scss b/packages/material/scss/timedurationpicker/_layout.scss index 19da028f479..68c888df641 100644 --- a/packages/material/scss/timedurationpicker/_layout.scss +++ b/packages/material/scss/timedurationpicker/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/timedurationpicker/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timedurationpicker/_layout.scss" as *; @mixin kendo-time-duration-picker--layout() { diff --git a/packages/material/scss/timedurationpicker/_theme.scss b/packages/material/scss/timedurationpicker/_theme.scss index 1800f07127c..d10693ff450 100644 --- a/packages/material/scss/timedurationpicker/_theme.scss +++ b/packages/material/scss/timedurationpicker/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/timedurationpicker/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timedurationpicker/_theme.scss" as *; @mixin kendo-time-duration-picker--theme() { diff --git a/packages/material/scss/timeline/_layout.scss b/packages/material/scss/timeline/_layout.scss index e66f0186f26..b3c2dd0da82 100644 --- a/packages/material/scss/timeline/_layout.scss +++ b/packages/material/scss/timeline/_layout.scss @@ -1,5 +1,5 @@ @use "../button/_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/timeline/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timeline/_layout.scss" as *; @mixin kendo-timeline--layout() { diff --git a/packages/material/scss/timeline/_theme.scss b/packages/material/scss/timeline/_theme.scss index 680481a1b59..5adaa50b3c0 100644 --- a/packages/material/scss/timeline/_theme.scss +++ b/packages/material/scss/timeline/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/timeline/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timeline/_theme.scss" as *; @mixin kendo-timeline--theme() { diff --git a/packages/material/scss/timeline/_variables.scss b/packages/material/scss/timeline/_variables.scss index 75b00bbf55f..07d9e982d81 100644 --- a/packages/material/scss/timeline/_variables.scss +++ b/packages/material/scss/timeline/_variables.scss @@ -171,7 +171,7 @@ $kendo-timeline-event-height: 600px !default; /// @group timeline $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width})) !default; -@forward "@progress/kendo-theme-default/scss/timeline/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/timeline/_variables.scss" with ( $kendo-timeline-spacing-x: $kendo-timeline-spacing-x, $kendo-timeline-spacing-y: $kendo-timeline-spacing-y, $kendo-timeline-items-padding: $kendo-timeline-items-padding, diff --git a/packages/material/scss/timepicker/_layout.scss b/packages/material/scss/timepicker/_layout.scss index d6c8432ec86..2f15a2f5b75 100644 --- a/packages/material/scss/timepicker/_layout.scss +++ b/packages/material/scss/timepicker/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/timepicker/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timepicker/_layout.scss" as *; @mixin kendo-time-picker--layout() { diff --git a/packages/material/scss/timepicker/_theme.scss b/packages/material/scss/timepicker/_theme.scss index 1b497a5b15f..275cb2e13a5 100644 --- a/packages/material/scss/timepicker/_theme.scss +++ b/packages/material/scss/timepicker/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/timepicker/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timepicker/_theme.scss" as *; @mixin kendo-time-picker--theme() { @include kendo-time-picker--theme-base(); diff --git a/packages/material/scss/timeselector/_layout.scss b/packages/material/scss/timeselector/_layout.scss index 3b05ebc2c97..e975955e4b2 100644 --- a/packages/material/scss/timeselector/_layout.scss +++ b/packages/material/scss/timeselector/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/timeselector/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timeselector/_layout.scss" as *; @mixin kendo-time-selector--layout() { diff --git a/packages/material/scss/timeselector/_theme.scss b/packages/material/scss/timeselector/_theme.scss index afe0535dc07..37bbfddac93 100644 --- a/packages/material/scss/timeselector/_theme.scss +++ b/packages/material/scss/timeselector/_theme.scss @@ -1,6 +1,6 @@ @use "../list/_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/timeselector/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/timeselector/_theme.scss" as *; @mixin kendo-time-selector--theme() { diff --git a/packages/material/scss/timeselector/_variables.scss b/packages/material/scss/timeselector/_variables.scss index fecc1c6a6ee..967dbb653cc 100644 --- a/packages/material/scss/timeselector/_variables.scss +++ b/packages/material/scss/timeselector/_variables.scss @@ -77,7 +77,7 @@ $kendo-time-selector-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/timeselector/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with ( $kendo-time-selector-border-width: $kendo-time-selector-border-width, $kendo-time-selector-font-family: $kendo-time-selector-font-family, $kendo-time-selector-font-size: $kendo-time-selector-font-size, diff --git a/packages/material/scss/toolbar/_layout.scss b/packages/material/scss/toolbar/_layout.scss index 44c5dc46f4d..46c83d48c04 100644 --- a/packages/material/scss/toolbar/_layout.scss +++ b/packages/material/scss/toolbar/_layout.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/toolbar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/toolbar/_layout.scss" as *; @mixin kendo-toolbar--layout() { diff --git a/packages/material/scss/toolbar/_theme.scss b/packages/material/scss/toolbar/_theme.scss index dabbc459434..5da4294749c 100644 --- a/packages/material/scss/toolbar/_theme.scss +++ b/packages/material/scss/toolbar/_theme.scss @@ -1,7 +1,7 @@ @use "../core/_index.scss" as *; @use "../button/_variables.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/toolbar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/toolbar/_theme.scss" as *; @mixin kendo-toolbar--theme() { diff --git a/packages/material/scss/toolbar/_variables.scss b/packages/material/scss/toolbar/_variables.scss index 99a8c77ac5a..2d71a3626fb 100644 --- a/packages/material/scss/toolbar/_variables.scss +++ b/packages/material/scss/toolbar/_variables.scss @@ -182,7 +182,7 @@ $kendo-toolbar-sizes: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/toolbar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/toolbar/_variables.scss" with ( $kendo-toolbar-padding-x: $kendo-toolbar-padding-x, $kendo-toolbar-sm-padding-x: $kendo-toolbar-sm-padding-x, $kendo-toolbar-md-padding-x: $kendo-toolbar-md-padding-x, @@ -195,6 +195,7 @@ $kendo-toolbar-sizes: ( $kendo-toolbar-sm-spacing: $kendo-toolbar-sm-spacing, $kendo-toolbar-md-spacing: $kendo-toolbar-md-spacing, $kendo-toolbar-lg-spacing: $kendo-toolbar-lg-spacing, + $kendo-toolbar-separator-height: $kendo-toolbar-separator-height, $kendo-toolbar-border-width: $kendo-toolbar-border-width, $kendo-toolbar-border-radius: $kendo-toolbar-border-radius, $kendo-toolbar-font-family: $kendo-toolbar-font-family, @@ -218,6 +219,12 @@ $kendo-toolbar-sizes: ( $kendo-toolbar-separator-border: $kendo-toolbar-separator-border, $kendo-toolbar-input-width: $kendo-toolbar-input-width, $kendo-toolbar-item-shadow: $kendo-toolbar-item-shadow, - $kendo-toolbar-sizes: $kendo-toolbar-sizes, - $kendo-toolbar-overflow-container-font-size: $kendo-toolbar-overflow-container-font-size + $kendo-toolbar-scroll-overlay: $kendo-toolbar-scroll-overlay, + $kendo-toolbar-flat-scroll-overlay: $kendo-toolbar-flat-scroll-overlay, + $kendo-toolbar-outline-scroll-overlay: $kendo-toolbar-outline-scroll-overlay, + $kendo-toolbar-overflow-container-font-size: $kendo-toolbar-overflow-container-font-size, + $kendo-toolbar-overflow-container-line-height: $kendo-toolbar-overflow-container-line-height, + $kendo-toolbar-overflow-button-padding-y: $kendo-toolbar-overflow-button-padding-y, + $kendo-toolbar-overflow-button-padding-x: $kendo-toolbar-overflow-button-padding-x, + $kendo-toolbar-sizes: $kendo-toolbar-sizes ); diff --git a/packages/material/scss/tooltip/_layout.scss b/packages/material/scss/tooltip/_layout.scss index f76f1093385..3d2049fad19 100644 --- a/packages/material/scss/tooltip/_layout.scss +++ b/packages/material/scss/tooltip/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/tooltip/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/tooltip/_layout.scss" as *; @mixin kendo-tooltip--layout() { diff --git a/packages/material/scss/tooltip/_theme.scss b/packages/material/scss/tooltip/_theme.scss index 40dad3e8b0e..cd1a368b3a6 100644 --- a/packages/material/scss/tooltip/_theme.scss +++ b/packages/material/scss/tooltip/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/tooltip/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/tooltip/_theme.scss" as *; @mixin kendo-tooltip--theme() { diff --git a/packages/material/scss/tooltip/_variables.scss b/packages/material/scss/tooltip/_variables.scss index 205e1f4bada..68f71fd97c4 100644 --- a/packages/material/scss/tooltip/_variables.scss +++ b/packages/material/scss/tooltip/_variables.scss @@ -60,7 +60,7 @@ $kendo-tooltip-theme-colors: $kendo-theme-colors !default; /// @group tooltip $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default; -@forward "@progress/kendo-theme-default/scss/tooltip/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/tooltip/_variables.scss" with ( $kendo-tooltip-padding-y: $kendo-tooltip-padding-y, $kendo-tooltip-padding-x: $kendo-tooltip-padding-x, $kendo-tooltip-border-width: $kendo-tooltip-border-width, diff --git a/packages/material/scss/treelist/_layout.scss b/packages/material/scss/treelist/_layout.scss index bc59e67df46..5bd14d2162d 100644 --- a/packages/material/scss/treelist/_layout.scss +++ b/packages/material/scss/treelist/_layout.scss @@ -1,5 +1,5 @@ @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/treelist/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/treelist/_layout.scss" as *; @mixin kendo-treelist--layout() { diff --git a/packages/material/scss/treelist/_theme.scss b/packages/material/scss/treelist/_theme.scss index a18622f965a..b4b1a370a13 100644 --- a/packages/material/scss/treelist/_theme.scss +++ b/packages/material/scss/treelist/_theme.scss @@ -1,5 +1,5 @@ @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/treelist/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/treelist/_theme.scss" as *; @mixin kendo-treelist--theme() { diff --git a/packages/material/scss/treelist/_variables.scss b/packages/material/scss/treelist/_variables.scss index 9f71dac33be..d4ee58d75a1 100644 --- a/packages/material/scss/treelist/_variables.scss +++ b/packages/material/scss/treelist/_variables.scss @@ -9,7 +9,7 @@ $kendo-treelist-footer-row-bg: $kendo-grid-selected-bg !default; /// @group treelist $kendo-treelist-footer-row-border-width: 1px !default; -@forward "@progress/kendo-theme-default/scss/treelist/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/treelist/_variables.scss" with ( $kendo-treelist-footer-row-bg: $kendo-treelist-footer-row-bg, $kendo-treelist-footer-row-border-width: $kendo-treelist-footer-row-border-width ); diff --git a/packages/material/scss/treeview/_layout.scss b/packages/material/scss/treeview/_layout.scss index 6233644ba39..99221eaea1b 100644 --- a/packages/material/scss/treeview/_layout.scss +++ b/packages/material/scss/treeview/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/treeview/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/treeview/_layout.scss" as *; @mixin kendo-treeview--layout() { diff --git a/packages/material/scss/treeview/_theme.scss b/packages/material/scss/treeview/_theme.scss index 0a13583688d..8363dd6f209 100644 --- a/packages/material/scss/treeview/_theme.scss +++ b/packages/material/scss/treeview/_theme.scss @@ -1,6 +1,6 @@ @use "./_variables.scss" as *; @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/treeview/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/treeview/_theme.scss" as *; @mixin kendo-treeview--theme() { diff --git a/packages/material/scss/treeview/_variables.scss b/packages/material/scss/treeview/_variables.scss index 9f85dcc1b58..0cfc4412ee4 100644 --- a/packages/material/scss/treeview/_variables.scss +++ b/packages/material/scss/treeview/_variables.scss @@ -202,7 +202,7 @@ $kendo-treeview-loadmore-focus-border: null !default; $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default; -@forward "@progress/kendo-theme-default/scss/treeview/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/treeview/_variables.scss" with ( $kendo-treeview-font-family: $kendo-treeview-font-family, $kendo-treeview-font-size: $kendo-treeview-font-size, $kendo-treeview-sm-font-size: $kendo-treeview-sm-font-size, diff --git a/packages/material/scss/typography/_layout.scss b/packages/material/scss/typography/_layout.scss index 81db6dc5cf2..89f9ac2100f 100644 --- a/packages/material/scss/typography/_layout.scss +++ b/packages/material/scss/typography/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/typography/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/typography/_layout.scss" as *; @mixin kendo-typography--layout() { diff --git a/packages/material/scss/typography/_theme.scss b/packages/material/scss/typography/_theme.scss index 66755920a29..cdf0ed959d3 100644 --- a/packages/material/scss/typography/_theme.scss +++ b/packages/material/scss/typography/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/typography/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/typography/_theme.scss" as *; @mixin kendo-typography--theme() { diff --git a/packages/material/scss/typography/_variables.scss b/packages/material/scss/typography/_variables.scss index ec730fa0c7a..5308aafaa54 100644 --- a/packages/material/scss/typography/_variables.scss +++ b/packages/material/scss/typography/_variables.scss @@ -338,7 +338,7 @@ $kendo-display: ( ) ) !default; -@forward "@progress/kendo-theme-default/scss/typography/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/typography/_variables.scss" with ( $kendo-h1-font-size: $kendo-h1-font-size, $kendo-h2-font-size: $kendo-h2-font-size, $kendo-h3-font-size: $kendo-h3-font-size, diff --git a/packages/material/scss/upload/_layout.scss b/packages/material/scss/upload/_layout.scss index 1e2adfe9c1a..abc16951840 100644 --- a/packages/material/scss/upload/_layout.scss +++ b/packages/material/scss/upload/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/upload/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/upload/_layout.scss" as *; @mixin kendo-upload--layout() { diff --git a/packages/material/scss/upload/_theme.scss b/packages/material/scss/upload/_theme.scss index 49f0bf357df..5b559da1f4c 100644 --- a/packages/material/scss/upload/_theme.scss +++ b/packages/material/scss/upload/_theme.scss @@ -1,7 +1,7 @@ @use "../core/_index.scss" as *; @use "./_variables.scss" as *; @use "../core/functions/index.import.scss" as *; -@use "@progress/kendo-theme-default/scss/upload/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/upload/_theme.scss" as *; @mixin kendo-upload--theme() { diff --git a/packages/material/scss/upload/_variables.scss b/packages/material/scss/upload/_variables.scss index d1b850ee957..9ce3800bf67 100644 --- a/packages/material/scss/upload/_variables.scss +++ b/packages/material/scss/upload/_variables.scss @@ -109,7 +109,7 @@ $kendo-upload-files-list-margin: calc( -1 * #{k-spacing(1)} ) !default; $kendo-upload-file-info-margin: k-spacing(4) !default; -@forward "@progress/kendo-theme-default/scss/upload/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/upload/_variables.scss" with ( $kendo-upload-border-width: $kendo-upload-border-width, $kendo-upload-font-family: $kendo-upload-font-family, $kendo-upload-font-size: $kendo-upload-font-size, diff --git a/packages/material/scss/validator/_layout.scss b/packages/material/scss/validator/_layout.scss index 8af89531cf7..741d56839ce 100644 --- a/packages/material/scss/validator/_layout.scss +++ b/packages/material/scss/validator/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/validator/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/validator/_layout.scss" as *; @mixin kendo-validator--layout() { diff --git a/packages/material/scss/validator/_theme.scss b/packages/material/scss/validator/_theme.scss index 551b8847229..b1efa354f24 100644 --- a/packages/material/scss/validator/_theme.scss +++ b/packages/material/scss/validator/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/validator/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/validator/_theme.scss" as *; @mixin kendo-validator--theme() { diff --git a/packages/material/scss/virtual-scroller/_layout.scss b/packages/material/scss/virtual-scroller/_layout.scss index 5820dd6a56e..64ea4294bb7 100644 --- a/packages/material/scss/virtual-scroller/_layout.scss +++ b/packages/material/scss/virtual-scroller/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/virtual-scroller/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/virtual-scroller/_layout.scss" as *; @mixin kendo-virtual-scroller--layout() { diff --git a/packages/material/scss/virtual-scroller/_theme.scss b/packages/material/scss/virtual-scroller/_theme.scss index 1a35213cb4f..986669a6cbb 100644 --- a/packages/material/scss/virtual-scroller/_theme.scss +++ b/packages/material/scss/virtual-scroller/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/virtual-scroller/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/virtual-scroller/_theme.scss" as *; @mixin kendo-virtual-scroller--theme() { diff --git a/packages/material/scss/window/_layout.scss b/packages/material/scss/window/_layout.scss index a9ce5a1997b..8b37abc3be8 100644 --- a/packages/material/scss/window/_layout.scss +++ b/packages/material/scss/window/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/window/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/window/_layout.scss" as *; @mixin kendo-window--layout() { diff --git a/packages/material/scss/window/_theme.scss b/packages/material/scss/window/_theme.scss index d476aefbda7..5f98eb17e5b 100644 --- a/packages/material/scss/window/_theme.scss +++ b/packages/material/scss/window/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/window/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/window/_theme.scss" as *; @mixin kendo-window--theme() { diff --git a/packages/material/scss/window/_variables.scss b/packages/material/scss/window/_variables.scss index 6def3a0e130..695d72b66bc 100644 --- a/packages/material/scss/window/_variables.scss +++ b/packages/material/scss/window/_variables.scss @@ -113,7 +113,7 @@ $kendo-window-theme-colors: ( "dark": map.get($kendo-theme-colors, "dark") ) !default; -@forward "@progress/kendo-theme-default/scss/window/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with ( $kendo-window-border-width: $kendo-window-border-width, $kendo-window-border-radius: $kendo-window-border-radius, $kendo-window-font-family: $kendo-window-font-family, diff --git a/packages/material/scss/wizard/_layout.scss b/packages/material/scss/wizard/_layout.scss index 9ac5c5961ff..29bbd9a4bca 100644 --- a/packages/material/scss/wizard/_layout.scss +++ b/packages/material/scss/wizard/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/wizard/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/wizard/_layout.scss" as *; @mixin kendo-wizard--layout() { diff --git a/packages/material/scss/wizard/_theme.scss b/packages/material/scss/wizard/_theme.scss index f17ad481cce..b3e273b5c86 100644 --- a/packages/material/scss/wizard/_theme.scss +++ b/packages/material/scss/wizard/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/wizard/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/wizard/_theme.scss" as *; @mixin kendo-wizard--theme() { diff --git a/packages/material/scss/wizard/_variables.scss b/packages/material/scss/wizard/_variables.scss index ccc73b87611..9a845d9a14d 100644 --- a/packages/material/scss/wizard/_variables.scss +++ b/packages/material/scss/wizard/_variables.scss @@ -35,7 +35,7 @@ $kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default; /// @group wizard $kendo-wizard-step-focus-border: #656565 !default; -@forward "@progress/kendo-theme-default/scss/wizard/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/wizard/_variables.scss" with ( $kendo-wizard-padding-x: $kendo-wizard-padding-x, $kendo-wizard-padding-y: $kendo-wizard-padding-y, $kendo-wizard-content-padding-x: $kendo-wizard-content-padding-x, From e792ad9ba8023cd4417b2f193bd376939ce57960 Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Wed, 8 Jan 2025 16:42:27 +0200 Subject: [PATCH 03/10] chore(bootstrap): use component styles from core --- packages/bootstrap/scss/_variables.scss | 8 ------- .../scss/action-buttons/_layout.scss | 2 +- .../bootstrap/scss/action-buttons/_theme.scss | 2 +- .../scss/action-buttons/_variables.scss | 2 +- .../bootstrap/scss/action-sheet/_layout.scss | 2 +- .../bootstrap/scss/action-sheet/_theme.scss | 2 +- .../scss/action-sheet/_variables.scss | 2 +- packages/bootstrap/scss/adaptive/_layout.scss | 2 +- packages/bootstrap/scss/adaptive/_theme.scss | 2 +- .../bootstrap/scss/adaptive/_variables.scss | 2 +- packages/bootstrap/scss/appbar/_layout.scss | 2 +- packages/bootstrap/scss/appbar/_theme.scss | 2 +- .../bootstrap/scss/appbar/_variables.scss | 2 +- .../bootstrap/scss/autocomplete/_layout.scss | 2 +- .../bootstrap/scss/autocomplete/_theme.scss | 2 +- packages/bootstrap/scss/avatar/_layout.scss | 2 +- packages/bootstrap/scss/avatar/_theme.scss | 2 +- .../bootstrap/scss/avatar/_variables.scss | 2 +- packages/bootstrap/scss/badge/_layout.scss | 2 +- packages/bootstrap/scss/badge/_theme.scss | 2 +- packages/bootstrap/scss/badge/_variables.scss | 2 +- .../scss/bottom-navigation/_layout.scss | 2 +- .../scss/bottom-navigation/_theme.scss | 2 +- .../scss/bottom-navigation/_variables.scss | 2 +- .../bootstrap/scss/breadcrumb/_layout.scss | 2 +- .../bootstrap/scss/breadcrumb/_theme.scss | 2 +- .../bootstrap/scss/breadcrumb/_variables.scss | 2 +- packages/bootstrap/scss/button/_layout.scss | 2 +- packages/bootstrap/scss/button/_theme.scss | 2 +- .../bootstrap/scss/button/_variables.scss | 2 +- packages/bootstrap/scss/calendar/_layout.scss | 2 +- packages/bootstrap/scss/calendar/_theme.scss | 2 +- .../bootstrap/scss/calendar/_variables.scss | 2 +- packages/bootstrap/scss/captcha/_layout.scss | 2 +- packages/bootstrap/scss/captcha/_theme.scss | 2 +- .../bootstrap/scss/captcha/_variables.scss | 2 +- packages/bootstrap/scss/card/_layout.scss | 2 +- packages/bootstrap/scss/card/_theme.scss | 2 +- packages/bootstrap/scss/card/_variables.scss | 2 +- .../bootstrap/scss/chart-wizard/_layout.scss | 2 +- .../bootstrap/scss/chart-wizard/_theme.scss | 2 +- .../scss/chart-wizard/_variables.scss | 2 +- packages/bootstrap/scss/chat/_layout.scss | 2 +- packages/bootstrap/scss/chat/_theme.scss | 2 +- packages/bootstrap/scss/chat/_variables.scss | 2 +- packages/bootstrap/scss/checkbox/_layout.scss | 2 +- packages/bootstrap/scss/checkbox/_theme.scss | 2 +- .../bootstrap/scss/checkbox/_variables.scss | 2 +- packages/bootstrap/scss/chip/_layout.scss | 2 +- packages/bootstrap/scss/chip/_theme.scss | 2 +- packages/bootstrap/scss/chip/_variables.scss | 2 +- .../bootstrap/scss/color-preview/_layout.scss | 2 +- .../bootstrap/scss/color-preview/_theme.scss | 2 +- .../scss/color-preview/_variables.scss | 2 +- .../bootstrap/scss/coloreditor/_layout.scss | 2 +- .../bootstrap/scss/coloreditor/_theme.scss | 2 +- .../scss/coloreditor/_variables.scss | 5 ++-- .../bootstrap/scss/colorgradient/_layout.scss | 2 +- .../bootstrap/scss/colorgradient/_theme.scss | 2 +- .../scss/colorgradient/_variables.scss | 5 ++-- .../bootstrap/scss/colorpalette/_layout.scss | 2 +- .../bootstrap/scss/colorpalette/_theme.scss | 2 +- .../scss/colorpalette/_variables.scss | 5 ++-- .../bootstrap/scss/colorpicker/_layout.scss | 2 +- .../bootstrap/scss/colorpicker/_theme.scss | 2 +- packages/bootstrap/scss/combobox/_layout.scss | 2 +- packages/bootstrap/scss/combobox/_theme.scss | 2 +- packages/bootstrap/scss/core/_index.scss | 2 ++ .../core/color-system/_swatch-legacy.scss | 2 +- packages/bootstrap/scss/dataviz/_layout.scss | 2 +- packages/bootstrap/scss/dataviz/_theme.scss | 2 +- .../bootstrap/scss/dataviz/_variables.scss | 2 +- .../bootstrap/scss/dateinput/_layout.scss | 2 +- packages/bootstrap/scss/dateinput/_theme.scss | 2 +- .../bootstrap/scss/datepicker/_layout.scss | 2 +- .../bootstrap/scss/datepicker/_theme.scss | 2 +- .../scss/daterangepicker/_layout.scss | 2 +- .../scss/daterangepicker/_theme.scss | 2 +- .../scss/daterangepicker/_variables.scss | 2 +- .../scss/datetimepicker/_layout.scss | 2 +- .../bootstrap/scss/datetimepicker/_theme.scss | 2 +- .../scss/datetimepicker/_variables.scss | 2 +- packages/bootstrap/scss/dialog/_layout.scss | 2 +- packages/bootstrap/scss/dialog/_theme.scss | 2 +- .../bootstrap/scss/dialog/_variables.scss | 2 +- .../bootstrap/scss/dock-manager/_layout.scss | 2 +- .../bootstrap/scss/dock-manager/_theme.scss | 2 +- .../scss/dock-manager/_variables.scss | 2 +- .../bootstrap/scss/draggable/_layout.scss | 2 +- packages/bootstrap/scss/draggable/_theme.scss | 2 +- .../bootstrap/scss/draggable/_variables.scss | 2 +- packages/bootstrap/scss/drawer/_layout.scss | 2 +- packages/bootstrap/scss/drawer/_theme.scss | 2 +- .../bootstrap/scss/drawer/_variables.scss | 2 +- .../bootstrap/scss/dropdowngrid/_layout.scss | 2 +- .../bootstrap/scss/dropdowngrid/_theme.scss | 2 +- .../bootstrap/scss/dropdownlist/_layout.scss | 2 +- .../bootstrap/scss/dropdownlist/_theme.scss | 2 +- .../bootstrap/scss/dropdowntree/_layout.scss | 2 +- .../bootstrap/scss/dropdowntree/_theme.scss | 2 +- .../scss/dropdowntree/_variables.scss | 2 +- packages/bootstrap/scss/dropzone/_layout.scss | 2 +- packages/bootstrap/scss/dropzone/_theme.scss | 2 +- .../bootstrap/scss/dropzone/_variables.scss | 2 +- packages/bootstrap/scss/editor/_layout.scss | 2 +- packages/bootstrap/scss/editor/_theme.scss | 2 +- .../bootstrap/scss/editor/_variables.scss | 2 +- .../scss/expansion-panel/_layout.scss | 2 +- .../scss/expansion-panel/_theme.scss | 2 +- .../scss/expansion-panel/_variables.scss | 2 +- packages/bootstrap/scss/fab/_layout.scss | 2 +- packages/bootstrap/scss/fab/_theme.scss | 2 +- packages/bootstrap/scss/fab/_variables.scss | 2 +- .../bootstrap/scss/filemanager/_layout.scss | 2 +- .../bootstrap/scss/filemanager/_theme.scss | 2 +- .../scss/filemanager/_variables.scss | 2 +- packages/bootstrap/scss/filter/_layout.scss | 2 +- packages/bootstrap/scss/filter/_theme.scss | 2 +- .../bootstrap/scss/filter/_variables.scss | 2 +- .../scss/floating-label/_layout.scss | 2 +- .../bootstrap/scss/floating-label/_theme.scss | 2 +- .../scss/floating-label/_variables.scss | 2 +- packages/bootstrap/scss/forms/_layout.scss | 2 +- packages/bootstrap/scss/forms/_theme.scss | 2 +- packages/bootstrap/scss/forms/_variables.scss | 2 +- packages/bootstrap/scss/gantt/_layout.scss | 2 +- packages/bootstrap/scss/gantt/_theme.scss | 2 +- packages/bootstrap/scss/gantt/_variables.scss | 2 +- packages/bootstrap/scss/grid/_layout.scss | 2 +- packages/bootstrap/scss/grid/_theme.scss | 2 +- packages/bootstrap/scss/grid/_variables.scss | 2 +- .../bootstrap/scss/gridlayout/_layout.scss | 2 +- .../bootstrap/scss/gridlayout/_theme.scss | 2 +- packages/bootstrap/scss/icons/_layout.scss | 2 +- packages/bootstrap/scss/icons/_theme.scss | 2 +- packages/bootstrap/scss/icons/_variables.scss | 2 +- .../bootstrap/scss/imageeditor/_layout.scss | 2 +- .../bootstrap/scss/imageeditor/_theme.scss | 2 +- .../scss/imageeditor/_variables.scss | 2 +- packages/bootstrap/scss/input/_layout.scss | 2 +- packages/bootstrap/scss/input/_theme.scss | 2 +- packages/bootstrap/scss/input/_variables.scss | 2 +- packages/bootstrap/scss/list/_layout.scss | 2 +- packages/bootstrap/scss/list/_theme.scss | 2 +- packages/bootstrap/scss/list/_variables.scss | 2 +- packages/bootstrap/scss/listbox/_layout.scss | 2 +- packages/bootstrap/scss/listbox/_theme.scss | 2 +- .../bootstrap/scss/listbox/_variables.scss | 2 +- .../bootstrap/scss/listgroup/_layout.scss | 2 +- packages/bootstrap/scss/listgroup/_theme.scss | 2 +- .../bootstrap/scss/listgroup/_variables.scss | 2 +- packages/bootstrap/scss/listview/_layout.scss | 2 +- packages/bootstrap/scss/listview/_theme.scss | 2 +- .../bootstrap/scss/listview/_variables.scss | 2 +- packages/bootstrap/scss/loader/_layout.scss | 2 +- packages/bootstrap/scss/loader/_theme.scss | 2 +- .../bootstrap/scss/loader/_variables.scss | 2 +- packages/bootstrap/scss/map/_layout.scss | 2 +- packages/bootstrap/scss/map/_theme.scss | 2 +- packages/bootstrap/scss/map/_variables.scss | 2 +- .../bootstrap/scss/maskedtextbox/_layout.scss | 2 +- .../bootstrap/scss/maskedtextbox/_theme.scss | 2 +- .../bootstrap/scss/mediaplayer/_layout.scss | 2 +- .../bootstrap/scss/mediaplayer/_theme.scss | 2 +- .../scss/mediaplayer/_variables.scss | 2 +- .../bootstrap/scss/menu-button/_layout.scss | 2 +- .../bootstrap/scss/menu-button/_theme.scss | 2 +- .../scss/menu-button/_variables.scss | 2 +- packages/bootstrap/scss/menu/_layout.scss | 2 +- packages/bootstrap/scss/menu/_theme.scss | 2 +- packages/bootstrap/scss/menu/_variables.scss | 2 +- .../bootstrap/scss/messagebox/_layout.scss | 2 +- .../bootstrap/scss/messagebox/_theme.scss | 2 +- .../bootstrap/scss/messagebox/_variables.scss | 2 +- .../bootstrap/scss/multiselect/_layout.scss | 2 +- .../bootstrap/scss/multiselect/_theme.scss | 2 +- packages/bootstrap/scss/no-data/_layout.scss | 2 +- packages/bootstrap/scss/no-data/_theme.scss | 2 +- .../bootstrap/scss/no-data/_variables.scss | 2 +- .../bootstrap/scss/notification/_layout.scss | 2 +- .../bootstrap/scss/notification/_theme.scss | 2 +- .../scss/notification/_variables.scss | 2 +- .../scss/numerictextbox/_layout.scss | 2 +- .../bootstrap/scss/numerictextbox/_theme.scss | 2 +- packages/bootstrap/scss/orgchart/_layout.scss | 2 +- packages/bootstrap/scss/orgchart/_theme.scss | 2 +- .../bootstrap/scss/orgchart/_variables.scss | 2 +- packages/bootstrap/scss/otp/_layout.scss | 2 +- packages/bootstrap/scss/otp/_theme.scss | 2 +- packages/bootstrap/scss/otp/_variables.scss | 2 +- packages/bootstrap/scss/overlay/_layout.scss | 2 +- packages/bootstrap/scss/overlay/_theme.scss | 2 +- .../bootstrap/scss/overlay/_variables.scss | 2 +- packages/bootstrap/scss/pager/_layout.scss | 2 +- packages/bootstrap/scss/pager/_theme.scss | 2 +- packages/bootstrap/scss/pager/_variables.scss | 2 +- packages/bootstrap/scss/panel/_layout.scss | 2 +- packages/bootstrap/scss/panel/_theme.scss | 2 +- packages/bootstrap/scss/panel/_variables.scss | 2 +- packages/bootstrap/scss/panelbar/_layout.scss | 2 +- packages/bootstrap/scss/panelbar/_theme.scss | 2 +- .../bootstrap/scss/panelbar/_variables.scss | 2 +- .../bootstrap/scss/pdf-viewer/_layout.scss | 2 +- .../bootstrap/scss/pdf-viewer/_theme.scss | 2 +- .../bootstrap/scss/pdf-viewer/_variables.scss | 2 +- .../bootstrap/scss/pivotgrid/_layout.scss | 2 +- packages/bootstrap/scss/pivotgrid/_theme.scss | 2 +- .../bootstrap/scss/pivotgrid/_variables.scss | 2 +- packages/bootstrap/scss/popover/_layout.scss | 2 +- packages/bootstrap/scss/popover/_theme.scss | 2 +- .../bootstrap/scss/popover/_variables.scss | 2 +- packages/bootstrap/scss/popup/_layout.scss | 2 +- packages/bootstrap/scss/popup/_theme.scss | 2 +- packages/bootstrap/scss/popup/_variables.scss | 2 +- .../bootstrap/scss/progressbar/_layout.scss | 2 +- .../bootstrap/scss/progressbar/_theme.scss | 2 +- .../scss/progressbar/_variables.scss | 2 +- packages/bootstrap/scss/prompt/_layout.scss | 2 +- packages/bootstrap/scss/prompt/_theme.scss | 2 +- .../bootstrap/scss/prompt/_variables.scss | 2 +- packages/bootstrap/scss/radio/_layout.scss | 2 +- packages/bootstrap/scss/radio/_theme.scss | 2 +- packages/bootstrap/scss/radio/_variables.scss | 2 +- packages/bootstrap/scss/rating/_layout.scss | 2 +- packages/bootstrap/scss/rating/_theme.scss | 2 +- .../bootstrap/scss/rating/_variables.scss | 2 +- .../scss/responsivepanel/_layout.scss | 2 +- .../scss/responsivepanel/_theme.scss | 2 +- packages/bootstrap/scss/ripple/_layout.scss | 2 +- packages/bootstrap/scss/ripple/_theme.scss | 2 +- .../bootstrap/scss/scheduler/_layout.scss | 2 +- packages/bootstrap/scss/scheduler/_theme.scss | 2 +- .../bootstrap/scss/scheduler/_variables.scss | 2 +- packages/bootstrap/scss/scroller/_layout.scss | 2 +- packages/bootstrap/scss/scroller/_theme.scss | 2 +- .../bootstrap/scss/scrollview/_layout.scss | 2 +- .../bootstrap/scss/scrollview/_theme.scss | 2 +- .../bootstrap/scss/scrollview/_variables.scss | 2 +- .../bootstrap/scss/searchbox/_layout.scss | 2 +- packages/bootstrap/scss/searchbox/_theme.scss | 2 +- .../bootstrap/scss/signature/_layout.scss | 2 +- packages/bootstrap/scss/signature/_theme.scss | 2 +- .../bootstrap/scss/signature/_variables.scss | 2 +- packages/bootstrap/scss/skeleton/_layout.scss | 2 +- packages/bootstrap/scss/skeleton/_theme.scss | 2 +- .../bootstrap/scss/skeleton/_variables.scss | 2 +- packages/bootstrap/scss/slider/_layout.scss | 2 +- packages/bootstrap/scss/slider/_theme.scss | 2 +- .../bootstrap/scss/slider/_variables.scss | 2 +- .../bootstrap/scss/split-button/_layout.scss | 2 +- .../bootstrap/scss/split-button/_theme.scss | 2 +- .../scss/split-button/_variables.scss | 2 +- packages/bootstrap/scss/splitter/_layout.scss | 2 +- packages/bootstrap/scss/splitter/_theme.scss | 2 +- .../bootstrap/scss/splitter/_variables.scss | 2 +- .../bootstrap/scss/spreadsheet/_layout.scss | 2 +- .../bootstrap/scss/spreadsheet/_theme.scss | 2 +- .../scss/spreadsheet/_variables.scss | 2 +- .../bootstrap/scss/stacklayout/_layout.scss | 2 +- .../bootstrap/scss/stacklayout/_theme.scss | 2 +- packages/bootstrap/scss/stepper/_layout.scss | 2 +- packages/bootstrap/scss/stepper/_theme.scss | 2 +- .../bootstrap/scss/stepper/_variables.scss | 2 +- packages/bootstrap/scss/switch/_layout.scss | 2 +- packages/bootstrap/scss/switch/_theme.scss | 2 +- .../bootstrap/scss/switch/_variables.scss | 2 +- packages/bootstrap/scss/table/_layout.scss | 2 +- packages/bootstrap/scss/table/_theme.scss | 2 +- packages/bootstrap/scss/table/_variables.scss | 2 +- packages/bootstrap/scss/tabstrip/_layout.scss | 2 +- packages/bootstrap/scss/tabstrip/_theme.scss | 2 +- .../bootstrap/scss/tabstrip/_variables.scss | 5 ++-- .../bootstrap/scss/taskboard/_layout.scss | 2 +- packages/bootstrap/scss/taskboard/_theme.scss | 2 +- .../bootstrap/scss/taskboard/_variables.scss | 2 +- packages/bootstrap/scss/textarea/_layout.scss | 2 +- packages/bootstrap/scss/textarea/_theme.scss | 2 +- packages/bootstrap/scss/textbox/_layout.scss | 2 +- packages/bootstrap/scss/textbox/_theme.scss | 2 +- .../bootstrap/scss/tilelayout/_layout.scss | 2 +- .../bootstrap/scss/tilelayout/_theme.scss | 2 +- .../bootstrap/scss/tilelayout/_variables.scss | 2 +- .../bootstrap/scss/time-marker/_layout.scss | 2 +- .../bootstrap/scss/time-marker/_theme.scss | 2 +- .../scss/time-marker/_variables.scss | 2 +- .../scss/timedurationpicker/_layout.scss | 2 +- .../scss/timedurationpicker/_theme.scss | 2 +- packages/bootstrap/scss/timeline/_layout.scss | 2 +- packages/bootstrap/scss/timeline/_theme.scss | 2 +- .../bootstrap/scss/timeline/_variables.scss | 2 +- .../bootstrap/scss/timepicker/_layout.scss | 2 +- .../bootstrap/scss/timepicker/_theme.scss | 2 +- .../bootstrap/scss/timeselector/_layout.scss | 2 +- .../bootstrap/scss/timeselector/_theme.scss | 2 +- .../scss/timeselector/_variables.scss | 2 +- packages/bootstrap/scss/toolbar/_layout.scss | 2 +- packages/bootstrap/scss/toolbar/_theme.scss | 2 +- .../bootstrap/scss/toolbar/_variables.scss | 23 ++++++++++++++++++- packages/bootstrap/scss/tooltip/_layout.scss | 2 +- packages/bootstrap/scss/tooltip/_theme.scss | 2 +- .../bootstrap/scss/tooltip/_variables.scss | 2 +- packages/bootstrap/scss/treelist/_layout.scss | 2 +- packages/bootstrap/scss/treelist/_theme.scss | 2 +- .../bootstrap/scss/treelist/_variables.scss | 2 +- packages/bootstrap/scss/treeview/_layout.scss | 2 +- packages/bootstrap/scss/treeview/_theme.scss | 2 +- .../bootstrap/scss/treeview/_variables.scss | 2 +- .../bootstrap/scss/typography/_layout.scss | 2 +- .../bootstrap/scss/typography/_theme.scss | 2 +- .../bootstrap/scss/typography/_variables.scss | 2 +- packages/bootstrap/scss/upload/_layout.scss | 2 +- packages/bootstrap/scss/upload/_theme.scss | 2 +- .../bootstrap/scss/upload/_variables.scss | 2 +- .../bootstrap/scss/validator/_layout.scss | 2 +- packages/bootstrap/scss/validator/_theme.scss | 2 +- .../scss/virtual-scroller/_layout.scss | 2 +- .../scss/virtual-scroller/_theme.scss | 2 +- packages/bootstrap/scss/window/_layout.scss | 2 +- packages/bootstrap/scss/window/_theme.scss | 2 +- .../bootstrap/scss/window/_variables.scss | 2 +- packages/bootstrap/scss/wizard/_layout.scss | 2 +- packages/bootstrap/scss/wizard/_theme.scss | 2 +- .../bootstrap/scss/wizard/_variables.scss | 2 +- 323 files changed, 352 insertions(+), 333 deletions(-) diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index 44094816969..4a4ca26ef2c 100644 --- a/packages/bootstrap/scss/_variables.scss +++ b/packages/bootstrap/scss/_variables.scss @@ -1,12 +1,4 @@ -$kendo-enable-typography: false !default; - -$kendo-use-input-button-width: false !default; -$kendo-use-input-spinner-width: false !default; -$kendo-use-input-spinner-icon-offset: false !default; - $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; $kendo-focus-shadow: null !default; - -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; diff --git a/packages/bootstrap/scss/action-buttons/_layout.scss b/packages/bootstrap/scss/action-buttons/_layout.scss index 5a4a7e90474..594c7fb41f4 100644 --- a/packages/bootstrap/scss/action-buttons/_layout.scss +++ b/packages/bootstrap/scss/action-buttons/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-buttons/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-buttons/_layout.scss" as *; @mixin kendo-action-buttons--layout() { @include kendo-action-buttons--layout-base(); diff --git a/packages/bootstrap/scss/action-buttons/_theme.scss b/packages/bootstrap/scss/action-buttons/_theme.scss index 9aa63724c8a..8d84dc1f72a 100644 --- a/packages/bootstrap/scss/action-buttons/_theme.scss +++ b/packages/bootstrap/scss/action-buttons/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-buttons/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-buttons/_theme.scss" as *; @mixin kendo-action-buttons--theme() { diff --git a/packages/bootstrap/scss/action-buttons/_variables.scss b/packages/bootstrap/scss/action-buttons/_variables.scss index 1d60b518fef..d46f7e3bc42 100644 --- a/packages/bootstrap/scss/action-buttons/_variables.scss +++ b/packages/bootstrap/scss/action-buttons/_variables.scss @@ -13,7 +13,7 @@ $kendo-actions-border: null !default; $kendo-actions-gradient: null !default; -@forward "@progress/kendo-theme-default/scss/action-buttons/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/action-buttons/_variables.scss" with ( $kendo-actions-margin-top: $kendo-actions-margin-top, $kendo-actions-padding-x: $kendo-actions-padding-x, $kendo-actions-padding-y: $kendo-actions-padding-y, diff --git a/packages/bootstrap/scss/action-sheet/_layout.scss b/packages/bootstrap/scss/action-sheet/_layout.scss index dc4b16cd261..954a36f134e 100644 --- a/packages/bootstrap/scss/action-sheet/_layout.scss +++ b/packages/bootstrap/scss/action-sheet/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-sheet/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-sheet/_layout.scss" as *; @mixin kendo-action-sheet--layout() { diff --git a/packages/bootstrap/scss/action-sheet/_theme.scss b/packages/bootstrap/scss/action-sheet/_theme.scss index f9176b04dbd..e8d2b47d172 100644 --- a/packages/bootstrap/scss/action-sheet/_theme.scss +++ b/packages/bootstrap/scss/action-sheet/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-sheet/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-sheet/_theme.scss" as *; @mixin kendo-action-sheet--theme() { diff --git a/packages/bootstrap/scss/action-sheet/_variables.scss b/packages/bootstrap/scss/action-sheet/_variables.scss index 8824e819a62..a2c22ab4d92 100644 --- a/packages/bootstrap/scss/action-sheet/_variables.scss +++ b/packages/bootstrap/scss/action-sheet/_variables.scss @@ -87,7 +87,7 @@ $kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default; $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default; -@forward "@progress/kendo-theme-default/scss/action-sheet/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/action-sheet/_variables.scss" with ( $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x, $kendo-actionsheet-padding-y: $kendo-actionsheet-padding-y, $kendo-actionsheet-width: $kendo-actionsheet-width, diff --git a/packages/bootstrap/scss/adaptive/_layout.scss b/packages/bootstrap/scss/adaptive/_layout.scss index 18110d73c24..1fcc635d639 100644 --- a/packages/bootstrap/scss/adaptive/_layout.scss +++ b/packages/bootstrap/scss/adaptive/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/adaptive/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/adaptive/_layout.scss" as *; @mixin kendo-adaptive--layout() { diff --git a/packages/bootstrap/scss/adaptive/_theme.scss b/packages/bootstrap/scss/adaptive/_theme.scss index 9627e79f9f8..67ce73312da 100644 --- a/packages/bootstrap/scss/adaptive/_theme.scss +++ b/packages/bootstrap/scss/adaptive/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/adaptive/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/adaptive/_theme.scss" as *; @mixin kendo-adaptive--theme() { diff --git a/packages/bootstrap/scss/adaptive/_variables.scss b/packages/bootstrap/scss/adaptive/_variables.scss index c7e1fc96a59..5a04ddbcdb2 100644 --- a/packages/bootstrap/scss/adaptive/_variables.scss +++ b/packages/bootstrap/scss/adaptive/_variables.scss @@ -30,7 +30,7 @@ $kendo-adaptive-scheduler-base-text: inherit !default; $kendo-adaptive-scheduler-subtle-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default; -@forward "@progress/kendo-theme-default/scss/adaptive/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with ( $kendo-adaptive-bg: $kendo-adaptive-bg, $kendo-adaptive-text: $kendo-adaptive-text, $kendo-adaptive-border: $kendo-adaptive-border, diff --git a/packages/bootstrap/scss/appbar/_layout.scss b/packages/bootstrap/scss/appbar/_layout.scss index 165eb6ee06e..2c63afa1dd4 100644 --- a/packages/bootstrap/scss/appbar/_layout.scss +++ b/packages/bootstrap/scss/appbar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/appbar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/appbar/_layout.scss" as *; @mixin kendo-appbar--layout() { diff --git a/packages/bootstrap/scss/appbar/_theme.scss b/packages/bootstrap/scss/appbar/_theme.scss index 52e605eb86b..88327180bed 100644 --- a/packages/bootstrap/scss/appbar/_theme.scss +++ b/packages/bootstrap/scss/appbar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/appbar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/appbar/_theme.scss" as *; @mixin kendo-appbar--theme() { diff --git a/packages/bootstrap/scss/appbar/_variables.scss b/packages/bootstrap/scss/appbar/_variables.scss index 178df64e9ef..d8414fefd19 100644 --- a/packages/bootstrap/scss/appbar/_variables.scss +++ b/packages/bootstrap/scss/appbar/_variables.scss @@ -57,7 +57,7 @@ $kendo-appbar-box-shadow: k-elevation(4) !default; $kendo-appbar-bottom-box-shadow: k-elevation(4) !default; -@forward "@progress/kendo-theme-default/scss/appbar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with ( $kendo-appbar-margin-x: $kendo-appbar-margin-x, $kendo-appbar-margin-y: $kendo-appbar-margin-y, $kendo-appbar-padding-x: $kendo-appbar-padding-x, diff --git a/packages/bootstrap/scss/autocomplete/_layout.scss b/packages/bootstrap/scss/autocomplete/_layout.scss index 17bbe156d7f..abe4d723e1d 100644 --- a/packages/bootstrap/scss/autocomplete/_layout.scss +++ b/packages/bootstrap/scss/autocomplete/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/autocomplete/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/autocomplete/_layout.scss" as *; @mixin kendo-autocomplete--layout() { diff --git a/packages/bootstrap/scss/autocomplete/_theme.scss b/packages/bootstrap/scss/autocomplete/_theme.scss index 09089392cca..308a4c551eb 100644 --- a/packages/bootstrap/scss/autocomplete/_theme.scss +++ b/packages/bootstrap/scss/autocomplete/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/autocomplete/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/autocomplete/_theme.scss" as *; @mixin kendo-autocomplete--theme() { diff --git a/packages/bootstrap/scss/avatar/_layout.scss b/packages/bootstrap/scss/avatar/_layout.scss index 36396213312..fadb2ebfa9b 100644 --- a/packages/bootstrap/scss/avatar/_layout.scss +++ b/packages/bootstrap/scss/avatar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/avatar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/avatar/_layout.scss" as *; @mixin kendo-avatar--layout() { diff --git a/packages/bootstrap/scss/avatar/_theme.scss b/packages/bootstrap/scss/avatar/_theme.scss index 7e8147f59e9..cd6ba6cc871 100644 --- a/packages/bootstrap/scss/avatar/_theme.scss +++ b/packages/bootstrap/scss/avatar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/avatar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/avatar/_theme.scss" as *; @mixin kendo-avatar--theme() { @include kendo-avatar--theme-base(); diff --git a/packages/bootstrap/scss/avatar/_variables.scss b/packages/bootstrap/scss/avatar/_variables.scss index f21cc86296d..72db9b1c72a 100644 --- a/packages/bootstrap/scss/avatar/_variables.scss +++ b/packages/bootstrap/scss/avatar/_variables.scss @@ -30,7 +30,7 @@ $kendo-avatar-sizes: ( $kendo-avatar-theme-colors: $kendo-theme-colors !default; -@forward "@progress/kendo-theme-default/scss/avatar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with ( $kendo-avatar-border-width: $kendo-avatar-border-width, $kendo-avatar-font-family: $kendo-avatar-font-family, $kendo-avatar-font-size: $kendo-avatar-font-size, diff --git a/packages/bootstrap/scss/badge/_layout.scss b/packages/bootstrap/scss/badge/_layout.scss index f6d2e4c727c..995495f5afc 100644 --- a/packages/bootstrap/scss/badge/_layout.scss +++ b/packages/bootstrap/scss/badge/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/badge/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *; @mixin kendo-badge--layout() { diff --git a/packages/bootstrap/scss/badge/_theme.scss b/packages/bootstrap/scss/badge/_theme.scss index d61e955cf7b..005813cdc52 100644 --- a/packages/bootstrap/scss/badge/_theme.scss +++ b/packages/bootstrap/scss/badge/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/badge/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/badge/_theme.scss" as *; @mixin kendo-badge--theme() { diff --git a/packages/bootstrap/scss/badge/_variables.scss b/packages/bootstrap/scss/badge/_variables.scss index 3e0139316f0..3bb018f630b 100644 --- a/packages/bootstrap/scss/badge/_variables.scss +++ b/packages/bootstrap/scss/badge/_variables.scss @@ -103,7 +103,7 @@ $kendo-badge-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/badge/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with ( $kendo-badge-border-width: $kendo-badge-border-width, $kendo-badge-border-radius: $kendo-badge-border-radius, $kendo-badge-padding-x: $kendo-badge-padding-x, diff --git a/packages/bootstrap/scss/bottom-navigation/_layout.scss b/packages/bootstrap/scss/bottom-navigation/_layout.scss index a5b50f1d6ca..e1d6f5dab6e 100644 --- a/packages/bootstrap/scss/bottom-navigation/_layout.scss +++ b/packages/bootstrap/scss/bottom-navigation/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/bottom-navigation/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *; @mixin kendo-bottom-navigation--layout() { diff --git a/packages/bootstrap/scss/bottom-navigation/_theme.scss b/packages/bootstrap/scss/bottom-navigation/_theme.scss index a3c2dff7138..8bb64726b24 100644 --- a/packages/bootstrap/scss/bottom-navigation/_theme.scss +++ b/packages/bootstrap/scss/bottom-navigation/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/bottom-navigation/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *; @mixin kendo-bottom-navigation--theme() { diff --git a/packages/bootstrap/scss/bottom-navigation/_variables.scss b/packages/bootstrap/scss/bottom-navigation/_variables.scss index a00ae277e9f..eca61a46ff0 100644 --- a/packages/bootstrap/scss/bottom-navigation/_variables.scss +++ b/packages/bootstrap/scss/bottom-navigation/_variables.scss @@ -65,7 +65,7 @@ $kendo-bottom-nav-flat-bg: $kendo-component-bg !default; $kendo-bottom-nav-flat-border: $kendo-component-border !default; -@forward "@progress/kendo-theme-default/scss/bottom-navigation/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with ( $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x, $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y, $kendo-bottom-nav-gap: $kendo-bottom-nav-gap, diff --git a/packages/bootstrap/scss/breadcrumb/_layout.scss b/packages/bootstrap/scss/breadcrumb/_layout.scss index 5c4093dd9ea..770872a5f43 100644 --- a/packages/bootstrap/scss/breadcrumb/_layout.scss +++ b/packages/bootstrap/scss/breadcrumb/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/breadcrumb/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_layout.scss" as *; @mixin kendo-breadcrumb--layout() { diff --git a/packages/bootstrap/scss/breadcrumb/_theme.scss b/packages/bootstrap/scss/breadcrumb/_theme.scss index f11e25e8b43..5b0a91c64b0 100644 --- a/packages/bootstrap/scss/breadcrumb/_theme.scss +++ b/packages/bootstrap/scss/breadcrumb/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/breadcrumb/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_theme.scss" as *; @mixin kendo-breadcrumb--theme() { diff --git a/packages/bootstrap/scss/breadcrumb/_variables.scss b/packages/bootstrap/scss/breadcrumb/_variables.scss index 0f0c40ed0da..99fab56e15a 100644 --- a/packages/bootstrap/scss/breadcrumb/_variables.scss +++ b/packages/bootstrap/scss/breadcrumb/_variables.scss @@ -236,7 +236,7 @@ $kendo-breadcrumb-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/breadcrumb/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/breadcrumb/_variables.scss" with ( $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width, $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x, $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y, diff --git a/packages/bootstrap/scss/button/_layout.scss b/packages/bootstrap/scss/button/_layout.scss index 2b3deaf65b0..5dab0629e12 100644 --- a/packages/bootstrap/scss/button/_layout.scss +++ b/packages/bootstrap/scss/button/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/button/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *; @mixin kendo-button--layout() { diff --git a/packages/bootstrap/scss/button/_theme.scss b/packages/bootstrap/scss/button/_theme.scss index 0693b27f4f0..16889ddaffc 100644 --- a/packages/bootstrap/scss/button/_theme.scss +++ b/packages/bootstrap/scss/button/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/button/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/button/_theme.scss" as *; @mixin kendo-button--theme() { diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss index 2ad196dd00e..61c79f941e9 100644 --- a/packages/bootstrap/scss/button/_variables.scss +++ b/packages/bootstrap/scss/button/_variables.scss @@ -262,7 +262,7 @@ $kendo-flat-button-focus-ring-opacity: .12 !default; $kendo-button-transition: $kendo-transition !default; -@forward "@progress/kendo-theme-default/scss/button/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with ( $kendo-button-border-width: $kendo-button-border-width, $kendo-button-border-radius: $kendo-button-border-radius, $kendo-button-padding-x: $kendo-button-padding-x, diff --git a/packages/bootstrap/scss/calendar/_layout.scss b/packages/bootstrap/scss/calendar/_layout.scss index 94989591e7c..bafcb8ea44e 100644 --- a/packages/bootstrap/scss/calendar/_layout.scss +++ b/packages/bootstrap/scss/calendar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/calendar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *; @mixin kendo-calendar--layout() { diff --git a/packages/bootstrap/scss/calendar/_theme.scss b/packages/bootstrap/scss/calendar/_theme.scss index 5efc8531de7..0e3f629197e 100644 --- a/packages/bootstrap/scss/calendar/_theme.scss +++ b/packages/bootstrap/scss/calendar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/calendar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/calendar/_theme.scss" as *; @mixin kendo-calendar--theme() { diff --git a/packages/bootstrap/scss/calendar/_variables.scss b/packages/bootstrap/scss/calendar/_variables.scss index 7ac968477a1..c0a17ec818d 100644 --- a/packages/bootstrap/scss/calendar/_variables.scss +++ b/packages/bootstrap/scss/calendar/_variables.scss @@ -354,7 +354,7 @@ $kendo-calendar-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/calendar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/calendar/_variables.scss" with ( $kendo-calendar-border-width: $kendo-calendar-border-width, $kendo-calendar-font-family: $kendo-calendar-font-family, $kendo-calendar-font-size: $kendo-calendar-font-size, diff --git a/packages/bootstrap/scss/captcha/_layout.scss b/packages/bootstrap/scss/captcha/_layout.scss index 1fb81b674eb..9abeda7afe0 100644 --- a/packages/bootstrap/scss/captcha/_layout.scss +++ b/packages/bootstrap/scss/captcha/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/captcha/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/captcha/_layout.scss" as *; @mixin kendo-captcha--layout() { diff --git a/packages/bootstrap/scss/captcha/_theme.scss b/packages/bootstrap/scss/captcha/_theme.scss index 15a2f7e8e47..a0a20e09ba2 100644 --- a/packages/bootstrap/scss/captcha/_theme.scss +++ b/packages/bootstrap/scss/captcha/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/captcha/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/captcha/_theme.scss" as *; @mixin kendo-captcha--theme() { diff --git a/packages/bootstrap/scss/captcha/_variables.scss b/packages/bootstrap/scss/captcha/_variables.scss index a5259fe2f21..8a9c154a31f 100644 --- a/packages/bootstrap/scss/captcha/_variables.scss +++ b/packages/bootstrap/scss/captcha/_variables.scss @@ -49,7 +49,7 @@ $kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit $kendo-captcha-validation-message-font-style: italic !default; -@forward "@progress/kendo-theme-default/scss/captcha/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/captcha/_variables.scss" with ( $kendo-captcha-spacer: $kendo-captcha-spacer, $kendo-captcha-width: $kendo-captcha-width, $kendo-captcha-font-family: $kendo-captcha-font-family, diff --git a/packages/bootstrap/scss/card/_layout.scss b/packages/bootstrap/scss/card/_layout.scss index 1c10ee935b3..9223804361e 100644 --- a/packages/bootstrap/scss/card/_layout.scss +++ b/packages/bootstrap/scss/card/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/card/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/card/_layout.scss" as *; @mixin kendo-card--layout() { diff --git a/packages/bootstrap/scss/card/_theme.scss b/packages/bootstrap/scss/card/_theme.scss index d8895742410..55449bc8eda 100644 --- a/packages/bootstrap/scss/card/_theme.scss +++ b/packages/bootstrap/scss/card/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/card/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *; @mixin kendo-card--theme() { diff --git a/packages/bootstrap/scss/card/_variables.scss b/packages/bootstrap/scss/card/_variables.scss index fd57a2c18a1..bc575e2bc7c 100644 --- a/packages/bootstrap/scss/card/_variables.scss +++ b/packages/bootstrap/scss/card/_variables.scss @@ -187,7 +187,7 @@ $kendo-card-callout-width: 1.3em !default; $kendo-card-callout-height: 1.3em !default; -@forward "@progress/kendo-theme-default/scss/card/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with ( $kendo-card-padding-x: $kendo-card-padding-x, $kendo-card-padding-y: $kendo-card-padding-y, $kendo-card-border-width: $kendo-card-border-width, diff --git a/packages/bootstrap/scss/chart-wizard/_layout.scss b/packages/bootstrap/scss/chart-wizard/_layout.scss index a4a684c54fe..b5e8c2b2359 100644 --- a/packages/bootstrap/scss/chart-wizard/_layout.scss +++ b/packages/bootstrap/scss/chart-wizard/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_layout.scss" as *; @mixin kendo-chart-wizard--layout() { @include kendo-chart-wizard--layout-base(); diff --git a/packages/bootstrap/scss/chart-wizard/_theme.scss b/packages/bootstrap/scss/chart-wizard/_theme.scss index 7a01fbed74c..9ee84a9f7b7 100644 --- a/packages/bootstrap/scss/chart-wizard/_theme.scss +++ b/packages/bootstrap/scss/chart-wizard/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_theme.scss" as *; @mixin kendo-chart-wizard--theme() { @include kendo-chart-wizard--theme-base(); diff --git a/packages/bootstrap/scss/chart-wizard/_variables.scss b/packages/bootstrap/scss/chart-wizard/_variables.scss index 0ac0c3e64be..d74abb18c6a 100644 --- a/packages/bootstrap/scss/chart-wizard/_variables.scss +++ b/packages/bootstrap/scss/chart-wizard/_variables.scss @@ -41,7 +41,7 @@ $kendo-chart-wizard-chart-type-spacing: k-spacing(6) !default; $kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; -@forward "@progress/kendo-theme-default/scss/chart-wizard/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chart-wizard/_variables.scss" with ( $kendo-chart-wizard-icon-area-color: $kendo-chart-wizard-icon-area-color, $kendo-chart-wizard-icon-area-bg: $kendo-chart-wizard-icon-area-bg, $kendo-chart-wizard-icon-area-border-radius: $kendo-chart-wizard-icon-area-border-radius, diff --git a/packages/bootstrap/scss/chat/_layout.scss b/packages/bootstrap/scss/chat/_layout.scss index 77b342ef5cd..f24f5505fb4 100644 --- a/packages/bootstrap/scss/chat/_layout.scss +++ b/packages/bootstrap/scss/chat/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chat/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chat/_layout.scss" as *; @mixin kendo-chat--layout() { diff --git a/packages/bootstrap/scss/chat/_theme.scss b/packages/bootstrap/scss/chat/_theme.scss index 8f39cf4b622..3f254386ee9 100644 --- a/packages/bootstrap/scss/chat/_theme.scss +++ b/packages/bootstrap/scss/chat/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chat/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chat/_theme.scss" as *; @mixin kendo-chat--theme() { diff --git a/packages/bootstrap/scss/chat/_variables.scss b/packages/bootstrap/scss/chat/_variables.scss index e086f8226c4..e42a1bd8a2d 100644 --- a/packages/bootstrap/scss/chat/_variables.scss +++ b/packages/bootstrap/scss/chat/_variables.scss @@ -216,7 +216,7 @@ $kendo-chat-quick-reply-shadow-spread: .25rem !default; $kendo-chat-quick-reply-shadow-opacity: .5 !default; -@forward "@progress/kendo-theme-default/scss/chat/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with ( $kendo-chat-padding-x: $kendo-chat-padding-x, $kendo-chat-padding-y: $kendo-chat-padding-y, $kendo-chat-width: $kendo-chat-width, diff --git a/packages/bootstrap/scss/checkbox/_layout.scss b/packages/bootstrap/scss/checkbox/_layout.scss index 63e55d6aa9c..b8601df5675 100644 --- a/packages/bootstrap/scss/checkbox/_layout.scss +++ b/packages/bootstrap/scss/checkbox/_layout.scss @@ -1,5 +1,5 @@ @use "../core/_index.scss" as *; -@use "@progress/kendo-theme-default/scss/checkbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *; @mixin kendo-checkbox--layout() { diff --git a/packages/bootstrap/scss/checkbox/_theme.scss b/packages/bootstrap/scss/checkbox/_theme.scss index 8110113887a..202d8e6dc62 100644 --- a/packages/bootstrap/scss/checkbox/_theme.scss +++ b/packages/bootstrap/scss/checkbox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/checkbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *; @mixin kendo-checkbox--theme() { diff --git a/packages/bootstrap/scss/checkbox/_variables.scss b/packages/bootstrap/scss/checkbox/_variables.scss index 7cae49945ad..2624077a87c 100644 --- a/packages/bootstrap/scss/checkbox/_variables.scss +++ b/packages/bootstrap/scss/checkbox/_variables.scss @@ -195,7 +195,7 @@ $kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default; $kendo-checkbox-ripple-opacity: .25 !default; -@forward "@progress/kendo-theme-default/scss/checkbox/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/checkbox/_variables.scss" with ( $kendo-checkbox-border-width: $kendo-checkbox-border-width, $kendo-checkbox-sm-size: $kendo-checkbox-sm-size, $kendo-checkbox-md-size: $kendo-checkbox-md-size, diff --git a/packages/bootstrap/scss/chip/_layout.scss b/packages/bootstrap/scss/chip/_layout.scss index 9fc23d87468..192a18861c7 100644 --- a/packages/bootstrap/scss/chip/_layout.scss +++ b/packages/bootstrap/scss/chip/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chip/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *; @mixin kendo-chip--layout() { diff --git a/packages/bootstrap/scss/chip/_theme.scss b/packages/bootstrap/scss/chip/_theme.scss index 2c975122ecb..fabac7e0662 100644 --- a/packages/bootstrap/scss/chip/_theme.scss +++ b/packages/bootstrap/scss/chip/_theme.scss @@ -1,6 +1,6 @@ @use "../core/_index.scss" as *; @use "./_variables.scss" as *; -@use "@progress/kendo-theme-default/scss/chip/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *; @mixin kendo-chip--theme() { diff --git a/packages/bootstrap/scss/chip/_variables.scss b/packages/bootstrap/scss/chip/_variables.scss index 73c84b62d69..6878e832326 100644 --- a/packages/bootstrap/scss/chip/_variables.scss +++ b/packages/bootstrap/scss/chip/_variables.scss @@ -182,7 +182,7 @@ $kendo-chip-list-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/chip/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with ( $kendo-chip-border-width: $kendo-chip-border-width, $kendo-chip-spacing: $kendo-chip-spacing, $kendo-chip-padding-x: $kendo-chip-padding-x, diff --git a/packages/bootstrap/scss/color-preview/_layout.scss b/packages/bootstrap/scss/color-preview/_layout.scss index 832d1e19a0c..64faf8bbef5 100644 --- a/packages/bootstrap/scss/color-preview/_layout.scss +++ b/packages/bootstrap/scss/color-preview/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/color-preview/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/color-preview/_layout.scss" as *; @mixin kendo-color-preview--layout() { diff --git a/packages/bootstrap/scss/color-preview/_theme.scss b/packages/bootstrap/scss/color-preview/_theme.scss index 6f047067c1e..f91de46dd03 100644 --- a/packages/bootstrap/scss/color-preview/_theme.scss +++ b/packages/bootstrap/scss/color-preview/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/color-preview/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/color-preview/_theme.scss" as *; @mixin kendo-color-preview--theme() { diff --git a/packages/bootstrap/scss/color-preview/_variables.scss b/packages/bootstrap/scss/color-preview/_variables.scss index 39a61d1e707..8dd6fef3b2d 100644 --- a/packages/bootstrap/scss/color-preview/_variables.scss +++ b/packages/bootstrap/scss/color-preview/_variables.scss @@ -17,7 +17,7 @@ $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml, Date: Wed, 8 Jan 2025 17:09:19 +0200 Subject: [PATCH 04/10] chore(classic): use component styles from core --- packages/classic/scss/_variables.scss | 8 +------ .../classic/scss/action-buttons/_layout.scss | 2 +- .../classic/scss/action-buttons/_theme.scss | 2 +- .../scss/action-buttons/_variables.scss | 2 +- .../classic/scss/action-sheet/_layout.scss | 2 +- .../classic/scss/action-sheet/_theme.scss | 2 +- .../classic/scss/action-sheet/_variables.scss | 2 +- packages/classic/scss/adaptive/_layout.scss | 2 +- packages/classic/scss/adaptive/_theme.scss | 2 +- .../classic/scss/adaptive/_variables.scss | 2 +- packages/classic/scss/appbar/_layout.scss | 2 +- packages/classic/scss/appbar/_theme.scss | 2 +- packages/classic/scss/appbar/_variables.scss | 2 +- .../classic/scss/autocomplete/_layout.scss | 2 +- .../classic/scss/autocomplete/_theme.scss | 2 +- packages/classic/scss/avatar/_layout.scss | 2 +- packages/classic/scss/avatar/_theme.scss | 2 +- packages/classic/scss/avatar/_variables.scss | 2 +- packages/classic/scss/badge/_layout.scss | 2 +- packages/classic/scss/badge/_theme.scss | 2 +- packages/classic/scss/badge/_variables.scss | 2 +- .../scss/bottom-navigation/_layout.scss | 2 +- .../scss/bottom-navigation/_theme.scss | 2 +- .../scss/bottom-navigation/_variables.scss | 2 +- packages/classic/scss/breadcrumb/_layout.scss | 2 +- packages/classic/scss/breadcrumb/_theme.scss | 2 +- .../classic/scss/breadcrumb/_variables.scss | 2 +- packages/classic/scss/button/_layout.scss | 2 +- packages/classic/scss/button/_theme.scss | 2 +- packages/classic/scss/button/_variables.scss | 2 +- packages/classic/scss/calendar/_layout.scss | 2 +- packages/classic/scss/calendar/_theme.scss | 2 +- .../classic/scss/calendar/_variables.scss | 2 +- packages/classic/scss/captcha/_layout.scss | 2 +- packages/classic/scss/captcha/_theme.scss | 2 +- packages/classic/scss/captcha/_variables.scss | 2 +- packages/classic/scss/card/_layout.scss | 2 +- packages/classic/scss/card/_theme.scss | 2 +- packages/classic/scss/card/_variables.scss | 2 +- .../classic/scss/chart-wizard/_layout.scss | 2 +- .../classic/scss/chart-wizard/_theme.scss | 2 +- .../classic/scss/chart-wizard/_variables.scss | 2 +- packages/classic/scss/chat/_layout.scss | 2 +- packages/classic/scss/chat/_theme.scss | 2 +- packages/classic/scss/chat/_variables.scss | 2 +- packages/classic/scss/checkbox/_layout.scss | 2 +- packages/classic/scss/checkbox/_theme.scss | 2 +- .../classic/scss/checkbox/_variables.scss | 2 +- packages/classic/scss/chip/_layout.scss | 2 +- packages/classic/scss/chip/_theme.scss | 2 +- packages/classic/scss/chip/_variables.scss | 2 +- .../classic/scss/color-preview/_layout.scss | 2 +- .../classic/scss/color-preview/_theme.scss | 2 +- .../scss/color-preview/_variables.scss | 2 +- .../classic/scss/coloreditor/_layout.scss | 2 +- packages/classic/scss/coloreditor/_theme.scss | 2 +- .../classic/scss/coloreditor/_variables.scss | 5 ++-- .../classic/scss/colorgradient/_layout.scss | 2 +- .../classic/scss/colorgradient/_theme.scss | 2 +- .../scss/colorgradient/_variables.scss | 5 ++-- .../classic/scss/colorpalette/_layout.scss | 2 +- .../classic/scss/colorpalette/_theme.scss | 2 +- .../classic/scss/colorpalette/_variables.scss | 5 ++-- .../classic/scss/colorpicker/_layout.scss | 2 +- packages/classic/scss/colorpicker/_theme.scss | 2 +- packages/classic/scss/combobox/_layout.scss | 2 +- packages/classic/scss/combobox/_theme.scss | 2 +- packages/classic/scss/core/_index.scss | 4 +++- .../core/color-system/_swatch-legacy.scss | 2 +- packages/classic/scss/dataviz/_layout.scss | 2 +- packages/classic/scss/dataviz/_theme.scss | 2 +- packages/classic/scss/dataviz/_variables.scss | 2 +- packages/classic/scss/dateinput/_layout.scss | 2 +- packages/classic/scss/dateinput/_theme.scss | 2 +- packages/classic/scss/datepicker/_layout.scss | 2 +- packages/classic/scss/datepicker/_theme.scss | 2 +- .../classic/scss/daterangepicker/_layout.scss | 2 +- .../classic/scss/daterangepicker/_theme.scss | 2 +- .../scss/daterangepicker/_variables.scss | 2 +- .../classic/scss/datetimepicker/_layout.scss | 2 +- .../classic/scss/datetimepicker/_theme.scss | 2 +- .../scss/datetimepicker/_variables.scss | 2 +- packages/classic/scss/dialog/_layout.scss | 2 +- packages/classic/scss/dialog/_theme.scss | 2 +- packages/classic/scss/dialog/_variables.scss | 2 +- .../classic/scss/dock-manager/_layout.scss | 2 +- .../classic/scss/dock-manager/_theme.scss | 2 +- .../classic/scss/dock-manager/_variables.scss | 2 +- packages/classic/scss/draggable/_layout.scss | 2 +- packages/classic/scss/draggable/_theme.scss | 2 +- .../classic/scss/draggable/_variables.scss | 2 +- packages/classic/scss/drawer/_layout.scss | 2 +- packages/classic/scss/drawer/_theme.scss | 2 +- packages/classic/scss/drawer/_variables.scss | 2 +- .../classic/scss/dropdowngrid/_layout.scss | 2 +- .../classic/scss/dropdowngrid/_theme.scss | 2 +- .../classic/scss/dropdownlist/_layout.scss | 2 +- .../classic/scss/dropdownlist/_theme.scss | 2 +- .../classic/scss/dropdowntree/_layout.scss | 2 +- .../classic/scss/dropdowntree/_theme.scss | 2 +- .../classic/scss/dropdowntree/_variables.scss | 2 +- packages/classic/scss/dropzone/_layout.scss | 2 +- packages/classic/scss/dropzone/_theme.scss | 2 +- .../classic/scss/dropzone/_variables.scss | 2 +- packages/classic/scss/editor/_layout.scss | 2 +- packages/classic/scss/editor/_theme.scss | 2 +- packages/classic/scss/editor/_variables.scss | 2 +- .../classic/scss/expansion-panel/_layout.scss | 2 +- .../classic/scss/expansion-panel/_theme.scss | 2 +- .../scss/expansion-panel/_variables.scss | 2 +- packages/classic/scss/fab/_layout.scss | 2 +- packages/classic/scss/fab/_theme.scss | 2 +- packages/classic/scss/fab/_variables.scss | 2 +- .../classic/scss/filemanager/_layout.scss | 2 +- packages/classic/scss/filemanager/_theme.scss | 2 +- .../classic/scss/filemanager/_variables.scss | 2 +- packages/classic/scss/filter/_layout.scss | 2 +- packages/classic/scss/filter/_theme.scss | 2 +- packages/classic/scss/filter/_variables.scss | 2 +- .../classic/scss/floating-label/_layout.scss | 2 +- .../classic/scss/floating-label/_theme.scss | 2 +- .../scss/floating-label/_variables.scss | 2 +- packages/classic/scss/forms/_layout.scss | 2 +- packages/classic/scss/forms/_theme.scss | 2 +- packages/classic/scss/forms/_variables.scss | 2 +- packages/classic/scss/gantt/_layout.scss | 2 +- packages/classic/scss/gantt/_theme.scss | 2 +- packages/classic/scss/gantt/_variables.scss | 2 +- packages/classic/scss/grid/_layout.scss | 2 +- packages/classic/scss/grid/_theme.scss | 2 +- packages/classic/scss/grid/_variables.scss | 2 +- packages/classic/scss/gridlayout/_layout.scss | 2 +- packages/classic/scss/gridlayout/_theme.scss | 2 +- packages/classic/scss/icons/_layout.scss | 2 +- packages/classic/scss/icons/_theme.scss | 2 +- packages/classic/scss/icons/_variables.scss | 13 ++++++++++ .../classic/scss/imageeditor/_layout.scss | 2 +- packages/classic/scss/imageeditor/_theme.scss | 2 +- .../classic/scss/imageeditor/_variables.scss | 2 +- packages/classic/scss/input/_layout.scss | 2 +- packages/classic/scss/input/_theme.scss | 2 +- packages/classic/scss/input/_variables.scss | 2 +- packages/classic/scss/list/_layout.scss | 2 +- packages/classic/scss/list/_theme.scss | 2 +- packages/classic/scss/list/_variables.scss | 2 +- packages/classic/scss/listbox/_layout.scss | 2 +- packages/classic/scss/listbox/_theme.scss | 2 +- packages/classic/scss/listbox/_variables.scss | 2 +- packages/classic/scss/listgroup/_layout.scss | 2 +- packages/classic/scss/listgroup/_theme.scss | 2 +- .../classic/scss/listgroup/_variables.scss | 2 +- packages/classic/scss/listview/_layout.scss | 2 +- packages/classic/scss/listview/_theme.scss | 2 +- .../classic/scss/listview/_variables.scss | 2 +- packages/classic/scss/loader/_layout.scss | 2 +- packages/classic/scss/loader/_theme.scss | 2 +- packages/classic/scss/loader/_variables.scss | 2 +- packages/classic/scss/map/_layout.scss | 2 +- packages/classic/scss/map/_theme.scss | 2 +- packages/classic/scss/map/_variables.scss | 2 +- .../classic/scss/maskedtextbox/_layout.scss | 2 +- .../classic/scss/maskedtextbox/_theme.scss | 2 +- .../classic/scss/mediaplayer/_layout.scss | 2 +- packages/classic/scss/mediaplayer/_theme.scss | 2 +- .../classic/scss/mediaplayer/_variables.scss | 2 +- .../classic/scss/menu-button/_layout.scss | 2 +- packages/classic/scss/menu-button/_theme.scss | 2 +- .../classic/scss/menu-button/_variables.scss | 2 +- packages/classic/scss/menu/_layout.scss | 2 +- packages/classic/scss/menu/_theme.scss | 2 +- packages/classic/scss/menu/_variables.scss | 2 +- packages/classic/scss/messagebox/_layout.scss | 2 +- packages/classic/scss/messagebox/_theme.scss | 2 +- .../classic/scss/messagebox/_variables.scss | 2 +- .../classic/scss/multiselect/_layout.scss | 2 +- packages/classic/scss/multiselect/_theme.scss | 2 +- packages/classic/scss/no-data/_layout.scss | 2 +- packages/classic/scss/no-data/_theme.scss | 2 +- packages/classic/scss/no-data/_variables.scss | 2 +- .../classic/scss/notification/_layout.scss | 2 +- .../classic/scss/notification/_theme.scss | 2 +- .../classic/scss/notification/_variables.scss | 2 +- .../classic/scss/numerictextbox/_layout.scss | 2 +- .../classic/scss/numerictextbox/_theme.scss | 2 +- packages/classic/scss/orgchart/_layout.scss | 2 +- packages/classic/scss/orgchart/_theme.scss | 2 +- .../classic/scss/orgchart/_variables.scss | 2 +- packages/classic/scss/otp/_layout.scss | 2 +- packages/classic/scss/otp/_theme.scss | 2 +- packages/classic/scss/otp/_variables.scss | 2 +- packages/classic/scss/overlay/_layout.scss | 2 +- packages/classic/scss/overlay/_theme.scss | 2 +- packages/classic/scss/overlay/_variables.scss | 2 +- packages/classic/scss/pager/_layout.scss | 2 +- packages/classic/scss/pager/_theme.scss | 2 +- packages/classic/scss/pager/_variables.scss | 2 +- packages/classic/scss/panel/_layout.scss | 2 +- packages/classic/scss/panel/_theme.scss | 2 +- packages/classic/scss/panel/_variables.scss | 2 +- packages/classic/scss/panelbar/_layout.scss | 2 +- packages/classic/scss/panelbar/_theme.scss | 2 +- .../classic/scss/panelbar/_variables.scss | 2 +- packages/classic/scss/pdf-viewer/_layout.scss | 2 +- packages/classic/scss/pdf-viewer/_theme.scss | 2 +- .../classic/scss/pdf-viewer/_variables.scss | 2 +- packages/classic/scss/pivotgrid/_layout.scss | 2 +- packages/classic/scss/pivotgrid/_theme.scss | 2 +- .../classic/scss/pivotgrid/_variables.scss | 2 +- packages/classic/scss/popover/_layout.scss | 2 +- packages/classic/scss/popover/_theme.scss | 2 +- packages/classic/scss/popover/_variables.scss | 2 +- packages/classic/scss/popup/_layout.scss | 2 +- packages/classic/scss/popup/_theme.scss | 2 +- packages/classic/scss/popup/_variables.scss | 2 +- .../classic/scss/progressbar/_layout.scss | 2 +- packages/classic/scss/progressbar/_theme.scss | 2 +- .../classic/scss/progressbar/_variables.scss | 2 +- packages/classic/scss/prompt/_layout.scss | 2 +- packages/classic/scss/prompt/_theme.scss | 2 +- packages/classic/scss/prompt/_variables.scss | 2 +- packages/classic/scss/radio/_layout.scss | 2 +- packages/classic/scss/radio/_theme.scss | 2 +- packages/classic/scss/radio/_variables.scss | 2 +- packages/classic/scss/rating/_layout.scss | 2 +- packages/classic/scss/rating/_theme.scss | 2 +- packages/classic/scss/rating/_variables.scss | 2 +- .../classic/scss/responsivepanel/_layout.scss | 2 +- .../classic/scss/responsivepanel/_theme.scss | 2 +- packages/classic/scss/ripple/_layout.scss | 2 +- packages/classic/scss/ripple/_theme.scss | 2 +- packages/classic/scss/scheduler/_layout.scss | 2 +- packages/classic/scss/scheduler/_theme.scss | 2 +- .../classic/scss/scheduler/_variables.scss | 2 +- packages/classic/scss/scroller/_layout.scss | 2 +- packages/classic/scss/scroller/_theme.scss | 2 +- packages/classic/scss/scrollview/_layout.scss | 2 +- packages/classic/scss/scrollview/_theme.scss | 2 +- .../classic/scss/scrollview/_variables.scss | 2 +- packages/classic/scss/searchbox/_layout.scss | 2 +- packages/classic/scss/searchbox/_theme.scss | 2 +- packages/classic/scss/signature/_layout.scss | 2 +- packages/classic/scss/signature/_theme.scss | 2 +- .../classic/scss/signature/_variables.scss | 2 +- packages/classic/scss/skeleton/_layout.scss | 2 +- packages/classic/scss/skeleton/_theme.scss | 2 +- .../classic/scss/skeleton/_variables.scss | 2 +- packages/classic/scss/slider/_layout.scss | 2 +- packages/classic/scss/slider/_theme.scss | 2 +- packages/classic/scss/slider/_variables.scss | 2 +- .../classic/scss/split-button/_layout.scss | 2 +- .../classic/scss/split-button/_theme.scss | 2 +- .../classic/scss/split-button/_variables.scss | 2 +- packages/classic/scss/splitter/_layout.scss | 2 +- packages/classic/scss/splitter/_theme.scss | 2 +- .../classic/scss/splitter/_variables.scss | 2 +- .../classic/scss/spreadsheet/_layout.scss | 2 +- packages/classic/scss/spreadsheet/_theme.scss | 2 +- .../classic/scss/spreadsheet/_variables.scss | 2 +- .../classic/scss/stacklayout/_layout.scss | 2 +- packages/classic/scss/stacklayout/_theme.scss | 2 +- packages/classic/scss/stepper/_layout.scss | 2 +- packages/classic/scss/stepper/_theme.scss | 2 +- packages/classic/scss/stepper/_variables.scss | 2 +- packages/classic/scss/switch/_layout.scss | 2 +- packages/classic/scss/switch/_theme.scss | 2 +- packages/classic/scss/switch/_variables.scss | 2 +- packages/classic/scss/table/_layout.scss | 2 +- packages/classic/scss/table/_theme.scss | 2 +- packages/classic/scss/table/_variables.scss | 2 +- packages/classic/scss/tabstrip/_layout.scss | 2 +- packages/classic/scss/tabstrip/_theme.scss | 2 +- .../classic/scss/tabstrip/_variables.scss | 5 ++-- packages/classic/scss/taskboard/_layout.scss | 2 +- packages/classic/scss/taskboard/_theme.scss | 2 +- .../classic/scss/taskboard/_variables.scss | 6 ++--- packages/classic/scss/textarea/_layout.scss | 2 +- packages/classic/scss/textarea/_theme.scss | 2 +- packages/classic/scss/textbox/_layout.scss | 2 +- packages/classic/scss/textbox/_theme.scss | 2 +- packages/classic/scss/tilelayout/_layout.scss | 2 +- packages/classic/scss/tilelayout/_theme.scss | 2 +- .../classic/scss/tilelayout/_variables.scss | 2 +- .../classic/scss/time-marker/_layout.scss | 2 +- packages/classic/scss/time-marker/_theme.scss | 2 +- .../classic/scss/time-marker/_variables.scss | 2 +- .../scss/timedurationpicker/_layout.scss | 2 +- .../scss/timedurationpicker/_theme.scss | 2 +- packages/classic/scss/timeline/_layout.scss | 2 +- packages/classic/scss/timeline/_theme.scss | 2 +- .../classic/scss/timeline/_variables.scss | 2 +- packages/classic/scss/timepicker/_layout.scss | 2 +- packages/classic/scss/timepicker/_theme.scss | 2 +- .../classic/scss/timeselector/_layout.scss | 2 +- .../classic/scss/timeselector/_theme.scss | 2 +- .../classic/scss/timeselector/_variables.scss | 2 +- packages/classic/scss/toolbar/_layout.scss | 2 +- packages/classic/scss/toolbar/_theme.scss | 2 +- packages/classic/scss/toolbar/_variables.scss | 24 ++++++++++++++++++- packages/classic/scss/tooltip/_layout.scss | 2 +- packages/classic/scss/tooltip/_theme.scss | 2 +- packages/classic/scss/tooltip/_variables.scss | 2 +- packages/classic/scss/treelist/_layout.scss | 2 +- packages/classic/scss/treelist/_theme.scss | 2 +- .../classic/scss/treelist/_variables.scss | 2 +- packages/classic/scss/treeview/_layout.scss | 2 +- packages/classic/scss/treeview/_theme.scss | 2 +- .../classic/scss/treeview/_variables.scss | 2 +- packages/classic/scss/typography/_layout.scss | 2 +- packages/classic/scss/typography/_theme.scss | 2 +- .../classic/scss/typography/_variables.scss | 2 +- packages/classic/scss/upload/_layout.scss | 2 +- packages/classic/scss/upload/_theme.scss | 2 +- packages/classic/scss/upload/_variables.scss | 2 +- packages/classic/scss/validator/_layout.scss | 2 +- packages/classic/scss/validator/_theme.scss | 2 +- .../scss/virtual-scroller/_layout.scss | 2 +- .../classic/scss/virtual-scroller/_theme.scss | 2 +- packages/classic/scss/window/_layout.scss | 2 +- packages/classic/scss/window/_theme.scss | 2 +- packages/classic/scss/window/_variables.scss | 2 +- packages/classic/scss/wizard/_layout.scss | 2 +- packages/classic/scss/wizard/_theme.scss | 2 +- packages/classic/scss/wizard/_variables.scss | 2 +- 323 files changed, 369 insertions(+), 334 deletions(-) diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss index 514abd2d695..daa20cea8fa 100644 --- a/packages/classic/scss/_variables.scss +++ b/packages/classic/scss/_variables.scss @@ -1,12 +1,6 @@ -$kendo-enable-typography: false !default; - -$kendo-use-input-button-width: false !default; -$kendo-use-input-spinner-width: false !default; -$kendo-use-input-spinner-icon-offset: false !default; - $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; $kendo-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default; -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; + diff --git a/packages/classic/scss/action-buttons/_layout.scss b/packages/classic/scss/action-buttons/_layout.scss index b622ff74df7..b5c41c37434 100644 --- a/packages/classic/scss/action-buttons/_layout.scss +++ b/packages/classic/scss/action-buttons/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-buttons/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-buttons/_layout.scss" as *; @mixin kendo-action-buttons--layout() { diff --git a/packages/classic/scss/action-buttons/_theme.scss b/packages/classic/scss/action-buttons/_theme.scss index 9aa63724c8a..8d84dc1f72a 100644 --- a/packages/classic/scss/action-buttons/_theme.scss +++ b/packages/classic/scss/action-buttons/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-buttons/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-buttons/_theme.scss" as *; @mixin kendo-action-buttons--theme() { diff --git a/packages/classic/scss/action-buttons/_variables.scss b/packages/classic/scss/action-buttons/_variables.scss index 1d60b518fef..d46f7e3bc42 100644 --- a/packages/classic/scss/action-buttons/_variables.scss +++ b/packages/classic/scss/action-buttons/_variables.scss @@ -13,7 +13,7 @@ $kendo-actions-border: null !default; $kendo-actions-gradient: null !default; -@forward "@progress/kendo-theme-default/scss/action-buttons/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/action-buttons/_variables.scss" with ( $kendo-actions-margin-top: $kendo-actions-margin-top, $kendo-actions-padding-x: $kendo-actions-padding-x, $kendo-actions-padding-y: $kendo-actions-padding-y, diff --git a/packages/classic/scss/action-sheet/_layout.scss b/packages/classic/scss/action-sheet/_layout.scss index dc4b16cd261..954a36f134e 100644 --- a/packages/classic/scss/action-sheet/_layout.scss +++ b/packages/classic/scss/action-sheet/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-sheet/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-sheet/_layout.scss" as *; @mixin kendo-action-sheet--layout() { diff --git a/packages/classic/scss/action-sheet/_theme.scss b/packages/classic/scss/action-sheet/_theme.scss index f9176b04dbd..e8d2b47d172 100644 --- a/packages/classic/scss/action-sheet/_theme.scss +++ b/packages/classic/scss/action-sheet/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/action-sheet/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/action-sheet/_theme.scss" as *; @mixin kendo-action-sheet--theme() { diff --git a/packages/classic/scss/action-sheet/_variables.scss b/packages/classic/scss/action-sheet/_variables.scss index f0adf2e1d44..81adb54720f 100644 --- a/packages/classic/scss/action-sheet/_variables.scss +++ b/packages/classic/scss/action-sheet/_variables.scss @@ -88,7 +88,7 @@ $kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default; $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default; -@forward "@progress/kendo-theme-default/scss/action-sheet/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/action-sheet/_variables.scss" with ( $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x, $kendo-actionsheet-padding-y: $kendo-actionsheet-padding-y, $kendo-actionsheet-width: $kendo-actionsheet-width, diff --git a/packages/classic/scss/adaptive/_layout.scss b/packages/classic/scss/adaptive/_layout.scss index 18110d73c24..1fcc635d639 100644 --- a/packages/classic/scss/adaptive/_layout.scss +++ b/packages/classic/scss/adaptive/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/adaptive/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/adaptive/_layout.scss" as *; @mixin kendo-adaptive--layout() { diff --git a/packages/classic/scss/adaptive/_theme.scss b/packages/classic/scss/adaptive/_theme.scss index 9627e79f9f8..67ce73312da 100644 --- a/packages/classic/scss/adaptive/_theme.scss +++ b/packages/classic/scss/adaptive/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/adaptive/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/adaptive/_theme.scss" as *; @mixin kendo-adaptive--theme() { diff --git a/packages/classic/scss/adaptive/_variables.scss b/packages/classic/scss/adaptive/_variables.scss index d8c02f743ac..d9e6b84db3e 100644 --- a/packages/classic/scss/adaptive/_variables.scss +++ b/packages/classic/scss/adaptive/_variables.scss @@ -33,7 +33,7 @@ $kendo-adaptive-scheduler-base-text: inherit !default; $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default; -@forward "@progress/kendo-theme-default/scss/adaptive/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with ( $kendo-adaptive-bg: $kendo-adaptive-bg, $kendo-adaptive-text: $kendo-adaptive-text, $kendo-adaptive-border: $kendo-adaptive-border, diff --git a/packages/classic/scss/appbar/_layout.scss b/packages/classic/scss/appbar/_layout.scss index 165eb6ee06e..2c63afa1dd4 100644 --- a/packages/classic/scss/appbar/_layout.scss +++ b/packages/classic/scss/appbar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/appbar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/appbar/_layout.scss" as *; @mixin kendo-appbar--layout() { diff --git a/packages/classic/scss/appbar/_theme.scss b/packages/classic/scss/appbar/_theme.scss index 52e605eb86b..88327180bed 100644 --- a/packages/classic/scss/appbar/_theme.scss +++ b/packages/classic/scss/appbar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/appbar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/appbar/_theme.scss" as *; @mixin kendo-appbar--theme() { diff --git a/packages/classic/scss/appbar/_variables.scss b/packages/classic/scss/appbar/_variables.scss index ae0d41fca62..021440a9b8f 100644 --- a/packages/classic/scss/appbar/_variables.scss +++ b/packages/classic/scss/appbar/_variables.scss @@ -57,7 +57,7 @@ $kendo-appbar-box-shadow: k-elevation(4) !default; $kendo-appbar-bottom-box-shadow: k-elevation(4) !default; -@forward "@progress/kendo-theme-default/scss/appbar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with ( $kendo-appbar-margin-x: $kendo-appbar-margin-x, $kendo-appbar-margin-y: $kendo-appbar-margin-y, $kendo-appbar-padding-x: $kendo-appbar-padding-x, diff --git a/packages/classic/scss/autocomplete/_layout.scss b/packages/classic/scss/autocomplete/_layout.scss index 17bbe156d7f..abe4d723e1d 100644 --- a/packages/classic/scss/autocomplete/_layout.scss +++ b/packages/classic/scss/autocomplete/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/autocomplete/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/autocomplete/_layout.scss" as *; @mixin kendo-autocomplete--layout() { diff --git a/packages/classic/scss/autocomplete/_theme.scss b/packages/classic/scss/autocomplete/_theme.scss index 09089392cca..308a4c551eb 100644 --- a/packages/classic/scss/autocomplete/_theme.scss +++ b/packages/classic/scss/autocomplete/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/autocomplete/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/autocomplete/_theme.scss" as *; @mixin kendo-autocomplete--theme() { diff --git a/packages/classic/scss/avatar/_layout.scss b/packages/classic/scss/avatar/_layout.scss index 36396213312..fadb2ebfa9b 100644 --- a/packages/classic/scss/avatar/_layout.scss +++ b/packages/classic/scss/avatar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/avatar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/avatar/_layout.scss" as *; @mixin kendo-avatar--layout() { diff --git a/packages/classic/scss/avatar/_theme.scss b/packages/classic/scss/avatar/_theme.scss index 43f6377f11e..06cc19355cf 100644 --- a/packages/classic/scss/avatar/_theme.scss +++ b/packages/classic/scss/avatar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/avatar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/avatar/_theme.scss" as *; @mixin kendo-avatar--theme() { diff --git a/packages/classic/scss/avatar/_variables.scss b/packages/classic/scss/avatar/_variables.scss index 9ee6fc711e5..0204b93581c 100644 --- a/packages/classic/scss/avatar/_variables.scss +++ b/packages/classic/scss/avatar/_variables.scss @@ -28,7 +28,7 @@ $kendo-avatar-sizes: ( $kendo-avatar-theme-colors: $kendo-theme-colors !default; -@forward "@progress/kendo-theme-default/scss/avatar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with ( $kendo-avatar-border-width: $kendo-avatar-border-width, $kendo-avatar-font-family: $kendo-avatar-font-family, $kendo-avatar-font-size: $kendo-avatar-font-size, diff --git a/packages/classic/scss/badge/_layout.scss b/packages/classic/scss/badge/_layout.scss index f6d2e4c727c..995495f5afc 100644 --- a/packages/classic/scss/badge/_layout.scss +++ b/packages/classic/scss/badge/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/badge/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *; @mixin kendo-badge--layout() { diff --git a/packages/classic/scss/badge/_theme.scss b/packages/classic/scss/badge/_theme.scss index d61e955cf7b..005813cdc52 100644 --- a/packages/classic/scss/badge/_theme.scss +++ b/packages/classic/scss/badge/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/badge/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/badge/_theme.scss" as *; @mixin kendo-badge--theme() { diff --git a/packages/classic/scss/badge/_variables.scss b/packages/classic/scss/badge/_variables.scss index 0cf45258471..3367d04f881 100644 --- a/packages/classic/scss/badge/_variables.scss +++ b/packages/classic/scss/badge/_variables.scss @@ -103,7 +103,7 @@ $kendo-badge-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/badge/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with ( $kendo-badge-border-width: $kendo-badge-border-width, $kendo-badge-border-radius: $kendo-badge-border-radius, $kendo-badge-padding-x: $kendo-badge-padding-x, diff --git a/packages/classic/scss/bottom-navigation/_layout.scss b/packages/classic/scss/bottom-navigation/_layout.scss index a5b50f1d6ca..e1d6f5dab6e 100644 --- a/packages/classic/scss/bottom-navigation/_layout.scss +++ b/packages/classic/scss/bottom-navigation/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/bottom-navigation/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *; @mixin kendo-bottom-navigation--layout() { diff --git a/packages/classic/scss/bottom-navigation/_theme.scss b/packages/classic/scss/bottom-navigation/_theme.scss index a3c2dff7138..8bb64726b24 100644 --- a/packages/classic/scss/bottom-navigation/_theme.scss +++ b/packages/classic/scss/bottom-navigation/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/bottom-navigation/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *; @mixin kendo-bottom-navigation--theme() { diff --git a/packages/classic/scss/bottom-navigation/_variables.scss b/packages/classic/scss/bottom-navigation/_variables.scss index f1ddfc068d7..665851fe50f 100644 --- a/packages/classic/scss/bottom-navigation/_variables.scss +++ b/packages/classic/scss/bottom-navigation/_variables.scss @@ -65,7 +65,7 @@ $kendo-bottom-nav-flat-bg: $kendo-component-bg !default; $kendo-bottom-nav-flat-border: $kendo-component-border !default; -@forward "@progress/kendo-theme-default/scss/bottom-navigation/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with ( $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x, $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y, $kendo-bottom-nav-gap: $kendo-bottom-nav-gap, diff --git a/packages/classic/scss/breadcrumb/_layout.scss b/packages/classic/scss/breadcrumb/_layout.scss index d060aec0381..96a7a9dcf19 100644 --- a/packages/classic/scss/breadcrumb/_layout.scss +++ b/packages/classic/scss/breadcrumb/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/breadcrumb/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_layout.scss" as *; @mixin kendo-breadcrumb--layout() { diff --git a/packages/classic/scss/breadcrumb/_theme.scss b/packages/classic/scss/breadcrumb/_theme.scss index f11e25e8b43..5b0a91c64b0 100644 --- a/packages/classic/scss/breadcrumb/_theme.scss +++ b/packages/classic/scss/breadcrumb/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/breadcrumb/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_theme.scss" as *; @mixin kendo-breadcrumb--theme() { diff --git a/packages/classic/scss/breadcrumb/_variables.scss b/packages/classic/scss/breadcrumb/_variables.scss index 3b4ac1d99f7..dc705fc9457 100644 --- a/packages/classic/scss/breadcrumb/_variables.scss +++ b/packages/classic/scss/breadcrumb/_variables.scss @@ -233,7 +233,7 @@ $kendo-breadcrumb-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/breadcrumb/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/breadcrumb/_variables.scss" with ( $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width, $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x, $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y, diff --git a/packages/classic/scss/button/_layout.scss b/packages/classic/scss/button/_layout.scss index 2b3deaf65b0..5dab0629e12 100644 --- a/packages/classic/scss/button/_layout.scss +++ b/packages/classic/scss/button/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/button/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *; @mixin kendo-button--layout() { diff --git a/packages/classic/scss/button/_theme.scss b/packages/classic/scss/button/_theme.scss index 0693b27f4f0..16889ddaffc 100644 --- a/packages/classic/scss/button/_theme.scss +++ b/packages/classic/scss/button/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/button/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/button/_theme.scss" as *; @mixin kendo-button--theme() { diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss index e947e949f24..204754c65c1 100644 --- a/packages/classic/scss/button/_variables.scss +++ b/packages/classic/scss/button/_variables.scss @@ -261,7 +261,7 @@ $kendo-flat-button-focus-ring-opacity: .12 !default; $kendo-button-transition: color .2s ease-in-out !default; -@forward "@progress/kendo-theme-default/scss/button/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with ( $kendo-button-border-width: $kendo-button-border-width, $kendo-button-border-radius: $kendo-button-border-radius, $kendo-button-padding-x: $kendo-button-padding-x, diff --git a/packages/classic/scss/calendar/_layout.scss b/packages/classic/scss/calendar/_layout.scss index 94989591e7c..bafcb8ea44e 100644 --- a/packages/classic/scss/calendar/_layout.scss +++ b/packages/classic/scss/calendar/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/calendar/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *; @mixin kendo-calendar--layout() { diff --git a/packages/classic/scss/calendar/_theme.scss b/packages/classic/scss/calendar/_theme.scss index 5efc8531de7..0e3f629197e 100644 --- a/packages/classic/scss/calendar/_theme.scss +++ b/packages/classic/scss/calendar/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/calendar/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/calendar/_theme.scss" as *; @mixin kendo-calendar--theme() { diff --git a/packages/classic/scss/calendar/_variables.scss b/packages/classic/scss/calendar/_variables.scss index 4817bd41c90..b843e03204d 100644 --- a/packages/classic/scss/calendar/_variables.scss +++ b/packages/classic/scss/calendar/_variables.scss @@ -358,7 +358,7 @@ $kendo-calendar-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/calendar/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/calendar/_variables.scss" with ( $kendo-calendar-border-width: $kendo-calendar-border-width, $kendo-calendar-font-family: $kendo-calendar-font-family, $kendo-calendar-font-size: $kendo-calendar-font-size, diff --git a/packages/classic/scss/captcha/_layout.scss b/packages/classic/scss/captcha/_layout.scss index 1fb81b674eb..9abeda7afe0 100644 --- a/packages/classic/scss/captcha/_layout.scss +++ b/packages/classic/scss/captcha/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/captcha/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/captcha/_layout.scss" as *; @mixin kendo-captcha--layout() { diff --git a/packages/classic/scss/captcha/_theme.scss b/packages/classic/scss/captcha/_theme.scss index 15a2f7e8e47..a0a20e09ba2 100644 --- a/packages/classic/scss/captcha/_theme.scss +++ b/packages/classic/scss/captcha/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/captcha/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/captcha/_theme.scss" as *; @mixin kendo-captcha--theme() { diff --git a/packages/classic/scss/captcha/_variables.scss b/packages/classic/scss/captcha/_variables.scss index f868e313b40..c6914d2e935 100644 --- a/packages/classic/scss/captcha/_variables.scss +++ b/packages/classic/scss/captcha/_variables.scss @@ -49,7 +49,7 @@ $kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit $kendo-captcha-validation-message-font-style: italic !default; -@forward "@progress/kendo-theme-default/scss/captcha/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/captcha/_variables.scss" with ( $kendo-captcha-spacer: $kendo-captcha-spacer, $kendo-captcha-width: $kendo-captcha-width, $kendo-captcha-font-family: $kendo-captcha-font-family, diff --git a/packages/classic/scss/card/_layout.scss b/packages/classic/scss/card/_layout.scss index 1c10ee935b3..9223804361e 100644 --- a/packages/classic/scss/card/_layout.scss +++ b/packages/classic/scss/card/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/card/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/card/_layout.scss" as *; @mixin kendo-card--layout() { diff --git a/packages/classic/scss/card/_theme.scss b/packages/classic/scss/card/_theme.scss index d8895742410..55449bc8eda 100644 --- a/packages/classic/scss/card/_theme.scss +++ b/packages/classic/scss/card/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/card/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *; @mixin kendo-card--theme() { diff --git a/packages/classic/scss/card/_variables.scss b/packages/classic/scss/card/_variables.scss index e755a1987b5..bfef16d3644 100644 --- a/packages/classic/scss/card/_variables.scss +++ b/packages/classic/scss/card/_variables.scss @@ -185,7 +185,7 @@ $kendo-card-callout-width: 20px !default; $kendo-card-callout-height: 20px !default; -@forward "@progress/kendo-theme-default/scss/card/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with ( $kendo-card-padding-x: $kendo-card-padding-x, $kendo-card-padding-y: $kendo-card-padding-y, $kendo-card-border-width: $kendo-card-border-width, diff --git a/packages/classic/scss/chart-wizard/_layout.scss b/packages/classic/scss/chart-wizard/_layout.scss index a4a684c54fe..b5e8c2b2359 100644 --- a/packages/classic/scss/chart-wizard/_layout.scss +++ b/packages/classic/scss/chart-wizard/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_layout.scss" as *; @mixin kendo-chart-wizard--layout() { @include kendo-chart-wizard--layout-base(); diff --git a/packages/classic/scss/chart-wizard/_theme.scss b/packages/classic/scss/chart-wizard/_theme.scss index 7a01fbed74c..9ee84a9f7b7 100644 --- a/packages/classic/scss/chart-wizard/_theme.scss +++ b/packages/classic/scss/chart-wizard/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_theme.scss" as *; @mixin kendo-chart-wizard--theme() { @include kendo-chart-wizard--theme-base(); diff --git a/packages/classic/scss/chart-wizard/_variables.scss b/packages/classic/scss/chart-wizard/_variables.scss index 418f45bebb0..2a6988e47b8 100644 --- a/packages/classic/scss/chart-wizard/_variables.scss +++ b/packages/classic/scss/chart-wizard/_variables.scss @@ -41,7 +41,7 @@ $kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default; $kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; -@forward "@progress/kendo-theme-default/scss/chart-wizard/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chart-wizard/_variables.scss" with ( $kendo-chart-wizard-icon-area-color: $kendo-chart-wizard-icon-area-color, $kendo-chart-wizard-icon-area-bg: $kendo-chart-wizard-icon-area-bg, $kendo-chart-wizard-icon-area-border-radius: $kendo-chart-wizard-icon-area-border-radius, diff --git a/packages/classic/scss/chat/_layout.scss b/packages/classic/scss/chat/_layout.scss index 77b342ef5cd..f24f5505fb4 100644 --- a/packages/classic/scss/chat/_layout.scss +++ b/packages/classic/scss/chat/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chat/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chat/_layout.scss" as *; @mixin kendo-chat--layout() { diff --git a/packages/classic/scss/chat/_theme.scss b/packages/classic/scss/chat/_theme.scss index 8f39cf4b622..3f254386ee9 100644 --- a/packages/classic/scss/chat/_theme.scss +++ b/packages/classic/scss/chat/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chat/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chat/_theme.scss" as *; @mixin kendo-chat--theme() { diff --git a/packages/classic/scss/chat/_variables.scss b/packages/classic/scss/chat/_variables.scss index 60b0e6e4b84..a5de09fda9f 100644 --- a/packages/classic/scss/chat/_variables.scss +++ b/packages/classic/scss/chat/_variables.scss @@ -215,7 +215,7 @@ $kendo-chat-quick-reply-shadow-spread: 0px !default; $kendo-chat-quick-reply-shadow-opacity: .75 !default; -@forward "@progress/kendo-theme-default/scss/chat/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with ( $kendo-chat-padding-x: $kendo-chat-padding-x, $kendo-chat-padding-y: $kendo-chat-padding-y, $kendo-chat-width: $kendo-chat-width, diff --git a/packages/classic/scss/checkbox/_layout.scss b/packages/classic/scss/checkbox/_layout.scss index ffcf60b31a2..6a08639c6e8 100644 --- a/packages/classic/scss/checkbox/_layout.scss +++ b/packages/classic/scss/checkbox/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/checkbox/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *; @mixin kendo-checkbox--layout() { diff --git a/packages/classic/scss/checkbox/_theme.scss b/packages/classic/scss/checkbox/_theme.scss index 8110113887a..202d8e6dc62 100644 --- a/packages/classic/scss/checkbox/_theme.scss +++ b/packages/classic/scss/checkbox/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/checkbox/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *; @mixin kendo-checkbox--theme() { diff --git a/packages/classic/scss/checkbox/_variables.scss b/packages/classic/scss/checkbox/_variables.scss index a03269d9873..1353088957b 100644 --- a/packages/classic/scss/checkbox/_variables.scss +++ b/packages/classic/scss/checkbox/_variables.scss @@ -195,7 +195,7 @@ $kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default; $kendo-checkbox-ripple-opacity: .25 !default; -@forward "@progress/kendo-theme-default/scss/checkbox/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/checkbox/_variables.scss" with ( $kendo-checkbox-border-width: $kendo-checkbox-border-width, $kendo-checkbox-sm-size: $kendo-checkbox-sm-size, $kendo-checkbox-md-size: $kendo-checkbox-md-size, diff --git a/packages/classic/scss/chip/_layout.scss b/packages/classic/scss/chip/_layout.scss index 9fc23d87468..192a18861c7 100644 --- a/packages/classic/scss/chip/_layout.scss +++ b/packages/classic/scss/chip/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chip/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *; @mixin kendo-chip--layout() { diff --git a/packages/classic/scss/chip/_theme.scss b/packages/classic/scss/chip/_theme.scss index 0eb4a78a282..a1d070e0881 100644 --- a/packages/classic/scss/chip/_theme.scss +++ b/packages/classic/scss/chip/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/chip/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *; @mixin kendo-chip--theme() { diff --git a/packages/classic/scss/chip/_variables.scss b/packages/classic/scss/chip/_variables.scss index 92617c9d396..a5783b50ccc 100644 --- a/packages/classic/scss/chip/_variables.scss +++ b/packages/classic/scss/chip/_variables.scss @@ -182,7 +182,7 @@ $kendo-chip-list-sizes: ( ) !default; -@forward "@progress/kendo-theme-default/scss/chip/_variables.scss" with ( +@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with ( $kendo-chip-border-width: $kendo-chip-border-width, $kendo-chip-spacing: $kendo-chip-spacing, $kendo-chip-padding-x: $kendo-chip-padding-x, diff --git a/packages/classic/scss/color-preview/_layout.scss b/packages/classic/scss/color-preview/_layout.scss index 832d1e19a0c..64faf8bbef5 100644 --- a/packages/classic/scss/color-preview/_layout.scss +++ b/packages/classic/scss/color-preview/_layout.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/color-preview/_layout.scss" as *; +@use "@progress/kendo-theme-core/scss/components/color-preview/_layout.scss" as *; @mixin kendo-color-preview--layout() { diff --git a/packages/classic/scss/color-preview/_theme.scss b/packages/classic/scss/color-preview/_theme.scss index 6f047067c1e..f91de46dd03 100644 --- a/packages/classic/scss/color-preview/_theme.scss +++ b/packages/classic/scss/color-preview/_theme.scss @@ -1,4 +1,4 @@ -@use "@progress/kendo-theme-default/scss/color-preview/_theme.scss" as *; +@use "@progress/kendo-theme-core/scss/components/color-preview/_theme.scss" as *; @mixin kendo-color-preview--theme() { diff --git a/packages/classic/scss/color-preview/_variables.scss b/packages/classic/scss/color-preview/_variables.scss index 39a61d1e707..8dd6fef3b2d 100644 --- a/packages/classic/scss/color-preview/_variables.scss +++ b/packages/classic/scss/color-preview/_variables.scss @@ -17,7 +17,7 @@ $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml, Date: Thu, 9 Jan 2025 10:28:54 +0200 Subject: [PATCH 05/10] chore(default): use component styles from core --- packages/default/scss/_variables.scss | 11 - .../default/scss/action-buttons/_layout.scss | 68 +- .../default/scss/action-buttons/_theme.scss | 17 +- .../scss/action-buttons/_variables.scss | 12 + .../default/scss/action-sheet/_layout.scss | 398 +---- .../default/scss/action-sheet/_theme.scss | 101 +- .../default/scss/action-sheet/_variables.scss | 69 + packages/default/scss/adaptive/_layout.scss | 480 +----- packages/default/scss/adaptive/_theme.scss | 100 +- .../default/scss/adaptive/_variables.scss | 21 + packages/default/scss/appbar/_layout.scss | 116 +- packages/default/scss/appbar/_theme.scss | 32 +- packages/default/scss/appbar/_variables.scss | 19 + .../default/scss/autocomplete/_layout.scss | 7 +- .../default/scss/autocomplete/_theme.scss | 7 +- packages/default/scss/avatar/_layout.scss | 79 +- packages/default/scss/avatar/_theme.scss | 28 +- packages/default/scss/avatar/_variables.scss | 9 + packages/default/scss/badge/_layout.scss | 150 +- packages/default/scss/badge/_theme.scss | 28 +- packages/default/scss/badge/_variables.scss | 26 + .../scss/bottom-navigation/_layout.scss | 118 +- .../scss/bottom-navigation/_theme.scss | 58 +- .../scss/bottom-navigation/_variables.scss | 22 + packages/default/scss/breadcrumb/_layout.scss | 134 +- packages/default/scss/breadcrumb/_theme.scss | 101 +- .../default/scss/breadcrumb/_variables.scss | 64 + packages/default/scss/button/_layout.scss | 353 +---- packages/default/scss/button/_theme.scss | 334 +--- packages/default/scss/button/_variables.scss | 92 ++ packages/default/scss/calendar/_layout.scss | 524 +------ packages/default/scss/calendar/_theme.scss | 211 +-- .../default/scss/calendar/_variables.scss | 99 ++ packages/default/scss/captcha/_layout.scss | 65 +- packages/default/scss/captcha/_theme.scss | 16 +- packages/default/scss/captcha/_variables.scss | 17 + packages/default/scss/card/_layout.scss | 344 +---- packages/default/scss/card/_theme.scss | 104 +- packages/default/scss/card/_variables.scss | 58 + .../default/scss/chart-wizard/_layout.scss | 43 +- .../default/scss/chart-wizard/_theme.scss | 34 +- .../default/scss/chart-wizard/_variables.scss | 14 + packages/default/scss/chat/_layout.scss | 471 +----- packages/default/scss/chat/_theme.scss | 100 +- packages/default/scss/chat/_variables.scss | 67 + packages/default/scss/checkbox/_layout.scss | 231 +-- packages/default/scss/checkbox/_theme.scss | 105 +- .../default/scss/checkbox/_variables.scss | 51 + packages/default/scss/chip/_layout.scss | 165 +- packages/default/scss/chip/_theme.scss | 147 +- packages/default/scss/chip/_variables.scss | 46 + .../default/scss/color-preview/_layout.scss | 80 +- .../default/scss/color-preview/_theme.scss | 21 +- .../scss/color-preview/_variables.scss | 14 + .../default/scss/coloreditor/_layout.scss | 118 +- packages/default/scss/coloreditor/_theme.scss | 28 +- .../default/scss/coloreditor/_variables.scss | 55 + .../default/scss/colorgradient/_layout.scss | 234 +-- .../default/scss/colorgradient/_theme.scss | 87 +- .../scss/colorgradient/_variables.scss | 71 + .../default/scss/colorpalette/_layout.scss | 72 +- .../default/scss/colorpalette/_theme.scss | 27 +- .../default/scss/colorpalette/_variables.scss | 18 + .../default/scss/colorpicker/_layout.scss | 14 +- packages/default/scss/colorpicker/_theme.scss | 6 +- packages/default/scss/combobox/_layout.scss | 7 +- packages/default/scss/combobox/_theme.scss | 7 +- .../core/color-system/_swatch-legacy.scss | 91 +- packages/default/scss/dataviz/_layout.scss | 570 +------ packages/default/scss/dataviz/_theme.scss | 116 +- packages/default/scss/dataviz/_variables.scss | 105 ++ packages/default/scss/dateinput/_layout.scss | 7 +- packages/default/scss/dateinput/_theme.scss | 7 +- packages/default/scss/datepicker/_layout.scss | 6 +- packages/default/scss/datepicker/_theme.scss | 7 +- .../default/scss/daterangepicker/_layout.scss | 48 +- .../default/scss/daterangepicker/_theme.scss | 7 +- .../scss/daterangepicker/_variables.scss | 4 + .../default/scss/datetimepicker/_layout.scss | 52 +- .../default/scss/datetimepicker/_theme.scss | 7 +- .../scss/datetimepicker/_variables.scss | 4 + packages/default/scss/dialog/_layout.scss | 74 +- packages/default/scss/dialog/_theme.scss | 25 +- packages/default/scss/dialog/_variables.scss | 11 + .../default/scss/dock-manager/_layout.scss | 221 +-- .../default/scss/dock-manager/_theme.scss | 46 +- .../default/scss/dock-manager/_variables.scss | 38 + packages/default/scss/draggable/_layout.scss | 128 +- packages/default/scss/draggable/_theme.scss | 18 +- .../default/scss/draggable/_variables.scss | 23 + packages/default/scss/drawer/_layout.scss | 203 +-- packages/default/scss/drawer/_theme.scss | 64 +- packages/default/scss/drawer/_variables.scss | 34 + .../default/scss/dropdowngrid/_layout.scss | 16 +- .../default/scss/dropdowngrid/_theme.scss | 7 +- .../default/scss/dropdownlist/_layout.scss | 39 +- .../default/scss/dropdownlist/_theme.scss | 10 +- .../default/scss/dropdowntree/_layout.scss | 40 +- .../default/scss/dropdowntree/_theme.scss | 7 +- .../default/scss/dropdowntree/_variables.scss | 5 + packages/default/scss/dropzone/_layout.scss | 45 +- packages/default/scss/dropzone/_theme.scss | 37 +- .../default/scss/dropzone/_variables.scss | 22 + packages/default/scss/editor/_layout.scss | 649 +------- packages/default/scss/editor/_theme.scss | 104 +- packages/default/scss/editor/_variables.scss | 24 + .../default/scss/expansion-panel/_layout.scss | 83 +- .../default/scss/expansion-panel/_theme.scss | 45 +- .../scss/expansion-panel/_variables.scss | 25 + packages/default/scss/fab/_layout.scss | 146 +- packages/default/scss/fab/_theme.scss | 129 +- packages/default/scss/fab/_variables.scss | 50 + .../default/scss/filemanager/_layout.scss | 239 +-- packages/default/scss/filemanager/_theme.scss | 113 +- .../default/scss/filemanager/_variables.scss | 60 + packages/default/scss/filter/_layout.scss | 94 +- packages/default/scss/filter/_theme.scss | 33 +- packages/default/scss/filter/_variables.scss | 11 + .../default/scss/floating-label/_layout.scss | 91 +- .../default/scss/floating-label/_theme.scss | 31 +- .../scss/floating-label/_variables.scss | 18 + packages/default/scss/forms/_layout.scss | 380 +---- packages/default/scss/forms/_theme.scss | 40 +- packages/default/scss/forms/_variables.scss | 54 + packages/default/scss/gantt/_layout.scss | 922 +---------- packages/default/scss/gantt/_theme.scss | 280 +--- packages/default/scss/gantt/_variables.scss | 78 + packages/default/scss/grid/_layout.scss | 1375 +---------------- packages/default/scss/grid/_theme.scss | 451 +----- packages/default/scss/grid/_variables.scss | 146 ++ packages/default/scss/gridlayout/_layout.scss | 7 +- packages/default/scss/gridlayout/_theme.scss | 7 +- packages/default/scss/icons/_layout.scss | 81 +- packages/default/scss/icons/_theme.scss | 2 +- packages/default/scss/icons/_variables.scss | 13 + .../default/scss/imageeditor/_layout.scss | 161 +- packages/default/scss/imageeditor/_theme.scss | 55 +- .../default/scss/imageeditor/_variables.scss | 34 + packages/default/scss/input/_layout.scss | 587 +------ packages/default/scss/input/_theme.scss | 513 +----- packages/default/scss/input/_variables.scss | 139 +- packages/default/scss/list/_layout.scss | 247 +-- packages/default/scss/list/_theme.scss | 96 +- packages/default/scss/list/_variables.scss | 87 ++ packages/default/scss/listbox/_layout.scss | 87 +- packages/default/scss/listbox/_theme.scss | 21 +- packages/default/scss/listbox/_variables.scss | 18 + packages/default/scss/listgroup/_layout.scss | 192 +-- packages/default/scss/listgroup/_theme.scss | 16 +- .../default/scss/listgroup/_variables.scss | 13 + packages/default/scss/listview/_layout.scss | 142 +- packages/default/scss/listview/_theme.scss | 44 +- .../default/scss/listview/_variables.scss | 21 + packages/default/scss/loader/_layout.scss | 584 +------ packages/default/scss/loader/_theme.scss | 18 +- packages/default/scss/loader/_variables.scss | 40 + packages/default/scss/map/_layout.scss | 139 +- packages/default/scss/map/_theme.scss | 35 +- packages/default/scss/map/_variables.scss | 24 + .../default/scss/maskedtextbox/_layout.scss | 7 +- .../default/scss/maskedtextbox/_theme.scss | 7 +- .../default/scss/mediaplayer/_layout.scss | 106 +- packages/default/scss/mediaplayer/_theme.scss | 24 +- .../default/scss/mediaplayer/_variables.scss | 16 + .../default/scss/menu-button/_layout.scss | 33 +- packages/default/scss/menu-button/_theme.scss | 7 +- .../default/scss/menu-button/_variables.scss | 4 + packages/default/scss/menu/_layout.scss | 321 +--- packages/default/scss/menu/_theme.scss | 141 +- packages/default/scss/menu/_variables.scss | 91 ++ packages/default/scss/messagebox/_layout.scss | 24 +- packages/default/scss/messagebox/_theme.scss | 26 +- .../default/scss/messagebox/_variables.scss | 14 + .../default/scss/multiselect/_layout.scss | 7 +- packages/default/scss/multiselect/_theme.scss | 7 +- packages/default/scss/no-data/_layout.scss | 23 +- packages/default/scss/no-data/_theme.scss | 11 +- packages/default/scss/no-data/_variables.scss | 5 + .../default/scss/notification/_functions.scss | 17 + .../default/scss/notification/_layout.scss | 74 +- .../default/scss/notification/_theme.scss | 28 +- .../default/scss/notification/_variables.scss | 33 +- .../default/scss/numerictextbox/_layout.scss | 11 +- .../default/scss/numerictextbox/_theme.scss | 7 +- packages/default/scss/orgchart/_layout.scss | 113 +- packages/default/scss/orgchart/_theme.scss | 54 +- .../default/scss/orgchart/_variables.scss | 47 + packages/default/scss/otp/_layout.scss | 38 +- packages/default/scss/otp/_theme.scss | 9 +- packages/default/scss/otp/_variables.scss | 16 + packages/default/scss/overlay/_layout.scss | 17 +- packages/default/scss/overlay/_theme.scss | 18 +- packages/default/scss/overlay/_variables.scss | 6 + packages/default/scss/pager/_layout.scss | 187 +-- packages/default/scss/pager/_theme.scss | 22 +- packages/default/scss/pager/_variables.scss | 48 + packages/default/scss/panel/_layout.scss | 30 +- packages/default/scss/panel/_theme.scss | 23 +- packages/default/scss/panel/_variables.scss | 13 + packages/default/scss/panelbar/_layout.scss | 142 +- packages/default/scss/panelbar/_theme.scss | 210 +-- .../default/scss/panelbar/_variables.scss | 86 ++ packages/default/scss/pdf-viewer/_layout.scss | 333 +--- packages/default/scss/pdf-viewer/_theme.scss | 90 +- .../default/scss/pdf-viewer/_variables.scss | 46 +- packages/default/scss/pivotgrid/_layout.scss | 655 +------- packages/default/scss/pivotgrid/_theme.scss | 246 +-- .../default/scss/pivotgrid/_variables.scss | 87 ++ packages/default/scss/popover/_layout.scss | 94 +- packages/default/scss/popover/_theme.scss | 42 +- packages/default/scss/popover/_variables.scss | 29 + packages/default/scss/popup/_layout.scss | 80 +- packages/default/scss/popup/_theme.scss | 20 +- packages/default/scss/popup/_variables.scss | 15 + .../default/scss/progressbar/_layout.scss | 245 +-- packages/default/scss/progressbar/_theme.scss | 53 +- .../default/scss/progressbar/_variables.scss | 25 + packages/default/scss/prompt/_layout.scss | 74 +- packages/default/scss/prompt/_theme.scss | 40 +- packages/default/scss/prompt/_variables.scss | 23 + packages/default/scss/radio/_layout.scss | 227 +-- packages/default/scss/radio/_theme.scss | 92 +- packages/default/scss/radio/_variables.scss | 48 + packages/default/scss/rating/_layout.scss | 94 +- packages/default/scss/rating/_theme.scss | 44 +- packages/default/scss/rating/_variables.scss | 19 + .../default/scss/responsivepanel/_layout.scss | 48 +- .../default/scss/responsivepanel/_theme.scss | 6 +- packages/default/scss/ripple/_layout.scss | 52 +- packages/default/scss/ripple/_theme.scss | 6 +- packages/default/scss/scheduler/_layout.scss | 1041 +------------ packages/default/scss/scheduler/_theme.scss | 237 +-- .../default/scss/scheduler/_variables.scss | 82 + packages/default/scss/scroller/_layout.scss | 86 +- packages/default/scss/scroller/_theme.scss | 8 +- packages/default/scss/scrollview/_layout.scss | 166 +- packages/default/scss/scrollview/_theme.scss | 92 +- .../default/scss/scrollview/_variables.scss | 31 + packages/default/scss/searchbox/_layout.scss | 7 +- packages/default/scss/searchbox/_theme.scss | 7 +- packages/default/scss/signature/_layout.scss | 75 +- packages/default/scss/signature/_theme.scss | 14 +- .../default/scss/signature/_variables.scss | 27 + packages/default/scss/skeleton/_layout.scss | 93 +- packages/default/scss/skeleton/_theme.scss | 27 +- .../default/scss/skeleton/_variables.scss | 9 + packages/default/scss/slider/_layout.scss | 402 +---- packages/default/scss/slider/_theme.scss | 81 +- packages/default/scss/slider/_variables.scss | 40 + .../default/scss/split-button/_layout.scss | 37 +- .../default/scss/split-button/_theme.scss | 13 +- .../default/scss/split-button/_variables.scss | 12 + packages/default/scss/splitter/_layout.scss | 192 +-- packages/default/scss/splitter/_theme.scss | 39 +- .../default/scss/splitter/_variables.scss | 22 + .../default/scss/spreadsheet/_layout.scss | 906 +---------- packages/default/scss/spreadsheet/_theme.scss | 212 +-- .../default/scss/spreadsheet/_variables.scss | 86 ++ .../default/scss/stacklayout/_layout.scss | 6 +- packages/default/scss/stacklayout/_theme.scss | 6 +- packages/default/scss/stepper/_layout.scss | 292 +--- packages/default/scss/stepper/_theme.scss | 239 +-- packages/default/scss/stepper/_variables.scss | 72 + packages/default/scss/switch/_layout.scss | 160 +- packages/default/scss/switch/_theme.scss | 170 +- packages/default/scss/switch/_variables.scss | 59 + packages/default/scss/table/_layout.scss | 289 +--- packages/default/scss/table/_theme.scss | 89 +- packages/default/scss/table/_variables.scss | 43 + packages/default/scss/tabstrip/_layout.scss | 495 +----- packages/default/scss/tabstrip/_theme.scss | 152 +- .../default/scss/tabstrip/_variables.scss | 65 + packages/default/scss/taskboard/_layout.scss | 218 +-- packages/default/scss/taskboard/_theme.scss | 112 +- .../default/scss/taskboard/_variables.scss | 78 + packages/default/scss/textarea/_layout.scss | 9 +- packages/default/scss/textarea/_theme.scss | 9 +- packages/default/scss/textbox/_layout.scss | 7 +- packages/default/scss/textbox/_theme.scss | 7 +- packages/default/scss/tilelayout/_layout.scss | 48 +- packages/default/scss/tilelayout/_theme.scss | 25 +- .../default/scss/tilelayout/_variables.scss | 13 + .../default/scss/time-marker/_layout.scss | 20 +- packages/default/scss/time-marker/_theme.scss | 22 +- .../default/scss/time-marker/_variables.scss | 5 + .../scss/timedurationpicker/_layout.scss | 13 +- .../scss/timedurationpicker/_theme.scss | 7 +- packages/default/scss/timeline/_layout.scss | 446 +----- packages/default/scss/timeline/_theme.scss | 73 +- .../default/scss/timeline/_variables.scss | 53 + packages/default/scss/timepicker/_layout.scss | 13 +- packages/default/scss/timepicker/_theme.scss | 7 +- .../default/scss/timeselector/_layout.scss | 261 +--- .../default/scss/timeselector/_theme.scss | 77 +- .../default/scss/timeselector/_variables.scss | 41 + packages/default/scss/toolbar/_layout.scss | 353 +---- packages/default/scss/toolbar/_theme.scss | 193 +-- packages/default/scss/toolbar/_variables.scss | 50 + packages/default/scss/tooltip/_functions.scss | 17 + packages/default/scss/tooltip/_layout.scss | 117 +- packages/default/scss/tooltip/_theme.scss | 37 +- packages/default/scss/tooltip/_variables.scss | 34 +- packages/default/scss/treelist/_layout.scss | 110 +- packages/default/scss/treelist/_theme.scss | 14 +- .../default/scss/treelist/_variables.scss | 5 + packages/default/scss/treeview/_layout.scss | 200 +-- packages/default/scss/treeview/_theme.scss | 83 +- .../default/scss/treeview/_variables.scss | 52 + packages/default/scss/typography/_layout.scss | 125 +- packages/default/scss/typography/_theme.scss | 25 +- .../default/scss/typography/_variables.scss | 80 + packages/default/scss/upload/_layout.scss | 249 +-- packages/default/scss/upload/_theme.scss | 106 +- packages/default/scss/upload/_variables.scss | 35 + packages/default/scss/validator/_layout.scss | 26 +- packages/default/scss/validator/_theme.scss | 7 +- .../scss/virtual-scroller/_layout.scss | 36 +- .../default/scss/virtual-scroller/_theme.scss | 7 +- packages/default/scss/window/_layout.scss | 174 +-- packages/default/scss/window/_theme.scss | 42 +- packages/default/scss/window/_variables.scss | 33 + packages/default/scss/wizard/_layout.scss | 125 +- packages/default/scss/wizard/_theme.scss | 13 +- packages/default/scss/wizard/_variables.scss | 13 + 324 files changed, 3958 insertions(+), 29167 deletions(-) create mode 100644 packages/default/scss/notification/_functions.scss create mode 100644 packages/default/scss/tooltip/_functions.scss diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index c208b0eea6c..345a6d90dee 100644 --- a/packages/default/scss/_variables.scss +++ b/packages/default/scss/_variables.scss @@ -1,17 +1,6 @@ -$kendo-enable-typography: false !default; - -$kendo-use-input-button-width: true !default; -$kendo-use-input-spinner-width: true !default; -$kendo-use-input-spinner-icon-offset: false !default; - $kendo-zindex-popup: 1 !default; $kendo-zindex-window: 2 !default; // TODO: refactor /// Box shadow of focused items. $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default; - -/// Transition used across all components. -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; - - diff --git a/packages/default/scss/action-buttons/_layout.scss b/packages/default/scss/action-buttons/_layout.scss index 10ba8eabff1..b5c41c37434 100644 --- a/packages/default/scss/action-buttons/_layout.scss +++ b/packages/default/scss/action-buttons/_layout.scss @@ -1,70 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-action-buttons--layout-base() { - - // Actions - .k-actions { - padding-block: $kendo-actions-padding-y; - padding-inline: $kendo-actions-padding-x; - box-sizing: border-box; - border-width: $kendo-actions-border-width 0 0 0; - border-style: solid; - border-color: inherit; - flex-shrink: 0; - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: $kendo-actions-button-spacing; - overflow: hidden; - // TODO: remove - clear: both; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Actions in popup - .k-popup .k-actions { - margin-top: $kendo-actions-margin-top; - } - - // Actions align - .k-actions-start { - justify-content: flex-start; - } - .k-actions-center { - justify-content: center; - } - .k-actions-end { - justify-content: flex-end; - } - .k-actions-stretched > * { - flex: 1 0 0%; - } - - - // Actions orientation - .k-actions-horizontal { - width: 100%; - flex-flow: row nowrap; - } - .k-actions-vertical { - flex-flow: column nowrap; - } - - - // Aliases - .k-edit-buttons, - .k-action-buttons, - .k-columnmenu-actions { - @extend .k-actions !optional; - } - -} +@use "@progress/kendo-theme-core/scss/components/action-buttons/_layout.scss" as *; @mixin kendo-action-buttons--layout() { diff --git a/packages/default/scss/action-buttons/_theme.scss b/packages/default/scss/action-buttons/_theme.scss index db9da03ea2b..8d84dc1f72a 100644 --- a/packages/default/scss/action-buttons/_theme.scss +++ b/packages/default/scss/action-buttons/_theme.scss @@ -1,19 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-action-buttons--theme-base() { - - // Actions - .k-actions { - @include fill( - $kendo-actions-text, - $kendo-actions-bg, - $kendo-actions-border, - $kendo-actions-gradient - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/action-buttons/_theme.scss" as *; @mixin kendo-action-buttons--theme() { diff --git a/packages/default/scss/action-buttons/_variables.scss b/packages/default/scss/action-buttons/_variables.scss index 8bfc817c5cd..8cca26cbebc 100644 --- a/packages/default/scss/action-buttons/_variables.scss +++ b/packages/default/scss/action-buttons/_variables.scss @@ -11,3 +11,15 @@ $kendo-actions-bg: null !default; $kendo-actions-text: null !default; $kendo-actions-border: null !default; $kendo-actions-gradient: null !default; + +@forward "@progress/kendo-theme-core/scss/components/action-buttons/_variables.scss" with ( + $kendo-actions-margin-top: $kendo-actions-margin-top, + $kendo-actions-padding-x: $kendo-actions-padding-x, + $kendo-actions-padding-y: $kendo-actions-padding-y, + $kendo-actions-border-width: $kendo-actions-border-width, + $kendo-actions-button-spacing: $kendo-actions-button-spacing, + $kendo-actions-bg: $kendo-actions-bg, + $kendo-actions-text: $kendo-actions-text, + $kendo-actions-border: $kendo-actions-border, + $kendo-actions-gradient: $kendo-actions-gradient +); diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss index 211466ed190..954a36f134e 100644 --- a/packages/default/scss/action-sheet/_layout.scss +++ b/packages/default/scss/action-sheet/_layout.scss @@ -1,400 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-action-sheet--layout-base() { - - // Action sheet container - .k-actionsheet-container { - width: 100%; - height: 100%; - max-width: clamp(100vw, 100%, 100%); - max-height: clamp(100vh, 100%, 100%); - position: fixed; - top: 0; - left: 0; - z-index: 9999; - overflow: hidden; - transform: translateZ(0); - - // Overlay - > .k-overlay { - position: absolute; - z-index: 1; - } - - // Nested animation container - > .k-animation-container { - width: 100%; - height: 100%; - border-radius: 0; - overflow: hidden; - position: absolute; - z-index: 2; - top: 0; - left: 0; - pointer-events: none; - - > .k-child-animation-container { - position: absolute; - } - } - - // No animation container - > .k-actionsheet { - position: absolute; - z-index: 2; - } - - // Enable mouse events for action sheet - .k-actionsheet { - pointer-events: all; - } - } - - - // Actionsheet - .k-actionsheet { - padding-block: $kendo-actionsheet-padding-y; - padding-inline: $kendo-actionsheet-padding-y; - width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} ); - height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} ); - max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} ); - max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} ); - border-width: 0; - border-style: solid; - border-color: transparent; - box-sizing: border-box; - font-size: $kendo-actionsheet-font-size; - font-family: $kendo-actionsheet-font-family; - line-height: $kendo-actionsheet-line-height; - overflow: hidden; - position: relative; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Actionsheet titlebar - .k-actionsheet-titlebar { - padding-block: $kendo-actionsheet-titlebar-padding-y; - padding-inline: $kendo-actionsheet-titlebar-padding-x; - border-width: 0; - border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null ); - border-style: solid; - border-color: transparent; - font-size: $kendo-actionsheet-titlebar-font-size; - font-family: $kendo-actionsheet-titlebar-font-family; - line-height: $kendo-actionsheet-titlebar-line-height; - flex: none; - display: flex; - flex-flow: column nowrap; - align-items: center; - gap: $kendo-actionsheet-titlebar-gap; - } - .k-actionsheet-titlebar-group { - display: flex; - flex-flow: row nowrap; - align-items: center; - width: 100%; - } - .k-actionsheet-title { - flex: 1; - } - .k-actionsheet-subtitle { - font-size: $kendo-actionsheet-subtitle-font-size; - line-height: $kendo-actionsheet-subtitle-line-height; - } - .k-actionsheet-actions { - flex: none; - } - - - // Actionsheet content - .k-actionsheet-content { - flex: 1; - overflow: auto; - position: relative; - } - - - // Actionsheet footer - .k-actionsheet-footer { - flex: none; - } - - - // Actionsheet items - .k-actionsheet-items { - margin: 0; - padding: 0; - list-style: none; - flex: none; - } - - - // Actionsheet item - .k-actionsheet-item { - padding: 0; - box-sizing: border-box; - display: flex; - flex-flow: row nowrap; - outline: none; - } - .k-actionsheet-action { - margin: 0; - padding-block: $kendo-actionsheet-item-padding-y; - padding-inline: $kendo-actionsheet-item-padding-x; - min-height: $kendo-actionsheet-item-min-height; - box-sizing: border-box; - color: inherit; - text-decoration: none; - outline: 0; - display: flex; - flex-flow: row nowrap; - align-items: flex-start; - gap: $kendo-actionsheet-item-spacing; - } - .k-actionsheet-item-text { - display: flex; - flex-flow: column nowrap; - } - .k-actionsheet-item-title { - font-weight: $kendo-actionsheet-item-title-font-weight; - text-transform: $kendo-actionsheet-item-title-text-transform; - } - .k-actionsheet-item-description { - font-size: $kendo-actionsheet-item-description-font-size; - } - - - // Actionsheet separator - .k-actionsheet .k-hr { - margin: 0; - flex: none; - } - - - // Action sheet position - .k-actionsheet-top { - @include border-bottom-radius( $kendo-actionsheet-border-radius ); - border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); - border-top-width: if( $kendo-actionsheet-border-width, 0, null ); - top: 0; - inset-inline-start: 50%; - transform: translateX( -50% ); - } - .k-actionsheet-bottom { - @include border-top-radius( $kendo-actionsheet-border-radius ); - border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); - border-bottom-width: if( $kendo-actionsheet-border-width, 0, null ); - bottom: 0; - inset-inline-start: 50%; - transform: translateX( -50% ); - } - .k-actionsheet-left { - @include border-right-radius( $kendo-actionsheet-border-radius ); - border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); - border-left-width: if( $kendo-actionsheet-border-width, 0, null ); - left: 0; - top: 50%; - transform: translateY( -50% ); - } - .k-actionsheet-right { - @include border-left-radius( $kendo-actionsheet-border-radius ); - border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null ); - border-right-width: if( $kendo-actionsheet-border-width, 0, null ); - right: 0; - top: 50%; - transform: translateY( -50% ); - } - .k-actionsheet-fullscreen { - width: 100%; - max-width: 100%; - max-height: 100%; - height: 100%; - } - - - // Action sheet in popup - .k-animation-container > .k-actionsheet { - top: auto; - right: auto; - bottom: auto; - left: auto; - transform: none; - } - - - // Adaptive action sheet - .k-adaptive-actionsheet { - max-width: 100%; - width: 100%; - font-size: $kendo-adaptive-actionsheet-font-size; - - // TMP: this should be moved to action sheet - display: flex; - flex-flow: column nowrap; - - .k-actionsheet-titlebar { - padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y; - padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x; - border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width; - } - - .k-actionsheet-content { - padding-block: $kendo-adaptive-actionsheet-content-padding-y; - padding-inline: $kendo-adaptive-actionsheet-content-padding-x; - } - - .k-actionsheet-footer { - padding-block: $kendo-adaptive-actionsheet-footer-padding-y; - padding-inline: $kendo-adaptive-actionsheet-footer-padding-x; - } - - .k-actionsheet-filter { - width: calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x} * 2 ); - } - .k-actionsheet-content, - .k-actionsheet-footer { - margin-inline: auto; - width: min(100%, 360px); - } - - .k-list-container, - .k-treeview { - height: 100%; - } - .k-list-filter { - width: 100%; - padding-inline: 0; - } - - .k-menu-group { - height: 100%; - overflow: auto; - position: static; - } - - .k-calendar { - margin-inline: auto; - border-width: 0; - display: flex; - } - - .k-timeselector { - height: 100%; - border-width: 0; - overflow: hidden; - - .k-time-part { - display: contents; - } - - .k-time-list-wrapper { - height: 100%; - } - } - - .k-datetime-wrap { - width: 100%; - height: 100%; - display: flex; - flex-flow: column nowrap; - } - .k-datetime-selector { - flex: 1 1 auto; - } - - .k-datetime-calendar-wrap { - width: 100%; - position: absolute; - top: 0; - left: 0; - bottom: 0; - flex: 0 0 100%; - } - - .k-datetime-time-wrap { - width: 100%; - position: absolute; - top: 0; - left: 100%; - bottom: 0; - flex: 0 0 100%; - } - - .k-scrollable-wrap { - height: 100%; - overflow-y: auto; - } - - .k-data-table { - max-height: 100%; - overflow: hidden; - display: flex; - flex-flow: column nowrap; - } - - .k-coloreditor { - min-width: 100%; - height: 100%; - border: 0; - overflow: auto; - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } - - .k-coloreditor-header { - padding: 0; - } - - .k-coloreditor-views { - padding-inline: 0; - } - } - - .k-colorgradient-canvas { - .k-hsv-gradient { - aspect-ratio: 1; - height: 100%; - } - } - } - - - // Legacy action sheet - // TODO: remove when kendo-jquery migrate - .k-actionsheet-jq { - &.k-actionsheet { - height: auto; - } - - .k-actionsheet-header { - @extend .k-actionsheet-titlebar !optional; - align-items: flex-start; - } - - .k-actionsheet-action { - align-items: center; - } - } - - // RTL - .k-rtl, - [dir="rtl"] { - .k-actionsheet-top, - .k-actionsheet-bottom { - transform: translateX( 50% ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/action-sheet/_layout.scss" as *; @mixin kendo-action-sheet--layout() { diff --git a/packages/default/scss/action-sheet/_theme.scss b/packages/default/scss/action-sheet/_theme.scss index 59d4404ff77..e8d2b47d172 100644 --- a/packages/default/scss/action-sheet/_theme.scss +++ b/packages/default/scss/action-sheet/_theme.scss @@ -1,103 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-action-sheet--theme-base() { - - // Actionsheet - .k-actionsheet { - @include fill( - $kendo-actionsheet-text, - $kendo-actionsheet-bg, - $kendo-actionsheet-border - ); - @include box-shadow( $kendo-actionsheet-shadow ); - } - - - // Actionsheet header - .k-actionsheet-titlebar { - @include fill( - $kendo-actionsheet-titlebar-text, - $kendo-actionsheet-titlebar-bg, - $kendo-actionsheet-titlebar-border, - $kendo-actionsheet-titlebar-gradient - ); - @include box-shadow( $kendo-actionsheet-titlebar-shadow ); - } - .k-actionsheet-subtitle { - @include fill( $color: $kendo-actionsheet-subtitle-text ); - } - - - // Actionsheet items - .k-actionsheet-items {} - - - // Actionsheet item - .k-actionsheet-item { - - - // Hover state - &:hover, - &.k-hover { - @include fill( - $kendo-actionsheet-item-hover-text, - $kendo-actionsheet-item-hover-bg, - $kendo-actionsheet-item-hover-border, - $kendo-actionsheet-item-hover-gradient - ); - @include box-shadow( $kendo-actionsheet-item-hover-shadow ); - } - - - // Focus state - &:focus, - &.k-focus { - @include fill( - $kendo-actionsheet-item-focus-text, - $kendo-actionsheet-item-focus-bg, - $kendo-actionsheet-item-focus-border, - $kendo-actionsheet-item-focus-gradient - ); - @include focus-indicator( $kendo-actionsheet-item-focus-shadow ); - } - - - // Disabled state - &:disabled, - &.k-disabled { - @include fill( - $kendo-actionsheet-item-disabled-text, - $kendo-actionsheet-item-disabled-bg, - $kendo-actionsheet-item-disabled-border, - $kendo-actionsheet-item-disabled-gradient - ); - @include box-shadow( $kendo-actionsheet-item-disabled-shadow ); - } - } - - - // Actionsheet item description - .k-actionsheet-item-description { - @include fill( $color: $kendo-actionsheet-item-description-text ); - } - - - // Actionsheet action - .k-actionsheet-action {} - - // Actionsheet separator - .k-actionsheet .k-hr { - border-color: $kendo-actionsheet-border; - } - - - // Adaptive Actionsheet - .k-adaptive-actionsheet .k-actionsheet-titlebar { - @include fill( $border: $kendo-adaptive-actionsheet-titlebar-border ); - } - -} +@use "@progress/kendo-theme-core/scss/components/action-sheet/_theme.scss" as *; @mixin kendo-action-sheet--theme() { diff --git a/packages/default/scss/action-sheet/_variables.scss b/packages/default/scss/action-sheet/_variables.scss index a48b626dc37..a81dcac65ed 100644 --- a/packages/default/scss/action-sheet/_variables.scss +++ b/packages/default/scss/action-sheet/_variables.scss @@ -89,3 +89,72 @@ $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default; $kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default; $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default; + +@forward "@progress/kendo-theme-core/scss/components/action-sheet/_variables.scss" with ( + $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x, + $kendo-actionsheet-padding-y: $kendo-actionsheet-padding-y, + $kendo-actionsheet-width: $kendo-actionsheet-width, + $kendo-actionsheet-max-width: $kendo-actionsheet-max-width, + $kendo-actionsheet-height: $kendo-actionsheet-height, + $kendo-actionsheet-max-height: $kendo-actionsheet-max-height, + $kendo-actionsheet-border-width: $kendo-actionsheet-border-width, + $kendo-actionsheet-border-radius: $kendo-actionsheet-border-radius, + $kendo-actionsheet-font-size: $kendo-actionsheet-font-size, + $kendo-actionsheet-font-family: $kendo-actionsheet-font-family, + $kendo-actionsheet-line-height: $kendo-actionsheet-line-height, + $kendo-actionsheet-bg: $kendo-actionsheet-bg, + $kendo-actionsheet-text: $kendo-actionsheet-text, + $kendo-actionsheet-border: $kendo-actionsheet-border, + $kendo-actionsheet-shadow: $kendo-actionsheet-shadow, + $kendo-actionsheet-titlebar-padding-x: $kendo-actionsheet-titlebar-padding-x, + $kendo-actionsheet-titlebar-padding-y: $kendo-actionsheet-titlebar-padding-y, + $kendo-actionsheet-titlebar-border-width: $kendo-actionsheet-titlebar-border-width, + $kendo-actionsheet-titlebar-font-size: $kendo-actionsheet-titlebar-font-size, + $kendo-actionsheet-titlebar-font-family: $kendo-actionsheet-titlebar-font-family, + $kendo-actionsheet-titlebar-line-height: $kendo-actionsheet-titlebar-line-height, + $kendo-actionsheet-titlebar-gap: $kendo-actionsheet-titlebar-gap, + $kendo-actionsheet-titlebar-bg: $kendo-actionsheet-titlebar-bg, + $kendo-actionsheet-titlebar-text: $kendo-actionsheet-titlebar-text, + $kendo-actionsheet-titlebar-border: $kendo-actionsheet-titlebar-border, + $kendo-actionsheet-titlebar-gradient: $kendo-actionsheet-titlebar-gradient, + $kendo-actionsheet-titlebar-shadow: $kendo-actionsheet-titlebar-shadow, + $kendo-actionsheet-subtitle-font-size: $kendo-actionsheet-subtitle-font-size, + $kendo-actionsheet-subtitle-line-height: $kendo-actionsheet-subtitle-line-height, + $kendo-actionsheet-subtitle-text: $kendo-actionsheet-subtitle-text, + $kendo-actionsheet-item-min-height: $kendo-actionsheet-item-min-height, + $kendo-actionsheet-item-padding-x: $kendo-actionsheet-item-padding-x, + $kendo-actionsheet-item-padding-y: $kendo-actionsheet-item-padding-y, + $kendo-actionsheet-item-border-width: $kendo-actionsheet-item-border-width, + $kendo-actionsheet-item-spacing: $kendo-actionsheet-item-spacing, + $kendo-actionsheet-item-title-font-weight: $kendo-actionsheet-item-title-font-weight, + $kendo-actionsheet-item-title-text-transform: $kendo-actionsheet-item-title-text-transform, + $kendo-actionsheet-item-description-font-size: $kendo-actionsheet-item-description-font-size, + $kendo-actionsheet-item-description-text: $kendo-actionsheet-item-description-text, + $kendo-actionsheet-item-hover-bg: $kendo-actionsheet-item-hover-bg, + $kendo-actionsheet-item-hover-text: $kendo-actionsheet-item-hover-text, + $kendo-actionsheet-item-hover-border: $kendo-actionsheet-item-hover-border, + $kendo-actionsheet-item-hover-gradient: $kendo-actionsheet-item-hover-gradient, + $kendo-actionsheet-item-hover-shadow: $kendo-actionsheet-item-hover-shadow, + $kendo-actionsheet-item-focus-bg: $kendo-actionsheet-item-focus-bg, + $kendo-actionsheet-item-focus-text: $kendo-actionsheet-item-focus-text, + $kendo-actionsheet-item-focus-border: $kendo-actionsheet-item-focus-border, + $kendo-actionsheet-item-focus-gradient: $kendo-actionsheet-item-focus-gradient, + $kendo-actionsheet-item-focus-shadow: $kendo-actionsheet-item-focus-shadow, + $kendo-actionsheet-item-disabled-bg: $kendo-actionsheet-item-disabled-bg, + $kendo-actionsheet-item-disabled-text: $kendo-actionsheet-item-disabled-text, + $kendo-actionsheet-item-disabled-border: $kendo-actionsheet-item-disabled-border, + $kendo-actionsheet-item-disabled-gradient: $kendo-actionsheet-item-disabled-gradient, + $kendo-actionsheet-item-disabled-shadow: $kendo-actionsheet-item-disabled-shadow, + $kendo-actionsheet-item-hover-background: $kendo-actionsheet-item-hover-background, + $kendo-actionsheet-item-focus-background: $kendo-actionsheet-item-focus-background, + $kendo-actionsheet-item-disabled-opacity: $kendo-actionsheet-item-disabled-opacity, + $kendo-adaptive-actionsheet-font-size: $kendo-adaptive-actionsheet-font-size, + $kendo-adaptive-actionsheet-titlebar-border-width: $kendo-adaptive-actionsheet-titlebar-border-width, + $kendo-adaptive-actionsheet-titlebar-padding-y: $kendo-adaptive-actionsheet-titlebar-padding-y, + $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-x, + $kendo-adaptive-actionsheet-titlebar-border: $kendo-adaptive-actionsheet-titlebar-border, + $kendo-adaptive-actionsheet-content-padding-y: $kendo-adaptive-actionsheet-content-padding-y, + $kendo-adaptive-actionsheet-content-padding-x: $kendo-adaptive-actionsheet-content-padding-x, + $kendo-adaptive-actionsheet-footer-padding-y: $kendo-adaptive-actionsheet-footer-padding-y, + $kendo-adaptive-actionsheet-footer-padding-x: $kendo-adaptive-actionsheet-footer-padding-x +); diff --git a/packages/default/scss/adaptive/_layout.scss b/packages/default/scss/adaptive/_layout.scss index 79d35fdd0da..1fcc635d639 100644 --- a/packages/default/scss/adaptive/_layout.scss +++ b/packages/default/scss/adaptive/_layout.scss @@ -1,482 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../toolbar/_variables.scss" as *; -@use "../listgroup/_variables.scss" as *; - -@mixin kendo-adaptive--layout-base() { - - .k-pane-wrapper { - border-width: $kendo-adaptive-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-adaptive-font-family; - font-size: $kendo-adaptive-font-size; - line-height: $kendo-adaptive-line-height; - display: block; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - .k-pane { - width: 100%; - height: 100%; - user-select: none; - box-sizing: border-box; - font-family: sans-serif; - overflow-x: hidden; - } - - .k-view { - top: 0; - left: 0; - position: relative; - border: 0; - box-sizing: border-box; - outline: 0; - font-family: $kendo-adaptive-font-family; - font-size: $kendo-adaptive-font-size; - line-height: $kendo-adaptive-line-height; - display: flex; - height: 100%; - width: 100%; - flex-direction: column; - align-items: stretch; - align-content: stretch; - vertical-align: top; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - } - - .k-content { - min-height: 1px; - flex: 1; - align-items: stretch; - display: block; - width: auto; - overflow: hidden; - position: relative; - } - } - - - - - // Grid specific styles - .k-pane-wrapper { // stylelint-disable-line - - > div.k-pane { - box-shadow: none; - font-weight: normal; - } - - .k-popup-edit-form, - .k-grid-edit-form, - .k-grid-header-menu, - .k-grid-filter-menu { - - .k-content { - overflow-y: auto; - - > .k-scroll-container { - position: absolute; - width: 100%; - min-height: 100%; - box-sizing: border-box; - } - } - } - - .k-grid-edit-form { - - .k-popup-edit-form, - .k-edit-form-container { - width: auto; - min-width: auto; - } - } - } - - .k-grid.k-grid-mobile { - border-width: 0; - } - - .k-grid-mobile { - .k-resize-handle-inner::before { - content: "\e01e"; - position: absolute; - font: 16px/1 "WebComponentsIcons"; // stylelint-disable-line - // The Calc is needed due to the the negative margin - // that removes the double bottom border of the header - top: calc(50% - 1px); - left: 50%; - transform: translate(-50%, -50%); - padding: .2em; - } - - .k-header a { - user-select: none; - } - } - - - - - // Scheduler specific styles - .k-pane-wrapper { // stylelint-disable-line - - .k-scheduler-edit-form { - - .k-recur-view { - padding: 0; - flex-direction: column; - align-items: stretch; - - > .k-listgroup-form-row { - margin: 0; - } - } - - .k-recur-items-wrap { - width: 100%; - margin-block: -1px; - margin-inline: 0; - } - - .k-scheduler-recur-end-wrap { - white-space: nowrap; - } - } - } - - .k-scheduler { - &.k-scheduler-mobile { - border-width: 0; - } - } - - .k-scheduler-mobile { - - th { - font-weight: normal; - } - - .k-event:hover .k-resize-handle { - visibility: hidden; - } - - .k-scheduler-toolbar { - padding-block: $kendo-toolbar-md-padding-y; - padding-inline: $kendo-toolbar-md-padding-x; - - > * { - margin: 0; - } - - &::before { - display: none; - } - - .k-scheduler-navigation { - width: 100%; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - margin: 0; - - .k-nav-current { - line-height: 1; - display: flex; - flex-flow: column nowrap; - align-items: center; - justify-content: space-evenly; - gap: 0; - } - } - - .k-scheduler-views-wrapper { - .k-views-dropdown { - display: inline-block; - } - } - } - - .k-scheduler-footer { - padding-block: $kendo-toolbar-md-padding-y; - padding-inline: $kendo-toolbar-md-padding-x; - display: flex; - justify-content: space-between; - - > * { - margin: 0; - } - - &::before { - display: none; - } - } - - .k-scheduler-monthview { - - .k-hidden { - height: 40px; - } - - .k-scheduler-table td { - height: 40px; - vertical-align: top; - text-align: center; - } - - .k-events-container { - position: absolute; - text-align: center; - height: 6px; - line-height: 6px; - } - - .k-event { - position: static; - padding: 4px; - border-radius: 50%; - display: inline-block; - width: 4px; - height: 4px; - min-height: 0; - margin: 1px; - } - } - - // Removing the "Days" header from the Mobile Scheduler will break the Web Scheduler - // Thus, the below selector is needed - .k-scheduler-dayview .k-mobile-header { - - &.k-mobile-horizontal-header .k-scheduler-times table tr:first-child { - display: none; - } - - .k-scheduler-header .k-scheduler-date-group { - display: none; - } - } - - .k-scheduler-header-wrap > div { - overflow: visible; - } - - .k-scheduler-agendaview { - .k-mobile-header { - display: none; - } - - .k-scheduler-table { - table-layout: auto; - - .k-scheduler-groupcolumn { - width: 1%; - } - - td { - white-space: normal; - } - } - } - - .k-mobile-header { - .k-scheduler-table td, - .k-scheduler-table th { - height: 1.5em; - } - } - - .k-time-text, - .k-time-period { - display: block; - line-height: 1; - } - - .k-time-period { - font-size: .7em; - } - - .k-scheduler-table td, - .k-scheduler-table th { - height: 2em; - vertical-align: middle; - } - - .k-scheduler-datecolumn-wrap { - display: flex; - align-items: center; - justify-content: space-between; - } - - .k-task { - display: flex; - align-items: center; - gap: .5em; - - .k-scheduler-mark { - border-radius: 50%; - margin: 0; - } - - .k-scheduler-task-text { - flex: 1 1 0%; - } - } - - .k-scheduler-times, - .k-scheduler-agenda { - - .k-scheduler-group-cell, - .k-scheduler-groupcolumn { - vertical-align: top; - - .k-scheduler-group-text { - writing-mode: vertical-lr; - transform: rotate(180deg); - white-space: nowrap; - } - } - } - - .k-scrollbar-h tr + tr .k-scheduler-times { - border-bottom-width: 0; - } - } - - - - - // Common styles for the Adaptive Layout - .k-pane-wrapper { // stylelint-disable-line - - .k-appbar { - padding: k-spacing(1); - } - - .k-list-title, - .k-filter-help-text { - padding-block: $kendo-listgroup-item-padding-y; - padding-inline: $kendo-listgroup-item-padding-x; - display: block; - } - - .k-listgroup-title { - padding-block: $kendo-listgroup-item-padding-y; - padding-inline: $kendo-listgroup-item-padding-x; - font-weight: bold; - text-transform: uppercase; - } - - .k-listgroup { - - .k-listgroup-item { - border-color: inherit; - } - } - .k-listgroup + .k-listgroup { - margin-top: k-spacing(4); - } - - // Column menu - .k-column-menu { - padding: k-spacing(2); - display: flex; - flex-flow: column nowrap; - gap: k-spacing(2); - - .k-filter-item .k-filterable * { - pointer-events: none; - } - - .k-list-title, - .k-listgroup-title { - padding: 0; - } - - .k-listgroup { - margin-inline: calc( #{k-spacing(2)} * -1 ); - } - } - - // Filter menu - .k-filter-menu { - padding: k-spacing(2); - display: flex; - flex-flow: column nowrap; - gap: k-spacing(2); - - .k-list-title { - padding: 0; - } - - .k-list-filter { - padding: 0; - display: flex; - flex-flow: column nowrap; - gap: inherit; - } - - .k-filter-tools { - display: flex; - flex-flow: row nowrap; - gap: inherit; - } - - .k-listgroup { - margin-inline: calc( #{k-spacing(2)} * -1 ); - } - } - - .k-popup-edit-form { - - .k-recur-editor-wrap { - display: flex; - } - - .k-mobiletimezoneeditor { - display: flex; - align-items: center; - justify-content: flex-end; - position: relative; - flex: 1 1 auto; - } - } - - .k-multicheck-wrap.k-listgroup { - overflow-y: auto; - } - - // Pager - .k-pager-wrap.k-pager-sm, - .k-pager.k-pager-sm { - justify-content: center; - - .k-pager-refresh { - display: none; - } - - } - } - - // RTL - :is(.k-rtl .k-pane-wrapper, [dir="rtl"] .k-pane-wrapper, .k-pane-wrapper[dir="rtl"]) { - .k-scheduler-mobile { - .k-scheduler-toolbar { - > ul > li { - border: 0; - } - } - - .k-task .k-i-reload { - margin-left: .5em; - margin-right: 0; - } - } - } -} +@use "@progress/kendo-theme-core/scss/components/adaptive/_layout.scss" as *; @mixin kendo-adaptive--layout() { diff --git a/packages/default/scss/adaptive/_theme.scss b/packages/default/scss/adaptive/_theme.scss index 66c47f81342..67ce73312da 100644 --- a/packages/default/scss/adaptive/_theme.scss +++ b/packages/default/scss/adaptive/_theme.scss @@ -1,102 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-adaptive--theme-base() { - - .k-pane-wrapper, - .k-view { - @include fill( - $kendo-adaptive-text, - $kendo-adaptive-bg, - $kendo-adaptive-border - ); - } - - .k-pane-wrapper .k-pane { - - > .k-view > .k-content { - background-position: 50% 50%; - background-color: $kendo-adaptive-content-bg; - } - - .k-grid-mobile { - - .k-column-active + th.k-header { - border-left-color: $kendo-body-text; - } - - .k-resize-handle-inner::before { - background-color: $kendo-base-bg; - } - } - - .k-scheduler-mobile { - - .k-nav-current { - color: $kendo-adaptive-scheduler-current-text; - } - - .k-scheduler-times, - .k-scheduler-header, - .k-scheduler-groupcolumn, - .k-mobile-scheduler-agendadate { - color: $kendo-adaptive-scheduler-base-text; - } - - .k-time-period, - .k-mobile-scheduler-agendaweekday { - color: $kendo-adaptive-scheduler-subtle-text; - } - - .k-scheduler-times, - .k-scheduler-header, - .k-scheduler-header-wrap, - .k-scheduler-datecolumn, - .k-scheduler-groupcolumn, - .k-scheduler-group-cell, - .k-scheduler-header-all-day { - background-color: $kendo-adaptive-content-bg; - } - - .k-scheduler-toolbar .k-scheduler-tools > li { - display: inline-block; - background-color: inherit; - } - } - - .k-grid-edit-form, - .k-grid-header-menu, - .k-grid-filter-menu, - .k-scheduler-edit-form { - - .k-item, - .k-link { - color: $kendo-base-text; - } - - .k-clear, - .k-select-all, - .k-scheduler-delete, - .k-scheduler-resetSeries { // stylelint-disable-line - color: $kendo-adaptive-menu-clear-text; - } - - } - - .k-column-menu { - - .k-listgroup-item.k-selected { - color: $kendo-adaptive-grid-sort-text; - background: none; - } - .k-listgroup-item.k-selected .k-link { - color: inherit; - } - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/adaptive/_theme.scss" as *; @mixin kendo-adaptive--theme() { diff --git a/packages/default/scss/adaptive/_variables.scss b/packages/default/scss/adaptive/_variables.scss index 6b4a1604b5c..acee3bc6652 100644 --- a/packages/default/scss/adaptive/_variables.scss +++ b/packages/default/scss/adaptive/_variables.scss @@ -31,3 +31,24 @@ $kendo-adaptive-grid-sort-text: $kendo-color-primary !default; $kendo-adaptive-scheduler-current-text: $kendo-color-primary !default; $kendo-adaptive-scheduler-base-text: inherit !default; $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default; + +@forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with ( + $kendo-adaptive-bg: $kendo-adaptive-bg, + $kendo-adaptive-text: $kendo-adaptive-text, + $kendo-adaptive-border: $kendo-adaptive-border, + $kendo-adaptive-content-bg: $kendo-adaptive-content-bg, + $kendo-adaptive-content-text: $kendo-adaptive-content-text, + $kendo-adaptive-menu-bg: $kendo-adaptive-menu-bg, + $kendo-adaptive-menu-text: $kendo-adaptive-menu-text, + $kendo-adaptive-menu-clear-text: $kendo-adaptive-menu-clear-text, + $kendo-adaptive-menu-item-border: $kendo-adaptive-menu-item-border, + $kendo-adaptive-menu-title-text: $kendo-adaptive-menu-title-text, + $kendo-adaptive-border-width: $kendo-adaptive-border-width, + $kendo-adaptive-font-family: $kendo-adaptive-font-family, + $kendo-adaptive-font-size: $kendo-adaptive-font-size, + $kendo-adaptive-line-height: $kendo-adaptive-line-height, + $kendo-adaptive-grid-sort-text: $kendo-adaptive-grid-sort-text, + $kendo-adaptive-scheduler-current-text: $kendo-adaptive-scheduler-current-text, + $kendo-adaptive-scheduler-base-text: $kendo-adaptive-scheduler-base-text, + $kendo-adaptive-scheduler-subtle-text: $kendo-adaptive-scheduler-subtle-text +); diff --git a/packages/default/scss/appbar/_layout.scss b/packages/default/scss/appbar/_layout.scss index 97c2285164f..2c63afa1dd4 100644 --- a/packages/default/scss/appbar/_layout.scss +++ b/packages/default/scss/appbar/_layout.scss @@ -1,118 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-appbar--layout-base() { - - // Appbar - .k-appbar { - margin-block: $kendo-appbar-margin-y; - margin-inline: $kendo-appbar-margin-x; - padding-block: $kendo-appbar-padding-y; - padding-inline: $kendo-appbar-padding-x; - border-width: $kendo-appbar-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-appbar-font-family; - font-size: $kendo-appbar-font-size; - line-height: $kendo-appbar-line-height; - list-style: none; - display: flex; - gap: $kendo-appbar-gap; - flex-flow: row wrap; - align-items: center; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - > * { - flex-shrink: 0; - } - - // Appbar section - .k-appbar-section { - display: inline-flex; - flex-wrap: nowrap; - align-items: center; - } - - - // Appbar Spacer - .k-appbar-spacer { - flex: 1 0 auto; - } - .k-appbar-spacer-sized { - flex-grow: 0; - } - - - // Separator - .k-appbar-separator { - margin: 0; - width: 0; - min-height: 1em; - border-style: solid; - border-width: 0 0 0 1px; - display: inline-block; - } - - - // Input - .k-input, - .k-picker { - width: 10em; - } - .k-color-picker { - width: min-content; - } - - } - - - // Static appbar - .k-appbar-static { - position: static; - } - - - // Sticky appbar - .k-appbar-sticky { - width: 100%; - position: sticky; - top: 0; - z-index: $kendo-appbar-zindex; - } - - - // Fixed appbar - .k-appbar-fixed { - width: 100%; - position: fixed; - z-index: 1; - } - - - // Appbar position - .k-appbar-top { - top: 0; - bottom: auto; - } - .k-appbar-bottom { - top: auto; - bottom: 0; - - &.k-appbar-fixed { - bottom: 0; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/appbar/_layout.scss" as *; @mixin kendo-appbar--layout() { diff --git a/packages/default/scss/appbar/_theme.scss b/packages/default/scss/appbar/_theme.scss index 2569eb10d22..88327180bed 100644 --- a/packages/default/scss/appbar/_theme.scss +++ b/packages/default/scss/appbar/_theme.scss @@ -1,34 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-appbar--theme-base() { - - .k-appbar { - @include box-shadow( $kendo-appbar-box-shadow ); - } - .k-appbar-bottom { - @include box-shadow( $kendo-appbar-bottom-box-shadow ); - } - - - // AppBar theme colors - @each $name, $color in $kendo-theme-colors { - .k-appbar-#{$name} { - @if $name == "light" { - color: $kendo-appbar-light-text; - background-color: $kendo-appbar-light-bg; - } @else if $name == "dark" { - color: $kendo-appbar-dark-text; - background-color: $kendo-appbar-dark-bg; - } @else { - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - background-color: $color; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/appbar/_theme.scss" as *; @mixin kendo-appbar--theme() { diff --git a/packages/default/scss/appbar/_variables.scss b/packages/default/scss/appbar/_variables.scss index 5c6fd64b4dd..8b1a676e7f7 100644 --- a/packages/default/scss/appbar/_variables.scss +++ b/packages/default/scss/appbar/_variables.scss @@ -55,3 +55,22 @@ $kendo-appbar-box-shadow: k-elevation(4) !default; /// The box shadow of the AppBar with bottom position. /// @group appbar $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default; + +@forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with ( + $kendo-appbar-margin-x: $kendo-appbar-margin-x, + $kendo-appbar-margin-y: $kendo-appbar-margin-y, + $kendo-appbar-padding-x: $kendo-appbar-padding-x, + $kendo-appbar-padding-y: $kendo-appbar-padding-y, + $kendo-appbar-border-width: $kendo-appbar-border-width, + $kendo-appbar-zindex: $kendo-appbar-zindex, + $kendo-appbar-font-family: $kendo-appbar-font-family, + $kendo-appbar-font-size: $kendo-appbar-font-size, + $kendo-appbar-line-height: $kendo-appbar-line-height, + $kendo-appbar-gap: $kendo-appbar-gap, + $kendo-appbar-light-bg: $kendo-appbar-light-bg, + $kendo-appbar-light-text: $kendo-appbar-light-text, + $kendo-appbar-dark-bg: $kendo-appbar-dark-bg, + $kendo-appbar-dark-text: $kendo-appbar-dark-text, + $kendo-appbar-box-shadow: $kendo-appbar-box-shadow, + $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow +); diff --git a/packages/default/scss/autocomplete/_layout.scss b/packages/default/scss/autocomplete/_layout.scss index 55bbdd32d7c..abe4d723e1d 100644 --- a/packages/default/scss/autocomplete/_layout.scss +++ b/packages/default/scss/autocomplete/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-autocomplete--layout-base() { - - // Autocomplete - .k-autocomplete {} - -} +@use "@progress/kendo-theme-core/scss/components/autocomplete/_layout.scss" as *; @mixin kendo-autocomplete--layout() { diff --git a/packages/default/scss/autocomplete/_theme.scss b/packages/default/scss/autocomplete/_theme.scss index e7f7f4779df..308a4c551eb 100644 --- a/packages/default/scss/autocomplete/_theme.scss +++ b/packages/default/scss/autocomplete/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-autocomplete--theme-base() { - - // Autocomplete - .k-autocomplete {} - -} +@use "@progress/kendo-theme-core/scss/components/autocomplete/_theme.scss" as *; @mixin kendo-autocomplete--theme() { diff --git a/packages/default/scss/avatar/_layout.scss b/packages/default/scss/avatar/_layout.scss index daab57a1bcf..fadb2ebfa9b 100644 --- a/packages/default/scss/avatar/_layout.scss +++ b/packages/default/scss/avatar/_layout.scss @@ -1,81 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-avatar--layout-base() { - - // Avatar - .k-avatar { - border-width: 0; - border-style: solid; - box-sizing: border-box; - vertical-align: middle; - display: inline-flex; - flex-flow: row nowrap; - justify-content: center; - align-items: center; - flex-shrink: 0; - overflow: hidden; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Avatar text - .k-avatar-text, - .k-avatar-initials { - font-size: $kendo-avatar-font-size; - font-family: $kendo-avatar-font-family; - line-height: $kendo-avatar-line-height; - } - - - // Avatar icon - .k-avatar-icon { - display: flex; - flex-flow: row nowrap; - align-items: center; - } - - - // Avatar image - .k-avatar-image { - width: 100%; - height: 100%; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - - > img { - width: 100%; - height: 100%; - object-fit: cover; - vertical-align: top; - } - } - - - // Sizes - @each $name, $size in $kendo-avatar-sizes { - .k-avatar-#{$name} { - width: $size; - height: $size; - flex-basis: $size; - } - } - - // Shapes - .k-avatar-square {} - - // Bordered - .k-avatar-bordered { - border-width: $kendo-avatar-border-width; - } - - -} +@use "@progress/kendo-theme-core/scss/components/avatar/_layout.scss" as *; @mixin kendo-avatar--layout() { diff --git a/packages/default/scss/avatar/_theme.scss b/packages/default/scss/avatar/_theme.scss index db1a71ba021..06cc19355cf 100644 --- a/packages/default/scss/avatar/_theme.scss +++ b/packages/default/scss/avatar/_theme.scss @@ -1,30 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-avatar--theme-base() { - - // Solid Avatars - @each $name, $color in $kendo-avatar-theme-colors { - .k-avatar-solid-#{$name} { - border-color: $color; - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - background-color: $color; - } - } - - // Outline avatars - .k-avatar-outline { - border-color: currentColor; - } - - @each $name, $color in $kendo-avatar-theme-colors { - .k-avatar-outline-#{$name} { - color: $color; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/avatar/_theme.scss" as *; @mixin kendo-avatar--theme() { diff --git a/packages/default/scss/avatar/_variables.scss b/packages/default/scss/avatar/_variables.scss index ab08924b1e4..77dfaf594a5 100644 --- a/packages/default/scss/avatar/_variables.scss +++ b/packages/default/scss/avatar/_variables.scss @@ -26,3 +26,12 @@ $kendo-avatar-sizes: ( /// The theme colors map of the Avatar. /// @group avatar $kendo-avatar-theme-colors: $kendo-theme-colors !default; + +@forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with ( + $kendo-avatar-border-width: $kendo-avatar-border-width, + $kendo-avatar-font-family: $kendo-avatar-font-family, + $kendo-avatar-font-size: $kendo-avatar-font-size, + $kendo-avatar-line-height: $kendo-avatar-line-height, + $kendo-avatar-sizes: $kendo-avatar-sizes, + $kendo-avatar-theme-colors: $kendo-avatar-theme-colors +); diff --git a/packages/default/scss/badge/_layout.scss b/packages/default/scss/badge/_layout.scss index 9f41683033f..995495f5afc 100644 --- a/packages/default/scss/badge/_layout.scss +++ b/packages/default/scss/badge/_layout.scss @@ -1,152 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; -@use "sass:map"; - -@mixin kendo-badge--layout-base() { - - .k-badge { - padding: 0; - border-width: $kendo-badge-border-width; - border-style: solid; - border-color: transparent; - box-sizing: border-box; - color: inherit; - background-color: transparent; - font: inherit; - text-align: center; - white-space: nowrap; - display: inline-flex; - align-items: center; - justify-content: center; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - .k-badge > * { - color: inherit; - } - - - // Links - a.k-badge, - .k-badge > a { - text-decoration: none; - } - a.k-badge:hover, - .k-badge > a:hover { - text-decoration: underline; - } - - - // Icon - .k-badge-icon { - max-width: 1em; - max-height: 1em; - font-size: inherit; - } - .k-badge-icon.k-svg-icon svg { - fill: currentColor; - } - - - // Badge sizes - @each $size, $size-props in $kendo-badge-sizes { - $_padding-x: map.get( $size-props, padding-x ); - $_padding-y: map.get( $size-props, padding-y ); - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_min-width: map.get( $size-props, min-width ); - - .k-badge-#{$size} { - padding-block: $_padding-y; - padding-inline: $_padding-x; - font-size: $_font-size; - line-height: $_line-height; - min-width: $_min-width; - - &:empty { - padding: $_padding-y; - min-width: auto; - } - } - } - - kendo-badge-container { - display: inline-block; - } - - // Badge position - .k-badge-container { - position: relative; - overflow: visible; - } - @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) { - - .k-badge-#{$placement} { - position: absolute; - z-index: 9999; - - &.k-top-start { - @if $translate { - transform: translate( -1% * $translate, -1% * $translate ); - } - } - &.k-top-end { - @if $translate { - transform: translate( 1% * $translate, -1% * $translate ); - } - } - &.k-bottom-start { - @if $translate { - transform: translate( -1% * $translate, 1% * $translate ); - } - } - &.k-bottom-end { - @if $translate { - transform: translate( 1% * $translate, 1% * $translate ); - } - } - } - - .k-rtl .k-badge-#{$placement}, - [dir="rtl"].k-badge-#{$placement}, - [dir="rtl"] .k-badge-#{$placement} { - &.k-top-start { - @if $translate { - transform: translate( 1% * $translate, -1% * $translate ); - } - } - &.k-top-end { - @if $translate { - transform: translate( -1% * $translate, -1% * $translate ); - } - } - &.k-bottom-start { - @if $translate { - transform: translate( 1% * $translate, 1% * $translate ); - } - } - &.k-bottom-end { - @if $translate { - transform: translate( -1% * $translate, 1% * $translate ); - } - } - } - } - - - // Border cutout - .k-badge-border-cutout { - box-shadow: 0 0 0 2px $kendo-component-bg; - } - -} +@use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *; @mixin kendo-badge--layout() { diff --git a/packages/default/scss/badge/_theme.scss b/packages/default/scss/badge/_theme.scss index b4fed23c4d4..005813cdc52 100644 --- a/packages/default/scss/badge/_theme.scss +++ b/packages/default/scss/badge/_theme.scss @@ -1,30 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; - -@mixin kendo-badge--theme-base() { - - // Solid badges - @each $name, $color in $kendo-theme-colors { - .k-badge-solid-#{$name} { - border-color: $color; - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - background-color: $color; - } - } - - // Outline badges - .k-badge-outline { - border-color: currentColor; - background-color: transparent; - } - - @each $name, $color in $kendo-theme-colors { - .k-badge-outline-#{$name} { - color: $color; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/badge/_theme.scss" as *; @mixin kendo-badge--theme() { diff --git a/packages/default/scss/badge/_variables.scss b/packages/default/scss/badge/_variables.scss index 6b48f47a79a..dea4dd4dfcf 100644 --- a/packages/default/scss/badge/_variables.scss +++ b/packages/default/scss/badge/_variables.scss @@ -101,3 +101,29 @@ $kendo-badge-sizes: ( min-width: $kendo-badge-lg-min-width ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with ( + $kendo-badge-border-width: $kendo-badge-border-width, + $kendo-badge-border-radius: $kendo-badge-border-radius, + $kendo-badge-padding-x: $kendo-badge-padding-x, + $kendo-badge-sm-padding-x: $kendo-badge-sm-padding-x, + $kendo-badge-md-padding-x: $kendo-badge-md-padding-x, + $kendo-badge-lg-padding-x: $kendo-badge-lg-padding-x, + $kendo-badge-padding-y: $kendo-badge-padding-y, + $kendo-badge-sm-padding-y: $kendo-badge-sm-padding-y, + $kendo-badge-md-padding-y: $kendo-badge-md-padding-y, + $kendo-badge-lg-padding-y: $kendo-badge-lg-padding-y, + $kendo-badge-font-size: $kendo-badge-font-size, + $kendo-badge-sm-font-size: $kendo-badge-sm-font-size, + $kendo-badge-md-font-size: $kendo-badge-md-font-size, + $kendo-badge-lg-font-size: $kendo-badge-lg-font-size, + $kendo-badge-line-height: $kendo-badge-line-height, + $kendo-badge-sm-line-height: $kendo-badge-sm-line-height, + $kendo-badge-md-line-height: $kendo-badge-md-line-height, + $kendo-badge-lg-line-height: $kendo-badge-lg-line-height, + $kendo-badge-min-width: $kendo-badge-min-width, + $kendo-badge-sm-min-width: $kendo-badge-sm-min-width, + $kendo-badge-md-min-width: $kendo-badge-md-min-width, + $kendo-badge-lg-min-width: $kendo-badge-lg-min-width, + $kendo-badge-sizes: $kendo-badge-sizes +); diff --git a/packages/default/scss/bottom-navigation/_layout.scss b/packages/default/scss/bottom-navigation/_layout.scss index 32a06eab58c..e1d6f5dab6e 100644 --- a/packages/default/scss/bottom-navigation/_layout.scss +++ b/packages/default/scss/bottom-navigation/_layout.scss @@ -1,120 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-bottom-navigation--layout-base() { - - // Bottom Navigation - .k-bottom-nav { - padding-block: $kendo-bottom-nav-padding-y; - padding-inline: $kendo-bottom-nav-padding-x; - width: 100%; - border-width: 0; - border-style: solid; - border-color: transparent; - box-sizing: border-box; - font-size: $kendo-bottom-nav-font-size; - line-height: $kendo-bottom-nav-line-height; - font-family: $kendo-bottom-nav-font-family; - letter-spacing: $kendo-bottom-nav-letter-spacing; - display: flex; - flex-flow: row nowrap; - white-space: nowrap; - gap: $kendo-bottom-nav-gap; - overflow: hidden; - outline: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - .k-bottom-nav-border { - border-width: $kendo-bottom-nav-border-width; - } - - // TODO: do we even use this? - .k-bottom-nav-shadow { - box-shadow: $kendo-bottom-nav-shadow; - } - - // Items - .k-bottom-nav-item { - padding-block: $kendo-bottom-nav-item-padding-y; - padding-inline: $kendo-bottom-nav-item-padding-x; - min-width: $kendo-bottom-nav-item-min-width; - max-width: $kendo-bottom-nav-item-max-width; - min-height: $kendo-bottom-nav-item-min-height; - border-width: 0; - border-radius: $kendo-bottom-nav-item-border-radius; - box-sizing: border-box; - font: inherit; - display: inline-flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - gap: $kendo-bottom-nav-item-gap; - text-decoration: none; - cursor: pointer; - color: inherit; - background-color: inherit; - border-color: inherit; - outline: none; - - &:focus { - outline: none; - } - - &:hover { - color: inherit; - text-decoration: none; - } - - > .k-bottom-nav-link { - margin-block: calc( #{$kendo-bottom-nav-item-padding-y} * -1 ); - margin-inline: calc( #{$kendo-bottom-nav-item-padding-x} * -1 ); - padding-block: $kendo-bottom-nav-item-padding-y; - padding-inline: $kendo-bottom-nav-item-padding-x; - width: 100%; - color: inherit; - display: flex; - flex-flow: row nowrap; - flex: 1 0 auto; - align-items: center; - justify-content: center; - outline: 0; - } - } - .k-bottom-nav-item.k-disabled { - background-color: initial; - } - - .k-bottom-nav-item-text { - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - } - - // Horizontal Item Layout - .k-bottom-nav-item-flow-horizontal .k-bottom-nav-item { - flex-flow: row nowrap; - } - - // Vertical Item Layout - .k-bottom-nav-item-flow-vertical .k-bottom-nav-item { - flex-direction: column; - } - - // Positioning - .k-bottom-nav.k-pos-fixed { - bottom: 0; - z-index: 1; - } - -} +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *; @mixin kendo-bottom-navigation--layout() { diff --git a/packages/default/scss/bottom-navigation/_theme.scss b/packages/default/scss/bottom-navigation/_theme.scss index 98edf90a7af..8bb64726b24 100644 --- a/packages/default/scss/bottom-navigation/_theme.scss +++ b/packages/default/scss/bottom-navigation/_theme.scss @@ -1,60 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-bottom-navigation--theme-base() { - - // Solid - @each $name, $color in $kendo-theme-colors { - .k-bottom-nav-solid-#{$name} { - @include fill( - $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)), - $bg: $color - ); - - .k-bottom-nav-item.k-focus, - .k-bottom-nav-item:focus { - @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2))); - } - - .k-bottom-nav-item.k-selected { - @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) ); - } - } - // TODO: remove when suites update class names - .k-bottom-nav-solid.k-bottom-nav-#{$name} { - @extend .k-bottom-nav-solid-#{$name} !optional; - } - } - - // Flat - @each $name, $color in $kendo-theme-colors { - .k-bottom-nav-flat-#{$name} { - @include fill( - $kendo-bottom-nav-flat-text, - $kendo-bottom-nav-flat-bg, - $kendo-bottom-nav-flat-border - ); - - .k-bottom-nav-item.k-focus, - .k-bottom-nav-item:focus { - @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) ); - } - - .k-bottom-nav-item.k-selected { - @if $name == "secondary" or $name == "light" { - @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) ); - } @else { - @include fill( $color: $color ); - } - } - } - .k-bottom-nav-flat.k-bottom-nav-#{$name} { - @extend .k-bottom-nav-flat-#{$name} !optional; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *; @mixin kendo-bottom-navigation--theme() { diff --git a/packages/default/scss/bottom-navigation/_variables.scss b/packages/default/scss/bottom-navigation/_variables.scss index ce21282f30f..05111a7dcbf 100644 --- a/packages/default/scss/bottom-navigation/_variables.scss +++ b/packages/default/scss/bottom-navigation/_variables.scss @@ -63,3 +63,25 @@ $kendo-bottom-nav-flat-bg: $kendo-component-bg !default; /// The border color of the flat BottomNavigation. /// @group bottom-navigation $kendo-bottom-nav-flat-border: $kendo-component-border !default; + +@forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with ( + $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x, + $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y, + $kendo-bottom-nav-gap: $kendo-bottom-nav-gap, + $kendo-bottom-nav-border-width: $kendo-bottom-nav-border-width, + $kendo-bottom-nav-font-family: $kendo-bottom-nav-font-family, + $kendo-bottom-nav-font-size: $kendo-bottom-nav-font-size, + $kendo-bottom-nav-line-height: $kendo-bottom-nav-line-height, + $kendo-bottom-nav-letter-spacing: $kendo-bottom-nav-letter-spacing, + $kendo-bottom-nav-item-padding-x: $kendo-bottom-nav-item-padding-x, + $kendo-bottom-nav-item-padding-y: $kendo-bottom-nav-item-padding-y, + $kendo-bottom-nav-item-min-width: $kendo-bottom-nav-item-min-width, + $kendo-bottom-nav-item-max-width: $kendo-bottom-nav-item-max-width, + $kendo-bottom-nav-item-min-height: $kendo-bottom-nav-item-min-height, + $kendo-bottom-nav-item-border-radius: $kendo-bottom-nav-item-border-radius, + $kendo-bottom-nav-item-gap: $kendo-bottom-nav-item-gap, + $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow, + $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text, + $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg, + $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border +); diff --git a/packages/default/scss/breadcrumb/_layout.scss b/packages/default/scss/breadcrumb/_layout.scss index 9ec6ad86954..96a7a9dcf19 100644 --- a/packages/default/scss/breadcrumb/_layout.scss +++ b/packages/default/scss/breadcrumb/_layout.scss @@ -1,136 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-breadcrumb--layout-base() { - - // Breadcrumb - .k-breadcrumb { - margin-block: $kendo-breadcrumb-margin-y; - margin-inline: $kendo-breadcrumb-margin-x; - padding-block: $kendo-breadcrumb-padding-y; - padding-inline: $kendo-breadcrumb-padding-x; - border-width: $kendo-breadcrumb-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-breadcrumb-font-family; - display: flex; - flex-direction: row; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Breadcrumb container - .k-breadcrumb-container, - .k-breadcrumb-root-item-container { - margin: 0; - padding: 0; - list-style: none; - display: flex; - flex-flow: row nowrap; - overflow: hidden; - } - - .k-breadcrumb-root-item-container { - align-items: flex-start; - flex-shrink: 0; - } - - - // Breadcrumb item - .k-breadcrumb-item { - vertical-align: middle; - display: inline-flex; - flex-direction: row; - flex: none; - align-items: center; - overflow: hidden; - } - - - // Breadcrumb root item - .k-breadcrumb-root-item { - flex-shrink: 0; - } - - - // Breadcrumb links - .k-breadcrumb-link, - .k-breadcrumb-root-link { - @include border-radius( $kendo-breadcrumb-link-border-radius ); - color: $kendo-breadcrumb-link-initial-text; - text-decoration: none; - white-space: nowrap; - outline: none; - cursor: pointer; - position: relative; - display: inline-flex; - align-items: center; - align-self: stretch; - overflow: hidden; - transition: $kendo-transition; - } - - .k-breadcrumb-link > .k-image, - .k-breadcrumb-icontext-link .k-icon { - margin-inline-end: $kendo-breadcrumb-link-icon-spacing; - } - - - // Breadcrumb delimiter - .k-breadcrumb-delimiter, - .k-breadcrumb-delimiter-icon { - color: inherit; - opacity: $kendo-disabled-opacity; - } - - - // Editing - .k-breadcrumb-input-container { - width: 100%; - - .k-breadcrumb-input-container { - border-color: transparent; - } - } - - - // Sizes - @each $size, $size-props in $kendo-breadcrumb-sizes { - $_link-padding-x: map.get( $size-props, link-padding-x ); - $_link-padding-y: map.get( $size-props, link-padding-y ); - $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x ); - $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y ); - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - - .k-breadcrumb-#{$size} { - font-size: $_font-size; - line-height: $_line-height; - - - .k-breadcrumb-link, - .k-breadcrumb-root-link { - padding-block: $_link-padding-y; - padding-inline: $_link-padding-x; - } - - .k-breadcrumb-icon-link { - padding-block: $_icon-link-padding-y; - padding-inline: $_icon-link-padding-x; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_layout.scss" as *; @mixin kendo-breadcrumb--layout() { diff --git a/packages/default/scss/breadcrumb/_theme.scss b/packages/default/scss/breadcrumb/_theme.scss index 84082186a77..5b0a91c64b0 100644 --- a/packages/default/scss/breadcrumb/_theme.scss +++ b/packages/default/scss/breadcrumb/_theme.scss @@ -1,103 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-breadcrumb--theme-base() { - - // Breadcrumb - .k-breadcrumb { - @include fill( - $kendo-breadcrumb-text, - $kendo-breadcrumb-bg, - $kendo-breadcrumb-border - ); - - &:focus, - &.k-focus { - @include box-shadow( $kendo-breadcrumb-focus-shadow ); - } - } - - - // Breadcrumb link - .k-breadcrumb-link { - @include fill( - $kendo-breadcrumb-link-text, - $kendo-breadcrumb-link-bg, - $kendo-breadcrumb-link-border - ); - - // Hovered state - &:hover, - &.k-hover { - @include fill( - $kendo-breadcrumb-link-hover-text, - $kendo-breadcrumb-link-hover-bg, - $kendo-breadcrumb-link-hover-border - ); - } - - // Focused state - &:focus, - &.k-focus { - @include fill( - $kendo-breadcrumb-link-focus-text, - $kendo-breadcrumb-link-focus-bg, - $kendo-breadcrumb-link-focus-border - ); - @include focus-indicator( $kendo-breadcrumb-link-focus-shadow ); - } - } - - - // Breadcrumb root link - .k-breadcrumb-root-link { - @include fill( - $kendo-breadcrumb-root-link-text, - $kendo-breadcrumb-root-link-bg, - $kendo-breadcrumb-root-link-border - ); - - // Hovered state - &:hover, - &.k-hover { - @include fill( - $kendo-breadcrumb-root-link-hover-text, - $kendo-breadcrumb-root-link-hover-bg, - $kendo-breadcrumb-root-link-hover-border - ); - } - - // Focused state - &:focus, - &.k-focus { - @include fill( - $kendo-breadcrumb-root-link-focus-text, - $kendo-breadcrumb-root-link-focus-bg, - $kendo-breadcrumb-root-link-focus-border - ); - @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow ); - } - } - - - // Breadcrumb current (last) item - .k-breadcrumb-current-item { - .k-breadcrumb-link { - @include fill( - $kendo-breadcrumb-current-item-text, - $kendo-breadcrumb-current-item-bg, - $kendo-breadcrumb-current-item-border - ); - } - } - - - // Alias - .k-breadcrumb-last-item { - @extend .k-breadcrumb-current-item !optional; - } - -} +@use "@progress/kendo-theme-core/scss/components/breadcrumb/_theme.scss" as *; @mixin kendo-breadcrumb--theme() { diff --git a/packages/default/scss/breadcrumb/_variables.scss b/packages/default/scss/breadcrumb/_variables.scss index a6cf5c5b6a8..d2eb1158000 100644 --- a/packages/default/scss/breadcrumb/_variables.scss +++ b/packages/default/scss/breadcrumb/_variables.scss @@ -231,3 +231,67 @@ $kendo-breadcrumb-sizes: ( line-height: $kendo-breadcrumb-lg-line-height ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/breadcrumb/_variables.scss" with ( + $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width, + $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x, + $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y, + $kendo-breadcrumb-padding-x: $kendo-breadcrumb-padding-x, + $kendo-breadcrumb-padding-y: $kendo-breadcrumb-padding-y, + $kendo-breadcrumb-font-family: $kendo-breadcrumb-font-family, + $kendo-breadcrumb-font-size: $kendo-breadcrumb-font-size, + $kendo-breadcrumb-sm-font-size: $kendo-breadcrumb-sm-font-size, + $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-md-font-size, + $kendo-breadcrumb-lg-font-size: $kendo-breadcrumb-lg-font-size, + $kendo-breadcrumb-line-height: $kendo-breadcrumb-line-height, + $kendo-breadcrumb-sm-line-height: $kendo-breadcrumb-sm-line-height, + $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-md-line-height, + $kendo-breadcrumb-lg-line-height: $kendo-breadcrumb-lg-line-height, + $kendo-breadcrumb-bg: $kendo-breadcrumb-bg, + $kendo-breadcrumb-text: $kendo-breadcrumb-text, + $kendo-breadcrumb-border: $kendo-breadcrumb-border, + $kendo-breadcrumb-focus-shadow: $kendo-breadcrumb-focus-shadow, + $kendo-breadcrumb-link-padding-x: $kendo-breadcrumb-link-padding-x, + $kendo-breadcrumb-sm-link-padding-x: $kendo-breadcrumb-sm-link-padding-x, + $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-md-link-padding-x, + $kendo-breadcrumb-lg-link-padding-x: $kendo-breadcrumb-lg-link-padding-x, + $kendo-breadcrumb-link-padding-y: $kendo-breadcrumb-link-padding-y, + $kendo-breadcrumb-sm-link-padding-y: $kendo-breadcrumb-sm-link-padding-y, + $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-md-link-padding-y, + $kendo-breadcrumb-lg-link-padding-y: $kendo-breadcrumb-lg-link-padding-y, + $kendo-breadcrumb-link-border-radius: $kendo-breadcrumb-link-border-radius, + $kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y, + $kendo-breadcrumb-sm-icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, + $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, + $kendo-breadcrumb-lg-icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, + $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x, + $kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, + $kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, + $kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, + $kendo-breadcrumb-link-initial-text: $kendo-breadcrumb-link-initial-text, + $kendo-breadcrumb-link-icon-spacing: $kendo-breadcrumb-link-icon-spacing, + $kendo-breadcrumb-link-bg: $kendo-breadcrumb-link-bg, + $kendo-breadcrumb-link-text: $kendo-breadcrumb-link-text, + $kendo-breadcrumb-link-border: $kendo-breadcrumb-link-border, + $kendo-breadcrumb-link-hover-bg: $kendo-breadcrumb-link-hover-bg, + $kendo-breadcrumb-link-hover-text: $kendo-breadcrumb-link-hover-text, + $kendo-breadcrumb-link-hover-border: $kendo-breadcrumb-link-hover-border, + $kendo-breadcrumb-link-focus-bg: $kendo-breadcrumb-link-focus-bg, + $kendo-breadcrumb-link-focus-text: $kendo-breadcrumb-link-focus-text, + $kendo-breadcrumb-link-focus-border: $kendo-breadcrumb-link-focus-border, + $kendo-breadcrumb-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow, + $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-root-link-bg, + $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-root-link-text, + $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-root-link-border, + $kendo-breadcrumb-root-link-hover-bg: $kendo-breadcrumb-root-link-hover-bg, + $kendo-breadcrumb-root-link-hover-text: $kendo-breadcrumb-root-link-hover-text, + $kendo-breadcrumb-root-link-hover-border: $kendo-breadcrumb-root-link-hover-border, + $kendo-breadcrumb-root-link-focus-bg: $kendo-breadcrumb-root-link-focus-bg, + $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-root-link-focus-text, + $kendo-breadcrumb-root-link-focus-border: $kendo-breadcrumb-root-link-focus-border, + $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-root-link-focus-shadow, + $kendo-breadcrumb-current-item-bg: $kendo-breadcrumb-current-item-bg, + $kendo-breadcrumb-current-item-text: $kendo-breadcrumb-current-item-text, + $kendo-breadcrumb-current-item-border: $kendo-breadcrumb-current-item-border, + $kendo-breadcrumb-sizes: $kendo-breadcrumb-sizes +); diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss index 66fdc710e3e..5dab0629e12 100644 --- a/packages/default/scss/button/_layout.scss +++ b/packages/default/scss/button/_layout.scss @@ -1,355 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-button--layout-base() { - - // Button - .k-button { - box-sizing: border-box; - border-width: $kendo-button-border-width; - border-style: solid; - border-radius: $kendo-button-border-radius; - color: inherit; - background: none; - font-family: $kendo-button-font-family; - text-align: center; - text-decoration: none; - white-space: nowrap; - display: inline-flex; - align-items: center; - justify-content: center; - gap: $kendo-icon-spacing; - vertical-align: middle; - user-select: none; - cursor: pointer; - outline: none; - -webkit-appearance: none; - position: relative; - transition: $kendo-button-transition; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - &:disabled, - &.k-disabled { - @include disabled( $kendo-disabled-styling... ); - } - - &::-moz-focus-inner { - padding: 0; - border: 0; - outline: 0; - } - - &:hover, - &:focus { - text-decoration: none; - outline: 0; - } - } - - - // Icon Button - .k-icon-button { - gap: 0; - - .k-icon { - display: inline-flex; - } - } - - - // Content - .k-button-icon { - color: inherit; - align-self: center; - position: relative; - } - - .k-button-text {} - - - // Sizes - @each $size, $size-props in $kendo-button-sizes { - $_padding-x: map.get( $size-props, padding-x ); - $_padding-y: map.get( $size-props, padding-y ); - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - - .k-button-#{$size} { - padding-block: $_padding-y; - padding-inline: $_padding-x; - font-size: $_font-size; - line-height: $_line-height; - } - - .k-button-#{$size}.k-icon-button { - padding: $_padding-y; - - .k-button-icon { - min-width: calc( #{$_font-size} * #{$_line-height} ); - min-height: calc( #{$_font-size} * #{$_line-height} ); - display: inline-flex; - align-items: center; - justify-content: center; - - &.k-svg-icon > svg, - &.k-icon-md > svg { - width: $kendo-icon-size-md; - height: $kendo-icon-size-md; - } - - &.k-icon-xs > svg { - width: $kendo-icon-size-xs; - height: $kendo-icon-size-xs; - } - - &.k-icon-sm > svg { - width: $kendo-icon-size-sm; - height: $kendo-icon-size-sm; - } - - &.k-icon-lg > svg { - width: $kendo-icon-size-lg; - height: $kendo-icon-size-lg; - } - - &.k-icon-xl > svg { - width: $kendo-icon-size-xl; - height: $kendo-icon-size-xl; - } - - &.k-icon-xxl > svg { - width: $kendo-icon-size-xxl; - height: $kendo-icon-size-xxl; - } - - &.k-icon-xxxl > svg { - width: $kendo-icon-size-xxxl; - height: $kendo-icon-size-xxxl; - } - } - } - } - - - // Button shape - .k-button-square { - aspect-ratio: 1; - } - - - // Button group - .k-button-group { - margin: 0; - padding: 0; - border-width: 0; - box-sizing: border-box; - list-style: none; - outline: 0; - display: inline-flex; - flex-flow: row nowrap; - vertical-align: middle; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - > .k-button + .k-button { - margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width ); - } - - > .k-button:hover, - > .k-button.k-hover, - > .k-button:focus, - > .k-button.k-focus, - > .k-button:active, - > .k-button.k-active, - > .k-button.k-selected { - z-index: 2; - } - - .k-button:not(:first-child):not(:last-child) { - border-start-end-radius: 0; - border-end-end-radius: 0; - border-start-start-radius: 0; - border-end-start-radius: 0; - } - > .k-button:first-child:not(:only-child) { - border-start-end-radius: 0; - border-end-end-radius: 0; - } - > .k-button:last-child:not(:only-child) { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - - &:disabled, - &[disabled], - &.k-disabled { - opacity: 1; - filter: none; - } - } - - .k-button-group-stretched { - width: 100%; - - > * { - flex: 1 0 0%; - overflow: hidden; - } - } - - - // Flat button - .k-button-flat { - border-color: transparent !important; // stylelint-disable-line declaration-no-important - color: inherit; - background: none !important; // stylelint-disable-line declaration-no-important - box-shadow: none !important; // stylelint-disable-line declaration-no-important - - // Overlay background - &::before { - display: block !important; // stylelint-disable-line declaration-no-important - } - - // Focus ring - &::after { - box-shadow: inset 0 0 0 2px currentColor; - display: block !important; // stylelint-disable-line declaration-no-important - } - - &:focus::after, - &.k-focus::after { - opacity: $kendo-flat-button-focus-ring-opacity; - } - } - - - // Outline button - .k-button-outline { - border-color: currentColor; - color: inherit; - background: none; - } - - - // Link button - .k-button-link { - border-color: transparent; - color: inherit; - text-decoration: none; - background: none; - - &:hover, - &.k-hover { - text-decoration: underline; - } - } - - - // Clear button - .k-button-clear { - border-color: transparent !important; // stylelint-disable-line declaration-no-important - color: inherit; - background: none !important; // stylelint-disable-line declaration-no-important - box-shadow: none !important; // stylelint-disable-line declaration-no-important - } - - - - - // Button overlay - .k-button-overlay { - @include border-radius( inherit ); - content: ""; - background: currentColor; - opacity: 0; - display: none; - pointer-events: none; - position: absolute; - left: -$kendo-button-border-width; - right: -$kendo-button-border-width; - top: -$kendo-button-border-width; - bottom: -$kendo-button-border-width; - z-index: 0; - transition: opacity .2s ease-in-out; - } - - - .k-button { // stylelint-disable-line - - &::before { - @extend .k-button-overlay !optional; - } - - // Hovered state - &:hover, - &.k-hover { - &::before { - opacity: $kendo-flat-button-hover-opacity; - } - } - - // Focused state - &:focus, - &.k-focus { - &::before { - opacity: $kendo-flat-button-focus-opacity; - } - } - &.k-no-focus:not(:hover), - &.k-no-focus:not(.k-hover) { - &::before { - opacity: 0; - } - } - - // Active state - &:active, - &.k-active { - &::before { - opacity: $kendo-flat-button-active-opacity; - } - } - - // Selected state - &.k-selected { - &::before { - opacity: $kendo-flat-button-selected-opacity; - } - } - - } - - - - - // Button focus ring - .k-button { // stylelint-disable-line - - &::after { - @include border-radius( inherit ); - content: ""; - opacity: 0; - display: none; - pointer-events: none; - position: absolute; - left: -$kendo-button-border-width; - right: -$kendo-button-border-width; - top: -$kendo-button-border-width; - bottom: -$kendo-button-border-width; - z-index: 0; - transition: opacity .2s ease-in-out; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *; @mixin kendo-button--layout() { diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss index 951ba5f10b2..16889ddaffc 100644 --- a/packages/default/scss/button/_theme.scss +++ b/packages/default/scss/button/_theme.scss @@ -1,336 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./_variables.scss" as *; -@use "sass:meta"; - -@mixin kendo-button--theme-base() { - - // Solid button - .k-button-solid-base { - @include fill( - $kendo-button-text, - $kendo-button-bg, - $kendo-button-border, - $kendo-button-gradient - ); - @include box-shadow( $kendo-button-shadow ); - - // Hover state - &:hover, - &.k-hover { - @include fill( - $kendo-button-hover-text, - $kendo-button-hover-bg, - $kendo-button-hover-border, - $kendo-button-hover-gradient - ); - @include box-shadow( $kendo-button-hover-shadow ); - } - - // Focus state - &:focus, - &.k-focus { - @include focus-indicator( $kendo-button-focus-shadow, true, true ); - } - - // Active state - &:active, - &.k-active { - @include fill( - $kendo-button-active-text, - $kendo-button-active-bg, - $kendo-button-active-border, - $kendo-button-active-gradient - ); - @include box-shadow( $kendo-button-active-shadow ); - } - - // Selected state - &.k-selected { - @include fill( - $kendo-button-selected-text, - $kendo-button-selected-bg, - $kendo-button-selected-border, - $kendo-button-selected-gradient - ); - @include box-shadow( $kendo-button-selected-shadow ); - } - - // Disabled state - &:disabled, - &.k-disabled { - @include fill( - $kendo-button-disabled-text, - $kendo-button-disabled-bg, - $kendo-button-disabled-border, - $kendo-button-disabled-gradient - ); - @include box-shadow( $kendo-button-disabled-shadow ); - } - } - - $_shade-fn: meta.get-function( $kendo-solid-button-shade-function ); - - @each $name, $color in $kendo-button-theme-colors { - @if ($name != "base") { - $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null )); - $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null )); - - $_button-hover-text: null; - $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null )); - $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null )); - - $_button-active-text: null; - $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null )); - $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null )); - - .k-button-solid-#{$name} { - @include fill( - $_button-text, - $_button-bg, - $_button-border, - $kendo-solid-button-gradient - ); - - // Hover state - &:hover, - &.k-hover { - @include fill( - $_button-hover-text, - $_button-hover-bg, - $_button-hover-border - ); - } - - // Focus state - &:focus, - &.k-focus { - @if ( $kendo-solid-button-shadow ) { - @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true ); - } - } - - // Active state - &:active, - &.k-active { - @include fill( - $_button-active-text, - $_button-active-bg, - $_button-active-border - ); - } - - // Selected - &.k-selected { - @include fill( - $_button-active-text, - $_button-active-bg, - $_button-active-border - ); - } - - // Disabled state - &:disabled, - &.k-disabled { - @include fill( - $kendo-button-disabled-text, - $kendo-button-disabled-bg, - $kendo-button-disabled-border, - $kendo-button-disabled-gradient - ); - @include box-shadow( $kendo-button-disabled-shadow ); - } - } - } - } - - - // Outline button - @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { - .k-button-outline-#{$name} { - @include box-shadow( none ); - border-color: currentColor; - color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); - background-color: transparent; - - // Hover state - &:hover, - &.k-hover { - @if $name == "base" { - @include fill( - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color ) ), - if($kendo-enable-color-system, k-color( on-base ), $color ), - if($kendo-enable-color-system, k-color( on-base ), $color ) - ); - } @else { - @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), - $color, - $color - ); - } - } - - // Focus state - &:focus, - &.k-focus { - @if $kendo-outline-button-shadow { - @if $name == "base" { - @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); - } @else { - @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); - } - } - } - - // Active state - &:active, - &.k-active { - @if $name == "base" { - @include fill( - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )), - if($kendo-enable-color-system, k-color( on-base ), $color ), - if($kendo-enable-color-system, k-color( on-base ), $color ) - ); - } @else { - @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), - $color, - $color - ); - } - } - - // Selected - &.k-selected { - @if $name == "base" { - @include fill( - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )), - if($kendo-enable-color-system, k-color( on-base ), $color ), - if($kendo-enable-color-system, k-color( on-base ), $color ) - ); - } @else { - @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), - $color, - $color - ); - } - } - - // Disabled state - &:disabled, - &.k-disabled { - color: $kendo-button-disabled-text; - } - } - } - - - // Flat button - @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": inherit ) ) { - .k-button-flat-#{$name} { - @if $name == "base" { - color: inherit; - } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); - } - - // Disabled state - &:disabled, - &.k-disabled { - color: $kendo-button-disabled-text; - } - } - } - - - // Link button - @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { - .k-button-link-#{$name} { - color: $color; - - // Hover - &:hover, - &.k-hover { - @if $name == "base" { - color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); - } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 )); - } - } - - // Focus - &:focus, - &.k-focus { - @if ( $kendo-link-button-shadow ) { - @if $name == "base" { - @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); - } @else { - @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); - } - } - } - - // Active - &:active, - &.k-active { - @if $name == "base" { - color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); - } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); - } - } - - // Selected - &.k-selected { - @if $name == "base" { - color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); - } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); - } - } - - // Disabled state - &:disabled, - &.k-disabled { - color: $kendo-button-disabled-text; - } - } - } - - - // Clear button - @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { - .k-button-clear-#{$name} { - color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); - - &:focus, - &.k-focus, - &:active { - &::after { - background-color: currentColor; - opacity: $kendo-clear-button-focus-opacity; - display: block; - } - } - - // Disabled state - &:disabled, - &.k-disabled { - color: $kendo-button-disabled-text; - } - } - } - - - // Button group - .k-button-group {} - - -} +@use "@progress/kendo-theme-core/scss/components/button/_theme.scss" as *; @mixin kendo-button--theme() { diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss index f1d972b322c..aa04b81286f 100644 --- a/packages/default/scss/button/_variables.scss +++ b/packages/default/scss/button/_variables.scss @@ -259,3 +259,95 @@ $kendo-flat-button-focus-ring-opacity: .12 !default; /// The color transition of the flat Button. /// @group button $kendo-button-transition: color .2s ease-in-out !default; + +@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with ( + $kendo-button-border-width: $kendo-button-border-width, + $kendo-button-border-radius: $kendo-button-border-radius, + $kendo-button-padding-x: $kendo-button-padding-x, + $kendo-button-sm-padding-x: $kendo-button-sm-padding-x, + $kendo-button-md-padding-x: $kendo-button-md-padding-x, + $kendo-button-lg-padding-x: $kendo-button-lg-padding-x, + $kendo-button-padding-y: $kendo-button-padding-y, + $kendo-button-sm-padding-y: $kendo-button-sm-padding-y, + $kendo-button-md-padding-y: $kendo-button-md-padding-y, + $kendo-button-lg-padding-y: $kendo-button-lg-padding-y, + $kendo-button-font-family: $kendo-button-font-family, + $kendo-button-font-size: $kendo-button-font-size, + $kendo-button-sm-font-size: $kendo-button-sm-font-size, + $kendo-button-md-font-size: $kendo-button-md-font-size, + $kendo-button-lg-font-size: $kendo-button-lg-font-size, + $kendo-button-line-height: $kendo-button-line-height, + $kendo-button-sm-line-height: $kendo-button-sm-line-height, + $kendo-button-md-line-height: $kendo-button-md-line-height, + $kendo-button-lg-line-height: $kendo-button-lg-line-height, + $kendo-button-calc-size: $kendo-button-calc-size, + $kendo-button-sm-calc-size: $kendo-button-sm-calc-size, + $kendo-button-md-calc-size: $kendo-button-md-calc-size, + $kendo-button-lg-calc-size: $kendo-button-lg-calc-size, + $kendo-button-inner-calc-size: $kendo-button-inner-calc-size, + $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size, + $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size, + $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size, + $kendo-button-sizes: $kendo-button-sizes, + $kendo-button-theme-colors: $kendo-button-theme-colors, + $kendo-button-bg: $kendo-button-bg, + $kendo-button-text: $kendo-button-text, + $kendo-button-border: $kendo-button-border, + $kendo-button-gradient: $kendo-button-gradient, + $kendo-button-shadow: $kendo-button-shadow, + $kendo-button-hover-bg: $kendo-button-hover-bg, + $kendo-button-hover-text: $kendo-button-hover-text, + $kendo-button-hover-border: $kendo-button-hover-border, + $kendo-button-hover-gradient: $kendo-button-hover-gradient, + $kendo-button-hover-shadow: $kendo-button-hover-shadow, + $kendo-button-active-bg: $kendo-button-active-bg, + $kendo-button-active-text: $kendo-button-active-text, + $kendo-button-active-border: $kendo-button-active-border, + $kendo-button-active-gradient: $kendo-button-active-gradient, + $kendo-button-active-shadow: $kendo-button-active-shadow, + $kendo-button-selected-bg: $kendo-button-selected-bg, + $kendo-button-selected-text: $kendo-button-selected-text, + $kendo-button-selected-border: $kendo-button-selected-border, + $kendo-button-selected-gradient: $kendo-button-selected-gradient, + $kendo-button-selected-shadow: $kendo-button-selected-shadow, + $kendo-button-focus-bg: $kendo-button-focus-bg, + $kendo-button-focus-text: $kendo-button-focus-text, + $kendo-button-focus-border: $kendo-button-focus-border, + $kendo-button-focus-gradient: $kendo-button-focus-gradient, + $kendo-button-focus-shadow: $kendo-button-focus-shadow, + $kendo-button-disabled-bg: $kendo-button-disabled-bg, + $kendo-button-disabled-text: $kendo-button-disabled-text, + $kendo-button-disabled-border: $kendo-button-disabled-border, + $kendo-button-disabled-gradient: $kendo-button-disabled-gradient, + $kendo-button-disabled-shadow: $kendo-button-disabled-shadow, + $kendo-solid-button-gradient: $kendo-solid-button-gradient, + $kendo-solid-button-shade-function: $kendo-solid-button-shade-function, + $kendo-solid-button-shade-text-amount: $kendo-solid-button-shade-text-amount, + $kendo-solid-button-shade-bg-amount: $kendo-solid-button-shade-bg-amount, + $kendo-solid-button-shade-border-amount: $kendo-solid-button-shade-border-amount, + $kendo-solid-button-hover-shade-text-amount: $kendo-solid-button-hover-shade-text-amount, + $kendo-solid-button-hover-shade-bg-amount: $kendo-solid-button-hover-shade-bg-amount, + $kendo-solid-button-hover-shade-border-amount: $kendo-solid-button-hover-shade-border-amount, + $kendo-solid-button-active-shade-text-amount: $kendo-solid-button-active-shade-text-amount, + $kendo-solid-button-active-shade-bg-amount: $kendo-solid-button-active-shade-bg-amount, + $kendo-solid-button-active-shade-border-amount: $kendo-solid-button-active-shade-border-amount, + $kendo-solid-button-shadow: $kendo-solid-button-shadow, + $kendo-solid-button-shadow-blur: $kendo-solid-button-shadow-blur, + $kendo-solid-button-shadow-spread: $kendo-solid-button-shadow-spread, + $kendo-solid-button-shadow-opacity: $kendo-solid-button-shadow-opacity, + $kendo-outline-button-shadow: $kendo-outline-button-shadow, + $kendo-outline-button-shadow-blur: $kendo-outline-button-shadow-blur, + $kendo-outline-button-shadow-spread: $kendo-outline-button-shadow-spread, + $kendo-outline-button-shadow-opacity: $kendo-outline-button-shadow-opacity, + $kendo-link-button-shadow: $kendo-link-button-shadow, + $kendo-link-button-shadow-blur: $kendo-link-button-shadow-blur, + $kendo-link-button-shadow-spread: $kendo-link-button-shadow-spread, + $kendo-link-button-shadow-opacity: $kendo-link-button-shadow-opacity, + $kendo-clear-button-focus-opacity: $kendo-clear-button-focus-opacity, + $kendo-flat-button-hover-opacity: $kendo-flat-button-hover-opacity, + $kendo-flat-button-focus-opacity: $kendo-flat-button-focus-opacity, + $kendo-flat-button-active-opacity: $kendo-flat-button-active-opacity, + $kendo-flat-button-selected-opacity: $kendo-flat-button-selected-opacity, + $kendo-flat-button-focus-ring-opacity: $kendo-flat-button-focus-ring-opacity, + $kendo-button-transition: $kendo-button-transition +); diff --git a/packages/default/scss/calendar/_layout.scss b/packages/default/scss/calendar/_layout.scss index 992e8d0facf..bafcb8ea44e 100644 --- a/packages/default/scss/calendar/_layout.scss +++ b/packages/default/scss/calendar/_layout.scss @@ -1,526 +1,4 @@ -@use "sass:map"; -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-calendar--layout-base() { - - // Base - .k-calendar { - inline-size: var( --INTERNAL--kendo-calendar-width, min-content ); - block-size: var( --INTERNAL--kendo-calendar-height, min-content ); - border-width: $kendo-calendar-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-calendar-font-family; - font-size: $kendo-calendar-font-size; - line-height: $kendo-calendar-line-height; - position: relative; - overflow: hidden; - display: inline-flex; - flex-flow: column nowrap; - user-select: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - - // Nested calendar - > .k-calendar { - border: 0; - } - } - - - // Calendar table - .k-calendar-table { - margin-block: 0; - margin-inline: auto; - border-width: 0; - border-color: inherit; - border-spacing: 0; - border-collapse: separate; - table-layout: fixed; - text-align: center; - outline: 0; - display: table; - position: relative; - z-index: 1; - } - .k-calendar-caption, - .k-calendar-caption.k-calendar-th, - .k-calendar .k-meta-header, - .k-calendar .k-month-header { - padding-block: $kendo-calendar-caption-padding-y; - padding-inline: $kendo-calendar-caption-padding-x; - height: $kendo-calendar-caption-height; - box-sizing: border-box; - font-size: $kendo-calendar-caption-font-size; - line-height: $kendo-calendar-caption-line-height; - text-transform: none; - text-align: start; - font-weight: $kendo-calendar-caption-font-weight; - cursor: default; - } - - - // Calendar cell - .k-calendar-th, - .k-calendar-td { - border-width: 0; - padding: 0; - text-align: center; - border-style: solid; - border-color: inherit; - font-weight: normal; - cursor: default; - } - .k-calendar-th { - padding-block: $kendo-calendar-header-cell-padding-y; - padding-inline: $kendo-calendar-header-cell-padding-x; - inline-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-width ); - block-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-height ); - font-size: $kendo-calendar-header-cell-font-size; - line-height: $kendo-calendar-header-cell-line-height; - text-transform: uppercase; - opacity: $kendo-calendar-header-cell-opacity; - } - .k-calendar-td { - @include border-radius( $kendo-calendar-cell-border-radius ); - inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content ); - block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content ); - border-color: transparent; - } - .k-calendar-td.k-alt { - font-size: $kendo-calendar-week-number-font-size; - } - - - // Calendar cell inner - // Remove .k-calendar once we remove k-link - .k-calendar .k-calendar-cell-inner { - @include border-radius( $kendo-calendar-cell-border-radius ); - padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} ); - padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} ); - width: 100%; - height: 100%; - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - white-space: normal; - position: relative; - overflow: hidden; - } - - - // Calendar header - .k-calendar .k-header { - padding-block: $kendo-calendar-header-padding-y; - padding-inline: $kendo-calendar-header-padding-x; - border-bottom-width: $kendo-calendar-header-border-width; - border-bottom-style: solid; - display: flex; - flex-flow: row nowrap; - gap: $kendo-calendar-nav-gap; - align-items: center; - position: relative; - z-index: 2; - } - - - // Calendar header - .k-calendar-header { - padding-block: $kendo-calendar-header-padding-y; - padding-inline: $kendo-calendar-header-padding-x; - min-width: ($kendo-calendar-cell-size * 8); - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - flex: 0 0 auto; - - .k-calendar-nav { - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: $kendo-calendar-nav-gap; - } - } - - - // Calendar footer - .k-calendar-footer, - .k-calendar .k-footer { - padding-block: $kendo-calendar-footer-padding-y; - padding-inline: $kendo-calendar-footer-padding-x; - text-align: center; - clear: both; - } - - - // Calendar view wrapper - .k-calendar-view { - margin: auto; - padding-block: 0; - padding-inline: $kendo-calendar-header-padding-x; - // setting width / height prevents layout changes in meta views - width: $kendo-calendar-view-width; - inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width}); - min-height: $kendo-calendar-view-height; - box-sizing: content-box; - gap: $kendo-calendar-view-gap; - position: relative; - z-index: 1; - overflow: hidden; - - .k-today { - font-weight: bold; - } - } - - - // Month view - .k-month-calendar, - .k-calendar-monthview { - $_month-cell-size: $kendo-calendar-cell-size; - - .k-calendar-td { - width: $_month-cell-size; - height: $_month-cell-size; - inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} ); - block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} ); - } - } - - - // Year view - .k-year-calendar, - .k-calendar-yearview { - $_year-cell-size: ( 2 * $kendo-calendar-cell-size ); - - .k-calendar-td { - width: $_year-cell-size; - height: $_year-cell-size; - inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} ); - block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} ); - } - } - - - // Decade view - .k-decade-calendar, - .k-calendar-decadeview { - $_decade-cell-size: ( 2 * $kendo-calendar-cell-size ); - - .k-calendar-td { - width: $_decade-cell-size; - height: $_decade-cell-size; - inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} ); - block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} ); - } - } - - - // Century view - .k-century-calendar, - .k-calendar-centuryview { - $_century-cell-size: ( 2 * $kendo-calendar-cell-size ); - - .k-calendar-td { - width: $_century-cell-size; - height: $_century-cell-size; - inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} ); - block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} ); - } - .k-calendar-cell-inner { - text-align: start; - } - } - - - // Calendar in popup - .k-popup .k-calendar { - height: 100%; - } - .k-calendar-container, - .k-datetime-container { - padding: 0; - - .k-calendar { - border-width: 0; - } - } - - - - - .k-calendar .k-content.k-scrollable, - .k-calendar .k-calendar-content.k-scrollable { - box-sizing: content-box; - overflow-x: hidden; - overflow-y: auto; - display: block; - - @include hide-scrollbar("right"); - } - - // scoped in calendar until it is used elsewhere - .k-calendar .k-scrollable-placeholder { - position: absolute; - z-index: -1; - width: 1px; - top: 0; - right: 0; - } - - - - - // Calendar sizes - @each $size, $size-props in $kendo-calendar-sizes { - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_cell-size: map.get( $size-props, cell-size ); - $_cell-padding-x: map.get( $size-props, cell-padding-x ); - $_cell-padding-y: map.get( $size-props, cell-padding-y ); - - $_month-cell-size: $_cell-size; - $_year-cell-size: ( 2 * $_cell-size ); - $_decade-cell-size: ( 2 * $_cell-size ); - $_century-cell-size: ( 2 * $_cell-size ); - - .k-calendar-#{$size} { - --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size}; - --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} ); - --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} ); - font-size: $_font-size; - line-height: $_line-height; - - &.k-month-calendar, - .k-calendar-monthview { - --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} ); - } - &.k-year-calendar, - .k-calendar-yearview { - --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} ); - } - &.k-decade-calendar, - .k-calendar-decadeview { - --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} ); - } - &.k-century-calendar, - .k-calendar-centuryview { - --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} ); - } - } - } - - - - - // Legacy aliases - .k-link { - @extend .k-calendar-cell-inner !optional; - } - - - - - // Infinite calendar - .k-calendar-infinite { - box-sizing: content-box; - display: inline-flex; - flex-flow: row nowrap; - - .k-calendar-view { - padding-block: $kendo-infinite-calendar-view-padding-y; - padding-inline: $kendo-infinite-calendar-view-padding-x; - height: $kendo-infinite-calendar-view-height; - flex: 0 0 auto; - display: flex; - flex-flow: column nowrap; - gap: 0; - overflow: hidden; - - .k-content.k-scrollable { - position: relative; - } - - &::after { - display: block; - position: absolute; - bottom: 0; - content: "\200b"; - height: 0; - line-height: 0; - z-index: 1; - width: 150%; - left: -25%; - box-shadow: 0 0 $kendo-calendar-cell-size math.div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg; - } - } - - .k-calendar-header { - margin-left: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 ); - margin-right: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 ); - padding-block: $kendo-infinite-calendar-header-padding-y; - padding-inline: $kendo-infinite-calendar-header-padding-x; - width: auto; - min-width: 0; - } - - .k-calendar-weekdays { - flex: 0 0 auto; - } - } - - - // Calendar navigation - .k-calendar-navigation { - width: $kendo-calendar-navigation-width; - text-align: center; - flex: 0 0 auto; - display: block; - overflow: hidden; - position: relative; - z-index: 1; - - &::before, - &::after { - display: block; - position: absolute; - content: "\200b"; - height: 0; - line-height: 0; - z-index: 1; - width: 200%; - left: -50%; - $shadow-size: 3 * $kendo-calendar-navigation-item-height; - box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-calendar-navigation-bg; - } - - &::before { top: 0; } - &::after { bottom: 0; } - - .k-content, - .k-calendar-content { - background: transparent; - height: auto; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - - ul { - width: $kendo-calendar-navigation-width; - } - - li { - height: $kendo-calendar-navigation-item-height; - line-height: $kendo-calendar-navigation-item-height; - cursor: pointer; - padding-block: 0; - padding-inline: 1em; - overflow: hidden; - white-space: nowrap; - text-overflow: clip; - } - } - - .k-calendar-navigation-marker { - font-weight: bold; - } - - .k-calendar-navigation-highlight { - width: 100%; - border-width: 1px 0; - border-style: solid; - height: $kendo-calendar-navigation-item-height; - box-sizing: border-box; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - } - - // // styles are applied to the k-link element inside - // .k-selected { - // color: inherit; - // background: transparent; - // border-color: transparent; - // } - } - - // Multiview calendar - .k-calendar-range { - width: auto; - - .k-calendar-view { - width: auto; - white-space: nowrap; - - &::after { - display: none; - } - - &:focus { - outline: 0; - } - } - } - - // Range Selection - .k-range-start { - border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius; - - .k-calendar-cell-inner, - .k-link { - border-color: inherit; - border-radius: inherit; - } - } - .k-range-end { - border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0; - - .k-calendar-cell-inner, - .k-link { - border-color: inherit; - border-radius: inherit; - } - } - .k-range-mid { - border-color: inherit; - border-radius: 0; - } - .k-range-start.k-range-end { - border-radius: $kendo-calendar-range-cell-border-radius; - } - - // RTL - .k-rtl .k-calendar, - [dir="rtl"] .k-calendar, - .k-calendar.k-rtl, - .k-calendar[dir="rtl"] { - - .k-content.k-scrollable, - .k-calendar-content.k-scrollable { - @include hide-scrollbar("left"); - } - - // Range Selection RTL - .k-range-start { - border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0; - } - .k-range-end { - border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius; - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *; @mixin kendo-calendar--layout() { diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss index 545b3e5c171..0e3f629197e 100644 --- a/packages/default/scss/calendar/_theme.scss +++ b/packages/default/scss/calendar/_theme.scss @@ -1,213 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-calendar--theme-base() { - - .k-calendar { - @include fill( - $kendo-calendar-text, - $kendo-calendar-bg, - $kendo-calendar-border - ); - - - // TODO: do we even use this? - // Header / footer - .k-header { - @include fill( - $kendo-calendar-header-text, - $kendo-calendar-header-bg, - inherit, - $kendo-calendar-header-gradient - ); - @include box-shadow( $kendo-calendar-header-shadow ); - } - - - // Header cells - .k-calendar-th, - .k-calendar-caption, - .k-meta-header, - .k-month-header { - color: $kendo-calendar-header-cell-text; - } - - - // Special days - .k-calendar-view .k-today { - @if $kendo-calendar-today-style == box { - .k-calendar-cell-inner { - box-shadow: inset 0 0 0 1px $kendo-calendar-today-color; - } - &.k-focus .k-calendar-cell-inner { - @include focus-indicator( $indicator: ( inset 0 0 0 1px $kendo-calendar-today-color, $kendo-calendar-cell-focus-shadow ), $inset: true ); - } - } @else if $kendo-calendar-today-style == color { - color: $kendo-calendar-today-color; - } - } - .k-other-month { - @include fill( - $kendo-calendar-other-month-text, - $kendo-calendar-other-month-bg - ); - } - .k-weekend { - @include fill( - $kendo-calendar-weekend-text, - $kendo-calendar-weekend-bg - ); - } - .k-alt { - // remove default k-alt background color - background-color: transparent; - @include fill( - $kendo-calendar-week-number-text, - $kendo-calendar-week-number-bg - ); - } - - - // Interactive states - .k-calendar-td:hover .k-calendar-cell-inner, - .k-calendar-td.k-hover .k-calendar-cell-inner { - @include fill( - $kendo-calendar-cell-hover-text, - $kendo-calendar-cell-hover-bg, - $kendo-calendar-cell-hover-border, - $kendo-calendar-cell-hover-gradient - ); - } - .k-calendar-td.k-selected .k-calendar-cell-inner { - @include fill( - $kendo-calendar-cell-selected-text, - $kendo-calendar-cell-selected-bg, - $kendo-calendar-cell-selected-border, - $kendo-calendar-cell-selected-gradient - ); - } - .k-calendar-td.k-selected:hover .k-calendar-cell-inner, - .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner { - @include fill( - $kendo-calendar-cell-selected-hover-text, - $kendo-calendar-cell-selected-hover-bg, - $kendo-calendar-cell-selected-hover-border, - $kendo-calendar-cell-selected-hover-gradient - ); - } - .k-calendar-td:focus .k-calendar-cell-inner, - .k-calendar-td.k-focus .k-calendar-cell-inner { - @include focus-indicator( $kendo-calendar-cell-focus-shadow, true ); - } - .k-calendar-td.k-selected:focus .k-calendar-cell-inner, - .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner { - @include focus-indicator( $kendo-calendar-cell-selected-focus-shadow, true ); - } - - - // Calendar navigation - .k-calendar-navigation { - @include fill( - $kendo-calendar-navigation-text, - $kendo-calendar-navigation-bg - ); - box-shadow: inset -1px 0 $kendo-calendar-navigation-border; - - li:hover, - li.k-hover { - color: $kendo-calendar-navigation-hover-text; - } - } - .k-calendar-navigation-highlight { - @include fill( - $kendo-calendar-text, - $kendo-calendar-bg, - $kendo-calendar-border - ); - } - - // Invalid - &.k-invalid, - &.k-invalid:hover, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - border-color: $kendo-invalid-border; - } - } - - .k-rtl .k-calendar, - .k-calendar[dir="rtl"] { - .k-calendar-navigation { - box-shadow: inset 1px 0 $kendo-calendar-navigation-border; - } - } - - // Scheduler integration - .k-scheduler .k-calendar .k-other-month { - @include fill( - $kendo-calendar-other-month-text, - transparent - ); - } - - - - - // Multiview calendar - .k-calendar { // stylelint-disable-line - - $kendo-calendar-range-gap: k-spacing(1px) !default; - $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 )); - $kendo-calendar-range-split-size: 5px !default; - - .k-range-start, - .k-range-end, - .k-range-mid { - background-color: $kendo-calendar-range-bg; - } - - .k-range-start, - .k-range-end { - .k-calendar-cell-inner { - background-color: $kendo-calendar-cell-selected-bg; - } - } - - .k-range-start.k-active, - .k-range-end.k-active { - .k-calendar-cell-inner { - box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2); - } - } - - .k-range-split-start, - .k-range-split-end { - position: relative; - - &::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - width: $kendo-calendar-range-split-size; - } - } - - .k-range-split-start::after { - left: -$kendo-calendar-range-split-size; - right: auto; - background-image: linear-gradient(to left, $kendo-calendar-range-bg, transparent 100%); - } - - .k-range-split-end::after { - right: -$kendo-calendar-range-split-size; - left: auto; - background-image: linear-gradient(to right, $kendo-calendar-range-bg, transparent 100%); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/calendar/_theme.scss" as *; @mixin kendo-calendar--theme() { diff --git a/packages/default/scss/calendar/_variables.scss b/packages/default/scss/calendar/_variables.scss index 74df578c3c9..bb89cd6f16a 100644 --- a/packages/default/scss/calendar/_variables.scss +++ b/packages/default/scss/calendar/_variables.scss @@ -356,3 +356,102 @@ $kendo-calendar-sizes: ( cell-padding-y: $kendo-calendar-lg-cell-padding-x ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/calendar/_variables.scss" with ( + $kendo-calendar-border-width: $kendo-calendar-border-width, + $kendo-calendar-font-family: $kendo-calendar-font-family, + $kendo-calendar-font-size: $kendo-calendar-font-size, + $kendo-calendar-line-height: $kendo-calendar-line-height, + $kendo-calendar-cell-size: $kendo-calendar-cell-size, + $kendo-calendar-bg: $kendo-calendar-bg, + $kendo-calendar-text: $kendo-calendar-text, + $kendo-calendar-border: $kendo-calendar-border, + $kendo-calendar-header-padding-x: $kendo-calendar-header-padding-x, + $kendo-calendar-header-padding-y: $kendo-calendar-header-padding-y, + $kendo-calendar-header-border-width: $kendo-calendar-header-border-width, + $kendo-calendar-header-bg: $kendo-calendar-header-bg, + $kendo-calendar-header-text: $kendo-calendar-header-text, + $kendo-calendar-header-border: $kendo-calendar-header-border, + $kendo-calendar-header-gradient: $kendo-calendar-header-gradient, + $kendo-calendar-header-shadow: $kendo-calendar-header-shadow, + $kendo-calendar-nav-gap: $kendo-calendar-nav-gap, + $kendo-calendar-footer-padding-x: $kendo-calendar-footer-padding-x, + $kendo-calendar-footer-padding-y: $kendo-calendar-footer-padding-y, + $kendo-calendar-cell-padding-x: $kendo-calendar-cell-padding-x, + $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-y, + $kendo-calendar-cell-line-height: $kendo-calendar-cell-line-height, + $kendo-calendar-cell-border-radius: $kendo-calendar-cell-border-radius, + $kendo-calendar-header-cell-padding-x: $kendo-calendar-header-cell-padding-x, + $kendo-calendar-header-cell-padding-y: $kendo-calendar-header-cell-padding-y, + $kendo-calendar-header-cell-width: $kendo-calendar-header-cell-width, + $kendo-calendar-header-cell-height: $kendo-calendar-header-cell-height, + $kendo-calendar-header-cell-font-size: $kendo-calendar-header-cell-font-size, + $kendo-calendar-header-cell-line-height: $kendo-calendar-header-cell-line-height, + $kendo-calendar-header-cell-bg: $kendo-calendar-header-cell-bg, + $kendo-calendar-header-cell-text: $kendo-calendar-header-cell-text, + $kendo-calendar-header-cell-opacity: $kendo-calendar-header-cell-opacity, + $kendo-calendar-caption-padding-x: $kendo-calendar-caption-padding-x, + $kendo-calendar-caption-padding-y: $kendo-calendar-caption-padding-y, + $kendo-calendar-caption-height: $kendo-calendar-caption-height, + $kendo-calendar-caption-font-size: $kendo-calendar-caption-font-size, + $kendo-calendar-caption-line-height: $kendo-calendar-caption-line-height, + $kendo-calendar-caption-font-weight: $kendo-calendar-caption-font-weight, + $kendo-calendar-week-number-font-size: $kendo-calendar-week-number-font-size, + $kendo-calendar-view-width: $kendo-calendar-view-width, + $kendo-calendar-view-height: $kendo-calendar-view-height, + $kendo-calendar-view-gap: $kendo-calendar-view-gap, + $kendo-calendar-weekend-bg: $kendo-calendar-weekend-bg, + $kendo-calendar-weekend-text: $kendo-calendar-weekend-text, + $kendo-calendar-today-style: $kendo-calendar-today-style, + $kendo-calendar-today-color: $kendo-calendar-today-color, + $kendo-calendar-week-number-bg: $kendo-calendar-week-number-bg, + $kendo-calendar-week-number-text: $kendo-calendar-week-number-text, + $kendo-calendar-other-month-bg: $kendo-calendar-other-month-bg, + $kendo-calendar-other-month-text: $kendo-calendar-other-month-text, + $kendo-calendar-cell-bg: $kendo-calendar-cell-bg, + $kendo-calendar-cell-text: $kendo-calendar-cell-text, + $kendo-calendar-cell-border: $kendo-calendar-cell-border, + $kendo-calendar-cell-gradient: $kendo-calendar-cell-gradient, + $kendo-calendar-cell-hover-bg: $kendo-calendar-cell-hover-bg, + $kendo-calendar-cell-hover-text: $kendo-calendar-cell-hover-text, + $kendo-calendar-cell-hover-border: $kendo-calendar-cell-hover-border, + $kendo-calendar-cell-hover-gradient: $kendo-calendar-cell-hover-gradient, + $kendo-calendar-cell-selected-bg: $kendo-calendar-cell-selected-bg, + $kendo-calendar-cell-selected-text: $kendo-calendar-cell-selected-text, + $kendo-calendar-cell-selected-border: $kendo-calendar-cell-selected-border, + $kendo-calendar-cell-selected-gradient: $kendo-calendar-cell-selected-gradient, + $kendo-calendar-cell-selected-hover-bg: $kendo-calendar-cell-selected-hover-bg, + $kendo-calendar-cell-selected-hover-text: $kendo-calendar-cell-selected-hover-text, + $kendo-calendar-cell-selected-hover-border: $kendo-calendar-cell-selected-hover-border, + $kendo-calendar-cell-selected-hover-gradient: $kendo-calendar-cell-selected-hover-gradient, + $kendo-calendar-cell-focus-shadow: $kendo-calendar-cell-focus-shadow, + $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-selected-focus-shadow, + $kendo-calendar-navigation-width: $kendo-calendar-navigation-width, + $kendo-calendar-navigation-item-height: $kendo-calendar-navigation-item-height, + $kendo-calendar-navigation-bg: $kendo-calendar-navigation-bg, + $kendo-calendar-navigation-text: $kendo-calendar-navigation-text, + $kendo-calendar-navigation-border: $kendo-calendar-navigation-border, + $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text, + $kendo-infinite-calendar-header-padding-x: $kendo-infinite-calendar-header-padding-x, + $kendo-infinite-calendar-header-padding-y: $kendo-infinite-calendar-header-padding-y, + $kendo-infinite-calendar-view-padding-x: $kendo-infinite-calendar-view-padding-x, + $kendo-infinite-calendar-view-padding-y: $kendo-infinite-calendar-view-padding-y, + $kendo-infinite-calendar-view-height: $kendo-infinite-calendar-view-height, + $kendo-calendar-range-cell-border-radius: $kendo-calendar-range-cell-border-radius, + $kendo-calendar-sm-font-size: $kendo-calendar-sm-font-size, + $kendo-calendar-sm-line-height: $kendo-calendar-sm-line-height, + $kendo-calendar-sm-cell-size: $kendo-calendar-sm-cell-size, + $kendo-calendar-sm-cell-padding-x: $kendo-calendar-sm-cell-padding-x, + $kendo-calendar-sm-cell-padding-y: $kendo-calendar-sm-cell-padding-y, + $kendo-calendar-md-font-size: $kendo-calendar-md-font-size, + $kendo-calendar-md-line-height: $kendo-calendar-md-line-height, + $kendo-calendar-md-cell-size: $kendo-calendar-md-cell-size, + $kendo-calendar-md-cell-padding-x: $kendo-calendar-md-cell-padding-x, + $kendo-calendar-md-cell-padding-y: $kendo-calendar-md-cell-padding-y, + $kendo-calendar-lg-font-size: $kendo-calendar-lg-font-size, + $kendo-calendar-lg-line-height: $kendo-calendar-lg-line-height, + $kendo-calendar-lg-cell-size: $kendo-calendar-lg-cell-size, + $kendo-calendar-lg-cell-padding-x: $kendo-calendar-lg-cell-padding-x, + $kendo-calendar-lg-cell-padding-y: $kendo-calendar-lg-cell-padding-y, + $kendo-calendar-sizes: $kendo-calendar-sizes +); diff --git a/packages/default/scss/captcha/_layout.scss b/packages/default/scss/captcha/_layout.scss index 1cb6dc65afa..9abeda7afe0 100644 --- a/packages/default/scss/captcha/_layout.scss +++ b/packages/default/scss/captcha/_layout.scss @@ -1,67 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-captcha--layout-base() { - - // Captcha - .k-captcha { - width: $kendo-captcha-width; - box-sizing: border-box; - font-size: $kendo-captcha-font-size; - font-family: $kendo-captcha-font-family; - line-height: $kendo-captcha-line-height; - display: flex; - flex-flow: column nowrap; - gap: $kendo-captcha-gap; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - // Image - .k-captcha-image-wrap { - position: relative; - gap: $kendo-captcha-image-wrap-gap; - } - - .k-captcha-image-controls { - position: relative; - gap: $kendo-captcha-image-controls-gap; - } - - .k-captcha-image { - width: 100%; - height: 100%; - overflow: hidden; - } - - .k-captcha-image > img { - width: 100%; - height: 100%; - display: block; - object-fit: cover; - } - - // Loading - .k-captcha-loading .k-captcha-image { - height: auto; - } - - // Volume Control - .k-captcha-volume-control { - height: 100%; - } - - // Verification Success - .k-captcha-validation-message { - margin-top: $kendo-captcha-validation-message-margin-top; - font-size: $kendo-captcha-validation-message-font-size; - font-style: $kendo-captcha-validation-message-font-style; - } - -} +@use "@progress/kendo-theme-core/scss/components/captcha/_layout.scss" as *; @mixin kendo-captcha--layout() { diff --git a/packages/default/scss/captcha/_theme.scss b/packages/default/scss/captcha/_theme.scss index 79c735bb265..a0a20e09ba2 100644 --- a/packages/default/scss/captcha/_theme.scss +++ b/packages/default/scss/captcha/_theme.scss @@ -1,18 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-captcha--theme-base() { - - // Captcha - .k-captcha { - @include fill( - $kendo-captcha-text, - $kendo-captcha-bg, - $kendo-captcha-border - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/captcha/_theme.scss" as *; @mixin kendo-captcha--theme() { diff --git a/packages/default/scss/captcha/_variables.scss b/packages/default/scss/captcha/_variables.scss index b0da0bf9df9..3d1f46a55c7 100644 --- a/packages/default/scss/captcha/_variables.scss +++ b/packages/default/scss/captcha/_variables.scss @@ -47,3 +47,20 @@ $kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit /// The font style of the Captcha validation message. /// @group captcha $kendo-captcha-validation-message-font-style: italic !default; + +@forward "@progress/kendo-theme-core/scss/components/captcha/_variables.scss" with ( + $kendo-captcha-spacer: $kendo-captcha-spacer, + $kendo-captcha-width: $kendo-captcha-width, + $kendo-captcha-font-family: $kendo-captcha-font-family, + $kendo-captcha-font-size: $kendo-captcha-font-size, + $kendo-captcha-line-height: $kendo-captcha-line-height, + $kendo-captcha-gap: $kendo-captcha-gap, + $kendo-captcha-bg: $kendo-captcha-bg, + $kendo-captcha-text: $kendo-captcha-text, + $kendo-captcha-border: $kendo-captcha-border, + $kendo-captcha-image-wrap-gap: $kendo-captcha-image-wrap-gap, + $kendo-captcha-image-controls-gap: $kendo-captcha-image-controls-gap, + $kendo-captcha-validation-message-margin-top: $kendo-captcha-validation-message-margin-top, + $kendo-captcha-validation-message-font-size: $kendo-captcha-validation-message-font-size, + $kendo-captcha-validation-message-font-style: $kendo-captcha-validation-message-font-style +); diff --git a/packages/default/scss/card/_layout.scss b/packages/default/scss/card/_layout.scss index 5c5405c2921..9223804361e 100644 --- a/packages/default/scss/card/_layout.scss +++ b/packages/default/scss/card/_layout.scss @@ -1,346 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../typography/_variables.scss" as *; - -@mixin kendo-card--layout-base() { - - - // Angular elements - kendo-card, - kendo-card-header, - kendo-card-body, - kendo-card-actions, - kendo-card-footer { - display: block; - } - - - // Card - .k-card { - @include border-radius( $kendo-card-border-radius ); - border-width: $kendo-card-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-card-font-family; - font-size: $kendo-card-font-size; - line-height: $kendo-card-line-height; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - // Card avatar - .k-card-avatar, - .k-avatar { - margin-right: $kendo-card-avatar-spacing; - width: $kendo-card-avatar-size; - height: $kendo-card-avatar-size; - flex-basis: $kendo-card-avatar-size; - } - } - .k-card > .k-card-inner { - @include border-radius( $kendo-card-inner-border-radius ); - display: flex; - flex-direction: inherit; - overflow: hidden; - position: relative; - } - - // Card orientation - .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before - .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before - - // Header - .k-card-header { - padding-block: $kendo-card-header-padding-y; - padding-inline: $kendo-card-header-padding-x; - border-width: 0 0 $kendo-card-header-border-width; - border-style: solid; - outline: 0; - flex-shrink: 0; - overflow: hidden; - position: relative; - z-index: 1; - - .k-card-title, - .k-card-subtitle { - margin-bottom: 0; - } - .k-card-title + .k-card-subtitle, - .k-card-subtitle + .k-card-subtitle { - margin-top: $kendo-card-title-margin-bottom; - } - } - - - // Footer - .k-card-footer { - padding-block: $kendo-card-footer-padding-y; - padding-inline: $kendo-card-footer-padding-x; - border-width: $kendo-card-footer-border-width 0 0; - border-style: solid; - outline: 0; - flex-shrink: 0; - } - - - // Body - .k-card-body { - padding-block: $kendo-card-body-padding-y; - padding-inline: $kendo-card-body-padding-x; - outline: 0; - flex: 1 1 auto; - - p { - margin: $kendo-paragraph-margin; - } - - > .k-last, - > :last-child { - margin-bottom: 0; - } - - > .k-card-actions { - padding: 0; - } - } - - // Card media - .k-card-media { - border: 0; - max-width: 100%; - flex-shrink: 0; - overflow: hidden; - } - - .k-card-horizontal .k-card-media { - max-width: $kendo-card-img-max-width; - object-fit: cover; - } - - - // Card title - .k-card-title { - margin: 0 0 $kendo-card-title-margin-bottom; - @include typography( - $kendo-card-title-font-size, - $kendo-card-title-font-family, - $kendo-card-title-line-height, - $kendo-card-title-font-weight, - $kendo-card-title-letter-spacing - ); - } - - - // Card subtitle - .k-card-subtitle { - margin: 0 0 $kendo-card-subtitle-margin-bottom; - @include typography( - $kendo-card-subtitle-font-size, - $kendo-card-subtitle-font-family, - $kendo-card-subtitle-line-height, - $kendo-card-subtitle-font-weight, - $kendo-card-subtitle-letter-spacing - ); - } - - - // Separator - .k-card-separator { - margin: 0; - border-width: 0; - border-style: solid; - border-color: inherit; - display: block; - flex: 0 0 auto; - align-self: stretch; - } - - .k-card-separator.k-separator-horizontal, - .k-card-vertical > .k-card-separator { - border-top-width: 1px; - } - - .k-card-separator.k-separator-vertical, - .k-card-horizontal > .k-card-separator { - border-left-width: 1px; - } - - .k-card > .k-hr { - margin: 0; - flex: 0 0 auto; - border-color: inherit; - } - - // Card actions - .k-card-actions { - padding-block: $kendo-card-actions-padding-y; - padding-inline: $kendo-card-actions-padding-x; - border-width: 0; - border-style: solid; - border-color: inherit; - overflow: hidden; - display: flex; - flex-shrink: 0; - flex-basis: auto; - gap: $kendo-card-actions-gap; - } - - .k-card-horizontal .k-actions-horizontal { - width: auto; - } - - // List - .k-card-list { - display: flex; - flex-flow: column nowrap; - align-items: stretch; - gap: $kendo-card-deck-gap; - flex: 0 0 auto; - - .k-card { - flex: 0 0 auto; - } - } - - - // Deck - .k-card-deck { - display: flex; - flex-flow: row nowrap; - align-items: stretch; - gap: $kendo-card-deck-gap; - flex: 0 0 auto; - - .k-card { - flex: 0 0 auto; - } - } - - .k-card-deck-scrollwrap { - padding-bottom: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar) - width: 100%; - box-sizing: content-box; - display: flex; - flex: 0 0 auto; - align-items: center; - position: relative; - overflow: hidden; - - > .k-button { - @include border-radius( $kendo-card-deck-scroll-button-radius ); - flex: 0 0 auto; - position: absolute; - z-index: 1; - - &:first-child { - left: $kendo-card-deck-scroll-button-offset; - } - - &:last-child { - right: $kendo-card-deck-scroll-button-offset; - } - } - - > .k-card-deck { - // hide scrollbar - $scrollbar-size: 20px; - - margin-bottom: -$scrollbar-size; - padding-bottom: $scrollbar-size; - flex: 1 1 auto; - } - } - - - // Group - .k-card-group { - display: flex; - flex-flow: row nowrap; - align-items: stretch; - flex: 0 0 auto; - - .k-card { - @include border-radius( 0 ); - flex: 0 0 auto; - } - .k-card + .k-card { - margin-inline-start: $kendo-card-border-width; - } - - - // Border-radius - .k-card.k-first { - @include border-left-radius( $kendo-card-border-radius ); - } - .k-card.k-last { - @include border-right-radius( $kendo-card-border-radius ); - } - .k-card.k-only { - @include border-radius( $kendo-card-border-radius ); - } - } - - // Card with callout - .k-card-with-callout { - overflow: visible; - } - - - // Card callout - .k-card-callout { - margin: 0; - width: $kendo-card-callout-width; - height: $kendo-card-callout-height; - border-width: $kendo-card-border-width; - border-style: solid; - box-sizing: border-box; - position: absolute; - } - - .k-card-callout.k-callout-n { - top: 0; - left: 50%; - transform: translate(-50%, -50%) rotate(45deg); - } - .k-card-callout.k-callout-e { - top: 50%; - right: 0; - transform: translate(50%, -50%) rotate(-45deg); - } - .k-card-callout.k-callout-s { - bottom: 0; - left: 50%; - transform: translate(-50%, 50%) rotate(45deg); - } - .k-card-callout.k-callout-w { - top: 50%; - left: 0; - transform: translate(-50%, -50%) rotate(45deg); - } - - - // Solid card - .k-card-solid { - @include box-shadow( $kendo-card-shadow ); - } - - - // Flat card - .k-card-flat { - @include box-shadow( none ); - } - -} +@use "@progress/kendo-theme-core/scss/components/card/_layout.scss" as *; @mixin kendo-card--layout() { diff --git a/packages/default/scss/card/_theme.scss b/packages/default/scss/card/_theme.scss index ffcf64f16bf..55449bc8eda 100644 --- a/packages/default/scss/card/_theme.scss +++ b/packages/default/scss/card/_theme.scss @@ -1,106 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-card--theme-base() { - - // Card - .k-card { - @include fill( - $kendo-card-text, - $kendo-card-bg, - $kendo-card-border - ); - @include box-shadow( $kendo-card-shadow ); - - .k-card-inner { - background-color: inherit; - border-color: inherit; - } - - &:focus, - &.k-focus { - @include fill( - $kendo-card-focus-text, - $kendo-card-focus-bg, - $kendo-card-focus-border - ); - @include focus-indicator( $kendo-card-focus-shadow ); - } - - &.k-selected { - @include box-shadow( $kendo-card-focus-shadow ); - } - } - - - // Card actions - .k-card-actions { - border-color: $kendo-card-border; - } - - - // Header - .k-card-header { - @include fill( $kendo-card-header-text, $kendo-card-header-bg, $kendo-card-header-border ); - } - - - // Footer - .k-card-footer { - @include fill( $kendo-card-footer-text, $kendo-card-footer-bg, $kendo-card-footer-border ); - } - - - // Separator - .k-card-separator, - .k-card .k-separator { - border-color: $kendo-card-border; - } - - - // TODO: refactor - .k-card-subtitle { - color: $kendo-card-subtitle-text; - } - - - // Card theme colors - @each $name, $color in $kendo-theme-colors { - .k-card-#{$name} { - background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10)); - color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6)); - border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9)); - - .k-card-subtitle { - color: inherit; - } - } - } - - - .k-card-wrap { - &:focus, - &.k-focus, - &.k-selected { - > .k-card { - @include focus-indicator( $kendo-card-focus-shadow ); - } - } - } - - - // Card callout - .k-card-callout { - @include fill( - $bg: inherit, - $border: inherit - ); - - @include box-shadow( inherit ); - } - -} +@use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *; @mixin kendo-card--theme() { diff --git a/packages/default/scss/card/_variables.scss b/packages/default/scss/card/_variables.scss index ce518790b82..96052b34e57 100644 --- a/packages/default/scss/card/_variables.scss +++ b/packages/default/scss/card/_variables.scss @@ -183,3 +183,61 @@ $kendo-card-callout-width: 20px !default; /// The height of the Card callout. /// @group card $kendo-card-callout-height: 20px !default; + +@forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with ( + $kendo-card-padding-x: $kendo-card-padding-x, + $kendo-card-padding-y: $kendo-card-padding-y, + $kendo-card-border-width: $kendo-card-border-width, + $kendo-card-border-radius: $kendo-card-border-radius, + $kendo-card-inner-border-radius: $kendo-card-inner-border-radius, + $kendo-card-font-family: $kendo-card-font-family, + $kendo-card-font-size: $kendo-card-font-size, + $kendo-card-line-height: $kendo-card-line-height, + $kendo-card-deck-gap: $kendo-card-deck-gap, + $kendo-card-bg: $kendo-card-bg, + $kendo-card-text: $kendo-card-text, + $kendo-card-border: $kendo-card-border, + $kendo-card-shadow: $kendo-card-shadow, + $kendo-card-focus-bg: $kendo-card-focus-bg, + $kendo-card-focus-text: $kendo-card-focus-text, + $kendo-card-focus-border: $kendo-card-focus-border, + $kendo-card-focus-shadow: $kendo-card-focus-shadow, + $kendo-card-header-padding-x: $kendo-card-header-padding-x, + $kendo-card-header-padding-y: $kendo-card-header-padding-y, + $kendo-card-header-border-width: $kendo-card-header-border-width, + $kendo-card-header-bg: $kendo-card-header-bg, + $kendo-card-header-text: $kendo-card-header-text, + $kendo-card-header-border: $kendo-card-header-border, + $kendo-card-body-padding-x: $kendo-card-body-padding-x, + $kendo-card-body-padding-y: $kendo-card-body-padding-y, + $kendo-card-footer-padding-x: $kendo-card-footer-padding-x, + $kendo-card-footer-padding-y: $kendo-card-footer-padding-y, + $kendo-card-footer-border-width: $kendo-card-footer-border-width, + $kendo-card-footer-bg: $kendo-card-footer-bg, + $kendo-card-footer-text: $kendo-card-footer-text, + $kendo-card-footer-border: $kendo-card-footer-border, + $kendo-card-title-margin-bottom: $kendo-card-title-margin-bottom, + $kendo-card-title-font-size: $kendo-card-title-font-size, + $kendo-card-title-font-family: $kendo-card-title-font-family, + $kendo-card-title-line-height: $kendo-card-title-line-height, + $kendo-card-title-font-weight: $kendo-card-title-font-weight, + $kendo-card-title-letter-spacing: $kendo-card-title-letter-spacing, + $kendo-card-subtitle-margin-bottom: $kendo-card-subtitle-margin-bottom, + $kendo-card-subtitle-font-size: $kendo-card-subtitle-font-size, + $kendo-card-subtitle-font-family: $kendo-card-subtitle-font-family, + $kendo-card-subtitle-line-height: $kendo-card-subtitle-line-height, + $kendo-card-subtitle-font-weight: $kendo-card-subtitle-font-weight, + $kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing, + $kendo-card-subtitle-text: $kendo-card-subtitle-text, + $kendo-card-img-max-width: $kendo-card-img-max-width, + $kendo-card-avatar-size: $kendo-card-avatar-size, + $kendo-card-avatar-spacing: $kendo-card-avatar-spacing, + $kendo-card-actions-padding-x: $kendo-card-actions-padding-x, + $kendo-card-actions-padding-y: $kendo-card-actions-padding-y, + $kendo-card-actions-border-width: $kendo-card-actions-border-width, + $kendo-card-actions-gap: $kendo-card-actions-gap, + $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius, + $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset, + $kendo-card-callout-width: $kendo-card-callout-width, + $kendo-card-callout-height: $kendo-card-callout-height +); diff --git a/packages/default/scss/chart-wizard/_layout.scss b/packages/default/scss/chart-wizard/_layout.scss index 834f6533332..b5e8c2b2359 100644 --- a/packages/default/scss/chart-wizard/_layout.scss +++ b/packages/default/scss/chart-wizard/_layout.scss @@ -1,45 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-chart-wizard--layout-base() { - // Chart wizard - .k-chart-wizard { - .k-icon-text-wrapper { - display: flex; - align-items: center; - gap: $kendo-chart-wizard-icon-text-gap; - } - - .k-icon-background-area { - display: flex; - padding: $kendo-chart-wizard-icon-area-padding; - border-radius: $kendo-chart-wizard-icon-area-border-radius; - } - } - - .k-chart-types-wrapper { - display: flex; - flex-direction: column; - gap: $kendo-chart-wizard-chart-type-spacing; - } - - .k-chart-wizard-splitter { - height: 100%; - - .k-tabstrip { - width: 100%; - height: 100%; - } - } - - .k-chart-wizard-preview-pane { - padding: $kendo-chart-wizard-preview-pane-padding; - } - - .k-chart-wizard-property-pane { - padding: $kendo-chart-wizard-property-pane-padding; - } -} - +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_layout.scss" as *; @mixin kendo-chart-wizard--layout() { @include kendo-chart-wizard--layout-base(); diff --git a/packages/default/scss/chart-wizard/_theme.scss b/packages/default/scss/chart-wizard/_theme.scss index 20517f28445..9ee84a9f7b7 100644 --- a/packages/default/scss/chart-wizard/_theme.scss +++ b/packages/default/scss/chart-wizard/_theme.scss @@ -1,36 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-chart-wizard--theme-base() { - .k-chart-wizard { - .k-icon-text-wrapper { - &.k-selected { - color: $kendo-chart-wizard-chart-type-selected-color; - - .k-icon-background-area { - box-shadow: $kendo-chart-wizard-icon-area-selected-shadow; - } - } - - &:hover, - &.k-hover { - cursor: pointer; - } - - &:focus, - &.k-focus { - .k-icon-background-area { - box-shadow: $kendo-chart-wizard-icon-area-focus-shadow; - } - } - } - - .k-icon-background-area { - color: $kendo-chart-wizard-icon-area-color; - background-color: $kendo-chart-wizard-icon-area-bg; - } - } -} - +@use "@progress/kendo-theme-core/scss/components/chart-wizard/_theme.scss" as *; @mixin kendo-chart-wizard--theme() { @include kendo-chart-wizard--theme-base(); diff --git a/packages/default/scss/chart-wizard/_variables.scss b/packages/default/scss/chart-wizard/_variables.scss index becd97770c2..4c8327fa483 100644 --- a/packages/default/scss/chart-wizard/_variables.scss +++ b/packages/default/scss/chart-wizard/_variables.scss @@ -39,3 +39,17 @@ $kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default; /// The gap between the icon area and its text. /// @group chart-wizard $kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; + +@forward "@progress/kendo-theme-core/scss/components/chart-wizard/_variables.scss" with ( + $kendo-chart-wizard-icon-area-color: $kendo-chart-wizard-icon-area-color, + $kendo-chart-wizard-icon-area-bg: $kendo-chart-wizard-icon-area-bg, + $kendo-chart-wizard-icon-area-border-radius: $kendo-chart-wizard-icon-area-border-radius, + $kendo-chart-wizard-icon-area-padding: $kendo-chart-wizard-icon-area-padding, + $kendo-chart-wizard-icon-area-focus-shadow: $kendo-chart-wizard-icon-area-focus-shadow, + $kendo-chart-wizard-icon-area-selected-shadow: $kendo-chart-wizard-icon-area-selected-shadow, + $kendo-chart-wizard-chart-type-selected-color: $kendo-chart-wizard-chart-type-selected-color, + $kendo-chart-wizard-preview-pane-padding: $kendo-chart-wizard-preview-pane-padding, + $kendo-chart-wizard-property-pane-padding: $kendo-chart-wizard-property-pane-padding, + $kendo-chart-wizard-chart-type-spacing: $kendo-chart-wizard-chart-type-spacing, + $kendo-chart-wizard-icon-text-gap: $kendo-chart-wizard-icon-text-gap +); diff --git a/packages/default/scss/chat/_layout.scss b/packages/default/scss/chat/_layout.scss index 9dc10a49766..f24f5505fb4 100644 --- a/packages/default/scss/chat/_layout.scss +++ b/packages/default/scss/chat/_layout.scss @@ -1,473 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../toolbar/_variables.scss" as *; - -@mixin kendo-chat--layout-base() { - - // Chat - .k-chat { - margin: auto; - max-width: $kendo-chat-width; - height: $kendo-chat-height; - max-height: 100%; - border-width: $kendo-chat-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-chat-font-family; - font-size: $kendo-chat-font-size; - line-height: $kendo-chat-line-height; - display: flex; - flex-direction: column; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - - // Message list - .k-message-list { - display: flex; - flex: 1 1 auto; - flex-direction: column; - align-items: flex-start; - overflow-x: hidden; - overflow-y: auto; - scroll-behavior: smooth; - } - .k-message-list-content { - padding-block: $kendo-chat-message-list-padding-y; - padding-inline: $kendo-chat-message-list-padding-x; - width: 100%; - box-sizing: border-box; - position: relative; - flex: 0 0 auto; - display: flex; - flex-direction: column; - align-items: flex-start; - overflow: hidden; - - > * + * { - margin-top: $kendo-chat-message-list-spacing; - } - } - - // Message group - .k-message-group { - max-width: 80%; - background: none; - box-sizing: border-box; - display: flex; - flex-shrink: 0; - flex-direction: column; - position: relative; - } - .k-message-group:not(.k-alt) { - align-items: flex-start; - text-align: start; - - .k-message-time { - margin-inline-start: $kendo-chat-item-spacing-x; - inset-inline-start: 100%; - } - .k-message-status { - inset-inline-start: 0; - } - - .k-first .k-chat-bubble, - .k-only .k-chat-bubble { - border-bottom-left-radius: $kendo-chat-bubble-border-radius-sm; - } - .k-middle .k-chat-bubble, - .k-last .k-chat-bubble { - @include border-left-radius( $kendo-chat-bubble-border-radius-sm ); - } - } - .k-message-group.k-alt { - align-self: flex-end; - align-items: flex-end; - text-align: end; - - .k-message-time { - margin-inline-end: $kendo-chat-item-spacing-x; - inset-inline-end: 100%; - } - .k-message-status { - inset-inline-end: 0; - } - - .k-first .k-chat-bubble, - .k-only .k-chat-bubble { - border-bottom-right-radius: $kendo-chat-bubble-border-radius-sm; - } - .k-middle .k-chat-bubble, - .k-last .k-chat-bubble { - @include border-right-radius( $kendo-chat-bubble-border-radius-sm ); - } - } - - - // Message - .k-message { - max-width: 100%; - margin: $kendo-chat-bubble-spacing 0 0; - position: relative; - transition: margin .2s ease-in-out; - outline: none; - } - - - // Message meta - .k-message-time, - .k-message-status { - font-size: $kendo-chat-message-meta-font-size; - line-height: $kendo-chat-message-meta-line-height; - white-space: nowrap; - pointer-events: none; - position: absolute; - } - .k-message-time { - opacity: 0; - top: 50%; - transform: translateY(-50%); - transition: opacity .2s ease-in-out; - } - .k-message-status { - margin-top: $kendo-chat-bubble-spacing; - height: 0; - overflow: hidden; - top: 100%; - transition: height .2s ease-in-out; - } - - - // Bubble - .k-chat-bubble { - @include border-radius( $kendo-chat-bubble-border-radius ); - padding-block: $kendo-chat-bubble-padding-y; - padding-inline: $kendo-chat-bubble-padding-x; - border-width: 1px; - border-style: solid; - line-height: $kendo-chat-bubble-line-height; - word-wrap: break-word; - white-space: pre-wrap; - - a { - color: inherit; - text-decoration: underline; - } - } - - - // Message states - .k-message.k-selected { - margin-bottom: $kendo-chat-item-spacing-y; - border: 0; - color: inherit; - background: none; - - .k-message-time { opacity: 1; } - .k-message-status { height: 1.2em; } - } - .k-message-error, - .k-message-sending { - margin-bottom: $kendo-chat-item-spacing-y; - - .k-message-status { height: 1.2em; } - } - - // Avatar - .k-avatar { - margin: 0; - position: absolute; - - @at-root .k-message-group:not(.k-alt) > .k-avatar { - inset-inline-start: 0; - bottom: 0; - } - @at-root .k-message-group.k-alt > .k-avatar { - inset-inline-end: 0; - bottom: 0; - } - } - .k-avatars { - .k-message-group:not(.k-no-avatar) { - padding-inline-start: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} ); - } - .k-message-group.k-alt:not(.k-no-avatar) { - padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} ); - } - } - } - - // Author - .k-author { - margin: 0; - font-size: $kendo-chat-author-font-size; - line-height: $kendo-chat-author-line-height; - } - .k-chat .k-author { - margin: 0; // Duplicate styles because of typography module - } - - - // Timestamp - .k-chat .k-timestamp { - font-size: $kendo-chat-timestamp-font-size; - line-height: $kendo-chat-timestamp-line-height; - text-transform: $kendo-chat-timestamp-transform; - text-align: center; - align-self: stretch; - } - - - // Quick reply - .k-quick-replies { - display: block; - max-width: 100%; // IE fix - } - .k-quick-reply { - @include border-radius( 100px ); - margin-inline-end: $kendo-chat-quick-reply-spacing; - margin-block-end: calc( #{$kendo-chat-quick-reply-spacing} / 2 ); - padding-block: $kendo-chat-quick-reply-padding-y; - padding-inline: $kendo-chat-quick-reply-padding-x; - border-width: 1px; - border-style: solid; - line-height: $kendo-chat-quick-reply-line-height; - cursor: pointer; - user-select: none; - display: inline-block; - flex: 0 0 auto; - transition-property: color, background-color, border-color; - transition-duration: .2s; - transition-timing-function: ease-in-out; - outline: none; - } - - - // Scrollable quick replies - .k-scrollable-quick-replies { - margin-inline-start: -$kendo-chat-message-list-padding-y; - margin-inline-end: -$kendo-chat-message-list-padding-y; - padding-inline-start: $kendo-chat-message-list-padding-y; - padding-inline-end: $kendo-chat-message-list-padding-y; - display: flex; - flex-flow: row nowrap; - flex: 0 0 auto; - overflow-x: auto; - overflow-y: hidden; - - &::-webkit-scrollbar { - display: none; - } - - .k-quick-reply { - margin: 0; - } - .k-quick-reply + .k-quick-reply { - margin-inline-start: $kendo-chat-quick-reply-spacing; - } - } - - - // Message box - .k-message-box { - width: 100%; - height: auto; - box-sizing: border-box; - border-width: 1px 0 0; - border-style: solid; - border-color: inherit !important; // stylelint-disable-line declaration-no-important - border-radius: 0 !important; // stylelint-disable-line declaration-no-important - flex: none; - display: flex; - flex-flow: row nowrap; - align-items: center; - - &:focus, - &.k-focus, - &:focus-within { - outline: 0; - box-shadow: none; - } - - // Input - .k-input {} - - .k-button { - border-width: 0; - flex-shrink: 0; - - svg { - width: 20px; - height: 20px; - fill: currentColor; - display: inline-block; - } - } - } - - .k-rtl, - [dir="rtl"] { - .k-message-box { - .k-button { - transform: scaleX(-1); - } - } - } - - - // Card list - .k-chat .k-card-list { - margin: $kendo-chat-bubble-spacing 0 0; - } - - .k-message-group.k-alt + .k-card-list, - .k-message-group.k-alt + kendo-chat-message-attachments.k-card-list { - align-self: flex-end; - } - - .k-chat .k-card-deck { - max-width: calc(100% + calc( #{$kendo-chat-message-list-padding-y} * 2 )); // prevent overflowing in the parent element - box-sizing: border-box; - margin-inline-start: calc( #{$kendo-chat-message-list-padding-y} * -1 ); - margin-inline-end: calc( #{$kendo-chat-message-list-padding-y} * -1 ); - padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x; - overflow: hidden; - overflow-x: auto; - scroll-behavior: smooth; - } - .k-chat .k-card-deck .k-card { - width: 200px; - } - - .k-chat .k-card-deck-scrollwrap { - margin-right: calc( #{$kendo-chat-message-list-padding-y} * -1 ); - margin-left: calc( #{$kendo-chat-message-list-padding-y} * -1 ); - padding-left: $kendo-chat-message-list-padding-y; - padding-right: $kendo-chat-message-list-padding-y; - } - - .k-chat .k-card-deck-scrollwrap > .k-card-deck { - // hide scrollbar in chat - $scrollbar-size: 20px; - - margin-bottom: -$scrollbar-size; - padding-bottom: $scrollbar-size; - } - - // Deck - .k-chat .k-card-deck .k-card-wrap { - display: flex; - flex-flow: row nowrap; - align-items: stretch; - flex: 0 0 auto; - padding-bottom: 5px; // accommodate for focused box shadow on OSX - - .k-card { - flex: 0 0 auto; - } - - &.k-selected { - background: none; - } - } - - - // Local variables - $kendo-chat-typing-indicator-dot-size: 8px !default; - $kendo-chat-typing-indicator-dot-spacing: 5px !default; - - // Typing indicator - .k-typing-indicator { - padding: 0; - border-radius: 50px; - display: inline-flex; - flex-flow: row nowrap; - - span { - width: $kendo-chat-typing-indicator-dot-size; - height: $kendo-chat-typing-indicator-dot-size; - border-radius: 50%; - flex: 0 0 $kendo-chat-typing-indicator-dot-size; - background-color: currentColor; - opacity: .4; - @for $i from 1 through 3 { - &:nth-of-type(#{$i}) { - animation: 1s k-animation-blink infinite ($i * .3333s); - } - } - } - span + span { - margin-left: $kendo-chat-typing-indicator-dot-spacing; - } - - @keyframes k-animation-blink { - 50% { - opacity: 1; - } - } - - } - - - // Chat toolbar - .k-chat-toolbar, - .k-chat .k-toolbar-box { - padding-block: $kendo-chat-toolbar-padding-y; - padding-inline: $kendo-chat-toolbar-padding-x; - width: 100%; - border-width: 1px 0 0; - box-sizing: border-box; - flex: none; - overflow: hidden; - position: relative; - gap: $kendo-toolbar-md-spacing; - - &::before { - display: none; - } - - .k-button-list { - // Needed for native scrolling. Will uncoment when it's implemented. - // margin-bottom: -20px; - // padding-bottom: 20px; - display: flex; - flex-flow: row nowrap; - overflow: hidden; - // overflow-x: auto; - scroll-behavior: smooth; - } - - .k-button { - flex: none; - } - - - .k-scroll-button { - // IMPORTANT: if we don't set padding, the browser will set for us - padding: 0 k-spacing(1); - height: 100%; - aspect-ratio: auto; - position: absolute; - z-index: 2; - top: 0; - - .k-button-icon { - min-width: auto; - min-height: auto; - } - } - .k-scroll-button-left { - left: 0; - } - .k-scroll-button-right { - right: 0; - } - - - } -} +@use "@progress/kendo-theme-core/scss/components/chat/_layout.scss" as *; @mixin kendo-chat--layout() { diff --git a/packages/default/scss/chat/_theme.scss b/packages/default/scss/chat/_theme.scss index a71efcb0323..3f254386ee9 100644 --- a/packages/default/scss/chat/_theme.scss +++ b/packages/default/scss/chat/_theme.scss @@ -1,102 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-chat--theme-base() { - - // Chat - .k-chat { - @include fill( - $kendo-chat-text, - $kendo-chat-bg, - $kendo-chat-border - ); - - - // Message meta - .k-timestamp { - @include fill( - $kendo-chat-timestamp-text, - $kendo-chat-timestamp-bg - ); - } - .k-author { - font-weight: bold; - } - - - // Bubbles - .k-chat-bubble { - @include fill( - $kendo-chat-bubble-text, - $kendo-chat-bubble-bg, - $kendo-chat-bubble-border - ); - @include box-shadow( $kendo-chat-bubble-shadow ); - transition: $kendo-transition; - order: -1; - - a { color: $kendo-link-text; } - a:hover { color: $kendo-link-hover-text; } - } - .k-chat-bubble:hover { - @include box-shadow( $kendo-chat-bubble-hover-shadow ); - } - .k-selected .k-chat-bubble { - @include box-shadow( $kendo-chat-bubble-selected-shadow ); - } - - .k-alt .k-chat-bubble { - @include fill( - $kendo-chat-alt-bubble-text, - $kendo-chat-alt-bubble-bg, - $kendo-chat-alt-bubble-border - ); - @include box-shadow( $kendo-chat-alt-bubble-shadow ); - } - .k-alt .k-chat-bubble:hover { - @include box-shadow( $kendo-chat-alt-bubble-hover-shadow ); - } - .k-alt .k-selected .k-chat-bubble { - @include box-shadow( $kendo-chat-alt-bubble-selected-shadow ); - } - - - // Quick replies - .k-quick-reply { - @include fill( - $kendo-chat-quick-reply-text, - $kendo-chat-quick-reply-bg, - $kendo-chat-quick-reply-border - ); - - &:hover, - &.k-hover { - @include fill( - $kendo-chat-quick-reply-hover-text, - $kendo-chat-quick-reply-hover-bg, - $kendo-chat-quick-reply-hover-border - ); - } - - &:focus, - &.k-focus { - @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), rgba( $kendo-color-primary, $kendo-chat-quick-reply-shadow-opacity )), true, true ); - } - } - } - - - // Toolbar - .k-chat-toolbar, - .k-chat .k-toolbar-box { - @include fill( - $kendo-chat-toolbar-text, - $kendo-chat-toolbar-bg, - $kendo-chat-toolbar-border - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/chat/_theme.scss" as *; @mixin kendo-chat--theme() { diff --git a/packages/default/scss/chat/_variables.scss b/packages/default/scss/chat/_variables.scss index cd869ba2061..c12deb6e020 100644 --- a/packages/default/scss/chat/_variables.scss +++ b/packages/default/scss/chat/_variables.scss @@ -213,3 +213,70 @@ $kendo-chat-quick-reply-shadow-spread: 2px !default; /// The shadow opacity of the focused Chat quick reply. /// @group chat $kendo-chat-quick-reply-shadow-opacity: .3 !default; + +@forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with ( + $kendo-chat-padding-x: $kendo-chat-padding-x, + $kendo-chat-padding-y: $kendo-chat-padding-y, + $kendo-chat-width: $kendo-chat-width, + $kendo-chat-height: $kendo-chat-height, + $kendo-chat-border-width: $kendo-chat-border-width, + $kendo-chat-font-family: $kendo-chat-font-family, + $kendo-chat-font-size: $kendo-chat-font-size, + $kendo-chat-line-height: $kendo-chat-line-height, + $kendo-chat-item-spacing-x: $kendo-chat-item-spacing-x, + $kendo-chat-item-spacing-y: $kendo-chat-item-spacing-y, + $kendo-chat-message-list-padding-x: $kendo-chat-message-list-padding-x, + $kendo-chat-message-list-padding-y: $kendo-chat-message-list-padding-y, + $kendo-chat-message-list-spacing: $kendo-chat-message-list-spacing, + $kendo-chat-timestamp-font-size: $kendo-chat-timestamp-font-size, + $kendo-chat-timestamp-line-height: $kendo-chat-timestamp-line-height, + $kendo-chat-timestamp-transform: $kendo-chat-timestamp-transform, + $kendo-chat-timestamp-text: $kendo-chat-timestamp-text, + $kendo-chat-timestamp-bg: $kendo-chat-timestamp-bg, + $kendo-chat-message-meta-font-size: $kendo-chat-message-meta-font-size, + $kendo-chat-message-meta-line-height: $kendo-chat-message-meta-line-height, + $kendo-chat-author-font-size: $kendo-chat-author-font-size, + $kendo-chat-author-line-height: $kendo-chat-author-line-height, + $kendo-chat-bubble-padding-x: $kendo-chat-bubble-padding-x, + $kendo-chat-bubble-padding-y: $kendo-chat-bubble-padding-y, + $kendo-chat-bubble-spacing: $kendo-chat-bubble-spacing, + $kendo-chat-bubble-line-height: $kendo-chat-bubble-line-height, + $kendo-chat-bubble-border-radius: $kendo-chat-bubble-border-radius, + $kendo-chat-bubble-border-radius-sm: $kendo-chat-bubble-border-radius-sm, + $kendo-chat-avatar-size: $kendo-chat-avatar-size, + $kendo-chat-avatar-spacing: $kendo-chat-avatar-spacing, + $kendo-chat-toolbar-padding-x: $kendo-chat-toolbar-padding-x, + $kendo-chat-toolbar-padding-y: $kendo-chat-toolbar-padding-y, + $kendo-chat-toolbar-spacing: $kendo-chat-toolbar-spacing, + $kendo-chat-toolbar-bg: $kendo-chat-toolbar-bg, + $kendo-chat-toolbar-text: $kendo-chat-toolbar-text, + $kendo-chat-toolbar-border: $kendo-chat-toolbar-border, + $kendo-chat-quick-reply-padding-x: $kendo-chat-quick-reply-padding-x, + $kendo-chat-quick-reply-padding-y: $kendo-chat-quick-reply-padding-y, + $kendo-chat-quick-reply-spacing: $kendo-chat-quick-reply-spacing, + $kendo-chat-quick-reply-line-height: $kendo-chat-quick-reply-line-height, + $kendo-chat-bg: $kendo-chat-bg, + $kendo-chat-text: $kendo-chat-text, + $kendo-chat-border: $kendo-chat-border, + $kendo-chat-bubble-bg: $kendo-chat-bubble-bg, + $kendo-chat-bubble-text: $kendo-chat-bubble-text, + $kendo-chat-bubble-border: $kendo-chat-bubble-border, + $kendo-chat-bubble-shadow: $kendo-chat-bubble-shadow, + $kendo-chat-bubble-hover-shadow: $kendo-chat-bubble-hover-shadow, + $kendo-chat-bubble-selected-shadow: $kendo-chat-bubble-selected-shadow, + $kendo-chat-alt-bubble-bg: $kendo-chat-alt-bubble-bg, + $kendo-chat-alt-bubble-text: $kendo-chat-alt-bubble-text, + $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-border, + $kendo-chat-alt-bubble-shadow: $kendo-chat-alt-bubble-shadow, + $kendo-chat-alt-bubble-hover-shadow: $kendo-chat-alt-bubble-hover-shadow, + $kendo-chat-alt-bubble-selected-shadow: $kendo-chat-alt-bubble-selected-shadow, + $kendo-chat-quick-reply-bg: $kendo-chat-quick-reply-bg, + $kendo-chat-quick-reply-text: $kendo-chat-quick-reply-text, + $kendo-chat-quick-reply-border: $kendo-chat-quick-reply-border, + $kendo-chat-quick-reply-hover-bg: $kendo-chat-quick-reply-hover-bg, + $kendo-chat-quick-reply-hover-text: $kendo-chat-quick-reply-hover-text, + $kendo-chat-quick-reply-hover-border: $kendo-chat-quick-reply-hover-border, + $kendo-chat-quick-reply-shadow-blur: $kendo-chat-quick-reply-shadow-blur, + $kendo-chat-quick-reply-shadow-spread: $kendo-chat-quick-reply-shadow-spread, + $kendo-chat-quick-reply-shadow-opacity: $kendo-chat-quick-reply-shadow-opacity +); diff --git a/packages/default/scss/checkbox/_layout.scss b/packages/default/scss/checkbox/_layout.scss index c9197227355..6a08639c6e8 100644 --- a/packages/default/scss/checkbox/_layout.scss +++ b/packages/default/scss/checkbox/_layout.scss @@ -1,233 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-checkbox--layout-base() { - - // Checkbox - .k-checkbox { - margin: 0; - padding: 0; - line-height: initial; - border-width: $kendo-checkbox-border-width; - border-style: solid; - outline: 0; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - display: inline-block; - flex: none; - vertical-align: middle; - position: relative; - cursor: pointer; - -webkit-appearance: none; - } - - - // Checkbox indicator - .k-checkbox::before { - @if $kendo-checkbox-indicator-type == "image" { - content: ""; - display: block; - width: 100%; - height: 100%; - mask-repeat: no-repeat; - } - @if $kendo-checkbox-indicator-type == "glyph" { - content: $kendo-checkbox-checked-glyph; - width: 1em; - height: 1em; - font-family: $kendo-checkbox-glyph-font-family; - line-height: 1; - transform: translate(-50%, -50%) scale(0); - overflow: hidden; - position: absolute; - top: 50%; - left: 50%; - } - } - - // Checked state - .k-checkbox:checked, - .k-checkbox.k-checked { - @if $kendo-checkbox-indicator-type == "image" { - &::before { - background-color: currentColor; - mask-image: $kendo-checkbox-checked-image; - } - } - - @if $kendo-checkbox-indicator-type == "glyph" { - &::before { - transform: translate(-50%, -50%) scale(1); - } - } - } - - - // Indeterminate state - .k-checkbox:indeterminate, - .k-checkbox.k-indeterminate { - @if $kendo-checkbox-indicator-type == "image" { - &::before { - background-color: currentColor; - mask-image: $kendo-checkbox-indeterminate-image; - } - } - - @if $kendo-checkbox-indicator-type == "glyph" { - &::before { - content: $kendo-checkbox-indeterminate-glyph; - transform: scale(1) translate(-50%, -50%); - } - } - } - - - // Disabled state - .k-checkbox:disabled, - .k-checkbox.k-disabled { - @include disabled( $kendo-disabled-styling... ); - } - - - // Checkbox wrap - .k-checkbox-wrap { - flex: none; - display: inline-flex; - flex-flow: row nowrap; - gap: 0; - align-items: center; - align-self: flex-start; - vertical-align: middle; - position: relative; - - &::before { - content: "\200b"; - width: 0px; - overflow: hidden; - flex: none; - display: inline-block; - vertical-align: top; - } - } - - - // Checkbox label - .k-checkbox-label { - margin: 0; - padding: 0; - display: inline-flex; - align-items: flex-start; - gap: $kendo-checkbox-label-margin-x; - vertical-align: middle; - position: relative; - cursor: pointer; - - .k-ripple { - // Hide ripple temporarily - visibility: hidden !important; // stylelint-disable-line declaration-no-important - } - } - .k-checkbox + .k-label, - .k-checkbox-wrap + .k-label, - .k-checkbox + .k-checkbox-label, - .k-checkbox-wrap + .k-checkbox-label { - display: inline; - margin-inline-start: $kendo-checkbox-label-margin-x; - } - - - // Empty label - .k-checkbox-label:empty { - display: none !important; // stylelint-disable-line declaration-no-important - } - .k-checkbox-label.k-no-text { - min-width: 1px; - } - - - // Checkbox list - .k-checkbox-list { - margin: 0; - padding: 0; - display: flex; - flex-flow: column nowrap; - gap: 0; - list-style: none; - } - .k-checkbox-item, - .k-checkbox-list-item { - padding-block: $kendo-checkbox-list-item-padding-y; - padding-inline: $kendo-checkbox-list-item-padding-x; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - gap: k-spacing(1); - - .k-checkbox-label { - margin: 0; - } - } - .k-checkbox-list-horizontal, - .k-checkbox-list.k-list-horizontal { - display: flex; - flex-flow: row wrap; - gap: $kendo-checkbox-list-spacing; - } - - - // Ripple - .k-ripple-container { - .k-checkbox::after { - content: ""; - display: block; - position: absolute; - left: 50%; - top: 50%; - border-radius: 100%; - z-index: -1; - transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); - transform: translate(-50%, -50%) scale(0); - transform-origin: center center; - } - - .k-checkbox:focus, - .k-checkbox.k-focus { - box-shadow: none !important; // stylelint-disable-line declaration-no-important - } - - .k-checkbox:disabled::after, - .k-checkbox.k-disabled::after { - display: none; - } - } - - - // Checkbox size - @each $size, $size-props in $kendo-checkbox-sizes { - $_size: map.get( $size-props, size ); - $_glyph-size: map.get( $size-props, glyph-size ); - $_ripple-size: map.get( $size-props, ripple-size ); - - .k-checkbox-#{$size} { - width: $_size; - height: $_size; - - &::before { - font-size: $_glyph-size; - } - } - .k-ripple-container { - .k-checkbox-#{$size}::after { - width: $_ripple-size; - height: $_ripple-size; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *; @mixin kendo-checkbox--layout() { diff --git a/packages/default/scss/checkbox/_theme.scss b/packages/default/scss/checkbox/_theme.scss index 62a9e6021d1..202d8e6dc62 100644 --- a/packages/default/scss/checkbox/_theme.scss +++ b/packages/default/scss/checkbox/_theme.scss @@ -1,107 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-checkbox--theme-base() { - - // Checkbox - .k-checkbox { - @include fill( - $kendo-checkbox-text, - $kendo-checkbox-bg, - $kendo-checkbox-border - ); - } - - - // Hover state - .k-checkbox:hover, - .k-checkbox.k-hover { - @include fill( - $kendo-checkbox-hover-text, - $kendo-checkbox-hover-bg, - $kendo-checkbox-hover-border - ); - } - - - // Focus state - .k-checkbox:focus, - .k-checkbox.k-focus { - @include fill( $border: $kendo-checkbox-focus-border ); - @include focus-indicator( $kendo-checkbox-focus-shadow ); - } - - - // Indeterminate - .k-checkbox:indeterminate, - .k-checkbox.k-indeterminate { - @include fill( - $kendo-checkbox-indeterminate-text, - $kendo-checkbox-indeterminate-bg, - $kendo-checkbox-indeterminate-border - ); - } - - - // Checked - .k-checkbox:checked, - .k-checkbox.k-checked { - @include fill( - $kendo-checkbox-checked-text, - $kendo-checkbox-checked-bg, - $kendo-checkbox-checked-border - ); - } - .k-checkbox:checked:focus, - .k-checkbox.k-checked.k-focus { - @include fill( $border: $kendo-checkbox-focus-checked-border ); - @include focus-indicator( $kendo-checkbox-focus-checked-shadow ); - } - - - // Disabled - .k-checkbox:disabled, - .k-checkbox.k-disabled { - @include fill( - $kendo-checkbox-disabled-text, - $kendo-checkbox-disabled-bg, - $kendo-checkbox-disabled-border - ); - } - .k-checkbox:checked:disabled, - .k-checkbox:indeterminate:disabled, - .k-checkbox.k-checked.k-disabled, - .k-checkbox.k-indeterminate.k-disabled { - @include fill( - $kendo-checkbox-disabled-checked-text, - $kendo-checkbox-disabled-checked-bg, - $kendo-checkbox-disabled-checked-border - ); - } - - - // Invalid - .k-checkbox.k-invalid { - @include fill( $border: $kendo-checkbox-invalid-border ); - } - .k-checkbox.k-invalid + .k-checkbox-label { - @include fill( $color: $kendo-checkbox-invalid-text ); - } - - - // Ripple - .k-checkbox-wrap .k-ripple-blob { - color: $kendo-checkbox-ripple-bg; - opacity: $kendo-checkbox-ripple-opacity; - } - .k-ripple-container { - .k-checkbox::after { - background: $kendo-checkbox-ripple-bg; - opacity: $kendo-checkbox-ripple-opacity; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *; @mixin kendo-checkbox--theme() { diff --git a/packages/default/scss/checkbox/_variables.scss b/packages/default/scss/checkbox/_variables.scss index 3f484685001..772866f4d15 100644 --- a/packages/default/scss/checkbox/_variables.scss +++ b/packages/default/scss/checkbox/_variables.scss @@ -194,3 +194,54 @@ $kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default; /// The opacity of the CheckBox' ripple. /// @group checkbox $kendo-checkbox-ripple-opacity: .25 !default; + +@forward "@progress/kendo-theme-core/scss/components/checkbox/_variables.scss" with ( + $kendo-checkbox-border-width: $kendo-checkbox-border-width, + $kendo-checkbox-sm-size: $kendo-checkbox-sm-size, + $kendo-checkbox-md-size: $kendo-checkbox-md-size, + $kendo-checkbox-lg-size: $kendo-checkbox-lg-size, + $kendo-checkbox-sm-glyph-size: $kendo-checkbox-sm-glyph-size, + $kendo-checkbox-md-glyph-size: $kendo-checkbox-md-glyph-size, + $kendo-checkbox-lg-glyph-size: $kendo-checkbox-lg-glyph-size, + $kendo-checkbox-sm-ripple-size: $kendo-checkbox-sm-ripple-size, + $kendo-checkbox-md-ripple-size: $kendo-checkbox-md-ripple-size, + $kendo-checkbox-lg-ripple-size: $kendo-checkbox-lg-ripple-size, + $kendo-checkbox-sizes: $kendo-checkbox-sizes, + $kendo-checkbox-bg: $kendo-checkbox-bg, + $kendo-checkbox-text: $kendo-checkbox-text, + $kendo-checkbox-border: $kendo-checkbox-border, + $kendo-checkbox-hover-bg: $kendo-checkbox-hover-bg, + $kendo-checkbox-hover-text: $kendo-checkbox-hover-text, + $kendo-checkbox-hover-border: $kendo-checkbox-hover-border, + $kendo-checkbox-checked-bg: $kendo-checkbox-checked-bg, + $kendo-checkbox-checked-text: $kendo-checkbox-checked-text, + $kendo-checkbox-checked-border: $kendo-checkbox-checked-border, + $kendo-checkbox-indeterminate-bg: $kendo-checkbox-indeterminate-bg, + $kendo-checkbox-indeterminate-text: $kendo-checkbox-indeterminate-text, + $kendo-checkbox-indeterminate-border: $kendo-checkbox-indeterminate-border, + $kendo-checkbox-focus-border: $kendo-checkbox-focus-border, + $kendo-checkbox-focus-shadow: $kendo-checkbox-focus-shadow, + $kendo-checkbox-focus-checked-border: $kendo-checkbox-focus-checked-border, + $kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow, + $kendo-checkbox-disabled-bg: $kendo-checkbox-disabled-bg, + $kendo-checkbox-disabled-text: $kendo-checkbox-disabled-text, + $kendo-checkbox-disabled-border: $kendo-checkbox-disabled-border, + $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg, + $kendo-checkbox-disabled-checked-text: $kendo-checkbox-disabled-checked-text, + $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-border, + $kendo-checkbox-invalid-bg: $kendo-checkbox-invalid-bg, + $kendo-checkbox-invalid-text: $kendo-checkbox-invalid-text, + $kendo-checkbox-invalid-border: $kendo-checkbox-invalid-border, + $kendo-checkbox-indicator-type: $kendo-checkbox-indicator-type, + $kendo-checkbox-glyph-font-family: $kendo-checkbox-glyph-font-family, + $kendo-checkbox-checked-glyph: $kendo-checkbox-checked-glyph, + $kendo-checkbox-indeterminate-glyph: $kendo-checkbox-indeterminate-glyph, + $kendo-checkbox-checked-image: $kendo-checkbox-checked-image, + $kendo-checkbox-indeterminate-image: $kendo-checkbox-indeterminate-image, + $kendo-checkbox-label-margin-x: $kendo-checkbox-label-margin-x, + $kendo-checkbox-list-spacing: $kendo-checkbox-list-spacing, + $kendo-checkbox-list-item-padding-x: $kendo-checkbox-list-item-padding-x, + $kendo-checkbox-list-item-padding-y: $kendo-checkbox-list-item-padding-y, + $kendo-checkbox-ripple-bg: $kendo-checkbox-ripple-bg, + $kendo-checkbox-ripple-opacity: $kendo-checkbox-ripple-opacity +); diff --git a/packages/default/scss/chip/_layout.scss b/packages/default/scss/chip/_layout.scss index f03268bc697..192a18861c7 100644 --- a/packages/default/scss/chip/_layout.scss +++ b/packages/default/scss/chip/_layout.scss @@ -1,167 +1,4 @@ -@use "./_variables.scss" as *; -@use "sass:map"; - -@mixin kendo-chip--layout-base() { - - // Chip - .k-chip { - padding-block: $kendo-chip-padding-y; - padding-inline: $kendo-chip-padding-x; - border-width: $kendo-chip-border-width; - border-style: solid; - outline: 0; - font-family: var( --kendo-font-family, inherit ); - font-size: $kendo-chip-font-size; - line-height: $kendo-chip-line-height; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - justify-content: center; - gap: $kendo-chip-spacing; - position: relative; - overflow: hidden; - cursor: pointer; - user-select: none; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .k-selected-icon-wrapper { - display: none !important; // stylelint-disable-line declaration-no-important - } - } - - - // Chip content - .k-chip-content { - padding-block: .5em; - padding-inline: 0; - margin-block: -.5em; - margin-inline: 0; - min-width: 0; - display: flex; - flex-flow: row nowrap; - align-items: center; - overflow: hidden; - flex: 1 1 auto; - - // Adjustment for kendo-icon-wrapper - .k-icon-wrapper-host { - display: initial; - } - } - .k-chip-content:first-child { - margin-inline-start: $kendo-chip-spacing; - } - .k-chip-content:last-child { - margin-inline-end: $kendo-chip-spacing; - } - - - // Chip text - .k-chip-text, - .k-chip-label { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - flex: 1 1 auto; - } - - - // Chip avatar - .k-chip-avatar { - border-radius: 50%; - background-size: cover; - background-position: center; - flex: none; - } - - - // Chip icon - .k-chip-icon { - display: flex; - align-items: center; - justify-content: center; - flex: none; - } - - - // Actions - .k-chip-actions { - margin-block: -5em; - margin-inline: 0; - flex: none; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-self: center; - } - .k-chip-action { - flex: none; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-self: center; - } - - - // Legacy chip icons - .k-remove-icon { - font-size: inherit; - display: flex; - align-items: center; - justify-content: center; - flex: none; - } - - - // Chip list - .k-chip-list { - min-width: 0px; - display: inline-flex; - flex-wrap: wrap; - align-items: center; - position: relative; - } - - // Sizes - @each $size, $size-props in $kendo-chip-sizes { - $_padding-x: map.get( $size-props, padding-x ); - $_padding-y: map.get( $size-props, padding-y ); - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_avatar-size: 1em; - - .k-chip-#{$size} { - padding-block: $_padding-y; - padding-inline: $_padding-x; - font-size: $_font-size; - line-height: $_line-height; - - .k-chip-action { - padding: $_padding-y; - } - } - - .k-chip-avatar { - width: $_avatar-size; - height: $_avatar-size; - flex-basis: $_avatar-size; - } - - } - - // Sizes - @each $name, $size in $kendo-chip-list-sizes { - .k-chip-list-#{$name} { - gap: $size; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *; @mixin kendo-chip--layout() { diff --git a/packages/default/scss/chip/_theme.scss b/packages/default/scss/chip/_theme.scss index e67f2cee94a..a1d070e0881 100644 --- a/packages/default/scss/chip/_theme.scss +++ b/packages/default/scss/chip/_theme.scss @@ -1,149 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-chip--theme-base() { - - // Solid - @each $name, $color in $kendo-chip-theme-colors { - .k-chip-solid-#{$name} { - - @if ($name == "base") { - @include fill( - $kendo-chip-solid-text, - $kendo-chip-solid-bg, - $kendo-chip-solid-border, - $kendo-chip-solid-gradient - ); - - &:focus, - &.k-focus { - @include fill( $bg: $kendo-chip-solid-focus-bg ); - @include focus-indicator( $kendo-chip-solid-shadow ); - } - - &:hover, - &.k-hover { - @include fill( $bg: $kendo-chip-solid-hover-bg ); - } - - &.k-selected { - @include fill( $bg: $kendo-chip-solid-selected-bg ); - } - } @else { - @include fill( - if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )), - if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )), - if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )), - $kendo-chip-solid-gradient - ); - - &:focus, - &.k-focus { - @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) ); - } - - &:hover, - &.k-hover { - @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) ); - } - - &.k-selected { - @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) ); - } - } - } - } - - - // Outline - @each $name, $color in $kendo-chip-theme-colors { - .k-chip-outline-#{$name} { - @if ($name == "base") { - @include fill( - $kendo-chip-outline-text, - transparent, - $kendo-chip-outline-border - ); - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-chip-outline-shadow ); - } - - &:hover, - &.k-hover { - @include fill( - $color: $kendo-chip-outline-hover-text, - $bg: $kendo-chip-outline-hover-bg - ); - } - - &.k-selected { - @include fill( - $color: $kendo-chip-outline-selected-text, - $bg: $kendo-chip-outline-selected-bg - ); - } - } @else if ($name == "warning") { - @include fill( - if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)), - if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), - if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) - ); - - &:focus, - &.k-focus { - @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); - } - - &:hover, - &.k-hover { - @include fill( - $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), - $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) - ); - } - - &.k-selected { - @include fill( - $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), - $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) - ); - } - } @else { - @include fill( - if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )), - if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), - if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )) - ); - - &:focus, - &.k-focus { - @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); - } - - &:hover, - &.k-hover { - @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), - if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )), - if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )) - ); - } - - &.k-selected { - @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), - if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )), - if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )) - ); - } - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *; @mixin kendo-chip--theme() { diff --git a/packages/default/scss/chip/_variables.scss b/packages/default/scss/chip/_variables.scss index c20fa040090..f74bfc09ffc 100644 --- a/packages/default/scss/chip/_variables.scss +++ b/packages/default/scss/chip/_variables.scss @@ -180,3 +180,49 @@ $kendo-chip-list-sizes: ( md: k-spacing(1), lg: k-spacing(1) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with ( + $kendo-chip-border-width: $kendo-chip-border-width, + $kendo-chip-spacing: $kendo-chip-spacing, + $kendo-chip-padding-x: $kendo-chip-padding-x, + $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x, + $kendo-chip-md-padding-x: $kendo-chip-md-padding-x, + $kendo-chip-lg-padding-x: $kendo-chip-lg-padding-x, + $kendo-chip-padding-y: $kendo-chip-padding-y, + $kendo-chip-sm-padding-y: $kendo-chip-sm-padding-y, + $kendo-chip-md-padding-y: $kendo-chip-md-padding-y, + $kendo-chip-lg-padding-y: $kendo-chip-lg-padding-y, + $kendo-chip-font-size: $kendo-chip-font-size, + $kendo-chip-sm-font-size: $kendo-chip-sm-font-size, + $kendo-chip-md-font-size: $kendo-chip-md-font-size, + $kendo-chip-lg-font-size: $kendo-chip-lg-font-size, + $kendo-chip-line-height: $kendo-chip-line-height, + $kendo-chip-sm-line-height: $kendo-chip-sm-line-height, + $kendo-chip-md-line-height: $kendo-chip-md-line-height, + $kendo-chip-lg-line-height: $kendo-chip-lg-line-height, + $kendo-chip-calc-size: $kendo-chip-calc-size, + $kendo-chip-sm-calc-size: $kendo-chip-sm-calc-size, + $kendo-chip-sizes: $kendo-chip-sizes, + $kendo-chip-base-bg: $kendo-chip-base-bg, + $kendo-chip-theme-colors: $kendo-chip-theme-colors, + $kendo-chip-solid-bg: $kendo-chip-solid-bg, + $kendo-chip-solid-text: $kendo-chip-solid-text, + $kendo-chip-solid-border: $kendo-chip-solid-border, + $kendo-chip-solid-shadow: $kendo-chip-solid-shadow, + $kendo-chip-solid-gradient: $kendo-chip-solid-gradient, + $kendo-chip-solid-focus-bg: $kendo-chip-solid-focus-bg, + $kendo-chip-solid-focus-text: $kendo-chip-solid-focus-text, + $kendo-chip-solid-hover-bg: $kendo-chip-solid-hover-bg, + $kendo-chip-solid-hover-text: $kendo-chip-solid-hover-text, + $kendo-chip-solid-selected-bg: $kendo-chip-solid-selected-bg, + $kendo-chip-solid-selected-text: $kendo-chip-solid-selected-text, + $kendo-chip-outline-bg: $kendo-chip-outline-bg, + $kendo-chip-outline-text: $kendo-chip-outline-text, + $kendo-chip-outline-border: $kendo-chip-outline-border, + $kendo-chip-outline-shadow: $kendo-chip-outline-shadow, + $kendo-chip-outline-hover-bg: $kendo-chip-outline-hover-bg, + $kendo-chip-outline-hover-text: $kendo-chip-outline-hover-text, + $kendo-chip-outline-selected-bg: $kendo-chip-outline-selected-bg, + $kendo-chip-outline-selected-text: $kendo-chip-outline-selected-text, + $kendo-chip-list-sizes: $kendo-chip-list-sizes +); diff --git a/packages/default/scss/color-preview/_layout.scss b/packages/default/scss/color-preview/_layout.scss index f7f021db673..64faf8bbef5 100644 --- a/packages/default/scss/color-preview/_layout.scss +++ b/packages/default/scss/color-preview/_layout.scss @@ -1,82 +1,4 @@ -@use "./_variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-color-preview--layout-base() { - - // Color Preview - .k-color-preview { - width: 100%; - height: 100%; - border-width: $kendo-color-preview-border-width; - border-radius: $kendo-color-preview-border-radius; - box-sizing: border-box; - border-style: solid; - display: inline-flex; - flex-flow: row nowrap; - position: relative; - overflow: hidden; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Current Color - .k-coloreditor-current-color { - cursor: pointer; - } - - - // Icon color preview - .k-icon-color-preview { - border-width: 0; - border-radius: 0; - display: flex; - flex-flow: column nowrap; - align-items: center; - justify-content: center; - gap: 2px; - - .k-color-preview-mask { - width: calc( #{$kendo-icon-size} - 2px ); - height: 2px; - } - } - - - // Color Preview Mask - .k-color-preview-mask { - width: 100%; - height: 100%; - position: relative; - } - .k-color-preview-mask::before { - content: ""; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: -1; - background: $kendo-color-preview-transparent-color-image; - background-size: contain; - background-position: 0 0; - } - - - // No Color - .k-no-color .k-color-preview-mask::before { - content: ""; - background-color: $kendo-color-preview-no-color-bg; - background-image: $kendo-color-preview-no-color-image; - background-size: 100% 100%; - background-position: 0 0; - } - -} +@use "@progress/kendo-theme-core/scss/components/color-preview/_layout.scss" as *; @mixin kendo-color-preview--layout() { diff --git a/packages/default/scss/color-preview/_theme.scss b/packages/default/scss/color-preview/_theme.scss index bbcb394c985..f91de46dd03 100644 --- a/packages/default/scss/color-preview/_theme.scss +++ b/packages/default/scss/color-preview/_theme.scss @@ -1,23 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-color-preview--theme-base() { - - // Color Preview - .k-color-preview { - @include fill( - $kendo-color-preview-text, - $kendo-color-preview-bg, - $kendo-color-preview-border - ); - - &:hover, - &.k-hover { - @include fill( $border: $kendo-color-preview-hover-border ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/color-preview/_theme.scss" as *; @mixin kendo-color-preview--theme() { diff --git a/packages/default/scss/color-preview/_variables.scss b/packages/default/scss/color-preview/_variables.scss index 041906242fa..7c3ff364c44 100644 --- a/packages/default/scss/color-preview/_variables.scss +++ b/packages/default/scss/color-preview/_variables.scss @@ -15,3 +15,17 @@ $kendo-color-preview-no-color-border: null !default; $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,") ) !default; $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default; + +@forward "@progress/kendo-theme-core/scss/components/color-preview/_variables.scss" with ( + $kendo-color-preview-border-radius: $kendo-color-preview-border-radius, + $kendo-color-preview-border-width: $kendo-color-preview-border-width, + $kendo-color-preview-bg: $kendo-color-preview-bg, + $kendo-color-preview-text: $kendo-color-preview-text, + $kendo-color-preview-border: $kendo-color-preview-border, + $kendo-color-preview-hover-border: $kendo-color-preview-hover-border, + $kendo-color-preview-no-color-bg: $kendo-color-preview-no-color-bg, + $kendo-color-preview-no-color-text: $kendo-color-preview-no-color-text, + $kendo-color-preview-no-color-border: $kendo-color-preview-no-color-border, + $kendo-color-preview-no-color-image: $kendo-color-preview-no-color-image, + $kendo-color-preview-transparent-color-image: $kendo-color-preview-transparent-color-image +); diff --git a/packages/default/scss/coloreditor/_layout.scss b/packages/default/scss/coloreditor/_layout.scss index a8e007a2e75..988ff3748e6 100644 --- a/packages/default/scss/coloreditor/_layout.scss +++ b/packages/default/scss/coloreditor/_layout.scss @@ -1,120 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../colorpalette/_variables.scss" as *; - -@mixin kendo-color-editor--layout-base() { - - // ColorEditor/FlatColorPicker - .k-coloreditor { - @include border-radius( $kendo-color-editor-border-radius ); - min-width: $kendo-color-editor-min-width; - border-width: $kendo-color-editor-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-size: $kendo-color-editor-font-size; - font-family: $kendo-color-editor-font-family; - line-height: $kendo-color-editor-line-height; - display: inline-flex; - flex-direction: column; - align-items: stretch; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - // Header - .k-coloreditor-header { - padding: $kendo-color-editor-header-padding-y $kendo-color-editor-header-padding-x 0; - } - - .k-coloreditor-header-actions { - gap: $kendo-color-editor-header-actions-gap; - } - - .k-coloreditor-preview { - display: flex; - flex-flow: column nowrap; - align-items: stretch; - justify-content: center; - gap: $kendo-color-editor-preview-gap; - position: relative; - z-index: 1; - } - - .k-coloreditor-preview .k-color-preview { - width: $kendo-color-editor-color-preview-width; - height: $kendo-color-editor-color-preview-height; - } - - // ColorPreview sizes - @each $size, $size-props in $kendo-color-editor-sizes { - $_min-width: map.get( $size-props, min-width ); - $_header-padding-x: map.get( $size-props, header-padding-x ); - $_header-padding-y: map.get( $size-props, header-padding-y ); - $_views-padding-x: map.get( $size-props, views-padding-x ); - $_views-padding-y: map.get( $size-props, views-padding-y ); - $_preview-gap: map.get( $size-props, preview-gap ); - $_preview-width: map.get( $size-props, preview-width ); - $_preview-height: map.get( $size-props, preview-height ); - - .k-coloreditor-#{$size} { - min-width: $_min-width; - - .k-coloreditor-header { - padding: $_header-padding-y $_header-padding-x 0; - } - - .k-coloreditor-views { - padding-block: $_views-padding-y; - padding-inline: $_views-padding-x; - } - - .k-coloreditor-preview { - gap: $_preview-gap; - - .k-color-preview { - width: $_preview-width; - height: $_preview-height; - } - } - } - - } - - // Views - .k-coloreditor-views { - min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) ); - padding-block: $kendo-color-editor-views-padding-y; - padding-inline: $kendo-color-editor-views-padding-x; - gap: $kendo-color-editor-views-gap; - - .k-colorgradient { - padding: 0; - width: auto; - border-width: 0; - } - .k-colorgradient:focus, - .k-colorgradient.k-focus { - outline: $kendo-color-editor-color-gradient-focus-outline dotted; - outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset; - border-radius: 0; - } - - .k-colorpalette { - align-self: center; - } - } - - // Footer - .k-coloreditor-footer.k-actions { - margin: 0; - } -} +@use "@progress/kendo-theme-core/scss/components/coloreditor/_layout.scss" as *; @mixin kendo-color-editor--layout() { diff --git a/packages/default/scss/coloreditor/_theme.scss b/packages/default/scss/coloreditor/_theme.scss index f9f1e8a6937..5926d13761b 100644 --- a/packages/default/scss/coloreditor/_theme.scss +++ b/packages/default/scss/coloreditor/_theme.scss @@ -1,30 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-color-editor--theme-base() { - - // ColorEditor/FlatColorPicker - .k-coloreditor { - @include fill( - $kendo-color-editor-text, - $kendo-color-editor-bg, - $kendo-color-editor-border - ); - } - - .k-coloreditor:focus, - .k-coloreditor.k-focus { - @include fill( $border: $kendo-color-editor-focus-border ); - @include focus-indicator( $kendo-color-editor-focus-shadow ); - } - - .k-coloreditor .k-colorgradient:focus, - .k-coloreditor .k-colorgradient.k-focus { - box-shadow: none; - outline-color: $kendo-color-editor-color-gradient-focus-outline-color; - } - -} +@use "@progress/kendo-theme-core/scss/components/coloreditor/_theme.scss" as *; @mixin kendo-color-editor--theme() { diff --git a/packages/default/scss/coloreditor/_variables.scss b/packages/default/scss/coloreditor/_variables.scss index 9ddecf5d646..292c2216948 100644 --- a/packages/default/scss/coloreditor/_variables.scss +++ b/packages/default/scss/coloreditor/_variables.scss @@ -199,3 +199,58 @@ $kendo-color-editor-sizes: ( preview-height: $kendo-color-editor-lg-color-preview-height, ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/coloreditor/_variables.scss" with ( + $kendo-color-editor-spacer: $kendo-color-editor-spacer, + $kendo-color-editor-min-width: $kendo-color-editor-min-width, + $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width, + $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width, + $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width, + $kendo-color-editor-border-width: $kendo-color-editor-border-width, + $kendo-color-editor-border-radius: $kendo-color-editor-border-radius, + $kendo-color-editor-font-family: $kendo-color-editor-font-family, + $kendo-color-editor-font-size: $kendo-color-editor-font-size, + $kendo-color-editor-line-height: $kendo-color-editor-line-height, + $kendo-color-editor-text: $kendo-color-editor-text, + $kendo-color-editor-bg: $kendo-color-editor-bg, + $kendo-color-editor-border: $kendo-color-editor-border, + $kendo-color-editor-focus-border: $kendo-color-editor-focus-border, + $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow, + $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y, + $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x, + $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap, + $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y, + $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x, + $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y, + $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x, + $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y, + $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x, + $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width, + $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height, + $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap, + $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap, + $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap, + $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap, + $kendo-color-editor-sm-color-preview-width: $kendo-color-editor-sm-color-preview-width, + $kendo-color-editor-sm-color-preview-height: $kendo-color-editor-sm-color-preview-height, + $kendo-color-editor-md-color-preview-width: $kendo-color-editor-md-color-preview-width, + $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height, + $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width, + $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-height, + $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y, + $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x, + $kendo-color-editor-views-gap: $kendo-color-editor-views-gap, + $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y, + $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x, + $kendo-color-editor-sm-views-gap: $kendo-color-editor-sm-views-gap, + $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y, + $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x, + $kendo-color-editor-md-views-gap: $kendo-color-editor-md-views-gap, + $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y, + $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x, + $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap, + $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color, + $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline, + $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset, + $kendo-color-editor-sizes: $kendo-color-editor-sizes +); diff --git a/packages/default/scss/colorgradient/_layout.scss b/packages/default/scss/colorgradient/_layout.scss index 7d5aaa89bdd..dc6ddc4d2eb 100644 --- a/packages/default/scss/colorgradient/_layout.scss +++ b/packages/default/scss/colorgradient/_layout.scss @@ -1,236 +1,4 @@ -@use "sass:map"; -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-color-gradient--layout-base() { - - // ColorGradient - .k-colorgradient { - @include border-radius( $kendo-color-gradient-border-radius ); - width: $kendo-color-gradient-width; - padding-block: $kendo-color-gradient-padding-y; - padding-inline: $kendo-color-gradient-padding-x; - border-style: solid; - border-width: $kendo-color-gradient-border-width; - box-sizing: border-box; - outline: 0; - font-size: $kendo-color-gradient-font-size; - font-family: $kendo-color-gradient-font-family; - line-height: $kendo-color-gradient-line-height; - display: flex; - flex-direction: column; - align-items: stretch; - gap: $kendo-color-gradient-gap; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - // Canvas - .k-colorgradient-canvas { - gap: $kendo-color-gradient-canvas-gap; - - .k-hsv-rectangle { - @include border-radius( $kendo-color-gradient-canvas-border-radius ); - position: relative; - flex: 1 1 auto; - user-select: none; - } - - .k-hsv-gradient { - @include border-radius( $kendo-color-gradient-canvas-border-radius ); - height: $kendo-color-gradient-canvas-rectangle-height; - } - - .k-hsv-draghandle { - margin-top: $kendo-color-gradient-canvas-draghandle-margin-y; - margin-left: $kendo-color-gradient-canvas-draghandle-margin-x; - position: absolute; - top: 50%; - left: 50%; - z-index: 1; - cursor: pointer; - } - - .k-hsv-controls { - position: relative; - flex-shrink: 0; - gap: $kendo-color-gradient-canvas-gap; - } - } - - // DragHandle - .k-colorgradient .k-draghandle { - @include border-radius( $kendo-color-gradient-draghandle-border-radius ); - width: $kendo-color-gradient-draghandle-width; - height: $kendo-color-gradient-draghandle-height; - border-width: $kendo-color-gradient-draghandle-border-width; - border-style: solid; - outline-width: $kendo-color-gradient-draghandle-outline-width; - outline-style: solid; - box-sizing: border-box; - } - - // Sliders - .k-colorgradient-slider { - &.k-slider-vertical { - width: $kendo-color-gradient-slider-track-size; - height: $kendo-color-gradient-slider-vertical-size; - flex: 0 0 $kendo-color-gradient-slider-track-size; - } - &.k-slider-vertical .k-slider-track { - width: $kendo-color-gradient-slider-track-size; - border-radius: $kendo-color-gradient-slider-border-radius; - margin-left: - math.div( $kendo-color-gradient-slider-track-size, 2 ); - } - - &.k-slider-horizontal { - width: $kendo-color-gradient-slider-horizontal-size; - height: $kendo-color-gradient-slider-track-size; - flex: 0 0 $kendo-color-gradient-slider-track-size; - } - &.k-slider-horizontal .k-slider-track { - height: $kendo-color-gradient-slider-track-size; - border-radius: $kendo-color-gradient-slider-border-radius; - margin-top: - math.div( $kendo-color-gradient-slider-track-size, 2 ); - } - - &.k-alpha-slider .k-slider-track::before { - content: ""; - width: 100%; - height: 100%; - display: block; - border-radius: 10px; - position: relative; - z-index: -1; - } - - .k-slider-track-wrap { - z-index: 1; - } - - .k-slider-selection { - display: none; - } - - .k-draghandle { - border-width: $kendo-color-gradient-slider-draghandle-border-width; - } - } - - // ColorGradient sizes - @each $size, $size-props in $kendo-color-gradient-sizes { - $_width: map.get( $size-props, width ); - $_gap: map.get( $size-props, gap ); - $_vertical-slider-height: map.get( $size-props, vertical-slider-height ); - $_rectangle-height: map.get( $size-props, rectangle-height ); - $_input-width: map.get( $size-props, input-width ); - $_canvas-gap: map.get( $size-props, canvas-gap ); - $_padding-x: map.get( $size-props, padding-x ); - $_padding-y: map.get( $size-props, padding-y ); - - .k-colorgradient-#{$size} { - width: $_width; - gap: $_gap; - padding-block: $_padding-y; - padding-inline: $_padding-x; - - .k-colorgradient-inputs { - .k-numerictextbox { - width: $_input-width; - } - } - - .k-colorgradient-canvas { - gap: $_canvas-gap; - - .k-hsv-gradient { - height: $_rectangle-height; - } - - .k-slider-vertical { - height: $_vertical-slider-height; - } - - .k-hsv-controls { - gap: $_canvas-gap; - } - } - } - } - - - // Inputs - .k-colorgradient-inputs { - gap: $kendo-color-gradient-input-gap; - - .k-colorgradient-input-label { - text-transform: uppercase; - } - - > .k-vstack { - gap: $kendo-color-gradient-input-label-gap; - } - - .k-numerictextbox { - width: $kendo-color-gradient-input-width; - } - - .k-input-inner { - padding-inline-start: 2px; - padding-inline-end: 2px; - text-align: center; - text-overflow: clip; - } - } - - // Contrast - .k-colorgradient-color-contrast { - - > div { - display: flex; - flex-flow: row nowrap; - gap: $kendo-color-gradient-contrast-spacer; - } - - .k-contrast-ratio { - margin-bottom: $kendo-color-gradient-contrast-spacer; - } - - .k-contrast-ratio-text { - font-weight: $kendo-color-gradient-contrast-ratio-font-weight; - } - - .k-contrast-validation { - display: inline-flex; - align-items: center; - gap: calc( #{$kendo-color-gradient-contrast-spacer} / 2 ); - - .k-icon { - vertical-align: middle; - } - - // Needed for the double check icons - .k-icon + .k-icon, - .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon { - margin-inline-start: -13px; - } - } - } - .k-color-contrast-svg { - position: absolute; - top: 0; - left: 0; - overflow: visible; - pointer-events: none; - } -} +@use "@progress/kendo-theme-core/scss/components/colorgradient/_layout.scss" as *; @mixin kendo-color-gradient--layout() { diff --git a/packages/default/scss/colorgradient/_theme.scss b/packages/default/scss/colorgradient/_theme.scss index 3acef613935..cd771a74dab 100644 --- a/packages/default/scss/colorgradient/_theme.scss +++ b/packages/default/scss/colorgradient/_theme.scss @@ -1,89 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-color-gradient--theme-base() { - - // ColorGradient - .k-colorgradient { - @include fill( - $kendo-color-gradient-text, - $kendo-color-gradient-bg, - $kendo-color-gradient-border - ); - } - - .k-colorgradient:focus, - .k-colorgradient.k-focus { - @include fill( $border: $kendo-color-gradient-focus-border ); - @include focus-indicator( $kendo-color-gradient-focus-shadow ); - } - - // Canvas - .k-colorgradient-canvas .k-hsv-gradient { - background: linear-gradient( to bottom, $kendo-gradient-transparent-to-black ), linear-gradient( to right, $kendo-gradient-white-to-transparent ); - } - - // DragHandle - .k-colorgradient .k-draghandle { - @include fill( - $kendo-color-gradient-draghandle-text, - $kendo-color-gradient-draghandle-bg, - $kendo-color-gradient-draghandle-border - ); - outline-color: $kendo-color-gradient-draghandle-focus-shadow; - @include box-shadow( $kendo-color-gradient-draghandle-shadow ); - - &:focus, - &.k-focus { - @include fill( $bg: transparent, $border: $kendo-color-white ); - outline-color: $kendo-color-gradient-draghandle-focus-shadow; - @include focus-indicator( $kendo-color-gradient-draghandle-shadow ); - } - - &:hover, - &.k-hover, - &.k-active, - &:active { - @include fill( $bg: transparent, $border: $kendo-color-white ); - outline-color: $kendo-color-gradient-draghandle-hover-shadow; - } - } - - // Slider - .k-colorgradient-slider.k-hue-slider { - &.k-slider-horizontal .k-slider-track { - background: linear-gradient( to right, $kendo-gradient-rainbow ); - } - - &.k-slider-vertical .k-slider-track { - background: linear-gradient( to top, $kendo-gradient-rainbow ); - } - } - - .k-colorgradient-slider.k-alpha-slider .k-slider-track::before { - // TODO: extract variable - background: url(#{$kendo-color-gradient-slider-alpha-bgr}) center repeat; - } - - // Inputs - .k-colorgradient-input-label { - @include fill( $color: $kendo-color-gradient-input-label-text ); - } - - - // RTL - .k-rtl, - [dir="rtl"] { - .k-colorgradient { - - .k-hue-slider.k-slider-horizontal .k-slider-track { - background: linear-gradient( to left, $kendo-gradient-rainbow ); - } - - } - } - -} +@use "@progress/kendo-theme-core/scss/components/colorgradient/_theme.scss" as *; @mixin kendo-color-gradient--theme() { diff --git a/packages/default/scss/colorgradient/_variables.scss b/packages/default/scss/colorgradient/_variables.scss index 9b99a537b14..eeb2655251a 100644 --- a/packages/default/scss/colorgradient/_variables.scss +++ b/packages/default/scss/colorgradient/_variables.scss @@ -253,3 +253,74 @@ $kendo-color-gradient-sizes: ( padding-y: $kendo-color-gradient-lg-padding-y ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/colorgradient/_variables.scss" with ( + $kendo-color-gradient-spacer: $kendo-color-gradient-spacer, + $kendo-color-gradient-width: $kendo-color-gradient-width, + $kendo-color-gradient-border-width: $kendo-color-gradient-border-width, + $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius, + $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y, + $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-x, + $kendo-color-gradient-gap: $kendo-color-gradient-gap, + $kendo-color-gradient-font-family: $kendo-color-gradient-font-family, + $kendo-color-gradient-font-size: $kendo-color-gradient-font-size, + $kendo-color-gradient-line-height: $kendo-color-gradient-line-height, + $kendo-color-gradient-text: $kendo-color-gradient-text, + $kendo-color-gradient-bg: $kendo-color-gradient-bg, + $kendo-color-gradient-border: $kendo-color-gradient-border, + $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width, + $kendo-color-gradient-md-width: $kendo-color-gradient-md-width, + $kendo-color-gradient-lg-width: $kendo-color-gradient-lg-width, + $kendo-color-gradient-sm-gap: $kendo-color-gradient-sm-gap, + $kendo-color-gradient-md-gap: $kendo-color-gradient-md-gap, + $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap, + $kendo-color-gradient-focus-border: $kendo-color-gradient-focus-border, + $kendo-color-gradient-focus-shadow: $kendo-color-gradient-focus-shadow, + $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius, + $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap, + $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height, + $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height, + $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height, + $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height, + $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap, + $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap, + $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap, + $kendo-color-gradient-sm-padding-x: $kendo-color-gradient-sm-padding-x, + $kendo-color-gradient-sm-padding-y: $kendo-color-gradient-sm-padding-y, + $kendo-color-gradient-md-padding-x: $kendo-color-gradient-md-padding-x, + $kendo-color-gradient-md-padding-y: $kendo-color-gradient-md-padding-y, + $kendo-color-gradient-lg-padding-x: $kendo-color-gradient-lg-padding-x, + $kendo-color-gradient-lg-padding-y: $kendo-color-gradient-lg-padding-y, + $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size, + $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius, + $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width, + $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size, + $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size, + $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr, + $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size, + $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size, + $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size, + $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width, + $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height, + $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width, + $kendo-color-gradient-draghandle-outline-width: $kendo-color-gradient-draghandle-outline-width, + $kendo-color-gradient-draghandle-border-radius: $kendo-color-gradient-draghandle-border-radius, + $kendo-color-gradient-draghandle-text: $kendo-color-gradient-draghandle-text, + $kendo-color-gradient-draghandle-bg: $kendo-color-gradient-draghandle-bg, + $kendo-color-gradient-draghandle-border: $kendo-color-gradient-draghandle-border, + $kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-focus-shadow, + $kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-hover-shadow, + $kendo-color-gradient-draghandle-shadow: $kendo-color-gradient-draghandle-shadow, + $kendo-color-gradient-canvas-draghandle-margin-y: $kendo-color-gradient-canvas-draghandle-margin-y, + $kendo-color-gradient-canvas-draghandle-margin-x: $kendo-color-gradient-canvas-draghandle-margin-x, + $kendo-color-gradient-input-width: $kendo-color-gradient-input-width, + $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap, + $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap, + $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text, + $kendo-color-gradient-sm-input-width: $kendo-color-gradient-sm-input-width, + $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width, + $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width, + $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight, + $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer, + $kendo-color-gradient-sizes: $kendo-color-gradient-sizes +); diff --git a/packages/default/scss/colorpalette/_layout.scss b/packages/default/scss/colorpalette/_layout.scss index aab883be9b4..0e2739af44d 100644 --- a/packages/default/scss/colorpalette/_layout.scss +++ b/packages/default/scss/colorpalette/_layout.scss @@ -1,74 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-color-palette--layout-base() { - - // ColorPalette - .k-colorpalette { - border-width: 0; - box-sizing: border-box; - outline: 0; - font-size: $kendo-color-palette-font-size; - font-family: $kendo-color-palette-font-family; - line-height: $kendo-color-palette-line-height; - display: inline-flex; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - // Table - .k-colorpalette-table { - width: 100%; - height: 100%; - border-collapse: collapse; - position: relative; - } - - // Tile - .k-colorpalette-tile { - width: $kendo-color-palette-tile-width; - height: $kendo-color-palette-tile-height; - box-sizing: border-box; - overflow: hidden; - cursor: pointer; - - &:hover, - &.k-hover { - position: relative; - z-index: 101; - } - - &:focus, - &.k-focus, - &.k-selected, - &.k-selected:hover { - position: relative; - z-index: 100; - } - } - - // ColorPalette sizes - @each $size, $size-props in $kendo-color-palette-sizes { - $_tile-width: map.get( $size-props, width ); - $_tile-height: map.get( $size-props, height ); - - .k-colorpalette-#{$size} { - .k-colorpalette-tile { - width: $_tile-width; - height: $_tile-height; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/colorpalette/_layout.scss" as *; @mixin kendo-color-palette--layout() { diff --git a/packages/default/scss/colorpalette/_theme.scss b/packages/default/scss/colorpalette/_theme.scss index de50196c5cf..f81ae3c6951 100644 --- a/packages/default/scss/colorpalette/_theme.scss +++ b/packages/default/scss/colorpalette/_theme.scss @@ -1,29 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-color-palette--theme-base() { - - // Tile - .k-colorpalette-tile { - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-color-palette-tile-focus-shadow ); - } - - &:hover, - &.k-hover { - @include box-shadow( $kendo-color-palette-tile-hover-shadow ); - } - - &.k-selected, - &.k-selected:hover { - @include box-shadow( $kendo-color-palette-tile-selected-shadow ); - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/colorpalette/_theme.scss" as *; @mixin kendo-color-palette--theme() { diff --git a/packages/default/scss/colorpalette/_variables.scss b/packages/default/scss/colorpalette/_variables.scss index a0b45dc2c48..ce6f799f980 100644 --- a/packages/default/scss/colorpalette/_variables.scss +++ b/packages/default/scss/colorpalette/_variables.scss @@ -63,3 +63,21 @@ $kendo-color-palette-sizes: ( height: $kendo-color-palette-lg-tile-height ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/colorpalette/_variables.scss" with ( + $kendo-color-palette-font-family: $kendo-color-palette-font-family, + $kendo-color-palette-font-size: $kendo-color-palette-font-size, + $kendo-color-palette-line-height: $kendo-color-palette-line-height, + $kendo-color-palette-tile-width: $kendo-color-palette-tile-width, + $kendo-color-palette-tile-height: $kendo-color-palette-tile-height, + $kendo-color-palette-sm-tile-width: $kendo-color-palette-sm-tile-width, + $kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-height, + $kendo-color-palette-md-tile-width: $kendo-color-palette-md-tile-width, + $kendo-color-palette-md-tile-height: $kendo-color-palette-md-tile-height, + $kendo-color-palette-lg-tile-width: $kendo-color-palette-lg-tile-width, + $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-height, + $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow, + $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow, + $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow, + $kendo-color-palette-sizes: $kendo-color-palette-sizes +); diff --git a/packages/default/scss/colorpicker/_layout.scss b/packages/default/scss/colorpicker/_layout.scss index c9e67ef3572..7e63ddf1fff 100644 --- a/packages/default/scss/colorpicker/_layout.scss +++ b/packages/default/scss/colorpicker/_layout.scss @@ -1,16 +1,4 @@ -@mixin kendo-color-picker--layout-base() { - - // Color picker - .k-color-picker { - width: min-content; - } - - // Alias - .k-colorpicker { - @extend .k-color-picker !optional; - } - -} +@use "@progress/kendo-theme-core/scss/components/colorpicker/_layout.scss" as *; @mixin kendo-color-picker--layout() { diff --git a/packages/default/scss/colorpicker/_theme.scss b/packages/default/scss/colorpicker/_theme.scss index 7092ff647e2..0480dcb7863 100644 --- a/packages/default/scss/colorpicker/_theme.scss +++ b/packages/default/scss/colorpicker/_theme.scss @@ -1,9 +1,5 @@ -@mixin kendo-color-picker--theme-base() { +@use "@progress/kendo-theme-core/scss/components/colorpicker/_theme.scss" as *; - // Color picker - .k-color-picker {} - -} @mixin kendo-color-picker--theme() { @include kendo-color-picker--theme-base(); diff --git a/packages/default/scss/combobox/_layout.scss b/packages/default/scss/combobox/_layout.scss index d9d75d1ad5c..dd3b1eccf98 100644 --- a/packages/default/scss/combobox/_layout.scss +++ b/packages/default/scss/combobox/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-combobox--layout-base() { - - // Combobox - .k-combobox {} - -} +@use "@progress/kendo-theme-core/scss/components/combobox/_layout.scss" as *; @mixin kendo-combobox--layout() { diff --git a/packages/default/scss/combobox/_theme.scss b/packages/default/scss/combobox/_theme.scss index 2e237f116d0..83cb33c785d 100644 --- a/packages/default/scss/combobox/_theme.scss +++ b/packages/default/scss/combobox/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-combobox--theme-base() { - - // Combobox - .k-combobox {} - -} +@use "@progress/kendo-theme-core/scss/components/combobox/_theme.scss" as *; @mixin kendo-combobox--theme() { diff --git a/packages/default/scss/core/color-system/_swatch-legacy.scss b/packages/default/scss/core/color-system/_swatch-legacy.scss index ad92c557bf4..5492fbf79d7 100644 --- a/packages/default/scss/core/color-system/_swatch-legacy.scss +++ b/packages/default/scss/core/color-system/_swatch-legacy.scss @@ -144,18 +144,79 @@ $kendo-theme-colors: ( "inverse": $kendo-color-inverse, ) !default; -:root { - --kendo-disabled-text: #{$kendo-disabled-text}; - --kendo-disabled-bg: #{$kendo-disabled-bg}; - --kendo-disabled-border: #{$kendo-disabled-border}; - --kendo-disabled-opacity: #{$kendo-disabled-opacity}; - --kendo-disabled-filter: #{$kendo-disabled-filter}; - - --kendo-hr-border: #{$kendo-component-border}; - - --kendo-marquee-text: #{$kendo-selected-text}; - --kendo-marquee-bg: #{$kendo-selected-bg}; - --kendo-marquee-border: #{$kendo-selected-border}; - - --kendo-text-selection-bg: #{$kendo-color-primary}; -} +@forward "@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss" with ( + $kendo-color-primary: $kendo-color-primary, + $kendo-color-primary-lighter: $kendo-color-primary-lighter, + $kendo-color-primary-darker: $kendo-color-primary-darker, + $kendo-color-primary-contrast: $kendo-color-primary-contrast, + $kendo-color-secondary: $kendo-color-secondary, + $kendo-color-secondary-lighter: $kendo-color-secondary-lighter, + $kendo-color-secondary-darker: $kendo-color-secondary-darker, + $kendo-color-secondary-contrast: $kendo-color-secondary-contrast, + $kendo-color-tertiary: $kendo-color-tertiary, + $kendo-color-tertiary-lighter: $kendo-color-tertiary-lighter, + $kendo-color-tertiary-darker: $kendo-color-tertiary-darker, + $kendo-color-tertiary-contrast: $kendo-color-tertiary-contrast, + $kendo-color-info: $kendo-color-info, + $kendo-color-info-lighter: $kendo-color-info-lighter, + $kendo-color-info-darker: $kendo-color-info-darker, + $kendo-color-success: $kendo-color-success, + $kendo-color-success-lighter: $kendo-color-success-lighter, + $kendo-color-success-darker: $kendo-color-success-darker, + $kendo-color-warning: $kendo-color-warning, + $kendo-color-warning-lighter: $kendo-color-warning-lighter, + $kendo-color-warning-darker: $kendo-color-warning-darker, + $kendo-color-error: $kendo-color-error, + $kendo-color-error-lighter: $kendo-color-error-lighter, + $kendo-color-error-darker: $kendo-color-error-darker, + $kendo-color-dark: $kendo-color-dark, + $kendo-color-light: $kendo-color-light, + $kendo-color-inverse: $kendo-color-inverse, + $kendo-body-bg: $kendo-body-bg, + $kendo-body-text: $kendo-body-text, + $kendo-app-bg: $kendo-app-bg, + $kendo-app-text: $kendo-app-text, + $kendo-app-border: $kendo-app-border, + $kendo-component-bg: $kendo-component-bg, + $kendo-component-text: $kendo-component-text, + $kendo-component-border: $kendo-component-border, + $kendo-base-bg: $kendo-base-bg, + $kendo-base-text: $kendo-base-text, + $kendo-base-border: $kendo-base-border, + $kendo-base-gradient: $kendo-base-gradient, + $kendo-hover-bg: $kendo-hover-bg, + $kendo-hover-text: $kendo-hover-text, + $kendo-hover-border: $kendo-hover-border, + $kendo-hover-gradient: $kendo-hover-gradient, + $kendo-selected-bg: $kendo-selected-bg, + $kendo-selected-text: $kendo-selected-text, + $kendo-selected-border: $kendo-selected-border, + $kendo-selected-gradient: $kendo-selected-gradient, + $kendo-selected-hover-bg: $kendo-selected-hover-bg, + $kendo-selected-hover-text: $kendo-selected-hover-text, + $kendo-selected-hover-border: $kendo-selected-hover-border, + $kendo-selected-hover-gradient: $kendo-selected-hover-gradient, + $kendo-component-header-bg: $kendo-component-header-bg, + $kendo-component-header-text: $kendo-component-header-text, + $kendo-component-header-border: $kendo-component-header-border, + $kendo-component-header-gradient: $kendo-component-header-gradient, + $kendo-focus-outline: $kendo-focus-outline, + $kendo-subtle-text: $kendo-subtle-text, + $kendo-link-text: $kendo-link-text, + $kendo-link-hover-text: $kendo-link-hover-text, + $kendo-invalid-bg: $kendo-invalid-bg, + $kendo-invalid-text: $kendo-invalid-text, + $kendo-invalid-border: $kendo-invalid-border, + $kendo-invalid-shadow: $kendo-invalid-shadow, + $kendo-valid-bg: $kendo-valid-bg, + $kendo-valid-text: $kendo-valid-text, + $kendo-valid-border: $kendo-valid-border, + $kendo-valid-shadow: $kendo-valid-shadow, + $kendo-disabled-bg: $kendo-disabled-bg, + $kendo-disabled-text: $kendo-disabled-text, + $kendo-disabled-border: $kendo-disabled-border, + $kendo-disabled-opacity: $kendo-disabled-opacity, + $kendo-disabled-filter: $kendo-disabled-filter, + $kendo-disabled-styling: $kendo-disabled-styling, + $kendo-theme-colors: $kendo-theme-colors +); diff --git a/packages/default/scss/dataviz/_layout.scss b/packages/default/scss/dataviz/_layout.scss index d2582467e7a..7fa46e3aa68 100644 --- a/packages/default/scss/dataviz/_layout.scss +++ b/packages/default/scss/dataviz/_layout.scss @@ -1,572 +1,4 @@ -@use "sass:string"; -@use "sass:math"; -@use "sass:meta"; -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; -@use "../tooltip/_variables.scss" as *; - -@mixin kendo-dataviz--layout-base() { - - // Barcode - .k-barcode { - display: inline-block; - - > div { - height: 150px; - } - } - - // Elements - .k-chart, - .k-sparkline, - .k-stockchart { - border-width: $kendo-chart-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-chart-font-family; - font-size: $kendo-chart-font-size; - line-height: $kendo-chart-line-height; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - } - - .k-chart, - .k-stockchart { - display: block; - height: 400px; - } - - .k-chart-surface { - height: 100%; - } - - .k-chart .k-popup { - border-width: 0; - } - - .k-chart-tooltip-wrapper .k-animation-container-shown, - .k-chart-tooltip-wrapper.k-animation-container-shown { - @include border-radius( k-border-radius(md) ); - transition: $kendo-chart-tooltip-transition; - } - - .k-sparkline-tooltip-wrapper, - .k-chart-tooltip-wrapper { - z-index: 12000; - - .k-popup { - @include border-radius( k-border-radius(md) ); - padding: 0; - border-width: 0; - background: transparent; - } - } - - .k-chart-tooltip table { - border-spacing: 0; - border-collapse: collapse; - } - - .k-chart-tooltip { - @include border-radius( k-border-radius(md) ); - font-size: $kendo-chart-tooltip-font-size; - line-height: var( --kendo-line-height, normal ); - padding-block: $kendo-tooltip-padding-y; - padding-inline: $kendo-tooltip-padding-x; - } - - .k-chart-tooltip th { - width: auto; - text-align: center; - padding: 1px; - } - - .k-chart-tooltip td { - width: auto; - text-align: start; - padding-block: $kendo-chart-tooltip-padding-y; - padding-inline: $kendo-chart-tooltip-padding-x; - line-height: var( --kendo-line-height, normal ); - vertical-align: middle; - } - - .k-chart-crosshair-tooltip, - .k-chart-shared-tooltip { - border-width: 1px; - border-style: solid; - } - - .k-chart-shared-tooltip .k-chart-shared-tooltip-marker { - display: block; - width: 15px; - height: 3px; - vertical-align: middle; - } - - // Selection - .k-selector { - position: absolute; - transform: translateZ(0); - } - - .k-selection { - position: absolute; - height: 100%; - border-width: 1px; - border-style: solid; - border-bottom: 0; - } - - .k-selection-bg { - position: absolute; - width: 100%; - height: 100%; - } - - .k-handle { - @include border-radius( 50% ); - width: $kendo-chart-selection-handle-size; - height: $kendo-chart-selection-handle-size; - border-width: 1px; - border-style: solid; - z-index: 1; - position: absolute; - box-sizing: content-box; - } - - .k-handle div { - width: 100%; - height: 100%; - } - - .k-left-handle { - left: - math.div( $kendo-chart-selection-handle-size, 2 ); - } - - .k-right-handle { - right: - math.div( $kendo-chart-selection-handle-size, 2 ); - } - - .k-left-handle div { - margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 )); - padding: ($kendo-chart-selection-handle-size * 2) (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2) 0 0; - } - - .k-right-handle div { - margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 )); - padding: ($kendo-chart-selection-handle-size * 2) 0 0 (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2); - } - - .k-left-handle.k-handle-active div { - margin-left: -($kendo-chart-selection-handle-size * 2); - padding-left: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 ); - } - - .k-right-handle.k-handle-active div { - margin-left: -($kendo-chart-selection-handle-size * 2); - padding-right: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 ); - } - - .k-mask { - position: absolute; - height: 100%; - } - - // Navigator hint - .k-navigator-hint div { - position: absolute; - } - - .k-navigator-hint .k-scroll { - @include border-radius( k-border-radius(md) ); - position: absolute; - height: 4px; - } - - .k-navigator-hint .k-tooltip { - margin-top: 20px; - min-width: 160px; - opacity: 1; - text-align: center; - } - - // Sparklines - .k-sparkline, - .k-sparkline span { - display: inline-block; - vertical-align: top; - } - - .k-sparkline span { - height: 100%; - width: 100%; - } - - .k-chart-dragging { - user-select: none; - } - - .k-chart-donut-center { - position: absolute; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - border-radius: 50%; - text-align: center; - - border: 4px solid transparent; - box-sizing: border-box; - } - - .k-pdf-export { - .k-chart, - .k-sparkline, - .k-stockchart { - .k-animation-container { - display: none; - } - } - } - - // Chart Overlay - .k-chart-overlay { - margin: 0; - width: 100%; - height: if( --kendo-chart-computed-title-height, calc( 100% - var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ) ), 100% ); - position: absolute; - top: 0; - left: 0; - opacity: 1; - z-index: 10001; - - &-top { - top: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ); - } - - .k-no-data { - min-height: auto; - padding-block-start: $kendo-chart-no-data-padding-y; - color: inherit; - font-size: $kendo-chart-no-data-font-size; - font-weight: $kendo-chart-no-data-font-weight; - } - } - - // Diagram - .k-diagram { - height: 600px; - } - - .k-diagram .km-scroll-wrapper { - width: 100%; - height: 100%; - position: relative; - } - - .k-diagram .km-scroll-wrapper { - width: 100%; - height: 100%; - position: relative; - } - - .k-canvas-container { - width: 100%; - height: 100%; - } - - - // Sankey labels - .k-sankey text { - pointer-events: none; - } - - // Treemap - .k-treemap { - height: 400px; - box-sizing: border-box; - border-width: 1px; - border-style: solid; - outline: 0; - font-family: $kendo-treemap-font-family; - font-size: $kendo-treemap-font-size; - line-height: $kendo-treemap-line-height; - display: block; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - // Tile - .k-treemap-tile { - margin: -1px 0 0 -1px; - height: 100%; - box-sizing: border-box; - border: 1px solid; - border-color: inherit; - color: inherit; - background-color: inherit; - overflow: hidden; - position: absolute; - } - > .k-treemap-tile { - position: relative; - } - - // Title - .k-treemap-title { - padding-block: $kendo-treemap-padding-y; - padding-inline: $kendo-treemap-padding-x; - border-width: 0 0 1px; - border-style: solid; - border-color: inherit; - font-size: var( --kendo-font-size, inherit ); - background-position: 0 0; - background-repeat: repeat-x; - } - .k-treemap-title-vertical { - padding-block: $kendo-treemap-padding-x; - padding-inline: $kendo-treemap-padding-y; - width: $kendo-line-height-em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - position: absolute; - top: 0; - bottom: 0; - - > div { - transform-origin: right; - transform: rotate(-90deg); - position: absolute; - top: 0; - right: 1em; - } - } - - - // Wrap - .k-treemap-wrap { - border-color: inherit; - color: inherit; - background-color: inherit; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - } - .k-treemap-title + .k-treemap-wrap { - top: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px); - } - .k-treemap-title-vertical + .k-treemap-wrap { - left: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px); - } - - - // Leaf - .k-leaf { - padding: $kendo-treemap-padding-x; - } - } - - - - - // Gauge - .k-gauge { - text-align: start; - position: relative; - } - - .k-arcgauge, - .k-circulargauge { - display: inline-block; - } - - .k-arcgauge-label, - .k-circulargauge-label { - position: absolute; - text-align: center; - padding: 0; - margin: 0; - } - - - // qrcode - .k-qrcode { - display: inline-block; - - > div { - height: 150px; - } - } - - - - - // export variables to allow use in scripts - // TODO: remove in favor of $_css-vars once all suites are updated - $exported: ( - primary: $kendo-color-primary, - primary-contrast: $kendo-color-primary-contrast, - base: $kendo-base-bg, - background: $kendo-chart-bg, - - normal-background: $kendo-base-bg, - normal-text-color: $kendo-base-text, - - series-a: $kendo-series-a, - series-b: $kendo-series-b, - series-c: $kendo-series-c, - series-d: $kendo-series-d, - series-e: $kendo-series-e, - series-f: $kendo-series-f, - - series-1: $kendo-series-1, - series-2: $kendo-series-2, - series-3: $kendo-series-3, - series-4: $kendo-series-4, - series-5: $kendo-series-5, - series-6: $kendo-series-6, - series-7: $kendo-series-7, - series-8: $kendo-series-8, - series-9: $kendo-series-9, - series-10: $kendo-series-10, - series-11: $kendo-series-11, - series-12: $kendo-series-12, - series-13: $kendo-series-13, - series-14: $kendo-series-14, - series-15: $kendo-series-15, - series-16: $kendo-series-16, - series-17: $kendo-series-17, - series-18: $kendo-series-18, - series-19: $kendo-series-19, - series-20: $kendo-series-20, - series-21: $kendo-series-21, - series-22: $kendo-series-22, - series-23: $kendo-series-23, - series-24: $kendo-series-24, - series-25: $kendo-series-25, - series-26: $kendo-series-26, - series-27: $kendo-series-27, - series-28: $kendo-series-28, - series-29: $kendo-series-29, - series-30: $kendo-series-30, - - gauge-pointer: $kendo-color-primary, - gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )), - - chart-font-size: $kendo-chart-font-size, - chart-title-font-size: $kendo-chart-title-font-size, - chart-pane-title-font-size: $kendo-chart-pane-title-font-size, - chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight, - chart-label-font-size: $kendo-chart-label-font-size, - - chart-inactive: $kendo-chart-inactive, - chart-major-lines: $kendo-chart-major-lines, - chart-minor-lines: $kendo-chart-minor-lines, - chart-area-opacity: $kendo-chart-area-opacity, - chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity, - chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity, - chart-notes-background: $kendo-chart-notes-background, - chart-notes-border: $kendo-chart-notes-border, - chart-notes-lines: $kendo-chart-notes-lines, - chart-crosshair-background: $kendo-chart-crosshair-background, - chart-error-bars-background: $kendo-chart-error-bars-background, - - ); - - // TODO: remove in favor of CSS variables once all suites are updated - @each $name, $value in $exported { - $type: meta.type-of($value); - - .k-var--#{$name} { - @if $type == "color" or $type == "string" and string.index($value, "color") { - // background-color can store any color - background-color: #{$value}; - } @else if string.index($name, "font-size") { - font-size: #{$value}; - } @else if string.index($name, "font-weight") { - font-weight: #{$value}; - } @else if string.index($name, "opacity") { - opacity: #{$value}; - } - - } - } - - $_css-vars: ( - chart-primary-bg: $kendo-color-primary, - chart-primary-contrast: $kendo-color-primary-contrast, - chart-bg: $kendo-chart-bg, - chart-text: $kendo-chart-text, - - chart-font-size: $kendo-chart-font-size, - chart-title-font-size: $kendo-chart-title-font-size, - chart-pane-title-font-size: $kendo-chart-pane-title-font-size, - chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight, - chart-label-font-size: $kendo-chart-label-font-size, - - chart-inactive: $kendo-chart-inactive, - chart-major-lines: $kendo-chart-major-lines, - chart-minor-lines: $kendo-chart-minor-lines, - chart-area-opacity: $kendo-chart-area-opacity, - chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity, - chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity, - chart-notes-bg: $kendo-chart-notes-background, - chart-notes-border: $kendo-chart-notes-border, - chart-notes-lines: $kendo-chart-notes-lines, - chart-crosshair-bg: $kendo-chart-crosshair-background, - chart-error-bars-bg: $kendo-chart-error-bars-background, - - chart-series-1: $kendo-series-1, - chart-series-2: $kendo-series-2, - chart-series-3: $kendo-series-3, - chart-series-4: $kendo-series-4, - chart-series-5: $kendo-series-5, - chart-series-6: $kendo-series-6, - chart-series-7: $kendo-series-7, - chart-series-8: $kendo-series-8, - chart-series-9: $kendo-series-9, - chart-series-10: $kendo-series-10, - chart-series-11: $kendo-series-11, - chart-series-12: $kendo-series-12, - chart-series-13: $kendo-series-13, - chart-series-14: $kendo-series-14, - chart-series-15: $kendo-series-15, - chart-series-16: $kendo-series-16, - chart-series-17: $kendo-series-17, - chart-series-18: $kendo-series-18, - chart-series-19: $kendo-series-19, - chart-series-20: $kendo-series-20, - chart-series-21: $kendo-series-21, - chart-series-22: $kendo-series-22, - chart-series-23: $kendo-series-23, - chart-series-24: $kendo-series-24, - chart-series-25: $kendo-series-25, - chart-series-26: $kendo-series-26, - chart-series-27: $kendo-series-27, - chart-series-28: $kendo-series-28, - chart-series-29: $kendo-series-29, - chart-series-30: $kendo-series-30, - - chart-gauge-pointer: $kendo-color-primary, - chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )) - - ); - - .k-chart, - .k-diagram, - .k-gauge, - .k-sparkline { - @each $name, $value in $_css-vars { - --kendo-#{$name}: #{$value}; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/dataviz/_layout.scss" as *; @mixin kendo-dataviz--layout() { diff --git a/packages/default/scss/dataviz/_theme.scss b/packages/default/scss/dataviz/_theme.scss index 7571eb6a9d5..0cf3a8cc85f 100644 --- a/packages/default/scss/dataviz/_theme.scss +++ b/packages/default/scss/dataviz/_theme.scss @@ -1,118 +1,4 @@ - -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../button/_variables.scss" as *; - -@mixin kendo-dataviz--theme-base() { - - // Elements - .k-chart, - .k-sparkline, - .k-stockchart { - @include fill( - $kendo-chart-text, - transparent, - $kendo-chart-border - ); - - .k-popup { - background: transparent; - } - } - - - // Tooltip - // TODO - .k-chart-tooltip { - color: $kendo-color-white; - } - .k-chart-tooltip-inverse { - color: $kendo-color-black; - } - - .k-chart-crosshair-tooltip, - .k-chart-shared-tooltip { - color: $kendo-chart-crosshair-shared-tooltip-color; - background-color: $kendo-chart-crosshair-shared-tooltip-background; - border-color: $kendo-chart-crosshair-shared-tooltip-border; - } - - .k-selection { - border-color: $kendo-chart-selection-border-color; - box-shadow: $kendo-chart-selection-shadow; - } - - .k-selection-bg { - background-color: transparent; - } - - .k-handle { - cursor: e-resize; - - // TODO: refactor and remove button dependency - @include fill( - $kendo-button-text, - $kendo-button-bg, - $kendo-button-border, - $kendo-button-gradient - ); - - &:hover { - @include fill( - $kendo-button-hover-text, - $kendo-button-hover-bg, - $kendo-button-hover-border, - $kendo-button-hover-gradient - ); - } - } - - .k-handle div { - background-color: transparent; - } - - .k-mask { - background-color: $kendo-component-bg; - opacity: .8; - } - - .k-chart-overlay { - background-color: $kendo-chart-overlay-bg; - } - - - // Treemap - .k-treemap { - @include fill( - $kendo-component-text, - $kendo-component-bg, - $kendo-component-border - ); - - // Title - .k-treemap-title { - @include fill( - $kendo-component-header-text, - $kendo-component-header-bg, - $kendo-component-header-border, - $kendo-component-header-gradient - ); - } - - // Leaf - .k-leaf { - color: $kendo-component-bg; - } - .k-leaf.k-inverse { - color: $kendo-component-text; - } - .k-leaf:hover, - .k-leaf.k-hover { - box-shadow: inset 0 0 0 3px $kendo-component-border; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/dataviz/_theme.scss" as *; @mixin kendo-dataviz--theme() { diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss index 65f794ff24e..424230d48a4 100644 --- a/packages/default/scss/dataviz/_variables.scss +++ b/packages/default/scss/dataviz/_variables.scss @@ -150,3 +150,108 @@ $kendo-chart-overlay-bg: $kendo-base-bg !default; $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default; $kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default; $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default; + +@forward "@progress/kendo-theme-core/scss/components/dataviz/_variables.scss" with ( + $kendo-series-a: $kendo-series-a, + $kendo-series-a-dark: $kendo-series-a-dark, + $kendo-series-a-darker: $kendo-series-a-darker, + $kendo-series-a-light: $kendo-series-a-light, + $kendo-series-a-lighter: $kendo-series-a-lighter, + $kendo-series-b: $kendo-series-b, + $kendo-series-b-dark: $kendo-series-b-dark, + $kendo-series-b-darker: $kendo-series-b-darker, + $kendo-series-b-light: $kendo-series-b-light, + $kendo-series-b-lighter: $kendo-series-b-lighter, + $kendo-series-c: $kendo-series-c, + $kendo-series-c-dark: $kendo-series-c-dark, + $kendo-series-c-darker: $kendo-series-c-darker, + $kendo-series-c-light: $kendo-series-c-light, + $kendo-series-c-lighter: $kendo-series-c-lighter, + $kendo-series-d: $kendo-series-d, + $kendo-series-d-dark: $kendo-series-d-dark, + $kendo-series-d-darker: $kendo-series-d-darker, + $kendo-series-d-light: $kendo-series-d-light, + $kendo-series-d-lighter: $kendo-series-d-lighter, + $kendo-series-e: $kendo-series-e, + $kendo-series-e-dark: $kendo-series-e-dark, + $kendo-series-e-darker: $kendo-series-e-darker, + $kendo-series-e-light: $kendo-series-e-light, + $kendo-series-e-lighter: $kendo-series-e-lighter, + $kendo-series-f: $kendo-series-f, + $kendo-series-f-dark: $kendo-series-f-dark, + $kendo-series-f-darker: $kendo-series-f-darker, + $kendo-series-f-light: $kendo-series-f-light, + $kendo-series-f-lighter: $kendo-series-f-lighter, + $kendo-series-1: $kendo-series-1, + $kendo-series-2: $kendo-series-2, + $kendo-series-3: $kendo-series-3, + $kendo-series-4: $kendo-series-4, + $kendo-series-5: $kendo-series-5, + $kendo-series-6: $kendo-series-6, + $kendo-series-7: $kendo-series-7, + $kendo-series-8: $kendo-series-8, + $kendo-series-9: $kendo-series-9, + $kendo-series-10: $kendo-series-10, + $kendo-series-11: $kendo-series-11, + $kendo-series-12: $kendo-series-12, + $kendo-series-13: $kendo-series-13, + $kendo-series-14: $kendo-series-14, + $kendo-series-15: $kendo-series-15, + $kendo-series-16: $kendo-series-16, + $kendo-series-17: $kendo-series-17, + $kendo-series-18: $kendo-series-18, + $kendo-series-19: $kendo-series-19, + $kendo-series-20: $kendo-series-20, + $kendo-series-21: $kendo-series-21, + $kendo-series-22: $kendo-series-22, + $kendo-series-23: $kendo-series-23, + $kendo-series-24: $kendo-series-24, + $kendo-series-25: $kendo-series-25, + $kendo-series-26: $kendo-series-26, + $kendo-series-27: $kendo-series-27, + $kendo-series-28: $kendo-series-28, + $kendo-series-29: $kendo-series-29, + $kendo-series-30: $kendo-series-30, + $kendo-chart-border-width: $kendo-chart-border-width, + $kendo-chart-font-family: $kendo-chart-font-family, + $kendo-chart-font-size: $kendo-chart-font-size, + $kendo-chart-line-height: $kendo-chart-line-height, + $kendo-chart-tooltip-font-size: $kendo-chart-tooltip-font-size, + $kendo-chart-label-font-size: $kendo-chart-label-font-size, + $kendo-chart-title-font-size: $kendo-chart-title-font-size, + $kendo-chart-pane-title-font-size: $kendo-chart-pane-title-font-size, + $kendo-chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight, + $kendo-chart-major-lines: $kendo-chart-major-lines, + $kendo-chart-minor-lines: $kendo-chart-minor-lines, + $kendo-chart-inactive: $kendo-chart-inactive, + $kendo-chart-area-opacity: $kendo-chart-area-opacity, + $kendo-chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity, + $kendo-chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity, + $kendo-chart-tooltip-padding-x: $kendo-chart-tooltip-padding-x, + $kendo-chart-tooltip-padding-y: $kendo-chart-tooltip-padding-y, + $kendo-chart-tooltip-transition: $kendo-chart-tooltip-transition, + $kendo-chart-bg: $kendo-chart-bg, + $kendo-chart-text: $kendo-chart-text, + $kendo-chart-border: $kendo-chart-border, + $kendo-chart-crosshair-background: $kendo-chart-crosshair-background, + $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-crosshair-shared-tooltip-color, + $kendo-chart-crosshair-shared-tooltip-background: $kendo-chart-crosshair-shared-tooltip-background, + $kendo-chart-crosshair-shared-tooltip-border: $kendo-chart-crosshair-shared-tooltip-border, + $kendo-chart-notes-background: $kendo-chart-notes-background, + $kendo-chart-notes-border: $kendo-chart-notes-border, + $kendo-chart-notes-lines: $kendo-chart-notes-lines, + $kendo-chart-error-bars-background: $kendo-chart-error-bars-background, + $kendo-chart-selection-handle-size: $kendo-chart-selection-handle-size, + $kendo-chart-selection-border-color: $kendo-chart-selection-border-color, + $kendo-chart-selection-shadow: $kendo-chart-selection-shadow, + $kendo-chart-computed-title-height: $kendo-chart-computed-title-height, + $kendo-treemap-font-family: $kendo-treemap-font-family, + $kendo-treemap-font-size: $kendo-treemap-font-size, + $kendo-treemap-line-height: $kendo-treemap-line-height, + $kendo-treemap-padding-x: $kendo-treemap-padding-x, + $kendo-treemap-padding-y: $kendo-treemap-padding-y, + $kendo-chart-overlay-bg: $kendo-chart-overlay-bg, + $kendo-chart-no-data-font-size: $kendo-chart-no-data-font-size, + $kendo-chart-no-data-font-weight: $kendo-chart-no-data-font-weight, + $kendo-chart-no-data-padding-y: $kendo-chart-no-data-padding-y +); diff --git a/packages/default/scss/dateinput/_layout.scss b/packages/default/scss/dateinput/_layout.scss index 0a054ff7b11..9c221cc3bbd 100644 --- a/packages/default/scss/dateinput/_layout.scss +++ b/packages/default/scss/dateinput/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-date-input--layout-base() { - - // Date input - .k-dateinput {} - -} +@use "@progress/kendo-theme-core/scss/components/dateinput/_layout.scss" as *; @mixin kendo-date-input--layout() { diff --git a/packages/default/scss/dateinput/_theme.scss b/packages/default/scss/dateinput/_theme.scss index d2e640b3154..dace5ad47a9 100644 --- a/packages/default/scss/dateinput/_theme.scss +++ b/packages/default/scss/dateinput/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-date-input--theme-base() { - - // Date input - .k-dateinput {} - -} +@use "@progress/kendo-theme-core/scss/components/dateinput/_theme.scss" as *; @mixin kendo-date-input--theme() { diff --git a/packages/default/scss/datepicker/_layout.scss b/packages/default/scss/datepicker/_layout.scss index bce9315a85b..8d712b33102 100644 --- a/packages/default/scss/datepicker/_layout.scss +++ b/packages/default/scss/datepicker/_layout.scss @@ -1,9 +1,5 @@ -@mixin kendo-date-picker--layout-base() { +@use "@progress/kendo-theme-core/scss/components/datepicker/_layout.scss" as *; - // Date picker - .k-datepicker {} - -} @mixin kendo-date-picker--layout() { @include kendo-date-picker--layout-base(); diff --git a/packages/default/scss/datepicker/_theme.scss b/packages/default/scss/datepicker/_theme.scss index dad65bf242d..2a9002415a4 100644 --- a/packages/default/scss/datepicker/_theme.scss +++ b/packages/default/scss/datepicker/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-date-picker--theme-base() { - - // Date picker - .k-datepicker {} - -} +@use "@progress/kendo-theme-core/scss/components/datepicker/_theme.scss" as *; @mixin kendo-date-picker--theme() { diff --git a/packages/default/scss/daterangepicker/_layout.scss b/packages/default/scss/daterangepicker/_layout.scss index 15ec4797fa6..d429bf09169 100644 --- a/packages/default/scss/daterangepicker/_layout.scss +++ b/packages/default/scss/daterangepicker/_layout.scss @@ -1,50 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../input/_variables.scss" as *; - -@mixin kendo-date-range-picker--layout-base() { - - // Daterange picker - .k-daterange-picker { - width: $kendo-input-default-width; - display: flex; - flex-flow: row nowrap; - align-items: flex-end; - gap: k-spacing(2); - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .k-dateinput { - width: $kendo-daterange-picker-input-width; - } - } - - - // Angular specific - kendo-daterange { - // @extend .k-daterangepicker !optional; - } - - - // React specific - .k-daterangepicker-wrap { - display: inherit; - flex-flow: inherit; - align-items: inherit; - gap: inherit; - } - - - // Alias - .k-daterangepicker { - @extend .k-daterange-picker !optional; - } - -} +@use "@progress/kendo-theme-core/scss/components/daterangepicker/_layout.scss" as *; @mixin kendo-date-range-picker--layout() { diff --git a/packages/default/scss/daterangepicker/_theme.scss b/packages/default/scss/daterangepicker/_theme.scss index da034865883..b6bb7d1cde1 100644 --- a/packages/default/scss/daterangepicker/_theme.scss +++ b/packages/default/scss/daterangepicker/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-date-range-picker--theme-base() { - - // Date range picker - .k-daterangepicker {} - -} +@use "@progress/kendo-theme-core/scss/components/daterangepicker/_theme.scss" as *; @mixin kendo-date-range-picker--theme() { diff --git a/packages/default/scss/daterangepicker/_variables.scss b/packages/default/scss/daterangepicker/_variables.scss index 928893a464e..cc8c6cd3eae 100644 --- a/packages/default/scss/daterangepicker/_variables.scss +++ b/packages/default/scss/daterangepicker/_variables.scss @@ -1,2 +1,6 @@ // Daterangepicker $kendo-daterange-picker-input-width: 10em !default; + +@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with ( + $kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width +); diff --git a/packages/default/scss/datetimepicker/_layout.scss b/packages/default/scss/datetimepicker/_layout.scss index c861238717b..54198b93a19 100644 --- a/packages/default/scss/datetimepicker/_layout.scss +++ b/packages/default/scss/datetimepicker/_layout.scss @@ -1,54 +1,4 @@ -@use "./variables.scss" as *; -@use "../action-buttons/_variables.scss" as *; - -@mixin kendo-date-time-picker--layout-base() { - - // Datetime container - .k-datetime-container {} - - // Datetime selector - .k-datetime-selector { - display: flex; - transition: transform .2s; - } - - // Wrap - .k-datetime-wrap { - width: $kendo-datetime-width; - overflow: hidden; - - .k-datetime-buttongroup { - padding-block: $kendo-actions-padding-y; - padding-inline: $kendo-actions-padding-x; - } - - .k-calendar, - .k-timeselector { - width: 100%; - border-width: 0; - } - } - - // Inner wrap - .k-datetime-calendar-wrap, - .k-datetime-time-wrap { - text-align: center; - flex: 0 0 $kendo-datetime-width; - } - - // Tabs - .k-date-tab .k-datetime-selector { - transform: translateX(0); - } - .k-time-tab .k-datetime-selector { - transform: translateX(-100%); - } - - :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector, - .k-time-tab .k-datetime-selector:is(.k-rtl, [dir="rtl"]) { - transform: translateX(100%); - } -} +@use "@progress/kendo-theme-core/scss/components/datetimepicker/_layout.scss" as *; @mixin kendo-date-time-picker--layout() { diff --git a/packages/default/scss/datetimepicker/_theme.scss b/packages/default/scss/datetimepicker/_theme.scss index 6716fe9d63a..ced009c166b 100644 --- a/packages/default/scss/datetimepicker/_theme.scss +++ b/packages/default/scss/datetimepicker/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-date-time-picker--theme-base() { - - // Datetime picker - .k-datetimepicker {} - -} +@use "@progress/kendo-theme-core/scss/components/datetimepicker/_theme.scss" as *; @mixin kendo-date-time-picker--theme() { diff --git a/packages/default/scss/datetimepicker/_variables.scss b/packages/default/scss/datetimepicker/_variables.scss index 44dcd21dd1d..9cdb7d6af68 100644 --- a/packages/default/scss/datetimepicker/_variables.scss +++ b/packages/default/scss/datetimepicker/_variables.scss @@ -2,3 +2,7 @@ // DateTime $kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default; + +@forward "@progress/kendo-theme-core/scss/components/datetimepicker/_variables.scss" with ( + $kendo-datetime-width: $kendo-datetime-width +); diff --git a/packages/default/scss/dialog/_layout.scss b/packages/default/scss/dialog/_layout.scss index b629ba80555..055e0d5b506 100644 --- a/packages/default/scss/dialog/_layout.scss +++ b/packages/default/scss/dialog/_layout.scss @@ -1,76 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../window/_variables.scss" as *; - -@mixin kendo-dialog--layout-base() { - - .k-dialog-wrapper { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - outline: 0; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10001; - - .k-dialog { - position: relative; - } - } - - .k-dialog { - padding: 0; - position: fixed; - box-sizing: border-box; - - // Centered - &.k-dialog-centered { - transform: translate(-50%, -50%); - top: 50%; - left: 50%; - } - - .k-multiselect { - width: 100%; - } - } - - - // Titlebar - .k-dialog-titlebar {} - .k-dialog-title {} - - - // Actions - .k-dialog-titlebar-actions {} - .k-dialog-action {} - - - // Content - .k-dialog-content {} - - - // Buttons - .k-dialog-actions { - @include border-bottom-radius( $kendo-window-border-radius ); - padding-block: $kendo-dialog-buttongroup-padding-y; - padding-inline: $kendo-dialog-buttongroup-padding-x; - border-width: $kendo-dialog-buttongroup-border-width 0 0; - border-style: solid; - border-color: inherit; - flex: 0 0 auto; - display: flex; - flex-flow: row wrap; - align-items: center; - gap: $kendo-dialog-button-spacing; - overflow: hidden; - } - -} +@use "@progress/kendo-theme-core/scss/components/dialog/_layout.scss" as *; @mixin kendo-dialog--layout() { diff --git a/packages/default/scss/dialog/_theme.scss b/packages/default/scss/dialog/_theme.scss index 9287b48e0b1..c52b06cbadc 100644 --- a/packages/default/scss/dialog/_theme.scss +++ b/packages/default/scss/dialog/_theme.scss @@ -1,27 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-dialog--theme-base() { - - // Dialog titlebar - .k-dialog-titlebar { - @include fill( - $kendo-dialog-titlebar-text, - $kendo-dialog-titlebar-bg, - $kendo-dialog-titlebar-border - ); - } - - // Dialog theme colors - @each $name, $color in $kendo-dialog-theme-colors { - .k-dialog-#{$name} .k-dialog-titlebar { - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - background-color: $color; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/dialog/_theme.scss" as *; @mixin kendo-dialog--theme() { diff --git a/packages/default/scss/dialog/_variables.scss b/packages/default/scss/dialog/_variables.scss index b847ff9fb01..0c9e55f2168 100644 --- a/packages/default/scss/dialog/_variables.scss +++ b/packages/default/scss/dialog/_variables.scss @@ -34,3 +34,14 @@ $kendo-dialog-theme-colors: ( "light": map.get($kendo-theme-colors, "light"), "dark": map.get($kendo-theme-colors, "dark") ) !default; + +@forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with ( + $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg, + $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text, + $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border, + $kendo-dialog-buttongroup-padding-x: $kendo-dialog-buttongroup-padding-x, + $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y, + $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width, + $kendo-dialog-button-spacing: $kendo-dialog-button-spacing, + $kendo-dialog-theme-colors: $kendo-dialog-theme-colors +); diff --git a/packages/default/scss/dock-manager/_layout.scss b/packages/default/scss/dock-manager/_layout.scss index 3fe12d1f939..174dbd42ca7 100644 --- a/packages/default/scss/dock-manager/_layout.scss +++ b/packages/default/scss/dock-manager/_layout.scss @@ -1,223 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-dock-manager--layout-base() { - - // DockManager - .k-dock-manager { - width: 100%; - height: 100%; - border-width: $kendo-dock-manager-border-width; - border-style: $kendo-dock-manager-border-style; - position: relative; - display: flex; - flex-flow: row nowrap; - overflow: auto; - box-sizing: border-box; - } - - // Toolbar - .k-dock-manager-toolbar { - border-width: 0 $kendo-dock-manager-border-width 0 0; - border-color: inherit; - flex-shrink: 0; - writing-mode: vertical-lr; - box-shadow: none; - - &::before { - height: 0; - } - - .k-separator-horizontal { - width: $kendo-line-height-em; - height: 0; - border-width: $kendo-dock-manager-border-width 0 0; - } - } - - // Panes - .k-dock-manager-pane-container { - width: 100%; - height: 100%; - display: flex; - flex-grow: 1; - overflow: hidden; - } - - // Splitter - .k-dock-manager-splitter, - .k-dock-manager-unpinned-container { - height: 100%; - border-width: 0; - align-items: stretch; - - > .k-pane { - height: auto; - flex-direction: column; - border-color: inherit; - } - - .k-pane-header { - display: flex; - align-items: center; - justify-content: center; - padding-block: $kendo-dock-manager-pane-header-padding-y; - padding-inline: $kendo-dock-manager-pane-header-padding-x; - border-block-end-width: $kendo-dock-manager-pane-header-border-width; - border-block-end-style: $kendo-dock-manager-pane-header-border-style; - border-color: inherit; - } - - .k-pane-title { - padding-block: $kendo-dock-manager-pane-title-padding-y; - padding-inline: $kendo-dock-manager-pane-title-padding-x; - font-family: $kendo-dock-manager-pane-title-font-family; - font-size: $kendo-dock-manager-pane-title-font-size; - line-height: $kendo-dock-manager-pane-title-line-height; - font-weight: $kendo-dock-manager-pane-title-font-weight; - flex: 1 1 auto; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .k-pane-scrollable { - height: 100%; - display: flex; - flex-direction: column; - border-color: inherit; - } - - .k-pane-content { - height: 100%; - padding-block: $kendo-dock-manager-pane-content-padding-y; - padding-inline: $kendo-dock-manager-pane-content-padding-x; - overflow: auto; - flex: 1; - } - - .k-pane-actions { - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: center; - } - - .k-pane-tabbed { - padding-block-start: $kendo-dock-manager-tabbed-pane-padding-y; - padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x; - padding-inline: $kendo-dock-manager-tabbed-pane-padding-x; - } - - .k-splitbar { - border-width: 0 1px; - border-style: solid; - border-color: inherit; - } - .k-splitbar-vertical { - border-width: 1px 0; - } - } - - // Unpinned pane - .k-dock-manager-unpinned-container { - width: $kendo-dock-manager-unpinned-container-width; - position: absolute; - display: flex; - height: 100%; - border-color: inherit; - z-index: 20; - - .k-pane { - display: inline-flex; - flex-direction: column; - position: relative; - flex: 1 1 auto; - } - - .k-splitbar { - height: 100%; - position: relative; - flex: none; - } - } - - // Docking preview - .k-docking-preview { - width: 100%; - height: 100%; - box-sizing: border-box; - display: flex; - position: absolute; - top: 0; - left: 0; - border-width: $kendo-dock-manager-dock-preview-border-width; - border-style: $kendo-dock-manager-dock-preview-border-style; - border-radius: $kendo-dock-manager-dock-preview-border-radius; - z-index: 10; - } - - .k-dock-manager-window:has(.k-pane) .k-window-content { - padding: 0; - } - -} - -@mixin kendo-dock-navigator--layout() { - - // DockNavigator - .k-dock-navigator-container { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - position: absolute; - z-index: 10001; - pointer-events: none; - } - - .k-dock-navigator { - display: grid; - grid-template-columns: repeat(3, auto); - grid-template-rows: repeat(3, auto); - justify-content: center; - position: absolute; - } - - .k-dock-indicator { - padding: $kendo-dock-indicator-padding; - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - position: relative; - pointer-events: all; - outline-width: $kendo-dock-indicator-outline-width; - outline-style: $kendo-dock-indicator-outline-style; - - &.k-dock-indicator-middle { - filter: none; - } - } - - .k-dock-indicator-top { - grid-area: 1 / 2 / auto; - } - .k-dock-indicator-right { - grid-area: 2 / 3 / auto; - } - .k-dock-indicator-bottom { - grid-area: 3 / 2 / auto; - } - .k-dock-indicator-left { - grid-area: 2 / 1 / auto; - } - .k-dock-indicator-middle { - grid-area: 2 / 2 / auto; - } - -} +@use "@progress/kendo-theme-core/scss/components/dock-manager/_layout.scss" as *; @mixin kendo-dock-manager--layout() { @include kendo-dock-manager--layout-base(); diff --git a/packages/default/scss/dock-manager/_theme.scss b/packages/default/scss/dock-manager/_theme.scss index 5b80e454313..315b71242ab 100644 --- a/packages/default/scss/dock-manager/_theme.scss +++ b/packages/default/scss/dock-manager/_theme.scss @@ -1,48 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-dock-manager--theme-base() { - - // DockManager - .k-dock-manager { - border-color: $kendo-dock-manager-border; - } - - // Splitter - .k-dock-manager-splitter .k-pane-header, - .k-dock-manager-unpinned-container .k-pane-header { - background-color: $kendo-dock-manager-pane-header-bg; - } - - .k-dock-manager-unpinned-container { - background-color: $kendo-dock-manager-unpinned-container-bg; - @include box-shadow( $kendo-dock-manager-unpinned-container-shadow ); - } - - // Docking preview - .k-docking-preview { - background-color: $kendo-dock-manager-dock-preview-bg; - border-color: $kendo-dock-manager-dock-preview-border; - } - -} - -@mixin kendo-dock-navigator--theme() { - - .k-dock-indicator { - color: $kendo-dock-indicator-text; - background-color: $kendo-dock-indicator-bg; - outline-color: $kendo-dock-indicator-outline; - filter: $kendo-dock-indicator-shadow; - - &:hover, - &.k-hover { - background-color: $kendo-dock-indicator-hover-bg; - color: $kendo-dock-indicator-hover-text; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/dock-manager/_theme.scss" as *; @mixin kendo-dock-manager--theme() { @include kendo-dock-manager--theme-base(); diff --git a/packages/default/scss/dock-manager/_variables.scss b/packages/default/scss/dock-manager/_variables.scss index 862d186c94d..5802b30b253 100644 --- a/packages/default/scss/dock-manager/_variables.scss +++ b/packages/default/scss/dock-manager/_variables.scss @@ -113,3 +113,41 @@ $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in /// The border color of the dropping area in the DockManager component. /// @group dock-manager $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default; + +@forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with ( + $kendo-dock-manager-border-width: $kendo-dock-manager-border-width, + $kendo-dock-manager-border-style: $kendo-dock-manager-border-style, + $kendo-dock-manager-border: $kendo-dock-manager-border, + $kendo-dock-manager-pane-header-padding-y: $kendo-dock-manager-pane-header-padding-y, + $kendo-dock-manager-pane-header-padding-x: $kendo-dock-manager-pane-header-padding-x, + $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-pane-header-border-width, + $kendo-dock-manager-pane-header-border-style: $kendo-dock-manager-pane-header-border-style, + $kendo-dock-manager-pane-header-bg: $kendo-dock-manager-pane-header-bg, + $kendo-dock-manager-pane-title-padding-y: $kendo-dock-manager-pane-title-padding-y, + $kendo-dock-manager-pane-title-padding-x: $kendo-dock-manager-pane-title-padding-x, + $kendo-dock-manager-pane-title-font-family: $kendo-dock-manager-pane-title-font-family, + $kendo-dock-manager-pane-title-font-size: $kendo-dock-manager-pane-title-font-size, + $kendo-dock-manager-pane-title-line-height: $kendo-dock-manager-pane-title-line-height, + $kendo-dock-manager-pane-title-font-weight: $kendo-dock-manager-pane-title-font-weight, + $kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-content-padding-x, + $kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-content-padding-y, + $kendo-dock-manager-tabbed-pane-padding-y: $kendo-dock-manager-tabbed-pane-padding-y, + $kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-tabbed-pane-padding-x, + $kendo-dock-manager-unpinned-container-width: $kendo-dock-manager-unpinned-container-width, + $kendo-dock-manager-unpinned-container-bg: $kendo-dock-manager-unpinned-container-bg, + $kendo-dock-manager-unpinned-container-shadow: $kendo-dock-manager-unpinned-container-shadow, + $kendo-dock-indicator-padding: $kendo-dock-indicator-padding, + $kendo-dock-indicator-bg: $kendo-dock-indicator-bg, + $kendo-dock-indicator-text: $kendo-dock-indicator-text, + $kendo-dock-indicator-outline-width: $kendo-dock-indicator-outline-width, + $kendo-dock-indicator-outline-style: $kendo-dock-indicator-outline-style, + $kendo-dock-indicator-outline: $kendo-dock-indicator-outline, + $kendo-dock-indicator-shadow: $kendo-dock-indicator-shadow, + $kendo-dock-indicator-hover-bg: $kendo-dock-indicator-hover-bg, + $kendo-dock-indicator-hover-text: $kendo-dock-indicator-hover-text, + $kendo-dock-manager-dock-preview-border-width: $kendo-dock-manager-dock-preview-border-width, + $kendo-dock-manager-dock-preview-border-style: $kendo-dock-manager-dock-preview-border-style, + $kendo-dock-manager-dock-preview-border-radius: $kendo-dock-manager-dock-preview-border-radius, + $kendo-dock-manager-dock-preview-bg: $kendo-dock-manager-dock-preview-bg, + $kendo-dock-manager-dock-preview-border: $kendo-dock-manager-dock-preview-border +); diff --git a/packages/default/scss/draggable/_layout.scss b/packages/default/scss/draggable/_layout.scss index 3db48826b6b..42965d79ac7 100644 --- a/packages/default/scss/draggable/_layout.scss +++ b/packages/default/scss/draggable/_layout.scss @@ -1,130 +1,4 @@ -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-draggable--layout-base() { - - // Layout - .k-drag-clue { - @include border-radius( $kendo-drag-hint-border-radius ); - padding-block: $kendo-drag-hint-padding-y; - padding-inline: $kendo-drag-hint-padding-x; - border-width: $kendo-drag-hint-border-width; - border-style: if( $kendo-drag-hint-border-width == null, null, solid ); - box-sizing: border-box; - font-size: $kendo-drag-hint-font-size; - font-family: $kendo-drag-hint-font-family; - line-height: $kendo-drag-hint-line-height; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - white-space: nowrap; - opacity: $kendo-drag-hint-opacity; - overflow: hidden; - position: absolute; - z-index: 20000; - cursor: move; - } - .k-drag-status, - .k-drag-clue .k-drag-status { - margin: 0; - margin-right: .4ex; - } - - - // Drop hint - .k-drop-hint { - display: flex; - gap: $kendo-drop-hint-arrow-spacing; - justify-content: space-between; - align-items: center; - position: absolute; - z-index: 1000; - transform: translate(-50%, -50%); - } - - .k-drop-hint-start, - .k-drop-hint-end { - flex-shrink: 0; - border-width: math.div( $kendo-drop-hint-arrow-size, 2 ); - border-style: solid; - border-color: transparent; - } - - .k-drop-hint-line { - flex-grow: 1; - background-color: $kendo-drop-hint-bg; - } - - .k-drop-hint-h { - .k-drop-hint-start { - border-left-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); - border-left-color: $kendo-drop-hint-bg; - border-right-width: 0; - } - - .k-drop-hint-line { - width: $kendo-drop-hint-line-h-width; - height: $kendo-drop-hint-line-h-height; - } - - .k-drop-hint-end { - border-right-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); - border-right-color: $kendo-drop-hint-bg; - border-left-width: 0; - } - } - - .k-drop-hint-v { - flex-direction: column; - - .k-drop-hint-start { - border-top-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); - border-top-color: $kendo-drop-hint-bg; - border-bottom-width: 0; - } - - .k-drop-hint-line { - width: $kendo-drop-hint-line-v-width; - height: $kendo-drop-hint-line-v-height; - } - - .k-drop-hint-end { - border-bottom-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index ); - border-bottom-color: $kendo-drop-hint-bg; - border-top-width: 0; - } - } - - - // Reorder cue - .k-reorder-cue { - position: absolute; - - &::before, - &::after { - content: ""; - width: 0; - height: 0; - border: 3px solid transparent; - position: absolute; - transform: translateX(-50%); - } - - &::before { - border-bottom-width: 0; - border-top-color: currentColor; - top: -4px; - } - &::after { - border-top-width: 0; - border-bottom-color: currentColor; - bottom: -4px; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/draggable/_layout.scss" as *; @mixin kendo-draggable--layout() { diff --git a/packages/default/scss/draggable/_theme.scss b/packages/default/scss/draggable/_theme.scss index 05de6fac736..b7f5cbb82fc 100644 --- a/packages/default/scss/draggable/_theme.scss +++ b/packages/default/scss/draggable/_theme.scss @@ -1,20 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-draggable--theme-base() { - - // Drag hint - .k-drag-clue { - @include fill( - $kendo-drag-hint-text, - $kendo-drag-hint-bg, - $kendo-drag-hint-border, - $kendo-drag-hint-gradient - ); - @include box-shadow( $kendo-drag-hint-shadow ); - } - -} +@use "@progress/kendo-theme-core/scss/components/draggable/_theme.scss" as *; @mixin kendo-draggable--theme() { diff --git a/packages/default/scss/draggable/_variables.scss b/packages/default/scss/draggable/_variables.scss index 3a97b3d0d14..5b094c7184c 100644 --- a/packages/default/scss/draggable/_variables.scss +++ b/packages/default/scss/draggable/_variables.scss @@ -28,3 +28,26 @@ $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default; $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default; $kendo-drop-hint-bg: $kendo-color-primary !default; + +@forward "@progress/kendo-theme-core/scss/components/draggable/_variables.scss" with ( + $kendo-drag-hint-padding-x: $kendo-drag-hint-padding-x, + $kendo-drag-hint-padding-y: $kendo-drag-hint-padding-y, + $kendo-drag-hint-border-width: $kendo-drag-hint-border-width, + $kendo-drag-hint-border-radius: $kendo-drag-hint-border-radius, + $kendo-drag-hint-font-size: $kendo-drag-hint-font-size, + $kendo-drag-hint-font-family: $kendo-drag-hint-font-family, + $kendo-drag-hint-line-height: $kendo-drag-hint-line-height, + $kendo-drag-hint-bg: $kendo-drag-hint-bg, + $kendo-drag-hint-text: $kendo-drag-hint-text, + $kendo-drag-hint-border: $kendo-drag-hint-border, + $kendo-drag-hint-gradient: $kendo-drag-hint-gradient, + $kendo-drag-hint-shadow: $kendo-drag-hint-shadow, + $kendo-drag-hint-opacity: $kendo-drag-hint-opacity, + $kendo-drop-hint-arrow-size: $kendo-drop-hint-arrow-size, + $kendo-drop-hint-arrow-spacing: $kendo-drop-hint-arrow-spacing, + $kendo-drop-hint-line-h-width: $kendo-drop-hint-line-h-width, + $kendo-drop-hint-line-h-height: $kendo-drop-hint-line-h-height, + $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-v-width, + $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-v-height, + $kendo-drop-hint-bg: $kendo-drop-hint-bg +); diff --git a/packages/default/scss/drawer/_layout.scss b/packages/default/scss/drawer/_layout.scss index 8fed86d2d3f..7e2c09faaa9 100644 --- a/packages/default/scss/drawer/_layout.scss +++ b/packages/default/scss/drawer/_layout.scss @@ -1,205 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-drawer--layout-base() { - - // Container - .k-drawer-container { - display: flex; - flex-flow: row nowrap; - align-items: flex-start; - } - - kendo-drawer.k-drawer, - kendo-drawer .k-drawer-wrapper { - transition: none; - } - - - // Drawer - .k-drawer { - height: 100%; - max-width: 100%; - border-width: 0; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-drawer-font-family; - font-size: $kendo-drawer-font-size; - line-height: $kendo-drawer-line-height; - display: flex; - flex-direction: column; - flex: 0 0 auto; - transition: all 300ms ease-in-out; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .k-drawer-mini &.k-drawer-start, - .k-drawer-expanded &.k-drawer-start { - border-inline-end-width: $kendo-drawer-border-width; - } - - .k-drawer-mini &.k-drawer-end, - .k-drawer-expanded &.k-drawer-end { - border-inline-start-width: $kendo-drawer-border-width; - } - - - // Position - &.k-drawer-start { - top: 0; - inset-inline-start: 0; - } - &.k-drawer-end { - top: 0; - inset-inline-end: 0; - } - } - - - // Content - .k-drawer-content { - flex: 1 1 auto; - overflow: auto; - padding-block: $kendo-drawer-content-padding-y; - padding-inline: $kendo-drawer-content-padding-x; - } - - - // Overlay - .k-drawer-overlay { - .k-drawer { - max-width: 80vw; // limit width - position: fixed; - z-index: 10002; - border: 0; - } - - > .k-overlay { - display: none; - } - &.k-drawer-expanded > .k-overlay { - display: block; - } - } - - - // Push drawer - .k-drawer-push { - display: flex; - flex-direction: row; - - .k-drawer { - height: auto; - position: relative; - align-self: stretch; - } - - &:has(.k-drawer.k-drawer-end) { - flex-direction: row-reverse; - } - } - - - // Drawer items - .k-drawer-wrapper { - overflow-x: hidden; - overflow-y: auto; - scrollbar-width: thin; // Scrollbar styles for Mozilla - transition: all 300ms ease-in-out; - - // Scrollbar styles for Chrome, Safari and Opera - &::-webkit-scrollbar { - width: $kendo-drawer-scrollbar-width; - } - &::-webkit-scrollbar-thumb { - border-radius: $kendo-drawer-scrollbar-radius; - } - } - .k-drawer-items { - margin: 0; - padding: 0; - list-style: none; - display: flex; - flex-direction: column; - align-items: stretch; - } - .k-drawer-item { - padding-block: $kendo-drawer-item-padding-y; - padding-inline: $kendo-drawer-item-padding-x; - outline: 0; - color: inherit; - font-size: $kendo-drawer-item-font-size; - line-height: $kendo-drawer-item-line-height; - display: flex; - flex-flow: row nowrap; - gap: $kendo-drawer-item-padding-x; - cursor: pointer; - - > .k-drawer-link { - margin-block: calc( #{$kendo-drawer-item-padding-y} * -1 ); - margin-inline: calc( #{$kendo-drawer-item-padding-x} * -1 ); - padding-block: $kendo-drawer-item-padding-y; - padding-inline: $kendo-drawer-item-padding-x; - color: inherit; - display: flex; - flex-flow: row nowrap; - flex: 1 0 auto; - gap: $kendo-drawer-item-padding-x; - } - - .k-icon { - flex-shrink: 0; - padding-inline: $kendo-drawer-icon-padding-x; - padding-block: $kendo-drawer-icon-padding-y; - box-sizing: content-box; - - &.k-i-none { - margin: 0; - } - } - - .k-item-text { - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .k-drawer-toggle { - margin-inline-start: auto; - cursor: pointer; - display: flex; - } - - // Hierarchy items - @for $i from 1 through $kendo-drawer-item-level-count { - &.k-level-#{$i} { - padding-inline-start: calc(( #{$i} + 1) * #{$kendo-drawer-item-level-padding-x}) ; - } - } - } - - - // Separator - .k-drawer-separator { - padding: 0; - height: 1px; - } - - - // Mini mode - .k-drawer-mini .k-drawer-wrapper { - width: $kendo-drawer-mini-initial-width; - } -} +@use "@progress/kendo-theme-core/scss/components/drawer/_layout.scss" as *; @mixin kendo-drawer--layout() { diff --git a/packages/default/scss/drawer/_theme.scss b/packages/default/scss/drawer/_theme.scss index 4df2066734c..312cf4a401f 100644 --- a/packages/default/scss/drawer/_theme.scss +++ b/packages/default/scss/drawer/_theme.scss @@ -1,66 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-drawer--theme-base() { - - .k-drawer { - @include fill( - $kendo-drawer-text, - $kendo-drawer-bg, - $kendo-drawer-border - ); - } - - // Drawer items - .k-drawer-wrapper { - scrollbar-color: $kendo-drawer-scrollbar-color $kendo-drawer-scrollbar-bg; - - &::-webkit-scrollbar-track { - background: $kendo-drawer-scrollbar-bg; - } - &::-webkit-scrollbar-thumb { - background: $kendo-drawer-scrollbar-color; - } - &::-webkit-scrollbar-thumb:hover { - background: $kendo-drawer-scrollbar-hover-color; - } - } - .k-drawer-item { - - &:hover, - &.k-hover { - color: $kendo-drawer-hover-text; - background-color: $kendo-drawer-hover-bg; - } - - &:focus, - &.k-focus { - background-color: $kendo-drawer-focus-bg; - @include focus-indicator( $kendo-drawer-focus-shadow, true ); - - &:hover, - &.k-hover { - color: $kendo-drawer-hover-text; - background-color: $kendo-drawer-hover-bg; - } - } - - &.k-selected { - color: $kendo-drawer-selected-text; - background-color: $kendo-drawer-selected-bg; - - &:hover, - &.k-hover { - color: $kendo-drawer-selected-hover-text; - background-color: $kendo-drawer-selected-hover-bg; - } - } - } - .k-drawer-separator { - background-color: $kendo-drawer-border; - } - -} +@use "@progress/kendo-theme-core/scss/components/drawer/_theme.scss" as *; @mixin kendo-drawer--theme() { diff --git a/packages/default/scss/drawer/_variables.scss b/packages/default/scss/drawer/_variables.scss index e0fa58e0ca3..76a434a6ebe 100644 --- a/packages/default/scss/drawer/_variables.scss +++ b/packages/default/scss/drawer/_variables.scss @@ -110,3 +110,37 @@ $kendo-drawer-selected-hover-bg: $kendo-selected-hover-bg !default; /// The text color of the selected and hovered Drawer item. /// @group drawer $kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default; + +@forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with ( + $kendo-drawer-bg: $kendo-drawer-bg, + $kendo-drawer-text: $kendo-drawer-text, + $kendo-drawer-border: $kendo-drawer-border, + $kendo-drawer-border-width: $kendo-drawer-border-width, + $kendo-drawer-font-family: $kendo-drawer-font-family, + $kendo-drawer-font-size: $kendo-drawer-font-size, + $kendo-drawer-line-height: $kendo-drawer-line-height, + $kendo-drawer-content-padding-x: $kendo-drawer-content-padding-x, + $kendo-drawer-content-padding-y: $kendo-drawer-content-padding-y, + $kendo-drawer-scrollbar-width: $kendo-drawer-scrollbar-width, + $kendo-drawer-scrollbar-color: $kendo-drawer-scrollbar-color, + $kendo-drawer-scrollbar-bg: $kendo-drawer-scrollbar-bg, + $kendo-drawer-scrollbar-radius: $kendo-drawer-scrollbar-radius, + $kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-hover-color, + $kendo-drawer-item-padding-x: $kendo-drawer-item-padding-x, + $kendo-drawer-item-padding-y: $kendo-drawer-item-padding-y, + $kendo-drawer-item-font-size: $kendo-drawer-item-font-size, + $kendo-drawer-item-line-height: $kendo-drawer-item-line-height, + $kendo-drawer-item-level-padding-x: $kendo-drawer-item-level-padding-x, + $kendo-drawer-item-level-count: $kendo-drawer-item-level-count, + $kendo-drawer-icon-padding-x: $kendo-drawer-icon-padding-x, + $kendo-drawer-icon-padding-y: $kendo-drawer-icon-padding-y, + $kendo-drawer-mini-initial-width: $kendo-drawer-mini-initial-width, + $kendo-drawer-hover-bg: $kendo-drawer-hover-bg, + $kendo-drawer-hover-text: $kendo-drawer-hover-text, + $kendo-drawer-focus-bg: $kendo-drawer-focus-bg, + $kendo-drawer-focus-shadow: $kendo-drawer-focus-shadow, + $kendo-drawer-selected-bg: $kendo-drawer-selected-bg, + $kendo-drawer-selected-text: $kendo-drawer-selected-text, + $kendo-drawer-selected-hover-bg: $kendo-drawer-selected-hover-bg, + $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text +); diff --git a/packages/default/scss/dropdowngrid/_layout.scss b/packages/default/scss/dropdowngrid/_layout.scss index ce6abaa0cd4..50d504bd72f 100644 --- a/packages/default/scss/dropdowngrid/_layout.scss +++ b/packages/default/scss/dropdowngrid/_layout.scss @@ -1,18 +1,4 @@ -@mixin kendo-dropdown-grid--layout-base() { - - // Dropdown grid - .k-dropdown-grid {} - - - // Dropdown grid popup - .k-dropdowngrid-popup { - overflow: hidden; - } - .k-dropdowngrid-popup > .k-data-table { - border-width: 0; - } - -} +@use "@progress/kendo-theme-core/scss/components/dropdowngrid/_layout.scss" as *; @mixin kendo-dropdown-grid--layout() { diff --git a/packages/default/scss/dropdowngrid/_theme.scss b/packages/default/scss/dropdowngrid/_theme.scss index 37036d89914..359406e671c 100644 --- a/packages/default/scss/dropdowngrid/_theme.scss +++ b/packages/default/scss/dropdowngrid/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-dropdown-grid--theme-base() { - - // Dropdown grid - .k-dropdown-grid {} - -} +@use "@progress/kendo-theme-core/scss/components/dropdowngrid/_theme.scss" as *; @mixin kendo-dropdown-grid--theme() { diff --git a/packages/default/scss/dropdownlist/_layout.scss b/packages/default/scss/dropdownlist/_layout.scss index 440766ed64a..d711cd80d04 100644 --- a/packages/default/scss/dropdownlist/_layout.scss +++ b/packages/default/scss/dropdownlist/_layout.scss @@ -1,41 +1,4 @@ -@mixin kendo-dropdown-list--layout-base() { - - // Dropdown list - .k-dropdown-list {} - - - // Native select - select.k-dropdown-list {} - - - // Dropdown operator - .k-dropdown-operator { - width: min-content; - flex: none; - - .k-input-button { - border-width: 0; - width: min-content; - } - - .k-input-button .k-button-icon { - width: auto; - aspect-ratio: 1; - } - - .k-input-inner { - display: none; - } - } - - - // Legacy aliases - .k-dropdown, - .k-dropdownlist { - @extend .k-dropdown-list !optional; - } - -} +@use "@progress/kendo-theme-core/scss/components/dropdownlist/_layout.scss" as *; @mixin kendo-dropdown-list--layout() { diff --git a/packages/default/scss/dropdownlist/_theme.scss b/packages/default/scss/dropdownlist/_theme.scss index 0dcf6fcb3e8..db31763711a 100644 --- a/packages/default/scss/dropdownlist/_theme.scss +++ b/packages/default/scss/dropdownlist/_theme.scss @@ -1,12 +1,4 @@ -@mixin kendo-dropdown-list--theme-base() { - - // Dropdown list - .k-dropdown-list {} - - // Native select - select.k-dropdown-list {} - -} +@use "@progress/kendo-theme-core/scss/components/dropdownlist/_theme.scss" as *; @mixin kendo-dropdown-list--theme() { diff --git a/packages/default/scss/dropdowntree/_layout.scss b/packages/default/scss/dropdowntree/_layout.scss index 1db8653ec19..87d99fa1032 100644 --- a/packages/default/scss/dropdowntree/_layout.scss +++ b/packages/default/scss/dropdowntree/_layout.scss @@ -1,42 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-dropdown-tree--layout-base() { - - // Dropdown tree - .k-dropdown-tree {} - - // Dropdowntree popup - .k-popup-dropdowntree, // remove legacy class once updated in components - .k-dropdowntree-popup, - .k-multiselecttree-popup { - .k-treeview { - padding-block: calc( #{$kendo-dropdowntree-popup-padding-y} / 2 ); - padding-inline: calc( #{$kendo-dropdowntree-popup-padding-x} / 2 ); - } - - .k-check-all { - padding-block: $kendo-dropdowntree-popup-padding-y; - padding-inline: $kendo-dropdowntree-popup-padding-x; - } - } - - .k-multiselecttree { - .k-input-values { - width: auto; - max-width: 100%; - } - - .k-input-inner::before { - content: "\200b"; - width: 0px; - overflow: hidden; - flex: none; - display: inline-block; - vertical-align: top; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/dropdowntree/_layout.scss" as *; @mixin kendo-dropdown-tree--layout() { diff --git a/packages/default/scss/dropdowntree/_theme.scss b/packages/default/scss/dropdowntree/_theme.scss index 5b32601225d..75da0c260bc 100644 --- a/packages/default/scss/dropdowntree/_theme.scss +++ b/packages/default/scss/dropdowntree/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-dropdown-tree--theme-base() { - - // Dropdown tree - .k-dropdown-tree {} - -} +@use "@progress/kendo-theme-core/scss/components/dropdowntree/_theme.scss" as *; @mixin kendo-dropdown-tree--theme() { diff --git a/packages/default/scss/dropdowntree/_variables.scss b/packages/default/scss/dropdowntree/_variables.scss index 444a4de54c7..25b09b83555 100644 --- a/packages/default/scss/dropdowntree/_variables.scss +++ b/packages/default/scss/dropdowntree/_variables.scss @@ -8,3 +8,8 @@ $kendo-dropdowntree-popup-padding-x: k-spacing(2) !default; /// The vertical padding of the DropdownTree popup /// @group dropdowntree $kendo-dropdowntree-popup-padding-y: k-spacing(2) !default; + +@forward "@progress/kendo-theme-core/scss/components/dropdowntree/_variables.scss" with ( + $kendo-dropdowntree-popup-padding-x: $kendo-dropdowntree-popup-padding-x, + $kendo-dropdowntree-popup-padding-y: $kendo-dropdowntree-popup-padding-y +); diff --git a/packages/default/scss/dropzone/_layout.scss b/packages/default/scss/dropzone/_layout.scss index a25beb42229..e15c09e7d85 100644 --- a/packages/default/scss/dropzone/_layout.scss +++ b/packages/default/scss/dropzone/_layout.scss @@ -1,47 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-dropzone--layout-base() { - - // Dropzone - .k-external-dropzone { - height: $kendo-dropzone-min-height; - display: flex; - flex-flow: row nowrap; - } - - // Dropzone inner - .k-dropzone-inner { - padding-block: $kendo-dropzone-padding-y; - padding-inline: $kendo-dropzone-padding-x; - border-width: $kendo-dropzone-border-width; - border-style: solid; - box-sizing: border-box; - font-size: $kendo-dropzone-font-size; - font-family: $kendo-dropzone-font-family; - line-height: $kendo-dropzone-line-height; - flex: 1 1 auto; - display: flex; - flex-flow: column nowrap; - align-items: center; - justify-content: center; - position: relative; - - .k-dropzone-icon { - margin-bottom: $kendo-dropzone-icon-spacing; - } - - .k-dropzone-hint { - margin-bottom: $kendo-dropzone-hint-spacing; - font-size: $kendo-dropzone-hint-font-size; - } - - .k-dropzone-note { - margin-bottom: $kendo-dropzone-note-spacing; - font-size: $kendo-dropzone-note-font-size; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/dropzone/_layout.scss" as *; @mixin kendo-dropzone--layout() { diff --git a/packages/default/scss/dropzone/_theme.scss b/packages/default/scss/dropzone/_theme.scss index 4390f918ae9..544a02f224a 100644 --- a/packages/default/scss/dropzone/_theme.scss +++ b/packages/default/scss/dropzone/_theme.scss @@ -1,39 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-dropzone--theme-base() { - - // Dropzone - .k-dropzone-inner { - @include fill( - $kendo-dropzone-text, - $kendo-dropzone-bg, - $kendo-dropzone-border - ); - - .k-icon, - .k-dropzone-icon { - color: $kendo-dropzone-icon-text; - } - .k-dropzone-hint { - color: $kendo-dropzone-hint-text; - } - .k-dropzone-note { - color: $kendo-dropzone-note-text; - } - } - - - // Hover - .k-external-dropzone-hover { - - .k-icon, - .k-dropzone-icon { - color: $kendo-dropzone-icon-hover-text; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/dropzone/_theme.scss" as *; @mixin kendo-dropzone--theme() { diff --git a/packages/default/scss/dropzone/_variables.scss b/packages/default/scss/dropzone/_variables.scss index 56e22acf363..e9e876d0c65 100644 --- a/packages/default/scss/dropzone/_variables.scss +++ b/packages/default/scss/dropzone/_variables.scss @@ -65,3 +65,25 @@ $kendo-dropzone-note-spacing: null !default; /// The text color of the DropZone note. /// @group dropzone $kendo-dropzone-note-text: $kendo-subtle-text !default; + +@forward "@progress/kendo-theme-core/scss/components/dropzone/_variables.scss" with ( + $kendo-dropzone-padding-x: $kendo-dropzone-padding-x, + $kendo-dropzone-padding-y: $kendo-dropzone-padding-y, + $kendo-dropzone-border-width: $kendo-dropzone-border-width, + $kendo-dropzone-min-height: $kendo-dropzone-min-height, + $kendo-dropzone-font-family: $kendo-dropzone-font-family, + $kendo-dropzone-font-size: $kendo-dropzone-font-size, + $kendo-dropzone-line-height: $kendo-dropzone-line-height, + $kendo-dropzone-bg: $kendo-dropzone-bg, + $kendo-dropzone-text: $kendo-dropzone-text, + $kendo-dropzone-border: $kendo-dropzone-border, + $kendo-dropzone-icon-spacing: $kendo-dropzone-icon-spacing, + $kendo-dropzone-icon-text: $kendo-dropzone-icon-text, + $kendo-dropzone-icon-hover-text: $kendo-dropzone-icon-hover-text, + $kendo-dropzone-hint-font-size: $kendo-dropzone-hint-font-size, + $kendo-dropzone-hint-spacing: $kendo-dropzone-hint-spacing, + $kendo-dropzone-hint-text: $kendo-dropzone-hint-text, + $kendo-dropzone-note-font-size: $kendo-dropzone-note-font-size, + $kendo-dropzone-note-spacing: $kendo-dropzone-note-spacing, + $kendo-dropzone-note-text: $kendo-dropzone-note-text +); diff --git a/packages/default/scss/editor/_layout.scss b/packages/default/scss/editor/_layout.scss index b89078dd6eb..0b71b2f4dcf 100644 --- a/packages/default/scss/editor/_layout.scss +++ b/packages/default/scss/editor/_layout.scss @@ -1,651 +1,4 @@ -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../toolbar/_variables.scss" as *; -@use "../window/_variables.scss" as *; -@use "../input/_variables.scss" as *; - -@mixin kendo-editor--layout-base() { - - // Base - .k-editor { - border-width: $kendo-editor-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-editor-font-family; - font-size: $kendo-editor-font-size; - line-height: $kendo-editor-line-height; - display: flex; - flex-flow: column nowrap; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - &.k-readonly { - .k-editor-content { - pointer-events: auto; - } - - .k-editor-content.k-focus { - outline-width: 1px; - outline-style: dashed; - } - } - } - - // Inline editor - .k-editor-inline { - @include border-radius( k-border-radius(md) ); - padding-block: $kendo-editor-inline-padding-y; - padding-inline: $kendo-editor-inline-padding-x; - border: 1px solid transparent; - word-wrap: break-word; - overflow: auto; - background: none; - } - - // Resizable editor - .k-editor-resizable { - resize: both; - overflow: auto; - } - - // Resizable images - .k-editor-resize-handles-wrapper { - position: absolute; - visibility: hidden; - } - - // Resizable tables - .k-editor-resize-wrap-element { - display: inline-block; - position: relative; - } - - .k-editor-resize-handle { - width: $kendo-editor-resize-handle-size; - height: $kendo-editor-resize-handle-size; - border-width: $kendo-editor-resize-handle-border-width; - border-style: solid; - box-sizing: border-box; - position: absolute; - visibility: visible; - z-index: 100; - - &.northwest { - top: 0; - left: 0; - transform: translate(-50%, -50%); - cursor: nw-resize; - } - - &.north { - top: 0; - left: 50%; - transform: translate(-50%, -50%); - cursor: n-resize; - } - - &.northeast { - top: 0; - right: 0; - transform: translate(50%, -50%); - cursor: ne-resize; - } - - &.southwest { - left: 0; - bottom: 0; - transform: translate(-50%, 50%); - cursor: sw-resize; - } - - &.south { - bottom: 0; - left: 50%; - transform: translate(-50%, 50%); - cursor: s-resize; - } - - &.southeast { - right: 0; - bottom: 0; - transform: translate(50%, 50%); - cursor: se-resize; - } - - &.west { - top: 50%; - left: 0; - transform: translate(-50%, -50%); - cursor: w-resize; - } - - &.east { - top: 50%; - right: 0; - transform: translate(50%, -50%); - cursor: e-resize; - } - } - - // stylelint-disable selector-no-vendor-prefix, selector-class-pattern - .ProseMirror-selectednode { - outline-width: $kendo-editor-selectednode-outline-width; - outline-style: solid; - - } - .ProseMirror-hideselection { - caret-color: transparent; - - *::selection, - *::-moz-selection { - background: transparent; - } - } - // stylelint-enable selector-no-vendor-prefix, selector-class-pattern - - // Toolbar - .k-editor-toolbar { - border-width: 0 0 $kendo-toolbar-border-width; - flex-shrink: 0; - - .k-editor-export { - .k-icon { - margin-right: $kendo-editor-export-tool-icon-margin-x; - } - - .k-icon, - .k-export-tool-text { - vertical-align: middle; - } - } - } - - // Editor content - .k-editor-content { - flex: 1 1 auto; - overflow-y: auto; - - > .k-iframe { - width: 100%; - height: 100%; - border-width: 0; - display: block; - } - - > .ProseMirror { // stylelint-disable-line - padding: $kendo-editor-content-padding; - width: 100%; - height: 100%; - position: relative; - box-sizing: border-box; - outline: none; - white-space: pre-wrap; - overflow: auto; - - table { - white-space: pre-wrap; - } - - .k-placeholder::before { - content: attr(data-placeholder); - height: 0; - color: $kendo-editor-placeholder-text; - float: left; - opacity: $kendo-editor-placeholder-opacity; - cursor: text; - user-select: none; - } - - &[contenteditable="false"] { - cursor: unset !important; // stylelint-disable-line declaration-no-important - - .k-editor-resize-handles-wrapper, - .k-editor-resize-handle, - .row-resize-handle, - .column-resize-handle { - display: none; - } - - img, - table { - pointer-events: none; - } - - & .ProseMirror-selectednode { // stylelint-disable-line - outline: none; - } - } - } - - // Table styles - p { - margin: 0 0 1rem; - } - - td p, - th p, - li p { - margin: 0; - } - - table { - margin: 0; - border-collapse: collapse; - table-layout: fixed; - width: 100%; - overflow: hidden; - } - - td, - th { - min-width: 1em; - border: 1px solid; - padding-block: 3px; - padding-inline: 5px; - vertical-align: top; - box-sizing: border-box; - position: relative; - } - - th { - font-weight: bold; - text-align: start; - } - td { - text-align: start; - } - - // Give selected cells a blue overlay - .selectedCell::after { // stylelint-disable-line - z-index: 2; - position: absolute; - content: ""; - left: 0; - right: 0; - top: 0; - bottom: 0; - pointer-events: none; - } - } - - - .k-edit-form-content { - flex: 1 1 auto; - overflow: auto; - margin-block: (-$kendo-window-inner-padding-y); - margin-inline: (-$kendo-window-inner-padding-x); - padding-block: $kendo-window-inner-padding-y; - padding-inline: $kendo-window-inner-padding-x; - } - - - $ct-cell-size: 20px; - - // Insert table - .k-ct-popup { - box-sizing: border-box; - width: $ct-cell-size * 10 - math.div( $ct-cell-size, 2 ); - padding: math.div( $ct-cell-size, 4 ); - - .k-button { - width: 100%; - } - - .k-ct-cell { - margin: 1px; - width: $ct-cell-size; - height: $ct-cell-size; - box-sizing: border-box; - border: 1px solid; - border-color: inherit; - display: inline-block; - vertical-align: top; - overflow: hidden; - opacity: .7; - pointer-events: all; - } - } - - .k-editor .k-resize-handle { - position: absolute; - right: 0; - bottom: 0; - padding: 0; - width: 0; - height: 0; - border-style: solid; - border-width: 0 0 13px 13px; - border-color: transparent; - border-bottom-color: inherit; - cursor: se-resize; - - .k-i-arrow-45-down-right, - .k-i-caret-br { - display: none; - } - } - - - // Find and replace dialog - .k-editor-find-replace { - .k-content { - position: relative; - } - - .k-actions { - padding: 0; - } - - .k-search-options { - display: flex; - flex-direction: column; - padding: 10px 0 40px; - } - - .k-matches-container { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - } - } - - - - - // Text area in editor dialog - .k-textarea.k-editor-textarea { - width: 100%; - height: 100%; - resize: none; - } - - - - - // File browser - // TODO: replace with file manager component - .k-filebrowser { - max-width: 100%; - - // Breadcrumbs and search - .k-floatwrap { - display: flex; - - &::after { display: none; } - } - .k-breadcrumbs { - flex: 1; - } - .k-search-wrap { - margin: 0 0 0 k-spacing(4); - width: 150px; - display: flex; - align-items: center; - - .k-input { - flex: 1; - width: 100px; // fix width for Edge - } - .k-icon { - margin: 0; - position: static; - } - } - - // Filebrowser toolbar - .k-filebrowser-toolbar { - margin: k-spacing(4) 0 0; - } - - .k-upload { - padding: 0; - border-width: 0; - background: none; - - .k-upload-button { - margin: 0; - } - - .k-upload-status { - display: none; - } - } - - .k-upload-files { - display: none; - } - - // Tiles - .k-tiles { - display: flex; - flex-flow: row wrap; - height: 390px; - max-height: 50vh; - margin: 0 0 k-spacing(4); - padding-block: $kendo-editor-filebrowser-tiles-padding-y; - padding-inline: $kendo-editor-filebrowser-tiles-padding-x; - border-top-width: 0; - overflow: auto; - } - - .k-tile { - width: 33%; - height: 90px; - padding-block: $kendo-editor-filebrowser-tiles-padding-y; - padding-inline: $kendo-editor-filebrowser-tiles-padding-x; - box-sizing: border-box; - white-space: nowrap; - overflow: hidden; - cursor: pointer; - @include border-radius( k-border-radius(md) ); - - .k-i-file, - .k-i-folder { - font-size: 4em; - } - - input { - width: 100px; - } - - strong { - display: block; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .k-tile-empty { - display: block; - margin: auto; - - &.k-selected { - color: inherit; - border-width: 0; - background-image: none; - background-color: transparent; - } - - strong { - opacity: .5; - font-size: 3em; - font-weight: 400; - } - } - - .k-thumb { - float: left; - margin-right: $kendo-editor-filebrowser-tiles-padding-y; - } - - .k-breadcrumbs-wrap { - position: absolute; - left: $kendo-input-padding-x; - top: $kendo-input-padding-y; - - .k-icon { - position: static; - margin-top: 0; - } - } - } - - - - - // Table wizard dialog - .k-editor-table-wizard-window { - - // Tabstrip wrapper - .k-tabstrip-wrapper { - display: flex; - flex: 1 1 auto; - overflow: auto; - - .k-tabstrip.k-root-tabs { - flex: 1 1 auto; - margin-bottom: 0; - } - } - - .k-edit-field > .k-checkbox { - position: relative; // fix scrolling - } - } - - .k-editor-inline { - - .k-table { - width: 100%; - border-spacing: 0; - margin: 0 0 1em; - - &, - & td { - outline: 0; - border-width: 1px; - border-style: dotted; - } - - td { - min-width: 1px; - padding-block: $kendo-editor-inline-padding-y; - padding-inline: $kendo-editor-inline-padding-x; - } - } - - .k-element-resize-handle-wrapper { - position: absolute; - width: 5px; - height: 5px; - border-width: 1px; - border-style: solid; - z-index: 100; - - .k-element-resize-handle { - width: 100%; - height: 100%; - - &.k-resize-east { - cursor: e-resize; - } - - &.k-resize-north { - cursor: n-resize; - } - - &.k-resize-northeast { - cursor: ne-resize; - } - - &.k-resize-northwest { - cursor: nw-resize; - } - - &.k-resize-south { - cursor: s-resize; - } - - &.k-resize-southeast { - cursor: se-resize; - } - - &.k-resize-southwest { - cursor: sw-resize; - } - - &.k-resize-west { - cursor: w-resize; - } - } - } - - .k-column-resize-handle-wrapper { - position: absolute; - height: 10px; - width: 10px; - cursor: col-resize; - z-index: 2; - - .k-column-resize-handle { - width: 100%; - height: 100%; - - .k-column-resize-marker { - width: 2px; - height: 100%; - margin-block: 0; - margin-inline: auto; - display: none; - opacity: .8; - } - } - } - - .k-row-resize-handle-wrapper { - position: absolute; - z-index: 2; - cursor: row-resize; - width: 10px; - height: 10px; - - .k-row-resize-handle { - display: table; - width: 100%; - height: 100%; - } - - .k-row-resize-marker-wrapper { - display: table-cell; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - vertical-align: middle; - } - - .k-row-resize-marker { - display: none; - margin: 0; - padding: 0; - width: 100%; - height: 2px; - opacity: .8; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/editor/_layout.scss" as *; @mixin kendo-editor--layout() { diff --git a/packages/default/scss/editor/_theme.scss b/packages/default/scss/editor/_theme.scss index d5fbbab1e28..86e8caa32d6 100644 --- a/packages/default/scss/editor/_theme.scss +++ b/packages/default/scss/editor/_theme.scss @@ -1,106 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-editor--theme-base() { - - .k-editor { - @include fill( - $kendo-component-text, - $kendo-component-bg, - $kendo-component-border - ); - - &.k-readonly { - .k-editor-content.k-focus { - outline-color: $kendo-body-text; - } - } - } - - // Inline Editor - .k-editor-inline { - - .k-table { - &, - & td { - border-color: #cccccc; - } - } - - .k-element-resize-handle-wrapper { - background-color: #ffffff; - border-color: #000000; - } - - .k-column-resize-handle-wrapper { - .k-column-resize-handle { - .k-column-resize-marker { - background-color: #00b0ff; - } - } - } - - .k-row-resize-handle-wrapper { - .k-row-resize-marker { - background-color: #00b0ff; - } - } - - // Hover & Active state - &:hover, - &.k-hover, - &.k-active { - border-color: $kendo-component-border; - } - } - - // Resizable images - .k-editor-resize-handle { - background-color: $kendo-editor-resize-handle-bg; - border-color: $kendo-editor-resize-handle-border; - } - .ProseMirror-selectednode { // stylelint-disable-line - outline-color: $kendo-editor-selectednode-outline-color; - } - - - // Insert table - .k-ct-popup { - .k-selected { - @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none ); - } - } - - // Content - .k-editor-content { - - // Selection - .k-text-selected, - &::selection { - @include fill ( - $color: $kendo-editor-selected-text, - $bg: $kendo-editor-selected-bg - ); - } - - .k-text-highlighted { - @include fill ( - $bg: $kendo-editor-highlighted-bg - ); - } - - // Table styles - td, - th { - border-color: #dddddd; - } - - .selectedCell::after { // stylelint-disable-line - background-color: rgba(200, 200, 255, .4); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/editor/_theme.scss" as *; @mixin kendo-editor--theme() { diff --git a/packages/default/scss/editor/_variables.scss b/packages/default/scss/editor/_variables.scss index fe83ed85985..b22fc526a2b 100644 --- a/packages/default/scss/editor/_variables.scss +++ b/packages/default/scss/editor/_variables.scss @@ -77,3 +77,27 @@ $kendo-editor-filebrowser-tiles-padding-y: k-spacing(1) !default; /// The padding of the Editor content. /// @group editor $kendo-editor-content-padding: k-spacing(2) !default; + +@forward "@progress/kendo-theme-core/scss/components/editor/_variables.scss" with ( + $kendo-editor-border-width: $kendo-editor-border-width, + $kendo-editor-font-family: $kendo-editor-font-family, + $kendo-editor-font-size: $kendo-editor-font-size, + $kendo-editor-line-height: $kendo-editor-line-height, + $kendo-editor-placeholder-text: $kendo-editor-placeholder-text, + $kendo-editor-placeholder-opacity: $kendo-editor-placeholder-opacity, + $kendo-editor-selected-text: $kendo-editor-selected-text, + $kendo-editor-selected-bg: $kendo-editor-selected-bg, + $kendo-editor-highlighted-bg: $kendo-editor-highlighted-bg, + $kendo-editor-export-tool-icon-margin-x: $kendo-editor-export-tool-icon-margin-x, + $kendo-editor-resize-handle-size: $kendo-editor-resize-handle-size, + $kendo-editor-resize-handle-border-width: $kendo-editor-resize-handle-border-width, + $kendo-editor-resize-handle-border: $kendo-editor-resize-handle-border, + $kendo-editor-resize-handle-bg: $kendo-editor-resize-handle-bg, + $kendo-editor-selectednode-outline-width: $kendo-editor-selectednode-outline-width, + $kendo-editor-selectednode-outline-color: $kendo-editor-selectednode-outline-color, + $kendo-editor-inline-padding-x: $kendo-editor-inline-padding-x, + $kendo-editor-inline-padding-y: $kendo-editor-inline-padding-y, + $kendo-editor-filebrowser-tiles-padding-x: $kendo-editor-filebrowser-tiles-padding-x, + $kendo-editor-filebrowser-tiles-padding-y: $kendo-editor-filebrowser-tiles-padding-y, + $kendo-editor-content-padding: $kendo-editor-content-padding +); diff --git a/packages/default/scss/expansion-panel/_layout.scss b/packages/default/scss/expansion-panel/_layout.scss index 1554515d7b4..40f0bb78a77 100644 --- a/packages/default/scss/expansion-panel/_layout.scss +++ b/packages/default/scss/expansion-panel/_layout.scss @@ -1,85 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-expander--layout-base() { - - // Base - .k-expander { - border-width: $kendo-expander-border-width; - border-style: solid; - box-sizing: border-box; - overflow: hidden; - outline: 0; - font-family: $kendo-expander-font-family; - font-size: $kendo-expander-font-size; - line-height: $kendo-expander-line-height; - display: flex; - flex-direction: column; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - .k-rtl .k-expander, - .k-expander.k-rtl, - .k-expander[dir="rtl"] { - // Expand / collapse icon - .k-expander-indicator { - margin-left: 0; - margin-right: $kendo-expander-indicator-margin-x; - } - } - - // Header - .k-expander-header { - padding-block: $kendo-expander-header-padding-y; - padding-inline: $kendo-expander-header-padding-x; - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - } - - // Expander spacer - .k-expander-spacer { - flex: 1 1 auto; - } - - // Title - .k-expander-title { - text-transform: uppercase; - font-weight: 500; - } - - // Expand / collapse icon - .k-expander-indicator { - margin-left: $kendo-expander-indicator-margin-x; - display: flex; - justify-content: center; - align-items: center; - } - - // Expander content - .k-expander-content { - padding-block: $kendo-expander-content-padding-y; - padding-inline: $kendo-expander-content-padding-x; - } - - // Multiple expanders - .k-expander + .k-expander.k-expanded, - .k-expander.k-expanded + .k-expander { - margin-top: $kendo-expander-spacing-y; - } - - .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) { - border-top-width: 0; - } -} +@use "@progress/kendo-theme-core/scss/components/expansion-panel/_layout.scss" as *; @mixin kendo-expander--layout() { diff --git a/packages/default/scss/expansion-panel/_theme.scss b/packages/default/scss/expansion-panel/_theme.scss index 7fc507739e6..de4233ed962 100644 --- a/packages/default/scss/expansion-panel/_theme.scss +++ b/packages/default/scss/expansion-panel/_theme.scss @@ -1,47 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-expander--theme-base() { - - .k-expander { - @include fill( - $kendo-expander-text, - $kendo-expander-bg, - $kendo-expander-border - ); - - &.k-focus { - @include focus-indicator( $kendo-expander-focus-shadow, true ); - } - } - - .k-expander-header { - @include fill( - $kendo-expander-header-text, - $kendo-expander-header-bg, - $kendo-expander-header-border - ); - outline: none; - - &:hover, - &.k-hover { - background-color: $kendo-expander-header-hover-bg; - } - - &.k-focus { - @include focus-indicator( $kendo-expander-header-focus-shadow, true ); - background-color: $kendo-expander-header-focus-bg; - } - } - - .k-expander-title { - color: $kendo-expander-title-text; - } - - .k-expander-sub-title { - color: $kendo-expander-header-sub-title-text; - } -} +@use "@progress/kendo-theme-core/scss/components/expansion-panel/_theme.scss" as *; @mixin kendo-expander--theme() { diff --git a/packages/default/scss/expansion-panel/_variables.scss b/packages/default/scss/expansion-panel/_variables.scss index a4e182e5f4e..a20de4a7694 100644 --- a/packages/default/scss/expansion-panel/_variables.scss +++ b/packages/default/scss/expansion-panel/_variables.scss @@ -78,3 +78,28 @@ $kendo-expander-content-padding-x: k-spacing(4) !default; /// The vertical padding of the ExpansionPanel content. /// @group expander $kendo-expander-content-padding-y: k-spacing(4) !default; + +@forward "@progress/kendo-theme-core/scss/components/expansion-panel/_variables.scss" with ( + $kendo-expander-spacing-y: $kendo-expander-spacing-y, + $kendo-expander-border-width: $kendo-expander-border-width, + $kendo-expander-font-family: $kendo-expander-font-family, + $kendo-expander-font-size: $kendo-expander-font-size, + $kendo-expander-line-height: $kendo-expander-line-height, + $kendo-expander-text: $kendo-expander-text, + $kendo-expander-bg: $kendo-expander-bg, + $kendo-expander-border: $kendo-expander-border, + $kendo-expander-focus-shadow: $kendo-expander-focus-shadow, + $kendo-expander-header-padding-x: $kendo-expander-header-padding-x, + $kendo-expander-header-padding-y: $kendo-expander-header-padding-y, + $kendo-expander-header-text: $kendo-expander-header-text, + $kendo-expander-header-bg: $kendo-expander-header-bg, + $kendo-expander-header-border: $kendo-expander-header-border, + $kendo-expander-header-hover-bg: $kendo-expander-header-hover-bg, + $kendo-expander-header-focus-bg: $kendo-expander-header-focus-bg, + $kendo-expander-header-focus-shadow: $kendo-expander-header-focus-shadow, + $kendo-expander-title-text: $kendo-expander-title-text, + $kendo-expander-header-sub-title-text: $kendo-expander-header-sub-title-text, + $kendo-expander-indicator-margin-x: $kendo-expander-indicator-margin-x, + $kendo-expander-content-padding-x: $kendo-expander-content-padding-x, + $kendo-expander-content-padding-y: $kendo-expander-content-padding-y +); diff --git a/packages/default/scss/fab/_layout.scss b/packages/default/scss/fab/_layout.scss index b4c22c80642..ccc46bf815a 100644 --- a/packages/default/scss/fab/_layout.scss +++ b/packages/default/scss/fab/_layout.scss @@ -1,148 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-fab--layout-base() { - - // Floating Action Button (FAB) - .k-fab { - padding: 0; - border-width: 0; - border-style: solid; - border-color: transparent; - box-sizing: border-box; - color: inherit; - background-color: transparent; - font-size: $kendo-fab-font-size; - line-height: $kendo-fab-line-height; - font-family: $kendo-fab-font-family; - text-align: center; - white-space: nowrap; - display: inline-flex; - align-items: center; - justify-content: center; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - outline: none; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - &:focus { - outline: none; - } - } - - // FAB Icon - .k-fab-icon { - padding-inline: $kendo-fab-icon-padding-x; - padding-block: $kendo-fab-icon-padding-y; - box-sizing: content-box; - } - - .k-icon-wrapper-host:not(:only-child) .k-fab-icon, - .k-fab-icon:not(:only-child) { - margin-inline-end: $kendo-fab-icon-spacing; - margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 ); - } - - // Sizes - @each $size, $size-props in $kendo-fab-sizes { - $_padding-x: map.get( $size-props, padding-x ); - $_padding-y: map.get( $size-props, padding-y ); - - .k-fab-#{$size} { - padding: $_padding-y $_padding-x; - } - - } - - // Items - .k-fab-items { - margin: 0; - padding-block: $kendo-fab-items-padding-y; - padding-inline: $kendo-fab-items-padding-x; - display: flex; - } - - .k-fab-items-bottom { - flex-direction: column; - } - .k-fab-items-bottom .k-fab-item:last-child { - margin-block-end: 0; - } - - .k-fab-items-top { - flex-direction: column-reverse; - } - .k-fab-items-top .k-fab-item:first-child { - margin-block-end: 0; - } - - .k-fab-item { - list-style-type: none; - margin-block-end: k-spacing(2); - outline: none; - white-space: nowrap; - display: flex; - align-items: center; - justify-content: flex-end; - cursor: pointer; - - &.k-text-right { - flex-direction: row; - - .k-fab-item-text { - // Needed for fab item positioning in RTL - margin-right: k-spacing(2); - } - } - &.k-text-left { - flex-direction: row-reverse; - - .k-fab-item-text { - // Needed for fab item positioning in RTL - margin-left: k-spacing(2); - } - } - } - - .k-fab-item-text { - padding-block: $kendo-fab-item-text-padding-y; - padding-inline: $kendo-fab-item-text-padding-x; - border-width: $kendo-fab-item-text-border-width; - border-radius: $kendo-fab-item-text-border-radius; - font-size: $kendo-fab-item-text-font-size; - line-height: $kendo-fab-item-text-line-height; - } - - .k-fab-item-icon { - padding-block: $kendo-fab-item-icon-padding-y; - padding-inline: $kendo-fab-item-icon-padding-x; - border-width: $kendo-fab-item-icon-border-width; - border-radius: $kendo-fab-item-icon-border-radius; - box-sizing: content-box; - outline: none; - } - - - - .k-rtl .k-fab-popup, - [dir="rtl"] .k-fab-popup { - .k-fab-item.k-text-left { - flex-direction: row; - } - - .k-fab-item.k-text-right { - flex-direction: row-reverse; - } - } -} +@use "@progress/kendo-theme-core/scss/components/fab/_layout.scss" as *; @mixin kendo-fab--layout() { diff --git a/packages/default/scss/fab/_theme.scss b/packages/default/scss/fab/_theme.scss index 05beff51d20..339d5a33cb7 100644 --- a/packages/default/scss/fab/_theme.scss +++ b/packages/default/scss/fab/_theme.scss @@ -1,131 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-fab--theme-base() { - - // Normal state - @each $name, $color in $kendo-fab-theme-colors { - .k-fab-solid-#{$name} { - @include box-shadow($kendo-fab-shadow); - outline: $kendo-fab-border-width $kendo-fab-outline-style $color; - outline-offset: -$kendo-fab-border-width; - border-color: $color; - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - background-color: $color; - } - } - - // Hover state - @each $name, $color in $kendo-fab-theme-colors { - .k-hover.k-fab-solid-#{$name}, - .k-fab-solid-#{$name}:hover { - border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); - background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); - } - } - - // Focus state - @each $name, $color in $kendo-fab-theme-colors { - .k-fab-solid-#{$name}.k-focus, - .k-fab-solid-#{$name}:focus { - @if $kendo-enable-focus-contrast { - @include box-shadow( inset 0 0 0 2px currentColor ); - } @else { - outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 )); - } - } - } - - // Active state - @each $name, $color in $kendo-fab-theme-colors { - .k-active.k-fab-solid-#{$name}, - .k-selected.k-fab-solid-#{$name}, - .k-fab-solid-#{$name}:active { - @include box-shadow($kendo-fab-active-shadow); - border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); - background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); - } - } - - // Disabled state - @each $name, $color in $kendo-fab-theme-colors { - .k-disabled.k-fab-solid-#{$name}, - .k-fab-solid-#{$name}:disabled { - @include box-shadow($kendo-fab-disabled-shadow); - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 )); - color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 )); - opacity: 1; - } - } - - // Items - .k-fab-item-text { - @include fill( - $kendo-fab-item-text, - $kendo-fab-item-bg, - $kendo-fab-item-border - ); - @include box-shadow($kendo-fab-item-shadow); - - } - .k-fab-item-icon { - @include fill( - $kendo-fab-item-icon-text, - $kendo-fab-item-icon-bg, - $kendo-fab-item-icon-border - ); - @include box-shadow($kendo-fab-item-shadow); - outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color; - outline-offset: -$kendo-fab-border-width; - } - - // Hover state - .k-fab-item.k-hover .k-fab-item-icon, - .k-fab-item:hover .k-fab-item-icon { - border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 )); - background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 )); - } - - // Focus state - .k-fab-item:focus .k-fab-item-text, - .k-fab-item:focus .k-fab-item-icon, - .k-fab-item.k-focus .k-fab-item-text, - .k-fab-item.k-focus .k-fab-item-icon { - @if $kendo-enable-focus-contrast { - @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); - } @else { - outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color; - } - } - - // Active state - .k-fab-item.k-active .k-fab-item-icon, - .k-fab-item:active .k-fab-item-icon { - @include box-shadow($kendo-fab-item-active-shadow); - border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 )); - background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 )); - } - - // Disabled state - .k-fab-item.k-disabled, - .k-fab-item:disabled { - opacity: 1; - - .k-fab-item-text, - .k-fab-item-icon { - @include box-shadow($kendo-fab-item-disabled-shadow); - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 )); - color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 )); - } - } - - // Popup - .k-fab-popup { - @include box-shadow( none ); - } - -} +@use "@progress/kendo-theme-core/scss/components/fab/_theme.scss" as *; @mixin kendo-fab--theme() { diff --git a/packages/default/scss/fab/_variables.scss b/packages/default/scss/fab/_variables.scss index 5307e83c133..65747279194 100644 --- a/packages/default/scss/fab/_variables.scss +++ b/packages/default/scss/fab/_variables.scss @@ -170,3 +170,53 @@ $kendo-fab-item-outline-width: k-spacing(0.5) !default; /// The outline color of the FAB item. /// @group floating-action-button $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default; + +@forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with ( + $kendo-fab-border-width: $kendo-fab-border-width, + $kendo-fab-border-radius: $kendo-fab-border-radius, + $kendo-fab-font-family: $kendo-fab-font-family, + $kendo-fab-font-size: $kendo-fab-font-size, + $kendo-fab-line-height: $kendo-fab-line-height, + $kendo-fab-padding-x: $kendo-fab-padding-x, + $kendo-fab-sm-padding-x: $kendo-fab-sm-padding-x, + $kendo-fab-md-padding-x: $kendo-fab-md-padding-x, + $kendo-fab-lg-padding-x: $kendo-fab-lg-padding-x, + $kendo-fab-padding-y: $kendo-fab-padding-y, + $kendo-fab-sm-padding-y: $kendo-fab-sm-padding-y, + $kendo-fab-md-padding-y: $kendo-fab-md-padding-y, + $kendo-fab-lg-padding-y: $kendo-fab-lg-padding-y, + $kendo-fab-icon-padding-x: $kendo-fab-icon-padding-x, + $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-y, + $kendo-fab-icon-spacing: $kendo-fab-icon-spacing, + $kendo-fab-items-padding-x: $kendo-fab-items-padding-x, + $kendo-fab-items-padding-y: $kendo-fab-items-padding-y, + $kendo-fab-item-text-padding-x: $kendo-fab-item-text-padding-x, + $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-y, + $kendo-fab-item-text-border-width: $kendo-fab-item-text-border-width, + $kendo-fab-item-text-border-radius: $kendo-fab-item-text-border-radius, + $kendo-fab-item-text-font-size: $kendo-fab-item-text-font-size, + $kendo-fab-item-text-line-height: $kendo-fab-item-text-line-height, + $kendo-fab-item-icon-padding-x: $kendo-fab-item-icon-padding-x, + $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y, + $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width, + $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius, + $kendo-fab-theme-colors: $kendo-fab-theme-colors, + $kendo-fab-sizes: $kendo-fab-sizes, + $kendo-fab-shadow: $kendo-fab-shadow, + $kendo-fab-disabled-shadow: $kendo-fab-disabled-shadow, + $kendo-fab-active-shadow: $kendo-fab-active-shadow, + $kendo-fab-outline-style: $kendo-fab-outline-style, + $kendo-fab-outline-width: $kendo-fab-outline-width, + $kendo-fab-item-text: $kendo-fab-item-text, + $kendo-fab-item-bg: $kendo-fab-item-bg, + $kendo-fab-item-border: $kendo-fab-item-border, + $kendo-fab-item-icon-text: $kendo-fab-item-icon-text, + $kendo-fab-item-icon-bg: $kendo-fab-item-icon-bg, + $kendo-fab-item-icon-border: $kendo-fab-item-icon-border, + $kendo-fab-item-shadow: $kendo-fab-item-shadow, + $kendo-fab-item-disabled-shadow: $kendo-fab-item-disabled-shadow, + $kendo-fab-item-active-shadow: $kendo-fab-item-active-shadow, + $kendo-fab-item-outline-style: $kendo-fab-item-outline-style, + $kendo-fab-item-outline-width: $kendo-fab-item-outline-width, + $kendo-fab-item-outline-color: $kendo-fab-item-outline-color +); diff --git a/packages/default/scss/filemanager/_layout.scss b/packages/default/scss/filemanager/_layout.scss index 9ca429fa75e..e8bb3c7e43d 100644 --- a/packages/default/scss/filemanager/_layout.scss +++ b/packages/default/scss/filemanager/_layout.scss @@ -1,241 +1,4 @@ -@use "./variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-file-manager--layout-base() { - - // File Manager - .k-filemanager { - border-width: $kendo-file-manager-border-width; - border-style: solid; - box-sizing: border-box; - font-family: $kendo-file-manager-font-family; - font-size: $kendo-file-manager-font-size; - line-height: $kendo-file-manager-line-height; - display: flex; - flex-flow: column nowrap; - } - - - // Toolbar - .k-filemanager-header { - border-color: inherit; - } - .k-filemanager-toolbar { - border-width: 0; - border-bottom-width: $kendo-file-manager-toolbar-border-width; - border-color: inherit; - flex-shrink: 0; - z-index: 1; - } - - - // Content Wrapper - .k-filemanager-content-container { - border-color: inherit; - box-sizing: border-box; - flex: 1 1 0%; - display: flex; - flex-flow: row nowrap; - align-items: stretch; - overflow: hidden; - } - - .k-filemanager-splitter { - border-width: 0; - } - - - // Navigation - .k-filemanager-navigation { - padding-block: $kendo-file-manager-navigation-padding-y; - padding-inline: $kendo-file-manager-navigation-padding-x; - width: $kendo-file-manager-navigation-width; - border-width: 0; - border-right-width: $kendo-file-manager-navigation-border-width; - border-style: solid; - border-color: inherit; - box-sizing: border-box; - flex-shrink: 0; - overflow: auto; - } - .k-filemanager-treeview { - overflow: visible; - } - - - // Content - .k-filemanager-content { - border-color: inherit; - flex: 1 1 0%; - display: flex; - flex-flow: column nowrap; - align-items: stretch; - overflow: hidden; - } - - // Filemanager view - .k-filemanager-view { - overflow: auto; - } - - // Breadcrumb - .k-filemanager-breadcrumb { - border-width: 0; - border-bottom-width: $kendo-file-manager-breadcrumb-border-width; - padding-block: $kendo-file-manager-breadcrumb-padding-y; - padding-inline: $kendo-file-manager-breadcrumb-padding-x; - flex-shrink: 0; - } - - - // Filemanager listview - .k-filemanager-listview { - border-width: 0; - flex: 1 1 0%; - - // Listview item - .k-listview-item { - padding-block: $kendo-file-manager-listview-item-padding-y; - padding-inline: $kendo-file-manager-listview-item-padding-x; - width: $kendo-file-manager-listview-item-width; - height: $kendo-file-manager-listview-item-height; - text-align: center; - } - - // File preview - .k-file-preview { - display: flex; - flex-direction: row; - justify-content: center; - } - - // File name - .k-file-name { - margin-top: calc( #{$kendo-file-manager-spacer} / 2 ); - display: block; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - // Edit mode - .k-file-edit-input input { - width: 100%; - } - } - - - // Filemanager grid - .k-filemanager-grid { - border-width: 0; - flex: 1 1 0%; - - // File preview - .k-file-preview { - margin-right: $kendo-icon-spacing; - display: inline-flex; - flex-direction: row; - vertical-align: middle; - } - - // File icon - .k-file-icon {} - - // File name - .k-file-name { - display: inline-flex; - flex-direction: row; - vertical-align: middle; - } - } - - - // Filemanager preview - .k-filemanager-preview { - padding: calc( #{$kendo-file-manager-preview-padding-y} * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y; - width: $kendo-file-manager-preview-width; - min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) ); - border-width: 0; - border-left-width: $kendo-file-manager-preview-border-width; - border-style: solid; - border-color: inherit; - box-sizing: border-box; - text-align: center; - overflow-y: auto; - flex-shrink: 0; - - // File preview - .k-file-preview { - display: flex; - flex-direction: row; - justify-content: center; - } - - // File name - .k-file-name { - margin-top: $kendo-file-manager-preview-spacing; - display: block; - } - .k-no-file-selected {} - .k-single-file-selected { font-weight: bold; } - .k-multiple-files-selected { font-weight: bold; } - - // File Meta - .k-file-meta { - margin: $kendo-file-manager-preview-spacing 0 0; - box-sizing: border-box; - text-align: start; - display: flex; - flex-flow: row wrap; - grid-column-gap: $kendo-file-manager-preview-column-gap; - } - .k-file-meta-label { - display: inline-block; - } - .k-file-meta-value { - margin: 0; - } - .k-file-type { - text-transform: capitalize; - } - .k-line-break { - margin: $kendo-file-manager-preview-spacing 0 0; - width: 100%; - flex: 1 1 100%; - flex-flow: row nowrap; - } - } - - - // Resizing Handle - .k-filemanager .k-splitbar { - flex-shrink: 0; - display: inline-flex; - position: relative; - border-width: 0 1px; - border-style: solid; - border-color: inherit; - } - - - // Upload Dialog - .k-filemanager-upload-dialog .k-upload-files { - max-height: 200px; - overflow-y: auto; - } - - - // Drag Hint - // TODO: use drag-hint styles - .k-filemanager-drag-hint { - display: flex; - flex-direction: row; - align-items: center; - gap: $kendo-icon-spacing; - } - -} +@use "@progress/kendo-theme-core/scss/components/filemanager/_layout.scss" as *; @mixin kendo-file-manager--layout() { diff --git a/packages/default/scss/filemanager/_theme.scss b/packages/default/scss/filemanager/_theme.scss index 47a6e054a65..366a80d4e5d 100644 --- a/packages/default/scss/filemanager/_theme.scss +++ b/packages/default/scss/filemanager/_theme.scss @@ -1,115 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-file-manager--theme-base() { - - // Filemanager - .k-filemanager { - @include fill( - $kendo-file-manager-text, - $kendo-file-manager-bg, - $kendo-file-manager-border - ); - } - - - // Filemanager toolbar - .k-filemanager-toolbar { - @include fill( - $kendo-file-manager-toolbar-text, - $kendo-file-manager-toolbar-bg, - $kendo-file-manager-toolbar-border, - $kendo-file-manager-toolbar-gradient - ); - } - - - // Filemanager navigation - .k-filemanager-navigation { - @include fill( - $kendo-file-manager-navigation-text, - $kendo-file-manager-navigation-bg, - $kendo-file-manager-navigation-border - ); - } - - - // Filemanager breadcrumb - .k-filemanager-breadcrumb { - @include fill( - $kendo-file-manager-breadcrumb-text, - $kendo-file-manager-breadcrumb-bg, - $kendo-file-manager-breadcrumb-border - ); - } - - - // Filemanager listview - .k-filemanager-listview { - @include fill( - $kendo-file-manager-listview-text, - $kendo-file-manager-listview-bg, - $kendo-file-manager-listview-border - ); - - .k-listview-item { - @include fill( - $kendo-file-manager-listview-item-text, - $kendo-file-manager-listview-item-bg, - $kendo-file-manager-listview-item-border - ); - - .k-file-icon { - @include fill( - $kendo-file-manager-listview-item-icon-text, - $kendo-file-manager-listview-item-icon-bg, - $kendo-file-manager-listview-item-icon-border - ); - } - - &.k-selected .k-file-icon { - @include fill( - inherit, - transparent, - transparent - ); - } - } - - } - - - // Filemanager grid - .k-filemanager-grid { - - @include fill( - $kendo-file-manager-grid-text, - $kendo-file-manager-grid-bg, - $kendo-file-manager-grid-border - ); - - } - - - // Filemanager preview - .k-filemanager-preview { - @include fill( - $kendo-file-manager-preview-text, - $kendo-file-manager-preview-bg, - $kendo-file-manager-preview-border - ); - - .k-file-icon { - @include fill( - $kendo-file-manager-preview-icon-text, - $kendo-file-manager-preview-icon-bg, - $kendo-file-manager-preview-icon-border - ); - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/filemanager/_theme.scss" as *; @mixin kendo-file-manager--theme() { diff --git a/packages/default/scss/filemanager/_variables.scss b/packages/default/scss/filemanager/_variables.scss index 722ea43ab9b..02e54158be1 100644 --- a/packages/default/scss/filemanager/_variables.scss +++ b/packages/default/scss/filemanager/_variables.scss @@ -184,3 +184,63 @@ $kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( s /// The border color of the FileManager preview icon. /// @group file-manager $kendo-file-manager-preview-icon-border: null !default; + +@forward "@progress/kendo-theme-core/scss/components/filemanager/_variables.scss" with ( + $kendo-file-manager-spacer: $kendo-file-manager-spacer, + $kendo-file-manager-border-width: $kendo-file-manager-border-width, + $kendo-file-manager-font-family: $kendo-file-manager-font-family, + $kendo-file-manager-font-size: $kendo-file-manager-font-size, + $kendo-file-manager-line-height: $kendo-file-manager-line-height, + $kendo-file-manager-bg: $kendo-file-manager-bg, + $kendo-file-manager-text: $kendo-file-manager-text, + $kendo-file-manager-border: $kendo-file-manager-border, + $kendo-file-manager-toolbar-border-width: $kendo-file-manager-toolbar-border-width, + $kendo-file-manager-toolbar-bg: $kendo-file-manager-toolbar-bg, + $kendo-file-manager-toolbar-text: $kendo-file-manager-toolbar-text, + $kendo-file-manager-toolbar-border: $kendo-file-manager-toolbar-border, + $kendo-file-manager-toolbar-gradient: $kendo-file-manager-toolbar-gradient, + $kendo-file-manager-navigation-padding-x: $kendo-file-manager-navigation-padding-x, + $kendo-file-manager-navigation-padding-y: $kendo-file-manager-navigation-padding-y, + $kendo-file-manager-navigation-width: $kendo-file-manager-navigation-width, + $kendo-file-manager-navigation-border-width: $kendo-file-manager-navigation-border-width, + $kendo-file-manager-navigation-bg: $kendo-file-manager-navigation-bg, + $kendo-file-manager-navigation-text: $kendo-file-manager-navigation-text, + $kendo-file-manager-navigation-border: $kendo-file-manager-navigation-border, + $kendo-file-manager-breadcrumb-padding-x: $kendo-file-manager-breadcrumb-padding-x, + $kendo-file-manager-breadcrumb-padding-y: $kendo-file-manager-breadcrumb-padding-y, + $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-breadcrumb-border-width, + $kendo-file-manager-breadcrumb-bg: $kendo-file-manager-breadcrumb-bg, + $kendo-file-manager-breadcrumb-text: $kendo-file-manager-breadcrumb-text, + $kendo-file-manager-breadcrumb-border: $kendo-file-manager-breadcrumb-border, + $kendo-file-manager-listview-bg: $kendo-file-manager-listview-bg, + $kendo-file-manager-listview-text: $kendo-file-manager-listview-text, + $kendo-file-manager-listview-border: $kendo-file-manager-listview-border, + $kendo-file-manager-listview-item-padding-x: $kendo-file-manager-listview-item-padding-x, + $kendo-file-manager-listview-item-padding-y: $kendo-file-manager-listview-item-padding-y, + $kendo-file-manager-listview-item-width: $kendo-file-manager-listview-item-width, + $kendo-file-manager-listview-item-height: $kendo-file-manager-listview-item-height, + $kendo-file-manager-listview-item-bg: $kendo-file-manager-listview-item-bg, + $kendo-file-manager-listview-item-text: $kendo-file-manager-listview-item-text, + $kendo-file-manager-listview-item-border: $kendo-file-manager-listview-item-border, + $kendo-file-manager-listview-item-icon-bg: $kendo-file-manager-listview-item-icon-bg, + $kendo-file-manager-listview-item-icon-text: $kendo-file-manager-listview-item-icon-text, + $kendo-file-manager-listview-item-icon-border: $kendo-file-manager-listview-item-icon-border, + $kendo-file-manager-listview-item-icon-selected-bg: $kendo-file-manager-listview-item-icon-selected-bg, + $kendo-file-manager-listview-item-icon-selected-text: $kendo-file-manager-listview-item-icon-selected-text, + $kendo-file-manager-listview-item-icon-selected-border: $kendo-file-manager-listview-item-icon-selected-border, + $kendo-file-manager-grid-bg: $kendo-file-manager-grid-bg, + $kendo-file-manager-grid-text: $kendo-file-manager-grid-text, + $kendo-file-manager-grid-border: $kendo-file-manager-grid-border, + $kendo-file-manager-preview-padding-x: $kendo-file-manager-preview-padding-x, + $kendo-file-manager-preview-padding-y: $kendo-file-manager-preview-padding-y, + $kendo-file-manager-preview-width: $kendo-file-manager-preview-width, + $kendo-file-manager-preview-border-width: $kendo-file-manager-preview-border-width, + $kendo-file-manager-preview-spacing: $kendo-file-manager-preview-spacing, + $kendo-file-manager-preview-column-gap: $kendo-file-manager-preview-column-gap, + $kendo-file-manager-preview-bg: $kendo-file-manager-preview-bg, + $kendo-file-manager-preview-text: $kendo-file-manager-preview-text, + $kendo-file-manager-preview-border: $kendo-file-manager-preview-border, + $kendo-file-manager-preview-icon-bg: $kendo-file-manager-preview-icon-bg, + $kendo-file-manager-preview-icon-text: $kendo-file-manager-preview-icon-text, + $kendo-file-manager-preview-icon-border: $kendo-file-manager-preview-icon-border +); diff --git a/packages/default/scss/filter/_layout.scss b/packages/default/scss/filter/_layout.scss index 2389d2dc7be..799ac4b6a5a 100644 --- a/packages/default/scss/filter/_layout.scss +++ b/packages/default/scss/filter/_layout.scss @@ -1,96 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-filter--layout-base() { - - .k-filter { - box-sizing: border-box; - border-width: 0; - display: inline-block; - background-color: transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - ul { - padding: 0; - - li { - list-style-type: none; - } - } - - .k-filter-container, - .k-filter-preview { - margin-block-end: $kendo-filter-bottom-margin; - } - - .k-filter-lines, - .k-filter-item { - padding-inline-start: $kendo-filter-padding-x; - } - - .k-filter-toolbar { - display: inline-flex; - position: relative; - padding-block: $kendo-filter-padding-y; - padding-inline: 0; - - &::before { - content: ""; - position: absolute; - width: $kendo-filter-padding-x; - height: $kendo-filter-line-size; - inset-block-start: 50%; - inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 ); - } - - .k-toolbar { - border-style: solid; - } - } - .k-filter-operator .k-dropdown-list { - width: $kendo-filter-operator-dropdown-width; - } - - .k-filter-item { - position: relative; - - &::before { - content: ""; - position: absolute; - width: $kendo-filter-line-size; - height: 100%; - inset-block-start: calc( #{$kendo-filter-padding-y} * -1 ); - inset-inline-start: 0; - } - } - - // The second selector targets the Angular rendering - .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after, - .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after { - content: ""; - position: absolute; - width: $kendo-filter-line-size; - inset-block-start: calc( calc( #{$kendo-filter-padding-y} * -1 ) - #{$kendo-filter-line-size} ); - inset-block-end: 50%; - inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 ); - } - - // The forth and fifth selectors targets the Angular rendering - .k-filter-group-main::before, - .k-filter-group-main > .k-filter-toolbar::before, - .k-filter-group-main > .k-filter-toolbar::after, - .k-filter-group-main > * > .k-filter-toolbar::before, - .k-filter-group-main > * > .k-filter-toolbar::after, - .k-filter-lines .k-filter-item:last-child::before { - display: none; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/filter/_layout.scss" as *; @mixin kendo-filter--layout() { diff --git a/packages/default/scss/filter/_theme.scss b/packages/default/scss/filter/_theme.scss index cca50d05feb..2e886e5786f 100644 --- a/packages/default/scss/filter/_theme.scss +++ b/packages/default/scss/filter/_theme.scss @@ -1,35 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-filter--theme-base() { - - .k-filter { - color: $kendo-component-text; - - .k-filter-preview-field { - color: $kendo-filter-preview-field-text; - } - - .k-filter-preview-operator { - color: $kendo-filter-preview-operator-text; - } - - // The last selector targets the Angular rendering - .k-filter-item::before, - .k-filter-toolbar::before, - .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after, - .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after { - background-color: $kendo-component-border; - } - - // Focus - .k-toolbar:focus, - .k-toolbar.k-focus { - @include focus-indicator( $kendo-filter-toolbar-focus-shadow ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/filter/_theme.scss" as *; @mixin kendo-filter--theme() { diff --git a/packages/default/scss/filter/_variables.scss b/packages/default/scss/filter/_variables.scss index 1234df9f889..43fbff6bcd5 100644 --- a/packages/default/scss/filter/_variables.scss +++ b/packages/default/scss/filter/_variables.scss @@ -30,3 +30,14 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default; /// The box shadow of the focused Filter toolbar. /// @group filter $kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default; + +@forward "@progress/kendo-theme-core/scss/components/filter/_variables.scss" with ( + $kendo-filter-padding-x: $kendo-filter-padding-x, + $kendo-filter-padding-y: $kendo-filter-padding-y, + $kendo-filter-bottom-margin: $kendo-filter-bottom-margin, + $kendo-filter-line-size: $kendo-filter-line-size, + $kendo-filter-operator-dropdown-width: $kendo-filter-operator-dropdown-width, + $kendo-filter-preview-field-text: $kendo-filter-preview-field-text, + $kendo-filter-preview-operator-text: $kendo-filter-preview-operator-text, + $kendo-filter-toolbar-focus-shadow: $kendo-filter-toolbar-focus-shadow +); diff --git a/packages/default/scss/floating-label/_layout.scss b/packages/default/scss/floating-label/_layout.scss index 0eaaf1ad089..3d608c86853 100644 --- a/packages/default/scss/floating-label/_layout.scss +++ b/packages/default/scss/floating-label/_layout.scss @@ -1,93 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-floating-label--layout-base() { - - - // Floating label - .k-floating-label-container { - padding-top: $kendo-floating-label-height; - box-sizing: border-box; - display: inline-flex; - vertical-align: middle; - position: relative; - flex-direction: column; - justify-content: stretch; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - > .k-floating-label { - max-width: $kendo-floating-label-max-width; - font-size: $kendo-floating-label-font-size; - line-height: $kendo-floating-label-line-height; - white-space: nowrap; - text-overflow: ellipsis; - position: absolute; - top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y}); - left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x}); - overflow: hidden; - cursor: text; - transform-origin: left center; - transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition; - } - - - &.k-empty { - > .k-floating-label { - top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y}); - left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x}); - transform: scale( $kendo-floating-label-scale ); - pointer-events: none; - } - } - - > .k-floating-label, - &.k-focus > .k-floating-label { - top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y}); - left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); - transform: scale( $kendo-floating-label-focus-scale ); - } - &:focus-within > .k-floating-label { - top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y}); - left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); - transform: scale( $kendo-floating-label-focus-scale ); - } - - &.k-empty:not(.k-focus):not(:focus-within) ::placeholder { - color: transparent; - } - } - - [dir="rtl"] .k-floating-label-container, - .k-rtl .k-floating-label-container, - .k-floating-label-container[dir="rtl"] { - > .k-floating-label { - transform-origin: right center; - transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition; - } - - &.k-empty { - > .k-floating-label { - left: auto; - right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x}); - } - } - - > .k-floating-label, - &.k-focus > .k-floating-label { - left: auto; - right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); - } - &:focus-within > .k-floating-label { - left: auto; - right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x}); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/floating-label/_layout.scss" as *; @mixin kendo-floating-label--layout() { diff --git a/packages/default/scss/floating-label/_theme.scss b/packages/default/scss/floating-label/_theme.scss index 5fa98c43e3d..7af1053356c 100644 --- a/packages/default/scss/floating-label/_theme.scss +++ b/packages/default/scss/floating-label/_theme.scss @@ -1,33 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-floating-label--theme-base() { - - // Floating label - .k-floating-label-container { - - > .k-floating-label { - @include fill( - $color: $kendo-floating-label-text, - $bg: $kendo-floating-label-bg - ); - } - - &.k-focus > .k-floating-label { - @include fill( - $color: $kendo-floating-label-focus-text, - $bg: $kendo-floating-label-focus-bg - ); - } - - &.k-invalid > .k-floating-label, - &.ng-invalid.ng-touched > .k-floating-label, - &.ng-invalid.ng-dirty > .k-floating-label { - @include fill ( $color: $kendo-invalid-text ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/floating-label/_theme.scss" as *; @mixin kendo-floating-label--theme() { diff --git a/packages/default/scss/floating-label/_variables.scss b/packages/default/scss/floating-label/_variables.scss index 481f82348e0..41c9cfc3d2e 100644 --- a/packages/default/scss/floating-label/_variables.scss +++ b/packages/default/scss/floating-label/_variables.scss @@ -51,3 +51,21 @@ $kendo-floating-label-focus-bg: null !default; /// The text color of the focused Floating Label. /// @group floating-label $kendo-floating-label-focus-text: null !default; + +@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with ( + $kendo-floating-label-scale: $kendo-floating-label-scale, + $kendo-floating-label-font-size: $kendo-floating-label-font-size, + $kendo-floating-label-max-width: $kendo-floating-label-max-width, + $kendo-floating-label-line-height: $kendo-floating-label-line-height, + $kendo-floating-label-height: $kendo-floating-label-height, + $kendo-floating-label-offset-x: $kendo-floating-label-offset-x, + $kendo-floating-label-offset-y: $kendo-floating-label-offset-y, + $kendo-floating-label-focus-scale: $kendo-floating-label-focus-scale, + $kendo-floating-label-focus-offset-x: $kendo-floating-label-focus-offset-x, + $kendo-floating-label-focus-offset-y: $kendo-floating-label-focus-offset-y, + $kendo-floating-label-transition: $kendo-floating-label-transition, + $kendo-floating-label-bg: $kendo-floating-label-bg, + $kendo-floating-label-text: $kendo-floating-label-text, + $kendo-floating-label-focus-bg: $kendo-floating-label-focus-bg, + $kendo-floating-label-focus-text: $kendo-floating-label-focus-text +); diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss index 4388daed760..5997b291e9f 100644 --- a/packages/default/scss/forms/_layout.scss +++ b/packages/default/scss/forms/_layout.scss @@ -1,382 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; -@use "../input/_variables.scss" as *; - -@mixin kendo-form--layout-base() { - - // Common - .k-form, - .k-form-inline { - font-size: $kendo-form-font-size; - line-height: $kendo-form-line-height; - } - - - // Fieldset - .k-fieldset { - margin: $kendo-fieldset-margin; - border-width: 1px 0 0; - border-style: solid; - padding: 25px 0 0; - - > legend { - margin-left: 0; - padding: $kendo-fieldset-legend-padding; - text-transform: uppercase; - } - } - - - // Label - kendo-label > .k-label { - margin: 0; - } - - .k-label-optional { - margin-left: $kendo-label-optional-margin-x; - font-size: $kendo-label-optional-font-size; - font-style: $kendo-label-optional-font-style; - align-self: center; - } - - .k-label-empty { - &::before { - content: ""; - display: inline-block; - } - } - - - - // Vertical Form - .k-form { - border: 0; - - .k-form-field > .k-label, - .k-form-field > kendo-label, - .k-form-label { - margin-bottom: $kendo-form-label-margin-bottom; - display: flex; - flex-flow: row nowrap; - } - - .k-label + .k-radio { - margin-left: 0; - } - - .k-form-fieldset { - margin: $kendo-form-fieldset-margin; - padding: $kendo-form-fieldset-padding; - border: 0; - - > * { - &:not(.k-hidden):first-child, - &.k-hidden + :not(.k-hidden) { - margin-top: 0; - } - } - } - - .k-form-legend { - margin: $kendo-form-legend-margin; - padding: $kendo-form-legend-padding; - border-width: $kendo-form-legend-border-width; - border-style: $kendo-form-legend-border-style; - width: $kendo-form-legend-width; - font-size: $kendo-form-legend-font-size; - text-transform: $kendo-form-legend-text-transform; - } - - - // Form group - .k-form-group { - padding: 0; - } - - > * { - &:not(.k-hidden):first-child, - &.k-hidden + :not(.k-hidden) { - margin-top: 0; - } - } - - - // Form field - .k-form-field, - .k-form-field-wrap { - display: block; - } - - .k-form-field-disabled { - .k-label, - .k-form-label { - @include disabled( $kendo-disabled-styling... ); - } - } - - .k-alert-error { - font-size: var( --kendo-font-size-sm, inherit ); - margin-top: $kendo-form-alert-error-margin; - } - - .k-field-info { - display: inline-block; - font-size: var( --kendo-font-size-xs, inherit ); - line-height: 1; - margin-block: 0; - margin-inline: $kendo-form-field-info-margin; - } - - - .k-multiselect, - .k-floating-label-container, - .k-daterangepicker .k-dateinput, - .k-signature { - display: inline-flex; - width: 100%; - } - } - - // Form Buttons Container - .k-form-buttons { - @extend .k-actions !optional; - padding: 0; - overflow: visible; - } - - // Form Hint/Error Messages - .k-form-hint, - .k-form-error { - margin-top: $kendo-form-hint-margin-top; - display: flex; - font-size: $kendo-form-hint-font-size; - font-style: $kendo-form-hint-font-style; - } - - .k-text-start, - .k-buttons-start { - justify-content: flex-start; - } - - .k-text-end, - .k-buttons-end { - justify-content: flex-end; - } - - // Form Separator - .k-form-separator { - margin: $kendo-form-separator-margin; - border-width: 1px 0 0; - border-style: solid; - display: block; - flex: 0 0 auto; - } - - // Horizontal Form - .k-form-horizontal { - .k-form-field { - display: flex; - - > .k-label, - > kendo-label, - > .k-form-label { - margin-right: $kendo-horizontal-form-label-margin-x; - padding-top: $kendo-horizontal-form-label-padding-top; - width: $kendo-horizontal-form-label-width; - text-align: end; - flex-direction: column; - align-items: $kendo-horizontal-form-label-align; - justify-content: flex-start; - } - .k-label-optional { - margin: 0; - align-self: inherit; - } - } - - .k-form-field-wrap { - max-width: $kendo-horizontal-form-field-wrap-max-width; - flex: 1 1 auto; - } - } - - // RTL Adjustments - .k-form [dir="rtl"], - .k-rtl .k-form { - .k-label-optional { - margin-left: 0; - margin-right: $kendo-label-optional-margin-x; - } - } - - .k-form-horizontal [dir="rtl"], - .k-rtl .k-form-horizontal { - &.k-form-field, - .k-form-field { - > .k-label, - > kendo-label, - > .k-form-label { - margin-right: 0; - margin-left: $kendo-horizontal-form-label-margin-x; - } - } - } - - // Sizes - @each $size, $size-props in $kendo-form-sizes { - $_form-rows-spacing: map.get($size-props, form-rows-spacing); - - .k-form-#{$size} { - .k-form-field, - .k-form-buttons { - margin-top: $_form-rows-spacing; - } - } - } - - - // Scheduler - .k-form-inline { - padding: $kendo-form-spacer; - - fieldset { - border-width: 1px 0 0; - border-style: solid; - margin: calc( #{$kendo-form-spacer} * 2 ) 0; - padding: 0; - - &:first-child:first-of-type { - margin-top: 0; - } - - &:last-child:last-of-type { - margin-bottom: 0; - } - } - - legend { - font-size: var( --kendo-font-size-sm, inherit ); - text-align: start; - font-weight: 600; - line-height: 1; - margin-bottom: $kendo-fieldset-legend-margin; - text-transform: uppercase; - padding: $kendo-fieldset-legend-padding; - width: auto; - } - - .k-form-field { - display: flex; - align-items: flex-start; - text-align: start; - margin-bottom: $kendo-fieldset-legend-margin; - - > span:not(.k-widget) { - width: $kendo-inline-form-element-width; - text-align: end; - line-height: var( --kendo-line-height, normal ); - padding-block: $kendo-inline-form-field-padding-y; - padding-inline: $kendo-inline-form-field-padding-x; - align-self: center; - } - - > input { - align-self: center; - } - - > input:not(.k-checkbox):not(.k-radio) { - flex: 1 1 auto; - } - - .k-alert-error { - font-size: var( --kendo-font-size-sm, inherit ); - margin-top: $kendo-form-alert-error-margin; - } - - .k-field-info { - display: block; - font-size: var( --kendo-font-size-xs, inherit ); - line-height: 1; - margin: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - } - - - - - // Edit form - .k-edit-form-container { - width: 400px; - min-width: 400px; - border-color: inherit; - position: relative; - } - - - // Action buttons - .k-popup-edit-form > .k-actions, - .k-edit-form-container .k-actions { - // TODO: refactor - margin: k-spacing(4) calc(#{k-spacing(4)} * -1) calc(#{k-spacing(4)} * -1); - } - - - .k-edit-label { - margin: 0 0 k-spacing(4); - // TODO: do we need the input variable? - padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0; - width: 30%; - line-height: $kendo-form-line-height; - text-align: end; - float: left; - clear: both; - } - .k-edit-field { - margin: 0 0 k-spacing(4); - width: 65%; - float: right; - clear: right; - position: relative; - - &.k-no-editor { - // TODO: do we need the input variable? - padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0; - } - } - - .k-edit-field { - - > .k-widget { - width: 100%; - box-sizing: border-box; - } - - input[type="radio"]:not(.k-radio), - input[type="checkbox"]:not(.k-checkbox) { - margin-right: .4ex; - } - - .k-radio-label, - .k-checkbox-label { - margin-right: k-spacing(4); - } - - > .k-reset > li + li { - margin-top: k-spacing(2); - } - - .k-reset .k-widget { - margin: 0 .4ex 0 1ex; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/forms/_layout.scss" as *; @mixin kendo-form--layout() { diff --git a/packages/default/scss/forms/_theme.scss b/packages/default/scss/forms/_theme.scss index c516a17519e..6df8661fa5b 100644 --- a/packages/default/scss/forms/_theme.scss +++ b/packages/default/scss/forms/_theme.scss @@ -1,42 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-form--theme-base() { - - .k-form, - .k-form-inline { - @include fill( $color: $kendo-body-text ); - - fieldset { - legend { - @include fill( $color: $kendo-fieldset-legend-text ); - } - } - - .k-form-legend { - @include fill( $border: $kendo-form-legend-border-color ); - } - - .k-field-info { - @include fill( $color: $kendo-subtle-text ); - } - - .k-alert-error { - @include fill( $color: $kendo-color-error ); - } - } - - .k-form-error, - .k-text-error, - .k-form-field-error .k-label { - @include fill( $color: $kendo-color-error ); - } - - .k-form-separator { - @include fill( $border: $kendo-form-separator-border-color ); - } - -} +@use "@progress/kendo-theme-core/scss/components/forms/_theme.scss" as *; @mixin kendo-form--theme() { diff --git a/packages/default/scss/forms/_variables.scss b/packages/default/scss/forms/_variables.scss index 081339c77b7..8f4ea8000c0 100644 --- a/packages/default/scss/forms/_variables.scss +++ b/packages/default/scss/forms/_variables.scss @@ -194,3 +194,57 @@ $kendo-form-sizes: ( ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/forms/_variables.scss" with ( + $kendo-form-spacer: $kendo-form-spacer, + $kendo-form-font-size: $kendo-form-font-size, + $kendo-form-line-height: $kendo-form-line-height, + $kendo-form-line-height-em: $kendo-form-line-height-em, + $kendo-form-sm-line-height: $kendo-form-sm-line-height, + $kendo-form-lg-line-height: $kendo-form-lg-line-height, + $kendo-form-fieldset-margin: $kendo-form-fieldset-margin, + $kendo-form-fieldset-padding: $kendo-form-fieldset-padding, + $kendo-form-legend-margin: $kendo-form-legend-margin, + $kendo-form-legend-padding: $kendo-form-legend-padding, + $kendo-form-legend-border-width: $kendo-form-legend-border-width, + $kendo-form-legend-border-style: $kendo-form-legend-border-style, + $kendo-form-legend-border-color: $kendo-form-legend-border-color, + $kendo-form-legend-width: $kendo-form-legend-width, + $kendo-form-legend-font-size: $kendo-form-legend-font-size, + $kendo-form-legend-text-transform: $kendo-form-legend-text-transform, + $kendo-form-label-margin-bottom: $kendo-form-label-margin-bottom, + $kendo-form-button-margin-x: $kendo-form-button-margin-x, + $kendo-form-hint-font-size: $kendo-form-hint-font-size, + $kendo-form-hint-font-style: $kendo-form-hint-font-style, + $kendo-form-hint-margin-top: $kendo-form-hint-margin-top, + $kendo-form-sm-rows-spacing: $kendo-form-sm-rows-spacing, + $kendo-form-md-rows-spacing: $kendo-form-md-rows-spacing, + $kendo-form-lg-rows-spacing: $kendo-form-lg-rows-spacing, + $kendo-form-separator-margin: $kendo-form-separator-margin, + $kendo-form-separator-border-color: $kendo-form-separator-border-color, + $kendo-horizontal-form-label-padding-top: $kendo-horizontal-form-label-padding-top, + $kendo-horizontal-form-label-margin-x: $kendo-horizontal-form-label-margin-x, + $kendo-horizontal-form-label-width: $kendo-horizontal-form-label-width, + $kendo-horizontal-form-label-align: $kendo-horizontal-form-label-align, + $kendo-horizontal-form-field-wrap-max-width: $kendo-horizontal-form-field-wrap-max-width, + $kendo-inline-form-element-width: $kendo-inline-form-element-width, + $kendo-inline-form-field-padding-x: $kendo-inline-form-field-padding-x, + $kendo-inline-form-field-padding-y: $kendo-inline-form-field-padding-y, + $kendo-forms-invalid-color: $kendo-forms-invalid-color, + $kendo-label-optional-margin-x: $kendo-label-optional-margin-x, + $kendo-label-optional-font-size: $kendo-label-optional-font-size, + $kendo-label-optional-font-style: $kendo-label-optional-font-style, + $kendo-fieldset-margin: $kendo-fieldset-margin, + $kendo-fieldset-font-size: $kendo-fieldset-font-size, + $kendo-fieldset-bg: $kendo-fieldset-bg, + $kendo-fieldset-text: $kendo-fieldset-text, + $kendo-fieldset-border: $kendo-fieldset-border, + $kendo-fieldset-legend-padding: $kendo-fieldset-legend-padding, + $kendo-fieldset-legend-margin: $kendo-fieldset-legend-margin, + $kendo-form-alert-error-margin: $kendo-form-alert-error-margin, + $kendo-form-field-info-margin: $kendo-form-field-info-margin, + $kendo-fieldset-legend-bg: $kendo-fieldset-legend-bg, + $kendo-fieldset-legend-text: $kendo-fieldset-legend-text, + $kendo-fieldset-legend-border: $kendo-fieldset-legend-border, + $kendo-form-sizes: $kendo-form-sizes +); diff --git a/packages/default/scss/gantt/_layout.scss b/packages/default/scss/gantt/_layout.scss index 207e002114d..ead805a2a93 100644 --- a/packages/default/scss/gantt/_layout.scss +++ b/packages/default/scss/gantt/_layout.scss @@ -1,924 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../table/_variables.scss" as *; -@use "../grid/_variables.scss" as *; -@use "../toolbar/_variables.scss" as *; -@use "../button/_variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-gantt--layout-base() { - - $row-height: #{$kendo-line-height-em} + calc( 2 * #{$kendo-table-md-cell-padding-y} ) + #{$kendo-grid-cell-horizontal-border-width}; - - .k-gantt { - border-width: $kendo-gantt-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-gantt-font-family; - font-size: $kendo-gantt-font-size; - line-height: $kendo-gantt-line-height; - display: flex; - flex-flow: column nowrap; - position: relative; - white-space: nowrap; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - .k-table-td { - white-space: nowrap; - } - - // other - td { - overflow: hidden; - white-space: nowrap; - vertical-align: top; - } - .k-grid-header tr { - height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px ); - } - .k-grid-header .k-header { - position: static; - } - .k-treelist .k-grid-header .k-header { - position: relative; - } - .k-grid-content tr { - height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} ); - } - - &.k-gantt-planned .k-grid-content tr { - height: calc( #{$kendo-line-height-em} * 1.7 + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} ); - } - - // Layout - .k-gantt-layout { - white-space: normal; - vertical-align: top; - display: inline-block; - } - - - // Splitbar - .k-splitbar { - position: relative; - display: inline-flex; - } - - // Splitter - .k-gantt-splitter { - border-width: 0; - } - - // React gantt - .k-treelist-scrollable { - width: 100%; - border-width: 0; - overflow: auto; - - .k-grid-header .k-header { - position: sticky; - } - .k-grid-header th, - .k-grid-content-sticky { - z-index: 4; - } - .k-grid-header th.k-grid-header-sticky { - z-index: 5; - } - .k-grid-header tr:first-child th:last-child, - tbody td:last-child { - padding: 0; - vertical-align: top; - } - .k-grid-header th:last-child { - .k-header { - padding-block: $kendo-grid-header-padding-y; - padding-inline: $kendo-grid-header-padding-x; - border-width: 0 0 1px $kendo-grid-cell-vertical-border-width; - white-space: nowrap; - } - } - - tr.k-selected > td:last-child { - background: transparent; - } - - // Task - .k-task { - display: inline-flex; - flex-flow: row nowrap; - white-space: nowrap; - z-index: 3; - - &:hover .k-task-start, - &:hover .k-task-end { - display: block; - } - - &:hover .k-task-draghandle { - visibility: visible; - } - } - .k-task-content { - padding-block: $kendo-gantt-task-padding-y; - padding-inline: $kendo-gantt-task-padding-x; - display: block; - line-height: normal; - flex: 1 1 auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .k-task-actions { - flex-shrink: 0; - } - - // Milestone - .k-task-milestone { - border: 0; - transform: none; - background: none; - - .k-task-milestone-content { - width: 100%; - height: 100%; - border-width: 1px; - border-style: solid; - box-sizing: border-box; - transform: rotate(45deg); - } - } - - // Summary - .k-task-summary { - height: 15px; - clip-path: polygon(-20px 0, calc(100% + 20px) 0, calc(100% + 20px) 100%, 100% 100%, calc(100% - 8px) calc(100% - 5px), 8px calc(100% - 5px), 0 100%, -20px 100%); - } - .k-task-summary-complete { - width: 100%; - height: 15px; - } - - // Dots - .k-task-start { - transform: translateX(-140%) translateY(-50%); - } - .k-task-end { - transform: translateX(140%) translateY(-50%); - } - .k-master-row:hover .k-task-dot { - display: block; - } - - // Table with columns borders - .k-gantt-columns { - background: transparent; - pointer-events: none; - table-layout: fixed; - } - } - - // Dependency lines SVG - .k-gantt-dependencies-svg { - position: absolute; - top: 0; - left: 0; - overflow: visible; - pointer-events: none; - z-index: 2; - - polyline { - stroke-width: $kendo-gantt-line-size; - } - } - } - - // Header and footer - .k-gantt-header { - border-width: 0 0 $kendo-toolbar-border-width; - flex-shrink: 0; - z-index: 6; - } - .k-gantt-footer { - border-width: $kendo-toolbar-border-width 0 0; - flex-shrink: 0; - } - - - // Toolbar - .k-gantt-toolbar {} - - .k-gantt-toggle { - display: none; - } - .k-gantt-add {} - .k-gantt-create {} - .k-gantt-views {} - - - // Gantt views - .k-gantt-views-wrapper { - margin-left: auto; - - .k-views-dropdown { - width: auto; - font-size: inherit; - display: none; - cursor: pointer; - } - } - - - // Responsive gantt toolbar - @media (max-width: 480px) { // stylelint-disable-line - - .k-gantt-toolbar { - .k-gantt-toggle { - display: inline-flex; - } - .k-gantt-pdf, - .k-gantt-create { - padding: $kendo-button-padding-y; - width: $kendo-button-calc-size; - height: $kendo-button-calc-size; - - .k-button-icon {} - .k-button-text { - display: none; - } - } - } - - } - - @media (max-width: 1024px) { // stylelint-disable-line - .k-gantt-views-wrapper .k-gantt-views { display: none; } - .k-gantt-views-wrapper .k-views-dropdown { display: flex; } - } - - - // Gantt content - .k-gantt-content { - display: flex; - flex-flow: row nowrap; - align-items: stretch; - flex: 1 1 auto; - overflow: hidden; - } - - - // Treelist - .k-gantt-treelist { - - .k-treelist { - height: 100%; - border-width: 0; - } - .k-grid-header, - .k-grid-footer { - padding: 0 !important; // stylelint-disable-line declaration-no-important - } - .k-grid-header tr { - height: calc( #{$kendo-line-height-em} * 2 + calc( #{$kendo-grid-header-padding-y} * 4 ) + 2px ); - vertical-align: bottom; - } - .k-grid-content { - overflow: hidden; - overflow-x: scroll; - } - .k-grid-content td { - vertical-align: middle; - } - .k-gantt-treelist-nested-columns .k-grid-header tr { - height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px ); - } - - &.k-gantt-treelist-scrollable { - .k-grid-content { - overflow: scroll; - } - } - } - - - // Timeline - .k-gantt-timeline-pane { - - .k-gantt-timeline { - height: 100%; - border-width: 0; - display: flex; - - *, - *::before, - *::after, - &::before, - &::after { - box-sizing: border-box; - } - } - .k-grid-header {} - .k-grid-content { - overflow-x: scroll; - } - .k-header { - padding-block: $kendo-grid-header-padding-y; - padding-inline: $kendo-grid-header-padding-x; - border-width: 0 0 1px $kendo-grid-cell-vertical-border-width; - white-space: nowrap; - } - - } - - - // Tables - .k-gantt-tables { - position: relative; - border-color: inherit; - } - .k-gantt-rows, - .k-gantt-columns { - border-color: inherit; - position: absolute; - z-index: 0; - top: 0; - left: 0; - } - .k-gantt-rows {} - - - // Deps - .k-gantt-dependencies { - opacity: .7; - position: absolute; - top: 0; - left: 0; - - // Arrows - .k-arrow-e, - .k-arrow-w { - width: 0; - height: 0; - border: 5px solid transparent; - position: absolute; - top: -4px; - } - .k-arrow-e { - border-left-color: currentColor; - right: -6px; - } - .k-arrow-w { - border-right-color: currentColor; - left: -6px; - } - } - - // Dependency Lines - .k-gantt-line { - background-color: currentColor; - border-color: currentColor; - position: absolute; - } - .k-gantt-line.k-selected { - z-index: 3; - } - - .k-gantt-line-h { - height: $kendo-gantt-line-size; - } - - .k-gantt-line-v { - width: $kendo-gantt-line-size; - } - - .k-gantt-dependency-hint { - z-index: 4; - } - - - // Tasks - .k-gantt-tasks { - position: relative; - - td, - .k-table-td { - padding: 0; - border-width: 0; - position: relative; - vertical-align: middle; - } - td::after { content: "\200b"; } - } - - .k-task-wrap { - margin-block: 0; - margin-inline: -21px; - padding-block: 5px; - padding-inline: 21px; - display: inline-flex; - flex-direction: row; - align-items: center; - position: relative; - z-index: 2; - } - .k-task-wrap.k-drag-hint { - position: absolute; - } - .k-task { - position: relative; - flex: 1 1 auto; - } - .k-task-dot { - width: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) ); - height: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) ); - line-height: 1; - cursor: pointer; - display: none; - position: absolute; - top: 50%; - transform: translateY(-50%); - } - .k-task-wrap:hover .k-task-dot, - .k-task-wrap.k-origin .k-task-dot { - display: block; - } - .k-task-dot::before { - content: ""; - width: $kendo-gantt-dot-size; - height: $kendo-gantt-dot-size; - border-width: 0; - border-style: solid; - border-radius: 100%; - display: inline-block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - .k-task-dot:hover::before, - .k-task-dot.k-hover::before { - border-width: 1px; - } - .k-task-start { left: 0; } - .k-task-end { right: 0; } - .k-task-draghandle { - margin-left: 16px; - width: 0; - height: 0; - border: 5px solid transparent; - border-top-width: 0; - border-bottom-color: inherit; - position: absolute; - bottom: 0; - // display: none; - cursor: ew-resize; - visibility: hidden; - } - .k-task-wrap:hover .k-task-draghandle { - visibility: visible; - } - - - // Milestone - .k-milestone-wrap { - margin-block: 0; - margin-inline: -2em; - } - .k-task-milestone { - width: 1em; - height: 1em; - border-width: 1px; - border-style: solid; - box-sizing: border-box; - transform: rotate(45deg); - } - - - // Summary - .k-summary-wrap {} - .k-task-summary { - height: 10px; - display: inline-block; - vertical-align: top; - } - .k-task-summary, - .k-task-summary-complete { - background-color: currentColor; - - &::before, - &::after { - content: ""; - width: 0; - height: 0; - border: 8px solid transparent; - position: absolute; - top: 0; - display: none; - } - - &::before { - border-left-color: currentColor; - left: 0; - } - &::after { - border-right-color: currentColor; - right: 0; - } - } - .k-task-summary-complete { - height: 10px; - position: relative; - z-index: 2; - } - .k-task-summary-progress { - height: 15px; - overflow: hidden; - } - - - // Single task - .k-single-wrap {} - .k-task-single { - @include border-radius( k-border-radius(md) ); - border-width: $kendo-gantt-task-border-width; - border-style: solid; - box-sizing: border-box; - cursor: default; - - .k-resize-handle { - opacity: .5; - z-index: 2; - visibility: hidden; - cursor: ew-resize; - } - - .k-resize-handle::before { - position: absolute; - top: 2px; - bottom: 2px; - } - - .k-resize-w { - left: 0; - } - - .k-resize-w::before { - left: 2px; - border-left-width: 1px; - } - - .k-resize-e { - right: 0; - } - - .k-resize-e::before { - right: 2px; - border-left-width: 1px; - } - - &:hover .k-resize-handle, - &:hover .k-task-actions { - visibility: visible; - } - } - .k-task-complete { - @include border-radius( k-border-radius(md) ); - width: 20%; - position: absolute; - z-index: 1; - top: 0; - bottom: 0; - left: 0; - } - .k-task-content { - position: relative; - z-index: 2; - display: flex; - flex-direction: row; - align-items: center; - white-space: nowrap; - } - .k-task-template { - padding-block: $kendo-gantt-task-padding-y; - padding-inline: $kendo-gantt-task-padding-x; - line-height: normal; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - } - .k-task-actions { - padding: $kendo-gantt-task-actions-padding; - white-space: nowrap; - display: flex; - flex-direction: row; - align-items: center; - visibility: hidden; - z-index: 1; - } - .k-task-actions > .k-link { - display: inline-flex; - } - - .k-resources-wrap { - position: absolute; - display: inline-block; - z-index: 2; - margin-left: 20px; - margin-top: -2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - .k-resource { - margin-block: 0; - margin-inline: 5px; - } - } - - - // Task tooltip - .k-task-details { - padding-block: $kendo-gantt-task-tooltip-padding-y; - padding-inline: $kendo-gantt-task-tooltip-padding-x; - white-space: nowrap; - - strong { - font-size: var( --kendo-font-size-lg, inherit ); - font-weight: normal; - display: block; - } - .k-task-pct { - font-size: $kendo-icon-size-xxl; - } - ul { - line-height: normal; - } - } - - // Planned position - .k-gantt-planned { - .k-gantt-dependencies, - .k-task-dot, - .k-resources-wrap { - margin-top: $kendo-gantt-planned-dependency-margin-y; - } - - .k-task-wrap { - flex-direction: column; - align-items: flex-start; - } - - .k-task-inner-wrap { - display: inline-flex; - } - - .k-task-wrap.k-drag-hint { - top: $kendo-gantt-planned-single-drag-hint-top; - } - - .k-summary-wrap.k-drag-hint { - top: $kendo-gantt-planned-summary-drag-hint-top; - } - - .k-milestone-wrap.k-drag-hint { - top: $kendo-gantt-planned-milestone-drag-hint-top; - } - } - - // Planned element - .k-task-planned { - margin: 0 0 $kendo-gantt-planned-margin-y; - line-height: $kendo-gantt-planned-line-height; - display: flex; - align-items: center; - - .k-task-moment { - border-width: $kendo-gantt-planned-border-width; - border-radius: $kendo-gantt-planned-moment-border-radius; - border-style: solid; - height: $kendo-gantt-planned-moment-height; - width: $kendo-gantt-planned-moment-width; - } - - .k-task-duration { - height: $kendo-gantt-planned-duration-height; - } - - .k-task-moment.k-moment-left { - margin-left: $kendo-gantt-planned-moment-left-margin-x; - } - - &:hover .k-task-duration { - height: $kendo-gantt-planned-duration-hover-height; - } - } - - .k-milestone-wrap .k-task-moment { - margin-left: $kendo-gantt-planned-milestone-moment-margin-x; - } - - // Planned Tooltip - .k-planned-tooltip { - .k-task-content { - display: block; - } - } - - // Delay offset - .k-task-offset-wrap .k-task-content .k-resize-e { - display: none; - } - - .k-task-offset { - flex-direction: row-reverse; - display: flex; - - .k-resize-handle { - right: 0; - z-index: 2; - visibility: hidden; - margin-right: $kendo-gantt-planned-offset-resize-handler-margin-x; - } - - .k-resize-handle::before { - border-left-width: 1px; - position: absolute; - top: $kendo-gantt-offset-resize-handler-top; - bottom: .5em; - margin-right: 2px; - } - } - - .k-task-single:hover + .k-task-offset .k-task-actions, - .k-task-offset:hover .k-task-actions, - .k-task-single:hover + .k-task-offset .k-resize-handle, - .k-task-offset:hover .k-resize-handle { - visibility: visible; - } - - - // Dependency Validation Tooltip - .k-gantt-tooltip-validation { - max-width: $kendo-gantt-validation-tooltip-width; - display: block; - - &::before { - content: ""; - width: 4px; - height: 100%; - position: absolute; - top: 0; - left: 0; - } - } - .k-gantt-tooltip-validation-row { - display: flex; - flex-direction: row; - justify-content: space-between; - } - .k-gantt-tooltip-validation-label { - display: inline-flex; - min-width: $kendo-gantt-validation-tooltip-label-width; - } - .k-gantt-tooltip-validation-value { - // TODO: extract to variable - font-weight: var( --kendo-font-weight-bold, normal ); - } - .k-gantt-tooltip-validation-label, - .k-gantt-tooltip-validation-value { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - - - - // Gantt export - .k-pdf-export-shadow { - .k-gantt { - float: left; - } - - .k-gantt, - .k-gantt-timeline-pane, - .k-gantt-dependencies { - width: auto !important; // stylelint-disable-line declaration-no-important - height: auto !important; // stylelint-disable-line declaration-no-important - overflow: visible !important; // stylelint-disable-line declaration-no-important - } - - .k-gantt-treelist .k-treelist { - display: block; - } - - .k-gantt-layout.k-splitbar { - display: none; - } - } - - - - // Gantt edit form - .k-gantt-edit-form {} - - .k-gantt-edit-form .k-gantt-update {} - .k-gantt-edit-form .k-gantt-cancel {} - .k-gantt-edit-form .k-gantt-delete { - float: left; - } - - - - - // Gantt RTL - .k-rtl, - [dir="rtl"] { - - .k-gantt-rows, - .k-gantt-columns { - left: auto; - right: 0; - } - - .k-task-wrap:not(.k-milestone-wrap) { - margin-block: 0; - margin-inline: -26px; - } - - .k-gantt-timeline-pane { - .k-header { - border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0; - } - .k-header:first-child { - border-right-width: 0; - } - - .k-task-start { - left: auto; - right: 0; - } - - .k-task-end { - right: auto; - left: 0; - } - } - - .k-task-content { - text-align: end; - } - - .k-task-complete { - left: auto; - right: 0; - } - - .k-task-draghandle { - margin-left: 0; - margin-right: 16px; - } - - .k-gantt-dependencies { - left: auto; - right: 0; - } - - .k-gantt-delete { - float: right; - } - - .k-task-offset-wrap .k-task-content { - .k-resize-e { - display: block; - } - - .k-resize-w { - display: none; - } - } - - .k-milestone-wrap { - margin-left: $kendo-gantt-rtl-milestone-wrap-margin-x; - } - - .k-milestone-wrap .k-task-moment { - margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x; - } - - .k-gantt-timeline-pane .k-milestone-wrap .k-task-start { - right: $kendo-gantt-rtl-milestone-dot-start-margin-x; - } - - .k-gantt-tooltip-validation::before { - left: auto; - right: 0; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/gantt/_layout.scss" as *; @mixin kendo-gantt--layout() { diff --git a/packages/default/scss/gantt/_theme.scss b/packages/default/scss/gantt/_theme.scss index ad51eda4b59..7d203140184 100644 --- a/packages/default/scss/gantt/_theme.scss +++ b/packages/default/scss/gantt/_theme.scss @@ -1,282 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-gantt--theme-base() { - - // Gantt - .k-gantt { - @include fill( - $kendo-gantt-text, - $kendo-gantt-bg, - $kendo-gantt-border - ); - - // React gantt - .k-treelist-scrollable { - .k-task-milestone .k-task-milestone-content { - @include fill( - $bg: $kendo-gantt-milestone-bg, - $border: $kendo-gantt-milestone-border - ); - } - .k-task-milestone.k-selected .k-task-milestone-content { - @include fill( - $bg: $kendo-gantt-milestone-selected-bg, - $border: $kendo-gantt-milestone-selected-border - ); - } - } - - .k-gantt-dependencies-svg { - polyline { - fill: none; - stroke: $kendo-gantt-line-fill; - } - - polyline.k-selected { - stroke: $kendo-gantt-line-selected-fill; - } - } - } - - // Header and footer - .k-gantt-header {} - .k-gantt-footer { - @include box-shadow( none ); - } - .k-gantt-toolbar {} - - - // Treelist - .k-gantt-treelist { - @include fill( - $kendo-gantt-treelist-text, - $kendo-gantt-treelist-bg, - $kendo-gantt-treelist-border - ); - - .k-treelist, - .k-grid-content { - background-color: transparent; - } - } - - - // Rows and colls - .k-gantt-rows {} - .k-gantt-columns {} - - - // Non work hours - .k-gantt .k-nonwork-hour { - @include fill( - $kendo-gantt-nonwork-text, - $kendo-gantt-nonwork-bg, - $kendo-gantt-nonwork-border - ); - } - - - // Task dot - .k-task-dot {} - .k-task-dot::before { - @include fill( - $bg: $kendo-gantt-dot-bg, - $border: $kendo-gantt-dot-border - ); - } - .k-task-dot:hover::before, - .k-task-dot.k-hover::before { - @include fill( - $bg: $kendo-gantt-dot-hover-bg, - $border: $kendo-gantt-dot-hover-border - ); - } - - - // Milestone - .k-task-milestone { - @include fill( - $bg: $kendo-gantt-milestone-bg, - $border: $kendo-gantt-milestone-border - ); - - &.k-task-delayed { - @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px); - } - - &.k-task-advanced { - @include fill( - $bg: $kendo-gantt-advanced-bg - ); - } - } - .k-task-milestone.k-selected { - background-image: none; - @include fill( - $bg: $kendo-gantt-milestone-selected-bg, - $border: $kendo-gantt-milestone-selected-border - ); - } - - - // Summary - .k-task-summary { - color: $kendo-gantt-summary-bg; - - &.k-task-delayed { - color: $kendo-gantt-delayed-bg-lighter; - } - - &.k-task-advanced { - color: $kendo-gantt-advanced-bg-lighter; - } - } - .k-task-summary-complete { - color: $kendo-gantt-summary-progress-bg; - } - .k-task-delayed .k-task-summary-complete { - color: $kendo-gantt-delayed-bg; - } - .k-task-advanced .k-task-summary-complete { - color: $kendo-gantt-advanced-bg; - } - .k-task-summary.k-selected { - color: $kendo-gantt-summary-selected-bg; - - .k-task-summary-complete { - color: $kendo-gantt-summary-progress-selected-bg; - } - } - - - // Tasks - .k-task-single { - @include fill( - $kendo-gantt-task-text, - $kendo-gantt-task-bg, - $kendo-gantt-task-border - ); - - &.k-task-delayed { - @include fill( - $bg: $kendo-gantt-delayed-bg-lighter - ); - } - - &.k-task-advanced { - @include fill( - $bg: $kendo-gantt-advanced-bg-lighter - ); - } - - .k-task-complete { - background-color: $kendo-gantt-task-progress-bg; - } - } - .k-task-delayed .k-task-complete { - @include fill( - $bg: $kendo-gantt-delayed-bg - ); - } - .k-task-advanced .k-task-complete { - @include fill( - $bg: $kendo-gantt-advanced-bg - ); - } - .k-task-single.k-selected { - @include fill( - $kendo-gantt-task-selected-text, - $kendo-gantt-task-selected-bg, - $kendo-gantt-task-selected-border - ); - - .k-task-complete { - background-color: $kendo-gantt-task-progress-selected-bg; - } - } - - // Dependency Lines - .k-gantt-line { - color: $kendo-gantt-line-fill; - } - .k-gantt-line.k-selected { - color: $kendo-gantt-line-selected-fill; - } - - // Planned element - .k-task-planned { - .k-task-moment { - @include fill( - $bg: transparent, - $border: $kendo-gantt-planned-border - ); - } - .k-task-duration { - @include fill( - $bg: $kendo-gantt-planned-bg - ); - } - &:hover .k-task-moment { - @include fill( - $bg: $kendo-gantt-planned-bg - ); - } - } - - // Delay offset - .k-task-offset { - @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px); - - .k-resize-e::before { - @include fill( - $border: $kendo-gantt-action-on-offset-text - ); - } - - .k-task-actions { - color: $kendo-gantt-action-on-offset-text; - } - } - - .k-task-offset:hover { - @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px); - } - - .k-pdf-export .k-task-offset { - background-color: $kendo-gantt-delayed-bg; - } - - // Tooltips - .k-offset-tooltip-delayed { - @include fill( - $bg: $kendo-gantt-delayed-bg - ); - } - - .k-planned-tooltip { - @include fill( - $bg: $kendo-gantt-planned-bg - ); - } - - .k-gantt-tooltip-validation { - &::before { - background-color: $kendo-gantt-validation-tooltip-border; - } - } - .k-gantt-tooltip-valid { - &::before { - background-color: $kendo-gantt-validation-tooltip-valid-border; - } - } - .k-gantt-tooltip-invalid { - &::before { - background-color: $kendo-gantt-validation-tooltip-invalid-border; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/gantt/_theme.scss" as *; @mixin kendo-gantt--theme() { diff --git a/packages/default/scss/gantt/_variables.scss b/packages/default/scss/gantt/_variables.scss index 53d83eb3367..004eeac73df 100644 --- a/packages/default/scss/gantt/_variables.scss +++ b/packages/default/scss/gantt/_variables.scss @@ -255,3 +255,81 @@ $kendo-gantt-task-tooltip-padding-x: k-spacing(2) !default; $kendo-gantt-task-tooltip-padding-y: k-spacing(1) !default; + +@forward "@progress/kendo-theme-core/scss/components/gantt/_variables.scss" with ( + $kendo-gantt-border-width: $kendo-gantt-border-width, + $kendo-gantt-font-family: $kendo-gantt-font-family, + $kendo-gantt-font-size: $kendo-gantt-font-size, + $kendo-gantt-line-height: $kendo-gantt-line-height, + $kendo-gantt-bg: $kendo-gantt-bg, + $kendo-gantt-text: $kendo-gantt-text, + $kendo-gantt-border: $kendo-gantt-border, + $kendo-gantt-treelist-bg: $kendo-gantt-treelist-bg, + $kendo-gantt-treelist-text: $kendo-gantt-treelist-text, + $kendo-gantt-treelist-border: $kendo-gantt-treelist-border, + $kendo-gantt-nonwork-bg: $kendo-gantt-nonwork-bg, + $kendo-gantt-nonwork-text: $kendo-gantt-nonwork-text, + $kendo-gantt-nonwork-border: $kendo-gantt-nonwork-border, + $kendo-gantt-line-size: $kendo-gantt-line-size, + $kendo-gantt-line-fill: $kendo-gantt-line-fill, + $kendo-gantt-line-selected-fill: $kendo-gantt-line-selected-fill, + $kendo-gantt-dot-size: $kendo-gantt-dot-size, + $kendo-gantt-dot-spacing: $kendo-gantt-dot-spacing, + $kendo-gantt-dot-bg: $kendo-gantt-dot-bg, + $kendo-gantt-dot-border: $kendo-gantt-dot-border, + $kendo-gantt-dot-hover-bg: $kendo-gantt-dot-hover-bg, + $kendo-gantt-dot-hover-border: $kendo-gantt-dot-hover-border, + $kendo-gantt-milestone-bg: $kendo-gantt-milestone-bg, + $kendo-gantt-milestone-border: $kendo-gantt-milestone-border, + $kendo-gantt-milestone-selected-bg: $kendo-gantt-milestone-selected-bg, + $kendo-gantt-milestone-selected-border: $kendo-gantt-milestone-selected-border, + $kendo-gantt-summary-bg: $kendo-gantt-summary-bg, + $kendo-gantt-summary-progress-bg: $kendo-gantt-summary-progress-bg, + $kendo-gantt-summary-selected-bg: $kendo-gantt-summary-selected-bg, + $kendo-gantt-summary-progress-selected-bg: $kendo-gantt-summary-progress-selected-bg, + $kendo-gantt-task-border-width: $kendo-gantt-task-border-width, + $kendo-gantt-task-padding-x: $kendo-gantt-task-padding-x, + $kendo-gantt-task-padding-y: $kendo-gantt-task-padding-y, + $kendo-gantt-task-bg: $kendo-gantt-task-bg, + $kendo-gantt-task-text: $kendo-gantt-task-text, + $kendo-gantt-task-border: $kendo-gantt-task-border, + $kendo-gantt-task-progress-bg: $kendo-gantt-task-progress-bg, + $kendo-gantt-task-selected-bg: $kendo-gantt-task-selected-bg, + $kendo-gantt-task-selected-text: $kendo-gantt-task-selected-text, + $kendo-gantt-task-selected-border: $kendo-gantt-task-selected-border, + $kendo-gantt-task-progress-selected-bg: $kendo-gantt-task-progress-selected-bg, + $kendo-gantt-task-actions-padding: $kendo-gantt-task-actions-padding, + $kendo-gantt-planned-margin-y: $kendo-gantt-planned-margin-y, + $kendo-gantt-planned-border-width: $kendo-gantt-planned-border-width, + $kendo-gantt-planned-line-height: $kendo-gantt-planned-line-height, + $kendo-gantt-planned-dependency-margin-y: $kendo-gantt-planned-dependency-margin-y, + $kendo-gantt-planned-moment-width: $kendo-gantt-planned-moment-width, + $kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-height, + $kendo-gantt-planned-moment-border-radius: $kendo-gantt-planned-moment-border-radius, + $kendo-gantt-planned-moment-left-margin-x: $kendo-gantt-planned-moment-left-margin-x, + $kendo-gantt-planned-milestone-moment-margin-x: $kendo-gantt-planned-milestone-moment-margin-x, + $kendo-gantt-planned-duration-height: $kendo-gantt-planned-duration-height, + $kendo-gantt-planned-duration-hover-height: $kendo-gantt-planned-duration-hover-height, + $kendo-gantt-planned-single-drag-hint-top: $kendo-gantt-planned-single-drag-hint-top, + $kendo-gantt-planned-summary-drag-hint-top: $kendo-gantt-planned-summary-drag-hint-top, + $kendo-gantt-planned-milestone-drag-hint-top: $kendo-gantt-planned-milestone-drag-hint-top, + $kendo-gantt-rtl-milestone-wrap-margin-x: $kendo-gantt-rtl-milestone-wrap-margin-x, + $kendo-gantt-rtl-milestone-planned-moment-margin-x: $kendo-gantt-rtl-milestone-planned-moment-margin-x, + $kendo-gantt-rtl-milestone-dot-start-margin-x: $kendo-gantt-rtl-milestone-dot-start-margin-x, + $kendo-gantt-planned-offset-resize-handler-margin-x: $kendo-gantt-planned-offset-resize-handler-margin-x, + $kendo-gantt-planned-bg: $kendo-gantt-planned-bg, + $kendo-gantt-planned-border: $kendo-gantt-planned-border, + $kendo-gantt-delayed-bg: $kendo-gantt-delayed-bg, + $kendo-gantt-delayed-bg-lighter: $kendo-gantt-delayed-bg-lighter, + $kendo-gantt-advanced-bg: $kendo-gantt-advanced-bg, + $kendo-gantt-advanced-bg-lighter: $kendo-gantt-advanced-bg-lighter, + $kendo-gantt-action-on-offset-text: $kendo-gantt-action-on-offset-text, + $kendo-gantt-offset-resize-handler-top: $kendo-gantt-offset-resize-handler-top, + $kendo-gantt-validation-tooltip-width: $kendo-gantt-validation-tooltip-width, + $kendo-gantt-validation-tooltip-label-width: $kendo-gantt-validation-tooltip-label-width, + $kendo-gantt-validation-tooltip-border: $kendo-gantt-validation-tooltip-border, + $kendo-gantt-validation-tooltip-valid-border: $kendo-gantt-validation-tooltip-valid-border, + $kendo-gantt-validation-tooltip-invalid-border: $kendo-gantt-validation-tooltip-invalid-border, + $kendo-gantt-task-tooltip-padding-x: $kendo-gantt-task-tooltip-padding-x, + $kendo-gantt-task-tooltip-padding-y: $kendo-gantt-task-tooltip-padding-y +); diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss index ffbd5a6d7a3..0a87f1656d4 100644 --- a/packages/default/scss/grid/_layout.scss +++ b/packages/default/scss/grid/_layout.scss @@ -1,1377 +1,4 @@ -@use "sass:map"; -@use "sass:math"; -@use "sass:list"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../icons/_variables.scss" as *; -@use "../chip/_variables.scss" as *; -@use "../forms/_variables.scss" as *; -@use "../button/_variables.scss" as *; -@use "../list/_variables.scss" as *; -@use "../tabstrip/_variables.scss" as *; -@use "../popup/_variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-grid--layout-base() { - - // Grid - .k-grid { - border-width: $kendo-grid-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-grid-font-family; - font-size: $kendo-grid-font-size; - line-height: $kendo-grid-line-height; - display: flex; - flex-direction: column; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - &.k-grid-display-block { - display: block; - } - - .k-grid-container { - display: flex; - flex: 1 1 auto; - overflow: hidden; - position: relative; - } - - .k-grid-aria-root { - border-color: inherit; - display: flex; - flex-direction: column; - flex: 1 1 auto; - overflow: hidden; - } - - .k-table { - margin: 0; - width: 100%; - max-width: none; - border-width: 0; - border-color: inherit; - border-collapse: separate; - border-spacing: 0; - box-sizing: content-box; - empty-cells: show; - outline: 0; - } - - .k-grid-header, - .k-grid-content, - .k-grid-content-locked, - .k-grid-footer { - .k-table { - table-layout: fixed; - } - } - - .k-table-thead, - .k-table-tbody, - .k-table-tfoot { - text-align: start; - border-color: inherit; - } - - .k-table-row { - border-color: inherit; - } - - .k-table-th, - td, - .k-table-td { - border-width: 0; - border-inline-start-width: $kendo-grid-cell-vertical-border-width; - border-style: solid; - border-color: inherit; - outline: 0; - font-weight: inherit; - text-align: inherit; - position: static; - overflow: hidden; - text-overflow: ellipsis; - box-sizing: content-box; - - &:first-child { - border-inline-start-width: 0; - } - - &:focus { - outline: none; - } - - > .k-radio, - > .k-radio-wrap, - > .k-checkbox, - > .k-checkbox-wrap { - vertical-align: top; - } - } - - .k-table-th { - border-block-end-width: 1px; - white-space: nowrap; - } - - td, - .k-table-td { - border-block-end-width: $kendo-grid-cell-horizontal-border-width; - white-space: unset; - vertical-align: middle; - } - - a { - color: inherit; - text-decoration: none; - } - - a:hover { - text-decoration: none; - } - - .k-grid-header-wrap { - box-sizing: content-box; - } - - .k-grid-header { - border-bottom-width: 1px; - font-size: $kendo-grid-header-font-size; - - .k-table { - margin-bottom: -1px; - } - - &.k-grid-draggable-header { - user-select: none; - touch-action: none; - } - - .k-table-th { - position: relative; - vertical-align: bottom; - cursor: default; - - &:first-child { - border-inline-start-width: 0; - } - - &.k-first { - border-inline-start-width: $kendo-grid-header-first-border; - } - } - - .k-table-th > .k-link { - line-height: inherit; - display: block; - overflow: hidden; - text-overflow: ellipsis; - outline: 0; - } - - .k-table-th > .k-link:focus { - text-decoration: none; - } - - .k-grid-filter, - .k-header-column-menu, - .k-grid-header-menu { - box-sizing: border-box; - outline: 0; - display: flex; - align-items: center; - align-content: center; - justify-content: center; - position: absolute; - inset-inline-end: $kendo-grid-header-menu-icon-spacing; - z-index: 1; - - &:hover { - cursor: pointer; - } - } - - .k-cell-inner > .k-link { - > .k-sort-icon { - vertical-align: text-top; - margin-inline-start: $kendo-grid-sorted-icon-spacing; - } - } - - .k-cell-inner > .k-link > .k-sort-icon .k-icon { - display: flex; - } - - .k-sort-order { - display: inline-block; - vertical-align: top; - height: $kendo-icon-size; - font-size: $kendo-grid-sorting-index-font-size; - margin-top: $kendo-grid-sorting-index-spacing-y; - margin-inline-start: $kendo-grid-sorting-index-spacing-x; - } - } - - .k-grid-header .k-filterable { - > .k-cell-inner { - .k-link { - padding-inline-end: 0; - } - } - } - - .k-cell-inner { - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: inherit; - overflow: hidden; - - > .k-link { - width: auto; - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: inherit; - flex: 1; - overflow: hidden; - - > .k-sort-icon { - margin-inline-start: 0; - display: inline-block; - flex-shrink: 0; - } - - } - - .k-sort-order { - flex-shrink: 0; - line-height: normal; - } - - .k-grid-filter, - .k-header-column-menu, - .k-grid-header-menu { - position: static; - margin-inline-end: $kendo-grid-header-menu-icon-spacing; - } - } - - - // Grouping, hierarcy - .k-group-col, - .k-hierarchy-col { - padding: 0; - width: $kendo-grid-hierarchy-col-width; - } - - .k-grouping-row p { - margin: 0; - display: flex; - align-items: center; - align-content: center; - } - - .k-grouping-row td, - .k-grouping-row .k-table-td { - overflow: visible; - } - - .k-grouping-row + .k-table-row td, - .k-grouping-row + .k-table-row .k-table-td { - border-top-width: $kendo-grid-grouping-row-border-top; - } - - .k-grouping-row .k-group-cell, - .k-grouping-row + .k-table-row .k-group-cell { - border-top-width: 0; - text-overflow: clip; - } - - .k-grouping-row .k-icon { - margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} ); - margin-inline-end: math.div( $kendo-icon-size, 2 ); - text-decoration: none; - } - - .k-table .k-group-footer td, - .k-table .k-group-footer .k-table-td { - border-style: solid; - border-width: $kendo-grid-group-footer-border-y 0; - } - - .k-group-footer .k-group-cell + td, - .k-group-footer .k-group-cell + .k-table-td { - border-inline-start-width: $kendo-grid-cell-vertical-border-width; - } - - .k-hierarchy-cell, - .k-drag-cell { - text-align: center; - overflow: visible; - - > .k-font-icon { - padding-block: $kendo-grid-cell-padding-y; - padding-inline: 0; - width: 100%; - height: 100%; - // That causes an issue with grid material. Commenting it for now - // -- joneff - // line-height: $kendo-line-height-md; - display: inline-block; - outline: 0; - } - } - - .k-hierarchy-cell + .k-grid-content-sticky { - border-inline-start-width: $kendo-grid-cell-vertical-border-width; - } - .k-detail-cell {} - .k-master-row {} - - .k-detail-row { - .k-detail-cell { - border-inline-start-width: 0; - } - } - - .k-dirty-cell { - position: relative; - - &.k-edit-cell { - position: static; - } - - &.k-grid-content-sticky { - position: sticky; - } - } - - .k-dirty { - border-width: 5px; - border-color: transparent; - border-block-start-color: currentColor; - border-inline-start-color: currentColor; - inset-inline-start: 0; - inset-inline-end: auto; - } - - .k-grid-content-locked + .k-grid-content { - box-sizing: content-box; - } - - .k-grid-content-expander { - position: absolute; - visibility: hidden; - height: 1px; - bottom: 1px; // fix for vertical scrollbar appearing when no records template is displayed - } - - .k-grid-filter, - .k-header-column-menu, - .k-grid-header-menu, - .k-hierarchy-cell .k-icon { - border-width: 0; - } - - // Drag column - .k-drag-col { - padding: 0; - width: $kendo-grid-drag-cell-width; - } - - .k-drag-cell { - cursor: move; - } - } - - // Toolbar - .k-grid-toolbar { - border-width: 0 0 $kendo-grid-toolbar-border-width; - flex-shrink: 0; - } - .k-grid-toolbar-bottom { - border-width: $kendo-grid-toolbar-border-width 0 0; - } - - - // Grouping header - .k-grouping-header { - border-width: 0 0 1px; - border-style: solid; - border-color: inherit; - white-space: normal; - display: flex; - align-items: center; - position: relative; - flex-wrap: wrap; - - &::before { - content: ""; - height: $kendo-chip-calc-size; - display: inline-block; - vertical-align: middle; - } - - .k-chip-list { - flex-grow: 0; - display: contents; - } - - > .k-grouping-drop-container { - flex-grow: 1; - padding-block: $kendo-grid-grouping-header-padding-y; - margin-block: calc( #{$kendo-grid-grouping-header-padding-y} * -1 ); - display: inline-flex; - align-self: stretch; - align-items: center; - } - } - - .k-grouping-dropclue { - width: ($kendo-grid-group-drop-hint-size * 2); - position: absolute; - top: $kendo-grid-group-drop-hint-top; - box-sizing: content-box; - - &::before, - &::after { - display: inline-block; - content: ""; - position: absolute; - } - - &::before { - border-width: $kendo-grid-group-drop-hint-size; - border-style: solid; - border-left-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - top: 0; - } - - &::after { - width: $kendo-grid-group-drop-hint-line-size; - height: calc(100% - #{$kendo-grid-group-drop-hint-size}); - top: $kendo-grid-group-drop-hint-size; - inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{math.div( $kendo-grid-group-drop-hint-line-size, 2 )} ); - } - } - - - // Grid header / footer - .k-grid-header-wrap, - .k-grid-footer-wrap { - margin-inline-end: -#{$kendo-grid-cell-vertical-border-width}; - width: 100%; - border-width: 0; - border-inline-end-width: $kendo-grid-cell-vertical-border-width; - border-style: solid; - border-color: inherit; - position: relative; - overflow: hidden; - } - - .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable { - margin-inline-end: 0; - } - - .k-grid-header, - .k-grid-footer { - padding-inline-start: 0; - padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); - border-width: 0; - border-style: solid; - border-color: inherit; - flex: 0 0 auto; - } - - div.k-grid-header, - div.k-grid-footer { - display: flex; - flex-direction: row; - align-items: stretch; - } - - .k-column-resizer { - width: .5em; - height: 1000%; - display: block; - position: absolute; - top: 0; - inset-inline-end: 0; - cursor: col-resize; - } - - .k-row-resizer { - display: block; - height: $kendo-grid-row-resizer-height; - width: 100%; - background: none; - } - - .k-grid-footer { - border-top-width: 1px; - - td, - .k-table-td { - height: $kendo-line-height-em; - } - } - - .k-grid-footer td, - .k-group-footer td, - .k-grouping-row td, - .k-grid-footer .k-table-td, - .k-group-footer .k-table-td, - .k-grouping-row .k-table-td { - font-weight: bold; - } - - .k-grid-filter-popup { - min-width: $kendo-grid-column-menu-width; - max-width: $kendo-grid-column-menu-max-width; - } - - // Standalone column menu - .k-grid-column-menu-standalone a.k-grid-filter { - position: initial; - display: inline-block; - margin-block: -4px; - margin-inline: 0; - padding-block: 4px; - padding-inline: 8px; - } - - // Filter row - .k-filter-row { - line-height: $kendo-form-line-height; - - td, - .k-table-td, - .k-table-th { - border-width: 0; - border-block-end-width: 1px; - border-inline-start-width: $kendo-grid-cell-vertical-border-width; - white-space: nowrap; - } - - td:first-child, - .k-table-td:first-child { - border-inline-start-width: 0; - } - - .k-multiselect { - height: auto; - } - } - - .k-filtercell { - width: auto; - display: flex; - flex-flow: row nowrap; - align-items: center; - - > span, - .k-filtercell-wrapper { - width: 100%; - display: flex; - flex-flow: row nowrap; - align-items: center; - flex: 1 1 auto; - - > .k-button { - flex: none; - } - } - - } - - // Grid content - .k-grid-content, - .k-grid-content-locked { - border-color: inherit; - outline: 0; - - .k-table-row:last-child > td, - .k-table-row:last-child > .k-table-td { - border-bottom-width: 0; - } - } - - .k-grid-content { - width: 100%; - min-height: 0; - overflow: auto; - overflow-x: auto; - overflow-y: scroll; - position: relative; - flex: 1; - } - - // Virtualization - .k-virtual-scrollable-wrap { - height: 100%; - overflow-y: hidden; - position: relative; - } - - // Edit row - .k-grid .k-edit-cell, - .k-grid .k-command-cell, - .k-grid .k-grid-edit-row td, - .k-grid .k-grid-edit-row .k-table-td { - text-overflow: clip; - } - - .k-grid .k-edit-cell, - .k-grid .k-grid-edit-row td, - .k-grid .k-grid-edit-row .k-table-td { - - > input:not([type="checkbox"]):not([type="radio"]), - > select, - > .k-widget:not(.k-switch) { - width: 100%; - vertical-align: middle; - box-sizing: border-box; - } - > .k-radio, - > .k-checkbox, - > .k-radio-wrap, - > .k-checkbox-wrap { - vertical-align: middle; - } - } - - .k-grid .k-command-cell > .k-button { - margin-inline-end: $kendo-grid-command-cell-button-spacing; - vertical-align: middle; - - &:last-child { - margin-inline-end: unset; - } - } - - - // Resize handle - .k-grid > .k-resize-handle, - .k-grid-header .k-resize-handle { - height: 25px; - cursor: col-resize; - position: absolute; - z-index: 2; - } - - - // Selection Aggregates - .k-selection-aggregates { - border-width: $kendo-grid-selection-aggregates-border-width 0 0; - border-style: solid; - line-height: $kendo-grid-selection-aggregates-line-height; - display: flex; - justify-content: flex-end; - gap: $kendo-grid-selection-aggregates-spacing; - } - .k-selection-aggregates-item-value { - font-weight: $kendo-grid-selection-aggregates-font-weight; - } - - - // Pager - .k-grid-pager { - border-width: 1px 0 0; - border-color: inherit; - font-size: inherit; - } - .k-grid-pager-top { - border-width: 0 0 1px; - } - - .k-grid-virtual .k-grid-content { - .k-grid-table-wrap { - float: left; - width: 100%; - } - - .k-grid-table { - position: relative; - float: left; - z-index: 1; - } - - > .k-height-container { - position: relative; - float: left; - } - - &::after { - content: ""; - display: block; - clear: both; - } - } - - .k-width-container { - position: absolute; - visibility: hidden; - } - - .k-width-container div { - height: 1px; - } - - .k-grid-add-row td, - .k-grid-add-row .k-table-td { - border-bottom-style: solid; - border-bottom-width: 1px; - } - - // Locked columns - .k-grid-lockedcolumns { - white-space: nowrap; - } - - .k-grid-content, - .k-grid-content-locked { - white-space: normal; - } - - .k-grid-content-locked, - .k-grid-footer-locked, - .k-grid-header-locked { - flex: 0 0 auto; - display: inline-block; - vertical-align: top; - overflow: hidden; - position: relative; - border-style: solid; - border-width: 0; - border-inline-end-width: $kendo-grid-cell-vertical-border-width; - box-sizing: content-box; - - & + .k-grid-content.k-auto-scrollable { - display: inline-block; - } - - .k-table { - border-width: 0; - } - } - - .k-grid-content, - .k-grid-footer-wrap, - .k-grid-header-wrap { - flex: 1 1 auto; - display: inline-block; - vertical-align: top; - - &.k-auto-scrollable { - display: block; - } - } - - .k-grid-header-locked > .k-grid-header-table, - .k-grid-header-wrap > .k-grid-header-table { - margin-bottom: -1px; - } - - .k-grid-header .k-table-th.k-grid-header-sticky, - .k-grid-header .k-filter-row .k-grid-header-sticky, - .k-grid .k-grid-content-sticky, - .k-grid .k-grid-row-sticky, - .k-grid .k-grid-footer-sticky { - position: sticky; - z-index: 2; - - &.k-edit-cell { - overflow: visible; - z-index: 3; - } - } - - .k-master-row .k-grid-content-sticky::before, - .k-master-row.k-grid-row-sticky .k-table-td::before { - content: ""; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: -1; - } - - kendo-grid { - .k-table-row.k-grid-row-sticky { - border: 0; - position: static; - z-index: auto; - } - - .k-grid-row-sticky td, - .k-grid-row-sticky .k-table-td { - border-bottom-width: $kendo-grid-border-width; - border-top-width: $kendo-grid-border-width; - - position: sticky; - top: inherit; - bottom: inherit; - z-index: 2; - } - - .k-grid-row-sticky td.k-grid-content-sticky, - .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky, - .k-grid-row-sticky .k-table-td.k-grid-content-sticky, - .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky { - z-index: 3; - } - - // Locked and sticky - .k-grid-header-locked .k-table-th.k-grid-header-sticky:last-child, - .k-grid-content-locked .k-table-row .k-grid-content-sticky:last-child { - border-inline-end: 0; - } - - .k-grid-header .k-grid-column-menu, - .k-grid-header .k-grid-header-menu { - z-index: 1; - } - } - - .k-grid-content-sticky.k-grid-row-sticky { - z-index: 3; - } - - .k-grid .k-table .k-grid-header-sticky, - .k-grid .k-table .k-grid-content-sticky, - .k-grid .k-table .k-grid-footer-sticky { - border-inline-end-width: $kendo-grid-cell-vertical-border-width; - - &:not([style*="display: none"]) + td, - &:not([style*="display: none"]) + .k-table-td, - &:not([style*="display: none"]) + .k-table-th { - border-inline-start-width: 0; - } - } - - .k-grid .k-grid-row-sticky { - border-bottom-width: $kendo-grid-border-width; - border-top-width: $kendo-grid-border-width; - } - - .k-grid-header-sticky.k-table-th.k-grid-no-left-border.k-first { - border-inline-start-width: 0; - } - - .k-grid.k-grid-no-scrollbar { - - .k-grid-header-wrap, - .k-grid-footer-wrap { - margin: 0; - border-width: 0; - } - - .k-grid-header, - .k-grid-footer { - padding: 0; - } - - .k-grid-content { - overflow-y: auto; - } - } - - .k-grid-norecords { - text-align: center; - } - - div.k-grid-norecords { - width: 100%; - height: 100%; - display: flex; - align-items: center; - } - - .k-grid-norecords-template { - box-sizing: border-box; - margin-block: 0; - margin-inline: auto; - width: 20em; - height: 4em; - border: 1px solid; - line-height: 4em; - } - - .k-column-title { - min-width: 0; - text-overflow: ellipsis; - white-space: nowrap; - flex-shrink: 1; - overflow: hidden; - } - - - // Grid Sizes - @each $size, $size-props in $kendo-grid-sizes { - $_header-padding-x: map.get( $size-props, header-padding-x ); - $_header-padding-y: map.get( $size-props, header-padding-y ); - $_grouping-header-padding-x: map.get( $size-props, grouping-header-padding-x ); - $_grouping-header-padding-y: map.get( $size-props, grouping-header-padding-y ); - $_cell-padding-x: map.get( $size-props, cell-padding-x ); - $_cell-padding-y: map.get( $size-props, cell-padding-y ); - $_filter-cell-padding-x: map.get( $size-props, filter-cell-padding-x ); - $_filter-cell-padding-y: map.get( $size-props, filter-cell-padding-y ); - $_edit-cell-padding-x: map.get( $size-props, edit-cell-padding-x ); - $_edit-cell-padding-y: map.get( $size-props, edit-cell-padding-y ); - $_button-padding-y: map.get( $size-props, button-padding-y ); - $_button-calc-size: map.get( $size-props, button-calc-size ); - $_button-line-height: map.get( $size-props, button-line-height ); - $_group-dropclue-height: map.get( $size-props, group-dropclue-height ); - $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x ); - $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y ); - - .k-grid .k-grid-#{$size}, - .k-grid-#{$size} { - - .k-table-th { - padding-block: $_header-padding-y; - padding-inline: $_header-padding-x; - } - - td, - .k-table-td { - padding-block: $_cell-padding-y; - padding-inline: $_cell-padding-x; - } - - .k-grouping-header { - padding-block: $_grouping-header-padding-y; - padding-inline: $_grouping-header-padding-x; - gap: $_grouping-header-padding-y; - - &::before { - margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 ); - } - } - - .k-grid-header { - .k-table-th > .k-link { - margin-block: calc( #{$_header-padding-y} * -1 ); - margin-inline: calc( #{$_header-padding-x} * -1 ); - padding-block: $_header-padding-y; - padding-inline: $_header-padding-x; - } - - .k-grid-filter, - .k-header-column-menu, - .k-grid-header-menu { - padding: $_button-padding-y; - width: $_button-calc-size; - height: $_button-calc-size; - line-height: $_button-line-height; - bottom: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} ); - } - } - - .k-table-th { - > .k-cell-inner { - margin-block: calc( #{$_header-padding-y} * -1 ); - margin-inline: calc( #{$_header-padding-x} * -1 ); - - > .k-link { - padding-block: $_header-padding-y; - padding-inline: $_header-padding-x; - } - } - } - - .k-grouping-row .k-icon { - margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} ); - } - - .k-grouping-dropclue { - height: $_group-dropclue-height; - } - - .k-hierarchy-cell, - .k-drag-cell { - padding: 0; - - > .k-icon { - padding-block: $_cell-padding-y; - padding-inline: 0; - } - } - - - // Edit row - .k-edit-cell, - .k-command-cell, - .k-grid-edit-row td, - .k-grid-edit-row .k-table-td { - padding-block: $_edit-cell-padding-y; - padding-inline: $_edit-cell-padding-x; - } - - - // Filter row - .k-filter-row { - td, - .k-table-td, - .k-table-th { - padding-block: $_filter-cell-padding-y; - padding-inline: $_filter-cell-padding-x; - } - } - - .k-filtercell { - > span, - .k-filtercell-wrapper { - gap: calc( #{$_cell-padding-y} / 2 ); - } - } - - - // Selection Aggregates - .k-selection-aggregates { - padding-block: $_selection-aggregates-padding-x; - padding-inline: $_selection-aggregates-padding-y; - } - - // Resizing wrapper - .k-resizer-wrap { - display: block; - width: 100%; - padding-block-start: calc( #{$_edit-cell-padding-y} - #{$kendo-grid-row-resizer-height} ); - padding-block-end: $_edit-cell-padding-y; - position: absolute; - background: none; - cursor: row-resize; - z-index: 2; - } - } - - } - - - // PDF export - .k-loading-pdf-mask { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 100; - - > .k-i-loading { - position: absolute; - top: 50%; - left: 50%; - font-size: 64px; - } - - .k-loading-pdf-progress { - margin: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - - } - - .k-pdf-export .k-loading-pdf-mask { - display: none; - } - - .k-grid-pdf-export-element { - position: absolute; - left: -10000px; - top: -10000px; - - .k-filter-row { - display: none; - } - } - - // Remove Grid scrollbar during built-in export - // stylelint-disable declaration-no-important - .k-pdf-export-shadow { - .k-grid { - float: left; - width: auto !important; - } - - // Remove all sizes and scrolling - .k-grid, - .k-grid-content, - .k-grid-content-locked { - height: auto !important; - overflow: visible; - } - - .k-grid-header-locked { - & + .k-grid-header-wrap, - & + .k-grid-content, - & + .k-grid-footer-wrap { - width: auto !important; - } - } - - // Remove empty space reserved above .k-table-the scrollbar - .k-grid-header, - .k-grid[data-role="grid"] .k-grid-footer { - padding: 0 !important; - } - } - // stylelint-enable declaration-no-important - - - // Filter menu - .k-filter-menu-popup { - min-width: $kendo-grid-column-menu-width; - max-width: $kendo-grid-column-menu-max-width; - } - .k-filter-menu { - box-sizing: border-box; - } - .k-filter-menu-container { - padding: k-spacing(2); - box-sizing: border-box; - display: flex; - flex-flow: column nowrap; - align-items: stretch; - gap: k-spacing(2); - - .k-filter-and { - width: min-content; - align-self: start; - } - - .k-actions { - margin: 0; - padding: 0; - } - - // Angular specific - kendo-numeric-filter-menu, - kendo-grid-string-filter-menu, - kendo-grid-date-filter-menu, - kendo-grid-numeric-filter-menu, - kendo-grid-filter-menu-input-wrapper, - kendo-treelist-string-filter-menu, - kendo-treelist-date-filter-menu, - kendo-treelist-numeric-filter-menu, - kendo-treelist-filter-menu-input-wrapper { - display: flex; - flex-flow: column nowrap; - align-items: stretch; - gap: k-spacing(2); - } - } - - .k-filter-menu.k-popup, - .k-grid-filter-popup.k-popup { - - .k-filter-menu-container { - min-width: $kendo-grid-column-menu-width; - max-width: $kendo-grid-column-menu-max-width; - } - } - - .k-popup .k-multicheck-wrap { - margin: 0; - padding: 0; - max-height: 300px; - font-size: $kendo-list-font-size; - line-height: $kendo-list-line-height; - white-space: nowrap; - overflow: auto; - list-style: none; - - .k-item, - .k-check-all-wrap { - padding-block: $kendo-grid-column-menu-list-item-padding-y; - padding-inline: $kendo-grid-column-menu-list-item-padding-x; - display: flex; - flex-flow: row nowrap; - } - } - - .k-filter-selected-items { - font-weight: bold; - line-height: normal; - white-space: nowrap; - } - - // autofitting requires automatic table layout to measure sizes - .k-autofitting { - width: auto !important; // stylelint-disable-line declaration-no-important - table-layout: auto !important; // stylelint-disable-line declaration-no-important - - .k-table-th, - td, - .k-table-td { - white-space: nowrap !important; // stylelint-disable-line declaration-no-important - } - - .k-detail-row { - display: none !important; // stylelint-disable-line declaration-no-important - } - } - - - - // Column menu - .k-column-menu-popup, - .k-grid-columnmenu-popup { - min-width: $kendo-grid-column-menu-width; - box-sizing: border-box; - - &.k-popup { - padding-block: $kendo-grid-column-menu-popup-padding-y; - padding-inline: $kendo-grid-column-menu-popup-padding-x; - max-width: $kendo-grid-column-menu-max-width; - } - - .k-actions { - margin: 0; - } - - } - .k-column-menu { - box-sizing: border-box; - - .k-menu:not(.k-context-menu) { - font-weight: 400; - } - - .k-expander { - border: 0; - background: inherit; - - .k-columnmenu-item { - display: flex; - align-items: center; - } - } - } - .k-column-menu-tabbed { - border-radius: $kendo-tabstrip-item-border-radius $kendo-tabstrip-item-border-radius 0 0; - - .k-tabstrip-items { - margin: (-$kendo-tabstrip-item-border-width) (-$kendo-tabstrip-item-border-width) 0; - - .k-item { - flex: 1; - } - - .k-link { - justify-content: center; - } - } - - .k-tabstrip-content { - padding-inline: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x; - padding-block: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y; - border-width: 0; - } - } - - .k-column-list { - padding: 0; - margin: 0; - list-style: none; - max-height: 200px; - overflow-x: hidden; - overflow-y: auto; - } - - .k-column-chooser-title, - .k-column-list-item { - padding-block: $kendo-grid-column-menu-list-item-padding-y; - padding-inline: $kendo-grid-column-menu-list-item-padding-x; - } - - .k-column-list-item { - margin: 0; - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 4px; - cursor: pointer; - position: relative; - - .k-checkbox-label { - margin: 0; - } - - &:focus { - outline: none; - } - } - - .k-columns-items-wrap { - padding-block: $kendo-grid-column-menu-items-wrap-padding-y; - padding-inline: $kendo-grid-column-menu-items-wrap-padding-x; - } - - .k-columnmenu-item { - padding-block: $kendo-grid-column-menu-item-padding-y; - padding-inline: $kendo-grid-column-menu-item-padding-x; - outline: 0; - cursor: pointer; - - > .k-icon, - > .k-expander-indicator { - margin-inline-end: $kendo-icon-spacing; - } - } - - .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper { - border-top: 1px solid; - border-top-color: $kendo-popup-border; - } - - .k-columnmenu-item-content { - overflow: hidden; - } - - .k-column-menu-group-header { - padding-block: $kendo-grid-column-menu-group-header-padding-y; - padding-inline: $kendo-grid-column-menu-group-header-padding-x; - display: flex; - flex: 0 0 auto; - position: relative; - user-select: none; - } - - .k-column-menu-group-header-text { - border-bottom-width: $kendo-grid-column-menu-group-header-border-bottom-width; - border-bottom-style: solid; - font-size: $kendo-grid-column-menu-group-header-font-size; - line-height: $kendo-grid-column-menu-group-header-line-height; - font-weight: bold; - text-transform: $kendo-grid-column-menu-group-header-text-transform; - flex: 1 1 auto; - } - - .k-rtl .k-grid-virtual .k-grid-content, - [dir="rtl"] .k-grid-virtual .k-grid-content, - .k-rtl.k-grid-virtual .k-grid-content, - [dir="rtl"].k-grid-virtual .k-grid-content { - - .k-grid-table-wrap, - .k-grid-table, - > .k-height-container { - float: right; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/grid/_layout.scss" as *; @mixin kendo-grid--layout() { diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss index 106ea56b2b1..37484ce8591 100644 --- a/packages/default/scss/grid/_theme.scss +++ b/packages/default/scss/grid/_theme.scss @@ -1,453 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../button/_variables.scss" as *; -@use "../list/_variables.scss" as *; -@use "../popup/_variables.scss" as *; - -@mixin kendo-grid--theme-base() { - - .k-grid-header, - .k-grid-header-wrap, - .k-grouping-header, - .k-grid .k-table-th, - .k-grid td, - .k-grid .k-table-td, - .k-grid-footer, - .k-grid-footer-wrap, - .k-grid-content-locked, - .k-grid-footer-locked, - .k-grid-header-locked, - .k-filter-row > .k-table-th, - .k-filter-row > td, - .k-filter-row > .k-table-td { - @include fill( $border: $kendo-grid-header-border ); - } - - .k-grid-header, - .k-grouping-header, - .k-grid-add-row, - .k-grid-footer { - @include fill( - $color: $kendo-grid-header-text, - $bg: $kendo-grid-header-bg - ); - } - - .k-grid .k-table { - background-color: inherit; - } - - .k-grid-toolbar { - @include fill( - null, - null, - inherit, - null - ); - @include box-shadow( none ); - } - - .k-grid-content { - // setting this background color resolves glitches in iOS - @include fill($bg: $kendo-grid-bg ); - } - - .k-group-footer td, - .k-grouping-row td, - .k-group-footer .k-table-td, - .k-grouping-row .k-table-td, - .k-table-tbody .k-group-cell { - @include fill( - $color: $kendo-grid-grouping-row-text, - $bg: $kendo-grid-grouping-row-bg - ); - } - - .k-grouping-dropclue { - &::before { - border-color: $kendo-grid-header-text transparent transparent; - } - - &::after { - background-color: $kendo-grid-header-text; - } - } - - .k-grid { - @include fill( $kendo-grid-text, $kendo-grid-bg, $kendo-grid-border ); - - // Alt row - .k-table-row.k-table-alt-row { - background-color: $kendo-grid-alt-bg; - } - - // Hover state - .k-table-tbody > .k-table-row:not(.k-detail-row):hover, - .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover { - color: $kendo-grid-hover-text; - background-color: $kendo-grid-hover-bg; - } - - // Selected state - td.k-selected, - .k-table-row.k-selected > td, - .k-table-td.k-selected, - .k-table-row.k-selected > .k-table-td { - color: $kendo-grid-selected-text; - background-color: $kendo-grid-selected-bg; - } - - // Focused state - .k-table-th, - td, - .k-table-td, - .k-master-row > td, - .k-grouping-row > td, - .k-detail-row > td, - .k-group-footer > td, - .k-master-row > .k-table-td, - .k-grouping-row > .k-table-td, - .k-detail-row > .k-table-td, - .k-group-footer > .k-table-td, - .k-grid-pager { - &:focus, - &.k-focus { - @include focus-indicator( $kendo-grid-focus-shadow, true ); - } - } - - .k-grid-filter, - .k-header-column-menu, - .k-grid-header-menu, - .k-hierarchy-cell .k-icon { - color: $kendo-grid-header-text; - } - - .k-grouping-row { - background-color: $kendo-grid-grouping-row-bg; - - .k-icon { - color: $kendo-grid-header-text; - } - - .k-grid-content-sticky { - border-color: $kendo-grid-sticky-border; - border-top-color: $kendo-grid-header-border; - } - } - - // Locked columns - .k-grid-header-locked, - .k-grid-content-locked, - .k-grid-header-locked .k-table-th, - .k-grid-content-locked td, - .k-grid-content-locked .k-table-td { - border-color: $kendo-grid-sticky-header-border; - } - - .k-grid-content-locked { - .k-group-footer td, - .k-group-footer .k-table-td, - .k-group-cell { - @include fill( $border: $kendo-grid-header-border ); - } - - .k-grouping-row + .k-table-row td, - .k-grouping-row + .k-table-row .k-table-td { - border-top-color: $kendo-grid-header-border; - } - - // Selected state - .k-selected td, - .k-selected .k-table-td { - @include fill( $bg: $kendo-grid-sticky-selected-bg ); - } - - .k-selected.k-table-alt-row td, - .k-selected.k-table-alt-row .k-table-td { - @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); - } - - // Selected hover - .k-selected:hover td, - .k-selected.k-hover td, - .k-selected:hover .k-table-td, - .k-selected.k-hover .k-table-td { - @include fill( $bg: $kendo-grid-sticky-selected-hover-bg ); - } - } - - .k-grid-header-locked .k-table-th { - border-bottom-color: $kendo-grid-header-border; - } - } - - col.k-sorted, - .k-table-th.k-sorted { - background-color: $kendo-grid-sorted-bg; - } - - // Grid header - .k-grid-header { - - .k-sort-icon, - .k-sort-order { - color: $kendo-grid-sorting-indicator-text; - } - - .k-grid-filter, - .k-header-column-menu, - .k-grid-header-menu, - .k-hierarchy-cell .k-icon { - &:hover { - color: $kendo-button-hover-text; - background-color: $kendo-button-hover-bg; - } - &:focus, - &.k-focus { - @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true ); - } - &.k-active { - color: $kendo-selected-text; - background-color: $kendo-selected-bg; - } - } - - .k-table-th.k-grid-header-sticky, - td.k-grid-header-sticky, - .k-table-td.k-grid-header-sticky, - .k-grid-header-sticky.k-sorted { - @include fill( - $color: $kendo-grid-sticky-header-text, - $bg: $kendo-grid-sticky-header-bg - ); - - border-right-color: $kendo-grid-sticky-header-border; - border-left-color: $kendo-grid-sticky-header-border; - } - } - - // Grid footer - .k-grid-footer { - @include fill( - $kendo-grid-footer-text, - $kendo-grid-footer-bg, - $kendo-grid-footer-border - ); - .k-grid-footer-sticky { - border-left-color: $kendo-grid-sticky-border; - border-right-color: $kendo-grid-sticky-border; - background-color: $kendo-grid-sticky-footer-bg; - } - } - - // Selection Aggregates - .k-selection-aggregates { - @include fill( - $kendo-grid-selection-aggregates-text, - $kendo-grid-selection-aggregates-bg, - $kendo-grid-selection-aggregates-border - ); - } - - // Content - .k-master-row { - .k-grid-content-sticky { - border-color: $kendo-grid-sticky-border; - border-top-color: $kendo-grid-header-border; - background-color: $kendo-grid-sticky-bg; - } - - .k-grid-row-sticky, - &.k-grid-row-sticky > .k-table-td { - border-top-color: $kendo-grid-sticky-border; - border-bottom-color: $kendo-grid-sticky-border; - background-color: $kendo-grid-sticky-bg; - } - - &.k-table-alt-row { - .k-grid-content-sticky, - &.k-grid-row-sticky > .k-table-td, - .k-grid-row-sticky { - @include fill( $bg: $kendo-grid-sticky-alt-bg ); - } - } - - // Selected state - &.k-table-row.k-selected td.k-grid-content-sticky, - &.k-table-row.k-selected.k-grid-row-sticky > .k-table-td, - &.k-table-row.k-selected .k-table-td.k-grid-row-sticky, - &.k-table-row td.k-grid-content-sticky.k-selected, - &.k-table-row .k-table-td.k-grid-content-sticky.k-selected { - @if($kendo-enable-color-system) { - @include fill( $bg: $kendo-grid-sticky-bg ); - - &::before { - @include fill( $bg: $kendo-grid-sticky-selected-bg ); - } - } @else { - @include fill( $bg: $kendo-grid-sticky-selected-bg ); - } - } - - &.k-selected.k-table-alt-row td.k-grid-content-sticky, - &.k-selected.k-table-alt-row.k-grid-row-sticky > .k-table-td, - &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky, - &.k-table-alt-row td.k-grid-content-sticky.k-selected, - &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected { - @if($kendo-enable-color-system) { - @include fill( $bg: $kendo-grid-sticky-alt-bg ); - - &::before { - @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); - } - } @else { - @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); - } - } - - - // Hovered state - &:hover .k-grid-content-sticky, - &:hover .k-grid-row-sticky, - &:hover.k-grid-row-sticky > .k-table-td, - &.k-hover .k-grid-content-sticky, - &.k-hover .k-grid-row-sticky, - &.k-hover.k-grid-row-sticky > .k-table-td { - background-color: $kendo-grid-sticky-hover-bg; - } - - - // Selected hover - &.k-selected:hover td.k-grid-content-sticky, - &.k-selected:hover .k-table-td.k-grid-row-sticky, - &.k-selected:hover.k-grid-row-sticky > .k-table-td, - &.k-selected.k-hover td.k-grid-content-sticky, - &.k-selected.k-hover .k-table-td.k-grid-row-sticky, - &.k-selected.k-hover.k-grid-row-sticky > .k-table-td, - &:hover td.k-grid-content-sticky.k-selected, - &.k-hover td.k-grid-content-sticky.k-selected, - &:hover .k-table-td.k-grid-content-sticky.k-selected, - &.k-hover .k-table-td.k-grid-content-sticky.k-selected { - @if($kendo-enable-color-system) { - background-color: $kendo-grid-sticky-hover-bg; - - &::before { - background-color: $kendo-grid-sticky-selected-hover-bg; - } - } @else { - background-color: $kendo-grid-sticky-selected-hover-bg; - } - } - } - - .k-grouping-row { - .k-grid-content-sticky { - @include fill( $bg: $kendo-grid-sticky-header-bg ); - } - - &:hover .k-grid-content-sticky, - &.k-hover .k-grid-content-sticky { - @include fill( $bg: $kendo-grid-sticky-hover-bg ); - } - } - - .k-column-list-item:hover, - .k-columnmenu-item:hover { - @include fill( - $kendo-list-item-hover-text, - $kendo-list-item-hover-bg - ); - } - .k-column-list-item:focus, - .k-column-list-item.k-focus, - .k-columnmenu-item:focus, - .k-columnmenu-item.k-focus { - @include focus-indicator( $kendo-list-item-focus-shadow, true ); - } - - .k-columnmenu-item { - &.k-selected { - @include fill( - $kendo-list-item-selected-text, - $kendo-list-item-selected-bg - ); - } - } - - .k-column-menu { - - .k-menu:not(.k-context-menu) { - - @include fill( - $kendo-popup-text, - $kendo-popup-bg, - $kendo-popup-border - ); - - .k-item { - @include fill( - $kendo-list-item-text, - $kendo-list-item-bg - ); - - &:hover, - &.k-hover { - @include fill( - $kendo-list-item-hover-text, - $kendo-list-item-hover-bg - ); - } - - &.k-selected { - @include fill( - $kendo-list-item-selected-text, - $kendo-list-item-selected-bg - ); - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-list-item-focus-shadow, true ); - } - } - } - } - .k-column-menu-tabbed { - background-color: $kendo-grid-column-menu-tabbed-bg; - } - - .k-column-menu-group-header-text { - @include fill( - $kendo-grid-column-menu-group-header-text, - $kendo-grid-column-menu-group-header-bg, - $kendo-grid-column-menu-group-header-border - ); - } - - .k-check-all-wrap { - @include fill( $border: $kendo-popup-border ); - } - - .k-grid-norecords-template { - background-color: $kendo-grid-bg; - border-color: $kendo-grid-border; - } - - // Row resizing - .k-resizer-wrap { - - &.k-hover .k-row-resizer { - @include fill( $bg: $kendo-grid-row-resizer-hover-bg ); - } - - &.k-active .k-row-resizer { - @include fill( $bg: $kendo-grid-row-resizer-active-bg ); - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/grid/_theme.scss" as *; @mixin kendo-grid--theme() { diff --git a/packages/default/scss/grid/_variables.scss b/packages/default/scss/grid/_variables.scss index d17033801aa..75cc16bd71a 100644 --- a/packages/default/scss/grid/_variables.scss +++ b/packages/default/scss/grid/_variables.scss @@ -326,3 +326,149 @@ $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default; /// The height of the Grid row resize indicator. /// @group grid $kendo-grid-row-resizer-height: k-spacing(0.5) !default; + +@forward "@progress/kendo-theme-core/scss/components/grid/_variables.scss" with ( + $kendo-grid-border-width: $kendo-grid-border-width, + $kendo-grid-font-family: $kendo-grid-font-family, + $kendo-grid-font-size: $kendo-grid-font-size, + $kendo-grid-line-height: $kendo-grid-line-height, + $kendo-grid-padding-x: $kendo-grid-padding-x, + $kendo-grid-padding-y: $kendo-grid-padding-y, + $kendo-grid-header-padding-x: $kendo-grid-header-padding-x, + $kendo-grid-header-padding-y: $kendo-grid-header-padding-y, + $kendo-grid-grouping-header-padding-x: $kendo-grid-grouping-header-padding-x, + $kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-y, + $kendo-grid-cell-padding-x: $kendo-grid-cell-padding-x, + $kendo-grid-cell-padding-y: $kendo-grid-cell-padding-y, + $kendo-grid-filter-cell-padding-x: $kendo-grid-filter-cell-padding-x, + $kendo-grid-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y, + $kendo-grid-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x, + $kendo-grid-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y, + $kendo-grid-group-drop-hint-size: $kendo-grid-group-drop-hint-size, + $kendo-grid-group-drop-hint-line-size: $kendo-grid-group-drop-hint-line-size, + $kendo-grid-group-drop-hint-height: $kendo-grid-group-drop-hint-height, + $kendo-grid-group-drop-hint-top: $kendo-grid-group-drop-hint-top, + $kendo-grid-sm-padding-x: $kendo-grid-sm-padding-x, + $kendo-grid-sm-padding-y: $kendo-grid-sm-padding-y, + $kendo-grid-sm-header-padding-x: $kendo-grid-sm-header-padding-x, + $kendo-grid-sm-header-padding-y: $kendo-grid-sm-header-padding-y, + $kendo-grid-sm-grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x, + $kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y, + $kendo-grid-sm-cell-padding-x: $kendo-grid-sm-cell-padding-x, + $kendo-grid-sm-cell-padding-y: $kendo-grid-sm-cell-padding-y, + $kendo-grid-sm-filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x, + $kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y, + $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x, + $kendo-grid-sm-edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y, + $kendo-grid-sm-group-dropclue-height: $kendo-grid-sm-group-dropclue-height, + $kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x, + $kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y, + $kendo-grid-md-padding-x: $kendo-grid-md-padding-x, + $kendo-grid-md-padding-y: $kendo-grid-md-padding-y, + $kendo-grid-md-header-padding-x: $kendo-grid-md-header-padding-x, + $kendo-grid-md-header-padding-y: $kendo-grid-md-header-padding-y, + $kendo-grid-md-grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x, + $kendo-grid-md-grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y, + $kendo-grid-md-cell-padding-x: $kendo-grid-md-cell-padding-x, + $kendo-grid-md-cell-padding-y: $kendo-grid-md-cell-padding-y, + $kendo-grid-md-filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x, + $kendo-grid-md-filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y, + $kendo-grid-md-edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x, + $kendo-grid-md-edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y, + $kendo-grid-md-group-dropclue-height: $kendo-grid-md-group-dropclue-height, + $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x, + $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y, + $kendo-grid-sizes: $kendo-grid-sizes, + $kendo-grid-header-font-size: $kendo-grid-header-font-size, + $kendo-grid-header-first-border: $kendo-grid-header-first-border, + $kendo-grid-header-menu-icon-spacing: $kendo-grid-header-menu-icon-spacing, + $kendo-grid-filterable-icon-spacing: $kendo-grid-filterable-icon-spacing, + $kendo-grid-toolbar-border-width: $kendo-grid-toolbar-border-width, + $kendo-grid-cell-horizontal-border-width: $kendo-grid-cell-horizontal-border-width, + $kendo-grid-cell-vertical-border-width: $kendo-grid-cell-vertical-border-width, + $kendo-grid-bg: $kendo-grid-bg, + $kendo-grid-text: $kendo-grid-text, + $kendo-grid-border: $kendo-grid-border, + $kendo-grid-header-bg: $kendo-grid-header-bg, + $kendo-grid-header-text: $kendo-grid-header-text, + $kendo-grid-header-border: $kendo-grid-header-border, + $kendo-grid-header-gradient: $kendo-grid-header-gradient, + $kendo-grid-footer-bg: $kendo-grid-footer-bg, + $kendo-grid-footer-text: $kendo-grid-footer-text, + $kendo-grid-footer-border: $kendo-grid-footer-border, + $kendo-grid-alt-bg: $kendo-grid-alt-bg, + $kendo-grid-alt-text: $kendo-grid-alt-text, + $kendo-grid-alt-border: $kendo-grid-alt-border, + $kendo-grid-hover-bg: $kendo-grid-hover-bg, + $kendo-grid-hover-text: $kendo-grid-hover-text, + $kendo-grid-hover-border: $kendo-grid-hover-border, + $kendo-grid-selected-bg: $kendo-grid-selected-bg, + $kendo-grid-selected-text: $kendo-grid-selected-text, + $kendo-grid-selected-border: $kendo-grid-selected-border, + $kendo-grid-selection-aggregates-bg: $kendo-grid-selection-aggregates-bg, + $kendo-grid-selection-aggregates-text: $kendo-grid-selection-aggregates-text, + $kendo-grid-selection-aggregates-border: $kendo-grid-selection-aggregates-border, + $kendo-grid-selection-aggregates-border-width: $kendo-grid-selection-aggregates-border-width, + $kendo-grid-selection-aggregates-spacing: $kendo-grid-selection-aggregates-spacing, + $kendo-grid-selection-aggregates-line-height: $kendo-grid-selection-aggregates-line-height, + $kendo-grid-selection-aggregates-font-weight: $kendo-grid-selection-aggregates-font-weight, + $kendo-grid-grouping-row-bg: $kendo-grid-grouping-row-bg, + $kendo-grid-grouping-row-text: $kendo-grid-grouping-row-text, + $kendo-grid-sorted-icon-spacing: $kendo-grid-sorted-icon-spacing, + $kendo-grid-sorted-bg: $kendo-grid-sorted-bg, + $kendo-grid-sorting-indicator-text: $kendo-grid-sorting-indicator-text, + $kendo-grid-sorting-index-font-size: $kendo-grid-sorting-index-font-size, + $kendo-grid-sorting-index-height: $kendo-grid-sorting-index-height, + $kendo-grid-sorting-index-spacing-y: $kendo-grid-sorting-index-spacing-y, + $kendo-grid-sorting-index-spacing-x: $kendo-grid-sorting-index-spacing-x, + $kendo-grid-focus-shadow: $kendo-grid-focus-shadow, + $kendo-grid-command-cell-button-spacing: $kendo-grid-command-cell-button-spacing, + $kendo-grid-command-cell-padding-y: $kendo-grid-command-cell-padding-y, + $kendo-grid-sticky-bg: $kendo-grid-sticky-bg, + $kendo-grid-sticky-text: $kendo-grid-sticky-text, + $kendo-grid-sticky-border: $kendo-grid-sticky-border, + $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-alt-bg, + $kendo-grid-sticky-header-bg: $kendo-grid-sticky-header-bg, + $kendo-grid-sticky-header-text: $kendo-grid-sticky-header-text, + $kendo-grid-sticky-header-border: $kendo-grid-sticky-header-border, + $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-footer-bg, + $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-hover-bg, + $kendo-grid-sticky-selected-bg: $kendo-grid-sticky-selected-bg, + $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-alt-bg, + $kendo-grid-sticky-hover-bg: $kendo-grid-sticky-hover-bg, + $kendo-grid-sticky-selected-hover-bg: $kendo-grid-sticky-selected-hover-bg, + $kendo-grid-column-menu-width: $kendo-grid-column-menu-width, + $kendo-grid-column-menu-max-width: $kendo-grid-column-menu-max-width, + $kendo-grid-filter-menu-check-all-border-bottom-width: $kendo-grid-filter-menu-check-all-border-bottom-width, + $kendo-grid-filter-menu-item-spacing-x: $kendo-grid-filter-menu-item-spacing-x, + $kendo-grid-filter-menu-item-spacing-y: $kendo-grid-filter-menu-item-spacing-y, + $kendo-grid-column-menu-popup-padding-x: $kendo-grid-column-menu-popup-padding-x, + $kendo-grid-column-menu-popup-padding-y: $kendo-grid-column-menu-popup-padding-y, + $kendo-grid-column-menu-item-padding-x: $kendo-grid-column-menu-item-padding-x, + $kendo-grid-column-menu-item-padding-y: $kendo-grid-column-menu-item-padding-y, + $kendo-grid-column-menu-list-item-padding-x: $kendo-grid-column-menu-list-item-padding-x, + $kendo-grid-column-menu-list-item-padding-y: $kendo-grid-column-menu-list-item-padding-y, + $kendo-grid-column-menu-items-wrap-padding-x: $kendo-grid-column-menu-items-wrap-padding-x, + $kendo-grid-column-menu-items-wrap-padding-y: $kendo-grid-column-menu-items-wrap-padding-y, + $kendo-grid-column-menu-group-header-padding-x: $kendo-grid-column-menu-group-header-padding-x, + $kendo-grid-column-menu-group-header-padding-y: $kendo-grid-column-menu-group-header-padding-y, + $kendo-grid-column-menu-group-header-font-size: $kendo-grid-column-menu-group-header-font-size, + $kendo-grid-column-menu-group-header-line-height: $kendo-grid-column-menu-group-header-line-height, + $kendo-grid-column-menu-group-header-text-transform: $kendo-grid-column-menu-group-header-text-transform, + $kendo-grid-column-menu-group-header-border-bottom-width: $kendo-grid-column-menu-group-header-border-bottom-width, + $kendo-grid-column-menu-group-header-bg: $kendo-grid-column-menu-group-header-bg, + $kendo-grid-column-menu-group-header-text: $kendo-grid-column-menu-group-header-text, + $kendo-grid-column-menu-group-header-border: $kendo-grid-column-menu-group-header-border, + $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x, + $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y, + $kendo-grid-column-menu-tabbed-bg: $kendo-grid-column-menu-tabbed-bg, + $kendo-grid-drag-cell-width: $kendo-grid-drag-cell-width, + $kendo-grid-row-inner-height: $kendo-grid-row-inner-height, + $kendo-grid-hierarchy-col-width: $kendo-grid-hierarchy-col-width, + $kendo-grid-grouping-row-border-top: $kendo-grid-grouping-row-border-top, + $kendo-grid-group-footer-border-y: $kendo-grid-group-footer-border-y, + $kendo-grid-group-footer-second-cell-border: $kendo-grid-group-footer-second-cell-border, + $kendo-grid-row-resizer-hover-bg: $kendo-grid-row-resizer-hover-bg, + $kendo-grid-row-resizer-active-bg: $kendo-grid-row-resizer-active-bg, + $kendo-grid-row-resizer-height: $kendo-grid-row-resizer-height +); diff --git a/packages/default/scss/gridlayout/_layout.scss b/packages/default/scss/gridlayout/_layout.scss index 72ebefe247d..3ecb374bb53 100644 --- a/packages/default/scss/gridlayout/_layout.scss +++ b/packages/default/scss/gridlayout/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-grid-layout--layout-base() { - - // GridLayout - .k-grid-layout {} - -} +@use "@progress/kendo-theme-core/scss/components/gridlayout/_layout.scss" as *; @mixin kendo-grid-layout--layout() { @include kendo-grid-layout--layout-base(); diff --git a/packages/default/scss/gridlayout/_theme.scss b/packages/default/scss/gridlayout/_theme.scss index 877db4c8fd4..183314941ae 100644 --- a/packages/default/scss/gridlayout/_theme.scss +++ b/packages/default/scss/gridlayout/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-grid-layout--theme-base() { - - // GridLayout - .k-grid-layout {} - -} +@use "@progress/kendo-theme-core/scss/components/gridlayout/_theme.scss" as *; @mixin kendo-grid-layout--theme() { @include kendo-grid-layout--theme-base(); diff --git a/packages/default/scss/icons/_layout.scss b/packages/default/scss/icons/_layout.scss index 9e17c5268eb..e3da5795c92 100644 --- a/packages/default/scss/icons/_layout.scss +++ b/packages/default/scss/icons/_layout.scss @@ -1,83 +1,4 @@ -@use "./_variables.scss" as *; - -@use "@progress/kendo-svg-icons/scss/index.scss" as * with ( - $ki-icon-size: $kendo-icon-size -); - -@mixin kendo-icon--layout-base() { - - @include kendo-svg-icon-styles(); - - // Icon wrap - .k-icon-wrap { - flex: none; - display: inline-flex; - flex-flow: row nowrap; - gap: 0; - align-items: center; - align-self: flex-start; - vertical-align: middle; - position: relative; - - &::before { - content: "\200b"; - width: 0; - overflow: hidden; - flex: none; - display: inline-block; - vertical-align: top; - } - } - - // kendo-icon-wrapper component - .k-icon-wrapper-host { - display: contents; - } - - .k-icon-with-modifier { - position: relative; - margin: .25em; - } - - .k-icon.k-icon-modifier { - width: 1em; - height: 1em; - position: absolute; - font-size: .5em; - bottom: 0; - right: 0; - margin: 0 -.5em -.5em 0; - } - - .k-i-none::before { - content: ""; - display: none; - } - - .k-icon-action { - display: inline-flex; - padding: $kendo-icon-padding; - line-height: 1; - align-items: center; - vertical-align: middle; - cursor: pointer; - } - - .k-sprite { - display: inline-block; - width: 16px; - height: 16px; - overflow: hidden; - background-repeat: no-repeat; - font-size: 0; - line-height: 0; - text-align: center; - } - - .k-image { - display: inline-block; - } -} +@use "@progress/kendo-theme-core/scss/components/icons/_layout.scss" as *; @mixin kendo-icon--layout() { diff --git a/packages/default/scss/icons/_theme.scss b/packages/default/scss/icons/_theme.scss index d717fc555b2..c9404672448 100644 --- a/packages/default/scss/icons/_theme.scss +++ b/packages/default/scss/icons/_theme.scss @@ -1,4 +1,4 @@ -@mixin kendo-icon--theme-base() {} +@use "@progress/kendo-theme-core/scss/components/icons/_theme.scss" as *; @mixin kendo-icon--theme() { diff --git a/packages/default/scss/icons/_variables.scss b/packages/default/scss/icons/_variables.scss index 507213b9cc8..2a8cbb16b6d 100644 --- a/packages/default/scss/icons/_variables.scss +++ b/packages/default/scss/icons/_variables.scss @@ -30,3 +30,16 @@ $kendo-icon-spacing: k-spacing(1) !default; /// The default icon padding. /// @group icon $kendo-icon-padding: k-spacing(1) !default; + +@forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with ( + $kendo-icon-size: $kendo-icon-size, + $kendo-icon-size-xs: $kendo-icon-size-xs, + $kendo-icon-size-sm: $kendo-icon-size-sm, + $kendo-icon-size-md: $kendo-icon-size-md, + $kendo-icon-size-lg: $kendo-icon-size-lg, + $kendo-icon-size-xl: $kendo-icon-size-xl, + $kendo-icon-size-xxl: $kendo-icon-size-xxl, + $kendo-icon-size-xxxl: $kendo-icon-size-xxxl, + $kendo-icon-spacing: $kendo-icon-spacing, + $kendo-icon-padding: $kendo-icon-padding +); diff --git a/packages/default/scss/imageeditor/_layout.scss b/packages/default/scss/imageeditor/_layout.scss index 4c83f5905fc..dc7389b80a8 100644 --- a/packages/default/scss/imageeditor/_layout.scss +++ b/packages/default/scss/imageeditor/_layout.scss @@ -1,163 +1,4 @@ -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../toolbar/_variables.scss" as *; - -@mixin kendo-image-editor--layout-base() { - - // Image Editor - .k-imageeditor { - margin-block: $kendo-image-editor-margin-y; - margin-inline: $kendo-image-editor-margin-x; - padding-block: $kendo-image-editor-padding-y; - padding-inline: $kendo-image-editor-padding-x; - border-width: $kendo-image-editor-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-image-editor-font-family; - font-size: $kendo-image-editor-font-size; - line-height: $kendo-image-editor-line-height; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Image editor toolbar - .k-imageeditor-toolbar { - border-width: 0; - border-bottom-width: $kendo-toolbar-border-width; - } - - - // Content - .k-imageeditor-content { - border-width: 0; - border-style: solid; - border-color: inherit; - display: flex; - flex-flow: row nowrap; - } - - - // Canvas - .k-imageeditor-canvas-container { - flex: 1 1 100%; - display: flex; - flex-flow: row nowrap; - overflow: auto; - } - .k-imageeditor-canvas { - margin: auto; - display: flex; - flex-direction: column; - position: relative; - } - - - // Action Pane - .k-imageeditor-action-pane { - padding-block: $kendo-image-editor-action-pane-padding-y; - padding-inline: $kendo-image-editor-action-pane-padding-x; - width: $kendo-image-editor-action-pane-width; - border-width: 0; - border-left-width: $kendo-image-editor-content-border-width; - border-style: solid; - border-color: inherit; - box-sizing: border-box; - flex: none; - overflow-y: auto; - - .k-input-inner, - .k-input-value-text { - text-overflow: clip; - } - } - - - // Crop Tool - .k-imageeditor-crop-overlay { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - } - - .k-imageeditor-crop { - width: 100%; - height: 100%; - border-width: $kendo-image-editor-crop-border-width; - border-style: $kendo-image-editor-crop-border-style; - box-sizing: border-box; - position: absolute; - - .k-resize-handle { - margin-block: $kendo-image-editor-resize-handle-margin-y; - margin-inline: $kendo-image-editor-resize-handle-margin-x; - border-style: solid; - border-width: $kendo-image-editor-resize-handle-border-width; - } - - .k-resize-sw, - .k-resize-se, - .k-resize-nw, - .k-resize-ne { - width: $kendo-image-editor-resize-handle-size; - height: $kendo-image-editor-resize-handle-size; - } - - .k-resize-n, - .k-resize-s { - left: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) ); - width: $kendo-image-editor-resize-handle-size; - height: 0; - } - - .k-resize-w, - .k-resize-e { - top: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) ); - width: 0; - height: $kendo-image-editor-resize-handle-size; - } - - .k-resize-ne { - transform: rotate(-90deg); - } - - .k-resize-nw { - transform: rotate(-180deg); - } - - - .k-resize-sw { - transform: rotate(90deg); - } - - .k-resize-n { - top: 0; - } - - .k-resize-s { - bottom: 0; - } - - .k-resize-w { - left: 0; - } - - .k-resize-e { - right: 0; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/imageeditor/_layout.scss" as *; @mixin kendo-image-editor--layout() { diff --git a/packages/default/scss/imageeditor/_theme.scss b/packages/default/scss/imageeditor/_theme.scss index 1b71e78e100..58b89fd1bdb 100644 --- a/packages/default/scss/imageeditor/_theme.scss +++ b/packages/default/scss/imageeditor/_theme.scss @@ -1,57 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-image-editor--theme-base() { - - // Image Editor - .k-imageeditor { - @include fill( - $kendo-image-editor-text, - $kendo-image-editor-bg, - $kendo-image-editor-border - ); - } - - // Content - .k-imageeditor-content { - @include fill( - $kendo-image-editor-content-text, - $kendo-image-editor-content-bg, - $kendo-image-editor-content-border - ); - } - - // Canvas - .k-imageeditor-canvas { - @include checkerboard-gradient(); - } - - // Action Pane - .k-imageeditor-action-pane { - @include fill( - $kendo-image-editor-action-pane-text, - $kendo-image-editor-action-pane-bg, - $kendo-image-editor-action-pane-border - ); - } - - // Crop Tool - .k-imageeditor-crop { - @include fill( - $kendo-image-editor-crop-text, - $kendo-image-editor-crop-bg, - $kendo-image-editor-crop-border - ); - } - - // Crop Overlay - .k-imageeditor-crop-overlay { - @include fill ( - $bg: $kendo-image-editor-crop-overlay-bg - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/imageeditor/_theme.scss" as *; @mixin kendo-image-editor--theme() { diff --git a/packages/default/scss/imageeditor/_variables.scss b/packages/default/scss/imageeditor/_variables.scss index cc7e5a1e749..71de73459b6 100644 --- a/packages/default/scss/imageeditor/_variables.scss +++ b/packages/default/scss/imageeditor/_variables.scss @@ -42,3 +42,37 @@ $kendo-image-editor-crop-text: null !default; $kendo-image-editor-crop-border: white !default; $kendo-image-editor-crop-overlay-bg: rgba(black, .3) !default; + +@forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with ( + $kendo-image-editor-margin-y: $kendo-image-editor-margin-y, + $kendo-image-editor-margin-x: $kendo-image-editor-margin-x, + $kendo-image-editor-padding-y: $kendo-image-editor-padding-y, + $kendo-image-editor-padding-x: $kendo-image-editor-padding-x, + $kendo-image-editor-border-width: $kendo-image-editor-border-width, + $kendo-image-editor-font-size: $kendo-image-editor-font-size, + $kendo-image-editor-line-height: $kendo-image-editor-line-height, + $kendo-image-editor-font-family: $kendo-image-editor-font-family, + $kendo-image-editor-content-border-width: $kendo-image-editor-content-border-width, + $kendo-image-editor-action-pane-padding-y: $kendo-image-editor-action-pane-padding-y, + $kendo-image-editor-action-pane-padding-x: $kendo-image-editor-action-pane-padding-x, + $kendo-image-editor-action-pane-width: $kendo-image-editor-action-pane-width, + $kendo-image-editor-crop-border-width: $kendo-image-editor-crop-border-width, + $kendo-image-editor-crop-border-style: $kendo-image-editor-crop-border-style, + $kendo-image-editor-resize-handle-margin-x: $kendo-image-editor-resize-handle-margin-x, + $kendo-image-editor-resize-handle-margin-y: $kendo-image-editor-resize-handle-margin-y, + $kendo-image-editor-resize-handle-border-width: $kendo-image-editor-resize-handle-border-width, + $kendo-image-editor-resize-handle-size: $kendo-image-editor-resize-handle-size, + $kendo-image-editor-bg: $kendo-image-editor-bg, + $kendo-image-editor-text: $kendo-image-editor-text, + $kendo-image-editor-border: $kendo-image-editor-border, + $kendo-image-editor-content-bg: $kendo-image-editor-content-bg, + $kendo-image-editor-content-text: $kendo-image-editor-content-text, + $kendo-image-editor-content-border: $kendo-image-editor-content-border, + $kendo-image-editor-action-pane-bg: $kendo-image-editor-action-pane-bg, + $kendo-image-editor-action-pane-text: $kendo-image-editor-action-pane-text, + $kendo-image-editor-action-pane-border: $kendo-image-editor-action-pane-border, + $kendo-image-editor-crop-bg: $kendo-image-editor-crop-bg, + $kendo-image-editor-crop-text: $kendo-image-editor-crop-text, + $kendo-image-editor-crop-border: $kendo-image-editor-crop-border, + $kendo-image-editor-crop-overlay-bg: $kendo-image-editor-crop-overlay-bg +); diff --git a/packages/default/scss/input/_layout.scss b/packages/default/scss/input/_layout.scss index e9e5d439dad..45fc7f15eff 100644 --- a/packages/default/scss/input/_layout.scss +++ b/packages/default/scss/input/_layout.scss @@ -1,589 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-input--layout-base() { - - // Generic input - .k-input, - .k-picker { - @include border-radius( $kendo-input-border-radius ); - margin: 0; - padding: 0; - width: $kendo-input-default-width; - min-width: 0; - box-sizing: border-box; - border-width: $kendo-input-border-width; - border-style: solid; - outline: 0; - font-family: $kendo-input-font-family; - font-size: $kendo-input-font-size; - line-height: $kendo-input-line-height; - font-weight: normal; - text-align: start; - box-shadow: none; - display: inline-flex; - flex-flow: row nowrap; - align-items: stretch; - vertical-align: middle; - position: relative; - overflow: hidden; - text-overflow: ellipsis; - -webkit-appearance: none; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - > .k-input, - > .k-picker { - border-width: 0 !important; // stylelint-disable-line declaration-no-important - color: inherit; - background: none; - font: inherit; - outline: 0; - box-shadow: none; - } - - // fix for Safari - & > * { - margin: 0; - } - - &::placeholder { - color: $kendo-input-placeholder-text; - opacity: $kendo-input-placeholder-opacity; - user-select: none; - } - } - - // Input and Textarea - .k-input {} - input.k-input, - textarea.k-textarea { - padding-block: $kendo-input-padding-y; - padding-inline: $kendo-input-padding-x; - - &:disabled, - &[disabled] { - @include disabled( $kendo-disabled-styling... ); - } - } - - :is([disabled], .k-disabled) :is(input.k-input, textarea.k-textarea):is(:disabled, [disabled]) { - opacity: 1; - filter: grayscale(0); - } - - textarea.k-textarea { - overflow: auto; - } - - - // Picker - .k-picker { - cursor: pointer; - } - select.k-picker { - padding-block: $kendo-input-padding-y; - padding-inline: $kendo-input-padding-x; - appearance: auto; - align-items: center; - - &:disabled, - &[disabled] { - @include disabled( $kendo-disabled-styling... ); - } - } - - :is([disabled], .k-disabled) select.k-picker:is(:disabled, [disabled]) { - opacity: 1; - filter: grayscale(0); - } - - - // Input inner - .k-input-inner { - padding-block: $kendo-input-padding-y; - padding-inline: $kendo-input-padding-x; - width: 100%; - border: 0; - outline: 0; - color: inherit; - background: none; - font: inherit; - flex: 1; - position: relative; - z-index: 1; - overflow: hidden; - text-overflow: ellipsis; - -webkit-appearance: none; - - // Placeholder text - &::placeholder { - color: $kendo-input-placeholder-text; - opacity: $kendo-input-placeholder-opacity; - user-select: none; - } - - // Invalid - &:invalid { - box-shadow: none; - } - } - span.k-input-inner { - white-space: nowrap; - display: flex; - flex-flow: row nowrap; - align-items: center; - } - textarea.k-input-inner { - margin: 0; - } - - - // Input value - .k-input-value-icon { - flex: none; - } - .k-input-value-text { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - } - .k-input-value-text::before { - content: "\200b"; - width: 0px; - overflow: hidden; - flex: none; - display: inline-block; - vertical-align: top; - } - - - // Input multiple values - .k-input-values { - min-width: 0px; - width: 100%; - display: flex; - flex-flow: row wrap; - align-items: center; - cursor: text; - } - .k-input-values .k-chip-list { - display: contents; - } - - - // Icon picker - .k-icon-picker { - .k-input-inner { - padding: $kendo-input-padding-y; - // TODO we need better way - // width: $kendo-input-inner-calc-height; - // height: $kendo-input-inner-calc-height; - justify-content: center; - } - } - - - // Input prefix and suffix - .k-input-prefix, - .k-input-suffix { - border-color: inherit; - display: flex; - align-items: center; - flex: none; - - > * { - flex-shrink: 0; - border: none; - } - - &-vertical { - flex-flow: column wrap; - } - - &-horizontal { - flex-flow: row wrap; - } - } - - - // Input separator - .k-input-separator { - margin: 0; - border-style: solid; - border-color: inherit; - border-width: 0 0 0 1px; - height: $kendo-icon-size; - align-self: center; - - &-horizontal { - height: auto; - margin-inline: $kendo-input-md-padding-y; - align-self: stretch; - border-width: 1px 0 0; - } - - &-vertical { - height: auto; - margin-block: $kendo-input-md-padding-y; - align-self: stretch; - border-width: 0 0 0 1px; - } - } - - // Input group - .k-input-group { - margin: 0; - padding: 0; - border-width: 0; - box-sizing: border-box; - list-style: none; - outline: 0; - display: inline-flex; - flex-flow: row nowrap; - vertical-align: middle; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - > .k-input + .k-input { - margin-inline-start: if( $kendo-input-border-width == 0, null, -$kendo-input-border-width ); - } - - > .k-input:hover, - > .k-input.k-hover, - > .k-input:focus, - > .k-input:focus-within, - > .k-input.k-focus, - > .k-input:active, - > .k-input.k-active, - > .k-input.k-selected { - z-index: 2; - } - - .k-input:not(:first-child):not(:last-child) { - border-start-end-radius: 0; - border-end-end-radius: 0; - border-start-start-radius: 0; - border-end-start-radius: 0; - } - > .k-input:first-child:not(:only-child) { - border-start-end-radius: 0; - border-end-end-radius: 0; - } - > .k-input:last-child:not(:only-child) { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - - &:disabled, - &[disabled], - &.k-disabled { - opacity: 1; - filter: none; - } - } - - // Input with icon styles - .k-input-icon, - .k-input-validation-icon, - .k-input-loading-icon { - flex: none; - align-self: center; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - justify-content: center; - box-sizing: content-box; - } - - .k-input-loading-icon { - width: 1em; - height: 1em; - font-size: $kendo-icon-size; - } - - // Input with SVG icon - .k-input-icon, - .k-input-validation-icon, - .k-input-loading-icon { - &.k-svg-icon > svg, - &.k-icon-md > svg { - width: $kendo-icon-size-md; - height: $kendo-icon-size-md; - } - - &.k-icon-xs > svg { - width: $kendo-icon-size-xs; - height: $kendo-icon-size-xs; - } - - &.k-icon-sm > svg { - width: $kendo-icon-size-sm; - height: $kendo-icon-size-sm; - } - - &.k-icon-lg > svg { - width: $kendo-icon-size-lg; - height: $kendo-icon-size-lg; - } - - &.k-icon-xl > svg { - width: $kendo-icon-size-xl; - height: $kendo-icon-size-xl; - } - - &.k-icon-xxl > svg { - width: $kendo-icon-size-xxl; - height: $kendo-icon-size-xxl; - } - - &.k-icon-xxxl > svg { - width: $kendo-icon-size-xxxl; - height: $kendo-icon-size-xxxl; - } - } - - - // Clear value - .k-clear-value { - outline: 0; - color: $kendo-input-clear-value-text; - flex: none; - align-self: center; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: $kendo-input-clear-value-opacity; - } - .k-clear-value:hover, - .k-clear-value.k-hover { - color: $kendo-input-clear-value-hover-text; - opacity: $kendo-input-clear-value-hover-opacity; - } - .k-clear-value:focus-visible { - outline: 1px dotted; - outline-offset: -1px; - } - - - // Input button - .k-input-button { - width: if( $kendo-use-input-button-width, $kendo-input-button-width, auto ); - border-width: 0; - border-inline-start-width: $kendo-input-button-border-width; - flex: none; - aspect-ratio: auto; - box-shadow: none; - - > .k-button-icon { - min-width: auto !important; // stylelint-disable-line declaration-no-important - // min-height: auto !important; // stylelint-disable-line declaration-no-important - } - - &:focus { - box-shadow: none; - } - } - .k-picker .k-input-button { - color: inherit; - background: none; - border-color: transparent; - } - - - // Input spinner - .k-input-spinner { - width: if( $kendo-use-input-spinner-width, $kendo-input-spinner-width, auto ); - flex: none; - display: flex; - flex-flow: column nowrap; - - .k-spinner-increase, - .k-spinner-decrease { - border-width: 0; - border-inline-start-width: $kendo-input-button-border-width; - flex: 1 1 50%; - box-shadow: none; - position: relative; - aspect-ratio: auto; - - .k-button-icon { - margin-block: -1em; - margin-inline: 0; - min-width: auto !important; // stylelint-disable-line declaration-no-important - min-height: auto !important; // stylelint-disable-line declaration-no-important - } - } - .k-spinner-increase .k-icon { - bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto ); - } - .k-spinner-decrease .k-icon { - top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto ); - } - } - - - // Searchbar - .k-searchbar { - flex: 1 1 auto; - display: flex; - flex-flow: row nowrap; - } - - - // Legacy wrappers - .k-picker-wrap, - .k-dropdown-wrap, - .k-dateinput-wrap, - .k-multiselect-wrap, - .k-numeric-wrap { - width: 100%; - border-width: 0; - border-color: inherit; - box-sizing: border-box; - flex: 1 1 auto; - display: flex; - flex-flow: row nowrap; - overflow: hidden; - position: relative; - } - - - // Fill mode - .k-input-flat, - .k-picker-flat { - @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important - border-width: $kendo-input-border-width 0; - border-top-color: transparent !important; // stylelint-disable-line declaration-no-important - background-image: none !important; // stylelint-disable-line declaration-no-important - } - - .k-input-outline { - background: none !important; // stylelint-disable-line declaration-no-important - } - - - // Sizing - @each $size, $size-props in $kendo-input-sizes { - $_padding-x: map.get( $size-props, padding-x ); - $_padding-y: map.get( $size-props, padding-y ); - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_button-padding-x: map.get( $size-props, button-padding-x ); - $_button-padding-y: map.get( $size-props, button-padding-y ); - - .k-input-#{$size}, - .k-picker-#{$size} { - font-size: $_font-size; - line-height: $_line-height; - - .k-input-values { - padding: calc( #{$_padding-y} /2 ); - gap: calc( #{$_padding-y} / 2 ); - } - .k-input-values > .k-searchbar, - .k-input-values > .k-input-inner { - margin: calc( calc( #{$_padding-y} / 2 ) * -1 ); - } - - .k-input-inner { - padding-block: $_padding-y; - padding-inline: $_padding-x; - } - - .k-input-button, - .k-spinner-increase, - .k-spinner-decrease { - padding-block: $_button-padding-y; - padding-inline: $_button-padding-x; - } - - .k-input-icon, - .k-input-validation-icon, - .k-input-loading-icon, - .k-clear-value, - .k-input-prefix > .k-icon, - .k-input-prefix > .k-input-prefix-text, - .k-input-suffix > .k-icon, - .k-input-suffix > .k-input-suffix-text { - padding-block: $_padding-y; - padding-inline: $_padding-y; - box-sizing: content-box; - } - - .k-input-separator { - &-horizontal { - margin-inline: $_padding-y; - } - - &-vertical { - margin-block: $_padding-y; - } - } - - &.k-icon-picker .k-input-inner { - width: calc( ( #{ $_line-height} * 1em ) ); - height: calc( ( #{ $_line-height} * 1em ) ); - padding: $_padding-y; - box-sizing: content-box; - } - } - .k-dropdown-operator.k-picker-#{$size} { - .k-input-button { - padding: $_padding-y; - } - } - select.k-picker-#{$size} { - padding-block: $_padding-y; - padding-inline: $_padding-x; - } - } - - - // Angular specific - .k-input > kendo-popup, - .k-picker > kendo-popup { - position: fixed; - } - - - - - // This is needed for the textbox container to capture browser autofill - @keyframes autoFillStart { // stylelint-disable-line - from {} - to {} - } - @keyframes autoFillEnd { // stylelint-disable-line - from {} - to {} - } - - // Generic class for autofill animations - .k-autofill:-webkit-autofill { - animation-name: autoFillStart; - } - .k-autofill:not(:-webkit-autofill) { - animation-name: autoFillEnd; - } - - - .k-input:-webkit-autofill { - animation-name: autoFillStart; - } - .k-input:not(:-webkit-autofill) { - animation-name: autoFillEnd; - } - -} +@use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *; @mixin kendo-input--layout() { diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss index 6a93b5745bf..b873818e87d 100644 --- a/packages/default/scss/input/_theme.scss +++ b/packages/default/scss/input/_theme.scss @@ -1,515 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-input--theme-base() { - - // Solid input - .k-input-solid { - @include fill( - $kendo-input-text, - $kendo-input-bg, - $kendo-input-border - ); - @include box-shadow( $kendo-input-shadow ); - - // Hover - &:hover, - &.k-hover { - @include fill( - $kendo-input-hover-text, - $kendo-input-hover-bg, - $kendo-input-hover-border - ); - @include box-shadow( $kendo-input-hover-shadow ); - } - - // Focus - &:focus, - &.k-focus { - @include fill ( - $kendo-input-focus-text, - $kendo-input-focus-bg, - $kendo-input-focus-border - ); - @include focus-indicator( $kendo-input-focus-shadow ); - } - &:focus-within { - @include fill ( - $kendo-input-focus-text, - $kendo-input-focus-bg, - $kendo-input-focus-border - ); - @include focus-indicator( $kendo-input-focus-shadow ); - } - - // Disabled - &:disabled, - &[disabled], - &.k-disabled { - @include fill( - $kendo-input-disabled-text, - $kendo-input-disabled-bg, - $kendo-input-disabled-border, - $kendo-input-disabled-gradient - ); - @include box-shadow( $kendo-input-disabled-shadow ); - } - - // Invalid - &.k-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - @include fill( $border: $kendo-input-invalid-border ); - - .k-input-validation-icon { - color: $kendo-invalid-text; - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - &:focus-within { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - } - - // Prefix & Suffix - .k-input-prefix { - color: $kendo-input-prefix-text; - } - - .k-input-suffix { - color: $kendo-input-suffix-text; - } - - .k-input-separator { - border-color: $kendo-input-separator-text; - } - } - - - // Solid picker - .k-picker-solid { - @include fill( - $kendo-picker-text, - $kendo-picker-bg, - $kendo-picker-border, - $kendo-picker-gradient - ); - - // Hover - &:hover, - &.k-hover { - @include fill( - $kendo-picker-hover-text, - $kendo-picker-hover-bg, - $kendo-picker-hover-border, - $kendo-picker-hover-gradient - ); - @include box-shadow( $kendo-picker-hover-shadow ); - } - - // Focus - &:focus, - &.k-focus { - @include fill ( - $kendo-picker-focus-text, - $kendo-picker-focus-bg, - $kendo-picker-focus-border, - $kendo-picker-focus-gradient - ); - @include focus-indicator( $kendo-picker-focus-shadow ); - } - &:focus-within { - @include fill ( - $kendo-picker-focus-text, - $kendo-picker-focus-bg, - $kendo-picker-focus-border, - $kendo-picker-focus-gradient - ); - @include focus-indicator( $kendo-picker-focus-shadow ); - } - - // Disabled - &:disabled, - &[disabled], - &.k-disabled { - @include fill( - $kendo-picker-disabled-text, - $kendo-picker-disabled-bg, - $kendo-picker-disabled-border, - $kendo-picker-disabled-gradient - ); - @include box-shadow( $kendo-picker-disabled-shadow ); - } - - // Invalid - &.k-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - @include fill( $border: $kendo-input-invalid-border ); - - .k-input-validation-icon { - color: $kendo-invalid-text; - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - &:focus-within { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - } - } - - - // Outline input - .k-input-outline { - @include fill ( - $kendo-input-outline-text, - $kendo-input-outline-bg, - $kendo-input-outline-border - ); - - & > .k-input-button { - border-color: inherit; - } - - & > .k-input-spinner { - border-color: inherit; - - & > .k-spinner-increase, - & > .k-spinner-decrease { - border-color: inherit; - } - } - - // Hover - &:hover, - &.k-hover { - @include fill ( - $kendo-input-outline-hover-text, - $kendo-input-outline-hover-bg, - $kendo-input-outline-hover-border - ); - } - - // Focus - &:focus, - &.k-focus { - @include fill ( - $kendo-input-outline-focus-text, - $kendo-input-outline-focus-bg, - $kendo-input-outline-focus-border - ); - @include focus-indicator( $kendo-input-outline-focus-shadow ); - } - &:focus-within { - @include fill ( - $kendo-input-outline-focus-text, - $kendo-input-outline-focus-bg, - $kendo-input-outline-focus-border - ); - @include focus-indicator( $kendo-input-outline-focus-shadow ); - } - - // Disabled - &:disabled, - &[disabled], - &.k-disabled { - @include fill( - $kendo-input-disabled-text, - $kendo-input-disabled-bg, - $kendo-input-disabled-border, - $kendo-input-disabled-gradient - ); - @include box-shadow( $kendo-input-disabled-shadow ); - } - - // Invalid - &.k-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - @include fill( $border: $kendo-input-invalid-border ); - - .k-input-validation-icon { - color: $kendo-invalid-text; - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - &:focus-within { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - } - - // Prefix & Suffix - .k-input-prefix { - color: $kendo-input-prefix-text; - } - - .k-input-suffix { - color: $kendo-input-suffix-text; - } - - .k-input-separator { - border-color: $kendo-input-separator-text; - } - } - - - // Outline picker - .k-picker-outline { - @include fill ( - $kendo-picker-outline-text, - $kendo-picker-outline-bg, - $kendo-picker-outline-border - ); - - // Hover - &:hover, - &.k-hover { - @include fill ( - $kendo-picker-outline-hover-text, - $kendo-picker-outline-hover-bg, - $kendo-picker-outline-hover-border - ); - } - - // Focus - &:focus, - &.k-focus { - @include fill ( - $kendo-picker-outline-focus-text, - $kendo-picker-outline-focus-bg, - $kendo-picker-outline-focus-border - ); - @include focus-indicator( $kendo-picker-outline-focus-shadow ); - } - &:focus-within { - @include fill ( - $kendo-picker-outline-focus-text, - $kendo-picker-outline-focus-bg, - $kendo-picker-outline-focus-border - ); - @include focus-indicator( $kendo-picker-outline-focus-shadow ); - } - - &:focus:hover, - &:focus.k-hover, - &.k-focus:hover, - &.k-focus.k-hover { - @include fill ( - $kendo-picker-outline-hover-focus-text, - $kendo-picker-outline-hover-focus-bg, - $kendo-picker-outline-hover-focus-border - ); - } - - // Disabled - &:disabled, - &[disabled], - &.k-disabled { - @include fill( - $kendo-picker-disabled-text, - $kendo-picker-disabled-bg, - $kendo-picker-disabled-border, - $kendo-picker-disabled-gradient - ); - @include box-shadow( $kendo-picker-disabled-shadow ); - } - - // Invalid - &.k-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - @include fill( $border: $kendo-input-invalid-border ); - - .k-input-validation-icon { - color: $kendo-invalid-text; - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - &:focus-within { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - } - } - - - // Flat input - .k-input-flat { - @include fill ( - $kendo-input-flat-text, - $kendo-input-flat-bg, - $kendo-input-flat-border - ); - - // Hover - &:hover, - &.k-hover { - @include fill ( - $kendo-input-flat-hover-text, - $kendo-input-flat-hover-bg, - $kendo-input-flat-hover-border - ); - } - - // Focus - &:focus, - &.k-focus { - @include fill ( - $kendo-input-flat-focus-text, - $kendo-input-flat-focus-bg, - $kendo-input-flat-focus-border - ); - @include focus-indicator( $kendo-input-flat-focus-shadow ); - } - &:focus-within { - @include fill ( - $kendo-input-flat-focus-text, - $kendo-input-flat-focus-bg, - $kendo-input-flat-focus-border - ); - @include focus-indicator( $kendo-input-flat-focus-shadow ); - } - - // Disabled - &:disabled, - &[disabled], - &.k-disabled { - @include fill( - $kendo-input-disabled-text, - $kendo-input-disabled-bg, - $kendo-input-disabled-border, - $kendo-input-disabled-gradient - ); - @include box-shadow( $kendo-input-disabled-shadow ); - } - - // Invalid - &.k-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - @include fill( $border: $kendo-input-invalid-border ); - - .k-input-validation-icon { - color: $kendo-invalid-text; - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - &:focus-within { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - } - - // Prefix & Suffix - .k-input-prefix { - color: $kendo-input-prefix-text; - } - - .k-input-suffix { - color: $kendo-input-suffix-text; - } - - .k-input-separator { - border-color: $kendo-input-separator-text; - } - } - - - // Flat picker - .k-picker-flat { - @include fill ( - $kendo-picker-flat-text, - $kendo-picker-flat-bg, - $kendo-picker-flat-border - ); - - // Hover - &:hover, - &.k-hover { - @include fill ( - $kendo-picker-flat-hover-text, - $kendo-picker-flat-hover-bg, - $kendo-picker-flat-hover-border - ); - } - - // Focus - &:focus, - &.k-focus { - @include fill ( - $kendo-picker-flat-focus-text, - $kendo-picker-flat-focus-bg, - $kendo-picker-flat-focus-border - ); - @include focus-indicator( $kendo-picker-flat-focus-shadow ); - } - &:focus-within { - @include fill ( - $kendo-picker-flat-focus-text, - $kendo-picker-flat-focus-bg, - $kendo-picker-flat-focus-border - ); - @include focus-indicator( $kendo-picker-flat-focus-shadow ); - } - - &:focus:hover, - &:focus.k-hover, - &.k-focus:hover, - &.k-focus.k-hover { - @include fill ( - $kendo-picker-flat-hover-focus-text, - $kendo-picker-flat-hover-focus-bg, - $kendo-picker-flat-hover-focus-border - ); - } - - // Disabled - &:disabled, - &[disabled], - &.k-disabled { - @include fill( - $kendo-picker-disabled-text, - $kendo-picker-disabled-bg, - $kendo-picker-disabled-border, - $kendo-picker-disabled-gradient - ); - @include box-shadow( $kendo-picker-disabled-shadow ); - } - - // Invalid - &.k-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - @include fill( $border: $kendo-input-invalid-border ); - - .k-input-validation-icon { - color: $kendo-invalid-text; - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - &:focus-within { - @include focus-indicator( $kendo-input-invalid-shadow ); - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/input/_theme.scss" as *; @mixin kendo-input--theme() { diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss index d9bcf150370..44e3d50aa0f 100644 --- a/packages/default/scss/input/_variables.scss +++ b/packages/default/scss/input/_variables.scss @@ -290,13 +290,6 @@ $kendo-input-prefix-text: $kendo-subtle-text !default; /// @group input $kendo-input-suffix-text: $kendo-subtle-text !default; -/// The text color of the Input prefix. -/// @group input -$kendo-input-prefix-text: $kendo-subtle-text !default; -/// The text color of the Input suffix. -/// @group input -$kendo-input-suffix-text: $kendo-subtle-text !default; - /// The border color of the invalid Input components. /// @group input $kendo-input-invalid-border: $kendo-invalid-border !default; @@ -453,3 +446,135 @@ $kendo-picker-flat-hover-focus-text: null !default; /// The border color of the flat hovered and focused Picker components. /// @group picker $kendo-picker-flat-hover-focus-border: null !default; + +@forward "@progress/kendo-theme-core/scss/components/input/_variables.scss" with ( + $kendo-input-default-width: $kendo-input-default-width, + $kendo-input-border-width: $kendo-input-border-width, + $kendo-input-border-height: $kendo-input-border-height, + $kendo-input-border-radius: $kendo-input-border-radius, + $kendo-input-padding-x: $kendo-input-padding-x, + $kendo-input-sm-padding-x: $kendo-input-sm-padding-x, + $kendo-input-md-padding-x: $kendo-input-md-padding-x, + $kendo-input-lg-padding-x: $kendo-input-lg-padding-x, + $kendo-input-padding-y: $kendo-input-padding-y, + $kendo-input-sm-padding-y: $kendo-input-sm-padding-y, + $kendo-input-md-padding-y: $kendo-input-md-padding-y, + $kendo-input-lg-padding-y: $kendo-input-lg-padding-y, + $kendo-input-font-family: $kendo-input-font-family, + $kendo-input-font-size: $kendo-input-font-size, + $kendo-input-sm-font-size: $kendo-input-sm-font-size, + $kendo-input-md-font-size: $kendo-input-md-font-size, + $kendo-input-lg-font-size: $kendo-input-lg-font-size, + $kendo-input-line-height: $kendo-input-line-height, + $kendo-input-sm-line-height: $kendo-input-sm-line-height, + $kendo-input-md-line-height: $kendo-input-md-line-height, + $kendo-input-lg-line-height: $kendo-input-lg-line-height, + $kendo-input-calc-size: $kendo-input-calc-size, + $kendo-input-sm-calc-size: $kendo-input-sm-calc-size, + $kendo-input-md-calc-size: $kendo-input-md-calc-size, + $kendo-input-lg-calc-size: $kendo-input-lg-calc-size, + $kendo-input-sizes: $kendo-input-sizes, + $kendo-input-bg: $kendo-input-bg, + $kendo-input-text: $kendo-input-text, + $kendo-input-border: $kendo-input-border, + $kendo-input-shadow: $kendo-input-shadow, + $kendo-input-hover-bg: $kendo-input-hover-bg, + $kendo-input-hover-text: $kendo-input-hover-text, + $kendo-input-hover-border: $kendo-input-hover-border, + $kendo-input-hover-shadow: $kendo-input-hover-shadow, + $kendo-input-focus-bg: $kendo-input-focus-bg, + $kendo-input-focus-text: $kendo-input-focus-text, + $kendo-input-focus-border: $kendo-input-focus-border, + $kendo-input-focus-shadow: $kendo-input-focus-shadow, + $kendo-input-selected-bg: $kendo-input-selected-bg, + $kendo-input-selected-text: $kendo-input-selected-text, + $kendo-input-disabled-bg: $kendo-input-disabled-bg, + $kendo-input-disabled-text: $kendo-input-disabled-text, + $kendo-input-disabled-border: $kendo-input-disabled-border, + $kendo-input-disabled-gradient: $kendo-input-disabled-gradient, + $kendo-input-disabled-shadow: $kendo-input-disabled-shadow, + $kendo-input-outline-bg: $kendo-input-outline-bg, + $kendo-input-outline-text: $kendo-input-outline-text, + $kendo-input-outline-border: $kendo-input-outline-border, + $kendo-input-outline-hover-bg: $kendo-input-outline-hover-bg, + $kendo-input-outline-hover-text: $kendo-input-outline-hover-text, + $kendo-input-outline-hover-border: $kendo-input-outline-hover-border, + $kendo-input-outline-focus-bg: $kendo-input-outline-focus-bg, + $kendo-input-outline-focus-text: $kendo-input-outline-focus-text, + $kendo-input-outline-focus-border: $kendo-input-outline-focus-border, + $kendo-input-outline-focus-shadow: $kendo-input-outline-focus-shadow, + $kendo-input-flat-bg: $kendo-input-flat-bg, + $kendo-input-flat-text: $kendo-input-flat-text, + $kendo-input-flat-border: $kendo-input-flat-border, + $kendo-input-flat-hover-bg: $kendo-input-flat-hover-bg, + $kendo-input-flat-hover-text: $kendo-input-flat-hover-text, + $kendo-input-flat-hover-border: $kendo-input-flat-hover-border, + $kendo-input-flat-focus-bg: $kendo-input-flat-focus-bg, + $kendo-input-flat-focus-text: $kendo-input-flat-focus-text, + $kendo-input-flat-focus-border: $kendo-input-flat-focus-border, + $kendo-input-flat-focus-shadow: $kendo-input-flat-focus-shadow, + $kendo-input-placeholder-text: $kendo-input-placeholder-text, + $kendo-input-placeholder-opacity: $kendo-input-placeholder-opacity, + $kendo-input-clear-value-text: $kendo-input-clear-value-text, + $kendo-input-clear-value-opacity: $kendo-input-clear-value-opacity, + $kendo-input-clear-value-hover-text: $kendo-input-clear-value-hover-text, + $kendo-input-clear-value-hover-opacity: $kendo-input-clear-value-hover-opacity, + $kendo-input-values-margin-y: $kendo-input-values-margin-y, + $kendo-input-values-margin-x: $kendo-input-values-margin-x, + $kendo-input-button-width: $kendo-input-button-width, + $kendo-input-button-border-width: $kendo-input-button-border-width, + $kendo-input-spinner-width: $kendo-input-spinner-width, + $kendo-input-spinner-icon-offset: $kendo-input-spinner-icon-offset, + $kendo-input-separator-text: $kendo-input-separator-text, + $kendo-input-separator-opacity: $kendo-input-separator-opacity, + $kendo-input-prefix-text: $kendo-input-prefix-text, + $kendo-input-suffix-text: $kendo-input-suffix-text, + $kendo-input-invalid-border: $kendo-input-invalid-border, + $kendo-input-invalid-shadow: $kendo-input-invalid-shadow, + $kendo-picker-bg: $kendo-picker-bg, + $kendo-picker-text: $kendo-picker-text, + $kendo-picker-border: $kendo-picker-border, + $kendo-picker-gradient: $kendo-picker-gradient, + $kendo-picker-shadow: $kendo-picker-shadow, + $kendo-picker-hover-bg: $kendo-picker-hover-bg, + $kendo-picker-hover-text: $kendo-picker-hover-text, + $kendo-picker-hover-border: $kendo-picker-hover-border, + $kendo-picker-hover-gradient: $kendo-picker-hover-gradient, + $kendo-picker-hover-shadow: $kendo-picker-hover-shadow, + $kendo-picker-focus-bg: $kendo-picker-focus-bg, + $kendo-picker-focus-text: $kendo-picker-focus-text, + $kendo-picker-focus-border: $kendo-picker-focus-border, + $kendo-picker-focus-gradient: $kendo-picker-focus-gradient, + $kendo-picker-focus-shadow: $kendo-picker-focus-shadow, + $kendo-picker-disabled-bg: $kendo-picker-disabled-bg, + $kendo-picker-disabled-text: $kendo-picker-disabled-text, + $kendo-picker-disabled-border: $kendo-picker-disabled-border, + $kendo-picker-disabled-gradient: $kendo-picker-disabled-gradient, + $kendo-picker-disabled-shadow: $kendo-picker-disabled-shadow, + $kendo-picker-outline-bg: $kendo-picker-outline-bg, + $kendo-picker-outline-text: $kendo-picker-outline-text, + $kendo-picker-outline-border: $kendo-picker-outline-border, + $kendo-picker-outline-hover-bg: $kendo-picker-outline-hover-bg, + $kendo-picker-outline-hover-text: $kendo-picker-outline-hover-text, + $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-border, + $kendo-picker-outline-focus-bg: $kendo-picker-outline-focus-bg, + $kendo-picker-outline-focus-text: $kendo-picker-outline-focus-text, + $kendo-picker-outline-focus-border: $kendo-picker-outline-focus-border, + $kendo-picker-outline-focus-shadow: $kendo-picker-outline-focus-shadow, + $kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-focus-bg, + $kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-focus-text, + $kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-focus-border, + $kendo-picker-flat-bg: $kendo-picker-flat-bg, + $kendo-picker-flat-text: $kendo-picker-flat-text, + $kendo-picker-flat-border: $kendo-picker-flat-border, + $kendo-picker-flat-hover-bg: $kendo-picker-flat-hover-bg, + $kendo-picker-flat-hover-text: $kendo-picker-flat-hover-text, + $kendo-picker-flat-hover-border: $kendo-picker-flat-hover-border, + $kendo-picker-flat-focus-bg: $kendo-picker-flat-focus-bg, + $kendo-picker-flat-focus-text: $kendo-picker-flat-focus-text, + $kendo-picker-flat-focus-border: $kendo-picker-flat-focus-border, + $kendo-picker-flat-focus-shadow: $kendo-picker-flat-focus-shadow, + $kendo-picker-flat-hover-focus-bg: $kendo-picker-flat-hover-focus-bg, + $kendo-picker-flat-hover-focus-text: $kendo-picker-flat-hover-focus-text, + $kendo-picker-flat-hover-focus-border: $kendo-picker-flat-hover-focus-border +); diff --git a/packages/default/scss/list/_layout.scss b/packages/default/scss/list/_layout.scss index 8c0e70caa88..f30fa813767 100644 --- a/packages/default/scss/list/_layout.scss +++ b/packages/default/scss/list/_layout.scss @@ -1,249 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; -@use "../icons/_variables.scss" as *; -@use "sass:map"; - -@mixin kendo-list--layout-base() { - - // List container - .k-list-container { - display: flex; - flex-flow: column nowrap; - - > .k-list { - flex: 1; - height: 100%; - } - } - - // List - .k-list { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: $kendo-list-font-family; - font-size: $kendo-list-font-size; - line-height: $kendo-list-line-height; - display: flex; - flex-flow: column nowrap; - outline: none; - position: relative; - overflow: hidden; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // List in popup - .k-popup > .k-list { - height: 100%; - border-width: 0; - } - - - // List header - // .k-list-header, - .k-list-group-sticky-header { - padding-block: $kendo-list-header-padding-y; - padding-inline: $kendo-list-header-padding-x; - border-width: 0; - border-width: $kendo-list-header-border-width; - border-style: solid; - font-size: $kendo-list-header-font-size; - line-height: $kendo-list-header-line-height; - font-weight: $kendo-list-header-font-weight; - white-space: nowrap; - display: flex; - flex-flow: row nowrap; - align-items: center; - flex: none; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - } - - - // List content - .k-list-content { - border-color: inherit; - flex: 1 1 auto; - overflow: hidden; - overflow-y: auto; - position: relative; - } - - - // List UL - .k-list-ul { - margin: 0; - padding: 0; - border-width: 0; - border-color: inherit; - height: auto; - list-style: none; - } - - - // List item - .k-list-item { - padding-block: $kendo-list-item-padding-y; - padding-inline: $kendo-list-item-padding-x; - border: 0; - font-size: $kendo-list-item-font-size; - line-height: $kendo-list-item-line-height; - outline: none; - cursor: pointer; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - gap: $kendo-icon-spacing; - position: relative; - transition-property: color, background-color, outline-color, box-shadow; - transition-duration: 200ms; - transition-timing-function: ease; - - &.k-first::before { - content: ""; - border-width: 1px 0 0; - border-style: solid; - position: absolute; - top: 0; - left: 0; - right: 0; - } - } - .k-list-item-text, - .k-list-header-text, - .k-list-optionlabel { - &::before { - content: "\200b"; - width: 0px; - overflow: hidden; - } - } - .k-list-optionlabel { - @extend .k-list-item !optional; - column-gap: 0; - } - - - // List group item - .k-list-group-item { - padding-block: $kendo-list-group-item-padding-y; - padding-inline: $kendo-list-group-item-padding-x; - border-width: 0; - border-width: $kendo-list-group-item-border-width; - border-style: solid; - font-size: $kendo-list-group-item-font-size; - line-height: $kendo-list-group-item-line-height; - font-weight: $kendo-list-group-item-font-weight; - cursor: default; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - gap: $kendo-icon-spacing; - position: relative; - } - - - // List item group label - .k-list-item-group-label { - padding-block: 0; - padding-inline: .5em; - font-size: .75em; - position: absolute; - top: 0; - inset-inline-end: 0; - } - - - // Virtualization - .k-virtual-list {} - .k-virtual-content, - .k-virtual-list .k-list-content { - overflow-y: scroll; - } - .k-virtual-list .k-list-item, - .k-virtual-list .k-list-group-item, - .k-virtual-content .k-list-item, - .k-virtual-content .k-list-group-item { - position: absolute; - width: 100%; - } - .k-virtual-list .k-list-item-text, - .k-virtual-list .k-list-header-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .k-virtual-list .k-list-optionlabel { - position: relative; - } - - - // Filter - .k-list-filter { - display: block; - position: relative; - padding: $kendo-list-filter-padding; - box-sizing: border-box; - flex: none; - } - - - // Switch sizes - @each $size, $size-props in $kendo-list-sizes { - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_header-padding-x: map.get( $size-props, header-padding-x ); - $_header-padding-y: map.get( $size-props, header-padding-y ); - $_header-font-size: map.get( $size-props, header-font-size ); - $_header-line-height: map.get( $size-props, header-line-height ); - $_item-padding-x: map.get( $size-props, item-padding-x ); - $_item-padding-y: map.get( $size-props, item-padding-y ); - $_item-font-size: map.get( $size-props, item-font-size ); - $_item-line-height: map.get( $size-props, item-line-height ); - $_group-item-padding-x: map.get( $size-props, group-item-padding-x ); - $_group-item-padding-y: map.get( $size-props, group-item-padding-y ); - $_group-item-font-size: map.get( $size-props, group-item-font-size ); - $_group-item-line-height: map.get( $size-props, group-item-line-height ); - - .k-list-#{$size} { - font-size: $_font-size; - line-height: $_line-height; - - // .k-list-header, - .k-list-group-sticky-header { - padding-block: $_header-padding-y; - padding-inline: $_header-padding-x; - font-size: $_header-font-size; - line-height: $_header-line-height; - } - - .k-list-item { - padding-block: $_item-padding-y; - padding-inline: $_item-padding-x; - font-size: $_item-font-size; - line-height: $_item-line-height; - } - - .k-list-group-item { - padding-block: $_group-item-padding-y; - padding-inline: $_group-item-padding-x; - font-size: $_group-item-font-size; - line-height: $_group-item-line-height; - } - } - } -} +@use "@progress/kendo-theme-core/scss/components/list/_layout.scss" as *; @mixin kendo-list--layout() { diff --git a/packages/default/scss/list/_theme.scss b/packages/default/scss/list/_theme.scss index dcc191e5b03..51ae15e0676 100644 --- a/packages/default/scss/list/_theme.scss +++ b/packages/default/scss/list/_theme.scss @@ -1,98 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-list--theme-base() { - - // List - .k-list { - @include fill( - $kendo-list-text, - $kendo-list-bg, - $kendo-list-border - ); - } - - - // List header - // .k-list-header, - .k-list-group-sticky-header { - @include fill( - $kendo-list-header-text, - $kendo-list-header-bg, - $kendo-list-header-border, - ); - @include box-shadow( $kendo-list-header-shadow ); - } - - - // List item - .k-list-item { - @include fill( - $kendo-list-item-text, - $kendo-list-item-bg - ); - - // Hover - &:hover, - &.k-hover { - @include fill( - $kendo-list-item-hover-text, - $kendo-list-item-hover-bg - ); - } - - // Focus - &:focus, - &.k-focus { - @include fill( - $kendo-list-item-focus-text, - $kendo-list-item-focus-bg - ); - @include focus-indicator( $kendo-list-item-focus-shadow, true ); - } - - // Selected - &.k-selected { - @include fill( - $kendo-list-item-selected-text, - $kendo-list-item-selected-bg - ); - } - &.k-selected:hover, - &.k-selected.k-hover { - color: $kendo-list-item-selected-text; - background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg )); - } - } - - // Option Label - .k-list-optionlabel, - .k-list-optionlabel.k-hover, - .k-list-optionlabel:hover { - color: $kendo-list-option-label-text; - } - - // List group item - .k-list-group-item { - @include fill( - $kendo-list-group-item-text, - $kendo-list-group-item-bg, - $kendo-list-group-item-border, - ); - @include box-shadow( $kendo-list-group-item-shadow ); - } - - - // List item group label - .k-list-item-group-label { - @include fill( - $kendo-list-bg, - $kendo-list-text - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/list/_theme.scss" as *; @mixin kendo-list--theme() { diff --git a/packages/default/scss/list/_variables.scss b/packages/default/scss/list/_variables.scss index 85734e337f4..4c3c3664dcf 100644 --- a/packages/default/scss/list/_variables.scss +++ b/packages/default/scss/list/_variables.scss @@ -250,3 +250,90 @@ $kendo-list-group-item-shadow: null !default; /// The color of the 'Option Label' text. /// @group list $kendo-list-option-label-text: $kendo-subtle-text !default; + +@forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with ( + $kendo-list-font-family: $kendo-list-font-family, + $kendo-list-font-size: $kendo-list-font-size, + $kendo-list-sm-font-size: $kendo-list-sm-font-size, + $kendo-list-md-font-size: $kendo-list-md-font-size, + $kendo-list-lg-font-size: $kendo-list-lg-font-size, + $kendo-list-line-height: $kendo-list-line-height, + $kendo-list-sm-line-height: $kendo-list-sm-line-height, + $kendo-list-md-line-height: $kendo-list-md-line-height, + $kendo-list-lg-line-height: $kendo-list-lg-line-height, + $kendo-list-header-padding-x: $kendo-list-header-padding-x, + $kendo-list-sm-header-padding-x: $kendo-list-sm-header-padding-x, + $kendo-list-md-header-padding-x: $kendo-list-md-header-padding-x, + $kendo-list-lg-header-padding-x: $kendo-list-lg-header-padding-x, + $kendo-list-header-padding-y: $kendo-list-header-padding-y, + $kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y, + $kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y, + $kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y, + $kendo-list-header-border-width: $kendo-list-header-border-width, + $kendo-list-header-font-size: $kendo-list-header-font-size, + $kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size, + $kendo-list-md-header-font-size: $kendo-list-md-header-font-size, + $kendo-list-lg-header-font-size: $kendo-list-lg-header-font-size, + $kendo-list-header-line-height: $kendo-list-header-line-height, + $kendo-list-sm-header-line-height: $kendo-list-sm-header-line-height, + $kendo-list-md-header-line-height: $kendo-list-md-header-line-height, + $kendo-list-lg-header-line-height: $kendo-list-lg-header-line-height, + $kendo-list-header-font-weight: $kendo-list-header-font-weight, + $kendo-list-filter-padding: $kendo-list-filter-padding, + $kendo-list-item-padding-x: $kendo-list-item-padding-x, + $kendo-list-sm-item-padding-x: $kendo-list-sm-item-padding-x, + $kendo-list-md-item-padding-x: $kendo-list-md-item-padding-x, + $kendo-list-lg-item-padding-x: $kendo-list-lg-item-padding-x, + $kendo-list-item-padding-y: $kendo-list-item-padding-y, + $kendo-list-sm-item-padding-y: $kendo-list-sm-item-padding-y, + $kendo-list-md-item-padding-y: $kendo-list-md-item-padding-y, + $kendo-list-lg-item-padding-y: $kendo-list-lg-item-padding-y, + $kendo-list-item-font-size: $kendo-list-item-font-size, + $kendo-list-sm-item-font-size: $kendo-list-sm-item-font-size, + $kendo-list-md-item-font-size: $kendo-list-md-item-font-size, + $kendo-list-lg-item-font-size: $kendo-list-lg-item-font-size, + $kendo-list-item-line-height: $kendo-list-item-line-height, + $kendo-list-sm-item-line-height: $kendo-list-sm-item-line-height, + $kendo-list-md-item-line-height: $kendo-list-md-item-line-height, + $kendo-list-lg-item-line-height: $kendo-list-lg-item-line-height, + $kendo-list-group-item-padding-x: $kendo-list-group-item-padding-x, + $kendo-list-sm-group-item-padding-x: $kendo-list-sm-group-item-padding-x, + $kendo-list-md-group-item-padding-x: $kendo-list-md-group-item-padding-x, + $kendo-list-lg-group-item-padding-x: $kendo-list-lg-group-item-padding-x, + $kendo-list-group-item-padding-y: $kendo-list-group-item-padding-y, + $kendo-list-sm-group-item-padding-y: $kendo-list-sm-group-item-padding-y, + $kendo-list-md-group-item-padding-y: $kendo-list-md-group-item-padding-y, + $kendo-list-lg-group-item-padding-y: $kendo-list-lg-group-item-padding-y, + $kendo-list-group-item-border-width: $kendo-list-group-item-border-width, + $kendo-list-group-item-font-size: $kendo-list-group-item-font-size, + $kendo-list-sm-group-item-font-size: $kendo-list-sm-group-item-font-size, + $kendo-list-md-group-item-font-size: $kendo-list-md-group-item-font-size, + $kendo-list-lg-group-item-font-size: $kendo-list-lg-group-item-font-size, + $kendo-list-group-item-line-height: $kendo-list-group-item-line-height, + $kendo-list-sm-group-item-line-height: $kendo-list-sm-group-item-line-height, + $kendo-list-md-group-item-line-height: $kendo-list-md-group-item-line-height, + $kendo-list-lg-group-item-line-height: $kendo-list-lg-group-item-line-height, + $kendo-list-group-item-font-weight: $kendo-list-group-item-font-weight, + $kendo-list-sizes: $kendo-list-sizes, + $kendo-list-bg: $kendo-list-bg, + $kendo-list-text: $kendo-list-text, + $kendo-list-border: $kendo-list-border, + $kendo-list-header-bg: $kendo-list-header-bg, + $kendo-list-header-text: $kendo-list-header-text, + $kendo-list-header-border: $kendo-list-header-border, + $kendo-list-header-shadow: $kendo-list-header-shadow, + $kendo-list-item-bg: $kendo-list-item-bg, + $kendo-list-item-text: $kendo-list-item-text, + $kendo-list-item-hover-bg: $kendo-list-item-hover-bg, + $kendo-list-item-hover-text: $kendo-list-item-hover-text, + $kendo-list-item-focus-bg: $kendo-list-item-focus-bg, + $kendo-list-item-focus-text: $kendo-list-item-focus-text, + $kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow, + $kendo-list-item-selected-bg: $kendo-list-item-selected-bg, + $kendo-list-item-selected-text: $kendo-list-item-selected-text, + $kendo-list-group-item-bg: $kendo-list-group-item-bg, + $kendo-list-group-item-text: $kendo-list-group-item-text, + $kendo-list-group-item-border: $kendo-list-group-item-border, + $kendo-list-group-item-shadow: $kendo-list-group-item-shadow, + $kendo-list-option-label-text: $kendo-list-option-label-text +); diff --git a/packages/default/scss/listbox/_layout.scss b/packages/default/scss/listbox/_layout.scss index 17ad0026288..d92af7cf7bf 100644 --- a/packages/default/scss/listbox/_layout.scss +++ b/packages/default/scss/listbox/_layout.scss @@ -1,89 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-listbox--layout-base() { - - .k-listbox { - width: $kendo-listbox-width; - height: $kendo-listbox-default-height; - border-width: 0; - outline: 0; - font-family: $kendo-listbox-font-family; - font-size: $kendo-listbox-font-size; - line-height: $kendo-listbox-line-height; - vertical-align: top; - background-color: transparent; - display: inline-flex; - gap: $kendo-listbox-spacing; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - .k-listbox-actions { - display: flex; - gap: $kendo-listbox-button-spacing; - } - - &.k-listbox-actions-left, - &.k-listbox-actions-right { - flex-direction: row; - - .k-listbox-actions { - flex-direction: column; - } - } - - &.k-listbox-actions-right { - flex-direction: row-reverse; - } - - &.k-listbox-actions-top, - &.k-listbox-actions-bottom { - flex-direction: column; - - .k-listbox-actions { - flex-direction: row; - } - } - - &.k-listbox-actions-bottom { - flex-direction: column-reverse; - } - - .k-list-scroller { - width: 100%; - min-height: 0; - height: inherit; - border-width: $kendo-listbox-border-width; - border-style: solid; - box-sizing: border-box; - display: flex; - flex-flow: column nowrap; - - .k-list-scroller { - border-width: 0; - } - - .k-list { - height: inherit; - background: transparent; - } - } - - .k-drop-hint { - border-top-width: $kendo-listbox-drop-hint-width; - border-top-style: solid; - } - - .k-ghost { - opacity: .5; - } - } - - .k-item { - cursor: default; - } - -} +@use "@progress/kendo-theme-core/scss/components/listbox/_layout.scss" as *; @mixin kendo-listbox--layout() { diff --git a/packages/default/scss/listbox/_theme.scss b/packages/default/scss/listbox/_theme.scss index 27a7cb9ceb9..f40b43fa9ae 100644 --- a/packages/default/scss/listbox/_theme.scss +++ b/packages/default/scss/listbox/_theme.scss @@ -1,23 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-listbox--theme-base() { - - // Listbox - .k-listbox { - .k-list-scroller { - @include fill( - $kendo-listbox-text, - $kendo-listbox-bg, - $kendo-listbox-border - ); - } - .k-drop-hint { - border-top-color: $kendo-color-primary; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/listbox/_theme.scss" as *; @mixin kendo-listbox--theme() { diff --git a/packages/default/scss/listbox/_variables.scss b/packages/default/scss/listbox/_variables.scss index 8928fe3c6f9..269fddfc927 100644 --- a/packages/default/scss/listbox/_variables.scss +++ b/packages/default/scss/listbox/_variables.scss @@ -50,3 +50,21 @@ $kendo-listbox-drop-hint-width: 1px !default; /// The width of the border around the ListBox drop hint. /// @group listbox $kendo-listbox-drop-hint-border-width: null !default; + +@forward "@progress/kendo-theme-core/scss/components/listbox/_variables.scss" with ( + $kendo-listbox-spacing: $kendo-listbox-spacing, + $kendo-listbox-button-spacing: $kendo-listbox-button-spacing, + $kendo-listbox-width: $kendo-listbox-width, + $kendo-listbox-default-height: $kendo-listbox-default-height, + $kendo-listbox-border-width: $kendo-listbox-border-width, + $kendo-listbox-font-family: $kendo-listbox-font-family, + $kendo-listbox-font-size: $kendo-listbox-font-size, + $kendo-listbox-line-height: $kendo-listbox-line-height, + $kendo-listbox-text: $kendo-listbox-text, + $kendo-listbox-bg: $kendo-listbox-bg, + $kendo-listbox-border: $kendo-listbox-border, + $kendo-listbox-item-padding-x: $kendo-listbox-item-padding-x, + $kendo-listbox-item-padding-y: $kendo-listbox-item-padding-y, + $kendo-listbox-drop-hint-width: $kendo-listbox-drop-hint-width, + $kendo-listbox-drop-hint-border-width: $kendo-listbox-drop-hint-border-width +); diff --git a/packages/default/scss/listgroup/_layout.scss b/packages/default/scss/listgroup/_layout.scss index 024d4eefb3f..ee285749c27 100644 --- a/packages/default/scss/listgroup/_layout.scss +++ b/packages/default/scss/listgroup/_layout.scss @@ -1,194 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - - -@mixin kendo-listgroup--layout-base() { - - .k-listgroup { - @include border-radius( $kendo-listgroup-border-radius ); - margin: 0; - padding: 0; - border-width: $kendo-listgroup-border-width; - border-style: solid; - font-size: $kendo-listgroup-font-size; - line-height: $kendo-listgroup-line-height; - list-style: none; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - - > ul { - margin: 0; - padding: 0; - list-style: none; - display: flex; - flex-direction: column; - } - - // Borders of items - .k-listgroup-item + .k-listgroup-item { - border-top-width: $kendo-listgroup-item-border-width; - } - } - .k-listgroup-flush { - @include border-radius( 0 ); - border-left-width: 0; - border-right-width: 0; - } - - - .k-listgroup-item { - padding-block: $kendo-listgroup-item-padding-y; - padding-inline: $kendo-listgroup-item-padding-x; - border-width: 0; - border-style: solid; - border-color: inherit; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - flex: 0 0 auto; - position: relative; - - > .k-link { - margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 ); - margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 ); - padding-block: $kendo-listgroup-item-padding-y; - padding-inline: $kendo-listgroup-item-padding-x; - color: inherit; - text-decoration: none; - outline: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - flex: 1 1 auto; - position: relative; - - > .k-select { - padding: $kendo-listgroup-item-padding-y; - display: flex; - align-items: center; - flex: 0 0 auto; - position: absolute; - top: 50%; - inset-inline-end: 0; - transform: translateY(-50%); - } - } - } - .k-listgroup-item-segmented { - align-items: stretch; - - > .k-link { - margin-right: 0; - } - - > .k-select { - margin: calc( #{$kendo-listgroup-item-padding-y} * -1 ) calc( #{$kendo-listgroup-item-padding-x} * -1 ) calc( #{$kendo-listgroup-item-padding-y} * -1 ) 0; - padding: $kendo-listgroup-item-padding-y; - border-width: 0 0 0 1px; - border-style: solid; - border-color: inherit; - cursor: pointer; - } - } - - - // Forms in listgroup - .k-listgroup-form-row { - margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 ); - margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 ); - padding-block: $kendo-listgroup-item-padding-y; - padding-inline: $kendo-listgroup-item-padding-x; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - flex: 1 1 auto; - position: relative; - - .k-listgroup-form-field-label { - width: 40%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .k-listgroup-form-field-wrapper { - width: 50%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - text-align: end; - position: relative; - - select, - input[type="text"], - input[type="password"], - input[type="date"], - input[type="time"], - input[type="datetime-local"], - input[type="number"], - textarea { - width: 100%; - box-sizing: border-box; - flex: 1 1 100%; - } - - textarea { - min-height: 4em; - resize: vertical; - } - } - } - .k-listgroup-item.k-listgroup-form-row { - margin: 0; - } - - - [dir="rtl"] { - - .k-listgroup-item { - - > .k-link { - - > .k-select { - right: auto; - left: 0; - } - } - } - .k-listgroup-item-segmented { - - > .k-link { - margin-right: calc( #{$kendo-listgroup-item-padding-x} * -1 ); - margin-left: 0; - } - - > .k-select { - margin-right: 0; - margin-left: calc( #{$kendo-listgroup-item-padding-x} * -1 ); - border-right-width: 1px; - border-left-width: 0; - } - } - } - - - // No flexbox fix - .k-noflexbox { - .k-listgroup, - .k-listgroup > ul - .k-listgroup-item, - .k-listgroup-item > .k-link { - display: block; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/listgroup/_layout.scss" as *; @mixin kendo-listgroup--layout() { diff --git a/packages/default/scss/listgroup/_theme.scss b/packages/default/scss/listgroup/_theme.scss index 46c982c522e..be2dea85329 100644 --- a/packages/default/scss/listgroup/_theme.scss +++ b/packages/default/scss/listgroup/_theme.scss @@ -1,18 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-listgroup--theme-base() { - - // Listgroup - .k-listgroup { - @include fill( - $kendo-listgroup-text, - $kendo-listgroup-bg, - $kendo-listgroup-border - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/listgroup/_theme.scss" as *; @mixin kendo-listgroup--theme() { diff --git a/packages/default/scss/listgroup/_variables.scss b/packages/default/scss/listgroup/_variables.scss index 1fcc295f922..f3c787ad1c2 100644 --- a/packages/default/scss/listgroup/_variables.scss +++ b/packages/default/scss/listgroup/_variables.scss @@ -14,3 +14,16 @@ $kendo-listgroup-border: $kendo-component-border !default; $kendo-listgroup-item-padding-x: k-spacing(2) !default; $kendo-listgroup-item-padding-y: k-spacing(2) !default; $kendo-listgroup-item-border-width: 1px !default; + +@forward "@progress/kendo-theme-core/scss/components/listgroup/_variables.scss" with ( + $kendo-listgroup-border-width: $kendo-listgroup-border-width, + $kendo-listgroup-border-radius: $kendo-listgroup-border-radius, + $kendo-listgroup-font-size: $kendo-listgroup-font-size, + $kendo-listgroup-line-height: $kendo-listgroup-line-height, + $kendo-listgroup-bg: $kendo-listgroup-bg, + $kendo-listgroup-text: $kendo-listgroup-text, + $kendo-listgroup-border: $kendo-listgroup-border, + $kendo-listgroup-item-padding-x: $kendo-listgroup-item-padding-x, + $kendo-listgroup-item-padding-y: $kendo-listgroup-item-padding-y, + $kendo-listgroup-item-border-width: $kendo-listgroup-item-border-width +); diff --git a/packages/default/scss/listview/_layout.scss b/packages/default/scss/listview/_layout.scss index 264e7235fe8..bff40b2e354 100644 --- a/packages/default/scss/listview/_layout.scss +++ b/packages/default/scss/listview/_layout.scss @@ -1,144 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-listview--layout-base() { - - // Listview - .k-listview { - margin: 0; - padding: 0; - border-width: 0; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-listview-font-family; - font-size: $kendo-listview-font-size; - line-height: $kendo-listview-line-height; - display: flex; - flex-flow: column nowrap; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: transparent; - } - .k-listview-bordered { - border-width: $kendo-listview-border-width; - } - - - // Header - .k-listview-header { - border-width: 0; - border-style: solid; - border-color: inherit; - } - .k-listview-bordered > .k-listview-header { - border-bottom-width: $kendo-listview-border-width; - } - - - // Listview content - .k-listview-content { - margin: 0; - padding: 0; - outline: 0; - flex-grow: 1; - position: relative; - overflow: auto; - - &::after { - height: 0; - clear: both; - display: block; - } - } - .k-listview-content.k-d-flex, - .k-listview-content.k-d-grid { - &::after { display: none; } - } - .k-listview-content-padding-rectangle { - padding-block: $kendo-listview-padding-y; - padding-inline: $kendo-listview-padding-x; - } - .k-listview-content-padding-square { - padding: $kendo-listview-padding-y; - } - - - // Listview item - .k-listview-item { - padding: 0; - border-width: 0; - outline: 0; - border-style: solid; - box-sizing: border-box; - flex-shrink: 0; - } - .k-listview-item-padding-rectangle { - padding-block: $kendo-listview-item-padding-y; - padding-inline: $kendo-listview-item-padding-x; - } - .k-listview-item-padding-rectangle .k-listview-link { - margin-block: (-$kendo-listview-item-padding-y); - margin-inline: (-$kendo-listview-item-padding-x); - padding-block: $kendo-listview-item-padding-y; - padding-inline: $kendo-listview-item-padding-x; - } - .k-listview-item-padding-square { - padding: $kendo-listview-item-padding-y; - } - .k-listview-item-padding-square .k-listview-link { - margin: (-$kendo-listview-item-padding-y); - padding: $kendo-listview-item-padding-y; - } - - - // Listview footer - .k-listview-footer { - border-width: 0; - border-style: solid; - border-color: inherit; - } - .k-listview-bordered > .k-listview-footer { - border-top-width: $kendo-listview-border-width; - } - - - // Listview pager - .k-listview-pager { - border-width: 0; - border-color: inherit; - } - .k-listview-bordered > .k-listview-pager-top { - border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} ); - } - .k-listview-bordered > .k-listview-pager-bottom { - border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} ); - } - - - // Borders - .k-listview-borders-all { - .k-listview-item { - border-width: 1px; - } - } - .k-listview-borders-horizontal { - .k-listview-item { - border-top-width: 1px; - } - .k-listview-item:first-child { - border-top-width: 0; - } - } - .k-listview-borders-vertical { - .k-listview-item { - border-left-width: 1px; - } - .k-listview-item:first-child { - border-left-width: 0; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/listview/_layout.scss" as *; @mixin kendo-listview--layout() { diff --git a/packages/default/scss/listview/_theme.scss b/packages/default/scss/listview/_theme.scss index f66badbf026..681c5bffdd2 100644 --- a/packages/default/scss/listview/_theme.scss +++ b/packages/default/scss/listview/_theme.scss @@ -1,46 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-listview--theme-base() { - - // Listview - .k-listview { - @include fill( - $kendo-listview-text, - $kendo-listview-bg, - $kendo-listview-border - ); - } - - - // Listview content - .k-listview-content { - - > .k-focus { - @include fill( - $kendo-listview-item-focus-text, - $kendo-listview-item-focus-bg, - $kendo-listview-item-focus-border - ); - @include focus-indicator( $kendo-listview-item-focus-shadow, true ); - } - - > .k-selected { - @include fill( - $kendo-listview-item-selected-text, - $kendo-listview-item-selected-bg, - $kendo-listview-item-selected-border - ); - } - - } - - // List item - .k-listview-item { - border-color: $kendo-listview-border; - } - -} +@use "@progress/kendo-theme-core/scss/components/listview/_theme.scss" as *; @mixin kendo-listview--theme() { diff --git a/packages/default/scss/listview/_variables.scss b/packages/default/scss/listview/_variables.scss index 99bbab4b602..615ed95d4f7 100644 --- a/packages/default/scss/listview/_variables.scss +++ b/packages/default/scss/listview/_variables.scss @@ -60,3 +60,24 @@ $kendo-listview-item-focus-border: null !default; /// The box shadow of the focused ListView items. /// @group listview $kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default; + +@forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with ( + $kendo-listview-padding-x: $kendo-listview-padding-x, + $kendo-listview-padding-y: $kendo-listview-padding-y, + $kendo-listview-border-width: $kendo-listview-border-width, + $kendo-listview-font-family: $kendo-listview-font-family, + $kendo-listview-font-size: $kendo-listview-font-size, + $kendo-listview-line-height: $kendo-listview-line-height, + $kendo-listview-text: $kendo-listview-text, + $kendo-listview-bg: $kendo-listview-bg, + $kendo-listview-border: $kendo-listview-border, + $kendo-listview-item-padding-x: $kendo-listview-item-padding-x, + $kendo-listview-item-padding-y: $kendo-listview-item-padding-y, + $kendo-listview-item-selected-text: $kendo-listview-item-selected-text, + $kendo-listview-item-selected-bg: $kendo-listview-item-selected-bg, + $kendo-listview-item-selected-border: $kendo-listview-item-selected-border, + $kendo-listview-item-focus-text: $kendo-listview-item-focus-text, + $kendo-listview-item-focus-bg: $kendo-listview-item-focus-bg, + $kendo-listview-item-focus-border: $kendo-listview-item-focus-border, + $kendo-listview-item-focus-shadow: $kendo-listview-item-focus-shadow +); diff --git a/packages/default/scss/loader/_layout.scss b/packages/default/scss/loader/_layout.scss index f62c6b0e08f..07a8659dea1 100644 --- a/packages/default/scss/loader/_layout.scss +++ b/packages/default/scss/loader/_layout.scss @@ -1,587 +1,7 @@ -@use "./_variables.scss" as *; -@use "../overlay/_variables.scss" as *; +@use "@progress/kendo-theme-core/scss/components/loader/_layout.scss" as *; -@mixin kendo-loader--layout-base() { - - .k-loader { - position: relative; - display: inline-block; - vertical-align: middle; - box-sizing: border-box; - - // Prevents the inline elements from being displaced. - // A good example is the 'pulsing' loader inside a button. - line-height: 0; - } - - .k-loader-canvas { - display: flex; - position: relative; - } - - // Loader segment - .k-loader-segment { - border-radius: $kendo-loader-segment-border-radius; - background-color: currentColor; - position: absolute; - } - - // Loader sizes - .k-loader-sm { - padding: $kendo-loader-sm-padding; - - .k-loader-segment { - width: $kendo-loader-sm-segment-size; - height: $kendo-loader-sm-segment-size; - } - } - .k-loader-md { - padding: $kendo-loader-md-padding; - - .k-loader-segment { - width: $kendo-loader-md-segment-size; - height: $kendo-loader-md-segment-size; - } - } - .k-loader-lg { - padding: $kendo-loader-lg-padding; - - .k-loader-segment { - width: $kendo-loader-lg-segment-size; - height: $kendo-loader-lg-segment-size; - } - } - - - - - // Loader pulsing 2 - @keyframes pulsing-2-segment { - 0% { transform: scale(1); } - 50% { transform: scale(1.5); } - 100% { transform: scale(1); } - } - - - // Component - .k-loader-pulsing-2 { - - .k-loader-canvas { - align-items: center; - } - - .k-loader-segment:nth-child(1) { - left: 0; - transform: scale( 1.5 ); - transform-origin: 0 50%; - animation: pulsing-2-segment 1s ease infinite; - animation-delay: -.5s; - } - .k-loader-segment:nth-child(2) { - right: 0; - transform-origin: 100% 50%; - animation: pulsing-2-segment 1s ease infinite; - } - - &.k-loader-sm { - .k-loader-canvas { - width: calc( #{$kendo-loader-sm-segment-size} * 3 ); - height: calc( #{$kendo-loader-sm-segment-size} * 1.5 ); - } - } - - &.k-loader-md { - .k-loader-canvas { - width: calc( #{$kendo-loader-md-segment-size} * 3 ); - height: calc( #{$kendo-loader-md-segment-size} * 1.5 ); - } - } - - &.k-loader-lg { - .k-loader-canvas { - width: calc( #{$kendo-loader-lg-segment-size} * 3 ); - height: calc( #{$kendo-loader-lg-segment-size} * 1.5 ); - } - } - } - - - - - // Loader spinner 3 - @keyframes spinner-3-segment { - 0% { - top: 0; - left: 50%; - } - - 33.3333% { - top: 100%; - left: 0; - } - - 66.6666% { - top: 100%; - left: 100%; - } - - 100% { - top: 0; - left: 50%; - } - } - - - // Component - .k-loader-spinner-3 { - - // Note: Until we can provide a css variables solution, or something better: - // * the dot center is on the exact point of angle - // * offset dots by artifically reduce dimentions by 1 dot size - // * compensate by setting margin on all sides half a dot size - - .k-loader-segment { - transform: translate( -50%, -50% ); - } - .k-loader-segment:nth-child(1) { - top: 0; - left: 50%; - animation: spinner-3-segment 2s ease infinite; - } - .k-loader-segment:nth-child(2) { - top: 100%; - left: 0; - animation: spinner-3-segment 2s ease infinite; - animation-delay: calc( -2s / 3 ); - } - .k-loader-segment:nth-child(3) { - top: 100%; - left: 100%; - animation: spinner-3-segment 2s ease infinite; - animation-delay: calc( -4s / 3 ); - } - - - &.k-loader-sm { - .k-loader-canvas { - margin: calc( #{$kendo-loader-sm-segment-size} / 2 ); - width: calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} ); - height: calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} ); - } - } - - &.k-loader-md { - .k-loader-canvas { - margin: calc( #{ $kendo-loader-md-segment-size} / 2 ); - width: calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} ); - height: calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} ); - } - } - - &.k-loader-lg { - .k-loader-canvas { - margin: calc( #{$kendo-loader-lg-segment-size} / 2 ); - width: calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} ); - height: calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} ); - } - } - } - - - - - // Loader spinner 4 - @keyframes spinner-4-segment-1 { - 0% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - - 33.3% { - top: 0; - left: 0; - transform: translateX(0) translateY(0); - } - - 66.6% { - top: 0; - left: 0; - transform: translateX(0) translateY(0); - } - - 100% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - } - @keyframes spinner-4-segment-2 { - 0% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - - 33.3% { - top: 0; - left: 100%; - transform: translateX(-100%) translateY(0); - } - - 66.6% { - top: 0; - left: 100%; - transform: translateX(-100%) translateY(0); - } - - 100% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - } - @keyframes spinner-4-segment-3 { - 0% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - - 33.3% { - top: 100%; - left: 100%; - transform: translateX(-100%) translateY(-100%); - } - - 66.6% { - top: 100%; - left: 100%; - transform: translateX(-100%) translateY(-100%); - } - - 100% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - } - @keyframes spinner-4-segment-4 { - 0% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - - 33.3% { - top: 100%; - left: 0; - transform: translateX(0) translateY(-100%); - } - - 66.6% { - top: 100%; - left: 0; - transform: translateX(0) translateY(-100%); - } - - 100% { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - } - @keyframes spinner-4 { - 0% { - transform: rotate(0); - } - - 33.3% { - transform: rotate(0); - } - - 66.6% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(180deg); - } - } - - .k-loader-spinner-4 { - .k-loader-canvas { - animation: spinner-4 1.833s ease infinite; - } - - .k-loader-segment { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - - &:nth-child(1) { - animation: spinner-4-segment-1 1.833s ease infinite; - } - - &:nth-child(2) { - animation: spinner-4-segment-2 1.833s ease infinite; - } - - &:nth-child(3) { - animation: spinner-4-segment-3 1.833s ease infinite; - } - - &:nth-child(4) { - animation: spinner-4-segment-4 1.833s ease infinite; - } - } - - &.k-loader-sm { - .k-loader-canvas { - width: $kendo-loader-sm-spinner-4-width; - height: $kendo-loader-sm-spinner-4-height; - } - } - - &.k-loader-md { - .k-loader-canvas { - width: $kendo-loader-md-spinner-4-width; - height: $kendo-loader-md-spinner-4-height; - } - } - - &.k-loader-lg { - .k-loader-canvas { - width: $kendo-loader-lg-spinner-4-width; - height: $kendo-loader-lg-spinner-4-height; - } - } - } - - - - - // Loader container - .k-loader-container { - display: flex; - align-items: center; - justify-content: center; - z-index: 20001; - - .k-loader { - padding: 0; - } - } - - .k-loader-container, - .k-loader-container-overlay { - width: 100%; - height: 100%; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - // TODO: use k-overlay as a base class in rendering - .k-loader-container-overlay { - opacity: $kendo-overlay-opacity; - } - - .k-loader-container-inner { - display: flex; - align-items: center; - position: relative; - z-index: 2; - } - - .k-loader-container-panel { - border-width: $kendo-loader-container-panel-border-width; - border-style: $kendo-loader-container-panel-border-style; - border-radius: $kendo-loader-container-panel-border-radius; - } - - // Loader Container Sizes - .k-loader-container-sm { - .k-loader-container-inner { - padding: $kendo-loader-sm-container-padding; - gap: $kendo-loader-sm-container-gap; - } - - .k-loader-container-label { - font-size: $kendo-loader-sm-container-font-size; - } - } - .k-loader-container-md { - .k-loader-container-inner { - padding: $kendo-loader-md-container-padding; - gap: $kendo-loader-md-container-gap; - } - - .k-loader-container-label { - font-size: $kendo-loader-md-container-font-size; - } - } - .k-loader-container-lg { - .k-loader-container-inner { - padding: $kendo-loader-lg-container-padding; - gap: $kendo-loader-lg-container-gap; - } - - .k-loader-container-label { - font-size: $kendo-loader-lg-container-font-size; - } - } - - // Loader Position - .k-loader-top { - .k-loader-container-inner { - flex-direction: column; - text-align: center; - } - } - .k-loader-end { - .k-loader-container-label { - order: -1; - } - } - -} - -// Legacy implementation of the loading icon inside inputs and pickers -// Replace with loader component -@mixin kendo-loading--layout-base() { - - // Loading mask - .k-loading-mask, - .k-loading-image, - .k-loading-color { - width: 100%; - height: 100%; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - - *, - *::before, - *::after, - &::before, - &::after { - box-sizing: border-box; - } - } - - .k-loading-mask { - z-index: $kendo-zindex-loading; - - &.k-opaque { - .k-loading-color { - opacity: 1; - } - } - } - .k-loading-text { - text-indent: -4000px; - text-align: center; - position: absolute; - color: $kendo-loading-text; - } - .k-loading-image { - z-index: 2; - color: $kendo-loading-text; - } - .k-loading-color { - background-color: $kendo-loading-bg; - opacity: $kendo-loading-opacity; - } - - // Loading indicator - .k-i-loading { - width: 1em; - height: 1em; - line-height: 1; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - justify-content: center; - vertical-align: middle; - position: relative; - background-color: transparent; - box-sizing: border-box; - color: $kendo-loading-text; - - &::before, - &::after { - box-sizing: border-box; - } - } - - .k-i-loading::before, - .k-i-loading::after, - .k-loading-image::before, - .k-loading-image::after { - position: absolute; - top: 50%; - left: 50%; - display: inline-block; - content: ""; - box-sizing: inherit; - border-radius: 50%; - border-width: .05em; - border-style: solid; - border-color: currentColor; - border-top-color: transparent; - border-bottom-color: transparent; - background-color: transparent; - } - - .k-icon.k-i-loading::before, - .k-icon.k-i-loading::after { - content: ""; - } - - .k-i-loading::before, - .k-loading-image::before { - margin-top: -.5em; - margin-left: -.5em; - width: 1em; - height: 1em; - animation: k-loading-animation .7s linear infinite; - } - - .k-i-loading::after, - .k-loading-image::after { - margin-top: -.25em; - margin-left: -.25em; - width: .5em; - height: .5em; - animation: k-loading-animation reverse 1.4s linear infinite; - } - - .k-loading-image::before, - .k-loading-image::after { - content: ""; - // See https://github.com/telerik/kendo-themes/issues/1925 - border-width: 1px; // TODO: Remove once we drop IE support - border-width: clamp( .015em, 1px, 1px ); - font-size: 4em; - } - - // Loading animation - @keyframes k-loading-animation { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } - -} @mixin kendo-loader--layout() { @include kendo-loader--layout-base(); - @include kendo-loading--layout-base(); + @include kendo-loading--layout-base() } diff --git a/packages/default/scss/loader/_theme.scss b/packages/default/scss/loader/_theme.scss index 6cf36dee192..32a0545446d 100644 --- a/packages/default/scss/loader/_theme.scss +++ b/packages/default/scss/loader/_theme.scss @@ -1,20 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-loader--theme-base() { - - @each $name, $color in $kendo-theme-colors { - .k-loader-#{$name} { - color: $color; - } - } - - .k-loader-container-panel { - background-color: $kendo-loader-container-panel-bg; - border-color: $kendo-loader-container-panel-border-color; - } - -} +@use "@progress/kendo-theme-core/scss/components/loader/_theme.scss" as *; @mixin kendo-loader--theme() { diff --git a/packages/default/scss/loader/_variables.scss b/packages/default/scss/loader/_variables.scss index 97c9b6e3993..63cda730e5f 100644 --- a/packages/default/scss/loader/_variables.scss +++ b/packages/default/scss/loader/_variables.scss @@ -125,3 +125,43 @@ $kendo-loading-opacity: .3 !default; /// The z-index of the Loading indicator. /// @group loading $kendo-zindex-loading: 100 !default; + +@forward "@progress/kendo-theme-core/scss/components/loader/_variables.scss" with ( + $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius, + $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size, + $kendo-loader-md-segment-size: $kendo-loader-md-segment-size, + $kendo-loader-lg-segment-size: $kendo-loader-lg-segment-size, + $kendo-loader-sm-padding: $kendo-loader-sm-padding, + $kendo-loader-md-padding: $kendo-loader-md-padding, + $kendo-loader-lg-padding: $kendo-loader-lg-padding, + $kendo-loader-sm-spinner-3-width: $kendo-loader-sm-spinner-3-width, + $kendo-loader-md-spinner-3-width: $kendo-loader-md-spinner-3-width, + $kendo-loader-lg-spinner-3-width: $kendo-loader-lg-spinner-3-width, + $kendo-loader-sm-spinner-3-height: $kendo-loader-sm-spinner-3-height, + $kendo-loader-md-spinner-3-height: $kendo-loader-md-spinner-3-height, + $kendo-loader-lg-spinner-3-height: $kendo-loader-lg-spinner-3-height, + $kendo-loader-sm-spinner-4-width: $kendo-loader-sm-spinner-4-width, + $kendo-loader-md-spinner-4-width: $kendo-loader-md-spinner-4-width, + $kendo-loader-lg-spinner-4-width: $kendo-loader-lg-spinner-4-width, + $kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-height, + $kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-height, + $kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-height, + $kendo-loader-container-panel-border-width: $kendo-loader-container-panel-border-width, + $kendo-loader-container-panel-border-style: $kendo-loader-container-panel-border-style, + $kendo-loader-container-panel-border-color: $kendo-loader-container-panel-border-color, + $kendo-loader-container-panel-border-radius: $kendo-loader-container-panel-border-radius, + $kendo-loader-container-panel-bg: $kendo-loader-container-panel-bg, + $kendo-loader-sm-container-padding: $kendo-loader-sm-container-padding, + $kendo-loader-md-container-padding: $kendo-loader-md-container-padding, + $kendo-loader-lg-container-padding: $kendo-loader-lg-container-padding, + $kendo-loader-sm-container-gap: $kendo-loader-sm-container-gap, + $kendo-loader-md-container-gap: $kendo-loader-md-container-gap, + $kendo-loader-lg-container-gap: $kendo-loader-lg-container-gap, + $kendo-loader-sm-container-font-size: $kendo-loader-sm-container-font-size, + $kendo-loader-md-container-font-size: $kendo-loader-md-container-font-size, + $kendo-loader-lg-container-font-size: $kendo-loader-lg-container-font-size, + $kendo-loading-bg: $kendo-loading-bg, + $kendo-loading-text: $kendo-loading-text, + $kendo-loading-opacity: $kendo-loading-opacity, + $kendo-zindex-loading: $kendo-zindex-loading +); diff --git a/packages/default/scss/map/_layout.scss b/packages/default/scss/map/_layout.scss index ecb9e5984b9..a06b5016489 100644 --- a/packages/default/scss/map/_layout.scss +++ b/packages/default/scss/map/_layout.scss @@ -1,141 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-map--layout-base() { - - // Map - .k-map { - height: 600px; - box-sizing: border-box; - border-width: $kendo-map-border-width; - border-style: solid; - font-size: $kendo-map-font-size; - line-height: $kendo-map-line-height; - font-family: $kendo-map-font-family; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - - // Scroll - .km-scroll-wrapper { - width: 100%; - height: 100%; - user-select: none; - position: absolute; - } - .km-scroll-container { height: 100%; } - .k-touch-scrollbar { display: none; } - - // Layers - .k-layer { - position: absolute; - left: 0; - top: 0; - } - - // Marker - .k-marker { - transform: translate(-50%, -100%); - cursor: pointer; - position: absolute; - overflow: visible; - } - - - // Attribution - .k-attribution { - padding-block: $kendo-map-attribution-padding-y; - padding-inline: $kendo-map-attribution-padding-x; - border-width: 0; - font-size: $kendo-map-attribution-font-size; - z-index: 1000; - } - - - } - - - // Controls - .k-map-controls { - position: absolute; - display: flex; - align-items: center; - } - - - // Navigator - .k-navigator { - margin: $kendo-map-navigator-margin; - width: $kendo-map-navigator-width; - height: $kendo-map-navigator-width; - border-width: $kendo-map-navigator-border-width; - border-style: solid; - box-sizing: border-box; - border-radius: 50%; - position: relative; - - - // Buttons - .k-button { - padding: 0; - width: auto; - height: auto; - line-height: 1; - box-shadow: none; - position: absolute; - - .k-icon { - min-width: 0; - min-height: 0; - } - } - .k-navigator-n, - .k-navigator-up { - transform: translateX(-50%); - top: $kendo-map-navigator-padding; - left: 50%; - } - .k-navigator-e, - .k-navigator-right { - transform: translateY(-50%); - right: $kendo-map-navigator-padding; - top: 50%; - } - .k-navigator-s, - .k-navigator-down { - transform: translateX(-50%); - bottom: $kendo-map-navigator-padding; - left: 50%; - } - .k-navigator-w, - .k-navigator-left { - transform: translateY(-50%); - left: $kendo-map-navigator-padding; - top: 50%; - } - } - - - // Zoom control - .k-zoom-control { - margin: k-spacing(4); - border: 0; - background: none; - display: flex; - } - - - .k-pdf-export { - .k-navigator, - .k-zoom-control { - display: none; - } - } -} +@use "@progress/kendo-theme-core/scss/components/map/_layout.scss" as *; @mixin kendo-map--layout() { diff --git a/packages/default/scss/map/_theme.scss b/packages/default/scss/map/_theme.scss index 72700d27806..21fd1acb4c7 100644 --- a/packages/default/scss/map/_theme.scss +++ b/packages/default/scss/map/_theme.scss @@ -1,37 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../button/_variables.scss" as *; - -@mixin kendo-map--theme-base() { - - // Map theme - .k-map { - @include fill( - $kendo-map-text, - $kendo-map-bg, - $kendo-map-border - ); - - .k-navigator { - @include fill( - $kendo-button-text, - $kendo-button-bg, - $kendo-button-border, - $kendo-button-gradient - ); - @include box-shadow( $kendo-button-shadow ); - } - - .k-marker { - color: $kendo-map-marker-fill; - } - - .k-attribution { - background-color: $kendo-map-attribution-bg; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/map/_theme.scss" as *; @mixin kendo-map--theme() { diff --git a/packages/default/scss/map/_variables.scss b/packages/default/scss/map/_variables.scss index c1c076feda5..0ab798ecadf 100644 --- a/packages/default/scss/map/_variables.scss +++ b/packages/default/scss/map/_variables.scss @@ -71,3 +71,27 @@ $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-c $kendo-map-marker-fill: $kendo-color-primary !default; $kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default; + +@forward "@progress/kendo-theme-core/scss/components/map/_variables.scss" with ( + $kendo-map-border-width: $kendo-map-border-width, + $kendo-map-font-size: $kendo-map-font-size, + $kendo-map-line-height: $kendo-map-line-height, + $kendo-map-font-family: $kendo-map-font-family, + $kendo-map-bg: $kendo-map-bg, + $kendo-map-text: $kendo-map-text, + $kendo-map-border: $kendo-map-border, + $kendo-map-navigator-margin: $kendo-map-navigator-margin, + $kendo-map-navigator-padding: $kendo-map-navigator-padding, + $kendo-map-navigator-width: $kendo-map-navigator-width, + $kendo-map-navigator-height: $kendo-map-navigator-height, + $kendo-map-navigator-border-width: $kendo-map-navigator-border-width, + $kendo-map-zoom-control-margin: $kendo-map-zoom-control-margin, + $kendo-map-zoom-control-button-padding-x: $kendo-map-zoom-control-button-padding-x, + $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-y, + $kendo-map-attribution-padding-x: $kendo-map-attribution-padding-x, + $kendo-map-attribution-padding-y: $kendo-map-attribution-padding-y, + $kendo-map-attribution-font-size: $kendo-map-attribution-font-size, + $kendo-map-attribution-bg: $kendo-map-attribution-bg, + $kendo-map-marker-fill: $kendo-map-marker-fill, + $kendo-map-marker-images: $kendo-map-marker-images +); diff --git a/packages/default/scss/maskedtextbox/_layout.scss b/packages/default/scss/maskedtextbox/_layout.scss index ebfbe693489..39621f8149c 100644 --- a/packages/default/scss/maskedtextbox/_layout.scss +++ b/packages/default/scss/maskedtextbox/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-masked-textbox--layout-base() { - - // Masked textbox - .k-maskedtextbox {} - -} +@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_layout.scss" as *; @mixin kendo-masked-textbox--layout() { diff --git a/packages/default/scss/maskedtextbox/_theme.scss b/packages/default/scss/maskedtextbox/_theme.scss index a76f3534844..ad76e09bf44 100644 --- a/packages/default/scss/maskedtextbox/_theme.scss +++ b/packages/default/scss/maskedtextbox/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-masked-textbox--theme-base() { - - // Masked textbox - .k-maskedtextbox {} - -} +@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_theme.scss" as *; @mixin kendo-masked-textbox--theme() { diff --git a/packages/default/scss/mediaplayer/_layout.scss b/packages/default/scss/mediaplayer/_layout.scss index 37885812bde..f36721097a1 100644 --- a/packages/default/scss/mediaplayer/_layout.scss +++ b/packages/default/scss/mediaplayer/_layout.scss @@ -1,108 +1,4 @@ -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-media-player--layout-base() { - - // Base - .k-mediaplayer { - border-width: $kendo-media-player-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-media-player-font-family; - font-size: $kendo-media-player-font-size; - line-height: $kendo-media-player-line-height; - display: block; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - > iframe { - width: 100%; - height: 100%; - border: 0; - vertical-align: top; - } - } - - - // Title bar - .k-mediaplayer-titlebar { - padding-block: $kendo-media-player-titlebar-padding-y; - padding-inline: $kendo-media-player-titlebar-padding-x; - position: absolute; - z-index: 2; - top: 0; - left: 0; - right: 0; - } - - - // Toolbar - .k-mediaplayer-toolbar-wrap { - position: absolute; - z-index: 2; - bottom: 0; - left: 0; - right: 0; - } - .k-mediaplayer-toolbar { - border-width: 0; - width: 100% !important; // stylelint-disable-line declaration-no-important - box-shadow: none; - - - .k-dropdown-list { - width: auto; - } - } - .k-mediaplayer-time-wrap { - flex: 1; - } - .k-mediaplayer-volume-wrap { - // TODO: When slider draghandle size is exposed, use it instead - padding: 0 math.div( 14px, 2 ); - align-items: center; - } - .k-mediaplayer-volume { - width: 100px; - } - - - // Seekbar - .k-slider.k-mediaplayer-seekbar { - width: 100%; - position: absolute; - z-index: 3; - top: 0; - left: 0; - transform: translateY( -50% ); - } - .k-mediaplayer-seekbar .k-slider-track { - width: 100% !important; // stylelint-disable-line declaration-no-important - border-radius: 0; - } - .k-mediaplayer-seekbar .k-slider-selection { - border-radius: 0; - } - - .k-mediaplayer-fullscreen { - z-index: 10000; - position: fixed; - top: 0; - left: 0; - width: 100% !important; // stylelint-disable-line declaration-no-important - height: 100% !important; // stylelint-disable-line declaration-no-important - } - -} +@use "@progress/kendo-theme-core/scss/components/mediaplayer/_layout.scss" as *; @mixin kendo-media-player--layout() { diff --git a/packages/default/scss/mediaplayer/_theme.scss b/packages/default/scss/mediaplayer/_theme.scss index 498b16ed7b2..09d5e6d1d35 100644 --- a/packages/default/scss/mediaplayer/_theme.scss +++ b/packages/default/scss/mediaplayer/_theme.scss @@ -1,26 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-media-player--theme-base() { - - // Theme - .k-mediaplayer { - @include fill( - $kendo-media-player-text, - $kendo-media-player-bg, - $kendo-media-player-border - ); - } - - - // Title bar - .k-mediaplayer-titlebar { - color: $kendo-media-player-titlebar-text; - background-image: linear-gradient( $kendo-media-player-titlebar-gradient ); - text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 )); - } - -} +@use "@progress/kendo-theme-core/scss/components/mediaplayer/_theme.scss" as *; @mixin kendo-media-player--theme() { diff --git a/packages/default/scss/mediaplayer/_variables.scss b/packages/default/scss/mediaplayer/_variables.scss index ae2b1cfa9f7..aba2ccaecd3 100644 --- a/packages/default/scss/mediaplayer/_variables.scss +++ b/packages/default/scss/mediaplayer/_variables.scss @@ -44,3 +44,19 @@ $kendo-media-player-titlebar-border: null !default; /// The gradient of the MediaPlayer title. /// @group mediaplayer $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; + +@forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with ( + $kendo-media-player-border-width: $kendo-media-player-border-width, + $kendo-media-player-font-family: $kendo-media-player-font-family, + $kendo-media-player-font-size: $kendo-media-player-font-size, + $kendo-media-player-line-height: $kendo-media-player-line-height, + $kendo-media-player-bg: $kendo-media-player-bg, + $kendo-media-player-text: $kendo-media-player-text, + $kendo-media-player-border: $kendo-media-player-border, + $kendo-media-player-titlebar-padding-x: $kendo-media-player-titlebar-padding-x, + $kendo-media-player-titlebar-padding-y: $kendo-media-player-titlebar-padding-y, + $kendo-media-player-titlebar-bg: $kendo-media-player-titlebar-bg, + $kendo-media-player-titlebar-text: $kendo-media-player-titlebar-text, + $kendo-media-player-titlebar-border: $kendo-media-player-titlebar-border, + $kendo-media-player-titlebar-gradient: $kendo-media-player-titlebar-gradient +); diff --git a/packages/default/scss/menu-button/_layout.scss b/packages/default/scss/menu-button/_layout.scss index 4c0f330387a..6dc93598909 100644 --- a/packages/default/scss/menu-button/_layout.scss +++ b/packages/default/scss/menu-button/_layout.scss @@ -1,35 +1,4 @@ -@use "./_variables.scss" as *; -@use "../button/_variables.scss" as *; - -@mixin kendo-menu-button--layout-base() { - - // Menu button - .k-menu-button, - .k-dropdown-button { - aspect-ratio: auto; - outline: 0; - display: inline-flex; - flex-flow: row nowrap; - vertical-align: middle; - - > .k-button-arrow { - margin-inline-start: calc( #{$kendo-menu-button-arrow-padding-x} * -1 ); - margin-inline-end: calc( #{$kendo-button-padding-x} * -1 ); - padding-left: $kendo-menu-button-arrow-padding-x; - padding-right: $kendo-menu-button-arrow-padding-x; - flex: none; - display: inline-flex; - align-items: center; - justify-content: center; - } - - &.k-icon-button > .k-button-arrow { - margin-inline-start: 0; - margin-inline-end: calc( #{$kendo-button-padding-y} * -1 ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/menu-button/_layout.scss" as *; @mixin kendo-menu-button--layout() { diff --git a/packages/default/scss/menu-button/_theme.scss b/packages/default/scss/menu-button/_theme.scss index b8f4b97bea6..27b6723b505 100644 --- a/packages/default/scss/menu-button/_theme.scss +++ b/packages/default/scss/menu-button/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-menu-button--theme-base() { - - // Menu button - .k-menu-button {} - -} +@use "@progress/kendo-theme-core/scss/components/menu-button/_theme.scss" as *; @mixin kendo-menu-button--theme() { diff --git a/packages/default/scss/menu-button/_variables.scss b/packages/default/scss/menu-button/_variables.scss index 7d65b30e0f1..6ecd4648a1e 100644 --- a/packages/default/scss/menu-button/_variables.scss +++ b/packages/default/scss/menu-button/_variables.scss @@ -5,3 +5,7 @@ /// The horizontal padding of the button arrow in the Menu Button.. /// @group menu-button $kendo-menu-button-arrow-padding-x: $kendo-button-padding-y !default; + +@forward "@progress/kendo-theme-core/scss/components/menu-button/_variables.scss" with ( + $kendo-menu-button-arrow-padding-x: $kendo-menu-button-arrow-padding-x +); diff --git a/packages/default/scss/menu/_layout.scss b/packages/default/scss/menu/_layout.scss index 3ac4ee2bfa4..cc49c0c0267 100644 --- a/packages/default/scss/menu/_layout.scss +++ b/packages/default/scss/menu/_layout.scss @@ -1,323 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../icons/_variables.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-menu--layout-base() { - - // Menu bar - .k-menu-bar { - border-width: $kendo-menu-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-menu-font-family; - font-size: $kendo-menu-font-size; - line-height: $kendo-menu-line-height; - display: flex; - flex-wrap: nowrap; - align-items: stretch; - position: relative; - cursor: default; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - .k-menu { @extend .k-menu-bar !optional; } - - // Menu item - .k-menu-item { - border-width: 0; - outline: 0; - display: flex; - flex-flow: column nowrap; - flex: none; - position: relative; - user-select: none; - - &.k-selected { - font-weight: $kendo-menu-item-selected-font-weight; - } - } - .k-menu-item-content { - display: block; - height: auto; - overflow: visible; - - .k-actions { - margin-top: 0; - } - } - - - // Menu link - .k-menu-link { - padding-block: $kendo-menu-item-padding-y; - padding-inline: $kendo-menu-item-padding-x; - outline: 0; - color: inherit; - display: flex; - flex-flow: row nowrap; - flex: 1 1 auto; - gap: $kendo-menu-item-icon-spacing; - align-items: center; - position: relative; - white-space: nowrap; - cursor: pointer; - } - - - // Menu item text - .k-menu-link-text { - display: flex; - flex-flow: row nowrap; - flex: 1 1 auto; - overflow: hidden; - text-overflow: ellipsis; - } - - - // Expand arrow - .k-menu-expand-arrow { - margin-inline-end: calc( #{$kendo-icon-spacing} * -1 ); - display: inline-flex; - flex-flow: row wrap; - align-items: center; - flex: none; - position: relative; - } - - - // Orientation -- horizontal - .k-menu-horizontal { - flex-direction: row; - - > .k-menu-item + .k-menu-item { - margin-inline-start: $kendo-menu-item-spacing; - } - - > .k-separator { - margin-block: $kendo-menu-separator-margin-block; - margin-inline: $kendo-menu-separator-margin-inline; - width: 0; - height: auto; - border-width: 0 0 0 1px; - border-style: solid; - } - } - - - // Orientation -- vertical - .k-menu-vertical { - flex-direction: column; - width: 100%; - - > .k-menu-item + .k-menu-item { - margin-top: $kendo-menu-item-spacing; - } - - > .k-menu-item > .k-menu-link { - padding-block: $kendo-menu-popup-item-padding-y; - padding-inline: $kendo-menu-popup-item-padding-x; - padding-inline-end: $kendo-menu-popup-item-padding-end; - } - - > .k-menu-item > .k-menu-link > .k-menu-expand-arrow { - margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start; - margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end; - } - - > .k-separator { - margin-block: $kendo-menu-separator-margin-block; - margin-inline: 0; - height: 0; - border-width: 1px 0 0; - border-style: solid; - display: block; - } - } - - - // Menu popup - .k-menu-popup { - padding-block: $kendo-menu-popup-padding-y; - padding-inline: $kendo-menu-popup-padding-x; - box-sizing: border-box; - border-width: $kendo-menu-popup-border-width; - border-style: solid; - overflow: auto; - max-height: 80vh; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .k-menu-item { - font-weight: initial; - } - } - - - // Sub menu - .k-menu-group { - margin: 0; - padding: 0; - list-style: none; - display: flex; - flex-flow: column nowrap; - position: absolute; - - .k-menu-item + .k-menu-item { - margin-top: $kendo-menu-popup-item-spacing; - } - - .k-separator { - margin-block: $kendo-menu-separator-margin-inline; - margin-inline: 0; - height: 0; - border-width: 1px 0 0; - border-style: solid; - display: block; - } - } - .k-menu-popup .k-menu-group { - position: relative; - } - - - // Sizes - .k-menu-group-sm { - font-size: $kendo-menu-popup-sm-font-size; - line-height: $kendo-menu-popup-sm-line-height; - - // jquery popup overrides those - .k-menu-item { - font-size: $kendo-menu-popup-sm-font-size; - line-height: $kendo-menu-popup-sm-line-height; - } - - .k-menu-link { - padding-block: $kendo-menu-popup-sm-item-padding-y; - padding-inline: $kendo-menu-popup-sm-item-padding-x; - padding-inline-end: $kendo-menu-popup-sm-item-padding-end; - } - - .k-menu-expand-arrow { - margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start; - margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end; - } - } - .k-menu-group-md { - font-size: $kendo-menu-popup-md-font-size; - line-height: $kendo-menu-popup-md-line-height; - - // jquery popup overrides those - .k-menu-item { - font-size: $kendo-menu-popup-md-font-size; - line-height: $kendo-menu-popup-md-line-height; - } - - .k-menu-link { - padding-block: $kendo-menu-popup-md-item-padding-y; - padding-inline: $kendo-menu-popup-md-item-padding-x; - padding-inline-end: $kendo-menu-popup-md-item-padding-end; - } - - .k-menu-expand-arrow { - margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start; - margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end; - } - } - .k-menu-group-lg { - font-size: $kendo-menu-popup-lg-font-size; - line-height: $kendo-menu-popup-lg-line-height; - - // jquery popup overrides those - .k-menu-item { - font-size: $kendo-menu-popup-lg-font-size; - line-height: $kendo-menu-popup-lg-line-height; - } - - .k-menu-link { - padding-block: $kendo-menu-popup-lg-item-padding-y; - padding-inline: $kendo-menu-popup-lg-item-padding-x; - padding-inline-end: $kendo-menu-popup-lg-item-padding-end; - } - - .k-menu-expand-arrow { - margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start; - margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end; - } - } - - - // Context menu - .k-popups-wrapper { - position: relative; - border: 0; - margin: 0; - padding: 0; - } - .k-context-menu { - margin: 0; - padding-block: $kendo-menu-popup-padding-y; - padding-inline: $kendo-menu-popup-padding-x; - border-width: $kendo-menu-popup-border-width; - border-style: solid; - - &.k-menu-horizontal { - padding-block: $kendo-menu-popup-padding-x; - padding-inline: $kendo-menu-popup-padding-y; - } - } - .k-animation-container .k-context-menu.k-menu-horizontal { - // kendo-jquery adds `display: block` via js and we need to override it. - display: flex !important; // stylelint-disable-line declaration-no-important - flex-wrap: nowrap; - } - .k-context-menu-popup { - z-index: 12000; - - .k-context-menu { - border-width: 0; - } - } - .k-popup .k-context-menu, - .k-context-menu-popup .k-context-menu { - border-width: 0; - } - - - // Scrolling - .k-menu-scroll-wrapper { - margin: 0; - padding: 0; - border: 0; - position: relative; - display: flex; - align-items: center; - - .k-menu { - overflow: hidden; - flex-wrap: nowrap; - } - } - - .k-menu-scroll-wrapper-vertical { - flex-direction: column; - - > .k-menu-scroll-button { - width: 100%; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/menu/_layout.scss" as *; @mixin kendo-menu--layout() { diff --git a/packages/default/scss/menu/_theme.scss b/packages/default/scss/menu/_theme.scss index b0c255c6d22..df341176c2e 100644 --- a/packages/default/scss/menu/_theme.scss +++ b/packages/default/scss/menu/_theme.scss @@ -1,143 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-menu--theme-base() { - - .k-menu:not(.k-context-menu) { - @include fill( - $kendo-menu-text, - $kendo-menu-bg, - $kendo-menu-border, - $kendo-menu-gradient - ); - - > .k-item { - @include fill( - $kendo-menu-item-text, - $kendo-menu-item-bg, - $kendo-menu-item-border, - $kendo-menu-item-gradient - ); - - &:hover, - &.k-hover { - @include fill( - $kendo-menu-item-hover-text, - $kendo-menu-item-hover-bg, - $kendo-menu-item-hover-border, - $kendo-menu-item-hover-gradient - ); - } - - &:active, - &.k-active { - @include fill( - $kendo-menu-item-active-text, - $kendo-menu-item-active-bg, - $kendo-menu-item-active-border, - $kendo-menu-item-active-gradient - ); - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-menu-item-focus-shadow, true ); - } - - &.k-selected { - @include fill( - $kendo-menu-item-selected-text, - $kendo-menu-item-selected-bg, - $kendo-menu-item-selected-border, - $kendo-menu-item-selected-gradient - ); - } - } - - > .k-separator { - @include fill( - $border: $kendo-menu-separator-border - ); - } - } - - .k-menu-group, - .k-menu.k-context-menu { - @include fill( - $kendo-menu-popup-text, - $kendo-menu-popup-bg, - $kendo-menu-popup-border, - $kendo-menu-popup-gradient - ); - - .k-item > .k-link { - @include fill( - $kendo-menu-popup-item-text, - $kendo-menu-popup-item-bg, - $kendo-menu-popup-item-border, - $kendo-menu-popup-item-gradient - ); - - &:hover, - &.k-hover { - @include fill( - $kendo-menu-popup-item-hover-text, - $kendo-menu-popup-item-hover-bg, - $kendo-menu-popup-item-hover-border, - $kendo-menu-popup-item-hover-gradient - ); - } - - &:active, - &.k-active, - &.k-selected { - @include fill( - $kendo-menu-popup-item-active-text, - $kendo-menu-popup-item-active-bg, - $kendo-menu-popup-item-active-border, - $kendo-menu-popup-item-active-gradient - ); - } - } - - .k-item:focus, - .k-item.k-focus { - > .k-link { - @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true ); - } - } - - > .k-separator { - @include fill( - $border: $kendo-menu-separator-border - ); - } - } - - - // Scrolling - .k-menu-scroll-wrapper .k-menu-scroll-button { - @include fill( - $kendo-menu-scroll-button-text, - $kendo-menu-scroll-button-bg, - $kendo-menu-scroll-button-border, - $kendo-menu-scroll-button-gradient - ); - - &:hover { - @include fill( - $kendo-menu-scroll-button-hover-text, - $kendo-menu-scroll-button-hover-bg, - $kendo-menu-scroll-button-hover-border, - $kendo-menu-scroll-button-hover-gradient - ); - - &::before { - opacity: 0; - } - } - } -} +@use "@progress/kendo-theme-core/scss/components/menu/_theme.scss" as *; @mixin kendo-menu--theme() { diff --git a/packages/default/scss/menu/_variables.scss b/packages/default/scss/menu/_variables.scss index 66f154e9826..be5afd486bf 100644 --- a/packages/default/scss/menu/_variables.scss +++ b/packages/default/scss/menu/_variables.scss @@ -271,3 +271,94 @@ $kendo-menu-popup-item-active-gradient: null !default; /// The base shadow of focused Menu item in popup. /// @group menu $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default; + +@forward "@progress/kendo-theme-core/scss/components/menu/_variables.scss" with ( + $kendo-menu-border-width: $kendo-menu-border-width, + $kendo-menu-font-family: $kendo-menu-font-family, + $kendo-menu-font-size: $kendo-menu-font-size, + $kendo-menu-line-height: $kendo-menu-line-height, + $kendo-menu-bg: $kendo-menu-bg, + $kendo-menu-text: $kendo-menu-text, + $kendo-menu-border: $kendo-menu-border, + $kendo-menu-gradient: $kendo-menu-gradient, + $kendo-menu-item-padding-x: $kendo-menu-item-padding-x, + $kendo-menu-item-padding-y: $kendo-menu-item-padding-y, + $kendo-menu-item-spacing: $kendo-menu-item-spacing, + $kendo-menu-item-icon-spacing: $kendo-menu-item-icon-spacing, + $kendo-menu-item-selected-font-weight: $kendo-menu-item-selected-font-weight, + $kendo-menu-item-bg: $kendo-menu-item-bg, + $kendo-menu-item-text: $kendo-menu-item-text, + $kendo-menu-item-border: $kendo-menu-item-border, + $kendo-menu-item-gradient: $kendo-menu-item-gradient, + $kendo-menu-item-hover-bg: $kendo-menu-item-hover-bg, + $kendo-menu-item-hover-text: $kendo-menu-item-hover-text, + $kendo-menu-item-hover-border: $kendo-menu-item-hover-border, + $kendo-menu-item-hover-gradient: $kendo-menu-item-hover-gradient, + $kendo-menu-item-active-bg: $kendo-menu-item-active-bg, + $kendo-menu-item-active-text: $kendo-menu-item-active-text, + $kendo-menu-item-active-border: $kendo-menu-item-active-border, + $kendo-menu-item-active-gradient: $kendo-menu-item-active-gradient, + $kendo-menu-item-focus-shadow: $kendo-menu-item-focus-shadow, + $kendo-menu-item-selected-bg: $kendo-menu-item-selected-bg, + $kendo-menu-item-selected-text: $kendo-menu-item-selected-text, + $kendo-menu-item-selected-border: $kendo-menu-item-selected-border, + $kendo-menu-item-selected-gradient: $kendo-menu-item-selected-gradient, + $kendo-menu-scroll-button-bg: $kendo-menu-scroll-button-bg, + $kendo-menu-scroll-button-text: $kendo-menu-scroll-button-text, + $kendo-menu-scroll-button-border: $kendo-menu-scroll-button-border, + $kendo-menu-scroll-button-gradient: $kendo-menu-scroll-button-gradient, + $kendo-menu-scroll-button-hover-bg: $kendo-menu-scroll-button-hover-bg, + $kendo-menu-scroll-button-hover-text: $kendo-menu-scroll-button-hover-text, + $kendo-menu-scroll-button-hover-border: $kendo-menu-scroll-button-hover-border, + $kendo-menu-scroll-button-hover-gradient: $kendo-menu-scroll-button-hover-gradient, + $kendo-menu-separator-margin-inline: $kendo-menu-separator-margin-inline, + $kendo-menu-separator-margin-block: $kendo-menu-separator-margin-block, + $kendo-menu-separator-border: $kendo-menu-separator-border, + $kendo-menu-popup-padding-x: $kendo-menu-popup-padding-x, + $kendo-menu-popup-padding-y: $kendo-menu-popup-padding-y, + $kendo-menu-popup-border-width: $kendo-menu-popup-border-width, + $kendo-menu-popup-font-size: $kendo-menu-popup-font-size, + $kendo-menu-popup-sm-font-size: $kendo-menu-popup-sm-font-size, + $kendo-menu-popup-md-font-size: $kendo-menu-popup-md-font-size, + $kendo-menu-popup-lg-font-size: $kendo-menu-popup-lg-font-size, + $kendo-menu-popup-line-height: $kendo-menu-popup-line-height, + $kendo-menu-popup-sm-line-height: $kendo-menu-popup-sm-line-height, + $kendo-menu-popup-md-line-height: $kendo-menu-popup-md-line-height, + $kendo-menu-popup-lg-line-height: $kendo-menu-popup-lg-line-height, + $kendo-menu-popup-bg: $kendo-menu-popup-bg, + $kendo-menu-popup-text: $kendo-menu-popup-text, + $kendo-menu-popup-border: $kendo-menu-popup-border, + $kendo-menu-popup-gradient: $kendo-menu-popup-gradient, + $kendo-menu-popup-item-padding-x: $kendo-menu-popup-item-padding-x, + $kendo-menu-popup-sm-item-padding-x: $kendo-menu-popup-sm-item-padding-x, + $kendo-menu-popup-md-item-padding-x: $kendo-menu-popup-md-item-padding-x, + $kendo-menu-popup-lg-item-padding-x: $kendo-menu-popup-lg-item-padding-x, + $kendo-menu-popup-item-padding-y: $kendo-menu-popup-item-padding-y, + $kendo-menu-popup-sm-item-padding-y: $kendo-menu-popup-sm-item-padding-y, + $kendo-menu-popup-md-item-padding-y: $kendo-menu-popup-md-item-padding-y, + $kendo-menu-popup-lg-item-padding-y: $kendo-menu-popup-lg-item-padding-y, + $kendo-menu-popup-item-padding-end: $kendo-menu-popup-item-padding-end, + $kendo-menu-popup-sm-item-padding-end: $kendo-menu-popup-sm-item-padding-end, + $kendo-menu-popup-md-item-padding-end: $kendo-menu-popup-md-item-padding-end, + $kendo-menu-popup-lg-item-padding-end: $kendo-menu-popup-lg-item-padding-end, + $kendo-menu-popup-sm-item-icon-margin-start: $kendo-menu-popup-sm-item-icon-margin-start, + $kendo-menu-popup-md-item-icon-margin-start: $kendo-menu-popup-md-item-icon-margin-start, + $kendo-menu-popup-lg-item-icon-margin-start: $kendo-menu-popup-lg-item-icon-margin-start, + $kendo-menu-popup-sm-item-icon-margin-end: $kendo-menu-popup-sm-item-icon-margin-end, + $kendo-menu-popup-md-item-icon-margin-end: $kendo-menu-popup-md-item-icon-margin-end, + $kendo-menu-popup-lg-item-icon-margin-end: $kendo-menu-popup-lg-item-icon-margin-end, + $kendo-menu-popup-item-spacing: $kendo-menu-popup-item-spacing, + $kendo-menu-popup-item-bg: $kendo-menu-popup-item-bg, + $kendo-menu-popup-item-text: $kendo-menu-popup-item-text, + $kendo-menu-popup-item-border: $kendo-menu-popup-item-border, + $kendo-menu-popup-item-gradient: $kendo-menu-popup-item-gradient, + $kendo-menu-popup-item-hover-bg: $kendo-menu-popup-item-hover-bg, + $kendo-menu-popup-item-hover-text: $kendo-menu-popup-item-hover-text, + $kendo-menu-popup-item-hover-border: $kendo-menu-popup-item-hover-border, + $kendo-menu-popup-item-hover-gradient: $kendo-menu-popup-item-hover-gradient, + $kendo-menu-popup-item-active-bg: $kendo-menu-popup-item-active-bg, + $kendo-menu-popup-item-active-text: $kendo-menu-popup-item-active-text, + $kendo-menu-popup-item-active-border: $kendo-menu-popup-item-active-border, + $kendo-menu-popup-item-active-gradient: $kendo-menu-popup-item-active-gradient, + $kendo-menu-popup-item-focus-shadow: $kendo-menu-popup-item-focus-shadow +); diff --git a/packages/default/scss/messagebox/_layout.scss b/packages/default/scss/messagebox/_layout.scss index 1cfd4d41533..d740e28defc 100644 --- a/packages/default/scss/messagebox/_layout.scss +++ b/packages/default/scss/messagebox/_layout.scss @@ -1,26 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-messagebox--layout-base() { - - // Base - .k-messagebox { - margin: $kendo-message-box-margin; - padding-block: $kendo-message-box-padding-y; - padding-inline: $kendo-message-box-padding-x; - border-width: $kendo-message-box-border-width; - border-style: solid; - box-sizing: border-box; - font-size: $kendo-message-box-font-size; - line-height: $kendo-message-box-line-height; - - a { - color: inherit; - font-style: $kendo-message-box-link-font-style; - text-decoration: $kendo-message-box-link-text-decoration; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/messagebox/_layout.scss" as *; @mixin kendo-messagebox--layout() { diff --git a/packages/default/scss/messagebox/_theme.scss b/packages/default/scss/messagebox/_theme.scss index 090220c43f0..144232ecb1a 100644 --- a/packages/default/scss/messagebox/_theme.scss +++ b/packages/default/scss/messagebox/_theme.scss @@ -1,28 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-messagebox--theme-base() { - - @each $color-name, $color in $kendo-theme-colors { - .k-messagebox-#{$color-name} { - @if $color-name == "inverse" { - @include fill( - if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), - if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), - if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level )) - ); - } @else { - @include fill( - if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), - if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), - if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level )) - ); - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/messagebox/_theme.scss" as *; @mixin kendo-messagebox--theme() { diff --git a/packages/default/scss/messagebox/_variables.scss b/packages/default/scss/messagebox/_variables.scss index 1d772be2ad6..05705d43af3 100644 --- a/packages/default/scss/messagebox/_variables.scss +++ b/packages/default/scss/messagebox/_variables.scss @@ -15,3 +15,17 @@ $kendo-message-box-border-level: -9 !default; $kendo-message-box-link-font-style: italic !default; $kendo-message-box-link-text-decoration: underline !default; + +@forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with ( + $kendo-message-box-margin: $kendo-message-box-margin, + $kendo-message-box-padding-x: $kendo-message-box-padding-x, + $kendo-message-box-padding-y: $kendo-message-box-padding-y, + $kendo-message-box-border-width: $kendo-message-box-border-width, + $kendo-message-box-font-size: $kendo-message-box-font-size, + $kendo-message-box-line-height: $kendo-message-box-line-height, + $kendo-message-box-bg-level: $kendo-message-box-bg-level, + $kendo-message-box-text-level: $kendo-message-box-text-level, + $kendo-message-box-border-level: $kendo-message-box-border-level, + $kendo-message-box-link-font-style: $kendo-message-box-link-font-style, + $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration +); diff --git a/packages/default/scss/multiselect/_layout.scss b/packages/default/scss/multiselect/_layout.scss index 0e8b506a1ae..284e3c83730 100644 --- a/packages/default/scss/multiselect/_layout.scss +++ b/packages/default/scss/multiselect/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-multiselect--layout-base() { - - // Multiselect - .k-multiselect {} - -} +@use "@progress/kendo-theme-core/scss/components/multiselect/_layout.scss" as *; @mixin kendo-multiselect--layout() { diff --git a/packages/default/scss/multiselect/_theme.scss b/packages/default/scss/multiselect/_theme.scss index 7c90de4106d..3084b95233d 100644 --- a/packages/default/scss/multiselect/_theme.scss +++ b/packages/default/scss/multiselect/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-multiselect--theme-base() { - - // Multiselect - .k-multiselect {} - -} +@use "@progress/kendo-theme-core/scss/components/multiselect/_theme.scss" as *; @mixin kendo-multiselect--theme() { diff --git a/packages/default/scss/no-data/_layout.scss b/packages/default/scss/no-data/_layout.scss index 1d9a4e3c349..d4b9d30c1db 100644 --- a/packages/default/scss/no-data/_layout.scss +++ b/packages/default/scss/no-data/_layout.scss @@ -1,25 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-no-data--layout-base() { - - .k-no-data { - min-height: $kendo-no-data-min-height; - display: flex; - align-items: center; - justify-content: center; - font-weight: lighter; - text-align: center; - white-space: normal; - } - - - // Alias - .k-nodata { - @extend .k-no-data !optional; - } - - -} +@use "@progress/kendo-theme-core/scss/components/no-data/_layout.scss" as *; @mixin kendo-no-data--layout() { @include kendo-no-data--layout-base(); diff --git a/packages/default/scss/no-data/_theme.scss b/packages/default/scss/no-data/_theme.scss index 1b1dcdf85e3..73625738abf 100644 --- a/packages/default/scss/no-data/_theme.scss +++ b/packages/default/scss/no-data/_theme.scss @@ -1,13 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-no-data--theme-base() { - - .k-no-data { - color: $kendo-no-data-text; - } - -} - +@use "@progress/kendo-theme-core/scss/components/no-data/_theme.scss" as *; @mixin kendo-no-data--theme() { @include kendo-no-data--theme-base(); diff --git a/packages/default/scss/no-data/_variables.scss b/packages/default/scss/no-data/_variables.scss index cd3fec182c3..79a6b11ec05 100644 --- a/packages/default/scss/no-data/_variables.scss +++ b/packages/default/scss/no-data/_variables.scss @@ -7,3 +7,8 @@ $kendo-no-data-min-height: 140px !default; /// The color of the 'No Data' text. /// @group no-data $kendo-no-data-text: $kendo-subtle-text !default; + +@forward "@progress/kendo-theme-core/scss/components/no-data/_variables.scss" with ( + $kendo-no-data-min-height: $kendo-no-data-min-height, + $kendo-no-data-text: $kendo-no-data-text +); diff --git a/packages/default/scss/notification/_functions.scss b/packages/default/scss/notification/_functions.scss new file mode 100644 index 00000000000..ab43e621d70 --- /dev/null +++ b/packages/default/scss/notification/_functions.scss @@ -0,0 +1,17 @@ +@use "sass:map"; +@use "../core/_index.scss" as *; +@use "../core/functions/index.import.scss" as *; + +@function notification-theme( $colors ) { + $_theme: (); + + @each $name, $color in $colors { + $_theme: map.merge(( $name: ( + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + background-color: $color, + border: $color, + )), $_theme ); + } + + @return $_theme; +} diff --git a/packages/default/scss/notification/_layout.scss b/packages/default/scss/notification/_layout.scss index c0488482e91..0af87c40e18 100644 --- a/packages/default/scss/notification/_layout.scss +++ b/packages/default/scss/notification/_layout.scss @@ -1,76 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-notification--layout-base() { - - // Base - .k-notification-group { - max-height: 100%; - display: inline-flex; - flex-flow: column-reverse wrap; - position: fixed; - z-index: 1000; - gap: $kendo-notification-group-gap 0; - } - - // Needed due to the specifics in the implementation of animations in Angular - .k-notification-container-animating { - overflow: hidden; - } - - .k-notification { - @include border-radius( $kendo-notification-border-radius ); - padding-block: $kendo-notification-padding-y; - padding-inline: $kendo-notification-padding-x; - border-width: $kendo-notification-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-notification-font-family; - font-size: $kendo-notification-font-size; - line-height: $kendo-notification-line-height; - cursor: default; - position: relative; - display: flex; - align-items: center; - justify-content: center; - gap: $kendo-notification-icon-spacing; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - > .k-notification-content { - flex: 1 1 auto; - } - - > .k-notification-status { - flex-shrink: 0; - } - } - - .k-notification-actions { - flex: none; - display: flex; - gap: $kendo-notification-icon-spacing; - flex-flow: row nowrap; - align-items: center; - align-self: center; - cursor: pointer; - } - .k-notification-action { - flex: none; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-self: center; - } - -} +@use "@progress/kendo-theme-core/scss/components/notification/_layout.scss" as *; @mixin kendo-notification--layout() { diff --git a/packages/default/scss/notification/_theme.scss b/packages/default/scss/notification/_theme.scss index f20a9b711e0..99bf6bf836a 100644 --- a/packages/default/scss/notification/_theme.scss +++ b/packages/default/scss/notification/_theme.scss @@ -1,30 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-notification--theme-base() { - - // Theme - .k-notification { - @include fill( - $kendo-notification-text, - $kendo-notification-bg, - $kendo-notification-border - ); - @include box-shadow( $kendo-notification-shadow ); - } - - @each $name, $props in $kendo-notification-theme { - .k-notification-#{$name} { - @include fill( - map.get( $props, color ), - map.get( $props, background-color ), - map.get( $props, border ) - ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/notification/_theme.scss" as *; @mixin kendo-notification--theme() { diff --git a/packages/default/scss/notification/_variables.scss b/packages/default/scss/notification/_variables.scss index b9fb415df5a..ce0ee2d5ece 100644 --- a/packages/default/scss/notification/_variables.scss +++ b/packages/default/scss/notification/_variables.scss @@ -1,4 +1,5 @@ @use "sass:map"; +@use "./_functions.scss" as *; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; @use "../popup/_variables.scss" as *; @@ -48,23 +49,27 @@ $kendo-notification-shadow: $kendo-popup-shadow !default; /// @group notification $kendo-notification-icon-spacing: $kendo-icon-spacing !default; -@function notification-theme( $colors ) { - $_theme: (); - - @each $name, $color in $colors { - $_theme: map.merge(( $name: ( - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), - background-color: $color, - border: $color, - )), $_theme ); - } - - @return $_theme; -} - /// The theme colors map for the Notification. /// @group notification $kendo-notification-theme-colors: $kendo-theme-colors !default; /// The generated theme colors map for the Notification. /// @group notification $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default; + +@forward "@progress/kendo-theme-core/scss/components/notification/_variables.scss" with ( + $kendo-notification-group-gap: $kendo-notification-group-gap, + $kendo-notification-padding-x: $kendo-notification-padding-x, + $kendo-notification-padding-y: $kendo-notification-padding-y, + $kendo-notification-border-width: $kendo-notification-border-width, + $kendo-notification-border-radius: $kendo-notification-border-radius, + $kendo-notification-font-family: $kendo-notification-font-family, + $kendo-notification-font-size: $kendo-notification-font-size, + $kendo-notification-line-height: $kendo-notification-line-height, + $kendo-notification-bg: $kendo-notification-bg, + $kendo-notification-text: $kendo-notification-text, + $kendo-notification-border: $kendo-notification-border, + $kendo-notification-shadow: $kendo-notification-shadow, + $kendo-notification-icon-spacing: $kendo-notification-icon-spacing, + $kendo-notification-theme-colors: $kendo-notification-theme-colors, + $kendo-notification-theme: $kendo-notification-theme +); diff --git a/packages/default/scss/numerictextbox/_layout.scss b/packages/default/scss/numerictextbox/_layout.scss index 20de66bd45e..68e05e414dd 100644 --- a/packages/default/scss/numerictextbox/_layout.scss +++ b/packages/default/scss/numerictextbox/_layout.scss @@ -1,13 +1,4 @@ -@mixin kendo-numeric-textbox--layout-base() { - - // Numeric textbox - .k-numeric-textbox {} - - - // Alias - .k-numerictextbox { @extend .k-numeric-textbox !optional; } - -} +@use "@progress/kendo-theme-core/scss/components/numerictextbox/_layout.scss" as *; @mixin kendo-numeric-textbox--layout() { diff --git a/packages/default/scss/numerictextbox/_theme.scss b/packages/default/scss/numerictextbox/_theme.scss index 573910390a9..76c0567fe9d 100644 --- a/packages/default/scss/numerictextbox/_theme.scss +++ b/packages/default/scss/numerictextbox/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-numeric-textbox--theme-base() { - - // Numeric textbox - .k-numeric-textbox {} - -} +@use "@progress/kendo-theme-core/scss/components/numerictextbox/_theme.scss" as *; @mixin kendo-numeric-textbox--theme() { diff --git a/packages/default/scss/orgchart/_layout.scss b/packages/default/scss/orgchart/_layout.scss index 19db1b372a0..c0ec8698dfd 100644 --- a/packages/default/scss/orgchart/_layout.scss +++ b/packages/default/scss/orgchart/_layout.scss @@ -1,115 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-orgchart--layout-base() { - - // OrgChart - .k-orgchart { - width: 100%; - padding-block: $kendo-orgchart-padding-x; - padding-inline: $kendo-orgchart-padding-y; - box-sizing: border-box; - font-size: $kendo-orgchart-font-size; - font-family: $kendo-orgchart-font-family; - line-height: $kendo-orgchart-line-height; - overflow: auto; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - .k-orgchart-container { - margin-block: 0; - margin-inline: auto; - width: 100%; - height: 100%; - position: relative; - } - - // Nodes - .k-orgchart-group { - gap: $kendo-orgchart-group-gap; - } - - .k-orgchart-group.k-vstack > .k-orgchart-node-container { - gap: 0; - } - - .k-orgchart-node-container { - gap: $kendo-orgchart-node-gap; - } - - .k-orgchart-node-group-container { - @include border-radius( $kendo-orgchart-node-group-border-radius ); - padding-block: $kendo-orgchart-node-group-padding-y; - padding-inline: $kendo-orgchart-node-group-padding-x; - border-width: $kendo-orgchart-node-group-border-width; - border-style: solid; - outline: 0; - } - - .k-orgchart-node-group-title { - margin: 0 0 $kendo-orgchart-node-group-title-margin-bottom; - font-size: $kendo-orgchart-node-group-title-font-size; - line-height: $kendo-orgchart-node-group-title-line-height; - } - - .k-orgchart-node-group-subtitle { - margin: 0 0 $kendo-orgchart-node-group-subtitle-margin-bottom; - font-size: $kendo-orgchart-node-group-subtitle-font-size; - } - - // Card - .k-orgchart-card { - width: $kendo-orgchart-card-width; - border-width: $kendo-orgchart-card-border-width; - - .k-card-title { - margin: 0 0 $kendo-orgchart-card-title-margin-bottom; - font-size: $kendo-orgchart-card-title-font-size; - } - - .k-card-subtitle { - margin: 0 0 $kendo-orgchart-card-subtitle-margin-bottom; - font-size: $kendo-orgchart-card-subtitle-font-size; - } - - .k-card-body { - border-width: $kendo-orgchart-card-body-border-width; - border-style: solid; - flex-grow: 0; - } - .k-card-body .k-card-title-wrap { - margin: 0 $kendo-orgchart-card-body-vbox-margin-right 0 0; - min-width: 0; - min-height: $kendo-orgchart-card-body-vbox-min-height; - } - } - - // Lines - .k-orgchart-line { - background-color: currentColor; - } - - .k-orgchart-line-h { - height: $kendo-orgchart-line-size; - } - - .k-orgchart-line-v { - margin-block: 0; - margin-inline: auto; - width: $kendo-orgchart-line-size; - height: $kendo-orgchart-line-v-height; - } - - // Buttons - .k-orgchart-button { - z-index: 1; - } -} +@use "@progress/kendo-theme-core/scss/components/orgchart/_layout.scss" as *; @mixin kendo-orgchart--layout() { diff --git a/packages/default/scss/orgchart/_theme.scss b/packages/default/scss/orgchart/_theme.scss index d3180d8e8a7..4c004877b60 100644 --- a/packages/default/scss/orgchart/_theme.scss +++ b/packages/default/scss/orgchart/_theme.scss @@ -1,56 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-orgchart--theme-base() { - - // OrgChart - .k-orgchart { - @include fill ( - $kendo-orgchart-text, - $kendo-orgchart-bg, - $kendo-orgchart-border - ); - } - - // Card - .k-orgchart-card { - @include box-shadow( $kendo-orgchart-card-shadow ); - - .k-card-body { - @include fill( $border: $kendo-orgchart-card-body-border-color ); - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-orgchart-card-focus-shadow ); - } - } - - // Group - .k-orgchart-node-group-container { - @include fill ( - $kendo-orgchart-node-group-text, - $kendo-orgchart-node-group-bg, - $kendo-orgchart-node-group-border - ); - } - .k-orgchart-node-group-container:focus, - .k-orgchart-node-group-container.k-focus { - @include focus-indicator( $kendo-orgchart-node-group-focus-shadow ); - @include fill ( $border: $kendo-orgchart-node-group-focus-border ); - } - - .k-orgchart-node-group-subtitle { - @include fill( $color: $kendo-orgchart-node-group-subtitle-text ); - } - - // Lines - .k-orgchart-line-h, - .k-orgchart-line-v { - @include fill( $color: $kendo-orgchart-line-fill ); - } - -} +@use "@progress/kendo-theme-core/scss/components/orgchart/_theme.scss" as *; @mixin kendo-orgchart--theme() { diff --git a/packages/default/scss/orgchart/_variables.scss b/packages/default/scss/orgchart/_variables.scss index 6cf6cfdea5a..6d74f426359 100644 --- a/packages/default/scss/orgchart/_variables.scss +++ b/packages/default/scss/orgchart/_variables.scss @@ -148,3 +148,50 @@ $kendo-orgchart-line-fill: $kendo-base-border !default; /// The height of the OrgChart connecting line. /// @group orgchart $kendo-orgchart-line-v-height: k-spacing(6) !default; + +@forward "@progress/kendo-theme-core/scss/components/orgchart/_variables.scss" with ( + $kendo-orgchart-spacer: $kendo-orgchart-spacer, + $kendo-orgchart-padding-y: $kendo-orgchart-padding-y, + $kendo-orgchart-padding-x: $kendo-orgchart-padding-x, + $kendo-orgchart-font-family: $kendo-orgchart-font-family, + $kendo-orgchart-font-size: $kendo-orgchart-font-size, + $kendo-orgchart-line-height: $kendo-orgchart-line-height, + $kendo-orgchart-bg: $kendo-orgchart-bg, + $kendo-orgchart-text: $kendo-orgchart-text, + $kendo-orgchart-border: $kendo-orgchart-border, + $kendo-orgchart-node-gap: $kendo-orgchart-node-gap, + $kendo-orgchart-group-gap: $kendo-orgchart-group-gap, + $kendo-orgchart-node-container-gap: $kendo-orgchart-node-container-gap, + $kendo-orgchart-node-group-padding-y: $kendo-orgchart-node-group-padding-y, + $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-x, + $kendo-orgchart-node-group-border-width: $kendo-orgchart-node-group-border-width, + $kendo-orgchart-node-group-border-radius: $kendo-orgchart-node-group-border-radius, + $kendo-orgchart-node-group-bg: $kendo-orgchart-node-group-bg, + $kendo-orgchart-node-group-text: $kendo-orgchart-node-group-text, + $kendo-orgchart-node-group-border: $kendo-orgchart-node-group-border, + $kendo-orgchart-node-group-focus-border: $kendo-orgchart-node-group-focus-border, + $kendo-orgchart-node-group-focus-shadow: $kendo-orgchart-node-group-focus-shadow, + $kendo-orgchart-node-group-title-font-size: $kendo-orgchart-node-group-title-font-size, + $kendo-orgchart-node-group-title-margin-bottom: $kendo-orgchart-node-group-title-margin-bottom, + $kendo-orgchart-node-group-title-line-height: $kendo-orgchart-node-group-title-line-height, + $kendo-orgchart-node-group-subtitle-font-size: $kendo-orgchart-node-group-subtitle-font-size, + $kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-node-group-subtitle-margin-bottom, + $kendo-orgchart-node-group-subtitle-text: $kendo-orgchart-node-group-subtitle-text, + $kendo-orgchart-card-width: $kendo-orgchart-card-width, + $kendo-orgchart-card-padding-y: $kendo-orgchart-card-padding-y, + $kendo-orgchart-card-padding-x: $kendo-orgchart-card-padding-x, + $kendo-orgchart-card-border-width: $kendo-orgchart-card-border-width, + $kendo-orgchart-card-shadow: $kendo-orgchart-card-shadow, + $kendo-orgchart-card-focus-shadow: $kendo-orgchart-card-focus-shadow, + $kendo-orgchart-card-title-margin-bottom: $kendo-orgchart-card-title-margin-bottom, + $kendo-orgchart-card-title-font-size: $kendo-orgchart-card-title-font-size, + $kendo-orgchart-card-subtitle-margin-bottom: $kendo-orgchart-card-subtitle-margin-bottom, + $kendo-orgchart-card-subtitle-font-size: $kendo-orgchart-card-subtitle-font-size, + $kendo-orgchart-card-body-border-width: $kendo-orgchart-card-body-border-width, + $kendo-orgchart-card-body-border-color: $kendo-orgchart-card-body-border-color, + $kendo-orgchart-card-body-vbox-margin-right: $kendo-orgchart-card-body-vbox-margin-right, + $kendo-orgchart-card-body-vbox-min-height: $kendo-orgchart-card-body-vbox-min-height, + $kendo-orgchart-line-size: $kendo-orgchart-line-size, + $kendo-orgchart-line-fill: $kendo-orgchart-line-fill, + $kendo-orgchart-line-v-height: $kendo-orgchart-line-v-height +); diff --git a/packages/default/scss/otp/_layout.scss b/packages/default/scss/otp/_layout.scss index 09af6d0a131..b6cd437b028 100644 --- a/packages/default/scss/otp/_layout.scss +++ b/packages/default/scss/otp/_layout.scss @@ -1,40 +1,4 @@ -@use "sass:map"; -@use "./_variables.scss" as *; -@use "../core/_index.scss" as *; -@use "../input/_variables.scss" as *; - -@mixin kendo-otp--layout-base() { - // OTP - .k-otp { - display: flex; - width: min-content; - align-items: center; - flex-direction: row; - - .k-otp-input > .k-input-inner { - text-align: center; - padding-inline: 0; - } - } - - @each $size, $size-props in $kendo-otp-sizes { - $_gap: map.get($size-props, gap); - $_separator-padding-x: map.get($size-props, separator-padding-x); - $_input-width: map.get($size-props, input-width); - - .k-otp-#{$size} { - gap: $_gap; - - .k-otp-input { - min-width: $_input-width; - } - - .k-otp-separator:not(:empty) { - padding-inline: $_separator-padding-x; - } - } - } -} +@use "@progress/kendo-theme-core/scss/components/otp/_layout.scss" as *; @mixin kendo-otp--layout() { @include kendo-otp--layout-base(); diff --git a/packages/default/scss/otp/_theme.scss b/packages/default/scss/otp/_theme.scss index 8da3afa067f..5c3b7f5397e 100644 --- a/packages/default/scss/otp/_theme.scss +++ b/packages/default/scss/otp/_theme.scss @@ -1,11 +1,4 @@ -@use "sass:map"; - -@mixin kendo-otp--theme-base() { - - // OTP - .k-otp {}; - -} +@use "@progress/kendo-theme-core/scss/components/otp/_theme.scss" as *; @mixin kendo-otp--theme() { @include kendo-otp--theme-base(); diff --git a/packages/default/scss/otp/_variables.scss b/packages/default/scss/otp/_variables.scss index 1207a9d23e6..d4008117518 100644 --- a/packages/default/scss/otp/_variables.scss +++ b/packages/default/scss/otp/_variables.scss @@ -59,3 +59,19 @@ $kendo-otp-sizes: ( input-width: $kendo-otp-lg-input-width ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/otp/_variables.scss" with ( + $kendo-otp-gap: $kendo-otp-gap, + $kendo-otp-sm-gap: $kendo-otp-sm-gap, + $kendo-otp-md-gap: $kendo-otp-md-gap, + $kendo-otp-lg-gap: $kendo-otp-lg-gap, + $kendo-otp-separator-padding-x: $kendo-otp-separator-padding-x, + $kendo-otp-sm-separator-padding-x: $kendo-otp-sm-separator-padding-x, + $kendo-otp-md-separator-padding-x: $kendo-otp-md-separator-padding-x, + $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x, + $kendo-otp-input-width: $kendo-otp-input-width, + $kendo-otp-sm-input-width: $kendo-otp-sm-input-width, + $kendo-otp-md-input-width: $kendo-otp-md-input-width, + $kendo-otp-lg-input-width: $kendo-otp-lg-input-width, + $kendo-otp-sizes: $kendo-otp-sizes +); diff --git a/packages/default/scss/overlay/_layout.scss b/packages/default/scss/overlay/_layout.scss index 70ae9a41264..c77fe318b21 100644 --- a/packages/default/scss/overlay/_layout.scss +++ b/packages/default/scss/overlay/_layout.scss @@ -1,19 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-overlay--layout-base() { - - // Overlay - .k-overlay { - width: 100%; - height: 100%; - opacity: $kendo-overlay-opacity; - position: fixed; - top: 0; - left: 0; - z-index: 10001; - } - -} +@use "@progress/kendo-theme-core/scss/components/overlay/_layout.scss" as *; @mixin kendo-overlay--layout() { diff --git a/packages/default/scss/overlay/_theme.scss b/packages/default/scss/overlay/_theme.scss index 3b098fd4765..32289cb3d86 100644 --- a/packages/default/scss/overlay/_theme.scss +++ b/packages/default/scss/overlay/_theme.scss @@ -1,20 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-overlay--theme-base() { - - // Overlay - .k-overlay { - background-color: $kendo-overlay-bg; - } - - - @each $name, $color in $kendo-overlay-theme-colors { - .k-overlay-#{$name} { - background-color: $color; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/overlay/_theme.scss" as *; @mixin kendo-overlay--theme() { diff --git a/packages/default/scss/overlay/_variables.scss b/packages/default/scss/overlay/_variables.scss index 9f4770c05d9..1f3f3707c69 100644 --- a/packages/default/scss/overlay/_variables.scss +++ b/packages/default/scss/overlay/_variables.scss @@ -4,3 +4,9 @@ $kendo-overlay-theme-colors: $kendo-theme-colors !default; $kendo-overlay-bg: $kendo-color-black !default; $kendo-overlay-opacity: .5 !default; + +@forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with ( + $kendo-overlay-theme-colors: $kendo-overlay-theme-colors, + $kendo-overlay-bg: $kendo-overlay-bg, + $kendo-overlay-opacity: $kendo-overlay-opacity +); diff --git a/packages/default/scss/pager/_layout.scss b/packages/default/scss/pager/_layout.scss index 87a3ec3f798..e18fe4b81d0 100644 --- a/packages/default/scss/pager/_layout.scss +++ b/packages/default/scss/pager/_layout.scss @@ -1,189 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-pager--layout-base() { - - .k-pager { - padding: 0; - border-width: $kendo-pager-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-pager-font-family; - font-size: $kendo-pager-font-size; - line-height: $kendo-pager-line-height; - white-space: nowrap; - display: flex; - align-items: center; - position: relative; - overflow: hidden; - cursor: default; - flex: 0 0 auto; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Base pager section - %base-pager-section { - display: flex; - flex-direction: row; - align-items: center; - } - - - // Base pager item - %base-pager-item { - color: inherit; - text-align: center; - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - - &:hover { - z-index: 2; - } - &.k-disabled { - color: inherit; - } - } - - - // Pager items - .k-pager-nav { - @extend %base-pager-item !optional; - } - - - // Pager numbers - .k-pager-numbers-wrap { - display: flex; - flex-direction: row; - position: relative; - - select.k-dropdown-list { - width: $kendo-pager-md-dropdown-width; - } - } - .k-pager-numbers { - display: flex; - flex-direction: row; - - // Selected state - .k-selected { - cursor: inherit; - z-index: 2; - } - } - - - // Spacing between items - .k-pager-nav + .k-pager-nav, - .k-pager-nav + .k-pager-numbers-wrap, - .k-pager-numbers-wrap + .k-pager-nav { - @if ($kendo-pager-item-spacing) { - margin-left: $kendo-pager-item-spacing; - } - } - - .k-rtl, - [dir="rtl"] { - .k-pager-nav + .k-pager-nav, - .k-pager-nav + .k-pager-numbers-wrap, - .k-pager-numbers-wrap + .k-pager-nav { - @if ($kendo-pager-item-spacing) { - margin-left: 0; - margin-right: $kendo-pager-item-spacing; - } - } - } - - - // Pager input - .k-pager-input { - @extend %base-pager-section !optional; - gap: 1ex; - - .k-textbox, - .k-numerictextbox { - margin-block: 0; - width: $kendo-pager-input-width; - } - } - - - // Pager sizes - .k-pager-sizes { - @extend %base-pager-section !optional; - gap: 1ex; - - .k-input-inner, - .k-input-value-text { - text-overflow: clip; - } - } - - - // Pager info - .k-pager-info { - @extend %base-pager-section !optional; - text-align: end; - justify-content: flex-end; - flex: 1 1 0%; - order: 9; - } - - - // Pager refresh - .k-pager-refresh { - margin-inline-start: auto; - color: inherit; - order: 10; - } - - // Pager sizes - @each $size, $size-props in $kendo-pager-sizes { - $_padding-x: map.get($size-props, padding-x); - $_padding-y: map.get($size-props, padding-y); - $_item-group-spacing: map.get($size-props, item-group-spacing); - $_item-min-width: map.get($size-props, item-min-width); - $_pager-dropdown-width: map.get($size-props, pager-dropdown-width); - - .k-pager-#{$size} { - padding-inline: $_padding-x; - padding-block: $_padding-y; - gap: $_item-group-spacing; - - .k-pager-numbers-wrap { - .k-button { - min-width: $_item-min-width; - } - - .k-pager-input, - > select.k-dropdown-list { - margin-inline-start: $_item-group-spacing; - margin-inline-end: $_item-group-spacing; - } - } - - .k-pager-sizes { - .k-dropdown-list, - > select { - width: $_pager-dropdown-width; - } - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/pager/_layout.scss" as *; @mixin kendo-pager--layout() { diff --git a/packages/default/scss/pager/_theme.scss b/packages/default/scss/pager/_theme.scss index 06ab32e4a7a..5046698be42 100644 --- a/packages/default/scss/pager/_theme.scss +++ b/packages/default/scss/pager/_theme.scss @@ -1,24 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-pager--theme-base() { - - // Pager - .k-pager { - @include fill( - $kendo-pager-text, - $kendo-pager-bg, - $kendo-pager-border - ); - - &:focus, - &.k-focus { - @include fill( $bg: $kendo-pager-focus-bg ); - @include focus-indicator( $kendo-pager-focus-shadow, true ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/pager/_theme.scss" as *; @mixin kendo-pager--theme() { diff --git a/packages/default/scss/pager/_variables.scss b/packages/default/scss/pager/_variables.scss index e35de3c5fe9..8f370b8bae1 100644 --- a/packages/default/scss/pager/_variables.scss +++ b/packages/default/scss/pager/_variables.scss @@ -171,3 +171,51 @@ $kendo-pager-sizes: ( pager-dropdown-width: $kendo-pager-lg-dropdown-width ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/pager/_variables.scss" with ( + $kendo-pager-padding-x: $kendo-pager-padding-x, + $kendo-pager-sm-padding-x: $kendo-pager-sm-padding-x, + $kendo-pager-md-padding-x: $kendo-pager-md-padding-x, + $kendo-pager-lg-padding-x: $kendo-pager-lg-padding-x, + $kendo-pager-padding-y: $kendo-pager-padding-y, + $kendo-pager-sm-padding-y: $kendo-pager-sm-padding-y, + $kendo-pager-md-padding-y: $kendo-pager-md-padding-y, + $kendo-pager-lg-padding-y: $kendo-pager-lg-padding-y, + $kendo-pager-sm-item-min-width: $kendo-pager-sm-item-min-width, + $kendo-pager-md-item-min-width: $kendo-pager-md-item-min-width, + $kendo-pager-lg-item-min-width: $kendo-pager-lg-item-min-width, + $kendo-pager-sm-item-group-spacing: $kendo-pager-sm-item-group-spacing, + $kendo-pager-md-item-group-spacing: $kendo-pager-md-item-group-spacing, + $kendo-pager-lg-item-group-spacing: $kendo-pager-lg-item-group-spacing, + $kendo-pager-border-width: $kendo-pager-border-width, + $kendo-pager-font-family: $kendo-pager-font-family, + $kendo-pager-font-size: $kendo-pager-font-size, + $kendo-pager-line-height: $kendo-pager-line-height, + $kendo-pager-bg: $kendo-pager-bg, + $kendo-pager-text: $kendo-pager-text, + $kendo-pager-border: $kendo-pager-border, + $kendo-pager-focus-bg: $kendo-pager-focus-bg, + $kendo-pager-focus-shadow: $kendo-pager-focus-shadow, + $kendo-pager-section-spacing: $kendo-pager-section-spacing, + $kendo-pager-item-border-width: $kendo-pager-item-border-width, + $kendo-pager-item-border-radius: $kendo-pager-item-border-radius, + $kendo-pager-item-spacing: $kendo-pager-item-spacing, + $kendo-pager-item-bg: $kendo-pager-item-bg, + $kendo-pager-item-text: $kendo-pager-item-text, + $kendo-pager-item-border: $kendo-pager-item-border, + $kendo-pager-item-hover-bg: $kendo-pager-item-hover-bg, + $kendo-pager-item-hover-text: $kendo-pager-item-hover-text, + $kendo-pager-item-hover-border: $kendo-pager-item-hover-border, + $kendo-pager-item-selected-bg: $kendo-pager-item-selected-bg, + $kendo-pager-item-selected-text: $kendo-pager-item-selected-text, + $kendo-pager-item-selected-border: $kendo-pager-item-selected-border, + $kendo-pager-item-focus-opacity: $kendo-pager-item-focus-opacity, + $kendo-pager-item-focus-bg: $kendo-pager-item-focus-bg, + $kendo-pager-item-focus-shadow: $kendo-pager-item-focus-shadow, + $kendo-pager-number-border-radius: $kendo-pager-number-border-radius, + $kendo-pager-input-width: $kendo-pager-input-width, + $kendo-pager-sm-dropdown-width: $kendo-pager-sm-dropdown-width, + $kendo-pager-md-dropdown-width: $kendo-pager-md-dropdown-width, + $kendo-pager-lg-dropdown-width: $kendo-pager-lg-dropdown-width, + $kendo-pager-sizes: $kendo-pager-sizes +); diff --git a/packages/default/scss/panel/_layout.scss b/packages/default/scss/panel/_layout.scss index f3cf2d80d5c..150bc3c9e6c 100644 --- a/packages/default/scss/panel/_layout.scss +++ b/packages/default/scss/panel/_layout.scss @@ -1,32 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-panel--layout--base() { - // Panels - .k-block, - .k-panel { - @include border-radius( $kendo-panel-border-radius ); - padding: 0; - border-width: $kendo-panel-border-width; - border-style: $kendo-panel-border-style; - box-sizing: border-box; - - > .k-header { - @include border-top-radius( $kendo-panel-border-radius ); - @include fill( - var( --kendo-component-text, #{$kendo-component-text} ), - var( --kendo-component-bg, #{$kendo-component-bg} ), - var( --kendo-component-border, #{$kendo-component-border} ) - ); - padding-inline: $kendo-panel-header-padding-inline; - padding-block: $kendo-panel-header-padding-block; - } - > .k-content { - padding-inline: $kendo-panel-content-padding-inline; - padding-block: $kendo-panel-content-padding-block; - } - } -} +@use "@progress/kendo-theme-core/scss/components/panel/_layout.scss" as *; @mixin kendo-panel--layout() { @include kendo-panel--layout--base(); diff --git a/packages/default/scss/panel/_theme.scss b/packages/default/scss/panel/_theme.scss index c1cc0e9c726..85dfcca0eda 100644 --- a/packages/default/scss/panel/_theme.scss +++ b/packages/default/scss/panel/_theme.scss @@ -1,25 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-panel--theme--base() { - // Panels - .k-block, - .k-panel { - @include fill( - $kendo-panel-text, - $kendo-panel-bg, - $kendo-panel-border - ); - } - - :where(.k-content) { - @include fill( - $kendo-panel-text, - $kendo-panel-bg, - $kendo-panel-border - ); - } -} +@use "@progress/kendo-theme-core/scss/components/panel/_theme.scss" as *; @mixin kendo-panel--theme() { @include kendo-panel--theme--base(); diff --git a/packages/default/scss/panel/_variables.scss b/packages/default/scss/panel/_variables.scss index 7e59dde4b9b..4345bf09335 100644 --- a/packages/default/scss/panel/_variables.scss +++ b/packages/default/scss/panel/_variables.scss @@ -33,3 +33,16 @@ $kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg}) !default; /// The color of the border around the Panel. /// @group panel $kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border}) !default; + +@forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with ( + $kendo-panel-border-radius: $kendo-panel-border-radius, + $kendo-panel-border-width: $kendo-panel-border-width, + $kendo-panel-border-style: $kendo-panel-border-style, + $kendo-panel-header-padding-inline: $kendo-panel-header-padding-inline, + $kendo-panel-header-padding-block: $kendo-panel-header-padding-block, + $kendo-panel-content-padding-inline: $kendo-panel-content-padding-inline, + $kendo-panel-content-padding-block: $kendo-panel-content-padding-block, + $kendo-panel-text: $kendo-panel-text, + $kendo-panel-bg: $kendo-panel-bg, + $kendo-panel-border: $kendo-panel-border +); diff --git a/packages/default/scss/panelbar/_layout.scss b/packages/default/scss/panelbar/_layout.scss index 73562a9e795..fca8809539e 100644 --- a/packages/default/scss/panelbar/_layout.scss +++ b/packages/default/scss/panelbar/_layout.scss @@ -1,144 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../icons/_variables.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-panelbar--layout-base() { - - // Base - .k-panelbar { - margin: 0; - padding: 0; - border-width: $kendo-panelbar-border-width; - border-style: $kendo-panelbar-border-style; - box-sizing: border-box; - outline: 0; - font-family: $kendo-panelbar-font-family; - font-size: $kendo-panelbar-font-size; - line-height: $kendo-panelbar-line-height; - list-style: none; - display: block; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - - // Root - > .k-panelbar-header { - // TODO - border-width: 0; - border-style: $kendo-panelbar-item-border-style; - border-color: inherit; - display: block; - - > .k-link { - padding-block: $kendo-panelbar-header-padding-y; - padding-inline: $kendo-panelbar-header-padding-x; - color: inherit; - background: none; - text-decoration: none; - font-weight: 500; - display: flex; - flex-flow: row nowrap; - gap: $kendo-icon-spacing; - align-items: center; - align-content: center; - position: relative; - user-select: none; - cursor: default; - transition: $kendo-transition; - } - } - > .k-panelbar-header + .k-panelbar-header { - border-top-width: $kendo-panelbar-item-border-width; - } - - - // Sub - .k-panelbar-group { - margin: 0; - padding: 0; - border-width: 0; - border-color: inherit; - color: inherit; - background-color: transparent; - list-style: none; - } - .k-panelbar-group > .k-panelbar-item { - display: block; - - > .k-link { - padding-block: $kendo-panelbar-item-padding-y; - padding-inline: $kendo-panelbar-item-padding-x; - color: inherit; - text-decoration: none; - display: flex; - flex-flow: row nowrap; - gap: $kendo-icon-spacing; - align-items: center; - align-content: center; - position: relative; - user-select: none; - cursor: default; - transition: $kendo-transition; - } - - // Hierarchy items - @for $i from 1 through $kendo-panelbar-item-level-count { - &.k-level-#{$i} { - .k-link { - padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} ); - } - } - } - } - - // Panelbar item - .k-panelbar-item { - outline-style: none; - } - - // Panelbar content - .k-panelbar-content { - display: flow-root; - } - - - // Toggle icon - .k-panelbar-expand, - .k-panelbar-collapse, - .k-panelbar-toggle { - margin-inline-start: auto; - } - .k-panelbar-group .k-panelbar-expand, - .k-panelbar-group .k-panelbar-collapse, - .k-panelbar-group .k-panelbar-toggle { - margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} ); - } - } - - .k-rtl .k-panelbar, - .k-panelbar.k-rtl, - .k-panelbar [dir = "rtl"] { - .k-panelbar-group > .k-panelbar-item { - // Hierarchy items - @for $i from 1 through $kendo-panelbar-item-level-count { - &.k-level-#{$i} { - .k-link { - padding-left: $kendo-panelbar-item-padding-x; - padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} ); - } - } - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/panelbar/_layout.scss" as *; @mixin kendo-panelbar--layout() { diff --git a/packages/default/scss/panelbar/_theme.scss b/packages/default/scss/panelbar/_theme.scss index 2091b60c559..5caeaef0759 100644 --- a/packages/default/scss/panelbar/_theme.scss +++ b/packages/default/scss/panelbar/_theme.scss @@ -1,212 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-panelbar--theme-base() { - - // Panelbar - .k-panelbar { - @include fill( - $kendo-panelbar-text, - $kendo-panelbar-bg, - $kendo-panelbar-border - ); - - - // Root - > .k-panelbar-header { - - &.k-expanded.k-level-0 > .k-link { - @include fill( - $kendo-panelbar-header-expanded-text, - $kendo-panelbar-header-expanded-bg, - $kendo-panelbar-header-expanded-border, - $kendo-panelbar-header-expanded-gradient - ); - } - - // Normal - > .k-link { - @include fill( - $kendo-panelbar-header-text, - $kendo-panelbar-header-bg, - $kendo-panelbar-header-border, - $kendo-panelbar-header-gradient - ); - - .k-icon, - .k-panelbar-item-icon { - color: $kendo-panelbar-text; - } - } - - // Hover - > .k-link:hover, - > .k-link.k-hover { - @include fill( - $kendo-panelbar-header-hover-text, - $kendo-panelbar-header-hover-bg, - $kendo-panelbar-header-hover-border, - $kendo-panelbar-header-hover-gradient - ); - } - - // Focus - > .k-link:focus, - > .k-link.k-focus { - @include fill( - $kendo-panelbar-header-focus-text, - $kendo-panelbar-header-focus-bg, - $kendo-panelbar-header-focus-border, - $kendo-panelbar-header-focus-gradient - ); - @include focus-indicator( $kendo-panelbar-header-focus-shadow, true ); - } - - // Focus & Hover - > .k-link:focus:hover, - > .k-link.k-focus.k-hover { - @include fill( - $kendo-panelbar-header-hover-focus-text, - $kendo-panelbar-header-hover-focus-bg, - $kendo-panelbar-header-hover-focus-border, - $kendo-panelbar-header-hover-focus-gradient - ); - } - - // Selected - > .k-link.k-selected { - @include fill( - $kendo-panelbar-header-selected-text, - $kendo-panelbar-header-selected-bg, - $kendo-panelbar-header-selected-border, - $kendo-panelbar-header-selected-gradient - ); - - .k-icon, - .k-panelbar-item-icon { - color: inherit; - } - } - - // Selected Hover - > .k-link.k-selected:hover, - > .k-link.k-selected.k-hover { - @include fill( - $kendo-panelbar-header-selected-hover-text, - $kendo-panelbar-header-selected-hover-bg, - $kendo-panelbar-header-selected-hover-border, - $kendo-panelbar-header-selected-hover-gradient - ); - } - - // Selected Focus - > .k-link.k-selected:focus, - > .k-link.k-selected.k-focus { - @include fill( - $kendo-panelbar-header-selected-focus-text, - $kendo-panelbar-header-selected-focus-bg, - $kendo-panelbar-header-selected-focus-border, - $kendo-panelbar-header-selected-focus-gradient - ); - } - - // Selected Focus & Hover - > .k-link.k-selected:hover:focus, - > .k-link.k-selected.k-hover.k-focus { - @include fill( - $kendo-panelbar-header-selected-hover-focus-text, - $kendo-panelbar-header-selected-hover-focus-bg, - $kendo-panelbar-header-selected-hover-focus-border, - $kendo-panelbar-header-selected-hover-focus-gradient - ); - } - } - - - // Sub - .k-panelbar-group { - - // Hover - > .k-panelbar-item > .k-link:hover, - > .k-panelbar-item > .k-link.k-hover { - @include fill( - $kendo-panelbar-item-hover-text, - $kendo-panelbar-item-hover-bg, - $kendo-panelbar-item-hover-border, - $kendo-panelbar-item-hover-gradient - ); - } - - // Focus - > .k-panelbar-item > .k-link:focus, - > .k-panelbar-item > .k-link.k-focus { - @include fill( - $kendo-panelbar-item-focus-text, - $kendo-panelbar-item-focus-bg, - $kendo-panelbar-item-focus-border, - $kendo-panelbar-item-focus-gradient - ); - @include focus-indicator( $kendo-panelbar-item-focus-shadow, true ); - } - - // Focus & Hover - > .k-panelbar-item > .k-link:focus:hover, - > .k-panelbar-item > .k-link.k-focus.k-hover { - @include fill( - $kendo-panelbar-item-hover-focus-text, - $kendo-panelbar-item-hover-focus-bg, - $kendo-panelbar-item-hover-focus-border, - $kendo-panelbar-item-hover-focus-gradient - ); - } - - // Selected - > .k-panelbar-item > .k-link.k-selected { - @include fill( - $kendo-panelbar-item-selected-text, - $kendo-panelbar-item-selected-bg, - $kendo-panelbar-item-selected-border, - $kendo-panelbar-item-selected-gradient - ); - } - - // Selected Hover - > .k-panelbar-item > .k-link.k-selected:hover, - > .k-panelbar-item > .k-link.k-selected.k-hover { - @include fill( - $kendo-panelbar-item-selected-hover-text, - $kendo-panelbar-item-selected-hover-bg, - $kendo-panelbar-item-selected-hover-border, - $kendo-panelbar-item-selected-hover-gradient - ); - } - - // Selected Focus - > .k-panelbar-item > .k-link.k-selected:focus, - > .k-panelbar-item > .k-link.k-selected.k-focus { - @include fill( - $kendo-panelbar-item-selected-focus-text, - $kendo-panelbar-item-selected-focus-bg, - $kendo-panelbar-item-selected-focus-border, - $kendo-panelbar-item-selected-focus-gradient - ); - } - - // Selected Focus & Hover - > .k-panelbar-item > .k-link.k-selected:focus:hover, - > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover { - @include fill( - $kendo-panelbar-item-selected-hover-focus-text, - $kendo-panelbar-item-selected-hover-focus-bg, - $kendo-panelbar-item-selected-hover-focus-border, - $kendo-panelbar-item-selected-hover-focus-gradient - ); - } - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/panelbar/_theme.scss" as *; @mixin kendo-panelbar--theme() { diff --git a/packages/default/scss/panelbar/_variables.scss b/packages/default/scss/panelbar/_variables.scss index 814840f7a44..a6eabee421c 100644 --- a/packages/default/scss/panelbar/_variables.scss +++ b/packages/default/scss/panelbar/_variables.scss @@ -273,3 +273,89 @@ $kendo-panelbar-header-expanded-border: null !default; /// The gradient of the expanded PanelBar header. /// @group panelbar $kendo-panelbar-header-expanded-gradient: null !default; + +@forward "@progress/kendo-theme-core/scss/components/panelbar/_variables.scss" with ( + $kendo-panelbar-padding-x: $kendo-panelbar-padding-x, + $kendo-panelbar-padding-y: $kendo-panelbar-padding-y, + $kendo-panelbar-font-family: $kendo-panelbar-font-family, + $kendo-panelbar-font-size: $kendo-panelbar-font-size, + $kendo-panelbar-line-height: $kendo-panelbar-line-height, + $kendo-panelbar-border-width: $kendo-panelbar-border-width, + $kendo-panelbar-border-style: $kendo-panelbar-border-style, + $kendo-panelbar-item-border-width: $kendo-panelbar-item-border-width, + $kendo-panelbar-item-border-style: $kendo-panelbar-item-border-style, + $kendo-panelbar-header-padding-x: $kendo-panelbar-header-padding-x, + $kendo-panelbar-header-padding-y: $kendo-panelbar-header-padding-y, + $kendo-panelbar-item-padding-x: $kendo-panelbar-item-padding-x, + $kendo-panelbar-item-padding-y: $kendo-panelbar-item-padding-y, + $kendo-panelbar-item-level-count: $kendo-panelbar-item-level-count, + $kendo-panelbar-bg: $kendo-panelbar-bg, + $kendo-panelbar-text: $kendo-panelbar-text, + $kendo-panelbar-border: $kendo-panelbar-border, + $kendo-panelbar-header-bg: $kendo-panelbar-header-bg, + $kendo-panelbar-header-text: $kendo-panelbar-header-text, + $kendo-panelbar-header-border: $kendo-panelbar-header-border, + $kendo-panelbar-header-gradient: $kendo-panelbar-header-gradient, + $kendo-panelbar-header-hover-bg: $kendo-panelbar-header-hover-bg, + $kendo-panelbar-header-hover-text: $kendo-panelbar-header-hover-text, + $kendo-panelbar-header-hover-border: $kendo-panelbar-header-hover-border, + $kendo-panelbar-header-hover-gradient: $kendo-panelbar-header-hover-gradient, + $kendo-panelbar-header-focus-bg: $kendo-panelbar-header-focus-bg, + $kendo-panelbar-header-focus-text: $kendo-panelbar-header-focus-text, + $kendo-panelbar-header-focus-border: $kendo-panelbar-header-focus-border, + $kendo-panelbar-header-focus-gradient: $kendo-panelbar-header-focus-gradient, + $kendo-panelbar-header-focus-shadow: $kendo-panelbar-header-focus-shadow, + $kendo-panelbar-header-hover-focus-bg: $kendo-panelbar-header-hover-focus-bg, + $kendo-panelbar-header-hover-focus-text: $kendo-panelbar-header-hover-focus-text, + $kendo-panelbar-header-hover-focus-border: $kendo-panelbar-header-hover-focus-border, + $kendo-panelbar-header-hover-focus-gradient: $kendo-panelbar-header-hover-focus-gradient, + $kendo-panelbar-header-selected-bg: $kendo-panelbar-header-selected-bg, + $kendo-panelbar-header-selected-text: $kendo-panelbar-header-selected-text, + $kendo-panelbar-header-selected-border: $kendo-panelbar-header-selected-border, + $kendo-panelbar-header-selected-gradient: $kendo-panelbar-header-selected-gradient, + $kendo-panelbar-header-selected-hover-bg: $kendo-panelbar-header-selected-hover-bg, + $kendo-panelbar-header-selected-hover-text: $kendo-panelbar-header-selected-hover-text, + $kendo-panelbar-header-selected-hover-border: $kendo-panelbar-header-selected-hover-border, + $kendo-panelbar-header-selected-hover-gradient: $kendo-panelbar-header-selected-hover-gradient, + $kendo-panelbar-header-selected-focus-bg: $kendo-panelbar-header-selected-focus-bg, + $kendo-panelbar-header-selected-focus-text: $kendo-panelbar-header-selected-focus-text, + $kendo-panelbar-header-selected-focus-border: $kendo-panelbar-header-selected-focus-border, + $kendo-panelbar-header-selected-focus-gradient: $kendo-panelbar-header-selected-focus-gradient, + $kendo-panelbar-header-selected-hover-focus-bg: $kendo-panelbar-header-selected-hover-focus-bg, + $kendo-panelbar-header-selected-hover-focus-text: $kendo-panelbar-header-selected-hover-focus-text, + $kendo-panelbar-header-selected-hover-focus-border: $kendo-panelbar-header-selected-hover-focus-border, + $kendo-panelbar-header-selected-hover-focus-gradient: $kendo-panelbar-header-selected-hover-focus-gradient, + $kendo-panelbar-item-hover-bg: $kendo-panelbar-item-hover-bg, + $kendo-panelbar-item-hover-text: $kendo-panelbar-item-hover-text, + $kendo-panelbar-item-hover-border: $kendo-panelbar-item-hover-border, + $kendo-panelbar-item-hover-gradient: $kendo-panelbar-item-hover-gradient, + $kendo-panelbar-item-focus-bg: $kendo-panelbar-item-focus-bg, + $kendo-panelbar-item-focus-text: $kendo-panelbar-item-focus-text, + $kendo-panelbar-item-focus-border: $kendo-panelbar-item-focus-border, + $kendo-panelbar-item-focus-gradient: $kendo-panelbar-item-focus-gradient, + $kendo-panelbar-item-focus-shadow: $kendo-panelbar-item-focus-shadow, + $kendo-panelbar-item-hover-focus-bg: $kendo-panelbar-item-hover-focus-bg, + $kendo-panelbar-item-hover-focus-text: $kendo-panelbar-item-hover-focus-text, + $kendo-panelbar-item-hover-focus-border: $kendo-panelbar-item-hover-focus-border, + $kendo-panelbar-item-hover-focus-gradient: $kendo-panelbar-item-hover-focus-gradient, + $kendo-panelbar-item-selected-bg: $kendo-panelbar-item-selected-bg, + $kendo-panelbar-item-selected-text: $kendo-panelbar-item-selected-text, + $kendo-panelbar-item-selected-border: $kendo-panelbar-item-selected-border, + $kendo-panelbar-item-selected-gradient: $kendo-panelbar-item-selected-gradient, + $kendo-panelbar-item-selected-hover-bg: $kendo-panelbar-item-selected-hover-bg, + $kendo-panelbar-item-selected-hover-text: $kendo-panelbar-item-selected-hover-text, + $kendo-panelbar-item-selected-hover-border: $kendo-panelbar-item-selected-hover-border, + $kendo-panelbar-item-selected-hover-gradient: $kendo-panelbar-item-selected-hover-gradient, + $kendo-panelbar-item-selected-focus-bg: $kendo-panelbar-item-selected-focus-bg, + $kendo-panelbar-item-selected-focus-text: $kendo-panelbar-item-selected-focus-text, + $kendo-panelbar-item-selected-focus-border: $kendo-panelbar-item-selected-focus-border, + $kendo-panelbar-item-selected-focus-gradient: $kendo-panelbar-item-selected-focus-gradient, + $kendo-panelbar-item-selected-hover-focus-bg: $kendo-panelbar-item-selected-hover-focus-bg, + $kendo-panelbar-item-selected-hover-focus-text: $kendo-panelbar-item-selected-hover-focus-text, + $kendo-panelbar-item-selected-hover-focus-border: $kendo-panelbar-item-selected-hover-focus-border, + $kendo-panelbar-item-selected-hover-focus-gradient: $kendo-panelbar-item-selected-hover-focus-gradient, + $kendo-panelbar-header-expanded-bg: $kendo-panelbar-header-expanded-bg, + $kendo-panelbar-header-expanded-text: $kendo-panelbar-header-expanded-text, + $kendo-panelbar-header-expanded-border: $kendo-panelbar-header-expanded-border, + $kendo-panelbar-header-expanded-gradient: $kendo-panelbar-header-expanded-gradient +); diff --git a/packages/default/scss/pdf-viewer/_layout.scss b/packages/default/scss/pdf-viewer/_layout.scss index f0ba1b58a00..0cd70692199 100644 --- a/packages/default/scss/pdf-viewer/_layout.scss +++ b/packages/default/scss/pdf-viewer/_layout.scss @@ -1,335 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../button/_variables.scss" as *; - -@mixin kendo-pdf-viewer--layout-base() { - - // PDF Viewer - .k-pdf-viewer { - border-width: $kendo-pdf-viewer-border-width; - border-style: solid; - box-sizing: border-box; - position: relative; - outline: 0; - font-family: $kendo-pdf-viewer-font-family; - font-size: $kendo-pdf-viewer-font-size; - line-height: $kendo-pdf-viewer-line-height; - display: flex; - flex-direction: column; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - // Toolbar - .k-toolbar { - border-top-width: 0; - border-right-width: 0; - border-left-width: 0; - border-color: inherit; - flex: 0 0 auto; - z-index: 2; - } - .k-toolbar .k-pager-wrap, - .k-toolbar .k-pager { - padding: 0; - border-width: 0; - color: inherit; - background: none; - overflow: visible; - } - } - - - // Canvas - .k-pdf-viewer-canvas { - display: flex; - flex-direction: column; - flex: 1 1 auto; - outline: none; - - &.k-enable-text-select { - user-select: text; - cursor: text; - } - - &.k-enable-panning { - cursor: grab !important; // stylelint-disable-line declaration-no-important - - span::selection { - background-color: transparent; - } - } - } - - // Pages - .k-pdf-viewer-pages { - flex: 1 1 auto; - - .k-page { - position: relative; - margin-block: $kendo-pdf-viewer-page-spacing; - margin-inline: auto; - z-index: 1; - - // Canvas - .k-canvas-wrapper { - overflow: hidden; - width: 100%; - height: 100%; - - canvas { - direction: ltr; - } - - svg { - transform: none; - } - - .k-highlight { - position: absolute; - mix-blend-mode: multiply; - fill-opacity: 1; - - } - .k-highlight-outline { - position: absolute; - fill: none; - stroke-width: 2px; - stroke-dasharray: 2; - } - } - - - .k-text-layer { - position: absolute; - top: 0; - left: 0; - opacity: .2; - overflow: hidden; - - .k-marked-content > span, - > span, br { - position: absolute; - line-height: $kendo-pdf-viewer-selection-line-height; - transform-origin: 0% 0%; - color: transparent; - white-space: pre; - cursor: text; - } - - .k-marked-content { - top: 0; - height: 0; - } - - .k-end-of-content { - display: block; - position: absolute; - inset: 100% 0 0; - z-index: 0; - cursor: default; - user-select: none; - } - - .k-search-highlight-mark { - color: transparent; - } - - .k-highlighting { - touch-action: none; - } - } - - .k-annotation-layer { - position: absolute; - top: 0; - left: 0; - transform-origin: 0 0; - pointer-events: none; - - section { - position: absolute; - pointer-events: auto; - } - - .k-annotation-text-content { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - color: transparent; - user-select: none; - pointer-events: none; - } - - .k-link-annotation > a { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - - .k-annotation-editor-layer { - background: transparent; - position: absolute; - inset: 0; - transform-origin: 0 0; - cursor: auto; - - .k-selected { - z-index: 100000 !important; // stylelint-disable-line declaration-no-important - } - - .k-highlight-editor { - position: absolute; - background: transparent; - z-index: 1; - cursor: auto; - max-width: 100%; - max-height: 100%; - border: none; - outline: none; - pointer-events: none; - transform-origin: 0 0; - - .k-internal { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: auto; - } - - &.k-highlight-editor-disabled { - .k-internal { - pointer-events: none; - } - } - } - - .k-free-text-editor { - position: absolute; - background: transparent; - z-index: 1; - transform-origin: 0 0; - cursor: text; - caret-color: $kendo-pdf-viewer-free-text-annotation-text; - max-width: 100%; - max-height: 100%; - border: solid 2px transparent; - - &.k-selected.k-draggable { - cursor: move;; - } - - &.k-selected .k-internal { - border-radius: 0px; - outline: 2px dashed $kendo-pdf-viewer-free-text-annotation-border; - } - - .k-internal { - background: transparent; - border: none; - inset: 0; - overflow: visible; - white-space: nowrap; - user-select: none; - } - - .k-internal:empty::before { - content: attr(default-content); - } - } - } - - .k-annotation-editor-layer-disabled { - pointer-events: none; - } - } - - .k-blank-page { - margin: 0; - display: flex; - flex-flow: column nowrap; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; - background-color: inherit !important; // stylelint-disable-line declaration-no-important - - .k-upload, - .k-dropzone, - .k-dropzone-inner { - border: 0; - background: none; - } - } - } - - // Search - .k-pdf-viewer-canvas > .k-search-panel { - width: max-content; - margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 ); - padding-block: $kendo-pdf-viewer-search-panel-padding-y; - padding-inline: $kendo-pdf-viewer-search-panel-padding-x; - border-width: $kendo-pdf-viewer-search-panel-border-width; - border-style: solid; - border-radius: $kendo-pdf-viewer-search-panel-border-radius; - display: flex; - gap: $kendo-pdf-viewer-search-panel-spacing; - flex-flow: row nowrap; - flex: 0 0 auto; - justify-content: flex-start; - align-items: center; - z-index: 10; - cursor: default; - - .k-search-dialog-draghandle { - cursor: move; - margin-left: 0; - } - - .k-textbox { - width: 10em; - flex: none; - - .k-button { - border-width: 0; - } - } - - .k-search-matches { - display: inline-flex; - gap: $kendo-pdf-viewer-search-panel-matches-spacing; - } - } - - // Annotation Toolbar - .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar { - width: min-content; - border-bottom-width: 0; - } - - - // Annotation Editor - .k-pdf-viewer-annotation-editor { - padding-block: $kendo-pdf-viewer-popup-padding-y; - padding-inline: $kendo-pdf-viewer-popup-padding-x; - - .k-column-menu-group-header { - padding-inline: 0; - } - - .k-form-field { - margin-top: 0; - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/pdf-viewer/_layout.scss" as *; @mixin kendo-pdf-viewer--layout() { diff --git a/packages/default/scss/pdf-viewer/_theme.scss b/packages/default/scss/pdf-viewer/_theme.scss index 73e30aa8e0e..35b986d87c3 100644 --- a/packages/default/scss/pdf-viewer/_theme.scss +++ b/packages/default/scss/pdf-viewer/_theme.scss @@ -1,92 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-pdf-viewer--theme-base() { - - // PDF Viewer - .k-pdf-viewer { - @include fill( - $kendo-pdf-viewer-text, - $kendo-pdf-viewer-bg, - $kendo-pdf-viewer-border - ); - - - // Toolbar - .k-toolbar { - @include fill( - $kendo-pdf-viewer-toolbar-text, - $kendo-pdf-viewer-toolbar-bg, - $kendo-pdf-viewer-toolbar-border, - $kendo-pdf-viewer-toolbar-gradient - ); - } - - - // Canvas - .k-pdf-viewer-canvas { - @include fill( - $kendo-pdf-viewer-canvas-text, - $kendo-pdf-viewer-canvas-bg, - $kendo-pdf-viewer-canvas-border - ); - } - - - // Page - .k-page { - @include fill( - $kendo-pdf-viewer-page-text, - $kendo-pdf-viewer-page-bg, - $kendo-pdf-viewer-page-border - ); - @include box-shadow( $kendo-pdf-viewer-page-shadow ); - } - - .k-blank-page > .k-icon { - @include fill( $color: $kendo-pdf-viewer-icon-text ); - } - - .k-canvas-wrapper .k-highlight-outline { - &.k-hover, - &:hover { - stroke: $kendo-pdf-viewer-highlight-annotation-hover-border; - } - - &.k-selected { - stroke: $kendo-pdf-viewer-highlight-annotation-border; - } - } - - // Search - .k-search-highlight { - background-color: $kendo-pdf-viewer-search-highlight-bg; - } - - .k-search-highlight-mark { - @include fill( $bg: $kendo-pdf-viewer-search-highlight-mark-bg ); - } - - .k-annotation-editor-layer .k-free-text-editor .k-internal { - color: $kendo-pdf-viewer-free-text-annotation-text; - - &:empty::before { - color: $kendo-pdf-viewer-free-text-annotation-placeholder-text; - } - } - - } - - .k-pdf-viewer-canvas > .k-search-panel { - @include fill( - $kendo-pdf-viewer-search-panel-text, - $kendo-pdf-viewer-search-panel-bg, - $kendo-pdf-viewer-search-panel-border, - ); - @include box-shadow( $kendo-pdf-viewer-search-panel-shadow ); - } - -} +@use "@progress/kendo-theme-core/scss/components/pdf-viewer/_theme.scss" as *; @mixin kendo-pdf-viewer--theme() { diff --git a/packages/default/scss/pdf-viewer/_variables.scss b/packages/default/scss/pdf-viewer/_variables.scss index 614c1ae99cc..09784b72402 100644 --- a/packages/default/scss/pdf-viewer/_variables.scss +++ b/packages/default/scss/pdf-viewer/_variables.scss @@ -137,6 +137,46 @@ $kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) /// The text color of the PDFViewer free text annotation. /// @group pdf-viewer $kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.5) !default; -/// The text color of the PDFViewer free text annotation. -/// @group pdf-viewer -$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default; + +@forward "@progress/kendo-theme-core/scss/components/pdf-viewer/_variables.scss" with ( + $kendo-pdf-viewer-border-width: $kendo-pdf-viewer-border-width, + $kendo-pdf-viewer-font-family: $kendo-pdf-viewer-font-family, + $kendo-pdf-viewer-font-size: $kendo-pdf-viewer-font-size, + $kendo-pdf-viewer-line-height: $kendo-pdf-viewer-line-height, + $kendo-pdf-viewer-bg: $kendo-pdf-viewer-bg, + $kendo-pdf-viewer-text: $kendo-pdf-viewer-text, + $kendo-pdf-viewer-border: $kendo-pdf-viewer-border, + $kendo-pdf-viewer-toolbar-bg: $kendo-pdf-viewer-toolbar-bg, + $kendo-pdf-viewer-toolbar-text: $kendo-pdf-viewer-toolbar-text, + $kendo-pdf-viewer-toolbar-border: $kendo-pdf-viewer-toolbar-border, + $kendo-pdf-viewer-toolbar-gradient: $kendo-pdf-viewer-toolbar-gradient, + $kendo-pdf-viewer-canvas-bg: $kendo-pdf-viewer-canvas-bg, + $kendo-pdf-viewer-canvas-text: $kendo-pdf-viewer-canvas-text, + $kendo-pdf-viewer-canvas-border: $kendo-pdf-viewer-canvas-border, + $kendo-pdf-viewer-page-spacing: $kendo-pdf-viewer-page-spacing, + $kendo-pdf-viewer-page-bg: $kendo-pdf-viewer-page-bg, + $kendo-pdf-viewer-page-text: $kendo-pdf-viewer-page-text, + $kendo-pdf-viewer-page-border: $kendo-pdf-viewer-page-border, + $kendo-pdf-viewer-page-shadow: $kendo-pdf-viewer-page-shadow, + $kendo-pdf-viewer-search-panel-padding-x: $kendo-pdf-viewer-search-panel-padding-x, + $kendo-pdf-viewer-search-panel-padding-y: $kendo-pdf-viewer-search-panel-padding-y, + $kendo-pdf-viewer-search-panel-spacing: $kendo-pdf-viewer-search-panel-spacing, + $kendo-pdf-viewer-search-panel-border-width: $kendo-pdf-viewer-search-panel-border-width, + $kendo-pdf-viewer-search-panel-border-radius: $kendo-pdf-viewer-search-panel-border-radius, + $kendo-pdf-viewer-search-panel-bg: $kendo-pdf-viewer-search-panel-bg, + $kendo-pdf-viewer-search-panel-text: $kendo-pdf-viewer-search-panel-text, + $kendo-pdf-viewer-search-panel-border: $kendo-pdf-viewer-search-panel-border, + $kendo-pdf-viewer-search-panel-shadow: $kendo-pdf-viewer-search-panel-shadow, + $kendo-pdf-viewer-search-panel-matches-spacing: $kendo-pdf-viewer-search-panel-matches-spacing, + $kendo-pdf-viewer-selection-line-height: $kendo-pdf-viewer-selection-line-height, + $kendo-pdf-viewer-search-highlight-bg: $kendo-pdf-viewer-search-highlight-bg, + $kendo-pdf-viewer-search-highlight-mark-bg: $kendo-pdf-viewer-search-highlight-mark-bg, + $kendo-pdf-viewer-icon-text: $kendo-pdf-viewer-icon-text, + $kendo-pdf-viewer-popup-padding-x: $kendo-pdf-viewer-popup-padding-x, + $kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-y, + $kendo-pdf-viewer-highlight-annotation-border: $kendo-pdf-viewer-highlight-annotation-border, + $kendo-pdf-viewer-highlight-annotation-hover-border: $kendo-pdf-viewer-highlight-annotation-hover-border, + $kendo-pdf-viewer-free-text-annotation-border: $kendo-pdf-viewer-free-text-annotation-border, + $kendo-pdf-viewer-free-text-annotation-placeholder-text: $kendo-pdf-viewer-free-text-annotation-placeholder-text, + $kendo-pdf-viewer-free-text-annotation-text: $kendo-pdf-viewer-free-text-annotation-text +); diff --git a/packages/default/scss/pivotgrid/_layout.scss b/packages/default/scss/pivotgrid/_layout.scss index 7233cb175e5..8064a07efe4 100644 --- a/packages/default/scss/pivotgrid/_layout.scss +++ b/packages/default/scss/pivotgrid/_layout.scss @@ -1,657 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-pivotgrid--layout-base() { - - // Pivotgrid - .k-pivotgrid { - padding-block: $kendo-pivotgrid-padding-y; - padding-inline: $kendo-pivotgrid-padding-x; - border-width: $kendo-pivotgrid-border-width; - border-style: solid; - box-sizing: content-box; - font-size: $kendo-pivotgrid-font-size; - font-family: $kendo-pivotgrid-font-family; - line-height: $kendo-pivotgrid-line-height; - text-align: start; - vertical-align: top; - display: grid; - grid-template-columns: $kendo-pivotgrid-row-header-width auto; - grid-template-rows: $kendo-pivotgrid-column-header-height auto; - position: relative; - - table { - margin: 0; - width: 100%; - max-width: none; - border-width: 0; - border-color: inherit; - border-collapse: separate; - border-spacing: 0; - outline: 0; - text-align: inherit; - empty-cells: show; - } - - thead, - tbody, - th, - tr, - td { - border-color: inherit; - text-align: inherit; - } - } - - - // Table Layout - .k-pivotgrid-table { - table-layout: fixed; - - th { - font-weight: 400; - text-transform: initial; - } - - .k-pivotgrid-header-root { - font-weight: 600; - text-transform: uppercase; - } - } - - - // Header empty cell - .k-pivotgrid-empty-cell { - border-right-style: solid; - border-right-width: $kendo-pivotgrid-cell-border-width; - border-bottom-style: solid; - border-bottom-width: $kendo-pivotgrid-cell-border-width; - - &:focus { - outline: none; - } - } - - - // Column Headers - .k-pivotgrid-column-headers { - overflow: hidden; - } - - .k-pivotgrid-column-headers .k-pivotgrid-table { - padding-inline-start: 0; - padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); - } - - .k-pivotgrid-column-headers .k-pivotgrid-cell { - border-bottom-style: solid; - border-bottom-width: $kendo-pivotgrid-cell-border-width; - border-left-style: solid; - border-left-width: $kendo-pivotgrid-cell-border-width; - - &:first-child { - border-left-width: 0; - } - - &.k-first { - border-left-width: $kendo-pivotgrid-cell-border-width; - } - } - - - // Row Headers - .k-pivotgrid-row-headers { - overflow: hidden; - } - - .k-pivotgrid-row-headers .k-pivotgrid-table { - padding-bottom: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); - } - - .k-pivotgrid-row-headers .k-pivotgrid-cell { - border-right-style: solid; - border-right-width: $kendo-pivotgrid-cell-border-width; - border-bottom-style: solid; - border-bottom-width: $kendo-pivotgrid-cell-border-width; - white-space: nowrap; - } - - - // Values - .k-pivotgrid-values { - border-color: inherit; - overflow: scroll; - } - - .k-pivotgrid-values .k-pivotgrid-cell { - border-bottom-style: solid; - border-bottom-width: $kendo-pivotgrid-cell-border-width; - border-left-style: solid; - border-left-width: $kendo-pivotgrid-cell-border-width; - - &:first-child { - border-left-width: 0; - } - } - - .k-pivotgrid-cell { - padding-block: $kendo-pivotgrid-cell-padding-y; - padding-inline: $kendo-pivotgrid-cell-padding-x; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: top; - overflow: hidden; - - &:focus { - outline: none; - } - } - - .k-pivotgrid-cell .k-icon { - cursor: pointer; - padding-inline-end: $kendo-pivotgrid-icon-spacing; - } - - .k-pivotgrid-total { - font-weight: 600; - } - - // Column menus - .k-column-menu .k-treeview { - padding-block: $kendo-pivotgrid-treeview-padding-y; - padding-inline: $kendo-pivotgrid-treeview-padding-x; - overflow: auto; - } - - - // Pivotgrid configurator - .k-pivotgrid-configurator { - display: flex; - } - - .k-pivotgrid-configurator-panel { - padding-block: $kendo-pivotgrid-configurator-padding-y; - padding-inline: $kendo-pivotgrid-configurator-padding-x; - border-width: $kendo-pivotgrid-configurator-border-width; - border-style: solid; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: hidden; - z-index: 2; - } - - // Configurator Button - .k-pivotgrid-configurator-button { - padding-block: $kendo-pivotgrid-configurator-button-padding-y; - padding-inline: $kendo-pivotgrid-configurator-button-padding-x; - border-width: $kendo-pivotgrid-configurator-button-border-width; - border-style: solid; - box-sizing: border-box; - cursor: pointer; - user-select: none; - - .k-flex-row-reverse & > span { - transform: rotate(-180deg); - } - } - - - // Modes - .k-pivotgrid-configurator-overlay { - position: absolute; - overflow: hidden; - z-index: 2; - } - - // Panel Content - .k-pivotgrid-configurator-header { - padding-block: $kendo-pivotgrid-configurator-header-padding-y; - padding-inline: $kendo-pivotgrid-configurator-header-padding-x; - font-size: $kendo-pivotgrid-configurator-header-font-size; - font-weight: $kendo-pivotgrid-configurator-header-font-weight; - display: flex; - flex-direction: row; - align-items: center; - } - - .k-pivotgrid-configurator-header-text { - word-break: normal; - overflow-wrap: anywhere; - } - - .k-pivotgrid-configurator-content { - padding-block: $kendo-pivotgrid-configurator-content-padding-y; - padding-inline: $kendo-pivotgrid-configurator-content-padding-x; - flex: 1 1 auto; - overflow: auto; - - .k-form { - .k-label { - font-size: 16px; - font-weight: 500; - align-items: flex-start; - } - .k-dropdown-list { - max-width: 90px; - } - .k-textbox { - flex-basis: 50%; - } - } - - // Rows, Cols and Filters - .k-row-fields, - .k-column-fields, - .k-filter-fields { - margin-top: $kendo-pivotgrid-configurator-fields-margin-y; - flex-wrap: wrap; - } - - // Values - .k-value-fields { - margin-block: $kendo-pivotgrid-configurator-fields-margin-y; - margin-inline: $kendo-pivotgrid-configurator-fields-margin-x; - display: flex; - flex-direction: column; - gap: calc( #{$kendo-pivotgrid-spacer} / 2 ); - } - - .k-select-all .k-checkbox { - margin-inline-end: k-spacing(1); - } - - .k-fields-list-wrapper { - max-height: 200px; - border-width: 1px; - border-style: solid; - flex: 1 1 auto; - overflow-x: hidden; - overflow-y: auto; - } - - .k-settings-description { - margin-top: k-spacing(4); - text-align: center; - } - - .k-treeview { - padding-block: $kendo-pivotgrid-treeview-padding-y; - padding-inline: $kendo-pivotgrid-treeview-padding-x; - overflow: auto; - } - } - - - // Calculated field - .k-calculated-field { - padding-block: $kendo-pivotgrid-calculated-field-padding-y; - padding-inline: $kendo-pivotgrid-calculated-field-padding-x; - border-width: $kendo-pivotgrid-calculated-field-border-width; - border-radius: $kendo-pivotgrid-calculated-field-border-radius; - border-style: solid; - box-sizing: border-box; - display: flex; - flex-direction: column; - gap: $kendo-pivotgrid-calculated-field-gap; - } - .k-calculated-field-header { - display: flex; - flex-direction: row; - align-items: center; - } - - .k-calculated-field-header .k-textbox { - min-width: 200px; - } - - .k-calculated-field-header-text { - margin-right: 5px; - word-break: normal; - overflow-wrap: anywhere; - } - - .k-calculated-field-header-actions { - flex-shrink: 0; - align-self: flex-start; - } - - .k-calculated-field-content .k-textbox { - width: 100%; - } - - .k-calculated-field-actions { - display: flex; - flex-direction: row; - align-items: center; - - .k-icon { - margin-right: k-spacing(2); - } - .k-dropdown-list { - max-width: 100px; - } - } - - .k-filter-menu .k-calculated-item { - border-bottom-width: 1px; - border-bottom-style: solid; - } - - - // Vertical Layout - .k-pivotgrid-configurator-vertical { - min-width: $kendo-pivotgrid-configurator-vertical-width; - } - - .k-flex-row { - .k-pivotgrid-configurator-overlay { - right: $kendo-pivotgrid-configurator-button-size; - } - - &-reverse .k-pivotgrid-configurator-overlay { - left: $kendo-pivotgrid-configurator-button-size; - } - } - - .k-flex-row, - .k-flex-row-reverse { - .k-pivotgrid-configurator-button { - display: flex; - align-items: center; - justify-content: center; - writing-mode: vertical-rl; - - .k-icon { - vertical-align: baseline; - } - } - - .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel { - border-right-width: 0; - border-left-width: 0; - } - } - - // Horizontal Layout - .k-pivotgrid-configurator-horizontal { - width: 100%; - height: $kendo-pivotgrid-configurator-horizontal-height; - - .k-pivotgrid-configurator-content { - .k-form { - display: flex; - flex-direction: row; - } - - .k-form-field-wrapper { - padding-left: $kendo-pivotgrid-spacer; - - & > *:first-child { - margin-top: 0; - } - &:first-child { - padding-left: 0; - flex: 1 1 30%; - } - &:nth-child(2) { - flex: 1 1 30%; - } - - &:last-child { - border-left-width: 1px; - border-left-style: solid; - flex: 1 1 40%; - } - } - - .k-row-fields, - .k-column-fields, - .k-filter-fields { - max-height: 100px; - overflow-x: hidden; - overflow-y: auto; - } - .k-value-fields { - max-height: 250px; - flex-flow: row wrap; - overflow-x: hidden; - overflow-y: auto; - } - } - } - - .k-flex-col { - .k-pivotgrid-configurator-overlay { - bottom: $kendo-pivotgrid-configurator-button-size; - } - - &-reverse .k-pivotgrid-configurator-overlay { - top: $kendo-pivotgrid-configurator-button-size; - } - } - - - .k-flex-col, - .k-flex-col-reverse { - .k-pivotgrid-configurator-button { - text-align: center; - } - - .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel { - border-top-width: 0; - border-bottom-width: 0; - } - } - - - // Pivotgrid export - .k-pdf-export-shadow { - - .k-pivotgrid { - height: auto !important; // stylelint-disable-line declaration-no-important - } - - .k-pivotgrid-values { - height: auto; - overflow: visible; - } - - .k-pivotgrid-column-headers .k-pivotgrid-table { - padding-inline-end: 0; - } - - } - - - // Legacy pivotgrid - // TODO: remove - .k-pivot { - border-width: $kendo-pivotgrid-border-width; - border-style: solid; - position: relative; - - .k-grid td { - white-space: nowrap; - } - - .k-grid-content { - flex: 1 1 auto; - } - } - - .k-pivot-toolbar { - border-width: 0 0 1px; - border-style: solid; - align-items: flex-start; - flex-wrap: wrap; - box-shadow: none; - - > * { - max-width: 100%; - } - - &::before { - display: none; - } - } - - .k-pivot-layout { - border-spacing: 0; - table-layout: auto; - - .k-grid-footer, - .k-grid .k-table-alt-row { - font-weight: bold; - } - } - - .k-pivot-layout > tbody, - .k-pivot .k-table-td, - .k-pivot td { - vertical-align: top; - } - - .k-pivot-layout > tbody > tr > td { - padding: 0; - } - - .k-pivot-rowheaders > .k-grid, - .k-pivot-table > .k-grid { - border-width: 0; - color: inherit; - background: none; - } - - .k-pivot-rowheaders > .k-grid td:first-child, - .k-pivot-table .k-grid-header .k-header.k-first { - border-left-width: 1px; - } - - .k-pivot-rowheaders > .k-grid td.k-first { - border-left-width: 0; - } - - .k-pivot-rowheaders > .k-grid { - overflow: hidden; - } - - .k-pivot-table { - border-left-width: 1px; - border-left-style: solid; - } - - .k-pivot-table .k-grid-header-wrap { - margin-right: -1px; - } - - .k-pivot-table .k-grid-header-wrap > table { - height: 100%; - } - - .k-pivot .k-grid-header .k-header { - vertical-align: top; - } - - .k-pivot .k-grid tr { - .k-grid-footer { - border-bottom-width: 0; - } - &:last-child:not(.k-grid-footer) { - td:not(.k-grid-footer) { - border-bottom-width: 1px; - } - } - } - - .k-pivot-layout .k-grid td { - border-bottom-width: 1px; - } - - .k-pivot-layout .k-grid-footer > td { - border-top-width: 0; - } - - .k-pivot-filter-window .k-treeview { - max-height: 600px; - } - - - // jquery specific -- old pivot - // TODO: remove - .k-pivotgrid-wrapper { - box-sizing: border-box; - display: flex; - flex-flow: row nowrap; - align-items: flex-start; - gap: k-spacing(2); - - > .k-pivotgrid-configurator-panel { - max-width: 320px; - flex: none; - } - > .k-pivot { - flex: 1; - } - } - .k-pivotgrid-configurator-panel.kendo-jquery { - box-sizing: border-box; - display: inline-flex; - - .k-pivotgrid-configurator { - height: 100%; - } - - .k-pivotgrid-configurator-content { - padding: k-spacing(4); - max-height: 100%; - display: flex; - flex-flow: column nowrap; - gap: k-spacing(4); - overflow-x: hidden; - overflow-y: auto; - } - - .k-pivotgrid-targets { - display: flex; - flex-flow: column nowrap; - gap: k-spacing(4); - } - - .k-pivotgrid-configurator-section { - display: flex; - flex-flow: column nowrap; - gap: k-spacing(2); - } - - .k-column-fields { - margin: 0; - padding: k-spacing(1); - max-height: 200px; - border-width: 1px; - border-style: solid; - display: flex; - flex-flow: row wrap; - gap: k-spacing(1); - overflow-x: hidden; - overflow-y: auto; - - > * { - margin: 0; - } - } - } - - // PivotGrid toggle icon - .k-pivotgrid-toggle { - margin-block: calc( #{$kendo-icon-padding} * -1 ); - padding: $kendo-icon-padding; - box-sizing: content-box; - cursor: pointer; - } - -} +@use "@progress/kendo-theme-core/scss/components/pivotgrid/_layout.scss" as *; @mixin kendo-pivotgrid--layout() { diff --git a/packages/default/scss/pivotgrid/_theme.scss b/packages/default/scss/pivotgrid/_theme.scss index 6646d956b29..f88e767ee91 100644 --- a/packages/default/scss/pivotgrid/_theme.scss +++ b/packages/default/scss/pivotgrid/_theme.scss @@ -1,248 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../popup/_variables.scss" as *; - -@mixin kendo-pivotgrid--theme-base() { - - // PivotGrid - .k-pivotgrid { - @include fill ( - $kendo-pivotgrid-text, - $kendo-pivotgrid-bg, - $kendo-pivotgrid-border - ); - } - - .k-pivotgrid-column-headers, - .k-pivotgrid-row-headers, - .k-pivotgrid-empty-cell { - @include fill ( - $kendo-pivotgrid-headers-text, - $kendo-pivotgrid-headers-bg, - $kendo-pivotgrid-headers-border - ); - } - - .k-pivotgrid-empty-cell { - @include fill ( - $border: $kendo-pivotgrid-alt-border - ); - } - - .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child { - border-right-color: $kendo-pivotgrid-alt-border; - } - - .k-pivotgrid-column-headers .k-pivotgrid-column-total:nth-last-of-type(2) .k-pivotgrid-cell:not(.k-pivotgrid-expanded), - .k-pivotgrid-column-headers .k-pivotgrid-row:last-child { - border-bottom-color: $kendo-pivotgrid-alt-border; - } - - - .k-pivotgrid-header-total, - .k-pivotgrid-total { - @include fill ( - $kendo-pivotgrid-total-text, - $kendo-pivotgrid-total-bg, - $kendo-pivotgrid-total-border - ); - } - - - // Hover state - .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover, - .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover, - .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover, - .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover, - .k-pivotgrid-values tbody > .k-pivotgrid-row:hover, - .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover { - @include fill ( - $kendo-pivotgrid-hover-text, - $kendo-pivotgrid-hover-bg, - $kendo-pivotgrid-hover-border - ); - } - - // Focus state - .k-pivotgrid-cell:focus, - .k-pivotgrid-cell.k-focus, - .k-pivotgrid-empty-cell:focus, - .k-pivotgrid-empty-cell.k-focus, - .k-master-row > .k-pivotgrid-cell:focus, - .k-grouping-row > .k-pivotgrid-cell:focus, - .k-detail-row > .k-pivotgrid-cell:focus, - .k-group-footer > .k-pivotgrid-cell:focus { - @include focus-indicator( $kendo-pivotgrid-focus-shadow, true ); - } - - // Selected state - .k-pivotgrid-cell.k-selected, - .k-pivotgrid-row.k-selected > .k-pivotgrid-cell { - @include fill ( - $kendo-pivotgrid-selected-text, - $kendo-pivotgrid-selected-bg, - $kendo-pivotgrid-selected-border - ); - } - - - // Pivotgrid configurator - .k-pivotgrid-configurator-button, - .k-pivotgrid-configurator-panel { - @include fill ( - $kendo-pivotgrid-configurator-text, - $kendo-pivotgrid-configurator-bg, - $kendo-pivotgrid-configurator-border - ); - } - - .k-pivotgrid-configurator-header { - @include fill( - $kendo-pivotgrid-configurator-header-text, - $kendo-pivotgrid-configurator-header-bg, - $kendo-pivotgrid-configurator-header-border - ); - } - - .k-pivotgrid-configurator-content .k-fields-list-wrapper { - @include fill( - $border: $kendo-pivotgrid-configurator-border - ); - } - - - // Calculated field - .k-calculated-field { - @include fill ( - $kendo-pivotgrid-calculated-field-text, - $kendo-pivotgrid-calculated-field-bg, - $kendo-pivotgrid-calculated-field-border - ); - } - - .k-calculated-field-header { - @include fill( - $kendo-pivotgrid-calculated-field-header-text, - $kendo-pivotgrid-calculated-field-header-bg, - $kendo-pivotgrid-calculated-field-header-border - ); - } - - .k-filter-menu .k-calculated-item { - @include fill( $border: $kendo-popup-border ); - } - - .k-pivotgrid-configurator-content .k-form-field-wrapper { - @include fill( $border: $kendo-component-border ); - } - - - // Overlay mode - .k-flex-row { - .k-pivotgrid-configurator-overlay { - @include box-shadow( $kendo-pivotgrid-configurator-end-shadow ); - } - - &-reverse .k-pivotgrid-configurator-overlay { - @include box-shadow( $kendo-pivotgrid-configurator-start-shadow ); - } - } - - .k-flex-col { - .k-pivotgrid-configurator-overlay { - @include box-shadow( $kendo-pivotgrid-configurator-top-shadow ); - } - - &-reverse .k-pivotgrid-configurator-overlay { - @include box-shadow( $kendo-pivotgrid-configurator-bottom-shadow ); - } - } - - // Legacy pivotgrid - // TODO: remove - .k-pivot { - @include fill ( - $kendo-pivotgrid-text, - $kendo-pivotgrid-bg, - $kendo-pivotgrid-border - ); - } - .k-pivot-table { - border-color: $kendo-pivotgrid-border; - } - - // Pivotgrid header - .k-pivot-rowheaders { - @include fill( - $kendo-pivotgrid-headers-text, - $kendo-pivotgrid-headers-bg, - $kendo-pivotgrid-headers-border - ); - } - - - // Pivotgrid toolbar - .k-pivot-toolbar { - @include fill( - $kendo-pivotgrid-headers-text, - $kendo-pivotgrid-headers-bg, - $kendo-pivotgrid-headers-border - ); - - .k-empty { - color: $kendo-subtle-text; - } - } - - .k-pivot .k-alt { - background-color: $kendo-pivotgrid-alt-bg; - } - - .k-pivot-toolbar, - .k-pivot-table, - .k-pivot-rowheaders > .k-grid td:first-child, - .k-pivot-table .k-grid-header .k-header.k-first { - border-color: $kendo-pivotgrid-chrome-border; - } - - .k-header.k-alt { - background-color: $kendo-pivotgrid-row-headers-bg; - } - - .k-pivot-layout .k-grid-footer { - color: $kendo-pivotgrid-alt-text; - background-color: $kendo-pivotgrid-alt-bg; - } - - // KPI icons - .k-i-kpi-trend-increase, - .k-i-kpi-trend-decrease, - .k-i-kpi-trend-equal { - color: inherit; - } - - .k-i-kpi-status-hold { - color: $kendo-color-warning; - } - - .k-i-kpi-status-deny { - color: $kendo-color-error; - } - - .k-i-kpi-status-open { - color: $kendo-color-success; - } - - - // Configurator - .k-pivotgrid-configurator-panel.kendo-jquery { - - .k-column-fields { - border-color: $kendo-component-border; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/pivotgrid/_theme.scss" as *; @mixin kendo-pivotgrid--theme() { diff --git a/packages/default/scss/pivotgrid/_variables.scss b/packages/default/scss/pivotgrid/_variables.scss index 97e6de88381..a8bf34a4350 100644 --- a/packages/default/scss/pivotgrid/_variables.scss +++ b/packages/default/scss/pivotgrid/_variables.scss @@ -264,3 +264,90 @@ $kendo-pivotgrid-button-active-text: null !default; $kendo-pivotgrid-remove-bg: null !default; $kendo-pivotgrid-remove-text: null !default; + +@forward "@progress/kendo-theme-core/scss/components/pivotgrid/_variables.scss" with ( + $kendo-pivotgrid-spacer: $kendo-pivotgrid-spacer, + $kendo-pivotgrid-padding-x: $kendo-pivotgrid-padding-x, + $kendo-pivotgrid-padding-y: $kendo-pivotgrid-padding-y, + $kendo-pivotgrid-font-family: $kendo-pivotgrid-font-family, + $kendo-pivotgrid-font-size: $kendo-pivotgrid-font-size, + $kendo-pivotgrid-line-height: $kendo-pivotgrid-line-height, + $kendo-pivotgrid-border-width: $kendo-pivotgrid-border-width, + $kendo-pivotgrid-icon-spacing: $kendo-pivotgrid-icon-spacing, + $kendo-pivotgrid-row-header-width: $kendo-pivotgrid-row-header-width, + $kendo-pivotgrid-column-header-height: $kendo-pivotgrid-column-header-height, + $kendo-pivotgrid-cell-padding-x: $kendo-pivotgrid-cell-padding-x, + $kendo-pivotgrid-cell-padding-y: $kendo-pivotgrid-cell-padding-y, + $kendo-pivotgrid-cell-border-width: $kendo-pivotgrid-cell-border-width, + $kendo-pivotgrid-bg: $kendo-pivotgrid-bg, + $kendo-pivotgrid-text: $kendo-pivotgrid-text, + $kendo-pivotgrid-border: $kendo-pivotgrid-border, + $kendo-pivotgrid-alt-border: $kendo-pivotgrid-alt-border, + $kendo-pivotgrid-headers-bg: $kendo-pivotgrid-headers-bg, + $kendo-pivotgrid-headers-text: $kendo-pivotgrid-headers-text, + $kendo-pivotgrid-headers-border: $kendo-pivotgrid-headers-border, + $kendo-pivotgrid-total-bg: $kendo-pivotgrid-total-bg, + $kendo-pivotgrid-total-text: $kendo-pivotgrid-total-text, + $kendo-pivotgrid-total-border: $kendo-pivotgrid-total-border, + $kendo-pivotgrid-hover-bg: $kendo-pivotgrid-hover-bg, + $kendo-pivotgrid-hover-text: $kendo-pivotgrid-hover-text, + $kendo-pivotgrid-hover-border: $kendo-pivotgrid-hover-border, + $kendo-pivotgrid-selected-bg: $kendo-pivotgrid-selected-bg, + $kendo-pivotgrid-selected-text: $kendo-pivotgrid-selected-text, + $kendo-pivotgrid-selected-border: $kendo-pivotgrid-selected-border, + $kendo-pivotgrid-focus-shadow: $kendo-pivotgrid-focus-shadow, + $kendo-pivotgrid-configurator-padding-x: $kendo-pivotgrid-configurator-padding-x, + $kendo-pivotgrid-configurator-padding-y: $kendo-pivotgrid-configurator-padding-y, + $kendo-pivotgrid-configurator-border-width: $kendo-pivotgrid-configurator-border-width, + $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-configurator-header-padding-x, + $kendo-pivotgrid-configurator-header-padding-y: $kendo-pivotgrid-configurator-header-padding-y, + $kendo-pivotgrid-configurator-header-font-size: $kendo-pivotgrid-configurator-header-font-size, + $kendo-pivotgrid-configurator-header-font-weight: $kendo-pivotgrid-configurator-header-font-weight, + $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-configurator-content-padding-x, + $kendo-pivotgrid-configurator-content-padding-y: $kendo-pivotgrid-configurator-content-padding-y, + $kendo-pivotgrid-configurator-fields-margin-x: $kendo-pivotgrid-configurator-fields-margin-x, + $kendo-pivotgrid-configurator-fields-margin-y: $kendo-pivotgrid-configurator-fields-margin-y, + $kendo-pivotgrid-configurator-vertical-width: $kendo-pivotgrid-configurator-vertical-width, + $kendo-pivotgrid-configurator-horizontal-height: $kendo-pivotgrid-configurator-horizontal-height, + $kendo-pivotgrid-configurator-bg: $kendo-pivotgrid-configurator-bg, + $kendo-pivotgrid-configurator-text: $kendo-pivotgrid-configurator-text, + $kendo-pivotgrid-configurator-border: $kendo-pivotgrid-configurator-border, + $kendo-pivotgrid-configurator-header-bg: $kendo-pivotgrid-configurator-header-bg, + $kendo-pivotgrid-configurator-header-text: $kendo-pivotgrid-configurator-header-text, + $kendo-pivotgrid-configurator-header-border: $kendo-pivotgrid-configurator-header-border, + $kendo-pivotgrid-configurator-shadow: $kendo-pivotgrid-configurator-shadow, + $kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-end-shadow, + $kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-start-shadow, + $kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-top-shadow, + $kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-bottom-shadow, + $kendo-pivotgrid-configurator-button-padding-x: $kendo-pivotgrid-configurator-button-padding-x, + $kendo-pivotgrid-configurator-button-padding-y: $kendo-pivotgrid-configurator-button-padding-y, + $kendo-pivotgrid-configurator-button-border-width: $kendo-pivotgrid-configurator-button-border-width, + $kendo-pivotgrid-configurator-button-size: $kendo-pivotgrid-configurator-button-size, + $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-calculated-field-padding-x, + $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-calculated-field-padding-y, + $kendo-pivotgrid-calculated-field-border-width: $kendo-pivotgrid-calculated-field-border-width, + $kendo-pivotgrid-calculated-field-border-radius: $kendo-pivotgrid-calculated-field-border-radius, + $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-calculated-field-gap, + $kendo-pivotgrid-calculated-field-bg: $kendo-pivotgrid-calculated-field-bg, + $kendo-pivotgrid-calculated-field-text: $kendo-pivotgrid-calculated-field-text, + $kendo-pivotgrid-calculated-field-border: $kendo-pivotgrid-calculated-field-border, + $kendo-pivotgrid-calculated-field-header-bg: $kendo-pivotgrid-calculated-field-header-bg, + $kendo-pivotgrid-calculated-field-header-text: $kendo-pivotgrid-calculated-field-header-text, + $kendo-pivotgrid-calculated-field-header-border: $kendo-pivotgrid-calculated-field-header-border, + $kendo-pivotgrid-treeview-padding-x: $kendo-pivotgrid-treeview-padding-x, + $kendo-pivotgrid-treeview-padding-y: $kendo-pivotgrid-treeview-padding-y, + $kendo-pivotgrid-alt-bg: $kendo-pivotgrid-alt-bg, + $kendo-pivotgrid-alt-text: $kendo-pivotgrid-alt-text, + $kendo-pivotgrid-chrome-border: $kendo-pivotgrid-chrome-border, + $kendo-pivotgrid-container-bg: $kendo-pivotgrid-container-bg, + $kendo-pivotgrid-row-headers-bg: $kendo-pivotgrid-row-headers-bg, + $kendo-pivotgrid-button-bg: $kendo-pivotgrid-button-bg, + $kendo-pivotgrid-button-text: $kendo-pivotgrid-button-text, + $kendo-pivotgrid-button-hover-bg: $kendo-pivotgrid-button-hover-bg, + $kendo-pivotgrid-button-hover-text: $kendo-pivotgrid-button-hover-text, + $kendo-pivotgrid-button-active-bg: $kendo-pivotgrid-button-active-bg, + $kendo-pivotgrid-button-active-text: $kendo-pivotgrid-button-active-text, + $kendo-pivotgrid-remove-bg: $kendo-pivotgrid-remove-bg, + $kendo-pivotgrid-remove-text: $kendo-pivotgrid-remove-text +); diff --git a/packages/default/scss/popover/_layout.scss b/packages/default/scss/popover/_layout.scss index 151c20f7a6a..d4fc7e0ef8d 100644 --- a/packages/default/scss/popover/_layout.scss +++ b/packages/default/scss/popover/_layout.scss @@ -1,96 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-popover--layout-base() { - - // Popover - .k-popover { - @include border-radius( $kendo-popover-border-radius ); - padding: 0; - border-width: $kendo-popover-border-width; - border-style: $kendo-popover-border-style; - box-sizing: border-box; - outline: 0; - font-size: $kendo-popover-font-size; - font-family: $kendo-popover-font-family; - line-height: $kendo-popover-line-height; - display: flex; - flex-flow: column nowrap; - z-index: 12000; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - .k-popover-inner { - height: inherit; - position: relative; - border-radius: inherit; - border-color: inherit; - } - - // Header - .k-popover-header { - @include border-top-radius( $kendo-popover-border-radius ); - padding-block: $kendo-popover-header-padding-y; - padding-inline: $kendo-popover-header-padding-x; - border-width: 0 0 $kendo-popover-header-border-width; - border-style: $kendo-popover-header-border-style; - border-color: inherit; - } - - // Body - .k-popover-body { - padding-block: $kendo-popover-body-padding-y; - padding-inline: $kendo-popover-body-padding-x; - } - - // Actions - .k-popover-actions { - border-width: $kendo-popover-actions-border-width 0 0; - } - - - // Popover callout - .k-popover-callout { - margin: 0; - width: $kendo-popover-callout-width; - height: $kendo-popover-callout-height; - border-width: $kendo-popover-callout-border-width; - border-style: $kendo-popover-callout-border-style; - position: absolute; - - &.k-callout-n { - top: 0; - left: 50%; - transform: translate(-50%, -50%) rotate(45deg); - } - - &.k-callout-e { - top: 50%; - right: 0; - transform: translate(50%, -50%) rotate(-45deg); - } - - &.k-callout-s { - bottom: 0; - left: 50%; - transform: translate(-50%, 50%) rotate(45deg); - } - - &.k-callout-w { - top: 50%; - left: 0; - transform: translate(-50%, -50%) rotate(45deg); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/popover/_layout.scss" as *; @mixin kendo-popover--layout() { diff --git a/packages/default/scss/popover/_theme.scss b/packages/default/scss/popover/_theme.scss index 4467adfc88d..2382a7354eb 100644 --- a/packages/default/scss/popover/_theme.scss +++ b/packages/default/scss/popover/_theme.scss @@ -1,44 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-popover--theme-base() { - - // Popover - .k-popover { - @include box-shadow( $kendo-popover-shadow ); - - @include fill( - $kendo-popover-text, - $kendo-popover-bg, - $kendo-popover-border - ); - } - - .k-popover-inner { - background-color: inherit; - border-color: inherit; - } - - // Header - .k-popover-header { - @include fill( - $kendo-popover-header-text, - $kendo-popover-header-bg, - $kendo-popover-header-border - ); - } - - // Callout - .k-popover-callout { - @include fill( - $bg: inherit, - $border: inherit - ); - - @include box-shadow( inherit ) - } - -} +@use "@progress/kendo-theme-core/scss/components/popover/_theme.scss" as *; @mixin kendo-popover--theme() { diff --git a/packages/default/scss/popover/_variables.scss b/packages/default/scss/popover/_variables.scss index f5f4e1919a4..9a578a9ad21 100644 --- a/packages/default/scss/popover/_variables.scss +++ b/packages/default/scss/popover/_variables.scss @@ -87,3 +87,32 @@ $kendo-popover-callout-bg: $kendo-popover-bg !default; /// The border color of the Popover callout. /// @group popover $kendo-popover-callout-border: $kendo-popover-border !default; + +@forward "@progress/kendo-theme-core/scss/components/popover/_variables.scss" with ( + $kendo-popover-border-width: $kendo-popover-border-width, + $kendo-popover-border-style: $kendo-popover-border-style, + $kendo-popover-border-radius: $kendo-popover-border-radius, + $kendo-popover-font-family: $kendo-popover-font-family, + $kendo-popover-font-size: $kendo-popover-font-size, + $kendo-popover-line-height: $kendo-popover-line-height, + $kendo-popover-text: $kendo-popover-text, + $kendo-popover-bg: $kendo-popover-bg, + $kendo-popover-border: $kendo-popover-border, + $kendo-popover-shadow: $kendo-popover-shadow, + $kendo-popover-header-padding-x: $kendo-popover-header-padding-x, + $kendo-popover-header-padding-y: $kendo-popover-header-padding-y, + $kendo-popover-header-border-width: $kendo-popover-header-border-width, + $kendo-popover-header-border-style: $kendo-popover-header-border-style, + $kendo-popover-header-text: $kendo-popover-header-text, + $kendo-popover-header-bg: $kendo-popover-header-bg, + $kendo-popover-header-border: $kendo-popover-header-border, + $kendo-popover-body-padding-x: $kendo-popover-body-padding-x, + $kendo-popover-body-padding-y: $kendo-popover-body-padding-y, + $kendo-popover-actions-border-width: $kendo-popover-actions-border-width, + $kendo-popover-callout-width: $kendo-popover-callout-width, + $kendo-popover-callout-height: $kendo-popover-callout-height, + $kendo-popover-callout-border-width: $kendo-popover-callout-border-width, + $kendo-popover-callout-border-style: $kendo-popover-callout-border-style, + $kendo-popover-callout-bg: $kendo-popover-callout-bg, + $kendo-popover-callout-border: $kendo-popover-callout-border +); diff --git a/packages/default/scss/popup/_layout.scss b/packages/default/scss/popup/_layout.scss index 43f7e37c08a..9b100bdb9fb 100644 --- a/packages/default/scss/popup/_layout.scss +++ b/packages/default/scss/popup/_layout.scss @@ -1,82 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-popup--layout-base() { - - // Animation Container - .k-animation-container { - position: absolute; - overflow: hidden; - z-index: 100; - - &-fixed { - position: fixed; - } - - &-relative { - position: relative; - display: inline-block; - } - } - - .k-animation-container { - @include border-bottom-radius-only( $kendo-border-radius-md ); - } - - .k-animation-container-shown { - overflow: visible; - } - - // Popup - .k-popup { - @include border-radius( $kendo-popup-border-radius ); - margin: 0; - padding: 0; - // padding-block: $kendo-popup-padding-y; - // padding-inline: $kendo-popup-padding-x; - border-width: $kendo-popup-border-width; - border-style: solid; - box-sizing: border-box; - font-size: $kendo-popup-font-size; - line-height: $kendo-popup-line-height; - display: flex; - flex-direction: column; - align-items: stretch; - - .k-item { - outline: none; - } - } - - .k-popup > .k-colorpalette { - padding-block: $kendo-popup-content-padding-y; - padding-inline: $kendo-popup-content-padding-x; - } - - // Transparent popup - .k-popup.k-popup-transparent { - border-width: 0; - background-color: transparent; - box-shadow: none; - } - - // Flush popup - .k-popup.k-popup-flush { - padding: 0; - } - - // Child components - .k-popup > .k-widget, - .k-popup > .k-coloreditor { - border-width: 0; - } - - // Legacy shadow - .k-shadow { - box-shadow: $kendo-popup-shadow; - } - -} +@use "@progress/kendo-theme-core/scss/components/popup/_layout.scss" as *; @mixin kendo-popup--layout() { diff --git a/packages/default/scss/popup/_theme.scss b/packages/default/scss/popup/_theme.scss index 87d24f247a1..6d733623ae7 100644 --- a/packages/default/scss/popup/_theme.scss +++ b/packages/default/scss/popup/_theme.scss @@ -1,22 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-popup--theme-base() { - - .k-popup { - @include fill( - $kendo-popup-text, - $kendo-popup-bg, - $kendo-popup-border - ); - @include box-shadow( $kendo-popup-shadow ); - } - - .k-animation-container { - @include border-bottom-radius-only( k-border-radius(md) ); - } - -} +@use "@progress/kendo-theme-core/scss/components/popup/_theme.scss" as *; @mixin kendo-popup--theme() { diff --git a/packages/default/scss/popup/_variables.scss b/packages/default/scss/popup/_variables.scss index 47d3a762f38..ff66bf671c4 100644 --- a/packages/default/scss/popup/_variables.scss +++ b/packages/default/scss/popup/_variables.scss @@ -39,3 +39,18 @@ $kendo-popup-border: $kendo-component-border !default; /// Box shadow of the popup. /// @group popup $kendo-popup-shadow: k-elevation(4) !default; + +@forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with ( + $kendo-popup-padding-x: $kendo-popup-padding-x, + $kendo-popup-padding-y: $kendo-popup-padding-y, + $kendo-popup-border-width: $kendo-popup-border-width, + $kendo-popup-border-radius: $kendo-popup-border-radius, + $kendo-popup-font-size: $kendo-popup-font-size, + $kendo-popup-line-height: $kendo-popup-line-height, + $kendo-popup-content-padding-x: $kendo-popup-content-padding-x, + $kendo-popup-content-padding-y: $kendo-popup-content-padding-y, + $kendo-popup-bg: $kendo-popup-bg, + $kendo-popup-text: $kendo-popup-text, + $kendo-popup-border: $kendo-popup-border, + $kendo-popup-shadow: $kendo-popup-shadow +); diff --git a/packages/default/scss/progressbar/_layout.scss b/packages/default/scss/progressbar/_layout.scss index 8b996132ec2..75db29e7883 100644 --- a/packages/default/scss/progressbar/_layout.scss +++ b/packages/default/scss/progressbar/_layout.scss @@ -1,247 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-progressbar--layout-base() { - - // Base - .k-progressbar { - @include border-radius( k-border-radius(md) ); - --kendo-progressbar-value: 0; - border-width: $kendo-progressbar-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-progressbar-font-family; - font-size: $kendo-progressbar-font-size; - line-height: $kendo-progressbar-line-height; - display: inline-grid; - vertical-align: middle; - position: relative; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - - // Selection - > .k-progressbar-value { - border-width: 0; - border-style: solid; - display: flex; - overflow: hidden; - grid-column: 1 / -1; - grid-row: 1 / -1; - } - - - // Chunks - > .k-progressbar-chunks { - border-width: inherit; - border-style: inherit; - white-space: nowrap; - display: flex; - align-items: stretch; - flex: 1; - gap: 1px; - grid-column: 1 / -1; - grid-row: 1 / -1; - } - .k-progressbar-chunk { - display: block; - border-width: 0; - flex: 1; - } - - } - - - // Status - .k-progress-status-wrap { - width: 100%; - height: 100%; - display: flex; - align-items: center; - flex-shrink: 0; - grid-column: 1 / -1; - grid-row: 1 / -1; - - &.k-progress-start { justify-content: flex-start; } - &.k-progress-center { justify-content: center; } - &.k-progress-end { justify-content: flex-end; } - } - .k-progress-status { - padding-block: 0; - padding-inline: k-spacing(2); - min-width: 10px; - text-align: center; - display: inline-block; - white-space: nowrap; - } - - - // Horizontal - .k-progressbar-horizontal { - width: $kendo-progressbar-horizontal-width; - height: var( --kendo-progressbar-height, #{$kendo-progressbar-height} ); - grid-template-columns: 1fr; - grid-template-rows: 100%; - - - .k-progress-status-wrap { - flex-direction: row; - } - - > .k-progressbar-value { - width: calc( var( --kendo-progressbar-value, 0 ) * 1% ); - flex-direction: row; - - > .k-progress-status-wrap { - width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); - } - } - - - // Chunks - > .k-progressbar-chunks { - flex-direction: row; - } - - // Horizontal reverse - &.k-progressbar-reverse { - - > .k-progressbar-value { - flex-direction: row-reverse; - justify-self: flex-end; - } - - > .k-progressbar-chunks { - flex-direction: row-reverse; - } - } - } - - - // Vertical - .k-progressbar-vertical { - width: var( --kendo-progressbar-height, #{$kendo-progressbar-height} ); - height: 27em; - grid-template-columns: 100%; - grid-template-rows: 1fr; - - - .k-progress-status-wrap { - flex-direction: column-reverse; - } - .k-progress-status { - writing-mode: vertical-lr; - } - - > .k-progressbar-value { - height: calc( var( --kendo-progressbar-value, 0 ) * 1% ); - flex-direction: column-reverse; - align-self: flex-end; - align-items: flex-end; - - > .k-progress-status-wrap { - height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); - } - } - - - // Chunk - > .k-progressbar-chunks { - flex-direction: column-reverse; - } - - // Vertical reverse - &.k-progressbar-reverse { - flex-direction: column; - - > .k-progressbar-value { - flex-direction: column; - align-self: flex-start; - } - - > .k-progressbar-chunks { - flex-direction: column; - } - } - } - - - // Indeterminate - .k-progressbar-indeterminate { - .k-progress-status-wrap, - .k-progressbar-value, - .k-progressbar-chunk { - display: none; - } - } - - - // Blazor specific - .telerik-blazor.k-progressbar-horizontal { - - > .k-progressbar-value, - > .k-progressbar-value > .k-progress-status-wrap { - transition: width .1s ease-in-out; - } - } - - - // RTL - .k-rtl .k-progressbar, - .k-progressbar[dir="rtl"] { - direction: rtl; - } - - - // Circular progressbar - .k-circular-progressbar { - display: inline-block; - text-align: start; - position: relative; - } - - .k-circular-progressbar-surface { - height: 100%; - - & > div { - width: 100%; - height: 100%; - } - - svg { - width: 100%; - height: 100%; - } - } - - .k-circular-progressbar-scale { - fill: none; - } - - .k-circular-progressbar-arc { - transform-box: fill-box; - transform-origin: center center; - transform: rotate(-90deg); - stroke-linecap: round; - fill: none; - } - - .k-circular-progressbar-label { - position: absolute; - text-align: center; - padding: 0; - margin: 0; - } - -} +@use "@progress/kendo-theme-core/scss/components/progressbar/_layout.scss" as *; @mixin kendo-progressbar--layout() { diff --git a/packages/default/scss/progressbar/_theme.scss b/packages/default/scss/progressbar/_theme.scss index 4e7bf2125e8..89dcdb111b8 100644 --- a/packages/default/scss/progressbar/_theme.scss +++ b/packages/default/scss/progressbar/_theme.scss @@ -1,55 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-progressbar--theme-base() { - - @keyframes kendo-progressbar-indeterminate-animation { - from { background-position: 0 0; } - to { background-position: $kendo-progressbar-height 0; } - } - - .k-progressbar { - @include fill( $kendo-progressbar-text, $kendo-progressbar-bg, $kendo-progressbar-border, $kendo-progressbar-gradient ); - - .k-selected { - @include fill( $kendo-progressbar-value-text, $kendo-progressbar-value-bg, $kendo-progressbar-value-border, $kendo-progressbar-value-gradient ); - } - } - - // Chunk progressbar - .k-chunk-progressbar { - // TODO uncomment for 2023 R1 - // background-color: k-if-var( $progressbar-chunk-border, transparent ); - background-color: transparent; - } - .k-progressbar-chunk { - background-color: $kendo-progressbar-bg; - - .k-selected { - background-color: $kendo-progressbar-value-bg; - } - } - - .k-progressbar-indeterminate { - @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border ); - @include striped-gradient( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) ); - background-size: $kendo-progressbar-height $kendo-progressbar-height; - animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing; - } - - - // Circular progressbar - .k-circular-progressbar-scale { - stroke: $kendo-circular-progressbar-scale-stroke; - } - - .k-circular-progressbar-arc { - stroke: $kendo-circular-progressbar-arc-stroke; - transition: stroke .5s ease; - } - -} +@use "@progress/kendo-theme-core/scss/components/progressbar/_theme.scss" as *; @mixin kendo-progressbar--theme() { diff --git a/packages/default/scss/progressbar/_variables.scss b/packages/default/scss/progressbar/_variables.scss index 074d5831408..940f6fdfa33 100644 --- a/packages/default/scss/progressbar/_variables.scss +++ b/packages/default/scss/progressbar/_variables.scss @@ -75,3 +75,28 @@ $kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default; /// The scale stroke background color of the circular ProgressBar. /// @group progressbar $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default; + +@forward "@progress/kendo-theme-core/scss/components/progressbar/_variables.scss" with ( + $kendo-progressbar-height: $kendo-progressbar-height, + $kendo-progressbar-horizontal-width: $kendo-progressbar-horizontal-width, + $kendo-progressbar-animation-timing: $kendo-progressbar-animation-timing, + $kendo-progressbar-border-width: $kendo-progressbar-border-width, + $kendo-progressbar-font-family: $kendo-progressbar-font-family, + $kendo-progressbar-font-size: $kendo-progressbar-font-size, + $kendo-progressbar-line-height: $kendo-progressbar-line-height, + $kendo-progressbar-bg: $kendo-progressbar-bg, + $kendo-progressbar-text: $kendo-progressbar-text, + $kendo-progressbar-border: $kendo-progressbar-border, + $kendo-progressbar-gradient: $kendo-progressbar-gradient, + $kendo-progressbar-value-bg: $kendo-progressbar-value-bg, + $kendo-progressbar-value-text: $kendo-progressbar-value-text, + $kendo-progressbar-value-border: $kendo-progressbar-value-border, + $kendo-progressbar-value-gradient: $kendo-progressbar-value-gradient, + $kendo-progressbar-indeterminate-bg: $kendo-progressbar-indeterminate-bg, + $kendo-progressbar-indeterminate-text: $kendo-progressbar-indeterminate-text, + $kendo-progressbar-indeterminate-border: $kendo-progressbar-indeterminate-border, + $kendo-progressbar-indeterminate-gradient: $kendo-progressbar-indeterminate-gradient, + $kendo-progressbar-chunk-border: $kendo-progressbar-chunk-border, + $kendo-circular-progressbar-arc-stroke: $kendo-circular-progressbar-arc-stroke, + $kendo-circular-progressbar-scale-stroke: $kendo-circular-progressbar-scale-stroke +); diff --git a/packages/default/scss/prompt/_layout.scss b/packages/default/scss/prompt/_layout.scss index 177d27679cc..97ceecc2b63 100644 --- a/packages/default/scss/prompt/_layout.scss +++ b/packages/default/scss/prompt/_layout.scss @@ -1,76 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-prompt--layout-base() { - - // Prompt - .k-prompt { - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - - // Toolbar - .k-toolbar { - border-top-width: 0; - border-inline-width: 0; - } - } - - // Content - .k-prompt-content { - padding-block: $kendo-prompt-content-padding-y; - padding-inline: $kendo-prompt-content-padding-x; - display: flex; - flex-flow: column nowrap; - flex: 1 1 auto; - gap: $kendo-prompt-content-spacing; - overflow: auto; - } - - .k-prompt-view { - display: flex; - flex-direction: column; - flex: 1 1 auto; - gap: $kendo-prompt-content-spacing; - } - - // Prompt Expander - .k-prompt-expander { - display: flex; - flex-direction: column; - flex: 1; - align-items: flex-start; - gap: $kendo-prompt-expander-spacing; - } - - .k-prompt-expander-content { - display: flex; - flex-flow: column; - flex: 0 0 auto; - gap: $kendo-prompt-expander-spacing; - align-self: stretch; - } - - .k-prompt-suggestion { - border-width: 1px; - border-style: solid; - border-radius: $kendo-prompt-suggestion-border-radius; - padding-block: $kendo-prompt-suggestion-padding-y; - padding-inline: $kendo-prompt-suggestion-padding-x; - cursor: pointer; - } - - .k-prompt-setting { - display: flex; - flex-direction: column; - } - - // Actions - .k-prompt-actions.k-actions { - margin: 0; - } - -} +@use "@progress/kendo-theme-core/scss/components/prompt/_layout.scss" as *; @mixin kendo-prompt--layout() { diff --git a/packages/default/scss/prompt/_theme.scss b/packages/default/scss/prompt/_theme.scss index 7bd980054af..2ecd9f387de 100644 --- a/packages/default/scss/prompt/_theme.scss +++ b/packages/default/scss/prompt/_theme.scss @@ -1,42 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-prompt--theme-base() { - - .k-prompt { - @include fill( - $kendo-prompt-text, - $kendo-prompt-bg, - $kendo-prompt-border - ); - } - - .k-prompt-header { - @include fill( - $kendo-prompt-header-text, - $kendo-prompt-header-bg, - $kendo-prompt-header-border - ); - } - - .k-prompt-content { - @include fill( - $kendo-prompt-content-text, - $kendo-prompt-content-bg, - $kendo-prompt-content-border - ); - } - - .k-prompt-suggestion { - @include fill( - $kendo-prompt-suggestion-text, - $kendo-prompt-suggestion-bg, - $kendo-prompt-suggestion-border - ); - @include box-shadow( $kendo-prompt-suggestion-shadow ); - } - -} +@use "@progress/kendo-theme-core/scss/components/prompt/_theme.scss" as *; @mixin kendo-prompt--theme() { diff --git a/packages/default/scss/prompt/_variables.scss b/packages/default/scss/prompt/_variables.scss index 06340d0245c..4242118d1de 100644 --- a/packages/default/scss/prompt/_variables.scss +++ b/packages/default/scss/prompt/_variables.scss @@ -67,3 +67,26 @@ $kendo-prompt-suggestion-border: $kendo-component-border !default; /// The elevation of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; + +@forward "@progress/kendo-theme-core/scss/components/prompt/_variables.scss" with ( + $kendo-prompt-text: $kendo-prompt-text, + $kendo-prompt-bg: $kendo-prompt-bg, + $kendo-prompt-border: $kendo-prompt-border, + $kendo-prompt-header-text: $kendo-prompt-header-text, + $kendo-prompt-header-bg: $kendo-prompt-header-bg, + $kendo-prompt-header-border: $kendo-prompt-header-border, + $kendo-prompt-content-padding-y: $kendo-prompt-content-padding-y, + $kendo-prompt-content-padding-x: $kendo-prompt-content-padding-x, + $kendo-prompt-content-spacing: $kendo-prompt-content-spacing, + $kendo-prompt-content-text: $kendo-prompt-content-text, + $kendo-prompt-content-bg: $kendo-prompt-content-bg, + $kendo-prompt-content-border: $kendo-prompt-content-border, + $kendo-prompt-expander-spacing: $kendo-prompt-expander-spacing, + $kendo-prompt-suggestion-padding-y: $kendo-prompt-suggestion-padding-y, + $kendo-prompt-suggestion-padding-x: $kendo-prompt-suggestion-padding-x, + $kendo-prompt-suggestion-border-radius: $kendo-prompt-suggestion-border-radius, + $kendo-prompt-suggestion-text: $kendo-prompt-suggestion-text, + $kendo-prompt-suggestion-bg: $kendo-prompt-suggestion-bg, + $kendo-prompt-suggestion-border: $kendo-prompt-suggestion-border, + $kendo-prompt-suggestion-shadow: $kendo-prompt-suggestion-shadow +); diff --git a/packages/default/scss/radio/_layout.scss b/packages/default/scss/radio/_layout.scss index 62753c1c0ca..e458b3a8117 100644 --- a/packages/default/scss/radio/_layout.scss +++ b/packages/default/scss/radio/_layout.scss @@ -1,229 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-radio--layout-base() { - - // Radio - .k-radio { - @include border-radius( $kendo-radio-radius ); - margin: 0; - padding: 0; - line-height: initial; - border-width: $kendo-radio-border-width; - border-style: solid; - outline: 0; - box-sizing: border-box; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - display: inline-block; - flex: none; - vertical-align: middle; - position: relative; - cursor: pointer; - -webkit-appearance: none; - } - - - // Radio indicator - .k-radio::before { - @if $kendo-radio-indicator-type == "glyph" { - content: $kendo-radio-checked-glyph; - width: 1em; - height: 1em; - font-family: $kendo-radio-glyph-font-family; - line-height: 1; - transform: scale(0) translate(-50%, -50%); - overflow: hidden; - position: absolute; - top: 50%; - left: 50%; - } - - @if $kendo-radio-indicator-type == "image" { - content: ""; - display: block; - width: 100%; - height: 100%; - mask-repeat: no-repeat; - } - } - - - // Checked state - .k-radio:checked, - .k-radio.k-checked { - @if $kendo-radio-indicator-type == "image" { - &::before { - background-color: currentColor; - mask-image: $kendo-radio-checked-image; - } - } - - @if $kendo-radio-indicator-type == "glyph" { - &::before { - transform: scale(1) translate(-50%, -50%); - } - } - } - - - // Disabled state - .k-radio:disabled, - .k-radio.k-disabled { - @include disabled( $kendo-disabled-styling... ); - } - .k-radio:disabled:checked, - .k-radio.k-disabled.k-checked { - @if $kendo-radio-indicator-type == "image" { - background-image: $kendo-radio-disabled-checked-image; - } - } - - - // Radio wrap - .k-radio-wrap { - flex: none; - display: inline-flex; - flex-flow: row nowrap; - gap: 0; - align-items: center; - align-self: start; - vertical-align: middle; - position: relative; - - &::before { - content: "\200b"; - width: 0px; - overflow: hidden; - flex: none; - display: inline-block; - vertical-align: top; - } - } - - - // Radio label - .k-radio-label { - margin: 0; - padding: 0; - display: inline-flex; - align-items: flex-start; - gap: $kendo-radio-label-margin-x; - vertical-align: middle; - position: relative; - cursor: pointer; - - .k-ripple { - // Hide ripple temporarily - visibility: hidden !important; // stylelint-disable-line declaration-no-important - } - } - .k-radio + .k-label, - .k-radio-wrap + .k-label, - .k-radio + .k-radio-label, - .k-radio-wrap + .k-radio-label { - display: inline; - margin-inline-start: $kendo-radio-label-margin-x; - } - - - // Empty label - .k-radio-label:empty { - display: none !important; // stylelint-disable-line declaration-no-important - } - .k-radio-label.k-no-text { - min-width: 1px; - } - - - // Radio list - .k-radio-list { - margin: 0; - padding: 0; - display: flex; - flex-flow: column nowrap; - gap: 0; - list-style: none; - } - .k-radio-item, - .k-radio-list-item { - padding-block: $kendo-radio-list-item-padding-y; - padding-inline: $kendo-radio-list-item-padding-x; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - gap: k-spacing(1); - - .k-radio-label { - margin: 0; - } - } - .k-radio-list-horizontal, - .k-radio-list.k-list-horizontal { - display: flex; - flex-flow: row wrap; - gap: $kendo-radio-list-spacing; - } - - - // Ripple - .k-ripple-container { - .k-radio::after { - content: ""; - display: block; - position: absolute; - left: 50%; - top: 50%; - border-radius: 100%; - z-index: -1; - transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1); - transform: translate(-50%, -50%) scale(0); - transform-origin: center center; - } - - .k-radio:focus, - .k-radio.k-focus { - box-shadow: none !important; // stylelint-disable-line declaration-no-important - } - - .k-radio:disabled::after, - .k-radio.k-disabled::after { - display: none; - } - - .k-radio:disabled::after, - .k-radio.k-disabled::after { - display: none; - } - } - - - // Radio size - @each $size, $size-props in $kendo-radio-sizes { - $_size: map.get( $size-props, size ); - $_glyph-size: map.get( $size-props, glyph-size ); - $_ripple-size: map.get( $size-props, ripple-size ); - - .k-radio-#{$size} { - width: $_size; - height: $_size; - - &::before { - font-size: $_glyph-size; - } - } - .k-ripple-container { - .k-radio-#{$size}::after { - width: $_ripple-size; - height: $_ripple-size; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/radio/_layout.scss" as *; @mixin kendo-radio--layout() { diff --git a/packages/default/scss/radio/_theme.scss b/packages/default/scss/radio/_theme.scss index 5262136c8e8..51dc71b5c0d 100644 --- a/packages/default/scss/radio/_theme.scss +++ b/packages/default/scss/radio/_theme.scss @@ -1,94 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-radio--theme-base() { - - // Radio - .k-radio { - @include fill( - $kendo-radio-text, - $kendo-radio-bg, - $kendo-radio-border - ); - } - - - // Hover state - .k-radio:hover, - .k-radio.k-hover { - @include fill( - $kendo-radio-hover-text, - $kendo-radio-hover-bg, - $kendo-radio-hover-border - ); - } - - - // Focus state - .k-radio:focus, - .k-radio.k-focus { - @include fill( $border: $kendo-radio-focus-border ); - @include focus-indicator( $kendo-radio-focus-shadow ); - } - - - // Invalid state - .k-radio.k-invalid, - .k-radio.ng-invalid.ng-touched, - .k-radio.ng-invalid.ng-dirty { - @include fill( $border: $kendo-radio-invalid-border ); - } - .k-radio.k-invalid + .k-radio-label, - .k-radio.ng-invalid.ng-touched + .k-radio-label, - .k-radio.ng-invalid.ng-dirty + .k-radio-label { - @include fill( $color: $kendo-radio-invalid-text ); - } - - - // Checked - .k-radio:checked, - .k-radio.k-checked { - @include fill( - $kendo-radio-checked-text, - $kendo-radio-checked-bg, - $kendo-radio-checked-border - ); - } - .k-radio:checked:focus, - .k-radio.k-checked.k-focus { - @include fill( $border: $kendo-radio-focus-checked-border ); - @include focus-indicator( $kendo-radio-focus-checked-shadow ); - } - - - // Disabled - .k-radio:disabled, - .k-radio.k-disabled { - @include fill( - $kendo-radio-disabled-text, - $kendo-radio-disabled-bg, - $kendo-radio-disabled-border - ); - } - .k-radio:checked:disabled, - .k-radio.k-checked.k-disabled { - @include fill( - $kendo-radio-disabled-checked-text, - $kendo-radio-disabled-checked-bg, - $kendo-radio-disabled-checked-border - ); - } - - - // Ripple - .k-ripple-container { - .k-radio::after { - background: $kendo-radio-ripple-bg; - opacity: $kendo-radio-ripple-opacity; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *; @mixin kendo-radio--theme() { diff --git a/packages/default/scss/radio/_variables.scss b/packages/default/scss/radio/_variables.scss index 11085722563..1cd2ea58bc3 100644 --- a/packages/default/scss/radio/_variables.scss +++ b/packages/default/scss/radio/_variables.scss @@ -187,3 +187,51 @@ $kendo-radio-ripple-bg: $kendo-radio-checked-bg !default; /// The opacity of the RadioButton ripple. /// @group radio $kendo-radio-ripple-opacity: .25 !default; + +@forward "@progress/kendo-theme-core/scss/components/radio/_variables.scss" with ( + $kendo-radio-radius: $kendo-radio-radius, + $kendo-radio-border-width: $kendo-radio-border-width, + $kendo-radio-sm-size: $kendo-radio-sm-size, + $kendo-radio-md-size: $kendo-radio-md-size, + $kendo-radio-lg-size: $kendo-radio-lg-size, + $kendo-radio-sm-glyph-size: $kendo-radio-sm-glyph-size, + $kendo-radio-md-glyph-size: $kendo-radio-md-glyph-size, + $kendo-radio-lg-glyph-size: $kendo-radio-lg-glyph-size, + $kendo-radio-sm-ripple-size: $kendo-radio-sm-ripple-size, + $kendo-radio-md-ripple-size: $kendo-radio-md-ripple-size, + $kendo-radio-lg-ripple-size: $kendo-radio-lg-ripple-size, + $kendo-radio-sizes: $kendo-radio-sizes, + $kendo-radio-bg: $kendo-radio-bg, + $kendo-radio-text: $kendo-radio-text, + $kendo-radio-border: $kendo-radio-border, + $kendo-radio-hover-bg: $kendo-radio-hover-bg, + $kendo-radio-hover-text: $kendo-radio-hover-text, + $kendo-radio-hover-border: $kendo-radio-hover-border, + $kendo-radio-checked-bg: $kendo-radio-checked-bg, + $kendo-radio-checked-text: $kendo-radio-checked-text, + $kendo-radio-checked-border: $kendo-radio-checked-border, + $kendo-radio-focus-border: $kendo-radio-focus-border, + $kendo-radio-focus-shadow: $kendo-radio-focus-shadow, + $kendo-radio-focus-checked-border: $kendo-radio-focus-checked-border, + $kendo-radio-focus-checked-shadow: $kendo-radio-focus-checked-shadow, + $kendo-radio-disabled-bg: $kendo-radio-disabled-bg, + $kendo-radio-disabled-text: $kendo-radio-disabled-text, + $kendo-radio-disabled-border: $kendo-radio-disabled-border, + $kendo-radio-disabled-checked-bg: $kendo-radio-disabled-checked-bg, + $kendo-radio-disabled-checked-text: $kendo-radio-disabled-checked-text, + $kendo-radio-disabled-checked-border: $kendo-radio-disabled-checked-border, + $kendo-radio-invalid-bg: $kendo-radio-invalid-bg, + $kendo-radio-invalid-text: $kendo-radio-invalid-text, + $kendo-radio-invalid-border: $kendo-radio-invalid-border, + $kendo-radio-indicator-type: $kendo-radio-indicator-type, + $kendo-radio-glyph-font-family: $kendo-radio-glyph-font-family, + $kendo-radio-checked-glyph: $kendo-radio-checked-glyph, + $kendo-radio-checked-image: $kendo-radio-checked-image, + $kendo-radio-disabled-checked-image: $kendo-radio-disabled-checked-image, + $kendo-radio-label-margin-x: $kendo-radio-label-margin-x, + $kendo-radio-list-spacing: $kendo-radio-list-spacing, + $kendo-radio-list-item-padding-x: $kendo-radio-list-item-padding-x, + $kendo-radio-list-item-padding-y: $kendo-radio-list-item-padding-y, + $kendo-radio-ripple-bg: $kendo-radio-ripple-bg, + $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity +); diff --git a/packages/default/scss/rating/_layout.scss b/packages/default/scss/rating/_layout.scss index 77c2e6ccbc8..18e97c4b0c6 100644 --- a/packages/default/scss/rating/_layout.scss +++ b/packages/default/scss/rating/_layout.scss @@ -1,96 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-rating--layout-base() { - - .k-rating { - margin: 0; - padding: 0; - border-width: 0; - box-sizing: border-box; - outline: 0; - background: none; - font-family: $kendo-rating-font-family; - font-size: $kendo-rating-font-size; - line-height: $kendo-rating-line-height; - display: inline-flex; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - &.k-readonly { - pointer-events: none; - } - } - - .k-rating-container { - flex: 0 1 auto; - position: relative; - margin-block: 0; - margin-inline: $kendo-rating-container-margin-x; - - .k-rating-item { - display: inline-flex; - position: relative; - padding-block: $kendo-rating-item-padding-y; - padding-inline: $kendo-rating-item-padding-x; - align-items: center; - vertical-align: middle; - margin: 0; - outline: 0; - overflow: hidden; - transition: color 200ms ease-out 0s; - - * { - pointer-events: none; - } - - .k-rating-precision-part, - .k-rating-precision-complement { - display: inherit; - position: absolute; - top: $kendo-rating-item-padding-y; - left: $kendo-rating-item-padding-x; - overflow: hidden; - } - - .k-rating-precision-complement { - direction: rtl; - } - - svg { - fill: currentColor; - } - } - } - - .k-rating-label { - display: inline-flex; - align-items: center; - vertical-align: middle; - line-height: $kendo-rating-label-line-height; - margin-block: $kendo-rating-label-margin-y; - margin-inline: $kendo-rating-label-margin-x; - } - - .k-rtl, - [dir="rtl"] { - .k-rating-precision-part { - left: auto; - right: $kendo-rating-item-padding-x; - } - - .k-rating-item .k-rating-precision-complement { - direction: ltr; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/rating/_layout.scss" as *; @mixin kendo-rating--layout() { diff --git a/packages/default/scss/rating/_theme.scss b/packages/default/scss/rating/_theme.scss index b7dc9921bbc..46c2802a6f5 100644 --- a/packages/default/scss/rating/_theme.scss +++ b/packages/default/scss/rating/_theme.scss @@ -1,46 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-rating--theme-base() { - - .k-rating { - color: $kendo-component-text; - - &:focus, - &.k-focus { - - .k-rating-item { - > .k-icon { - filter: drop-shadow( $kendo-rating-icon-focus-shadow ); - } - - &.k-selected > .k-icon { - filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow ); - } - } - } - } - - .k-rating-item { - color: $kendo-rating-icon-text; - - &.k-selected { - color: $kendo-rating-icon-selected-text; - - &:focus, - &.k-focus { - color: $kendo-rating-icon-focus-text; - } - } - - &:hover, - &.k-hover { - color: $kendo-rating-icon-hover-text; - cursor: pointer; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/rating/_theme.scss" as *; @mixin kendo-rating--theme() { diff --git a/packages/default/scss/rating/_variables.scss b/packages/default/scss/rating/_variables.scss index 8ce7ced2913..3af0aef01b8 100644 --- a/packages/default/scss/rating/_variables.scss +++ b/packages/default/scss/rating/_variables.scss @@ -58,3 +58,22 @@ $kendo-rating-icon-focus-shadow: k-elevation(1) !default; /// The shadow of the focused and selected Rating icon. /// @group rating $kendo-rating-icon-focus-selected-shadow: k-elevation(1) !default; + +@forward "@progress/kendo-theme-core/scss/components/rating/_variables.scss" with ( + $kendo-rating-font-family: $kendo-rating-font-family, + $kendo-rating-font-size: $kendo-rating-font-size, + $kendo-rating-line-height: $kendo-rating-line-height, + $kendo-rating-container-margin-x: $kendo-rating-container-margin-x, + $kendo-rating-item-padding-x: $kendo-rating-item-padding-x, + $kendo-rating-item-padding-y: $kendo-rating-item-padding-y, + $kendo-rating-label-margin-x: $kendo-rating-label-margin-x, + $kendo-rating-label-margin-y: $kendo-rating-label-margin-y, + $kendo-rating-label-line-height: $kendo-rating-label-line-height, + $kendo-rating-icon-size: $kendo-rating-icon-size, + $kendo-rating-icon-text: $kendo-rating-icon-text, + $kendo-rating-icon-selected-text: $kendo-rating-icon-selected-text, + $kendo-rating-icon-hover-text: $kendo-rating-icon-hover-text, + $kendo-rating-icon-focus-text: $kendo-rating-icon-focus-text, + $kendo-rating-icon-focus-shadow: $kendo-rating-icon-focus-shadow, + $kendo-rating-icon-focus-selected-shadow: $kendo-rating-icon-focus-selected-shadow +); diff --git a/packages/default/scss/responsivepanel/_layout.scss b/packages/default/scss/responsivepanel/_layout.scss index e828d0bd9f7..f3feaa8a76f 100644 --- a/packages/default/scss/responsivepanel/_layout.scss +++ b/packages/default/scss/responsivepanel/_layout.scss @@ -1,50 +1,4 @@ -@mixin kendo-responsive-panel--layout-base() { - - .k-rpanel {} - - // Variants - .k-rpanel-left, - .k-rpanel-right { - position: fixed; - display: block; - overflow: auto; - min-width: 320px; - height: 100%; - top: 0; - - & + * { - overflow: auto; - } - - &.k-rpanel-expanded { - transform: translateX(0) translateZ(0); - } - } - .k-rpanel-left { - transform: translateX(-100%) translateZ(0); - left: 0; - } - .k-rpanel-right { - transform: translateX(100%) translateZ(0); - right: 0; - } - - // Top - .k-rpanel-top { - position: static; - max-height: 0; - } - .k-rpanel-top.k-rpanel-expanded { - max-height: 568px; - overflow: visible !important; // stylelint-disable-line declaration-no-important - } - - // Toggle button - .k-rpanel-toggle { - touch-action: manipulation; - } - -} +@use "@progress/kendo-theme-core/scss/components/responsivepanel/_layout.scss" as *; @mixin kendo-responsive-panel--layout() { diff --git a/packages/default/scss/responsivepanel/_theme.scss b/packages/default/scss/responsivepanel/_theme.scss index f329ecfbe0f..730b6e1689a 100644 --- a/packages/default/scss/responsivepanel/_theme.scss +++ b/packages/default/scss/responsivepanel/_theme.scss @@ -1,8 +1,4 @@ -@mixin kendo-responsive-panel--theme-base() { - - .k-rpanel {} - -} +@use "@progress/kendo-theme-core/scss/components/responsivepanel/_theme.scss" as *; @mixin kendo-responsive-panel--theme() { diff --git a/packages/default/scss/ripple/_layout.scss b/packages/default/scss/ripple/_layout.scss index d6420a0c253..1d3c0c0ffe4 100644 --- a/packages/default/scss/ripple/_layout.scss +++ b/packages/default/scss/ripple/_layout.scss @@ -1,54 +1,4 @@ -@mixin kendo-ripple--layout-base() { - - .k-ripple-target { - position: relative; - } - - .k-ripple { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - overflow: hidden; - pointer-events: none; - } - - .k-ripple-blob { - pointer-events: none; - position: absolute; - border-radius: 50%; - padding: 0; - transform: translate(-50%, -50%) scale(0); - transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1); - opacity: .1; - background-color: currentColor; - } - - .k-primary .k-ripple-blob { - opacity: .2; - } - - .k-ripple-focus::after { - visibility: visible; - animation: ripple 600ms ease-out; - } - - @keyframes ripple { - 0% { - transform: translate(-50%, -50%) scale(0); - } - 20% { - transform: translate(-50%, -50%) scale(1); - } - 100% { - opacity: 0; - transform: translate(-50%, -50%) scale(1); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/ripple/_layout.scss" as *; @mixin kendo-ripple--layout() { diff --git a/packages/default/scss/ripple/_theme.scss b/packages/default/scss/ripple/_theme.scss index 1cb200986d5..c278b1af59d 100644 --- a/packages/default/scss/ripple/_theme.scss +++ b/packages/default/scss/ripple/_theme.scss @@ -1,8 +1,4 @@ -@mixin kendo-ripple--theme-base() { - - .k-ripple {} - -} +@use "@progress/kendo-theme-core/scss/components/ripple/_theme.scss" as *; @mixin kendo-ripple--theme() { diff --git a/packages/default/scss/scheduler/_layout.scss b/packages/default/scss/scheduler/_layout.scss index 7fccf586581..1ac9988091c 100644 --- a/packages/default/scss/scheduler/_layout.scss +++ b/packages/default/scss/scheduler/_layout.scss @@ -1,1043 +1,4 @@ -@use "sass:list"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../toolbar/_variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-scheduler--layout-base() { - - // Layout - .k-scheduler { - border-width: $kendo-scheduler-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-scheduler-font-family; - font-size: $kendo-scheduler-font-size; - line-height: $kendo-scheduler-line-height; - display: flex; - flex-direction: column; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - table, - thead, - tfoot, - tbody, - tr, - th, - td, - div, - .k-scheduler-edit-dialog, - > * { - border-color: inherit; - } - } - - kendo-scheduler.k-scheduler { - overflow: hidden; - - &.k-readonly-scheduler .k-event-delete { - display: none; - } - } - - // Common - .k-scheduler-table { - width: 100%; - max-width: none; - border-collapse: separate; - border-spacing: 0; - table-layout: fixed; - - td, - th { - padding-block: $kendo-scheduler-cell-padding-y; - padding-inline: $kendo-scheduler-cell-padding-x; - height: $kendo-scheduler-cell-height; - overflow: hidden; - white-space: nowrap; - border-style: solid; - border-width: 0 0 1px 1px; - vertical-align: top; - box-sizing: content-box; - } - td:first-child, - th:first-child { - border-left-width: 0; - } - .k-middle-row td { - border-bottom-style: dotted; - } - - .k-link { - cursor: pointer; - } - } - - .k-scheduler-layout-flex { - overflow: auto; - - .k-scheduler-head { - position: sticky; - top: 0; - z-index: 3; - } - .k-scheduler-body { - position: relative; - } - - .k-scheduler-head, - .k-scheduler-body { - display: flex; - flex: 100%; - flex-wrap: wrap; - } - - .k-scheduler-row { - display: flex; - flex: 1 1 100%; - width: 100%; - min-width: 0; - } - - .k-scheduler-group { - display: flex; - flex: 1 1 100%; - width: 100%; - min-width: 0; - flex-wrap: wrap; - - .k-group-cell { - display: flex; - flex: 1 1 auto; - flex-wrap: wrap; - overflow: auto; - } - - .k-group-content { - padding: 0; - display: flex; - flex: 1 1 100%; - width: 100%; - border-width: 0; - flex-wrap: wrap; - } - - &.k-group-horizontal { - .k-group-cell { - flex-basis: 100%; - border-width: 0; - padding: 0; - } - } - } - - &.k-scheduler-timeline-view .k-scheduler-body .k-scheduler-cell { - flex-basis: auto; - } - - - .k-more-events { - bottom: 2px; - left: 0; - width: 100%; - } - - .k-scheduler-cell { - display: flex; - flex: 1 1 100%; - padding-block: $kendo-scheduler-cell-padding-y; - padding-inline: $kendo-scheduler-cell-padding-y; - min-height: 1.5em; - overflow: hidden; - white-space: nowrap; - border-style: solid; - border-width: 0 1px 1px 0; - vertical-align: top; - box-sizing: content-box; - - &.k-slot-cell { - position: relative; - } - - &.k-heading-cell { - justify-content: center; - font-weight: bold; - } - - &.k-side-cell { - justify-content: flex-end; - flex-grow: 0; - flex-basis: auto; - overflow: visible; - } - - &.k-major-cell { - border-bottom-width: 0; - } - } - - .k-middle-row .k-scheduler-cell { - border-bottom-style: dotted; - } - - .k-resource-cell { - flex: none; - display: flex; - flex-wrap: wrap; - overflow: visible; - } - - .k-resource-content { - display: flex; - flex-wrap: wrap; - padding: 0; - border-width: 0; - } - - .k-sticky-cell { - display: flex; - flex-wrap: wrap; - flex-basis: 0; - position: sticky; - left: 0; - z-index: 3; - } - } - - - // Header and footer - .k-scheduler-toolbar { - border-width: 0; - border-bottom-width: $kendo-toolbar-border-width; - white-space: nowrap; - flex-shrink: 0; - position: relative; - z-index: 2; - - .k-widget { - font-size: inherit; - } - - // Current date - .k-nav-current { - color: inherit; - outline: 0; - text-decoration: none; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - gap: $kendo-icon-spacing; - cursor: pointer; - } - - - // Scheduler search - .k-scheduler-search { - display: inline-flex; - flex-flow: row nowrap; - } - } - - - // Scheduler navigation - .k-scheduler-navigation {} - - .k-scheduler-toolbar .k-views-dropdown { - width: auto; - font: inherit; - } - - // Scheduler footer - .k-scheduler-footer { - @include box-shadow( none ); - border-width: 0; - border-top-width: $kendo-toolbar-border-width; - white-space: nowrap; - flex-shrink: 0; - position: relative; - } - - - // Layout - .k-scheduler-layout { - width: 100%; - border-collapse: separate; - border-spacing: 0; - flex: 1 1 auto; - position: relative; - z-index: 1; - - > tbody > tr > td { - padding: 0; - vertical-align: top; - } - - td.k-selected, - .k-scheduler-cell.k-selected { - outline: none; - } - - // Remove bottom border from first cell of hours cells spaning on two rows - tr + tr, - .k-scheduler-pane + .k-scheduler-pane { - .k-scheduler-times tr { - th { - border-bottom-color: transparent; - } - - .k-slot-cell, - .k-scheduler-times-all-day, - &:last-child th { - border-bottom-color: inherit; - } - } - } - } - .k-scheduler-layout.k-scheduler-flex-layout { - display: flex; - flex-direction: column; - - &.k-scheduler-weekview, - &.k-scheduler-dayview { - .k-scheduler-pane:first-child .k-scheduler-table { - table-layout: fixed; - } - } - } - - - // Scheduler view header - .k-scheduler-header, - .k-scheduler-view-header { - padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}); - } - .k-scheduler-header th { - text-align: center; - } - - .k-scheduler-header, - .k-scheduler-header-wrap, - .k-scheduler-header-wrap > div { - border-color: inherit; - overflow: hidden; - } - .k-scheduler-header-wrap { - border-width: 0; - border-style: solid; - position: relative; - } - .k-scheduler-times { - border-color: inherit; - position: relative; - overflow: hidden; - - .k-scheduler-table { table-layout: auto; } - - th { - border-width: 0 1px 1px 0; - text-align: end; - } - - .k-slot-cell, - .k-scheduler-times-all-day { - border-bottom-color: inherit; - } - - .k-slot-cell.k-last-resource { - border-right: 0; - } - .k-slot-cell.k-empty-slot { - padding-left: 0; - padding-right: 0; - } - } - - .k-scheduler-datecolumn { - width: $kendo-scheduler-datecolumn-width; - } - .k-scheduler-timecolumn { - width: $kendo-scheduler-timecolumn-width; - white-space: nowrap; - } - - - // Scheduler content - .k-scheduler-content { - border-color: inherit; - position: relative; - overflow: auto; - - &:focus { - outline: none; - } - } - - - // Appointments - kendo-scheduler .k-event, - .k-event { - @include border-radius( k-border-radius(md) ); - min-height: $kendo-scheduler-event-min-height; - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-radius: $kendo-scheduler-event-border-radius; - text-align: start; - outline: 0; - cursor: default; - position: absolute; - overflow: hidden; - padding-inline-end: $kendo-scheduler-appointments-padding; - - > div { - position: relative; - z-index: 2; - } - - // Template - .k-event-template { - line-height: $kendo-scheduler-event-line-height; - padding-block: $kendo-scheduler-event-template-padding-y; - padding-inline: $kendo-scheduler-event-template-padding-x; - // TODO: incompatible units - // padding-right: k-spacing(1) + k-spacing(4); - } - .k-event-time { - padding-bottom: 0; - font-size: .875em; - white-space: nowrap; - display: none; - } - - - // Actions - .k-event-actions { - white-space: nowrap; - position: absolute; - top: 0; - bottom: 0; - right: $kendo-scheduler-event-actions-inset-x; - z-index: 2; - - .k-event-delete { - opacity: .5; - visibility: hidden; - } - - &:hover, - &.k-hover { - .k-event-delete { - opacity: 1; - } - } - - a { color: inherit; } - } - - - // Indicators - .k-event-actions:first-child { - margin: $kendo-scheduler-indicators-margin; - top: 0; - right: 0; - float: left; - position: relative; - opacity: 1; - visibility: visible; - line-height: normal; - } - - - // Resize handles - .k-resize-handle { - z-index: 4; - opacity: .5; - visibility: hidden; - } - .k-resize-handle::before { border-color: currentColor; } - .k-resize-n { - height: .5em; - top: 0; - } - .k-resize-s { - height: .5em; - bottom: 0; - } - .k-resize-n::before, - .k-resize-s::before { - width: k-spacing(8); - border-bottom-width: 1px; - } - .k-resize-w { - width: .5em; - left: 0; - } - .k-resize-e { - width: .5em; - right: 0; - } - .k-resize-w::before, - .k-resize-e::before { - height: k-spacing(8); - border-left-width: 1px; - } - - - // Hover - &:hover, - &.k-hover { - .k-event-actions .k-event-delete, - .k-resize-handle { - visibility: visible; - } - } - - &.k-event-drag-hint .k-event-time { - display: block; - } - - .k-event-top-actions, - .k-event-bottom-actions { - position: absolute; - top: 0; - left: 0; - width: 100%; - text-align: center; - } - - .k-event-bottom-actions { - top: auto; - bottom: 0; - } - } - - - // Tasks - .k-scheduler-mark { - width: 1em; - height: 1em; - display: inline-block; - vertical-align: middle; - } - - - // More events indicator - .k-more-events { - padding: 0; - height: 13px; - border-style: solid; - border-width: 1px; - overflow: hidden; - position: absolute; - justify-content: center; - - > .k-icon { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - - // Draging hint - .k-event-drag-hint { - opacity: .5; - z-index: 3; - - .k-event-actions, - .k-event-top-actions, - .k-event-bottom-actions, - .k-resize-handle { - display: none; - } - - .k-event-time { - display: block; - } - } - - - // Resizing - .k-scheduler-marquee { - border-width: 0; - border-style: solid; - - // label - .k-label-top, - .k-label-bottom { - font-size: .75em; - position: absolute; - } - .k-label-top { - left: $kendo-scheduler-marquee-label-inset-x; - top: $kendo-scheduler-marquee-label-inset-y; - } - .k-label-bottom { - right: $kendo-scheduler-marquee-label-inset-x; - bottom: $kendo-scheduler-marquee-label-inset-y; - } - - // Angle tingie - &.k-first::before, - &.k-last::after { - content: ""; - border-width: 3px; - border-style: solid; - position: absolute; - width: 0; - height: 0; - } - &.k-first::before { - top: 0; - left: 0; - border-right-color: transparent; - border-bottom-color: transparent; - } - &.k-last::after { - bottom: 0; - right: 0; - border-left-color: transparent; - border-top-color: transparent; - } - } - - // remove scrollbars during PDF export - // stylelint-disable declaration-no-important - .k-pdf-export-shadow .k-scheduler, - .k-scheduler-pdf-export .k-scheduler-content, - .k-scheduler-pdf-export .k-scheduler-times { - height: auto !important; - overflow: visible !important; - } - - .k-scheduler-pdf-export { - overflow: hidden; - - .k-scheduler-header { - padding: 0 !important; - } - - .k-scheduler-header-wrap { - border-width: 0 !important; - } - - .k-scheduler-header .k-scheduler-table, - .k-scheduler-content .k-scheduler-table { - width: 100% !important; - } - } - // stylelint-enable declaration-no-important - - - // TODO: add this class to jQuery rendering - // after refactoring jQuery scheduler layout to be flex - .k-recurrence-editor { - display: flex; - flex-direction: column; - } - kendo-scheduler .k-recurrence-editor { - display: block; - } - - - // Day view - .k-scheduler-dayview {} - - - // Workweek view - .k-scheduler-workWeekview {} // stylelint-disable-line - - - // Week view - .k-scheduler-weekview {} - - - // Month view - .k-scheduler-monthview { - - .k-scheduler-table { - height: 100%; - } - .k-scheduler-table td { - height: 80px; - text-align: end; - } - .k-scheduler-body .k-scheduler-cell { - min-height: 80px; - } - - // hidden cells must have no layout - .k-hidden { - padding-left: 0 !important; // stylelint-disable-line declaration-no-important - padding-right: 0 !important; // stylelint-disable-line declaration-no-important - border-right-width: 0 !important; // stylelint-disable-line declaration-no-important - } - - .k-scheduler-table-auto, - .k-scheduler-table-auto td, - .k-scheduler-content .k-scheduler-table-auto { - height: auto; - } - - // Force vertical scroll in monthview for jquery - .k-scheduler-content { - overflow-y: scroll; - } - &.k-scheduler-flex-layout .k-scheduler-content { - overflow-y: auto; - } - } - - - // Agenda view - .k-scheduler-agendaview { - - .k-scheduler-mark { - margin-right: .5em; - width: 1em; - height: 1em; - display: inline-block; - vertical-align: middle; - } - - .k-scheduler-table { - th:first-child, - td:first-child { - border-left-width: 1px; - } - - td.k-first { - border-left-width: 0; - } - } - - .k-task > .k-event-delete { - color: inherit; - position: absolute; - top: $kendo-scheduler-marquee-label-inset-y; - right: $kendo-scheduler-marquee-label-inset-y; - opacity: .5; - visibility: hidden; - } - .k-hover .k-task > .k-event-delete, - .k-scheduler-content tr:hover .k-event-delete, - .k-scheduler-content .k-scheduler-row:hover .k-event-delete, - .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete { - visibility: visible; - } - } - .k-scheduler-agendaday { - margin: 0 .2em 0 0; - font-size: 3em; - line-height: 1; - font-weight: 400; - float: left; - } - .k-scheduler-agendaweek { - display: block; - margin: .4em 0 0; - line-height: 1; - font-style: normal; - } - .k-scheduler-agendadate { - font-size: .75em; - } - - - // Timeline view - .k-scheduler-timelineview { - .k-slot-cell { - overflow: hidden; - } - .k-scheduler-content { - overflow: auto; - } - } - - .k-scheduler-pane { - display: flex; - flex-direction: row; - } - .k-scheduler-pane .k-scheduler-times { - flex: 0 0 auto; - } - .k-scheduler-pane .k-scheduler-times .k-scheduler-table { - height: 100%; - } - .k-scheduler-pane .k-scheduler-header, - .k-scheduler-pane .k-scheduler-content { - flex: 1 1 auto; - } - - - // Year view - .k-scheduler-yearview { - .k-scheduler-body { - padding-block: $kendo-scheduler-yearview-padding-y; - padding-inline: $kendo-scheduler-yearview-padding-x; - justify-content: center; - } - - .k-calendar { - width: 100%; - border-width: 0; - - .k-calendar-view { - flex-wrap: wrap; - justify-content: center; - gap: $kendo-scheduler-yearview-calendar-gap; - } - - .k-content { - flex: 0; - } - - .k-link { - position: relative; - } - - td.k-selected { - background-color: inherit; - } - } - - .k-day-indicator { - margin-top: $kendo-scheduler-yearview-indicator-calc-offset-top; - width: $kendo-scheduler-yearview-indicator-size; - height: $kendo-scheduler-yearview-indicator-size; - border-radius: $kendo-scheduler-yearview-indicator-border-radius; - position: absolute; - left: $kendo-scheduler-yearview-indicator-calc-offset-left; - } - } - - - - // Scheduler tooltip - .k-scheduler-tooltip { - padding-block: $kendo-scheduler-tooltip-padding-y; - padding-inline: $kendo-scheduler-tooltip-padding-x; - border-width: $kendo-scheduler-tooltip-border-width; - color: inherit; - - .k-tooltip-title { - margin-bottom: $kendo-scheduler-tooltip-title-margin-y; - - .k-month { - font-size: $kendo-scheduler-tooltip-month-font-size; - text-transform: uppercase; - } - - .k-day { - font-size: $kendo-scheduler-tooltip-day-font-size; - } - } - - .k-tooltip-events-container { - overflow: auto; - } - - .k-tooltip-events { - max-height: $kendo-scheduler-tooltip-events-max-height; - display: flex; - flex-direction: column; - gap: $kendo-scheduler-tooltip-events-gap; - } - - .k-tooltip-event { - padding-block: $kendo-scheduler-tooltip-event-padding-y; - padding-inline: $kendo-scheduler-tooltip-event-padding-x; - border-radius: $kendo-scheduler-tooltip-event-border-radius; - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - flex-shrink: 0; - position: relative; - gap: $kendo-scheduler-tooltip-event-gap; - } - .k-tooltip-event .k-event-time { - display: flex; - flex-shrink: 0; - font-size: inherit; - } - - .k-no-data { - height: auto; - min-height: auto; - color: inherit; - } - } - - - - // Scheduler edit dialog - .k-scheduler-edit-dialog { - .k-dialog { - max-height: 100vh; - } - } - - .k-scheduler-edit-form { - - .k-edit-form-container { width: 100%; } - .k-edit-label { width: 17%; } - .k-edit-field { width: 77%; } - - .k-edit-field > ul > li { - display: flex; - flex-flow: row nowrap; - align-items: center; - } - .k-recurrence-editor { - .k-radio-list .k-radio-wrap, - .k-checkbox-list .k-checkbox-wrap { - align-self: center; - } - } - - .k-recur-interval, - .k-recur-count, - .k-recur-monthday { - width: 5em; - } - .k-recur-until, - .k-recur-month, - .k-recur-weekday, - .k-recur-weekday-offset { - width: 10em; - } - - .k-scheduler-datetime-picker { - display: flex; - flex-flow: row nowrap; - gap: k-spacing(2); - } - - } - - - - // Scheduler rtl - .k-rtl { - .k-scheduler-header th, - .k-scheduler-table td { - border-width: 0 1px 1px 0; - } - - .k-scheduler-table { - td, - th { - &:first-child { - border-right-width: 0; - } - } - } - - .k-scheduler-times th { - border-width: 0 0 1px 1px; - } - - .k-scheduler .k-scrollbar-v .k-scheduler-header-wrap { - border-right-width: 0; - border-left-width: 1px; - } - - .k-event { - padding-right: 0; - padding-left: $kendo-scheduler-tooltip-event-padding-x; - - .k-resize-w { - left: auto; - right: 0; - } - - .k-resize-e { - right: auto; - left: 0; - } - - .k-event-actions { - right: auto; - left: 2px; - } - - .k-event-actions:first-child { - margin: $kendo-scheduler-rtl-indicators-margin; - float: right; - } - } - .k-scheduler-agendaview .k-task { - - > .k-event-delete { - left: 2px; - right: auto; - } - - .k-scheduler-mark { - margin-left: .5em; - margin-right: 0; - } - - } - - .k-scheduler-marquee .k-label-top { - left: auto; - right: 4px; - } - - .k-scheduler-marquee .k-label-bottom { - left: 4px; - right: auto; - } - - .k-scheduler-edit-form .k-scheduler-delete { - float: right; - } - - .k-scheduler, - &.k-scheduler { - - .k-scheduler-header-wrap { - border-right-width: 0; - } - - .k-scheduler-agendaday { - float: right; - margin: 0 0 0 .2em; - } - - .k-scheduler-agendaview .k-scheduler-table { - td:first-child, - th:first-child { - border-left-width: 0; - } - - tr + tr { - td:first-child, - th:first-child { - border-right-width: 1px; - } - } - } - } - } - - .k-safari { - .k-scheduler-tooltip .k-tooltip-event:not(:last-child) { - margin-bottom: $kendo-scheduler-tooltip-event-gap; - } - - .k-scheduler-yearview .k-calendar-view .k-month { - margin-block: 0; - margin-inline: list.slash( $kendo-scheduler-yearview-calendar-gap, 2 ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/scheduler/_layout.scss" as *; @mixin kendo-scheduler--layout() { diff --git a/packages/default/scss/scheduler/_theme.scss b/packages/default/scss/scheduler/_theme.scss index 9972b603b30..f0a0408dde6 100644 --- a/packages/default/scss/scheduler/_theme.scss +++ b/packages/default/scss/scheduler/_theme.scss @@ -1,239 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-scheduler--theme-base() { - - // Appearance - .k-scheduler { - @include fill( - $kendo-scheduler-text, - $kendo-scheduler-bg, - $kendo-scheduler-border - ); - } - - // Header and footer - .k-scheduler-toolbar { - @include fill( - $kendo-scheduler-toolbar-text, - $kendo-scheduler-toolbar-bg, - $kendo-scheduler-toolbar-border, - $kendo-scheduler-toolbar-gradient - ); - } - .k-scheduler-footer { - @include fill( - $kendo-scheduler-footer-text, - $kendo-scheduler-footer-bg, - $kendo-scheduler-footer-border, - $kendo-scheduler-footer-gradient - ); - } - - .k-scheduler-header { - background-color: $kendo-base-bg; - } - - .k-scheduler-header-wrap { - background-color: $kendo-scheduler-bg; - } - - - // Scheduler navigation - .k-scheduler-navigation {} - - - // View switcher - .k-scheduler-views {} - - - // Scheduler footer - .k-scheduler-footer {} - - - // Scheduler content - .k-scheduler-content {} - .k-scheduler-nonwork, - .k-scheduler .k-nonwork-hour { - @include fill( - $kendo-scheduler-nonwork-text, - $kendo-scheduler-nonwork-bg - ); - } - .k-scheduler-other-month, - .k-scheduler .k-other-month { - @include fill( - $kendo-scheduler-othermonth-text, - $kendo-scheduler-othermonth-bg - ); - } - - .k-scheduler-layout td.k-selected, - .k-scheduler-layout .k-scheduler-cell.k-selected { - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)); - } - - .k-scheduler-layout-flex { - .k-scheduler-head, - .k-sticky-cell { - background-color: $kendo-scheduler-bg; - } - } - - - // Events - .k-event { - @include fill( - $kendo-scheduler-event-text, - $kendo-scheduler-event-bg, - $kendo-scheduler-event-border, - $kendo-scheduler-event-gradient - ); - @include box-shadow( $kendo-scheduler-event-shadow ); - - &:hover, - &.k-hover { - @include fill( - $kendo-scheduler-event-hover-text, - $kendo-scheduler-event-hover-bg, - $kendo-scheduler-event-hover-border, - $kendo-scheduler-event-hover-gradient - ); - @include box-shadow( $kendo-scheduler-event-hover-shadow ); - } - - &.k-selected { - @include fill( - $kendo-scheduler-event-selected-text, - $kendo-scheduler-event-selected-bg, - $kendo-scheduler-event-selected-border, - $kendo-scheduler-event-selected-gradient - ); - @include box-shadow( $kendo-scheduler-event-selected-shadow ); - } - - &.k-event-inverse { - color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text )); - } - - &.k-event-ongoing { - @include box-shadow( $kendo-scheduler-event-ongoing-shadow ); - } - } - - - // Drag hint - .k-event-drag-hint {} - - - // Resizing - .k-scheduler-marquee {} - .k-scheduler-marquee::before, - .k-scheduler-marquee::after { - border-color: $kendo-color-primary; - } - - // Edit dialog - .k-scheduler-edit-dialog { - .k-dialog-actions { - border-color: $kendo-scheduler-border; - } - } - - - - // Day view - .k-scheduler-dayview {} - - - // Workweek view - .k-scheduler-workWeekview {} // stylelint-disable-line - - - // Week view - .k-scheduler-weekview {} - - - // Month view - .k-scheduler-monthview {} - - - // Agenda view - .k-scheduler-agendaview { - - // Hover - .k-scheduler-content tr:hover, - .k-scheduler-content tr.k-hover, - .k-scheduler-content .k-scheduler-row:hover, - .k-scheduler-content .k-scheduler-row.k-hover { - @include fill( - $kendo-hover-text, - $kendo-hover-bg, - $kendo-hover-border, - $kendo-hover-gradient - ); - } - - .k-scheduler-content tr:hover .k-scheduler-datecolumn, - .k-scheduler-content tr:hover .k-scheduler-groupcolumn, - .k-scheduler-content tr.k-hover .k-scheduler-datecolumn, - .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn { - @include fill( - $kendo-scheduler-text, - $kendo-scheduler-bg, - $kendo-scheduler-border - ); - } - - // Selected - .k-scheduler-content tr.k-selected { - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)); - } - .k-scheduler-content tr.k-selected .k-scheduler-datecolumn, - .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn { - background-color: $kendo-scheduler-bg; - } - } - - - // Timeline view - .k-scheduler-timelineview {} - - - // Year view - .k-scheduler-yearview { - - .k-day-indicator { - @include fill( $bg: $kendo-scheduler-yearview-indicator-bg ); - } - - .k-selected .k-day-indicator { - @include fill( $bg: $kendo-scheduler-yearview-indicator-selected-bg ); - } - } - - - - // Scheduler tooltip - .k-tooltip.k-scheduler-tooltip { - @include fill( - $kendo-scheduler-tooltip-text, - $kendo-scheduler-tooltip-bg, - $kendo-scheduler-tooltip-border - ); - @include box-shadow( $kendo-scheduler-tooltip-shadow ); - - .k-callout { - @include fill( $color: $kendo-scheduler-tooltip-callout-text ); - } - } - - - // Scheduler edit form - .k-scheduler-edit-form {} - -} +@use "@progress/kendo-theme-core/scss/components/scheduler/_theme.scss" as *; @mixin kendo-scheduler--theme() { diff --git a/packages/default/scss/scheduler/_variables.scss b/packages/default/scss/scheduler/_variables.scss index cda9914b14b..3ab46a20aae 100644 --- a/packages/default/scss/scheduler/_variables.scss +++ b/packages/default/scss/scheduler/_variables.scss @@ -268,3 +268,85 @@ $kendo-scheduler-marquee-label-inset-x: k-spacing(1) !default; /// The block inset of the Scheduler marquee labels. /// @group scheduler $kendo-scheduler-marquee-label-inset-y: k-spacing(0.5) !default; + +@forward "@progress/kendo-theme-core/scss/components/scheduler/_variables.scss" with ( + $kendo-scheduler-border-width: $kendo-scheduler-border-width, + $kendo-scheduler-font-family: $kendo-scheduler-font-family, + $kendo-scheduler-font-size: $kendo-scheduler-font-size, + $kendo-scheduler-line-height: $kendo-scheduler-line-height, + $kendo-scheduler-bg: $kendo-scheduler-bg, + $kendo-scheduler-text: $kendo-scheduler-text, + $kendo-scheduler-border: $kendo-scheduler-border, + $kendo-scheduler-toolbar-bg: $kendo-scheduler-toolbar-bg, + $kendo-scheduler-toolbar-text: $kendo-scheduler-toolbar-text, + $kendo-scheduler-toolbar-border: $kendo-scheduler-toolbar-border, + $kendo-scheduler-toolbar-gradient: $kendo-scheduler-toolbar-gradient, + $kendo-scheduler-footer-bg: $kendo-scheduler-footer-bg, + $kendo-scheduler-footer-text: $kendo-scheduler-footer-text, + $kendo-scheduler-footer-border: $kendo-scheduler-footer-border, + $kendo-scheduler-footer-gradient: $kendo-scheduler-footer-gradient, + $kendo-scheduler-event-min-height: $kendo-scheduler-event-min-height, + $kendo-scheduler-event-border-radius: $kendo-scheduler-event-border-radius, + $kendo-scheduler-event-line-height: $kendo-scheduler-event-line-height, + $kendo-scheduler-event-bg: $kendo-scheduler-event-bg, + $kendo-scheduler-event-text: $kendo-scheduler-event-text, + $kendo-scheduler-event-border: $kendo-scheduler-event-border, + $kendo-scheduler-event-gradient: $kendo-scheduler-event-gradient, + $kendo-scheduler-event-shadow: $kendo-scheduler-event-shadow, + $kendo-scheduler-event-hover-bg: $kendo-scheduler-event-hover-bg, + $kendo-scheduler-event-hover-text: $kendo-scheduler-event-hover-text, + $kendo-scheduler-event-hover-border: $kendo-scheduler-event-hover-border, + $kendo-scheduler-event-hover-gradient: $kendo-scheduler-event-hover-gradient, + $kendo-scheduler-event-hover-shadow: $kendo-scheduler-event-hover-shadow, + $kendo-scheduler-event-selected-bg: $kendo-scheduler-event-selected-bg, + $kendo-scheduler-event-selected-text: $kendo-scheduler-event-selected-text, + $kendo-scheduler-event-selected-border: $kendo-scheduler-event-selected-border, + $kendo-scheduler-event-selected-gradient: $kendo-scheduler-event-selected-gradient, + $kendo-scheduler-event-selected-shadow: $kendo-scheduler-event-selected-shadow, + $kendo-scheduler-event-ongoing-shadow: $kendo-scheduler-event-ongoing-shadow, + $kendo-scheduler-cell-padding-x: $kendo-scheduler-cell-padding-x, + $kendo-scheduler-cell-padding-y: $kendo-scheduler-cell-padding-y, + $kendo-scheduler-cell-height: $kendo-scheduler-cell-height, + $kendo-scheduler-datecolumn-width: $kendo-scheduler-datecolumn-width, + $kendo-scheduler-timecolumn-width: $kendo-scheduler-timecolumn-width, + $kendo-scheduler-nonwork-bg: $kendo-scheduler-nonwork-bg, + $kendo-scheduler-nonwork-text: $kendo-scheduler-nonwork-text, + $kendo-scheduler-weekend-bg: $kendo-scheduler-weekend-bg, + $kendo-scheduler-weekend-text: $kendo-scheduler-weekend-text, + $kendo-scheduler-othermonth-bg: $kendo-scheduler-othermonth-bg, + $kendo-scheduler-othermonth-text: $kendo-scheduler-othermonth-text, + $kendo-scheduler-yearview-padding-x: $kendo-scheduler-yearview-padding-x, + $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-y, + $kendo-scheduler-yearview-calendar-gap: $kendo-scheduler-yearview-calendar-gap, + $kendo-scheduler-yearview-indicator-size: $kendo-scheduler-yearview-indicator-size, + $kendo-scheduler-yearview-indicator-calc-offset-top: $kendo-scheduler-yearview-indicator-calc-offset-top, + $kendo-scheduler-yearview-indicator-calc-offset-left: $kendo-scheduler-yearview-indicator-calc-offset-left, + $kendo-scheduler-yearview-indicator-border-radius: $kendo-scheduler-yearview-indicator-border-radius, + $kendo-scheduler-yearview-indicator-bg: $kendo-scheduler-yearview-indicator-bg, + $kendo-scheduler-yearview-indicator-selected-bg: $kendo-scheduler-yearview-indicator-selected-bg, + $kendo-scheduler-tooltip-padding-x: $kendo-scheduler-tooltip-padding-x, + $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-y, + $kendo-scheduler-tooltip-border-width: $kendo-scheduler-tooltip-border-width, + $kendo-scheduler-tooltip-bg: $kendo-scheduler-tooltip-bg, + $kendo-scheduler-tooltip-text: $kendo-scheduler-tooltip-text, + $kendo-scheduler-tooltip-border: $kendo-scheduler-tooltip-border, + $kendo-scheduler-tooltip-shadow: $kendo-scheduler-tooltip-shadow, + $kendo-scheduler-tooltip-title-margin-y: $kendo-scheduler-tooltip-title-margin-y, + $kendo-scheduler-tooltip-month-font-size: $kendo-scheduler-tooltip-month-font-size, + $kendo-scheduler-tooltip-day-font-size: $kendo-scheduler-tooltip-day-font-size, + $kendo-scheduler-tooltip-events-max-height: $kendo-scheduler-tooltip-events-max-height, + $kendo-scheduler-tooltip-events-gap: $kendo-scheduler-tooltip-events-gap, + $kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-tooltip-event-padding-x, + $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-tooltip-event-padding-y, + $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-tooltip-event-border-radius, + $kendo-scheduler-tooltip-event-gap: $kendo-scheduler-tooltip-event-gap, + $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-callout-text, + $kendo-scheduler-appointments-padding: $kendo-scheduler-appointments-padding, + $kendo-scheduler-event-template-padding-x: $kendo-scheduler-event-template-padding-x, + $kendo-scheduler-event-template-padding-y: $kendo-scheduler-event-template-padding-y, + $kendo-scheduler-event-actions-inset-x: $kendo-scheduler-event-actions-inset-x, + $kendo-scheduler-indicators-margin: $kendo-scheduler-indicators-margin, + $kendo-scheduler-rtl-indicators-margin: $kendo-scheduler-rtl-indicators-margin, + $kendo-scheduler-marquee-label-inset-x: $kendo-scheduler-marquee-label-inset-x, + $kendo-scheduler-marquee-label-inset-y: $kendo-scheduler-marquee-label-inset-y +); diff --git a/packages/default/scss/scroller/_layout.scss b/packages/default/scss/scroller/_layout.scss index 8535487d20c..3a27bc106de 100644 --- a/packages/default/scss/scroller/_layout.scss +++ b/packages/default/scss/scroller/_layout.scss @@ -1,88 +1,4 @@ -@mixin kendo-scroller--layout-base() { - - // Layout - .km-scrollview, - .km-scroll-container { - user-select: none; - border-collapse: separate; - } - .km-scroll-wrapper { - position: relative; - } - .km-scroll-header { - position: absolute; - z-index: 1001; - width: 100%; - top: 0; - left: 0; - } - - - // Pull to refresh - .km-scroller-pull { - width: 100%; - display: block; - position: absolute; - line-height: 3em; - font-size: 1.4em; - text-align: center; - transform: translate3d(0, -3em, 0); - } - .km-scroller-pull .km-template { - display: inline-block; - min-width: 200px; - text-align: start; - } - .km-load-more .km-icon, - .km-widget .km-scroller-pull .km-icon { - display: inline-block; - height: 2rem; - margin-right: 1rem; - vertical-align: middle; - width: 2rem; - font-size: 2rem; - transform: rotate(0deg); - transition: transform 300ms linear; - } - .km-widget .km-scroller-release .km-icon { - transform: rotate(180deg); - } - .km-widget .km-scroller-refresh .km-icon { - transition: none; - } - - - // Scrollbar - .km-touch-scrollbar { - position: absolute; - visibility: hidden; - z-index: 200000; - height: .4em; - width: .4em; - opacity: 0; - transform-origin: 0 0; - transition: opacity .3s linear; - } - - .k-map, - .k-diagram { - .km-touch-scrollbar { - display: none; - } - } - - .km-vertical-scrollbar { - height: 100%; - right: 2px; - top: 0; - } - .km-horizontal-scrollbar { - width: 100%; - left: 0; - bottom: 2px; - } - -} +@use "@progress/kendo-theme-core/scss/components/scroller/_layout.scss" as *; @mixin kendo-scroller--layout() { diff --git a/packages/default/scss/scroller/_theme.scss b/packages/default/scss/scroller/_theme.scss index 3114447e122..046d7a1a20f 100644 --- a/packages/default/scss/scroller/_theme.scss +++ b/packages/default/scss/scroller/_theme.scss @@ -1,10 +1,4 @@ -@mixin kendo-scroller--theme-base() { - - .km-touch-scrollbar { - background-color: #333333; - } - -} +@use "@progress/kendo-theme-core/scss/components/scroller/_theme.scss" as *; @mixin kendo-scroller--theme() { diff --git a/packages/default/scss/scrollview/_layout.scss b/packages/default/scss/scrollview/_layout.scss index 6624c46eb5c..802bf4e9bc4 100644 --- a/packages/default/scss/scrollview/_layout.scss +++ b/packages/default/scss/scrollview/_layout.scss @@ -1,168 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-scrollview--layout-base() { - - .k-scrollview { - border-width: $kendo-scrollview-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-scrollview-font-family; - font-size: $kendo-scrollview-font-size; - line-height: $kendo-scrollview-line-height; - position: relative; - overflow: hidden; - display: block; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - } - - .k-scrollview-wrap { - position: absolute; - margin: 0; - padding: 0; - height: 100%; - width: 100%; - display: flex; - flex-flow: row nowrap; - cursor: default; - white-space: nowrap; - - > .k-scrollview-view { - display: inline-block; - overflow: hidden; - flex-shrink: 0; - } - - img { - user-select: none; - } - - } - - .k-scrollview-wrap.k-scrollview-animate { - width: calc( var(--kendo-scrollview-views, 1) * 100% ); - transition-duration: $kendo-scrollview-transition-duration; - transition-timing-function: $kendo-scrollview-transition-timing-function; - transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) ); - - .k-scrollview-view { - width: calc( 100% / var(--kendo-scrollview-views, 1) ); - flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) ); - } - - } - - :is([dir="rtl"], .k-rtl) .k-scrollview-wrap.k-scrollview-animate { - transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) ); - } - - .k-scrollview-nav-wrap { - padding: 0; - margin: 0; - position: absolute; - left: 0; - right: 0; - bottom: $kendo-scrollview-pager-offset; - height: $kendo-scrollview-pager-height; - text-align: center; - } - - kendo-scrollview.k-scrollview kendo-scrollview-pager { - pointer-events: none; - } - - kendo-scrollview.k-scrollview .k-scrollview-nav { - pointer-events: initial; - } - - .k-scrollview-nav { - margin: 0; - padding: $kendo-scrollview-pager-item-spacing; - max-width: 100%; - box-sizing: border-box; - line-height: 0; - text-align: center; - white-space: nowrap; - list-style: none; - display: inline-flex; - align-items: center; - overflow-x: scroll; - overflow-y: hidden; - pointer-events: initial; - - &:focus { - outline: none; - } - } - - .k-scrollview-nav > .k-link { - margin-block: 0; - margin-inline: calc( #{$kendo-scrollview-pager-item-spacing} / 2 ); - padding: 0; - width: $kendo-scrollview-pagebutton-size; - height: $kendo-scrollview-pagebutton-size; - border-width: $kendo-scrollview-pager-item-border-width; - border-style: solid; - border-radius: 50%; - box-sizing: content-box; - display: inline-block; - position: relative; - flex: 0 0 auto; - cursor: pointer; - pointer-events: all; - vertical-align: top; - - &::before { - content: ""; - width: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} ); - height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} ); - display: block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - pointer-events: initial; - border-radius: 0; - } - } - - .k-scrollview-next, - .k-scrollview-prev { - display: table; - position: absolute; - padding: 0; - height: 60%; - top: 20%; - text-decoration: none; - user-select: none; - cursor: pointer; - - .k-icon { - display: table-cell; - overflow: visible; - margin: 0; - padding: 0; - vertical-align: middle; - font-weight: normal; - } - } - - .k-scrollview-prev { - inset-inline-start: 0; - } - - .k-scrollview-next { - inset-inline-end: 0; - } - - - .k-scrollview-animation { - transition-duration: .3s; - transition-timing-function: ease-in-out; - } -} +@use "@progress/kendo-theme-core/scss/components/scrollview/_layout.scss" as *; @mixin kendo-scrollview--layout() { diff --git a/packages/default/scss/scrollview/_theme.scss b/packages/default/scss/scrollview/_theme.scss index da109c816fa..501a7e9c8ed 100644 --- a/packages/default/scss/scrollview/_theme.scss +++ b/packages/default/scss/scrollview/_theme.scss @@ -1,94 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-scrollview--theme-base() { - - .k-scrollview { - @include fill( - $kendo-scrollview-text, - $kendo-scrollview-bg, - $kendo-scrollview-border - ); - - &.k-scrollview-dark { - kendo-scrollview-pager, - .k-scrollview-nav-wrap { - background-color: $kendo-scrollview-dark-bg; - } - .k-scrollview-next, - .k-scrollview-prev { - color: $kendo-scrollview-dark-bg; - - } - } - - &.k-scrollview-light { - kendo-scrollview-pager, - .k-scrollview-nav-wrap { - background-color: $kendo-scrollview-light-bg; - } - - } - } - - .k-scrollview:focus, - .k-scrollview-wrap:focus { - outline: none; - - } - .k-scrollview-elements { - color: $kendo-scrollview-navigation-color; - } - - .k-scrollview-next, - .k-scrollview-prev { - color: $kendo-scrollview-navigation-color; - background-color: $kendo-scrollview-navigation-bg; - text-shadow: $kendo-scrollview-navigation-icon-shadow; - opacity: $kendo-scrollview-navigation-default-opacity; - outline-width: 0; - -webkit-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color; - - &:focus, - &.k-focus { - color: $kendo-scrollview-navigation-color; - opacity: $kendo-scrollview-navigation-hover-opacity; - - .k-icon::before { - @include focus-indicator( $kendo-scrollview-pagebutton-shadow ); - } - } - - &:hover, - &.k-hover { - color: $kendo-scrollview-navigation-color; - opacity: $kendo-scrollview-navigation-hover-opacity; - - } - } - - // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done - .k-scrollview-nav > .k-link { - background: $kendo-scrollview-pagebutton-bg; - border: $kendo-scrollview-pagebutton-border; - - &.k-primary { - background: $kendo-scrollview-pagebutton-primary-bg; - border: $kendo-scrollview-pagebutton-primary-border; - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-scrollview-pagebutton-shadow ); - } - - &:hover, - &.k-hover { - box-shadow: $kendo-scrollview-pagebutton-shadow; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/scrollview/_theme.scss" as *; @mixin kendo-scrollview--theme() { diff --git a/packages/default/scss/scrollview/_variables.scss b/packages/default/scss/scrollview/_variables.scss index 3658aa8cfe8..01efa35fdfc 100644 --- a/packages/default/scss/scrollview/_variables.scss +++ b/packages/default/scss/scrollview/_variables.scss @@ -93,3 +93,34 @@ $kendo-scrollview-transition-duration: .3s !default; /// The timing function of the ScrollView transition. /// @group scrollview $kendo-scrollview-transition-timing-function: ease-in-out !default; + +@forward "@progress/kendo-theme-core/scss/components/scrollview/_variables.scss" with ( + $kendo-scrollview-border-width: $kendo-scrollview-border-width, + $kendo-scrollview-font-family: $kendo-scrollview-font-family, + $kendo-scrollview-font-size: $kendo-scrollview-font-size, + $kendo-scrollview-line-height: $kendo-scrollview-line-height, + $kendo-scrollview-text: $kendo-scrollview-text, + $kendo-scrollview-bg: $kendo-scrollview-bg, + $kendo-scrollview-border: $kendo-scrollview-border, + $kendo-scrollview-pagebutton-size: $kendo-scrollview-pagebutton-size, + $kendo-scrollview-pagebutton-bg: $kendo-scrollview-pagebutton-bg, + $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-border, + $kendo-scrollview-pagebutton-primary-bg: $kendo-scrollview-pagebutton-primary-bg, + $kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-border, + $kendo-scrollview-pagebutton-shadow: $kendo-scrollview-pagebutton-shadow, + $kendo-scrollview-pager-offset: $kendo-scrollview-pager-offset, + $kendo-scrollview-pager-item-spacing: $kendo-scrollview-pager-item-spacing, + $kendo-scrollview-pager-item-border-width: $kendo-scrollview-pager-item-border-width, + $kendo-scrollview-pager-height: $kendo-scrollview-pager-height, + $kendo-scrollview-arrow-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color, + $kendo-scrollview-navigation-color: $kendo-scrollview-navigation-color, + $kendo-scrollview-navigation-icon-shadow: $kendo-scrollview-navigation-icon-shadow, + $kendo-scrollview-navigation-bg: $kendo-scrollview-navigation-bg, + $kendo-scrollview-navigation-default-opacity: $kendo-scrollview-navigation-default-opacity, + $kendo-scrollview-navigation-hover-opacity: $kendo-scrollview-navigation-hover-opacity, + $kendo-scrollview-navigation-hover-span-bg: $kendo-scrollview-navigation-hover-span-bg, + $kendo-scrollview-light-bg: $kendo-scrollview-light-bg, + $kendo-scrollview-dark-bg: $kendo-scrollview-dark-bg, + $kendo-scrollview-transition-duration: $kendo-scrollview-transition-duration, + $kendo-scrollview-transition-timing-function: $kendo-scrollview-transition-timing-function +); diff --git a/packages/default/scss/searchbox/_layout.scss b/packages/default/scss/searchbox/_layout.scss index 3d9ae6e29c0..a8da5bae1f6 100644 --- a/packages/default/scss/searchbox/_layout.scss +++ b/packages/default/scss/searchbox/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-searchbox--layout-base() { - - // Searchbox - .k-searchbox {} - -} +@use "@progress/kendo-theme-core/scss/components/searchbox/_layout.scss" as *; @mixin kendo-searchbox--layout() { diff --git a/packages/default/scss/searchbox/_theme.scss b/packages/default/scss/searchbox/_theme.scss index 1db68284f07..0b50bdeccb3 100644 --- a/packages/default/scss/searchbox/_theme.scss +++ b/packages/default/scss/searchbox/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-searchbox--theme-base() { - - // Searchbox - .k-searchbox {} - -} +@use "@progress/kendo-theme-core/scss/components/searchbox/_theme.scss" as *; @mixin kendo-searchbox--theme() { diff --git a/packages/default/scss/signature/_layout.scss b/packages/default/scss/signature/_layout.scss index abee0ff57ad..916834bca1b 100644 --- a/packages/default/scss/signature/_layout.scss +++ b/packages/default/scss/signature/_layout.scss @@ -1,77 +1,4 @@ -@use "sass:map"; -@use "./variables.scss" as *; - -@mixin kendo-signature--layout-base() { - - .k-signature { - width: $kendo-signature-width; - min-height: $kendo-signature-height; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: space-between; - - &.k-signature-maximized { - width: $kendo-signature-maximized-width; - height: $kendo-signature-maximized-height; - - > .k-signature-line { - border-bottom-width: $kendo-signature-maximized-line-width; - } - } - } - - .k-signature-actions { - display: flex; - width: min-content; - margin-inline-start: auto; - gap: $kendo-signature-actions-gap; - z-index: 2; - } - - .k-signature-canvas { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - z-index: 1; - outline: none; - } - - .k-signature-line { - position: absolute; - bottom: $kendo-signature-line-bottom-offset; - z-index: 2; - pointer-events: none; - border-bottom-width: $kendo-signature-line-width; - border-bottom-style: $kendo-signature-line-style; - } - - // Sizes - @each $size, $size-props in $kendo-signature-sizes { - $_padding-x: map.get($size-props, padding-x); - $_padding-y: map.get($size-props, padding-y); - $_line-size: map.get($size-props, line-size); - $_line-offset: map.get($size-props, line-offset); - - .k-signature-#{$size} { - padding-inline: $_padding-x; - padding-block: $_padding-y; - - .k-signature-line { - width: $_line-size; - } - } - } - - .k-signature-lg { - min-height: $kendo-signature-lg-min-height; - } - -} +@use "@progress/kendo-theme-core/scss/components/signature/_layout.scss" as *; @mixin kendo-signature--layout() { diff --git a/packages/default/scss/signature/_theme.scss b/packages/default/scss/signature/_theme.scss index 38eb844d774..80bc08c9ce4 100644 --- a/packages/default/scss/signature/_theme.scss +++ b/packages/default/scss/signature/_theme.scss @@ -1,16 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-signature--theme-base() { - - // Solid signature - .k-signature { - - .k-signature-line { - border-bottom-color: $kendo-signature-line-color; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/signature/_theme.scss" as *; @mixin kendo-signature--theme() { diff --git a/packages/default/scss/signature/_variables.scss b/packages/default/scss/signature/_variables.scss index f02289f985b..5f55f49c458 100644 --- a/packages/default/scss/signature/_variables.scss +++ b/packages/default/scss/signature/_variables.scss @@ -49,3 +49,30 @@ $kendo-signature-sizes: ( $kendo-signature-actions-gap: k-spacing(1) !default; $kendo-signature-maximized-line-width: 3px !default; + +@forward "@progress/kendo-theme-core/scss/components/signature/_variables.scss" with ( + $kendo-signature-width: $kendo-signature-width, + $kendo-signature-height: $kendo-signature-height, + $kendo-signature-lg-min-height: $kendo-signature-lg-min-height, + $kendo-signature-maximized-width: $kendo-signature-maximized-width, + $kendo-signature-maximized-height: $kendo-signature-maximized-height, + $kendo-signature-padding-x: $kendo-signature-padding-x, + $kendo-signature-sm-padding-x: $kendo-signature-sm-padding-x, + $kendo-signature-md-padding-x: $kendo-signature-md-padding-x, + $kendo-signature-lg-padding-x: $kendo-signature-lg-padding-x, + $kendo-signature-padding-y: $kendo-signature-padding-y, + $kendo-signature-sm-padding-y: $kendo-signature-sm-padding-y, + $kendo-signature-md-padding-y: $kendo-signature-md-padding-y, + $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-y, + $kendo-signature-line-width: $kendo-signature-line-width, + $kendo-signature-line-style: $kendo-signature-line-style, + $kendo-signature-line-color: $kendo-signature-line-color, + $kendo-signature-line-size: $kendo-signature-line-size, + $kendo-signature-sm-line-size: $kendo-signature-sm-line-size, + $kendo-signature-md-line-size: $kendo-signature-md-line-size, + $kendo-signature-lg-line-size: $kendo-signature-lg-line-size, + $kendo-signature-line-bottom-offset: $kendo-signature-line-bottom-offset, + $kendo-signature-sizes: $kendo-signature-sizes, + $kendo-signature-actions-gap: $kendo-signature-actions-gap, + $kendo-signature-maximized-line-width: $kendo-signature-maximized-line-width +); diff --git a/packages/default/scss/skeleton/_layout.scss b/packages/default/scss/skeleton/_layout.scss index 335f95c11a9..f2ed26a6f97 100644 --- a/packages/default/scss/skeleton/_layout.scss +++ b/packages/default/scss/skeleton/_layout.scss @@ -1,95 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-skeleton--layout-base() { - - .k-skeleton { - display: block; - } - - .k-skeleton-text { - border-radius: $kendo-skeleton-text-border-radius; - transform: $kendo-skeleton-text-transform; - - &:empty::before { - content: "\200b"; - } - } - - .k-skeleton-rect { - border-radius: $kendo-skeleton-rect-border-radius; - } - - .k-skeleton-circle { - border-radius: $kendo-skeleton-circle-border-radius; - } - - - // Legacy alias - .k-placeholder-line { - @extend .k-skeleton !optional; - @extend .k-skeleton-text !optional; - } - - - // Skeleton wave - @keyframes k-skeleton-wave { - 0% { - transform: translateX(-100%); - } - 60% { - transform: translateX(100%); - } - 100% { - transform: translateX(100%); - } - } - - .k-skeleton-wave { - - .k-skeleton, - &.k-skeleton { - position: relative; - overflow: hidden; - - &::after { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transform: translateX(-100%); - animation: k-skeleton-wave 1.6s linear .5s infinite; - } - } - - } - - - // Skeleton pulse - @keyframes k-skeleton-pulse { - 0% { - opacity: 1; - } - 50% { - opacity: .4; - } - 100% { - opacity: 1; - } - } - - .k-skeleton-pulse { - - .k-skeleton, - &.k-skeleton { - animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite; - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/skeleton/_layout.scss" as *; @mixin kendo-skeleton--layout() { diff --git a/packages/default/scss/skeleton/_theme.scss b/packages/default/scss/skeleton/_theme.scss index 18335f5d5ab..14daefbc18f 100644 --- a/packages/default/scss/skeleton/_theme.scss +++ b/packages/default/scss/skeleton/_theme.scss @@ -1,29 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-skeleton--theme-base() { - - .k-skeleton { - @include fill( $bg: $kendo-skeleton-item-bg ); - } - - - // Skeleton wave - .k-skeleton-wave { - - .k-skeleton::after, - &.k-skeleton::after { - background-image: linear-gradient( - to right, - transparent, - $kendo-skeleton-wave-bg, - transparent - ); - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/skeleton/_theme.scss" as *; @mixin kendo-skeleton--theme() { diff --git a/packages/default/scss/skeleton/_variables.scss b/packages/default/scss/skeleton/_variables.scss index bca13690a11..0821458f3a0 100644 --- a/packages/default/scss/skeleton/_variables.scss +++ b/packages/default/scss/skeleton/_variables.scss @@ -19,3 +19,12 @@ $kendo-skeleton-circle-border-radius: 9999px !default; $kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) !default; $kendo-skeleton-wave-bg: rgba( black, .04 ) !default; + +@forward "@progress/kendo-theme-core/scss/components/skeleton/_variables.scss" with ( + $kendo-skeleton-text-transform: $kendo-skeleton-text-transform, + $kendo-skeleton-text-border-radius: $kendo-skeleton-text-border-radius, + $kendo-skeleton-rect-border-radius: $kendo-skeleton-rect-border-radius, + $kendo-skeleton-circle-border-radius: $kendo-skeleton-circle-border-radius, + $kendo-skeleton-item-bg: $kendo-skeleton-item-bg, + $kendo-skeleton-wave-bg: $kendo-skeleton-wave-bg +); diff --git a/packages/default/scss/slider/_layout.scss b/packages/default/scss/slider/_layout.scss index 6e3c70a5f6d..c43c482b1e6 100644 --- a/packages/default/scss/slider/_layout.scss +++ b/packages/default/scss/slider/_layout.scss @@ -1,404 +1,4 @@ -@use "sass:math"; -@use "sass:list"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../tooltip/_variables.scss" as *; - -@mixin kendo-slider--layout-base() { - - // Slider - .k-slider { - border: 0; - box-sizing: border-box; - outline: 0; - font-family: $kendo-slider-font-family; - font-size: $kendo-slider-font-size; - line-height: $kendo-slider-line-height; - background: none; - display: inline-flex; - align-items: center; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .k-label { - width: auto; - font-size: .92em; - line-height: 1; - white-space: nowrap; - position: absolute; - } - - .k-tick, - .k-slider-track { - cursor: pointer; - } - - .k-tick { - background-color: transparent; - background-position: center center; - background-repeat: no-repeat; - margin: 0; - padding: 0; - position: relative; - } - - - &.k-disabled { - .k-tick, - .k-slider-track, - .k-draghandle { - cursor: default; - } - } - } - - // New rendering - .k-slider { - width: min-content; - height: min-content; - gap: calc( #{$kendo-slider-draghandle-size} / 2 ); - - .k-button { - flex: none; - } - .k-slider-track-wrap { - flex: 1 1 auto; - display: flex; - flex-flow: inherit; - position: relative; - touch-action: none; - - .k-slider-items { - margin: 0; - padding: 0; - list-style: none; - // For some reason, Safari does not understand `flex-basis: 100%` - // See telerik/kendo-themes#2197 - // flex-basis: 100%; - flex: 1 1 100%; - display: flex; - flex-flow: inherit; - justify-content: space-between; - user-select: none; - } - .k-tick { - flex: 0 0 1px; - } - - .k-tick-horizontal { - width: 1px; - min-height: 100%; - } - - .k-tick-vertical { - width: 100%; - min-height: 1px; - } - - .k-draghandle { - position: absolute; - } - } - - &-horizontal { - .k-slider-track-wrap { - height: 26px; - - .k-slider-track { - width: 100%; - } - - .k-draghandle { - top: 50%; - transform: translate(-50%, -50%); - } - .k-draghandle:focus, - .k-draghandle:active { - transform: translate(-50%, -50%) scale($kendo-slider-draghandle-active-scale); - } - - .k-slider-selection { - width: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% ); - inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% ); - } - .k-draghandle-start { - inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% ); - } - .k-draghandle-end { - inset-inline-start: calc( var(--kendo-slider-end, 0) * 1% ); - } - } - } - - &-vertical { - .k-slider-track-wrap { - width: 26px; - - .k-slider-track { - height: 100%; - } - .k-draghandle { - left: 50%; - transform: translate(-50%, 50%); - } - .k-draghandle:focus, - .k-draghandle:active { - transform: translate(-50%, 50%) scale($kendo-slider-draghandle-active-scale); - } - - .k-slider-selection { - bottom: calc( var(--kendo-slider-start, 0) * 1% ); - height: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% ); - } - .k-draghandle-start { - bottom: calc( var(--kendo-slider-start, 0) * 1% ); - } - .k-draghandle-end { - bottom: calc( var(--kendo-slider-end, 0) * 1% ); - } - } - } - - } - - - // Slider vertical - .k-slider-vertical { - height: $kendo-slider-size; - flex-flow: column-reverse nowrap; - - .k-tick { - text-align: end; - margin-left: 2px; - } - - .k-slider-topleft .k-tick { - text-align: start; - } - - // ticks - - .k-tick { background-position: -94px center; } - .k-slider-topleft .k-tick { background-position: -124px center; } - .k-slider-bottomright .k-tick { background-position: -154px center; } - - .k-tick-large { - display: flex; - align-items: center; - background-position: -4px center; - } - - .k-slider-topleft .k-tick-large { background-position: -34px center; } - .k-slider-bottomright .k-tick-large { background-position: -64px center; } - - .k-first { background-position: -94px 100%; } - .k-tick-large.k-first { background-position: -4px 100%; } - .k-slider-topleft .k-first { background-position: -124px 100%; } - .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; } - .k-slider-bottomright .k-first { background-position: -154px 100%; } - .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; } - - .k-last { background-position: -94px 0; } - .k-tick-large.k-last { background-position: -4px 0; } - .k-slider-topleft .k-last { background-position: -124px 0; } - .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; } - .k-slider-bottomright .k-last { background-position: -154px 0; } - .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; } - - // labels - - .k-label { - text-align: start; - inset-inline-start: 120%; - top: 50%; - transform: translateY(-50%); - } - .k-first .k-label { top: 100%; } - .k-last .k-label { top: 0; } - - .k-slider-topleft .k-label { - inset-inline-start: auto; - inset-inline-end: 120%; - } - - } - - - // Slider horizontal - .k-slider-horizontal { - width: $kendo-slider-size; - flex-flow: row nowrap; - - .k-tick { background-position: center -92px; } - .k-slider-topleft .k-tick { background-position: center -122px; } - .k-slider-bottomright .k-tick { background-position: center -152px; } - - .k-tick-large { background-position: center -2px; } - .k-slider-topleft .k-tick-large { background-position: center -32px; } - .k-slider-bottomright .k-tick-large { background-position: center -62px; } - - .k-first { background-position: 0 -92px; } - .k-tick-large.k-first { background-position: 0 -2px; } - .k-slider-topleft .k-first { background-position: 0 -122px; } - .k-slider-topleft .k-tick-large.k-first { background-position: 0 -32px; } - .k-slider-bottomright .k-first { background-position: 0 -152px; } - .k-slider-bottomright .k-tick-large.k-first { background-position: 0 -62px; } - - .k-last { background-position: 100% -92px; } - .k-tick-large.k-last { background-position: 100% -2px; } - .k-slider-topleft .k-last { background-position: 100% -122px; } - .k-slider-topleft .k-tick-large.k-last { background-position: 100% -32px; } - .k-slider-bottomright .k-last { background-position: 100% -152px; } - .k-slider-bottomright .k-tick-large.k-last { background-position: 100% -62px; } - - // labels - - .k-label { - inset-inline-start: 50%; - bottom: -1.2em; - transform: translateX(-50%); - } - .k-first .k-label { inset-inline-start: 0; } - .k-last .k-label { inset-inline-start: 100%; } - - .k-slider-topleft .k-label { - top: -1.2em; - } - } - - .k-slider-track, - .k-slider-selection { - margin: 0; - padding: 0; - position: absolute; - } - - .k-slider-horizontal :is(.k-slider-track, .k-slider-selection) { - height: $kendo-slider-track-thickness; - left: 0; - margin-top: - math.div( $kendo-slider-track-thickness, 2 ); - top: 50%; - } - - .k-slider-vertical :is(.k-slider-track, .k-slider-selection) { - bottom: 0; - left: 50%; - margin-left: - math.div( $kendo-slider-track-thickness, 2 ); - width: $kendo-slider-track-thickness; - } - - .k-draghandle { - background-color: transparent; - background-repeat: no-repeat; - border-style: solid; - border-width: $kendo-slider-draghandle-border-width; - outline: 0; - position: absolute; - text-align: center; - text-decoration: none; - width: $kendo-slider-draghandle-size; - height: $kendo-slider-draghandle-size; - - &.k-pressed { - transition: none; - } - } - - .k-slider-selection { - &.k-pressed { - transition: none; - } - } - - .k-slider-transitions { - &.k-slider-horizontal { - .k-draghandle { - transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function; - } - .k-slider-selection { - transition: width $kendo-slider-transition-speed $kendo-slider-transition-function; - } - } - - &.k-slider-vertical { - .k-draghandle { - transition: bottom $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function; - } - - .k-slider-selection { - transition: height $kendo-slider-transition-speed $kendo-slider-transition-function; - } - } - } - - // Slider readonly - .k-slider.k-readonly { - .k-button, - .k-slider-track, - .k-tick, - .k-draghandle { - pointer-events: none; - } - } - - - // Slider tooltip - .k-slider-tooltip { - .k-callout-n, - .k-callout-s { - margin-inline-start: - list.slash( $kendo-tooltip-callout-size, 2 ); - } - - .k-callout-w, - .k-callout-e { - margin-top: - list.slash( $kendo-tooltip-callout-size, 2 ); - } - } - - // RTL - .k-slider-rtl { - &.k-slider-horizontal { - - .k-draghandle { - transform: translate(50%, -50%); - } - - .k-draghandle:focus, - .k-draghandle:active { - transform: if( $kendo-slider-draghandle-active-scale, translate(50%, -50%) scale($kendo-slider-draghandle-active-scale), null ); - } - - .k-label { - transform: translateX(50%); - } - } - } - - .k-slider[dir="rtl"], - [dir="rtl"] .k-slider, - .k-slider.k-rtl, - .k-rtl .k-slider { - @extend .k-slider-rtl !optional; - } - - - // Angular specific - .k-slider kendo-resize-sensor { - position: absolute; - } - - // Aliases - .k-draghandle { @extend .k-slider-thumb !optional; } - .k-draghandle-start { @extend .k-slider-thumb-start !optional; } - .k-draghandle-end { @extend .k-slider-thumb-end !optional; } -} +@use "@progress/kendo-theme-core/scss/components/slider/_layout.scss" as *; @mixin kendo-slider--layout() { diff --git a/packages/default/scss/slider/_theme.scss b/packages/default/scss/slider/_theme.scss index b719c864618..94b8727d931 100644 --- a/packages/default/scss/slider/_theme.scss +++ b/packages/default/scss/slider/_theme.scss @@ -1,83 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-slider--theme-base() { - - // Slider - .k-slider { - // TODO: extract variables - color: $kendo-component-text; - - .k-slider-track, - .k-slider-selection { - @include border-radius( k-border-radius(md) ); - } - - .k-slider-track { - @include fill( $bg: $kendo-slider-track-bg ); - } - - .k-slider-selection { - @include fill( $bg: $kendo-slider-selection-bg ); - } - - .k-draghandle { - @include fill( - $kendo-slider-draghandle-text, - $kendo-slider-draghandle-bg, - $kendo-slider-draghandle-border, - $kendo-slider-draghandle-gradient - ); - @include border-radius( 50% ); - - &:hover, - &.k-hover { - @include fill( - $kendo-slider-draghandle-hover-text, - $kendo-slider-draghandle-hover-bg, - $kendo-slider-draghandle-hover-border, - $kendo-slider-draghandle-hover-gradient - ); - } - - // TODO: remove k-pressed and rely on k-active - &:active, - &.k-active, - &.k-pressed { - @include fill( - $kendo-slider-draghandle-pressed-text, - $kendo-slider-draghandle-pressed-bg, - $kendo-slider-draghandle-pressed-border, - $kendo-slider-draghandle-pressed-gradient - ); - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-slider-draghandle-focus-shadow ); - } - } - - &.k-focus { - .k-draghandle { - @include focus-indicator( $kendo-slider-draghandle-focus-shadow ); - } - } - - &.k-disabled { - opacity: $kendo-slider-disabled-opacity; - } - } - - .k-slider-horizontal .k-tick { - @include background-image( $kendo-slider-tick-horizontal-image ); - } - - .k-slider-vertical .k-tick { - @include background-image( $kendo-slider-tick-vertical-image ); - } - -} +@use "@progress/kendo-theme-core/scss/components/slider/_theme.scss" as *; @mixin kendo-slider--theme() { diff --git a/packages/default/scss/slider/_variables.scss b/packages/default/scss/slider/_variables.scss index fbcb7cc665a..1f0286512d6 100644 --- a/packages/default/scss/slider/_variables.scss +++ b/packages/default/scss/slider/_variables.scss @@ -123,3 +123,43 @@ $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4 /// The background image of the vertical Slider tick. /// @group slider $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default; + +@forward "@progress/kendo-theme-core/scss/components/slider/_variables.scss" with ( + $kendo-slider-size: $kendo-slider-size, + $kendo-slider-tick-size: $kendo-slider-tick-size, + $kendo-slider-alt-size: $kendo-slider-alt-size, + $kendo-slider-font-family: $kendo-slider-font-family, + $kendo-slider-font-size: $kendo-slider-font-size, + $kendo-slider-line-height: $kendo-slider-line-height, + $kendo-slider-button-offset: $kendo-slider-button-offset, + $kendo-slider-button-size: $kendo-slider-button-size, + $kendo-slider-button-spacing: $kendo-slider-button-spacing, + $kendo-slider-button-focus-shadow: $kendo-slider-button-focus-shadow, + $kendo-slider-track-thickness: $kendo-slider-track-thickness, + $kendo-slider-draghandle-size: $kendo-slider-draghandle-size, + $kendo-slider-draghandle-border-width: $kendo-slider-draghandle-border-width, + $kendo-slider-draghandle-active-scale: $kendo-slider-draghandle-active-scale, + $kendo-slider-draghandle-active-size: $kendo-slider-draghandle-active-size, + $kendo-slider-draghandle-bg: $kendo-slider-draghandle-bg, + $kendo-slider-draghandle-text: $kendo-slider-draghandle-text, + $kendo-slider-draghandle-border: $kendo-slider-draghandle-border, + $kendo-slider-draghandle-gradient: $kendo-slider-draghandle-gradient, + $kendo-slider-draghandle-hover-bg: $kendo-slider-draghandle-hover-bg, + $kendo-slider-draghandle-hover-text: $kendo-slider-draghandle-hover-text, + $kendo-slider-draghandle-hover-border: $kendo-slider-draghandle-hover-border, + $kendo-slider-draghandle-hover-gradient: $kendo-slider-draghandle-hover-gradient, + $kendo-slider-draghandle-pressed-bg: $kendo-slider-draghandle-pressed-bg, + $kendo-slider-draghandle-pressed-text: $kendo-slider-draghandle-pressed-text, + $kendo-slider-draghandle-pressed-border: $kendo-slider-draghandle-pressed-border, + $kendo-slider-draghandle-pressed-gradient: $kendo-slider-draghandle-pressed-gradient, + $kendo-slider-draghandle-focus-shadow: $kendo-slider-draghandle-focus-shadow, + $kendo-slider-transition-speed: $kendo-slider-transition-speed, + $kendo-slider-transition-function: $kendo-slider-transition-function, + $kendo-slider-draghandle-transition-speed: $kendo-slider-draghandle-transition-speed, + $kendo-slider-draghandle-transition-function: $kendo-slider-draghandle-transition-function, + $kendo-slider-track-bg: $kendo-slider-track-bg, + $kendo-slider-selection-bg: $kendo-slider-selection-bg, + $kendo-slider-disabled-opacity: $kendo-slider-disabled-opacity, + $kendo-slider-tick-horizontal-image: $kendo-slider-tick-horizontal-image, + $kendo-slider-tick-vertical-image: $kendo-slider-tick-vertical-image +); diff --git a/packages/default/scss/split-button/_layout.scss b/packages/default/scss/split-button/_layout.scss index 98df76a5086..e588a458c4c 100644 --- a/packages/default/scss/split-button/_layout.scss +++ b/packages/default/scss/split-button/_layout.scss @@ -1,39 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-split-button--layout-base() { - - // Split button - .k-split-button {} - - // Split button arrow - .k-split-button .k-split-button-arrow { - padding-block: $kendo-split-button-arrow-padding-y; - padding-inline: $kendo-split-button-arrow-padding-x; - width: auto; - aspect-ratio: auto; - flex: none; - - &.k-button-sm { - padding-block: $kendo-split-button-sm-arrow-padding-y; - padding-inline: $kendo-split-button-sm-arrow-padding-x; - } - - &.k-button-md { - padding-block: $kendo-split-button-md-arrow-padding-y; - padding-inline: $kendo-split-button-md-arrow-padding-x; - } - - &.k-button-lg { - padding-block: $kendo-split-button-lg-arrow-padding-y; - padding-inline: $kendo-split-button-lg-arrow-padding-x; - } - - .k-button-icon { - min-width: 0; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/split-button/_layout.scss" as *; @mixin kendo-split-button--layout() { diff --git a/packages/default/scss/split-button/_theme.scss b/packages/default/scss/split-button/_theme.scss index 6fdbfb6f79a..1408e7b223f 100644 --- a/packages/default/scss/split-button/_theme.scss +++ b/packages/default/scss/split-button/_theme.scss @@ -1,15 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-split-button--theme-base() { - - // Split button - .k-split-button:focus, - .k-split-button.k-focus { - @include focus-indicator( $kendo-split-button-focus-shadow ); - } - -} +@use "@progress/kendo-theme-core/scss/components/split-button/_theme.scss" as *; @mixin kendo-split-button--theme() { diff --git a/packages/default/scss/split-button/_variables.scss b/packages/default/scss/split-button/_variables.scss index 4036134d950..76135c3f47a 100644 --- a/packages/default/scss/split-button/_variables.scss +++ b/packages/default/scss/split-button/_variables.scss @@ -31,3 +31,15 @@ $kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default; /// The vertical padding of the large arrow Button. /// @group split-button $kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default; + +@forward "@progress/kendo-theme-core/scss/components/split-button/_variables.scss" with ( + $kendo-split-button-focus-shadow: $kendo-split-button-focus-shadow, + $kendo-split-button-arrow-padding-x: $kendo-split-button-arrow-padding-x, + $kendo-split-button-sm-arrow-padding-x: $kendo-split-button-sm-arrow-padding-x, + $kendo-split-button-md-arrow-padding-x: $kendo-split-button-md-arrow-padding-x, + $kendo-split-button-lg-arrow-padding-x: $kendo-split-button-lg-arrow-padding-x, + $kendo-split-button-arrow-padding-y: $kendo-split-button-arrow-padding-y, + $kendo-split-button-sm-arrow-padding-y: $kendo-split-button-sm-arrow-padding-y, + $kendo-split-button-md-arrow-padding-y: $kendo-split-button-md-arrow-padding-y, + $kendo-split-button-lg-arrow-padding-y: $kendo-split-button-lg-arrow-padding-y +); diff --git a/packages/default/scss/splitter/_layout.scss b/packages/default/scss/splitter/_layout.scss index f666b6f8d5a..9fd410bf1c5 100644 --- a/packages/default/scss/splitter/_layout.scss +++ b/packages/default/scss/splitter/_layout.scss @@ -1,194 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-splitter--layout-base() { - - // Base - .k-splitter { - height: 300px; - border-width: $kendo-splitter-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-splitter-font-family; - font-size: $kendo-splitter-font-size; - line-height: $kendo-splitter-line-height; - display: block; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - // Pane - .k-pane { - overflow: hidden; - box-sizing: border-box; - } - .k-scrollable { - overflow: auto; - } - .k-splitter-resizing { - overflow: hidden; - } - - // Loading - .k-pane-loading { - position: static; - top: 50%; - left: 50%; - } - - } - - - // Splitbar - .k-ghost-splitbar, - .k-splitbar { - border-style: solid; - outline: 0; - position: absolute; - user-select: none; - touch-action: none; - display: flex; - align-items: center; - justify-content: center; - - .k-collapse-prev, - .k-collapse-next { - cursor: pointer; - padding: $kendo-splitter-collapse-icon-padding-y $kendo-splitter-collapse-icon-padding-x; - } - - } - - .k-splitbar-draggable-horizontal { cursor: col-resize; } - .k-splitbar-draggable-vertical { cursor: row-resize; } - - .k-ghost-splitbar-horizontal, - .k-splitbar-horizontal { - width: $kendo-splitter-splitbar-size; - border-width: 0; - background-repeat: repeat-y; - flex-direction: column; - top: 0; - } - .k-ghost-splitbar-vertical, - .k-splitbar-vertical { - height: $kendo-splitter-splitbar-size; - border-width: 0; - background-repeat: repeat-x; - flex-direction: row; - left: 0; - } - - .k-splitbar-static-horizontal { width: 1px; } - .k-splitbar-static-vertical { height: 1px; } - - .k-splitbar-draggable-horizontal .k-resize-handle { - width: $kendo-splitter-drag-handle-thickness; - height: $kendo-splitter-drag-handle-length; - position: static; - z-index: 1; - } - - .k-splitbar .k-resize-handle { - display: none; - background-color: currentColor; - } - - .k-splitbar-draggable-horizontal, - .k-splitbar-draggable-vertical { - - .k-resize-handle { - display: block; - } - } - - .k-splitbar-horizontal .k-collapse-prev { - margin-bottom: $kendo-splitter-drag-icon-margin; - } - - .k-splitbar-horizontal .k-collapse-next { - margin-top: $kendo-splitter-drag-icon-margin; - } - - .k-splitbar-vertical .k-collapse-prev { - margin-right: $kendo-splitter-drag-icon-margin; - } - - .k-splitbar-vertical .k-collapse-next { - margin-left: $kendo-splitter-drag-icon-margin; - } - - .k-splitbar-draggable-vertical .k-resize-handle { - width: $kendo-splitter-drag-handle-length; - height: $kendo-splitter-drag-handle-thickness; - position: static; - z-index: 1; - } - - .k-pane > { - .k-splitter { - border-width: 0; - overflow: hidden; - } - - .k-splitter-overlay { - opacity: 0; - position: absolute; - } - } - - // flexbox-based splitter - - .k-splitter-flex { - display: flex; - width: 100%; - height: auto; - - .k-pane { - position: relative; - flex: 1 1 auto; - min-width: 0; - max-width: 100%; - min-height: 0; - max-height: 100%; - height: 100%; // allows nested elements to use height: 100% - } - - .k-pane-static { - flex-grow: 0; - flex-shrink: 0; - } - - .k-pane-flex { - display: flex; - } - - .k-splitbar { - position: static; - flex: 0 0 auto; - } - - .k-pane, - .k-pane-flex { - &.k-hidden, - &[hidden] { - // hidden panes need to be zero-width to allow pane animation - flex: 0 1 0% !important; // stylelint-disable-line declaration-no-important - overflow: hidden !important; // stylelint-disable-line declaration-no-important - display: block !important; // stylelint-disable-line declaration-no-important - } - } - - &.k-splitter-horizontal { - flex-direction: row; - } - &.k-splitter-vertical { - flex-direction: column; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/splitter/_layout.scss" as *; @mixin kendo-splitter--layout() { diff --git a/packages/default/scss/splitter/_theme.scss b/packages/default/scss/splitter/_theme.scss index d0144704ddd..46244d88b74 100644 --- a/packages/default/scss/splitter/_theme.scss +++ b/packages/default/scss/splitter/_theme.scss @@ -1,41 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-splitter--theme-base() { - - // Splitter - .k-splitter { - @include fill( - $kendo-splitter-text, - $kendo-splitter-bg, - $kendo-splitter-border - ); - } - - // Splitbar - .k-splitbar { - color: $kendo-splitbar-text; - background-color: $kendo-splitbar-bg; - } - .k-splitbar:hover, - .k-splitbar.k-hover, - .k-splitbar-horizontal-hover, - .k-splitbar-vertical-hover { - color: $kendo-splitbar-hover-text; - background-color: $kendo-splitbar-hover-bg; - } - .k-splitbar:focus, - .k-splitbar.k-focus { - color: $kendo-splitbar-selected-text; - background: $kendo-splitbar-selected-bg; - } - - // Ghost splitbar - .k-ghost-splitbar { - background-color: $kendo-splitbar-hover-bg; - } - -} +@use "@progress/kendo-theme-core/scss/components/splitter/_theme.scss" as *; @mixin kendo-splitter--theme() { diff --git a/packages/default/scss/splitter/_variables.scss b/packages/default/scss/splitter/_variables.scss index 9ed54edfe13..638d7af8f9a 100644 --- a/packages/default/scss/splitter/_variables.scss +++ b/packages/default/scss/splitter/_variables.scss @@ -65,3 +65,25 @@ $kendo-splitbar-selected-bg: $kendo-selected-bg !default; /// The selected text color of the Splitter split bar. /// @group splitter $kendo-splitbar-selected-text: $kendo-selected-text !default; + +@forward "@progress/kendo-theme-core/scss/components/splitter/_variables.scss" with ( + $kendo-splitter-border-width: $kendo-splitter-border-width, + $kendo-splitter-font-family: $kendo-splitter-font-family, + $kendo-splitter-font-size: $kendo-splitter-font-size, + $kendo-splitter-line-height: $kendo-splitter-line-height, + $kendo-splitter-bg: $kendo-splitter-bg, + $kendo-splitter-text: $kendo-splitter-text, + $kendo-splitter-border: $kendo-splitter-border, + $kendo-splitter-splitbar-size: $kendo-splitter-splitbar-size, + $kendo-splitter-drag-handle-length: $kendo-splitter-drag-handle-length, + $kendo-splitter-drag-handle-thickness: $kendo-splitter-drag-handle-thickness, + $kendo-splitter-drag-icon-margin: $kendo-splitter-drag-icon-margin, + $kendo-splitter-collapse-icon-padding-x: $kendo-splitter-collapse-icon-padding-x, + $kendo-splitter-collapse-icon-padding-y: $kendo-splitter-collapse-icon-padding-y, + $kendo-splitbar-bg: $kendo-splitbar-bg, + $kendo-splitbar-text: $kendo-splitbar-text, + $kendo-splitbar-hover-bg: $kendo-splitbar-hover-bg, + $kendo-splitbar-hover-text: $kendo-splitbar-hover-text, + $kendo-splitbar-selected-bg: $kendo-splitbar-selected-bg, + $kendo-splitbar-selected-text: $kendo-splitbar-selected-text +); diff --git a/packages/default/scss/spreadsheet/_layout.scss b/packages/default/scss/spreadsheet/_layout.scss index 28e22a5f604..9c381dddf78 100644 --- a/packages/default/scss/spreadsheet/_layout.scss +++ b/packages/default/scss/spreadsheet/_layout.scss @@ -1,908 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../list/_variables.scss" as *; -@use "../icons/_variables.scss" as *; -@use "../menu/_variables.scss" as *; -@use "../toolbar/_variables.scss" as *; - -@mixin kendo-spreadsheet--layout-base() { - - // Spreadsheet - .k-spreadsheet { - width: 100%; - height: 600px; - border-width: $kendo-spreadsheet-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-spreadsheet-font-family; - font-size: $kendo-spreadsheet-font-size; - line-height: $kendo-spreadsheet-line-height; - display: flex; - flex-direction: column; - cursor: default; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - .k-vertical-align-center { - position: relative; - top: 50%; - transform: translateY(-50%); - } - .k-vertical-align-bottom { - position: relative; - top: 100%; - transform: translateY( -100% ); - } - } - - // Toolbar - .k-spreadsheet-toolbar { - border-top-width: 0; - border-inline-width: 0; - } - - // Action bar - .k-spreadsheet-action-bar { - border-width: 0 0 $kendo-spreadsheet-action-bar-border-width; - border-style: solid; - border-color: inherit; - padding-block: $kendo-spreadsheet-action-bar-padding-y; - padding-inline: $kendo-spreadsheet-action-bar-padding-x; - font-size: $kendo-spreadsheet-action-bar-font-size; - font-family: $kendo-spreadsheet-action-bar-font-family; - position: relative; - display: flex; - flex-direction: row; - gap: $kendo-spreadsheet-action-bar-spacing; - } - // Todo check - .k-spreadsheet-name-editor { - width: 10em; - } - .k-spreadsheet-formula-bar { - min-width: 0px; - border-color: inherit; - display: flex; - flex-direction: row; - align-items: center; - flex: 1; - gap: $kendo-spreadsheet-formula-bar-gap; - - // move to legacy selector - > .k-icon { - padding-block: 0; - padding-inline: $kendo-spreadsheet-formula-bar-icon-padding; - box-sizing: content-box; - border-width: 0 1px 0 0; - border-style: solid; - border-color: inherit; - flex-shrink: 0; - } - - // add k-hidden from component - .k-tooltip, - .k-group-header, - .k-list-scroller { - display: none; - } - - .k-spreadsheet-formula-input { - padding-block: $kendo-spreadsheet-formula-input-padding-y; - padding-inline: $kendo-spreadsheet-formula-input-padding-x; - line-height: $kendo-spreadsheet-formula-input-line-height; - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &.k-spreadsheet-array-formula { - &::before { - content: "{"; - font-weight: 700; - } - &::after { - content: "}"; - font-weight: 700; - } - } - } - } - .k-spreadsheet-formula-input { - outline: 0; - white-space: pre; - flex: 1; - box-sizing: border-box; - - > .k-syntax-func.k-syntax-at-point, - > .k-syntax-bool.k-syntax-at-point, - > .k-syntax-ref.k-syntax-at-point, - > .k-syntax-str.k-syntax-at-point, - > .k-syntax-num.k-syntax-at-point { - text-decoration: underline; - } - - > .k-series-a, - > .k-series-b, - > .k-series-c, - > .k-series-d { - background-color: transparent; - } - } - .k-spreadsheet-formula-list { - min-width: 100px; - - .k-item { - padding-block: $kendo-list-md-item-padding-y; - padding-inline: $kendo-list-md-item-padding-x; - } - } - .k-syntax-func, - .k-syntax-startexp { - font-weight: bold; - } - - - // Cell editor - .k-spreadsheet-cell-editor { - padding-block: $kendo-spreadsheet-cell-editor-padding-y; - padding-inline: $kendo-spreadsheet-cell-editor-padding-x; - line-height: $kendo-spreadsheet-cell-editor-line-height; - display: none; - overflow: hidden; - position: absolute; - z-index: 100; - } - - - // Sheets bar - .k-spreadsheet-sheets-bar { - padding-block-end: $kendo-spreadsheet-sheets-bar-padding-y; - padding-inline: $kendo-spreadsheet-sheets-bar-padding-x; - border-width: $kendo-spreadsheet-sheets-bar-border-width 0 0; - border-style: solid; - border-color: inherit; - display: flex; - flex-direction: row; - align-items: center; - position: relative; - } - - .k-spreadsheet-sheets { - flex: 1 1 auto; - overflow: hidden; - } - .k-spreadsheet-sheets .k-tabstrip-items-wrapper { - border-width: 0; - } - - .k-spreadsheet-sheets-bar-add { - align-self: center; - - &:not(:hover) { - border-color: transparent; - color: inherit; - background: none; - } - } - - .k-spreadsheet-sheets-items { - flex: 1; - overflow: hidden; - - .k-tabstrip-items-wrapper { - margin: 0; - border-width: 0; - } - - .k-item { - .k-link { - display: inline-block; - } - - .k-spreadsheet-sheets-remove { - margin-right: k-spacing(2); - margin-left: calc( #{k-spacing(2)} * -1 ); - padding: 0; - line-height: 1; - display: inline-flex; - flex-direction: row; - vertical-align: middle; - align-self: center; - } - } - } - - - // Spreadsheet view - .k-spreadsheet-view { - height: auto !important; // stylelint-disable-line declaration-no-important - border-color: inherit; - font-size: $kendo-spreadsheet-view-font-size; - font-family: $kendo-spreadsheet-view-font-family; - flex: 1; - position: relative; - overflow: hidden; - - // disabled cells in the Spreadsheet should allow navigation if link is used - .k-disabled { - pointer-events: auto; - } - } - - .k-spreadsheet-fixed-container { - width: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) ); - height: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) ); - border-color: inherit; - box-sizing: border-box; - user-select: none; - position: absolute; - z-index: 2; - overflow: hidden; - } - - // todo check if used - probably not - .k-spreadsheet-overflow { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - border-color: inherit; - } - - .k-spreadsheet-pane { - padding: 0 1px 0 0; - border-width: 2px 0 0 2px; - border-style: solid; - border-color: inherit; - box-sizing: border-box; - position: absolute; - overflow: hidden; - - @each $side in (top, left) { - &.k-#{$side} { border-#{$side}-width: 0; } - } - - } - - .k-spreadsheet-top-corner { - border-width: 0 1px 1px 0; - border-style: solid; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - z-index: 10000; - - &::after { - content: ""; - display: block; - width: 0; - height: 0; - overflow: hidden; - position: absolute; - bottom: 0; - right: 0; - border: 6px solid transparent; - border-right-color: inherit; - border-bottom-color: inherit; - } - } - - .k-spreadsheet-scroller { - width: 100%; - height: 100%; - overflow: scroll; - position: absolute; - z-index: 1; - - @media (hover: none), (pointer: coarse) { - // on touch devices we want this to stay on top. - z-index: 3; - } - } - - - // Grid lines - .k-spreadsheet-haxis, - .k-spreadsheet-vaxis { - border: 0 solid; - border-color: inherit; - position: absolute; - } - .k-spreadsheet-haxis { - border-width: 1px 0 0; - left: 0; - } - .k-spreadsheet-vaxis { - border-width: 0 0 0 1px; - top: 0; - } - - - // Row / Column headers - .k-spreadsheet-row-header, - .k-spreadsheet-column-header { - text-align: center; - z-index: 100; - - > div { - position: relative; - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: inherit; - - &::after { - content: ""; - border-width: 0; - border-style: solid; - border-color: inherit; - display: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - } - } - .k-spreadsheet-row-header { - position: relative; - } - .k-spreadsheet-column-header { - position: absolute; - } - .k-spreadsheet-row-header > div { - border-top-width: 1px; - - &:first-child { border-top-width: 0; } - } - .k-spreadsheet-row-header > .k-selection-partial, - .k-spreadsheet-row-header > .k-selection-full { - &::after { - border-right-width: 2px; - display: block; - } - } - .k-spreadsheet-column-header > div { - border-left-width: 1px; - - &:first-child { border-left-width: 0; } - } - .k-spreadsheet-column-header > .k-selection-partial, - .k-spreadsheet-column-header > .k-selection-full { - &::after { - border-bottom-width: 2px; - display: block; - } - } - - - // Spreadsheet data - .k-spreadsheet-data { - border-color: inherit; - cursor: cell; - position: relative; - } - - - // Cells - .k-spreadsheet-cell { - padding-block: $kendo-spreadsheet-cell-padding-y; - padding-inline: $kendo-spreadsheet-cell-padding-x; - box-sizing: border-box; - position: absolute; - line-height: normal; - white-space: pre; - overflow: hidden; - } - .k-spreadsheet-merged-cells-wrapper { - position: relative; - } - - .k-spreadsheet-disabled-mask { - position: absolute; - } - - // Selection - .k-spreadsheet .k-selection-wrapper { - position: relative; - cursor: cell; - } - .k-spreadsheet .k-spreadsheet-selection { - border-width: 1px; - border-style: solid; - box-sizing: border-box; - position: absolute; - } - .k-spreadsheet .k-spreadsheet-selection-highlight { - border-width: 2px; - border-style: dashed; - box-sizing: border-box; - position: absolute; - } - .k-spreadsheet .k-spreadsheet-editor-button { - position: absolute; - padding: 0; - z-index: 60; - } - - .k-spreadsheet-active-cell { - // always show exact active cell border, regardless of inline cell styles - outline-color: transparent !important; // stylelint-disable-line declaration-no-important - z-index: 10; - } - - .k-spreadsheet .k-auto-fill-wrapper { - position: relative; - } - .k-spreadsheet .k-auto-fill, - .k-spreadsheet .k-auto-fill-punch, - .k-spreadsheet .k-auto-fill-br-hint { - box-sizing: border-box; - position: absolute; - } - .k-spreadsheet .k-auto-fill { - border-width: 1px; - border-style: solid; - cursor: crosshair; - } - - .k-spreadsheet .k-single-selection {} - .k-spreadsheet .k-single-selection::after { - content: ""; - margin-bottom: -4px; - margin-right: -4px; - width: 6px; - height: 6px; - border-width: 1px; - border-style: solid; - border-radius: 50%; - display: block; - position: absolute; - bottom: 0; - right: 0; - z-index: 300; - cursor: crosshair; - } - - .k-spreadsheet .k-selection-full, - .k-spreadsheet .k-selection-partial { - &::after { - display: none; - } - } - - - // Autofill - .k-spreadsheet .k-autofill-wrapper { - position: relative; - cursor: cell; - } - - - // Border rendering - .k-spreadsheet-vborder { - position: absolute; - border-left-style: solid; - border-left-width: 1px; - } - - .k-spreadsheet-hborder { - position: absolute; - border-top-style: solid; - border-top-width: 1px; - } - - - // Comments - .k-spreadsheet-has-comment::after { - content: ""; - display: block; - position: absolute; - top: 0; - inset-inline-end: 0; - inset-inline-start: auto; - border-width: 3px; - border-style: solid; - } - - - // Validation - .k-spreadsheet-cell .k-dirty { - inset-inline-start: 0; - inset-inline-end: auto; - } - - - // Filter button - .k-spreadsheet .k-filter-wrapper { - position: relative; - z-index: 50; - } - - .k-spreadsheet .k-filter-range { - border-width: 2px; - border-style: solid; - position: absolute; - box-sizing: border-box; - pointer-events: none; - } - - .k-spreadsheet-filter { - @include border-radius( k-border-radius(md) ); - padding: $kendo-spreadsheet-filter-padding; - line-height: 1; - position: absolute; - cursor: pointer; - - .k-icon { vertical-align: middle; } - } - - - // Filter menu - .k-spreadsheet-filter-menu { - width: 280px; - - .k-animation-container { - position: relative; - } - - > .k-menu, - > .k-menu.k-menu-vertical { - border-width: 0; - - .k-item { - color: inherit; - } - .k-link { - padding-left: $kendo-spreadsheet-filter-menu-link-padding-x; - } - .k-icon { - margin: $kendo-spreadsheet-filter-menu-icon-margin; - } - - } - - .k-spreadsheet-value-treeview-wrapper { - height: 200px; - border-width: 1px; - border-style: solid; - overflow-y: scroll; - overflow-x: auto; - - .k-treeview { - padding: $kendo-spreadsheet-filter-padding; - overflow: visible; - } - } - - // Details - .k-details, - .k-expander { - padding: 0; - border-width: 1px 0 0; - border-style: solid; - border-color: inherit; - } - .k-expander { - border: 0; - background: inherit; - } - .k-details-summary, - .k-columnmenu-item { - padding-block: $kendo-menu-popup-item-padding-y; - padding-inline: $kendo-menu-popup-item-padding-x; - display: flex; - align-items: center; - cursor: pointer; - - > .k-icon, - > .k-expander-indicator { - margin-right: $kendo-spreadsheet-filter-padding; - } - } - .k-details-content, - .k-columnmenu-item-content { - padding: k-spacing(2); - display: flex; - flex-flow: column nowrap; - gap: k-spacing(2); - - .k-filter-and { - width: min-content; - align-self: flex-start; - } - } - - .k-actions { - margin: 0; - padding: 0; - } - } - - // Spreadsheet toolbar - .k-spreadsheet-popup { - padding: 0; - - .k-separator { - display: block; - } - - .k-reset-color, - .k-custom-color { - @include border-radius( 0 ); - width: 100%; - border-width: 0; - box-sizing: border-box; - display: flex; - } - .k-reset-color { border-bottom-width: 1px; } - .k-custom-color { border-top-width: 1px; } - .k-spreadsheet-border-type-palette { - padding: k-spacing(2); - display: grid; - grid-template-columns: repeat(5, max-content); - gap: k-spacing(2); - } - } - - - .k-spreadsheet-clipboard, - .k-spreadsheet-clipboard-paste { - margin: 0; - padding: 0; - width: 1px; - height: 1px; - border: 0; - opacity: 0; - position: absolute; - top: 0; - left: 0; - overflow: hidden; - } - - - - // Spreadsheet window - .k-spreadsheet-window .k-external-dropzone { - margin-block-end: $kendo-spreadsheet-dropzone-spacing-y; - } - - .k-spreadsheet-window .k-edit-form-container { - width: auto; - min-width: 0; - } - - - // Format preview window - .k-spreadsheet-format-cells { - - .k-spreadsheet-preview { - margin-top: k-spacing(2); - text-align: center; - } - - .k-list-scroller { - margin-top: k-spacing(2); - height: 210px; - border-width: 1px; - border-style: solid; - border-color: inherit; - } - } - - - // Export dialog - .k-export-config { - clear: both; - position: relative; - - &::after { - content: ""; - clear: both; - display: block; - } - - - .k-edit-field { - margin-left: 5%; - width: 45%; - float: left; - } - - .k-page-orientation { - position: absolute; - right: 0; - top: k-spacing(2); - - .k-font-icon { - font-size: 6em; - } - .k-svg-icon { - width: 6em; - height: 6em; - } - } - } - - - // Insert comment dialog - .k-spreadsheet-insert-comment textarea { - height: auto; - } - - // Insert image dialog - Delete after new rendering adoption R3 23 - .k-spreadsheet-insert-image-dialog { - @include border-radius( $kendo-spreadsheet-insert-image-dialog-preview-border-radius ); - border-style: $kendo-spreadsheet-insert-image-dialog-border-style; - border-width: $kendo-spreadsheet-insert-image-dialog-border-width; - - label { - display: flex; - justify-content: center; - min-width: 100%; - width: $kendo-spreadsheet-insert-image-dialog-preview-width; - height: $kendo-spreadsheet-insert-image-dialog-preview-height; - background-image: url(#{$kendo-spreadsheet-insert-image-dialog-preview-img}); - background-size: auto 70%; - background-position: 50% 30%; - background-repeat: no-repeat; - - div { - display: flex; - align-self: flex-end; - margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom; - pointer-events: none; - } - - input { - display: none; - } - } - - .k-spreadsheet-has-image { - background-size: auto 90%; - background-position: 50% 50%; - - &:hover div, - &.k-hover div { - margin: 0; - align-self: center; - opacity: 1; - } - - div { - opacity: 0; - } - } - } - - - - // Spreadsheet drawing - .k-spreadsheet-drawing { - position: absolute; - box-sizing: border-box; - z-index: 101; - - &.k-spreadsheet-active-drawing { - outline-style: $kendo-spreadsheet-drawing-outline-style; - outline-width: $kendo-spreadsheet-drawing-outline-width; - } - - .k-spreadsheet-drawing-image { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-position: 50% 50%; - background-size: 100% 100%; - background-repeat: no-repeat; - cursor: move; - } - - .k-spreadsheet-drawing-handle { - width: $kendo-spreadsheet-drawing-handle-width; - height: $kendo-spreadsheet-drawing-handle-height; - border-style: $kendo-spreadsheet-drawing-handle-border-style; - border-width: $kendo-spreadsheet-drawing-handle-border-width; - border-radius: $kendo-spreadsheet-drawing-handle-border-radius; - position: absolute; - transform: translate(-50%, -50%); - - // stylelint-disable declaration-block-single-line-max-declarations, selector-class-pattern - &.N { left: 50%; top: 0; cursor: ns-resize; } - &.NE { left: 100%; top: 0; cursor: nesw-resize; } - &.E { left: 100%; top: 50%; cursor: ew-resize; } - &.SE { left: 100%; top: 100%; cursor: nwse-resize; } - &.S { left: 50%; top: 100%; cursor: ns-resize; } - &.SW { left: 0; top: 100%; cursor: nesw-resize; } - &.W { left: 0; top: 50%; cursor: ew-resize; } - &.NW { left: 0; top: 0; cursor: nwse-resize; } - // stylelint-enable declaration-block-single-line-max-declarations, selector-class-pattern - } - - .k-spreadsheet-insert-image-dialog { - .k-spreadsheet-has-image { - &:hover, - &.k-hover { - border-radius: $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius; - } - } - } - } - - - // Legacy styles - .k-spreadsheet-legacy { - .k-spreadsheet, - .k-spreadsheet-action-bar, - .k-spreadsheet-view { - font-size: 12px; - } - - .k-spreadsheet-cell { - padding: 1px; - } - - .k-spreadsheet-filter { - padding: 0px; - } - - .k-filter-range { - border-width: 1px; - } - - .k-spreadsheet .k-spreadsheet-selection-highlight { - border-width: 1px; - border-style: solid; - } - } - - // Tabstrip - .k-spreadsheet .k-tabstrip-wrapper { - border-width: 0 0 1px; - border-style: solid; - border-color: inherit; - position: relative; - } - - .k-spreadsheet-quick-access-toolbar { - padding: $kendo-toolbar-md-padding-y; - display: inline-flex; - flex-direction: row; - position: absolute; - z-index: 2; - top: 0; - left: 0; - } - - .k-spreadsheet-tabstrip { - padding-top: $kendo-toolbar-md-padding-y; - position: relative; - z-index: 1; - } - .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper { - margin: 0; - } - .k-spreadsheet-tabstrip .k-loading { - display: none; - } - .k-spreadsheet-tabstrip .k-content, - .k-spreadsheet-tabstrip .k-tabstrip-content { - @include border-radius( 0 ); - padding: 0; - border-width: 0; - overflow: hidden; - } - -} +@use "@progress/kendo-theme-core/scss/components/spreadsheet/_layout.scss" as *; @mixin kendo-spreadsheet--layout() { diff --git a/packages/default/scss/spreadsheet/_theme.scss b/packages/default/scss/spreadsheet/_theme.scss index 70812233491..0d7afbc42f2 100644 --- a/packages/default/scss/spreadsheet/_theme.scss +++ b/packages/default/scss/spreadsheet/_theme.scss @@ -1,215 +1,5 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../button/_variables.scss" as *; -@use "../list/_variables.scss" as *; +@use "@progress/kendo-theme-core/scss/components/spreadsheet/_theme.scss" as *; -@mixin kendo-spreadsheet--theme-base() { - - // Spreadsheet - .k-spreadsheet { - @include fill( - $kendo-spreadsheet-text, - $kendo-spreadsheet-bg, - $kendo-spreadsheet-border - ); - } - - // Header - .k-spreadsheet-header { - @include fill( - $kendo-spreadsheet-header-text, - $kendo-spreadsheet-header-bg, - $kendo-spreadsheet-header-border, - $kendo-spreadsheet-header-gradient - ); - } - - // Row / Column Headers - .k-spreadsheet-top-corner, - .k-spreadsheet-row-header, - .k-spreadsheet-column-header { - @include fill( - $kendo-spreadsheet-table-header-text, - $kendo-spreadsheet-table-header-bg, - $kendo-spreadsheet-table-header-border, - $kendo-spreadsheet-table-header-gradient - ); - } - - // Cell editor - .k-spreadsheet-cell-editor { - @include fill( - $kendo-spreadsheet-cell-editor-text, - $kendo-spreadsheet-cell-editor-bg, - $kendo-spreadsheet-cell-editor-border - ) - } - - // Cells - .k-spreadsheet-merged-cell { - @include fill( $bg: $kendo-spreadsheet-bg ); - } - .k-spreadsheet-disabled-mask { - @include fill( $bg: $kendo-spreadsheet-bg ); - } - - // Selection - .k-spreadsheet .k-selection-full, - .k-spreadsheet .k-selection-partial { - @include fill( $bg: $kendo-spreadsheet-partial-selection-bg ); - } - .k-spreadsheet-selection { - @include fill( - $kendo-spreadsheet-selection-text, - $kendo-spreadsheet-selection-bg, - $kendo-spreadsheet-selection-border - ); - @include box-shadow( $kendo-spreadsheet-selection-shadow ); - } - .k-spreadsheet-selection-highlight { - @include fill( $border: $kendo-spreadsheet-selection-border ); - } - .k-spreadsheet .k-single-selection::after { - @include fill( - $kendo-spreadsheet-single-selection-text, - $kendo-spreadsheet-single-selection-bg, - $kendo-spreadsheet-single-selection-border - ) - } - .k-spreadsheet-active-cell { - @include fill ( $bg: $kendo-spreadsheet-active-cell-bg ); - @include box-shadow( $kendo-spreadsheet-active-cell-shadow ); - } - - .k-spreadsheet .k-auto-fill { - @include fill( - $kendo-spreadsheet-auto-fill-text, - $kendo-spreadsheet-auto-fill-bg, - $kendo-spreadsheet-auto-fill-border - ); - @include box-shadow( $kendo-spreadsheet-auto-fill-shadow ); - } - .k-spreadsheet .k-auto-fill-punch { - @include fill( $bg: $kendo-spreadsheet-auto-fill-punch-bg ); - } - - // Resize handle - .k-spreadsheet .k-resize-handle, - .k-spreadsheet .k-resize-hint-handle, - .k-spreadsheet .k-resize-hint-marker { - @include fill( $bg: $kendo-spreadsheet-resize-handle-bg ); - } - - // Comments - .k-spreadsheet-has-comment::after { - border-block-color: $kendo-spreadsheet-cell-comment-border transparent; - border-inline-color: transparent $kendo-spreadsheet-cell-comment-border; - } - - // Validation - .k-spreadsheet-cell .k-dirty { - border-block-color: $kendo-spreadsheet-cell-dirty-border transparent; - border-inline-color: $kendo-spreadsheet-cell-dirty-border transparent; - } - - // Filter button - .k-spreadsheet .k-filter-range { - border-color: $kendo-color-primary; - } - .k-spreadsheet-filter { - @include fill( - $kendo-button-text, - $kendo-button-bg, - $kendo-button-border, - $kendo-button-gradient - ); - box-shadow: inset 0 0 0 1px $kendo-button-border; - - &:hover { - @include fill( - $kendo-button-hover-text, - $kendo-button-hover-bg, - $kendo-button-hover-border, - $kendo-button-hover-gradient - ); - } - - &.k-active { - @include fill( - $kendo-button-active-text, - $kendo-button-active-bg, - $kendo-button-active-border, - $kendo-button-active-gradient - ); - } - } - - // Filter menu legacy - delete after new rendering adoption R3 23 - .k-spreadsheet-filter-menu { - > .k-menu, - > .k-menu:not(.k-context-menu) { - - .k-item:hover, - .k-item.k-hover { - @include fill( - $kendo-list-item-hover-text, - $kendo-list-item-hover-bg - ); - } - } - - .k-spreadsheet-value-treeview-wrapper { - @include fill( - $kendo-spreadsheet-text, - $kendo-spreadsheet-bg, - $kendo-spreadsheet-border - ); - } - } - - // Delete after new rendering adoption R3 23 - .k-spreadsheet-insert-image-dialog { - border-color: $kendo-spreadsheet-insert-image-dialog-preview-border; - - .k-spreadsheet-has-image { - &:hover, - &.k-hover { - box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow; - } - - &:hover div, - &.k-hover div { - color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text; - } - } - } - - // Drawing - .k-spreadsheet-drawing { - &.k-spreadsheet-active-drawing { - outline-color: $kendo-spreadsheet-drawing-handle-outline-color; - } - - .k-spreadsheet-drawing-handle { - border-color: $kendo-spreadsheet-drawing-handle-border-color; - background-color: $kendo-spreadsheet-drawing-handle-bg; - } - } - - .k-spreadsheet-drawing-anchor-cell { - background: $kendo-spreadsheet-drawing-anchor-bg; - } - - // Formula bar - .k-spreadsheet-formula-list {} - .k-syntax-ref { color: #ff8822; } - .k-syntax-num { color: #0099ff; } - .k-syntax-str { color: #38b714; } - .k-syntax-error { color: red; } - .k-syntax-bool { color: #a9169c; } - .k-syntax-paren-match { background-color: #caf200; } - -} @mixin kendo-spreadsheet--theme() { @include kendo-spreadsheet--theme-base(); diff --git a/packages/default/scss/spreadsheet/_variables.scss b/packages/default/scss/spreadsheet/_variables.scss index 561e4aab93d..673356e3b5a 100644 --- a/packages/default/scss/spreadsheet/_variables.scss +++ b/packages/default/scss/spreadsheet/_variables.scss @@ -275,3 +275,89 @@ $kendo-spreadsheet-filter-padding: k-spacing(1) !default; $kendo-spreadsheet-filter-menu-link-padding-x: calc( #{$kendo-icon-size} + calc( 2 * #{k-spacing(1)} ) ) !default; $kendo-spreadsheet-filter-menu-icon-margin: 0 k-spacing(1) 0 calc(-1 * ( #{$kendo-icon-size} + #{k-spacing(1)} ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/spreadsheet/_variables.scss" with ( + $kendo-spreadsheet-border-width: $kendo-spreadsheet-border-width, + $kendo-spreadsheet-font-family: $kendo-spreadsheet-font-family, + $kendo-spreadsheet-font-size: $kendo-spreadsheet-font-size, + $kendo-spreadsheet-line-height: $kendo-spreadsheet-line-height, + $kendo-spreadsheet-bg: $kendo-spreadsheet-bg, + $kendo-spreadsheet-text: $kendo-spreadsheet-text, + $kendo-spreadsheet-border: $kendo-spreadsheet-border, + $kendo-spreadsheet-header-bg: $kendo-spreadsheet-header-bg, + $kendo-spreadsheet-header-text: $kendo-spreadsheet-header-text, + $kendo-spreadsheet-header-border: $kendo-spreadsheet-header-border, + $kendo-spreadsheet-header-gradient: $kendo-spreadsheet-header-gradient, + $kendo-spreadsheet-table-header-bg: $kendo-spreadsheet-table-header-bg, + $kendo-spreadsheet-table-header-text: $kendo-spreadsheet-table-header-text, + $kendo-spreadsheet-table-header-border: $kendo-spreadsheet-table-header-border, + $kendo-spreadsheet-table-header-gradient: $kendo-spreadsheet-table-header-gradient, + $kendo-spreadsheet-action-bar-border-width: $kendo-spreadsheet-action-bar-border-width, + $kendo-spreadsheet-action-bar-padding-y: $kendo-spreadsheet-action-bar-padding-y, + $kendo-spreadsheet-action-bar-padding-x: $kendo-spreadsheet-action-bar-padding-x, + $kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-action-bar-font-size, + $kendo-spreadsheet-action-bar-font-family: $kendo-spreadsheet-action-bar-font-family, + $kendo-spreadsheet-action-bar-spacing: $kendo-spreadsheet-action-bar-spacing, + $kendo-spreadsheet-formula-bar-gap: $kendo-spreadsheet-formula-bar-gap, + $kendo-spreadsheet-formula-input-padding-x: $kendo-spreadsheet-formula-input-padding-x, + $kendo-spreadsheet-formula-input-padding-y: $kendo-spreadsheet-formula-input-padding-y, + $kendo-spreadsheet-formula-input-line-height: $kendo-spreadsheet-formula-input-line-height, + $kendo-spreadsheet-formula-bar-icon-padding: $kendo-spreadsheet-formula-bar-icon-padding, + $kendo-spreadsheet-view-font-family: $kendo-spreadsheet-view-font-family, + $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-view-font-size, + $kendo-spreadsheet-selection-bg: $kendo-spreadsheet-selection-bg, + $kendo-spreadsheet-selection-text: $kendo-spreadsheet-selection-text, + $kendo-spreadsheet-selection-border: $kendo-spreadsheet-selection-border, + $kendo-spreadsheet-selection-shadow: $kendo-spreadsheet-selection-shadow, + $kendo-spreadsheet-single-selection-bg: $kendo-spreadsheet-single-selection-bg, + $kendo-spreadsheet-single-selection-text: $kendo-spreadsheet-single-selection-text, + $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-single-selection-border, + $kendo-spreadsheet-partial-selection-bg: $kendo-spreadsheet-partial-selection-bg, + $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-active-cell-bg, + $kendo-spreadsheet-active-cell-shadow: $kendo-spreadsheet-active-cell-shadow, + $kendo-spreadsheet-auto-fill-bg: $kendo-spreadsheet-auto-fill-bg, + $kendo-spreadsheet-auto-fill-text: $kendo-spreadsheet-auto-fill-text, + $kendo-spreadsheet-auto-fill-border: $kendo-spreadsheet-auto-fill-border, + $kendo-spreadsheet-auto-fill-shadow: $kendo-spreadsheet-auto-fill-shadow, + $kendo-spreadsheet-auto-fill-punch-bg: $kendo-spreadsheet-auto-fill-punch-bg, + $kendo-spreadsheet-cell-padding-y: $kendo-spreadsheet-cell-padding-y, + $kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-x, + $kendo-spreadsheet-cell-editor-line-height: $kendo-spreadsheet-cell-editor-line-height, + $kendo-spreadsheet-cell-editor-padding-x: $kendo-spreadsheet-cell-editor-padding-x, + $kendo-spreadsheet-cell-editor-padding-y: $kendo-spreadsheet-cell-editor-padding-y, + $kendo-spreadsheet-cell-editor-bg: $kendo-spreadsheet-cell-editor-bg, + $kendo-spreadsheet-cell-editor-text: $kendo-spreadsheet-cell-editor-text, + $kendo-spreadsheet-cell-editor-border: $kendo-spreadsheet-cell-editor-border, + $kendo-spreadsheet-resize-handle-bg: $kendo-spreadsheet-resize-handle-bg, + $kendo-spreadsheet-cell-comment-border: $kendo-spreadsheet-cell-comment-border, + $kendo-spreadsheet-cell-dirty-border: $kendo-spreadsheet-cell-dirty-border, + $kendo-spreadsheet-sheets-bar-padding-x: $kendo-spreadsheet-sheets-bar-padding-x, + $kendo-spreadsheet-sheets-bar-padding-y: $kendo-spreadsheet-sheets-bar-padding-y, + $kendo-spreadsheet-sheets-bar-border-width: $kendo-spreadsheet-sheets-bar-border-width, + $kendo-spreadsheet-insert-image-dialog-border-style: $kendo-spreadsheet-insert-image-dialog-border-style, + $kendo-spreadsheet-insert-image-dialog-border-width: $kendo-spreadsheet-insert-image-dialog-border-width, + $kendo-spreadsheet-insert-image-dialog-text-margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom, + $kendo-spreadsheet-insert-image-dialog-preview-width: $kendo-spreadsheet-insert-image-dialog-preview-width, + $kendo-spreadsheet-insert-image-dialog-preview-height: $kendo-spreadsheet-insert-image-dialog-preview-height, + $kendo-spreadsheet-insert-image-dialog-preview-img: $kendo-spreadsheet-insert-image-dialog-preview-img, + $kendo-spreadsheet-insert-image-dialog-preview-border: $kendo-spreadsheet-insert-image-dialog-preview-border, + $kendo-spreadsheet-insert-image-dialog-preview-border-radius: $kendo-spreadsheet-insert-image-dialog-preview-border-radius, + $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow, + $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius, + $kendo-spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text, + $kendo-spreadsheet-drawing-handle-width: $kendo-spreadsheet-drawing-handle-width, + $kendo-spreadsheet-drawing-handle-height: $kendo-spreadsheet-drawing-handle-height, + $kendo-spreadsheet-drawing-handle-border-style: $kendo-spreadsheet-drawing-handle-border-style, + $kendo-spreadsheet-drawing-handle-border-width: $kendo-spreadsheet-drawing-handle-border-width, + $kendo-spreadsheet-drawing-handle-outline-color: $kendo-spreadsheet-drawing-handle-outline-color, + $kendo-spreadsheet-drawing-handle-border-color: $kendo-spreadsheet-drawing-handle-border-color, + $kendo-spreadsheet-drawing-handle-bg: $kendo-spreadsheet-drawing-handle-bg, + $kendo-spreadsheet-drawing-handle-border-radius: $kendo-spreadsheet-drawing-handle-border-radius, + $kendo-spreadsheet-drawing-outline-style: $kendo-spreadsheet-drawing-outline-style, + $kendo-spreadsheet-drawing-outline-width: $kendo-spreadsheet-drawing-outline-width, + $kendo-spreadsheet-drawing-anchor-bg: $kendo-spreadsheet-drawing-anchor-bg, + $kendo-spreadsheet-dropzone-spacing-y: $kendo-spreadsheet-dropzone-spacing-y, + $kendo-spreadsheet-filter-padding: $kendo-spreadsheet-filter-padding, + $kendo-spreadsheet-filter-menu-link-padding-x: $kendo-spreadsheet-filter-menu-link-padding-x, + $kendo-spreadsheet-filter-menu-icon-margin: $kendo-spreadsheet-filter-menu-icon-margin +); diff --git a/packages/default/scss/stacklayout/_layout.scss b/packages/default/scss/stacklayout/_layout.scss index d5daf1dc2e0..80f15cebe27 100644 --- a/packages/default/scss/stacklayout/_layout.scss +++ b/packages/default/scss/stacklayout/_layout.scss @@ -1,9 +1,5 @@ -@mixin kendo-stack-layout--layout-base() { +@use "@progress/kendo-theme-core/scss/components/stacklayout/_layout.scss" as *; - // StackLayout - .k-stack-layout {} - -} @mixin kendo-stack-layout--layout() { @include kendo-stack-layout--layout-base(); diff --git a/packages/default/scss/stacklayout/_theme.scss b/packages/default/scss/stacklayout/_theme.scss index 9e7b696abc8..b02bba8553e 100644 --- a/packages/default/scss/stacklayout/_theme.scss +++ b/packages/default/scss/stacklayout/_theme.scss @@ -1,9 +1,5 @@ -@mixin kendo-stack-layout--theme-base() { +@use "@progress/kendo-theme-core/scss/components/stacklayout/_theme.scss" as *; - // StackLayout - .k-stack-layout {} - -} @mixin kendo-stack-layout--theme() { @include kendo-stack-layout--theme-base(); diff --git a/packages/default/scss/stepper/_layout.scss b/packages/default/scss/stepper/_layout.scss index 83f20e47d2c..0d9380dc93e 100644 --- a/packages/default/scss/stepper/_layout.scss +++ b/packages/default/scss/stepper/_layout.scss @@ -1,294 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-stepper--layout-base() { - - // Base - .k-stepper { - margin-block: $kendo-stepper-margin-y; - margin-inline: $kendo-stepper-margin-x; - padding-block: $kendo-stepper-padding-y; - padding-inline: $kendo-stepper-padding-x; - border-width: $kendo-stepper-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-size: $kendo-stepper-font-size; - line-height: $kendo-stepper-line-height; - font-family: $kendo-stepper-font-family; - display: block; - position: relative; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - // TODO: remove those once k-widget styles are removed. Link: https://github.com/telerik/kendo-themes/issues/1359 - color: inherit; - background: none; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - - // Step list - .k-step-list { - margin: 0; - padding: 0; - list-style: none; - display: flex; - position: relative; - z-index: 1; - } - - - // Step - .k-step { } - - - // Step link - .k-step-link { - outline: none; - color: inherit; - text-decoration: none; - white-space: nowrap; - display: flex; - align-items: center; - overflow: hidden; - } - - // Step indicator - .k-step-indicator { - @include border-radius( $kendo-stepper-indicator-border-radius ); - margin: if($kendo-stepper-indicator-focus-offset > 0, $kendo-stepper-indicator-focus-offset, null); - width: $kendo-stepper-indicator-width; - height: $kendo-stepper-indicator-height; - border-width: $kendo-stepper-indicator-border-width; - border-style: solid; - display: flex; - align-items: center; - justify-content: center; - flex: none; - position: relative; - z-index: 1; - overflow: visible; - transition-property: color, background-color, border-color; - transition-duration: .4s; - transition-timing-function: ease-in-out; - - &::before { - @include border-radius( $kendo-stepper-indicator-border-radius ); - content: ""; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: -1; - } - - &::after { - @include border-radius( 100% ); - content: ""; - border-width: $kendo-stepper-indicator-focus-border-width; - border-style: solid; - border-color: inherit; - pointer-events: none; - display: none; - position: absolute; - top: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); - right: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); - bottom: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); - left: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} ); - z-index: 2; - } - } - - .k-step.k-focus, - .k-step-link:focus { - .k-step-indicator::after { - display: block; - } - } - - - // Step label - .k-step-label { - max-width: clamp(100%, 10em, 100%); - display: inline-flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - z-index: 1; - } - .k-step-label:only-child { - @include border-radius( $kendo-stepper-label-border-radius ); - padding-block: $kendo-stepper-label-padding-y; - padding-inline: $kendo-stepper-label-padding-x; - border-width: 0; - } - .k-step-label .k-step-text { - max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing})); - flex-grow: 1; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .k-step-label .k-icon { - margin-left: $kendo-icon-spacing; - } - - .k-step-current .k-step-label { - font-weight: bold; - } - - - // Optional label - .k-step-label-optional { - flex-basis: 100%; - font-size: $kendo-stepper-optional-label-font-size; - font-style: $kendo-stepper-optional-label-font-style; - opacity: $kendo-stepper-optional-label-opacity; - } - - - .k-step-disabled, - .k-step.k-disabled { - opacity: 1; - pointer-events: none; - - .k-step-link { cursor: default; } - - .k-step-label-optional { - color: inherit; - } - } - - - // Progressbar - .k-progressbar { - pointer-events: none; - z-index: 0; - overflow: visible; - } - - .k-progressbar-horizontal { - grid-row: 1 / -1; - } - - .k-progressbar-vertical { - position: absolute; - } - } - - - // Horizontal - .k-step-list-horizontal { - flex-direction: row; - grid-row: 1; - - .k-step { - flex: 1 0 auto; - text-align: center; - } - - .k-step-link { - margin: auto; - max-width: 10em; - flex-direction: column; - } - - // Label - .k-step-label { - text-align: center; - } - .k-step-indicator + .k-step-label { - margin-top: if($kendo-stepper-indicator-focus-offset > 0, k-spacing(1), 8px); - } - - // Progressbar - & ~ .k-progressbar { - width: 100%; - height: $kendo-stepper-progressbar-size; - top: calc(((#{$kendo-stepper-indicator-height} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2); - } - } - - // Vertical - .k-step-list-vertical { - flex-direction: column; - - .k-step { - min-height: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) + 20px); - } - - // Label - .k-step-label { - justify-content: flex-start; - } - .k-step-indicator + .k-step-label { - margin-left: $kendo-stepper-label-margin-x; - } - - - // Progressbar - & ~ .k-progressbar { - width: $kendo-stepper-progressbar-size; - height: 100%; - min-height: 20px; - left: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2); - } - - // Inline content - .k-step-content { - height: 0; - overflow: hidden; - transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function; - } - - .k-step-current .k-step-content { - height: auto; - overflow: visible; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width; - padding-block: $kendo-stepper-inline-content-padding-x; - padding-inline: $kendo-stepper-inline-content-padding-y; - } - } - - - // Stepper rtl - .k-rtl .k-stepper, - .k-stepper[dir="rtl"] { - direction: rtl; - - .k-step-label .k-icon { - margin-left: 0; - margin-right: $kendo-icon-spacing; - } - - // Horizontal - .k-step-list-horizontal { } - - - // Vertical - .k-step-list-vertical { - .k-step-indicator + .k-step-label { - margin-left: 0; - margin-right: $kendo-stepper-label-margin-x; - } - - & ~ .k-progressbar { - left: auto; - right: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2); - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/stepper/_layout.scss" as *; @mixin kendo-stepper--layout() { diff --git a/packages/default/scss/stepper/_theme.scss b/packages/default/scss/stepper/_theme.scss index 51fe2dbf447..3c29d3141d1 100644 --- a/packages/default/scss/stepper/_theme.scss +++ b/packages/default/scss/stepper/_theme.scss @@ -1,241 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-stepper--theme-base() { - - // Base - .k-stepper { - @include fill( - $kendo-stepper-text, - $kendo-stepper-bg, - $kendo-stepper-border - ); - - - // Not done steps - .k-step { - // Hover - &:hover, - &.k-hover, - &.k-step-hover { - .k-step-label { - color: $kendo-stepper-label-hover-text; - } - - .k-step-indicator { - @include fill( - $kendo-stepper-indicator-hover-text, - $kendo-stepper-indicator-hover-bg, - $kendo-stepper-indicator-hover-border - ); - } - } - - &.k-focus, - .k-step-link:focus { - // Labels only - .k-step-label:only-child { - @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-border ), $inset: true ); - } - } - - // Disabled - &.k-step-disabled, - &.k-disabled, - &:disabled { - .k-step-indicator { - @if($kendo-enable-color-system) { - @include fill( - $kendo-stepper-indicator-disabled-text, - k-color( app-surface ), - $kendo-stepper-indicator-disabled-border - ); - - &::before { - background-color: $kendo-stepper-indicator-disabled-bg; - } - } @else { - @include fill( - $kendo-stepper-indicator-disabled-text, - $kendo-stepper-indicator-disabled-bg, - $kendo-stepper-indicator-disabled-border - ); - } - } - - .k-step-label { - @include fill( $color: $kendo-stepper-label-disabled-text ); - } - } - } - .k-step-indicator { - @include fill( - $kendo-stepper-indicator-text, - $kendo-stepper-indicator-bg, - $kendo-stepper-indicator-border - ); - } - .k-step-indicator::after { - @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-bg ); - } - .k-step-label:only-child { - @include fill( - $kendo-component-text, - $kendo-component-bg, - $kendo-component-border - ); - } - - - // Done steps - .k-step-done { - - .k-step-indicator { - @include fill( - $kendo-stepper-indicator-done-text, - $kendo-stepper-indicator-done-bg, - $kendo-stepper-indicator-done-border - ); - } - - - // Hover - &:hover, - &.k-hover, - &.k-step-hover { - .k-step-indicator { - @include fill( - $kendo-stepper-indicator-done-hover-text, - $kendo-stepper-indicator-done-hover-bg, - $kendo-stepper-indicator-done-hover-border - ); - } - } - - - // Disabled - &.k-step-disabled, - &.k-disabled, - &:disabled { - .k-step-indicator { - @if($kendo-enable-color-system) { - @include fill( - $kendo-stepper-indicator-done-disabled-text, - k-color( app-surface ), - $kendo-stepper-indicator-done-disabled-border - ); - - &::before { - background-color: $kendo-stepper-indicator-done-disabled-bg; - } - } @else { - @include fill( - $kendo-stepper-indicator-done-disabled-text, - $kendo-stepper-indicator-done-disabled-bg, - $kendo-stepper-indicator-done-disabled-border - ); - } - } - } - } - - - // Current - .k-step-current { - - .k-step-indicator { - @include fill( - $kendo-stepper-indicator-current-text, - $kendo-stepper-indicator-current-bg, - $kendo-stepper-indicator-current-border - ); - } - - - // Hover - &:hover, - &.k-hover, - &.k-step-hover { - .k-step-indicator { - @include fill( - $kendo-stepper-indicator-current-hover-text, - $kendo-stepper-indicator-current-hover-bg, - $kendo-stepper-indicator-current-hover-border - ); - } - } - - - // Disabled - &.k-step-disabled, - &.k-disabled, - &:disabled { - .k-step-indicator { - @if($kendo-enable-color-system) { - @include fill( - $kendo-stepper-indicator-current-disabled-text, - k-color( app-surface ), - $kendo-stepper-indicator-current-disabled-border - ); - - &::before { - background-color: $kendo-stepper-indicator-current-disabled-bg; - } - } @else { - @include fill( - $kendo-stepper-indicator-current-disabled-text, - $kendo-stepper-indicator-current-disabled-bg, - $kendo-stepper-indicator-current-disabled-border - ); - } - } - } - } - - // Label - .k-step-label { - @include fill( $color: $kendo-stepper-label-text ); - } - .k-step-success .k-step-label .k-icon { - @include fill( $color: $kendo-stepper-label-success-text ); - } - - .k-step-error { - .k-step-label { - @include fill( $color: $kendo-stepper-label-error-text ); - } - - &:hover, - &.k-hover, - &.k-step-hover { - .k-step-label { - @include fill( $color: $kendo-stepper-label-error-text ); - } - } - } - - // Optional Label - .k-step-label-optional { - color: $kendo-stepper-optional-label-text; - } - - // Progressbar - .k-progressbar { - @include fill( - $color: $kendo-stepper-progressbar-text, - $bg: $kendo-stepper-progressbar-bg - ); - - .k-selected { - @include fill( - $color: $kendo-stepper-progressbar-fill-text, - $bg: $kendo-stepper-progressbar-fill-bg - ); - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/stepper/_theme.scss" as *; @mixin kendo-stepper--theme() { diff --git a/packages/default/scss/stepper/_variables.scss b/packages/default/scss/stepper/_variables.scss index f8d75d8b6f3..9f180ea523b 100644 --- a/packages/default/scss/stepper/_variables.scss +++ b/packages/default/scss/stepper/_variables.scss @@ -229,3 +229,75 @@ $kendo-stepper-content-transition-duration: 300ms !default; /// The timing function of the Stepper transition. /// @group stepper $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default; + +@forward "@progress/kendo-theme-core/scss/components/stepper/_variables.scss" with ( + $kendo-stepper-margin-x: $kendo-stepper-margin-x, + $kendo-stepper-margin-y: $kendo-stepper-margin-y, + $kendo-stepper-padding-x: $kendo-stepper-padding-x, + $kendo-stepper-padding-y: $kendo-stepper-padding-y, + $kendo-stepper-label-margin-x: $kendo-stepper-label-margin-x, + $kendo-stepper-label-padding-x: $kendo-stepper-label-padding-x, + $kendo-stepper-label-padding-y: $kendo-stepper-label-padding-y, + $kendo-stepper-label-border-radius: $kendo-stepper-label-border-radius, + $kendo-stepper-border-width: $kendo-stepper-border-width, + $kendo-stepper-inline-content-padding-x: $kendo-stepper-inline-content-padding-x, + $kendo-stepper-inline-content-padding-y: $kendo-stepper-inline-content-padding-y, + $kendo-stepper-font-size: $kendo-stepper-font-size, + $kendo-stepper-line-height: $kendo-stepper-line-height, + $kendo-stepper-font-family: $kendo-stepper-font-family, + $kendo-stepper-bg: $kendo-stepper-bg, + $kendo-stepper-text: $kendo-stepper-text, + $kendo-stepper-border: $kendo-stepper-border, + $kendo-stepper-indicator-width: $kendo-stepper-indicator-width, + $kendo-stepper-indicator-height: $kendo-stepper-indicator-height, + $kendo-stepper-indicator-border-width: $kendo-stepper-indicator-border-width, + $kendo-stepper-indicator-border-radius: $kendo-stepper-indicator-border-radius, + $kendo-stepper-indicator-focus-border-width: $kendo-stepper-indicator-focus-border-width, + $kendo-stepper-indicator-focus-size: $kendo-stepper-indicator-focus-size, + $kendo-stepper-indicator-focus-offset: $kendo-stepper-indicator-focus-offset, + $kendo-stepper-indicator-focus-calc-offset: $kendo-stepper-indicator-focus-calc-offset, + $kendo-stepper-indicator-bg: $kendo-stepper-indicator-bg, + $kendo-stepper-indicator-text: $kendo-stepper-indicator-text, + $kendo-stepper-indicator-border: $kendo-stepper-indicator-border, + $kendo-stepper-indicator-hover-bg: $kendo-stepper-indicator-hover-bg, + $kendo-stepper-indicator-hover-text: $kendo-stepper-indicator-hover-text, + $kendo-stepper-indicator-hover-border: $kendo-stepper-indicator-hover-border, + $kendo-stepper-indicator-disabled-bg: $kendo-stepper-indicator-disabled-bg, + $kendo-stepper-indicator-disabled-text: $kendo-stepper-indicator-disabled-text, + $kendo-stepper-indicator-disabled-border: $kendo-stepper-indicator-disabled-border, + $kendo-stepper-indicator-done-bg: $kendo-stepper-indicator-done-bg, + $kendo-stepper-indicator-done-text: $kendo-stepper-indicator-done-text, + $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-border, + $kendo-stepper-indicator-done-hover-bg: $kendo-stepper-indicator-done-hover-bg, + $kendo-stepper-indicator-done-hover-text: $kendo-stepper-indicator-done-hover-text, + $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-border, + $kendo-stepper-indicator-done-disabled-bg: $kendo-stepper-indicator-done-disabled-bg, + $kendo-stepper-indicator-done-disabled-text: $kendo-stepper-indicator-done-disabled-text, + $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-border, + $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-current-bg, + $kendo-stepper-indicator-current-text: $kendo-stepper-indicator-current-text, + $kendo-stepper-indicator-current-border: $kendo-stepper-indicator-current-border, + $kendo-stepper-indicator-current-hover-bg: $kendo-stepper-indicator-current-hover-bg, + $kendo-stepper-indicator-current-hover-text: $kendo-stepper-indicator-current-hover-text, + $kendo-stepper-indicator-current-hover-border: $kendo-stepper-indicator-current-hover-border, + $kendo-stepper-indicator-current-disabled-bg: $kendo-stepper-indicator-current-disabled-bg, + $kendo-stepper-indicator-current-disabled-text: $kendo-stepper-indicator-current-disabled-text, + $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-current-disabled-border, + $kendo-stepper-label-text: $kendo-stepper-label-text, + $kendo-stepper-label-success-text: $kendo-stepper-label-success-text, + $kendo-stepper-label-error-text: $kendo-stepper-label-error-text, + $kendo-stepper-label-hover-text: $kendo-stepper-label-hover-text, + $kendo-stepper-label-disabled-text: $kendo-stepper-label-disabled-text, + $kendo-stepper-optional-label-text: $kendo-stepper-optional-label-text, + $kendo-stepper-optional-label-opacity: $kendo-stepper-optional-label-opacity, + $kendo-stepper-optional-label-font-size: $kendo-stepper-optional-label-font-size, + $kendo-stepper-optional-label-font-style: $kendo-stepper-optional-label-font-style, + $kendo-stepper-progressbar-size: $kendo-stepper-progressbar-size, + $kendo-stepper-progressbar-bg: $kendo-stepper-progressbar-bg, + $kendo-stepper-progressbar-text: $kendo-stepper-progressbar-text, + $kendo-stepper-progressbar-fill-bg: $kendo-stepper-progressbar-fill-bg, + $kendo-stepper-progressbar-fill-text: $kendo-stepper-progressbar-fill-text, + $kendo-stepper-content-transition-property: $kendo-stepper-content-transition-property, + $kendo-stepper-content-transition-duration: $kendo-stepper-content-transition-duration, + $kendo-stepper-content-transition-timing-function: $kendo-stepper-content-transition-timing-function +); diff --git a/packages/default/scss/switch/_layout.scss b/packages/default/scss/switch/_layout.scss index 0f6d82f5249..f3a15566fe3 100644 --- a/packages/default/scss/switch/_layout.scss +++ b/packages/default/scss/switch/_layout.scss @@ -1,162 +1,4 @@ -@use "sass:map"; -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-switch--layout-base() { - - .k-switch { - box-sizing: border-box; - font-family: $kendo-switch-font-family; - outline: 0; - display: inline-flex; - align-items: center; - vertical-align: middle; - line-height: 1; - position: relative; - cursor: pointer; - user-select: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - [type="checkbox"] { - display: none; - } - - &[aria-readonly="true"] { - pointer-events: none; - } - } - - - // Readonly - .k-switch.k-readonly { - pointer-events: none; - } - - - // Switch track - .k-switch-track { - border-width: $kendo-switch-track-border-width; - border-style: if( $kendo-switch-track-border-width == null, null, solid ); - outline: 0; - display: flex; - flex-flow: row nowrap; - flex: 1 0 auto; - position: relative; - transition: background-color 200ms ease-in-out; - } - - - // Switch thumb - .k-switch-thumb-wrap { - width: 0; - height: 0; - overflow: visible; - position: absolute; - transition: left 200ms ease-in-out; - top: 50%; - } - .k-switch-thumb { - border-width: $kendo-switch-thumb-border-width; - border-style: if( $kendo-switch-thumb-border-width == null, null, solid ); - display: block; - position: absolute; - transform: translate( -50%, -50% ); - } - - - // Switch label - .k-switch-label-on, - .k-switch-label-off { - text-transform: $kendo-switch-label-text-transform; - display: $kendo-switch-label-display; - position: absolute; - top: 50%; - transform: translateY( -50% ); - overflow: hidden; - } - - - // Switch sizes - @each $size, $size-props in $kendo-switch-sizes { - - $_font-size: map.get( $size-props, font-size ); - $_track-width: map.get( $size-props, track-width ); - $_track-height: map.get( $size-props, track-height ); - $_thumb-width: map.get( $size-props, thumb-width ); - $_thumb-height: map.get( $size-props, thumb-height ); - $_thumb-offset: map.get( $size-props, thumb-offset ); - $_label-offset: map.get( $size-props, label-offset ); - - .k-switch-#{$size} { - width: $_track-width; - height: $_track-height; - font-size: $_font-size; - - .k-switch-track { - width: $_track-width; - height: $_track-height; - } - - .k-switch-label-on { left: $_label-offset; } - .k-switch-label-off { right: $_label-offset; } - - .k-switch-thumb { - width: $_thumb-width; - height: $_thumb-height; - } - - &.k-switch-on .k-switch-thumb-wrap { - left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} ); - } - &.k-switch-off .k-switch-thumb-wrap { - left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} ); - } - } - - .k-switch-#{$size}[dir="rtl"], - [dir="rtl"] .k-switch-#{$size}, - .k-rtl .k-switch-#{$size} { - - .k-switch-label-on { - left: auto; - right: $_label-offset; - } - .k-switch-label-off { - right: auto; - left: $_label-offset; - } - - &.k-switch-on .k-switch-thumb-wrap { - left: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} ); - } - &.k-switch-off .k-switch-thumb-wrap { - left: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} ); - } - } - } - - - // RTL - .k-switch[dir="rtl"], - [dir="rtl"] .k-switch, - .k-switch.k-rtl, - .k-rtl .k-switch { - - .k-switch-thumb { - transform: translate( 50%, -50% ); - } - - } - -} +@use "@progress/kendo-theme-core/scss/components/switch/_layout.scss" as *; @mixin kendo-switch--layout() { diff --git a/packages/default/scss/switch/_theme.scss b/packages/default/scss/switch/_theme.scss index 81a64fc9beb..46bf1d746ce 100644 --- a/packages/default/scss/switch/_theme.scss +++ b/packages/default/scss/switch/_theme.scss @@ -1,172 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-switch--theme-base() { - - // Switch - .k-switch {} - - - // Switch OFF - .k-switch-off { - - // Normal state - .k-switch-track { - @include fill( - $kendo-switch-off-track-text, - $kendo-switch-off-track-bg, - $kendo-switch-off-track-border, - $kendo-switch-off-track-gradient - ); - } - .k-switch-thumb { - @include fill( - $kendo-switch-off-thumb-text, - $kendo-switch-off-thumb-bg, - $kendo-switch-off-thumb-border, - $kendo-switch-off-thumb-gradient - ); - } - - // Hover - &:hover, - &.k-hover { - .k-switch-track { - @include fill( - $kendo-switch-off-track-hover-text, - $kendo-switch-off-track-hover-bg, - $kendo-switch-off-track-hover-border, - $kendo-switch-off-track-hover-gradient - ); - } - - .k-switch-thumb { - @include fill( - $kendo-switch-off-thumb-hover-text, - $kendo-switch-off-thumb-hover-bg, - $kendo-switch-off-thumb-hover-border, - $kendo-switch-off-thumb-hover-gradient - ); - } - } - - // Focus - &:focus, - &.k-focus { - .k-switch-track { - @include fill( - $kendo-switch-off-track-focus-text, - $kendo-switch-off-track-focus-bg, - $kendo-switch-off-track-focus-border, - $kendo-switch-off-track-focus-gradient - ); - @if $kendo-enable-focus-contrast { - @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); - } @else { - outline: $kendo-switch-off-track-focus-ring; - } - } - } - - // Disabled - &:disabled, - &.k-disabled { - .k-switch-track { - @include fill( - $kendo-switch-off-track-disabled-text, - $kendo-switch-off-track-disabled-bg, - $kendo-switch-off-track-disabled-border, - $kendo-switch-off-track-disabled-gradient - ); - } - } - - .k-switch-label-on { - color: transparent; - } - } - - - // Switch ON - .k-switch-on { - - // Normal state - .k-switch-track { - @include fill( - $kendo-switch-on-track-text, - $kendo-switch-on-track-bg, - $kendo-switch-on-track-border, - $kendo-switch-on-track-gradient - ); - } - .k-switch-thumb { - @include fill( - $kendo-switch-on-thumb-text, - $kendo-switch-on-thumb-bg, - $kendo-switch-on-thumb-border, - $kendo-switch-on-thumb-gradient - ); - } - - // Hover - &:hover, - &.k-hover { - .k-switch-track { - @include fill( - $kendo-switch-on-track-hover-text, - $kendo-switch-on-track-hover-bg, - $kendo-switch-on-track-hover-border, - $kendo-switch-on-track-hover-gradient - ); - } - - .k-switch-thumb { - @include fill( - $kendo-switch-on-thumb-hover-text, - $kendo-switch-on-thumb-hover-bg, - $kendo-switch-on-thumb-hover-border, - $kendo-switch-on-thumb-hover-gradient - ); - } - } - - // Focus - &:focus, - &.k-focus { - .k-switch-track { - @include fill( - $kendo-switch-on-track-focus-text, - $kendo-switch-on-track-focus-bg, - $kendo-switch-on-track-focus-border, - $kendo-switch-on-track-focus-gradient - ); - @if $kendo-enable-focus-contrast { - @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); - } @else { - outline: $kendo-switch-on-track-focus-ring; - } - } - } - - // Disabled - &:disabled, - &.k-disabled { - .k-switch-track { - @include fill( - $kendo-switch-on-track-disabled-text, - $kendo-switch-on-track-disabled-bg, - $kendo-switch-on-track-disabled-border, - $kendo-switch-on-track-disabled-gradient - ); - } - } - - .k-switch-label-off { - color: transparent; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/switch/_theme.scss" as *; @mixin kendo-switch--theme() { diff --git a/packages/default/scss/switch/_variables.scss b/packages/default/scss/switch/_variables.scss index 7c86d5f1f03..ac672050bfd 100644 --- a/packages/default/scss/switch/_variables.scss +++ b/packages/default/scss/switch/_variables.scss @@ -193,3 +193,62 @@ $kendo-switch-on-thumb-hover-border: null !default; /// The background gradient of the thumb when the hovered Switch is checked. /// @group switch $kendo-switch-on-thumb-hover-gradient: null !default; + +@forward "@progress/kendo-theme-core/scss/components/switch/_variables.scss" with ( + $kendo-switch-font-family: $kendo-switch-font-family, + $kendo-switch-track-border-width: $kendo-switch-track-border-width, + $kendo-switch-thumb-border-width: $kendo-switch-thumb-border-width, + $kendo-switch-label-text-transform: $kendo-switch-label-text-transform, + $kendo-switch-label-display: $kendo-switch-label-display, + $kendo-switch-sizes: $kendo-switch-sizes, + $kendo-switch-off-track-bg: $kendo-switch-off-track-bg, + $kendo-switch-off-track-text: $kendo-switch-off-track-text, + $kendo-switch-off-track-border: $kendo-switch-off-track-border, + $kendo-switch-off-track-gradient: $kendo-switch-off-track-gradient, + $kendo-switch-off-track-hover-bg: $kendo-switch-off-track-hover-bg, + $kendo-switch-off-track-hover-text: $kendo-switch-off-track-hover-text, + $kendo-switch-off-track-hover-border: $kendo-switch-off-track-hover-border, + $kendo-switch-off-track-hover-gradient: $kendo-switch-off-track-hover-gradient, + $kendo-switch-off-track-focus-bg: $kendo-switch-off-track-focus-bg, + $kendo-switch-off-track-focus-text: $kendo-switch-off-track-focus-text, + $kendo-switch-off-track-focus-border: $kendo-switch-off-track-focus-border, + $kendo-switch-off-track-focus-gradient: $kendo-switch-off-track-focus-gradient, + $kendo-switch-off-track-focus-ring: $kendo-switch-off-track-focus-ring, + $kendo-switch-off-track-disabled-bg: $kendo-switch-off-track-disabled-bg, + $kendo-switch-off-track-disabled-text: $kendo-switch-off-track-disabled-text, + $kendo-switch-off-track-disabled-border: $kendo-switch-off-track-disabled-border, + $kendo-switch-off-track-disabled-gradient: $kendo-switch-off-track-disabled-gradient, + $kendo-switch-off-thumb-bg: $kendo-switch-off-thumb-bg, + $kendo-switch-off-thumb-text: $kendo-switch-off-thumb-text, + $kendo-switch-off-thumb-border: $kendo-switch-off-thumb-border, + $kendo-switch-off-thumb-gradient: $kendo-switch-off-thumb-gradient, + $kendo-switch-off-thumb-hover-bg: $kendo-switch-off-thumb-hover-bg, + $kendo-switch-off-thumb-hover-text: $kendo-switch-off-thumb-hover-text, + $kendo-switch-off-thumb-hover-border: $kendo-switch-off-thumb-hover-border, + $kendo-switch-off-thumb-hover-gradient: $kendo-switch-off-thumb-hover-gradient, + $kendo-switch-on-track-bg: $kendo-switch-on-track-bg, + $kendo-switch-on-track-text: $kendo-switch-on-track-text, + $kendo-switch-on-track-border: $kendo-switch-on-track-border, + $kendo-switch-on-track-gradient: $kendo-switch-on-track-gradient, + $kendo-switch-on-track-hover-bg: $kendo-switch-on-track-hover-bg, + $kendo-switch-on-track-hover-text: $kendo-switch-on-track-hover-text, + $kendo-switch-on-track-hover-border: $kendo-switch-on-track-hover-border, + $kendo-switch-on-track-hover-gradient: $kendo-switch-on-track-hover-gradient, + $kendo-switch-on-track-focus-bg: $kendo-switch-on-track-focus-bg, + $kendo-switch-on-track-focus-text: $kendo-switch-on-track-focus-text, + $kendo-switch-on-track-focus-border: $kendo-switch-on-track-focus-border, + $kendo-switch-on-track-focus-gradient: $kendo-switch-on-track-focus-gradient, + $kendo-switch-on-track-focus-ring: $kendo-switch-on-track-focus-ring, + $kendo-switch-on-track-disabled-bg: $kendo-switch-on-track-disabled-bg, + $kendo-switch-on-track-disabled-text: $kendo-switch-on-track-disabled-text, + $kendo-switch-on-track-disabled-border: $kendo-switch-on-track-disabled-border, + $kendo-switch-on-track-disabled-gradient: $kendo-switch-on-track-disabled-gradient, + $kendo-switch-on-thumb-bg: $kendo-switch-on-thumb-bg, + $kendo-switch-on-thumb-text: $kendo-switch-on-thumb-text, + $kendo-switch-on-thumb-border: $kendo-switch-on-thumb-border, + $kendo-switch-on-thumb-gradient: $kendo-switch-on-thumb-gradient, + $kendo-switch-on-thumb-hover-bg: $kendo-switch-on-thumb-hover-bg, + $kendo-switch-on-thumb-hover-text: $kendo-switch-on-thumb-hover-text, + $kendo-switch-on-thumb-hover-border: $kendo-switch-on-thumb-hover-border, + $kendo-switch-on-thumb-hover-gradient: $kendo-switch-on-thumb-hover-gradient +); diff --git a/packages/default/scss/table/_layout.scss b/packages/default/scss/table/_layout.scss index 076fc1b0e4a..11ae1616aea 100644 --- a/packages/default/scss/table/_layout.scss +++ b/packages/default/scss/table/_layout.scss @@ -1,291 +1,4 @@ -@use "./_variables.scss" as *; -@use "sass:map"; - -@mixin kendo-table--layout-base() { - - // Table - .k-table { - width: 100%; - max-width: none; - border-width: $kendo-table-border-width; - border-style: solid; - font-size: $kendo-table-font-size; - line-height: $kendo-table-line-height; - text-align: start; - border-collapse: collapse; - border-spacing: 0; - empty-cells: show; - outline: none; - } - - - // Data table - .k-data-table { - border-width: $kendo-table-border-width; - border-style: solid; - - .k-table { - table-layout: fixed; - } - } - - - // Table native parts - .k-table-thead, - .k-table-tbody, - .k-table-tfoot, - .k-table-row, - .k-table-alt-row { - border-color: inherit; - text-align: inherit; - } - .k-table-th, - .k-table-td { - padding-block: $kendo-table-cell-padding-y; - padding-inline: $kendo-table-cell-padding-x; - border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width; - border-style: solid; - border-color: inherit; - box-sizing: border-box; - font-weight: normal; - text-align: inherit; - white-space: nowrap; - text-overflow: ellipsis; - display: table-cell; - overflow: hidden; - position: relative; - - &:first-child { - border-left-width: 0; - } - } - .k-table-th { - border-bottom-width: 1px; - } - - - // Table header - .k-table-header { - padding-inline-end: var(--kendo-scrollbar-width); - border-width: 0 0 1px; - border-style: solid; - box-sizing: border-box; - - .k-table { - border-width: 0; - } - } - .k-table-header-wrap { - margin-right: -1px; - width: 100%; - border-width: 0 $kendo-table-cell-vertical-border-width 0 0; - border-style: solid; - border-color: inherit; - overflow: hidden; - } - .k-table-header, - .k-table-header-wrap { - > .k-table { - margin-bottom: -1px; - } - } - .k-table-group-sticky-header { - flex: none; - - .k-table-th { - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - } - } - - - // Table list - .k-table-list { - margin: 0; - padding: 0; - width: 100%; - max-width: none; - border-width: 0; - display: table; - border-collapse: collapse; - border-spacing: 0; - table-layout: fixed; - empty-cells: show; - list-style: none; - outline: none; - - .k-table-row { - position: relative; - } - - .k-table-row, - .k-table-group-row { - width: 100%; - box-sizing: border-box; - display: table-row; - } - .k-table-row.k-first { - border-top: 1px solid currentColor; - } - - .k-table-th, - .k-table-td { - vertical-align: middle; - } - - .k-table-group-row { - position: sticky; - - &::before { - content: "\200b"; - padding-block: $kendo-table-cell-padding-y; - padding-inline: 0; - width: 0; - display: block; - overflow: hidden; - } - - .k-table-th { - width: 100%; - border-color: inherit; - color: inherit; - background-color: inherit; - position: absolute; - top: 0; - } - } - - // stylelint-disable declaration-no-important - .k-table-spacer-td { - padding: 0 !important; - width: 0 !important; - border-left-width: 0 !important; - border-right-width: 0 !important; - } - .k-table-group-td { - padding: 0 !important; - width: 0 !important; - border-left-width: 0 !important; - border-right-width: 0 !important; - overflow: visible; - - > span { - font-size: .75em; - position: absolute; - top: 0; - right: 0; - } - } - // stylelint-enable declaration-no-important - } - - - // Virtualization - .k-virtual-table .k-table-row, - .k-virtual-table .k-table-group-row { - position: absolute; - width: 100%; - } - - - // Table scroller - .k-table-scroller { - position: relative; - overflow: auto; - - > .k-table { - border-width: 0; - } - } - - - // Table footer - .k-table-footer { - padding-inline-end: var(--kendo-scrollbar-width); - border-width: 1px 0 0; - border-style: solid; - box-sizing: border-box; - - .k-table { - border-width: 0; - } - } - .k-table-footer-wrap { - margin-right: -1px; - width: 100%; - border-width: 0 $kendo-table-cell-vertical-border-width 0 0; - border-style: solid; - border-color: inherit; - overflow: hidden; - } - - - // Sizes - @each $size, $size-props in $kendo-table-sizes { - $_font-size: map.get( $size-props, font-size); - $_line-height: map.get( $size-props, line-height); - $_cell-padding-x: map.get( $size-props, cell-padding-x); - $_cell-padding-y: map.get( $size-props, cell-padding-y); - - .k-table-#{$size} { - font-size: $_font-size; - line-height: $_line-height; - } - - .k-table-#{$size} .k-table-th, - .k-table-#{$size} .k-table-td { - padding-block: $_cell-padding-y; - padding-inline: $_cell-padding-x; - } - - .k-table-#{$size} .k-table-list .k-table-group-td > span { - padding-block: 0; - padding-inline: calc( #{$_cell-padding-x} / 2 ); - } - - .k-table-#{$size} .k-table-list .k-table-group-row::before { - padding-block: $_cell-padding-y; - padding-inline: 0; - } - } - - - // RTL - .k-rtl, - [dir="rtl"] { - &.k-table, - .k-table { - - .k-table-th, - .k-table-td { - border-left-width: 0; - border-right-width: $kendo-table-cell-vertical-border-width; - - &:first-child { - border-right-width: 0; - } - } - - .k-table-header-wrap, - .k-table-footer-wrap { - margin-right: 0; - margin-left: -1px; - border-left-width: $kendo-table-cell-vertical-border-width; - border-right-width: 0; - } - } - - .k-table-list { - .k-table-group-td > span { - left: 0; - right: auto; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/table/_layout.scss" as *; @mixin kendo-table--layout() { diff --git a/packages/default/scss/table/_theme.scss b/packages/default/scss/table/_theme.scss index a72aa92c3b1..9b7d769e965 100644 --- a/packages/default/scss/table/_theme.scss +++ b/packages/default/scss/table/_theme.scss @@ -1,91 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-table--theme-base() { - - // Table - .k-table, - .k-data-table { - border-color: $kendo-table-border; - color: $kendo-table-text; - background-color: $kendo-table-bg; - } - - - // Table header - .k-table-thead, - .k-table-header, - .k-table-group-sticky-header { - border-color: $kendo-table-header-border; - color: $kendo-table-header-text; - background-color: $kendo-table-header-bg; - } - - - // Table footer - .k-table-tfoot, - .k-table-footer { - border-color: $kendo-table-footer-border; - color: $kendo-table-footer-text; - background-color: $kendo-table-footer-bg; - } - - - // Group row - .k-table-group-row { - border-color: $kendo-table-group-row-border; - color: $kendo-table-group-row-text; - background-color: $kendo-table-group-row-bg; - } - .k-table-group-td > span { - color: $kendo-table-bg; - background-color: $kendo-table-text; - } - - - // Alternating row - .k-table-alt-row { - border-color: $kendo-table-alt-row-border; - color: $kendo-table-alt-row-text; - background-color: $kendo-table-alt-row-bg; - } - - - // Hover state - .k-table-tbody .k-table-row:hover, - .k-table-list .k-table-row:hover, - .k-table-tbody .k-table-row.k-hover, - .k-table-list .k-table-row.k-hover { - border-color: $kendo-table-hover-border; - color: $kendo-table-hover-text; - background-color: $kendo-table-hover-bg; - } - - - // Focus state - .k-table-tbody .k-table-row, - .k-table-list .k-table-row, - .k-table-tbody .k-table-td, - .k-table-list .k-table-td { - &.k-focus, - &:focus { - border-color: $kendo-table-focus-border; - color: $kendo-table-focus-text; - background-color: $kendo-table-focus-bg; - @include focus-indicator( $kendo-table-focus-shadow, inset ); - } - } - - - // Selected state - .k-table-tbody .k-table-row.k-selected > .k-table-td, - .k-table-list .k-table-row.k-selected { - border-color: $kendo-table-selected-border; - color: $kendo-table-selected-text; - background-color: $kendo-table-selected-bg; - } - -} +@use "@progress/kendo-theme-core/scss/components/table/_theme.scss" as *; @mixin kendo-table--theme() { diff --git a/packages/default/scss/table/_variables.scss b/packages/default/scss/table/_variables.scss index 03471165761..0802636d7e2 100644 --- a/packages/default/scss/table/_variables.scss +++ b/packages/default/scss/table/_variables.scss @@ -154,3 +154,46 @@ $kendo-table-selected-text: null !default; /// Border color of selected rows in table. /// @group table $kendo-table-selected-border: null !default; + +@forward "@progress/kendo-theme-core/scss/components/table/_variables.scss" with ( + $kendo-table-border-width: $kendo-table-border-width, + $kendo-table-cell-vertical-border-width: $kendo-table-cell-vertical-border-width, + $kendo-table-cell-horizontal-border-width: $kendo-table-cell-horizontal-border-width, + $kendo-table-font-size: $kendo-table-font-size, + $kendo-table-line-height: $kendo-table-line-height, + $kendo-table-cell-padding-x: $kendo-table-cell-padding-x, + $kendo-table-cell-padding-y: $kendo-table-cell-padding-y, + $kendo-table-sm-cell-padding-x: $kendo-table-sm-cell-padding-x, + $kendo-table-sm-cell-padding-y: $kendo-table-sm-cell-padding-y, + $kendo-table-md-cell-padding-x: $kendo-table-md-cell-padding-x, + $kendo-table-md-cell-padding-y: $kendo-table-md-cell-padding-y, + $kendo-table-lg-cell-padding-x: $kendo-table-lg-cell-padding-x, + $kendo-table-lg-cell-padding-y: $kendo-table-lg-cell-padding-y, + $kendo-table-sizes: $kendo-table-sizes, + $kendo-table-bg: $kendo-table-bg, + $kendo-table-text: $kendo-table-text, + $kendo-table-border: $kendo-table-border, + $kendo-table-header-bg: $kendo-table-header-bg, + $kendo-table-header-text: $kendo-table-header-text, + $kendo-table-header-border: $kendo-table-header-border, + $kendo-table-header-gradient: $kendo-table-header-gradient, + $kendo-table-footer-bg: $kendo-table-footer-bg, + $kendo-table-footer-text: $kendo-table-footer-text, + $kendo-table-footer-border: $kendo-table-footer-border, + $kendo-table-group-row-bg: $kendo-table-group-row-bg, + $kendo-table-group-row-text: $kendo-table-group-row-text, + $kendo-table-group-row-border: $kendo-table-group-row-border, + $kendo-table-alt-row-bg: $kendo-table-alt-row-bg, + $kendo-table-alt-row-text: $kendo-table-alt-row-text, + $kendo-table-alt-row-border: $kendo-table-alt-row-border, + $kendo-table-hover-bg: $kendo-table-hover-bg, + $kendo-table-hover-text: $kendo-table-hover-text, + $kendo-table-hover-border: $kendo-table-hover-border, + $kendo-table-focus-bg: $kendo-table-focus-bg, + $kendo-table-focus-text: $kendo-table-focus-text, + $kendo-table-focus-border: $kendo-table-focus-border, + $kendo-table-focus-shadow: $kendo-table-focus-shadow, + $kendo-table-selected-bg: $kendo-table-selected-bg, + $kendo-table-selected-text: $kendo-table-selected-text, + $kendo-table-selected-border: $kendo-table-selected-border +); diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss index c0656b7ee38..4cd8817accf 100644 --- a/packages/default/scss/tabstrip/_layout.scss +++ b/packages/default/scss/tabstrip/_layout.scss @@ -1,497 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "../icons/_variables.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-tabstrip--layout-base() { - - // Tabstrip wrapper - .k-tabstrip-wrapper { - padding-block: $kendo-tabstrip-wrapper-padding-y; - padding-inline: $kendo-tabstrip-wrapper-padding-x; - box-sizing: border-box; - border-width: $kendo-tabstrip-wrapper-border-width; - border-style: solid; - display: flex; - flex-direction: column; - position: relative; - } - - - // Tabstrip - .k-tabstrip { - border-width: 0; - border-color: transparent; - box-sizing: border-box; - outline: 0; - font-family: $kendo-tabstrip-font-family; - font-size: $kendo-tabstrip-font-size; - line-height: $kendo-tabstrip-line-height; - color: inherit; - background-color: transparent; - display: flex; - flex-flow: column nowrap; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - } - .k-tabstrip-wrapper > .k-tabstrip { - flex: 1 1 auto; - } - - - // Tabstrip items wrapper - .k-tabstrip-items-wrapper { - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: inherit; - position: relative; - } - - - // Tabstrip items - .k-tabstrip-items { - box-sizing: border-box; - outline: 0; - display: flex; - flex-direction: inherit; - flex-wrap: wrap; - flex: 1 1 auto; - gap: $kendo-tabstrip-item-gap; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .k-item { - margin: 0; - padding: 0; - border: $kendo-tabstrip-item-border-width solid transparent; - position: relative; - flex-shrink: 0; - display: flex; - flex-direction: row; - align-items: stretch; - justify-items: stretch; - outline: 0; - - // Active state - &:active, - &.k-active, - &.k-selected { - font-weight: $kendo-tabstrip-item-selected-font-weight; - } - } - - .k-item-actions { - margin: 0; - padding: 0; - display: flex; - flex-direction: row; - } - - .k-link { - padding-block: $kendo-tabstrip-item-padding-y; - padding-inline: $kendo-tabstrip-item-padding-x; - color: inherit; - cursor: pointer; - display: inline-flex; - vertical-align: middle; - flex: 1 1 auto; - flex-direction: row; - align-content: center; - align-items: center; - gap: $kendo-icon-spacing; - } - - - // Disabled state - .k-item.k-disabled, - .k-item[disabled] { - opacity: $kendo-tabstrip-item-disabled-opacity; - filter: $kendo-tabstrip-item-disabled-filter; - } - } - - - // Tabstrip content - .k-tabstrip-content, - .k-tabstrip > .k-content { - margin: 0 !important; // stylelint-disable-line declaration-no-important - padding-block: $kendo-tabstrip-content-padding-y; - padding-inline: $kendo-tabstrip-content-padding-x; - box-sizing: border-box; - border-width: $kendo-tabstrip-content-border-width; - border-style: solid; - border-color: inherit; - display: none; - overflow: auto; - flex: 1 1 auto; - position: relative; - - &.k-active { - display: block; - } - - &:focus, - &.k-focus { - outline-width: 1px; - outline-style: dotted; - outline-offset: -1px; - } - } - - - // Loading indicator - .k-tabstrip-items .k-loading { - width: 20%; - height: 0; - border: 0; - border-top: 1px solid transparent; - border-color: inherit; - background: none; - position: absolute; - top: 0; - left: 0; - transition: width .2s linear; - - // TODO: a better name - display: none; - - &.k-complete { - width: 100%; - border-top-width: 0; - } - } - - - // Scrolling - .k-tabstrip-scrollable { - > .k-tabstrip-items-wrapper { - > .k-tabstrip-items { - flex-wrap: nowrap; - white-space: nowrap; - overflow: hidden; - - &.k-tabstrip-items-scroll { - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } - } - } - } - - &.k-tabstrip-top, - &.k-tabstrip-bottom { - .k-tabstrip-items.k-tabstrip-items-scroll { - overflow-x: auto; - } - } - - &.k-tabstrip-left, - &.k-tabstrip-right { - .k-tabstrip-items.k-tabstrip-items-scroll { - overflow-y: auto; - } - } - } - - .k-tabstrip-scrollable-overlay { - .k-tabstrip-items-wrapper { - &::before, - &::after { - content: ''; - position: absolute; - z-index: 3; - } - } - - &.k-tabstrip-top, - &.k-tabstrip-bottom { - .k-tabstrip-items-wrapper { - &::before, - &::after { - height: 100%; - aspect-ratio: 1; - } - &::before { - inset-inline-start: 0; - } - - &::after { - inset-inline-end: 0; - } - } - } - - &.k-tabstrip-left, - &.k-tabstrip-right { - .k-tabstrip-items-wrapper { - &::before, - &::after { - width: 100%; - } - &::before { - inset-block-start: 0; - } - - &::after { - inset-block-end: 0; - } - } - } - - &.k-tabstrip-scrollable-start { - .k-tabstrip-items-wrapper { - &::before { - display: none; - } - } - } - - &.k-tabstrip-scrollable-end { - .k-tabstrip-items-wrapper { - &::after { - display: none; - } - } - } - } - - - // Tabstrip orientation - .k-tabstrip-horizontal { - flex-direction: row; - } - .k-tabstrip-vertical { - flex-direction: column; - } - - - // Tabstrip position - .k-tabstrip-top { - > .k-tabstrip-items-wrapper { - @extend .k-tabstrip-horizontal !optional; - border-bottom-width: $kendo-tabstrip-border-width; - - .k-item { - @include border-top-radius( $kendo-tabstrip-item-border-radius ); - border-bottom-width: 0; - - .k-link { - justify-content: center; - } - } - .k-item:active, - .k-item.k-active { - margin-bottom: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); - border-bottom-width: $kendo-tabstrip-border-width; - border-bottom-color: transparent !important; // stylelint-disable-line declaration-no-important - } - } - - > .k-content, - > .k-tabstrip-content { - @include border-bottom-radius( $kendo-tabstrip-item-border-radius ); - border-top-width: 0 !important; // stylelint-disable-line declaration-no-important - } - } - .k-tabstrip-bottom { - > .k-tabstrip-items-wrapper { - @extend .k-tabstrip-horizontal !optional; - border-top-width: $kendo-tabstrip-border-width; - - .k-item { - @include border-bottom-radius( $kendo-tabstrip-item-border-radius ); - border-top-width: 0; - - .k-link { - justify-content: center; - } - } - .k-item:active, - .k-item.k-active { - margin-top: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); - border-top-width: $kendo-tabstrip-border-width; - border-top-color: transparent !important; // stylelint-disable-line declaration-no-important - } - } - - > .k-content, - > .k-tabstrip-content { - @include border-top-radius( $kendo-tabstrip-item-border-radius ); - border-bottom-width: 0 !important; // stylelint-disable-line declaration-no-important - } - } - .k-tabstrip-left { - flex-direction: row; - - > .k-tabstrip-items-wrapper { - @extend .k-tabstrip-vertical !optional; - border-right-width: $kendo-tabstrip-border-width; - - .k-item { - @include border-left-radius( $kendo-tabstrip-item-border-radius ); - border-right-width: 0; - } - .k-item:active, - .k-item.k-active { - margin-right: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); - border-right-width: $kendo-tabstrip-border-width; - border-right-color: transparent !important; // stylelint-disable-line declaration-no-important - } - } - - > .k-content, - > .k-tabstrip-content { - @include border-right-radius( $kendo-tabstrip-item-border-radius ); - border-left-width: 0 !important; // stylelint-disable-line declaration-no-important - } - - } - .k-tabstrip-right { - flex-direction: row-reverse; - - > .k-tabstrip-items-wrapper { - @extend .k-tabstrip-vertical !optional; - border-left-width: $kendo-tabstrip-border-width; - - .k-item { - @include border-right-radius( $kendo-tabstrip-item-border-radius ); - border-left-width: 0; - } - .k-item:active, - .k-item.k-active { - margin-left: if( $kendo-tabstrip-border-width, -$kendo-tabstrip-border-width, null ); - border-left-width: $kendo-tabstrip-border-width; - border-left-color: transparent !important; // stylelint-disable-line declaration-no-important - } - } - - > .k-content, - > .k-tabstrip-content { - @include border-left-radius( $kendo-tabstrip-item-border-radius ); - border-right-width: 0; - } - } - - - // Tabstrip align - .k-tabstrip-items-start { - justify-content: flex-start; - } - .k-tabstrip-items-center { - justify-content: center; - } - .k-tabstrip-items-end { - justify-content: flex-end; - } - .k-tabstrip-items-justify { - justify-content: space-between; - } - .k-tabstrip-items-stretched > * { - flex: 1 0 0; - } - - - // Selected indicator - @if ($kendo-tabstrip-indicator-size) { - - .k-tabstrip-items-wrapper { - - .k-item::after { - content: ""; - border-width: 0; - border-style: solid; - display: none; - position: absolute; - z-index: 2; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - } - .k-item.k-active::after { - display: block; - } - - .k-item > .k-link { - z-index: 1; - } - } - - - // Variants - .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after { - border-bottom-width: $kendo-tabstrip-indicator-size; - } - .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::after { - border-top-width: $kendo-tabstrip-indicator-size; - } - .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after { - border-right-width: $kendo-tabstrip-indicator-size; - } - .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after { - border-left-width: $kendo-tabstrip-indicator-size; - } - - - // Hide tabstrip indicator when dragging - .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging { - &::after { - display: none !important; // stylelint-disable-line declaration-no-important - } - } - - } - - - // RTL - .k-rtl .k-tabstrip, - .k-tabstrip[dir="rtl"] { - - &.k-tabstrip-left, - &.k-tabstrip-right { - > .k-tabstrip-items-wrapper { - order: 1; - } - - > .k-content { order: 0; } - > .k-tabstrip-content { order: 0; } - } - - } - - // TabStrip sizes - @each $size, $size-props in $kendo-tabstrip-sizes { - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_item-padding-x: map.get( $size-props, item-padding-x ); - $_item-padding-y: map.get( $size-props, item-padding-y ); - - .k-tabstrip-#{$size} { - .k-tabstrip-items .k-link { - font-size: $_font-size; - line-height: $_line-height; - padding-block: $_item-padding-y; - padding-inline: $_item-padding-x; - } - - :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){ - &::before, - &::after { - height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) ); - } - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/tabstrip/_layout.scss" as *; @mixin kendo-tabstrip--layout() { diff --git a/packages/default/scss/tabstrip/_theme.scss b/packages/default/scss/tabstrip/_theme.scss index d01a89cd02d..9621d915e91 100644 --- a/packages/default/scss/tabstrip/_theme.scss +++ b/packages/default/scss/tabstrip/_theme.scss @@ -1,154 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-tabstrip--theme-base() { - - // Wrapper - .k-tabstrip-wrapper { - @include fill( - $kendo-tabstrip-wrapper-text, - $kendo-tabstrip-wrapper-bg, - $kendo-tabstrip-wrapper-border - ); - } - - - // Items - .k-tabstrip-items-wrapper { - @include fill( - $kendo-tabstrip-text, - $kendo-tabstrip-bg, - $kendo-tabstrip-border - ); - - .k-item { - @include fill( - $kendo-tabstrip-item-text, - $kendo-tabstrip-item-bg, - $kendo-tabstrip-item-border, - $kendo-tabstrip-item-gradient - ); - - &:hover, - &.k-hover { - @include fill( - $kendo-tabstrip-item-hover-text, - $kendo-tabstrip-item-hover-bg, - $kendo-tabstrip-item-hover-border, - $kendo-tabstrip-item-hover-gradient - ); - } - - &:active, - &.k-active, - &.k-selected { - @include fill( - $kendo-tabstrip-item-selected-text, - $kendo-tabstrip-item-selected-bg, - $kendo-tabstrip-item-selected-border, - $kendo-tabstrip-item-selected-gradient - ); - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-tabstrip-item-focus-shadow, true ); - } - - &.k-tabstrip-dragging { - @include focus-indicator( $kendo-tabstrip-item-dragging-shadow ); - } - - - // Disabled - &.k-disabled, - &[disabled] { - @include fill( - $kendo-tabstrip-item-disabled-text, - $kendo-tabstrip-item-disabled-bg, - $kendo-tabstrip-item-disabled-border, - $kendo-tabstrip-item-disabled-gradient - ); - } - } - - } - - - // Content - .k-tabstrip-content, - .k-tabstrip > .k-content { - @include fill( - $kendo-tabstrip-content-text, - $kendo-tabstrip-content-bg, - $kendo-tabstrip-content-border - ); - - &:focus, - &.k-focus { - outline-color: $kendo-tabstrip-content-focus-border; - } - } - - - // Selected indicator - @if ($kendo-tabstrip-indicator-size) { - - .k-tabstrip-items-wrapper { - .k-item.k-active::after { - border-color: $kendo-tabstrip-indicator-color; - } - } - } - - // Scrolling - .k-tabstrip-scrollable-overlay { - &.k-tabstrip-top, - &.k-tabstrip-bottom { - .k-tabstrip-items-wrapper { - &::before { - background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); - } - - &::after { - background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); - } - } - } - - &.k-tabstrip-left, - &.k-tabstrip-right { - .k-tabstrip-items-wrapper { - &::before { - background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay); - } - - &::after { - background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay); - } - } - } - } - - // RTL - .k-rtl, - [dir="rtl"] { - &.k-tabstrip-scrollable-overlay { - &.k-tabstrip-top, - &.k-tabstrip-bottom { - .k-tabstrip-items-wrapper { - &::before { - background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay); - } - - &::after { - background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay); - } - } - } - } - } -} +@use "@progress/kendo-theme-core/scss/components/tabstrip/_theme.scss" as *; @mixin kendo-tabstrip--theme() { diff --git a/packages/default/scss/tabstrip/_variables.scss b/packages/default/scss/tabstrip/_variables.scss index 4ec0bc3ab91..53bd9980ab0 100644 --- a/packages/default/scss/tabstrip/_variables.scss +++ b/packages/default/scss/tabstrip/_variables.scss @@ -226,3 +226,68 @@ $kendo-tabstrip-sizes: ( item-padding-y: $kendo-tabstrip-lg-item-padding-y ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/tabstrip/_variables.scss" with ( + $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x, + $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y, + $kendo-tabstrip-wrapper-border-width: $kendo-tabstrip-wrapper-border-width, + $kendo-tabstrip-font-family: $kendo-tabstrip-font-family, + $kendo-tabstrip-font-size: $kendo-tabstrip-font-size, + $kendo-tabstrip-line-height: $kendo-tabstrip-line-height, + $kendo-tabstrip-border-width: $kendo-tabstrip-border-width, + $kendo-tabstrip-sm-font-size: $kendo-tabstrip-sm-font-size, + $kendo-tabstrip-sm-line-height: $kendo-tabstrip-sm-line-height, + $kendo-tabstrip-md-font-size: $kendo-tabstrip-md-font-size, + $kendo-tabstrip-md-line-height: $kendo-tabstrip-md-line-height, + $kendo-tabstrip-lg-font-size: $kendo-tabstrip-lg-font-size, + $kendo-tabstrip-lg-line-height: $kendo-tabstrip-lg-line-height, + $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg, + $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text, + $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border, + $kendo-tabstrip-bg: $kendo-tabstrip-bg, + $kendo-tabstrip-text: $kendo-tabstrip-text, + $kendo-tabstrip-border: $kendo-tabstrip-border, + $kendo-tabstrip-item-padding-x: $kendo-tabstrip-item-padding-x, + $kendo-tabstrip-item-padding-y: $kendo-tabstrip-item-padding-y, + $kendo-tabstrip-item-border-width: $kendo-tabstrip-item-border-width, + $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius, + $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap, + $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x, + $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y, + $kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-md-item-padding-x, + $kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-md-item-padding-y, + $kendo-tabstrip-lg-item-padding-x: $kendo-tabstrip-lg-item-padding-x, + $kendo-tabstrip-lg-item-padding-y: $kendo-tabstrip-lg-item-padding-y, + $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg, + $kendo-tabstrip-item-text: $kendo-tabstrip-item-text, + $kendo-tabstrip-item-border: $kendo-tabstrip-item-border, + $kendo-tabstrip-item-gradient: $kendo-tabstrip-item-gradient, + $kendo-tabstrip-item-hover-bg: $kendo-tabstrip-item-hover-bg, + $kendo-tabstrip-item-hover-text: $kendo-tabstrip-item-hover-text, + $kendo-tabstrip-item-hover-border: $kendo-tabstrip-item-hover-border, + $kendo-tabstrip-item-hover-gradient: $kendo-tabstrip-item-hover-gradient, + $kendo-tabstrip-item-selected-bg: $kendo-tabstrip-item-selected-bg, + $kendo-tabstrip-item-selected-text: $kendo-tabstrip-item-selected-text, + $kendo-tabstrip-item-selected-border: $kendo-tabstrip-item-selected-border, + $kendo-tabstrip-item-selected-gradient: $kendo-tabstrip-item-selected-gradient, + $kendo-tabstrip-item-selected-font-weight: $kendo-tabstrip-item-selected-font-weight, + $kendo-tabstrip-item-focus-shadow: $kendo-tabstrip-item-focus-shadow, + $kendo-tabstrip-item-dragging-shadow: $kendo-tabstrip-item-dragging-shadow, + $kendo-tabstrip-item-disabled-bg: $kendo-tabstrip-item-disabled-bg, + $kendo-tabstrip-item-disabled-text: $kendo-tabstrip-item-disabled-text, + $kendo-tabstrip-item-disabled-border: $kendo-tabstrip-item-disabled-border, + $kendo-tabstrip-item-disabled-gradient: $kendo-tabstrip-item-disabled-gradient, + $kendo-tabstrip-item-disabled-opacity: $kendo-tabstrip-item-disabled-opacity, + $kendo-tabstrip-item-disabled-filter: $kendo-tabstrip-item-disabled-filter, + $kendo-tabstrip-indicator-size: $kendo-tabstrip-indicator-size, + $kendo-tabstrip-indicator-color: $kendo-tabstrip-indicator-color, + $kendo-tabstrip-content-padding-x: $kendo-tabstrip-content-padding-x, + $kendo-tabstrip-content-padding-y: $kendo-tabstrip-content-padding-y, + $kendo-tabstrip-content-border-width: $kendo-tabstrip-content-border-width, + $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg, + $kendo-tabstrip-content-text: $kendo-tabstrip-content-text, + $kendo-tabstrip-content-border: $kendo-tabstrip-content-border, + $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border, + $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay, + $kendo-tabstrip-sizes: $kendo-tabstrip-sizes +); diff --git a/packages/default/scss/taskboard/_layout.scss b/packages/default/scss/taskboard/_layout.scss index 3349b1b7df5..5ed7d59df05 100644 --- a/packages/default/scss/taskboard/_layout.scss +++ b/packages/default/scss/taskboard/_layout.scss @@ -1,220 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-task-board--layout-base() { - - // TaskBoard - .k-taskboard { - padding-block: $kendo-taskboard-padding-y; - padding-inline: $kendo-taskboard-padding-x; - box-sizing: border-box; - font-size: $kendo-taskboard-font-size; - font-family: $kendo-taskboard-font-family; - line-height: $kendo-taskboard-line-height; - display: flex; - flex-direction: column; - position: relative; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - // Toolbar - .k-taskboard-toolbar { - padding-block: $kendo-taskboard-toolbar-padding-y; - padding-inline: $kendo-taskboard-toolbar-padding-x; - border-width: 0; - box-shadow: none; - background: none; - } - - // Content - .k-taskboard-content { - padding: 0 $kendo-taskboard-toolbar-padding-x $kendo-taskboard-content-padding-y; - display: flex; - position: relative; - flex: 1 1 auto; - overflow-x: auto; - } - - // Columns - .k-taskboard-columns-container { - outline: none; - display: flex; - flex-direction: row; - overflow: hidden; - gap: $kendo-taskboard-columns-container-gap; - overflow-x: visible; - } - - .k-taskboard-column { - width: $kendo-taskboard-column-width; - border-width: $kendo-taskboard-column-border-width; - border-radius: $kendo-taskboard-column-border-radius; - border-style: solid; - outline: none; - display: flex; - flex-direction: column; - flex-shrink: 0; - overflow: hidden; - } - - .k-taskboard-column-header { - padding-block: $kendo-taskboard-column-header-padding-y; - padding-inline: $kendo-taskboard-column-header-padding-x; - font-weight: $kendo-taskboard-column-header-font-weight; - display: flex; - flex-direction: row; - align-items: center; - gap: $kendo-taskboard-column-header-gap; - } - - .k-taskboard-column-header-actions { - display: inline-flex; - flex-shrink: 0; - align-self: flex-start; - gap: $kendo-taskboard-column-header-actions-gap; - } - - .k-taskboard-column-cards-container { - margin-bottom: $kendo-taskboard-column-container-spacing-y; - padding-block: $kendo-taskboard-column-container-padding-y; - padding-inline: $kendo-taskboard-column-container-padding-x; - outline: none; - overflow: auto; - flex: 1 1 auto; - } - - .k-taskboard-column-cards { - padding-block: $kendo-taskboard-column-cards-padding-y; - padding-inline: $kendo-taskboard-column-cards-padding-x; - min-height: 100%; - display: flex; - flex-direction: column; - gap: $kendo-taskboard-column-cards-gap 0; - } - - // Edit/New Columns - .k-taskboard-column-new { - // TODO: we need better way - // max-height: $kendo-taskboard-column-new-calc-height; - } - - .k-taskboard-column-new, - .k-taskboard-column-edit { - .k-taskboard-column-header { - font-weight: inherit; - } - - .k-taskboard-column-header-text { - flex: 1 1 100%; - } - } - - // Preview/Edit Pane - .k-taskboard-pane { - padding-block: $kendo-taskboard-pane-padding-y; - padding-inline: $kendo-taskboard-pane-padding-x; - width: $kendo-taskboard-pane-width; - border-width: $kendo-taskboard-pane-border-width; - border-style: solid; - display: flex; - flex-direction: column; - position: absolute; - top: 0; - right: 0; - bottom: 0; - overflow: hidden; - z-index: 2; - } - - .k-taskboard-pane-header { - padding-block: $kendo-taskboard-pane-header-padding-y; - padding-inline: $kendo-taskboard-pane-header-padding-x; - font-weight: $kendo-taskboard-pane-header-font-weight; - display: flex; - flex-direction: row; - align-items: center; - } - - .k-taskboard-pane-header-text { - word-break: normal; - overflow-wrap: anywhere; - } - - .k-taskboard-pane-header-actions { - flex-shrink: 0; - align-self: flex-start; - } - - .k-taskboard-pane-content { - padding-block: $kendo-taskboard-pane-content-padding-y; - padding-inline: $kendo-taskboard-pane-content-padding-x; - overflow: auto; - flex: 1 1 auto; - } - - .k-taskboard-pane-actions { - padding-block: $kendo-taskboard-pane-actions-padding-y; - padding-inline: $kendo-taskboard-pane-actions-padding-x; - } - - .k-taskboard-pane-start { - right: auto; - left: 0; - } - - // Cards - .k-taskboard-card { - @include border-radius( $kendo-taskboard-card-border-radius ); - border-width: $kendo-taskboard-card-border-width; - - &.k-taskboard-card-category { - border-inline-start-width: $kendo-taskboard-card-category-border-width; - } - - .k-card-header - .k-card-body, - .k-card-footer { - padding-block: $kendo-taskboard-card-padding-y; - padding-inline: $kendo-taskboard-card-padding-x; - } - - .k-card-header { - align-items: center; - } - - .k-card-title { - font-size: inherit; - font-weight: inherit; - word-break: normal; - overflow-wrap: anywhere; - - &:focus, - &.k-focus, - &:hover, - &.k-hover { - text-decoration: underline; - } - } - - .k-card-header-actions { - align-self: flex-start; - } - } - - // Card Drag Placeholder - .k-taskboard-drag-placeholder { - @include border-radius( $kendo-taskboard-drag-placeholder-border-radius ); - border-width: $kendo-taskboard-drag-placeholder-border-width; - border-style: solid; - position: relative; - } - -} +@use "@progress/kendo-theme-core/scss/components/taskboard/_layout.scss" as *; @mixin kendo-task-board--layout() { diff --git a/packages/default/scss/taskboard/_theme.scss b/packages/default/scss/taskboard/_theme.scss index 8b6e066da1b..79a2a561040 100644 --- a/packages/default/scss/taskboard/_theme.scss +++ b/packages/default/scss/taskboard/_theme.scss @@ -1,114 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-task-board--theme-base() { - - // TaskBoard - .k-taskboard { - @include fill( - $kendo-taskboard-text, - $kendo-taskboard-bg, - $kendo-taskboard-border - ); - } - - // Toolbar - .k-taskboard-toolbar { - @include fill( - $kendo-taskboard-toolbar-text, - $kendo-taskboard-toolbar-bg, - $kendo-taskboard-toolbar-border, - $kendo-taskboard-toolbar-gradient - ); - } - - // Columns - .k-taskboard-column { - @include fill( - $kendo-taskboard-column-text, - $kendo-taskboard-column-bg, - $kendo-taskboard-column-border - ); - } - .k-taskboard-column:focus, - .k-taskboard-column.k-focus { - @include fill( - $kendo-taskboard-column-focus-text, - $kendo-taskboard-column-focus-bg, - $kendo-taskboard-column-focus-border - ); - } - - .k-taskboard-column-header { - @include fill( $color: $kendo-taskboard-column-header-text ); - } - - // Preview/Edit Pane - .k-taskboard-pane { - @include fill ( - $kendo-taskboard-pane-text, - $kendo-taskboard-pane-bg, - $kendo-taskboard-pane-border - ); - } - - .k-taskboard-pane-header { - @include fill( $color: $kendo-taskboard-pane-header-text ); - } - - // Cards - .k-taskboard-card { - @include fill( - $kendo-taskboard-card-text, - $kendo-taskboard-card-bg, - $kendo-taskboard-card-border - ); - @include box-shadow( $kendo-taskboard-card-shadow ); - - .k-card-title { - @include fill( $color: $kendo-taskboard-card-header-text ); - - &:focus, - &.k-focus { - @include fill( $color: $kendo-taskboard-card-header-focus-text ); - } - - &:hover, - &.k-hover { - @include fill( $color: $kendo-taskboard-card-header-hover-text ); - } - } - - &:focus, - &.k-focus { - @include focus-indicator( $kendo-taskboard-card-focus-shadow ); - @include fill( $border: $kendo-taskboard-card-focus-border ); - } - - &:hover, - &.k-hover { - @include fill( $border: $kendo-taskboard-card-hover-border ); - } - - &.k-selected { - @include fill( $border: $kendo-taskboard-card-selected-border ); - @include box-shadow( $kendo-taskboard-card-selected-shadow ); - } - - &.k-disabled { - @include disabled( $kendo-disabled-styling... ); - } - } - - // Card Drag Placeholder - .k-taskboard-drag-placeholder { - @include fill( - $bg: $kendo-taskboard-drag-placeholder-bg, - $border: $kendo-taskboard-drag-placeholder-border - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/taskboard/_theme.scss" as *; @mixin kendo-task-board--theme() { diff --git a/packages/default/scss/taskboard/_variables.scss b/packages/default/scss/taskboard/_variables.scss index 154b5fdb878..88c28623ccd 100644 --- a/packages/default/scss/taskboard/_variables.scss +++ b/packages/default/scss/taskboard/_variables.scss @@ -247,3 +247,81 @@ $kendo-taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default; /// The border color of the TaskBoard Card placeholder. /// @group taskboard $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default; + +@forward "@progress/kendo-theme-core/scss/components/taskboard/_variables.scss" with ( + $kendo-taskboard-spacer: $kendo-taskboard-spacer, + $kendo-taskboard-padding-y: $kendo-taskboard-padding-y, + $kendo-taskboard-padding-x: $kendo-taskboard-padding-x, + $kendo-taskboard-font-family: $kendo-taskboard-font-family, + $kendo-taskboard-font-size: $kendo-taskboard-font-size, + $kendo-taskboard-line-height: $kendo-taskboard-line-height, + $kendo-taskboard-bg: $kendo-taskboard-bg, + $kendo-taskboard-text: $kendo-taskboard-text, + $kendo-taskboard-border: $kendo-taskboard-border, + $kendo-taskboard-toolbar-padding-y: $kendo-taskboard-toolbar-padding-y, + $kendo-taskboard-toolbar-padding-x: $kendo-taskboard-toolbar-padding-x, + $kendo-taskboard-toolbar-bg: $kendo-taskboard-toolbar-bg, + $kendo-taskboard-toolbar-text: $kendo-taskboard-toolbar-text, + $kendo-taskboard-toolbar-border: $kendo-taskboard-toolbar-border, + $kendo-taskboard-toolbar-gradient: $kendo-taskboard-toolbar-gradient, + $kendo-taskboard-content-padding-y: $kendo-taskboard-content-padding-y, + $kendo-taskboard-content-padding-x: $kendo-taskboard-content-padding-x, + $kendo-taskboard-column-container-spacing-y: $kendo-taskboard-column-container-spacing-y, + $kendo-taskboard-column-container-padding-y: $kendo-taskboard-column-container-padding-y, + $kendo-taskboard-column-container-padding-x: $kendo-taskboard-column-container-padding-x, + $kendo-taskboard-columns-container-gap: $kendo-taskboard-columns-container-gap, + $kendo-taskboard-column-width: $kendo-taskboard-column-width, + $kendo-taskboard-column-border-width: $kendo-taskboard-column-border-width, + $kendo-taskboard-column-border-radius: $kendo-taskboard-column-border-radius, + $kendo-taskboard-column-bg: $kendo-taskboard-column-bg, + $kendo-taskboard-column-text: $kendo-taskboard-column-text, + $kendo-taskboard-column-border: $kendo-taskboard-column-border, + $kendo-taskboard-column-focus-bg: $kendo-taskboard-column-focus-bg, + $kendo-taskboard-column-focus-text: $kendo-taskboard-column-focus-text, + $kendo-taskboard-column-focus-border: $kendo-taskboard-column-focus-border, + $kendo-taskboard-column-header-padding-y: $kendo-taskboard-column-header-padding-y, + $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-x, + $kendo-taskboard-column-header-gap: $kendo-taskboard-column-header-gap, + $kendo-taskboard-column-header-actions-gap: $kendo-taskboard-column-header-actions-gap, + $kendo-taskboard-column-header-font-weight: $kendo-taskboard-column-header-font-weight, + $kendo-taskboard-column-header-text: $kendo-taskboard-column-header-text, + $kendo-taskboard-column-cards-padding-y: $kendo-taskboard-column-cards-padding-y, + $kendo-taskboard-column-cards-padding-x: $kendo-taskboard-column-cards-padding-x, + $kendo-taskboard-column-cards-gap: $kendo-taskboard-column-cards-gap, + $kendo-taskboard-pane-width: $kendo-taskboard-pane-width, + $kendo-taskboard-pane-padding-y: $kendo-taskboard-pane-padding-y, + $kendo-taskboard-pane-padding-x: $kendo-taskboard-pane-padding-x, + $kendo-taskboard-pane-border-width: $kendo-taskboard-pane-border-width, + $kendo-taskboard-pane-bg: $kendo-taskboard-pane-bg, + $kendo-taskboard-pane-text: $kendo-taskboard-pane-text, + $kendo-taskboard-pane-border: $kendo-taskboard-pane-border, + $kendo-taskboard-pane-header-padding-y: $kendo-taskboard-pane-header-padding-y, + $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-pane-header-padding-x, + $kendo-taskboard-pane-header-font-weight: $kendo-taskboard-pane-header-font-weight, + $kendo-taskboard-pane-header-text: $kendo-taskboard-pane-header-text, + $kendo-taskboard-pane-content-padding-y: $kendo-taskboard-pane-content-padding-y, + $kendo-taskboard-pane-content-padding-x: $kendo-taskboard-pane-content-padding-x, + $kendo-taskboard-pane-actions-padding-y: $kendo-taskboard-pane-actions-padding-y, + $kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-pane-actions-padding-x, + $kendo-taskboard-card-padding-y: $kendo-taskboard-card-padding-y, + $kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-x, + $kendo-taskboard-card-border-width: $kendo-taskboard-card-border-width, + $kendo-taskboard-card-border-radius: $kendo-taskboard-card-border-radius, + $kendo-taskboard-card-shadow: $kendo-taskboard-card-shadow, + $kendo-taskboard-card-bg: $kendo-taskboard-card-bg, + $kendo-taskboard-card-text: $kendo-taskboard-card-text, + $kendo-taskboard-card-border: $kendo-taskboard-card-border, + $kendo-taskboard-card-category-border-width: $kendo-taskboard-card-category-border-width, + $kendo-taskboard-card-hover-border: $kendo-taskboard-card-hover-border, + $kendo-taskboard-card-focus-border: $kendo-taskboard-card-focus-border, + $kendo-taskboard-card-focus-shadow: $kendo-taskboard-card-focus-shadow, + $kendo-taskboard-card-selected-border: $kendo-taskboard-card-selected-border, + $kendo-taskboard-card-selected-shadow: $kendo-taskboard-card-selected-shadow, + $kendo-taskboard-card-header-text: $kendo-taskboard-card-header-text, + $kendo-taskboard-card-header-hover-text: $kendo-taskboard-card-header-hover-text, + $kendo-taskboard-card-header-focus-text: $kendo-taskboard-card-header-focus-text, + $kendo-taskboard-drag-placeholder-border-width: $kendo-taskboard-drag-placeholder-border-width, + $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-drag-placeholder-border-radius, + $kendo-taskboard-drag-placeholder-bg: $kendo-taskboard-drag-placeholder-bg, + $kendo-taskboard-drag-placeholder-border: $kendo-taskboard-drag-placeholder-border +); diff --git a/packages/default/scss/textarea/_layout.scss b/packages/default/scss/textarea/_layout.scss index af17b749cb8..3097e76a6bd 100644 --- a/packages/default/scss/textarea/_layout.scss +++ b/packages/default/scss/textarea/_layout.scss @@ -1,11 +1,4 @@ -@mixin kendo-textarea--layout-base() { - - // Textarea - .k-textarea:has(.k-input-inner[style*="width"]) { - width: max-content; - } - -} +@use "@progress/kendo-theme-core/scss/components/textarea/_layout.scss" as *; @mixin kendo-textarea--layout() { diff --git a/packages/default/scss/textarea/_theme.scss b/packages/default/scss/textarea/_theme.scss index 68116ea1d5e..5805f650927 100644 --- a/packages/default/scss/textarea/_theme.scss +++ b/packages/default/scss/textarea/_theme.scss @@ -1,11 +1,6 @@ -@mixin kendo-textarea--theme-base() { - - // Textarea - .k-textarea {} - -} +@use "@progress/kendo-theme-core/scss/components/textarea/_theme.scss" as *; @mixin kendo-textarea--theme() { - @include kendo-textarea--theme-base(); + @include kendo-textarea--theme-base(); } diff --git a/packages/default/scss/textbox/_layout.scss b/packages/default/scss/textbox/_layout.scss index 76408cebf56..6143f65bdea 100644 --- a/packages/default/scss/textbox/_layout.scss +++ b/packages/default/scss/textbox/_layout.scss @@ -1,9 +1,4 @@ -@mixin kendo-textbox--layout-base() { - - // Textbox - .k-textbox {} - -} +@use "@progress/kendo-theme-core/scss/components/textbox/_layout.scss" as *; @mixin kendo-textbox--layout() { diff --git a/packages/default/scss/textbox/_theme.scss b/packages/default/scss/textbox/_theme.scss index a16a77579d0..bdf8d50f733 100644 --- a/packages/default/scss/textbox/_theme.scss +++ b/packages/default/scss/textbox/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-textbox--theme-base() { - - // Textbox - .k-textbox {} - -} +@use "@progress/kendo-theme-core/scss/components/textbox/_theme.scss" as *; @mixin kendo-textbox--theme() { diff --git a/packages/default/scss/tilelayout/_layout.scss b/packages/default/scss/tilelayout/_layout.scss index 40b0ce64644..fe98a587d60 100644 --- a/packages/default/scss/tilelayout/_layout.scss +++ b/packages/default/scss/tilelayout/_layout.scss @@ -1,50 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-tile-layout--layout-base() { - - .k-tilelayout { - border-width: $kendo-tile-layout-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - display: grid; - position: relative; - padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - .k-card { - @include box-shadow( none ); - border-width: $kendo-tile-layout-card-border-width; - } - } - - .k-tilelayout-item { - position: relative; - z-index: 0; - } - - .k-layout-item-hint { - @include border-radius( $kendo-tile-layout-hint-border-radius ); - border-width: $kendo-tile-layout-hint-border-width; - border-style: solid; - position: relative; - - &.k-layout-item-hint-resize { - z-index: 3; - } - } - - .k-tilelayout-item-header.k-card-header { - z-index: 0; - } - - .k-tilelayout-item-body { - min-height: 0; - } - -} +@use "@progress/kendo-theme-core/scss/components/tilelayout/_layout.scss" as *; @mixin kendo-tile-layout--layout() { diff --git a/packages/default/scss/tilelayout/_theme.scss b/packages/default/scss/tilelayout/_theme.scss index 9ddec5168e2..988584a8634 100644 --- a/packages/default/scss/tilelayout/_theme.scss +++ b/packages/default/scss/tilelayout/_theme.scss @@ -1,27 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-tile-layout--theme-base() { - - .k-tilelayout { - @include fill( - $bg: $kendo-tile-layout-bg - ); - } - - .k-tilelayout-item:focus, - .k-tilelayout-item.k-focus { - @include focus-indicator($kendo-tile-layout-card-focus-shadow); - } - - .k-layout-item-hint { - @include fill( - $bg: $kendo-tile-layout-hint-bg, - $border: $kendo-tile-layout-hint-border - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/tilelayout/_theme.scss" as *; @mixin kendo-tile-layout--theme() { diff --git a/packages/default/scss/tilelayout/_variables.scss b/packages/default/scss/tilelayout/_variables.scss index 2b26ba6a001..87ad8d79613 100644 --- a/packages/default/scss/tilelayout/_variables.scss +++ b/packages/default/scss/tilelayout/_variables.scss @@ -40,3 +40,16 @@ $kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default; + +@forward "@progress/kendo-theme-core/scss/components/tilelayout/_variables.scss" with ( + $kendo-tile-layout-border-width: $kendo-tile-layout-border-width, + $kendo-tile-layout-bg: $kendo-tile-layout-bg, + $kendo-tile-layout-padding-x: $kendo-tile-layout-padding-x, + $kendo-tile-layout-padding-y: $kendo-tile-layout-padding-y, + $kendo-tile-layout-card-border-width: $kendo-tile-layout-card-border-width, + $kendo-tile-layout-card-focus-shadow: $kendo-tile-layout-card-focus-shadow, + $kendo-tile-layout-hint-border-width: $kendo-tile-layout-hint-border-width, + $kendo-tile-layout-hint-border-radius: $kendo-tile-layout-hint-border-radius, + $kendo-tile-layout-hint-border: $kendo-tile-layout-hint-border, + $kendo-tile-layout-hint-bg: $kendo-tile-layout-hint-bg +); diff --git a/packages/default/scss/time-marker/_layout.scss b/packages/default/scss/time-marker/_layout.scss index 09ce0267f07..2e696fa2780 100644 --- a/packages/default/scss/time-marker/_layout.scss +++ b/packages/default/scss/time-marker/_layout.scss @@ -1,22 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-time-marker--layout-base() { - - .k-current-time { - width: $kendo-current-time-width; - position: absolute; - - &.k-current-time-arrow-left, - &.k-current-time-arrow-right, - &.k-current-time-arrow-down { - width: 0; - height: 0; - background: transparent; - border: 4px solid transparent; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/time-marker/_layout.scss" as *; @mixin kendo-time-marker--layout() { @include kendo-time-marker--layout-base(); diff --git a/packages/default/scss/time-marker/_theme.scss b/packages/default/scss/time-marker/_theme.scss index 667177fca6f..f2bdb6f525e 100644 --- a/packages/default/scss/time-marker/_theme.scss +++ b/packages/default/scss/time-marker/_theme.scss @@ -1,24 +1,4 @@ -@use "./_variables.scss" as *; - -@mixin kendo-time-marker--theme-base() { - - .k-current-time { - background: $kendo-current-time-color; - - &.k-current-time-arrow-left { - border-right-color: $kendo-current-time-color; - } - - &.k-current-time-arrow-right { - border-left-color: $kendo-current-time-color; - } - - &.k-current-time-arrow-down { - border-top-color: $kendo-current-time-color; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/time-marker/_theme.scss" as *; @mixin kendo-time-marker--theme() { diff --git a/packages/default/scss/time-marker/_variables.scss b/packages/default/scss/time-marker/_variables.scss index da0464be8f0..0be9398be05 100644 --- a/packages/default/scss/time-marker/_variables.scss +++ b/packages/default/scss/time-marker/_variables.scss @@ -4,3 +4,8 @@ $kendo-current-time-width: 1px !default; /// The color of the current time indicator. /// @group time-marker $kendo-current-time-color: #ff0000 !default; + +@forward "@progress/kendo-theme-core/scss/components/time-marker/_variables.scss" with ( + $kendo-current-time-width: $kendo-current-time-width, + $kendo-current-time-color: $kendo-current-time-color +); diff --git a/packages/default/scss/timedurationpicker/_layout.scss b/packages/default/scss/timedurationpicker/_layout.scss index f417e86c4f5..68c888df641 100644 --- a/packages/default/scss/timedurationpicker/_layout.scss +++ b/packages/default/scss/timedurationpicker/_layout.scss @@ -1,15 +1,4 @@ -@mixin kendo-time-duration-picker--layout-base() { - - // Time duration picker - .k-time-duration-picker {} - - - // Legacy aliases - .k-timedurationpicker { - @extend .k-time-duration-picker; - } - -} +@use "@progress/kendo-theme-core/scss/components/timedurationpicker/_layout.scss" as *; @mixin kendo-time-duration-picker--layout() { diff --git a/packages/default/scss/timedurationpicker/_theme.scss b/packages/default/scss/timedurationpicker/_theme.scss index 65191df4ca8..d10693ff450 100644 --- a/packages/default/scss/timedurationpicker/_theme.scss +++ b/packages/default/scss/timedurationpicker/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-time-duration-picker--theme-base() { - - // Time duration picker - .k-time-duration-picker {} - -} +@use "@progress/kendo-theme-core/scss/components/timedurationpicker/_theme.scss" as *; @mixin kendo-time-duration-picker--theme() { diff --git a/packages/default/scss/timeline/_layout.scss b/packages/default/scss/timeline/_layout.scss index 47ebec45dbe..2b14f0ea5f1 100644 --- a/packages/default/scss/timeline/_layout.scss +++ b/packages/default/scss/timeline/_layout.scss @@ -1,448 +1,4 @@ -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "../icons/_variables.scss" as *; -@use "./variables.scss" as *; -@use "../card/_variables.scss" as *; - -@mixin kendo-timeline--layout-base() { - - .k-timeline { - box-sizing: border-box; - outline: 0; - font-family: $kendo-timeline-font-family; - font-size: $kendo-timeline-font-size; - line-height: $kendo-timeline-line-height; - display: block; - background-color: transparent; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after, - &::before, - &::after { - box-sizing: border-box; - } - - ul { - margin: 0; - padding: 0; - - li { - list-style-type: none; - } - } - - .k-timeline-flag { - display: inline-block; - text-align: center; - padding-block: $kendo-timeline-flag-padding-y; - padding-inline: $kendo-timeline-flag-padding-x; - border-radius: k-border-radius(md); - line-height: $kendo-timeline-flag-line-height; - min-width: $kendo-timeline-flag-min-width; - max-width: $kendo-timeline-flag-max-width; - position: relative; - z-index: 1; - } - - .k-timeline-circle { - width: $kendo-timeline-circle-width; - height: $kendo-timeline-circle-height; - border-radius: 50%; - flex-shrink: 0; - position: relative; - z-index: 1; - } - - &.k-timeline-dates-hidden { - .k-timeline-date { - display: none; - } - } - - &.k-timeline-collapsible { - .k-card-header { - cursor: pointer; - } - - .k-event-collapse { - display: flex; - } - } - } - - .k-timeline-card { - .k-card { - position: relative; - overflow: visible; - - .k-card-header { - overflow: visible; - border-bottom: 0; - } - - .k-card-header + .k-card-body { - padding-top: 0; - } - - .k-card-body { - overflow-y: auto; - - // Scrollbar styles for Mozilla - scrollbar-width: thin; - - // Scrollbar styles for Chrome, Safari and Opera - &::-webkit-scrollbar { - width: 5px; - } - - &::-webkit-scrollbar-thumb { - border-radius: k-border-radius(md); - } - } - } - - .k-timeline-card-callout { - &.k-callout-w, - &.k-callout-e { - top: $kendo-timeline-track-event-offset; - } - } - } - - .k-timeline-vertical, - .k-timeline-horizontal { - padding-block: 0; - padding-inline: $kendo-timeline-spacing-x; - margin-block: $kendo-timeline-spacing-y; - margin-inline: 0; - width: 100%; - position: relative; - border: 0; - } - - .k-timeline-vertical, - .k-timeline-horizontal .k-timeline-track-wrap { - &::after { - content: ""; - position: absolute; - top: 0; - border-width: $kendo-timeline-track-border-width; - border-style: solid; - } - } - - .k-timeline-vertical { - padding-left: $kendo-timeline-vertical-padding-with-dates-calc; - - &.k-timeline-dates-hidden { - padding-left: $kendo-timeline-vertical-padding-calc; - } - - &::after { - height: 100%; - width: $kendo-timeline-track-size; - transform: translateX(-50%); - border-radius: k-border-radius(lg); - } - - .k-timeline-flag-wrap { - display: flex; - align-items: center; - - &:first-child { - padding-top: $kendo-timeline-spacing-y; - } - } - - .k-timeline-flag { - transform: translateX(-50%); - } - - .k-timeline-date-wrap { - position: absolute; - padding-right: $kendo-timeline-items-padding; - margin-top: $kendo-timeline-track-event-offset; - transform: translate(-100%, -50%); - text-align: end; - } - - .k-timeline-event { - display: flex; - align-items: flex-start; - padding-block: $kendo-timeline-spacing-y; - padding-inline: 0; - } - - .k-timeline-card { - padding-left: $kendo-timeline-items-padding; - - .k-card { - margin-left: $kendo-timeline-items-padding; - min-height: $kendo-timeline-event-min-height-calc; - width: $kendo-timeline-event-width; - max-width: 100%; - - .k-card-header { - border-radius: $kendo-card-border-radius; // In vertical collapsed mode there shold be a bottom border radius - } - - .k-card-title { - display: flex; - justify-content: space-between; - - .k-event-title { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - } - } - - .k-event-collapse { - margin-block: calc( #{$kendo-icon-spacing} * -1 ); - margin-inline: 0; - transform: rotate(90deg); - transition: transform .2s ease-in-out; - } - - &.k-collapsed { - .k-card-body, - .k-card-actions { - display: none; - } - - .k-event-collapse { - transform: rotate(0deg); - } - } - - } - - .k-timeline-circle { - margin-top: $kendo-timeline-track-event-offset; - transform: translate(-50%, -50%); - margin-right: - math.div( $kendo-timeline-circle-width, 2 ); - } - - &.k-timeline-alternating { - padding-left: $kendo-timeline-spacing-x; - - &::after { - left: 50%; - } - - .k-timeline-flag-wrap { - justify-content: center; - } - - .k-timeline-flag { - transform: translateX(0); - } - - .k-timeline-event { - justify-content: space-between; - - &.k-reverse { - flex-direction: row-reverse; - - .k-timeline-date-wrap { - text-align: start; - padding-right: 0; - padding-left: $kendo-timeline-items-padding; - } - - .k-timeline-card { - padding-left: 0; - padding-right: $kendo-timeline-items-padding; - - .k-card { - margin-right: $kendo-timeline-items-padding; - margin-left: auto; - } - } - } - } - - .k-timeline-card, - .k-timeline-date-wrap { - flex-basis: 50%; - min-width: 0; - } - - .k-timeline-date-wrap { - position: static; - transform: translateY(-50%); - } - - .k-timeline-circle { - transform: translateY(-50%); - margin-right: 0; - } - } - } - - .k-timeline-horizontal { - - .k-timeline-track-item { - flex: 1 0 20%; // 20% are default, this will be calculated when rendered - display: flex; - align-items: center; - justify-content: flex-start; - position: relative; - flex-direction: column; - - &:hover { - cursor: pointer; - } - - &.k-timeline-flag-wrap:hover { - cursor: default; - } - } - - .k-timeline-date-wrap { - margin-top: auto; - margin-bottom: $kendo-timeline-date-margin-bottom; - } - - .k-timeline-card { - height: 100%; - } - - .k-card { - max-height: 100%; - } - - .k-timeline-events-list { - overflow-x: hidden; - padding-top: $kendo-timeline-track-margin-bottom; - - .k-timeline-scrollable-wrap { - position: relative; - height: $kendo-timeline-event-height; - - .k-timeline-event { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - } - - .k-timeline-track-wrap { - position: relative; - padding: calc( #{$kendo-timeline-track-arrow-height} / 2 ) 0; - - &::after { - top: auto; - bottom: $kendo-timeline-track-bottom-calc; - left: $kendo-timeline-track-start-calc; - right: $kendo-timeline-track-end-calc; - transform: translateY(-50%); - height: $kendo-timeline-track-size; - } - - .k-timeline-track { - overflow: hidden; - margin-block: 0; - margin-inline: $kendo-timeline-track-arrow-width; - position: relative; - z-index: 2; - - .k-timeline-scrollable-wrap { - transition: transform 1s ease-in-out; - } - } - - .k-timeline-flag { - margin-bottom: $kendo-timeline-flag-margin-bottom-calc; - position: relative; - min-width: $kendo-timeline-horizontal-flag-min-width; - - &::after { - content: ""; - width: $kendo-timeline-flag-callout-width; - height: $kendo-timeline-flag-callout-height; - position: absolute; - left: 50%; - bottom: 0; - transform: translate(-50%, 50%) rotate(45deg); - } - } - } - - .k-timeline-scrollable-wrap { - padding-bottom: $kendo-timeline-track-wrap-padding-bottom; - display: flex; - outline: 0; - } - } - - .k-timeline-arrow { - width: $kendo-timeline-track-arrow-width; - height: $kendo-timeline-track-arrow-height; - border-radius: 50%; - position: absolute; - bottom: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width}); - z-index: 3; - display: flex; - align-items: center; - justify-content: center; - } - - .k-timeline-arrow-left { - left: 0; - } - - .k-timeline-arrow-right { - right: 0; - } - - .k-timeline-mobile { - padding-block: 0; - padding-inline: $kendo-timeline-mobile-spacing-x; - margin-block: $kendo-timeline-mobile-spacing-y; - margin-inline: 0; - - .k-timeline-flag { - max-width: $kendo-timeline-mobile-flag-max-width; - } - - &.k-timeline-horizontal { - .k-timeline-flag-wrap { - display: none; - } - } - - &.k-timeline-vertical { - padding-left: $kendo-timeline-mobile-vertical-padding-with-dates-calc; - - &.k-timeline-dates-hidden { - padding-left: $kendo-timeline-mobile-vertical-padding-calc; - } - - &.k-timeline-alternating { - padding-left: $kendo-timeline-mobile-spacing-x; - } - - .k-timeline-card { - width: 100%; - - - .k-card { - width: auto; - } - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/timeline/_layout.scss" as *; @mixin kendo-timeline--layout() { diff --git a/packages/default/scss/timeline/_theme.scss b/packages/default/scss/timeline/_theme.scss index 49a8b4d826e..5adaa50b3c0 100644 --- a/packages/default/scss/timeline/_theme.scss +++ b/packages/default/scss/timeline/_theme.scss @@ -1,75 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../card/_variables.scss" as *; - -@mixin kendo-timeline--theme-base() { - - .k-timeline { - .k-timeline-flag { - color: $kendo-timeline-flag-text; - background-color: $kendo-timeline-flag-bg; - } - - .k-timeline-circle { - background-color: $kendo-timeline-circle-bg; - } - - .k-timeline-card { - .k-card-header { - background-color: $kendo-card-bg; - color: $kendo-card-text; - } - - .k-card-body { - - // Scrollbar styles for Mozilla - scrollbar-color: $kendo-card-border $kendo-card-bg; - - // Scrollbar styles for Chrome, Safari and Opera - &::-webkit-scrollbar-track { - background: $kendo-card-bg; - } - - &::-webkit-scrollbar-thumb { - background: $kendo-card-border; - } - - &::-webkit-scrollbar-thumb:hover { - background: $kendo-hover-border; - } - } - } - - // TODO: remove - .k-timeline-date { - color: $kendo-body-text; - } - - .k-timeline-arrow.k-disabled { - opacity: 1; // The arrow button in disabled mode should have a solid background - color: $kendo-timeline-track-arrow-disabled-text; - background-color: $kendo-timeline-track-arrow-disabled-bg; - border-color: $kendo-timeline-track-arrow-disabled-border; - } - } - - .k-timeline-vertical, - .k-timeline-horizontal .k-timeline-track-wrap { - &::after { - background-color: $kendo-timeline-track-bg; - border-color: $kendo-timeline-track-border-color; - } - } - - .k-timeline-horizontal .k-timeline-flag::after { - background-color: $kendo-timeline-flag-bg; - } - - .k-timeline-track-item.k-focus .k-timeline-circle { - @include focus-indicator( $kendo-timeline-track-item-focus-shadow ); - } - -} +@use "@progress/kendo-theme-core/scss/components/timeline/_theme.scss" as *; @mixin kendo-timeline--theme() { diff --git a/packages/default/scss/timeline/_variables.scss b/packages/default/scss/timeline/_variables.scss index 9c8f24fcef5..679a7c6c96e 100644 --- a/packages/default/scss/timeline/_variables.scss +++ b/packages/default/scss/timeline/_variables.scss @@ -170,3 +170,56 @@ $kendo-timeline-event-height: 600px !default; /// The minimum height of the Timeline event. /// @group timeline $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width})) !default; + +@forward "@progress/kendo-theme-core/scss/components/timeline/_variables.scss" with ( + $kendo-timeline-spacing-x: $kendo-timeline-spacing-x, + $kendo-timeline-spacing-y: $kendo-timeline-spacing-y, + $kendo-timeline-items-padding: $kendo-timeline-items-padding, + $kendo-timeline-font-family: $kendo-timeline-font-family, + $kendo-timeline-font-size: $kendo-timeline-font-size, + $kendo-timeline-line-height: $kendo-timeline-line-height, + $kendo-timeline-mobile-spacing-x: $kendo-timeline-mobile-spacing-x, + $kendo-timeline-mobile-spacing-y: $kendo-timeline-mobile-spacing-y, + $kendo-timeline-track-arrow-width: $kendo-timeline-track-arrow-width, + $kendo-timeline-track-arrow-height: $kendo-timeline-track-arrow-height, + $kendo-timeline-track-arrow-disabled-bg: $kendo-timeline-track-arrow-disabled-bg, + $kendo-timeline-track-arrow-disabled-text: $kendo-timeline-track-arrow-disabled-text, + $kendo-timeline-track-arrow-disabled-border: $kendo-timeline-track-arrow-disabled-border, + $kendo-timeline-track-size: $kendo-timeline-track-size, + $kendo-timeline-track-wrap-padding-bottom: $kendo-timeline-track-wrap-padding-bottom, + $kendo-timeline-track-border-width: $kendo-timeline-track-border-width, + $kendo-timeline-track-margin-bottom: $kendo-timeline-track-margin-bottom, + $kendo-timeline-track-bottom-calc: $kendo-timeline-track-bottom-calc, + $kendo-timeline-track-start-calc: $kendo-timeline-track-start-calc, + $kendo-timeline-track-end-calc: $kendo-timeline-track-end-calc, + $kendo-timeline-track-bg: $kendo-timeline-track-bg, + $kendo-timeline-track-border-color: $kendo-timeline-track-border-color, + $kendo-timeline-track-item-focus-shadow: $kendo-timeline-track-item-focus-shadow, + $kendo-timeline-track-event-offset: $kendo-timeline-track-event-offset, + $kendo-timeline-flag-padding-x: $kendo-timeline-flag-padding-x, + $kendo-timeline-flag-padding-y: $kendo-timeline-flag-padding-y, + $kendo-timeline-flag-line-height: $kendo-timeline-flag-line-height, + $kendo-timeline-flag-min-width: $kendo-timeline-flag-min-width, + $kendo-timeline-flag-max-width: $kendo-timeline-flag-max-width, + $kendo-timeline-mobile-flag-max-width: $kendo-timeline-mobile-flag-max-width, + $kendo-timeline-horizontal-flag-min-width: $kendo-timeline-horizontal-flag-min-width, + $kendo-timeline-flag-bg: $kendo-timeline-flag-bg, + $kendo-timeline-flag-text: $kendo-timeline-flag-text, + $kendo-timeline-flag-callout-width: $kendo-timeline-flag-callout-width, + $kendo-timeline-flag-callout-height: $kendo-timeline-flag-callout-height, + $kendo-timeline-flag-offset-bottom: $kendo-timeline-flag-offset-bottom, + $kendo-timeline-flag-margin-bottom-calc: $kendo-timeline-flag-margin-bottom-calc, + $kendo-timeline-date-width: $kendo-timeline-date-width, + $kendo-timeline-date-margin-bottom: $kendo-timeline-date-margin-bottom, + $kendo-timeline-vertical-padding-calc: $kendo-timeline-vertical-padding-calc, + $kendo-timeline-vertical-padding-with-dates-calc: $kendo-timeline-vertical-padding-with-dates-calc, + $kendo-timeline-mobile-vertical-padding-calc: $kendo-timeline-mobile-vertical-padding-calc, + $kendo-timeline-mobile-vertical-padding-with-dates-calc: $kendo-timeline-mobile-vertical-padding-with-dates-calc, + $kendo-timeline-circle-width: $kendo-timeline-circle-width, + $kendo-timeline-circle-height: $kendo-timeline-circle-height, + $kendo-timeline-circle-bg: $kendo-timeline-circle-bg, + $kendo-timeline-collapse-arrow-padding-x: $kendo-timeline-collapse-arrow-padding-x, + $kendo-timeline-event-width: $kendo-timeline-event-width, + $kendo-timeline-event-height: $kendo-timeline-event-height, + $kendo-timeline-event-min-height-calc: $kendo-timeline-event-min-height-calc +); diff --git a/packages/default/scss/timepicker/_layout.scss b/packages/default/scss/timepicker/_layout.scss index 6a60eca9611..2f15a2f5b75 100644 --- a/packages/default/scss/timepicker/_layout.scss +++ b/packages/default/scss/timepicker/_layout.scss @@ -1,15 +1,4 @@ -@mixin kendo-time-picker--layout-base() { - - // Time picker - .k-time-picker {} - - - // Legacy aliases - .k-timepicker { - @extend .k-time-picker !optional; - } - -} +@use "@progress/kendo-theme-core/scss/components/timepicker/_layout.scss" as *; @mixin kendo-time-picker--layout() { diff --git a/packages/default/scss/timepicker/_theme.scss b/packages/default/scss/timepicker/_theme.scss index 995aad27aea..167190d31bc 100644 --- a/packages/default/scss/timepicker/_theme.scss +++ b/packages/default/scss/timepicker/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-time-picker--theme-base() { - - // Time picker - .k-time-picker {} - -} +@use "@progress/kendo-theme-core/scss/components/timepicker/_theme.scss" as *; @mixin kendo-time-picker--theme() { diff --git a/packages/default/scss/timeselector/_layout.scss b/packages/default/scss/timeselector/_layout.scss index cade5e98553..e975955e4b2 100644 --- a/packages/default/scss/timeselector/_layout.scss +++ b/packages/default/scss/timeselector/_layout.scss @@ -1,263 +1,4 @@ -@use "sass:map"; -@use "sass:list"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../button/_variables.scss" as *; - -@mixin kendo-time-selector--layout-base() { - - // Time selector - .k-timeselector { - border-width: $kendo-time-selector-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-time-selector-font-family; - font-size: $kendo-time-selector-font-size; - line-height: $kendo-time-selector-line-height; - position: relative; - overflow: hidden; - display: flex; - flex-flow: column nowrap; - user-select: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - } - - .k-popup > .k-timeselector { - border-width: 0; - } - - // Time selector header - .k-time-header, - .k-time-selector-header { - padding-block: $kendo-time-selector-header-padding-y; - padding-inline: $kendo-time-selector-header-padding-x; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - flex: 0 0 auto; - - .k-title, - .k-time-selector-header-title { - padding-block: $kendo-button-padding-y; - padding-inline: $kendo-button-padding-x; - font-weight: bold; - display: inline-block; - } - - .k-time-now { - border-width: 0; - line-height: inherit; - cursor: pointer; - } - } - - // Fast selection - .k-actions.k-time-fast-selection { - margin-top: 0; - } - - - // Time selector footer - // .k-time-footer {} - // .k-time-selector-footer {} - - - // Time list container - .k-time-list-container { - display: flex; - position: relative; - flex: 1 1 auto; - overflow: hidden; - } - - - // Time list highlight - .k-time-highlight, - .k-time-list-highlight { - width: 100%; - height: $kendo-time-list-highlight-height; - border-width: $kendo-time-list-highlight-border-width; - border-style: solid; - box-sizing: border-box; - position: absolute; - top: calc( 50% + #{list.slash( $kendo-time-list-title-height, 2 )}); - left: 0; - right: 0; - transform: translateY(-50%); - z-index: 1; - } - - - // Time list wrapper - .k-time-list-wrapper { - min-width: $kendo-time-list-width; - height: $kendo-time-list-height; - box-sizing: content-box; - display: inline-flex; - flex-flow: column nowrap; - align-items: stretch; - overflow: hidden; - position: relative; - text-align: center; - flex: 1 1 auto; - - .k-title { - font-size: $kendo-time-list-title-font-size; - line-height: $kendo-time-list-title-line-height; - font-weight: bold; - text-align: center; - text-transform: capitalize; - display: block; - } - - &.k-focus { - &::before, - &::after { - display: block; - content: "\200b"; - position: absolute; - width: 100%; - left: 0; - pointer-events: none; - height: calc( 50% - #{list.slash( $kendo-time-list-highlight-height, 2 )} ); - box-sizing: border-box; - border-width: 0; - border-style: solid; - } - - &::before { - top: $kendo-time-list-title-height; - } - - &::after { - bottom: 0; - } - } - } - - - // Time list - .k-time-list { - display: flex; - flex-flow: row nowrap; - align-items: stretch; - flex: 1; - position: relative; - z-index: 1; - outline: 0; - overflow: hidden; - - &::before, - &::after { - display: block; - position: absolute; - content: "\200b"; - height: 0; - line-height: 0; - z-index: 1; - width: 200%; - left: -50%; - } - - &::before { top: 0; } - &::after { bottom: 0; } - } - - - // Time list content - .k-time-container, - .k-time-list-content { - position: relative; - flex: 1 1 auto; - display: block; - overflow-x: hidden; - overflow-y: scroll; - - @include hide-scrollbar("right"); - - > ul { - height: auto; - width: $kendo-time-list-width; - margin: auto; - } - - .k-scrollable-placeholder { - position: absolute; - width: 1px; - top: 0; - right: 0; - } - } - - - // Time list item - .k-time-list-item, - .k-time-list .k-item { - padding-block: $kendo-time-list-item-padding-y; - padding-inline: $kendo-time-list-item-padding-x; - } - - - // Time separator - .k-time-separator { - width: 0; - height: $kendo-time-list-highlight-height; - align-self: center; - display: inline-flex; - justify-content: center; - align-items: center; - position: relative; - z-index: 11; - top: calc( #{list.slash( $kendo-time-list-title-height, 2 )} ); - } - - - // Time selector sizes - @each $size, $size-props in $kendo-time-selector-sizes { - $_font-size: map.get( $size-props, font-size ); - $_line-height: map.get( $size-props, line-height ); - $_list-item-padding-x: map.get( $size-props, list-item-padding-x ); - $_list-item-padding-y: map.get( $size-props, list-item-padding-y ); - $_highlight-height: calc( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) ); - - - .k-timeselector-#{$size} { - font-size: $_font-size; - line-height: $_line-height; - - .k-time-highlight, - .k-time-list-highlight { - height: $_highlight-height; - } - - .k-time-separator { - height: $_highlight-height; - } - - .k-time-list-item, - .k-time-list .k-item { - padding-block: $_list-item-padding-y; - padding-inline: $_list-item-padding-x; - } - } - } - - - - .k-rtl, - [dir="rtl"] { - - // Time list content - .k-time-container, - .k-time-list-content { - @include hide-scrollbar("left"); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/timeselector/_layout.scss" as *; @mixin kendo-time-selector--layout() { diff --git a/packages/default/scss/timeselector/_theme.scss b/packages/default/scss/timeselector/_theme.scss index db8441c77a8..c874d07f1d9 100644 --- a/packages/default/scss/timeselector/_theme.scss +++ b/packages/default/scss/timeselector/_theme.scss @@ -1,79 +1,4 @@ -@use "sass:math"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-time-selector--theme-base() { - - // Time selector - .k-timeselector { - @include fill( - $kendo-time-selector-text, - $kendo-time-selector-bg, - $kendo-time-selector-border - ); - } - - - // Time selector header - .k-time-header, - .k-time-selector-header { - - .k-time-now { - // TODO: use a variable - color: $kendo-link-text; - } - .k-time-now:hover { - // TODO: use a variable - color: $kendo-link-hover-text; - } - } - - - // Time list wrapper - .k-time-list-wrapper { - - .k-title { - color: $kendo-time-list-title-text; - } - - &.k-focus { - .k-title { - color: $kendo-time-list-title-focus-text; - } - - &::before, - &::after { - background-color: $kendo-time-list-focus-bg; - } - } - } - - - // Time list - .k-time-list { - &::before, - &::after { - $shadow-size: 3em; - box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-time-selector-bg; - } - - .k-item:hover { - color: $kendo-color-primary; - } - } - - .k-time-container { - background: transparent; - } - - .k-time-highlight { - @include fill( - $bg: $kendo-time-list-highlight-bg, - $border: $kendo-time-list-highlight-border - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/timeselector/_theme.scss" as *; @mixin kendo-time-selector--theme() { diff --git a/packages/default/scss/timeselector/_variables.scss b/packages/default/scss/timeselector/_variables.scss index cabf87375af..0040df29df1 100644 --- a/packages/default/scss/timeselector/_variables.scss +++ b/packages/default/scss/timeselector/_variables.scss @@ -75,3 +75,44 @@ $kendo-time-selector-sizes: ( list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with ( + $kendo-time-selector-border-width: $kendo-time-selector-border-width, + $kendo-time-selector-font-family: $kendo-time-selector-font-family, + $kendo-time-selector-font-size: $kendo-time-selector-font-size, + $kendo-time-selector-line-height: $kendo-time-selector-line-height, + $kendo-time-selector-bg: $kendo-time-selector-bg, + $kendo-time-selector-text: $kendo-time-selector-text, + $kendo-time-selector-border: $kendo-time-selector-border, + $kendo-time-selector-header-padding-x: $kendo-time-selector-header-padding-x, + $kendo-time-selector-header-padding-y: $kendo-time-selector-header-padding-y, + $kendo-time-selector-header-border-width: $kendo-time-selector-header-border-width, + $kendo-time-selector-fast-selection-gap: $kendo-time-selector-fast-selection-gap, + $kendo-time-list-width: $kendo-time-list-width, + $kendo-time-list-height: $kendo-time-list-height, + $kendo-time-list-title-font-size: $kendo-time-list-title-font-size, + $kendo-time-list-title-line-height: $kendo-time-list-title-line-height, + $kendo-time-list-title-height: $kendo-time-list-title-height, + $kendo-time-list-title-text: $kendo-time-list-title-text, + $kendo-time-list-title-focus-text: $kendo-time-list-title-focus-text, + $kendo-time-list-item-padding-x: $kendo-time-list-item-padding-x, + $kendo-time-list-item-padding-y: $kendo-time-list-item-padding-y, + $kendo-time-list-highlight-border-width: $kendo-time-list-highlight-border-width, + $kendo-time-list-highlight-height: $kendo-time-list-highlight-height, + $kendo-time-list-highlight-bg: $kendo-time-list-highlight-bg, + $kendo-time-list-highlight-border: $kendo-time-list-highlight-border, + $kendo-time-list-focus-bg: $kendo-time-list-focus-bg, + $kendo-time-selector-sm-font-size: $kendo-time-selector-sm-font-size, + $kendo-time-selector-sm-line-height: $kendo-time-selector-sm-line-height, + $kendo-time-selector-sm-list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x, + $kendo-time-selector-sm-list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y, + $kendo-time-selector-md-font-size: $kendo-time-selector-md-font-size, + $kendo-time-selector-md-line-height: $kendo-time-selector-md-line-height, + $kendo-time-selector-md-list-item-padding-x: $kendo-time-selector-md-list-item-padding-x, + $kendo-time-selector-md-list-item-padding-y: $kendo-time-selector-md-list-item-padding-y, + $kendo-time-selector-lg-font-size: $kendo-time-selector-lg-font-size, + $kendo-time-selector-lg-line-height: $kendo-time-selector-lg-line-height, + $kendo-time-selector-lg-list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x, + $kendo-time-selector-lg-list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y, + $kendo-time-selector-sizes: $kendo-time-selector-sizes +); diff --git a/packages/default/scss/toolbar/_layout.scss b/packages/default/scss/toolbar/_layout.scss index 2edd1b469ab..8f993d08db3 100644 --- a/packages/default/scss/toolbar/_layout.scss +++ b/packages/default/scss/toolbar/_layout.scss @@ -1,355 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../button/_variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-toolbar--layout-base() { - - // Base - .k-toolbar { - margin: 0; - padding-block: $kendo-toolbar-padding-y; - padding-inline: $kendo-toolbar-padding-x; - border-width: $kendo-toolbar-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-toolbar-font-family; - font-size: $kendo-toolbar-font-size; - line-height: $kendo-toolbar-line-height; - list-style: none; - display: flex; - flex-flow: row wrap; - gap: $kendo-toolbar-spacing; - align-items: center; - justify-content: flex-start; - position: relative; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - // Remove once we decide to not size empty containers - &::before { - content: ""; - height: $kendo-button-calc-size; - } - - &.k-toolbar-resizable { - flex-wrap: nowrap; - } - - &.k-toolbar-scrollable { - flex-wrap: nowrap; - position: relative; - } - - &.k-toolbar-scrollable-overlay { - - &::before, - &::after { - content: ''; - height: 100%; - aspect-ratio: 1; - position: absolute; - z-index: 3; - } - - &::before { - inset-inline-start: 0; - } - - &::after { - inset-inline-end: 0; - } - - &.k-toolbar-scrollable-start::before, - &.k-toolbar-scrollable-end::after { - display: none; - } - } - - > * { - flex-shrink: 0; - display: inline-flex; - align-content: center; - vertical-align: middle; - - > label { - margin-inline-end: $kendo-toolbar-spacing; - align-self: center; - } - } - - - // Button - .k-button {} - - - // Toggle button - .k-toggle-button {} - - - // Button group - .k-button-group {} - - - // Split button - .k-split-button {} - - - // Input - .k-input, - .k-picker { - width: $kendo-toolbar-input-width; - } - .k-color-picker { - width: min-content; - } - - - // Overflow anchor - .k-toolbar-overflow-button { - margin-inline-start: auto; - } - - // Overflow separator - .k-toolbar-button-separator { - height: $kendo-toolbar-separator-height; - margin-inline-start: auto; - - + .k-toolbar-overflow-button { - margin-inline-start: 0; - } - } - - // Spacer - .k-toolbar-spacer { - height: $kendo-line-height-em; - flex: 1 0 0%; - } - - - // Template item - .k-toolbar-item:focus, - .k-toolbar-item.k-focus { - text-decoration: none; - outline: 0; - } - } - - // Separator - .k-toolbar .k-separator, - .k-toolbar-separator { - width: 0; - height: $kendo-line-height-em; - border-width: 0 0 0 1px; - border-style: solid; - align-self: center; - } - - .k-toolbar-items { - display: flex; - flex-flow: row nowrap; - gap: $kendo-toolbar-spacing; - align-items: center; - justify-content: flex-start; - flex: 1 1 auto; - overflow: hidden; - } - - .k-toolbar-items-scroll { - overflow-x: auto; - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } - } - - .k-toolbar-items-list { - display: flex; - flex-flow: row wrap; - gap: $kendo-toolbar-spacing; - align-items: center; - justify-content: flex-start; - flex: 1 1 auto; - overflow: hidden; - } - - // Outline Toolbar - .k-toolbar-outline { - border-width: $kendo-toolbar-outline-border-width; - background: none; - } - - // Flat Toolbar - .k-toolbar-flat { - border-top-color: transparent !important; // stylelint-disable-line declaration-no-important - border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important - background: none !important; // stylelint-disable-line declaration-no-important - } - - - // Toolbar group - .k-toolbar-group { - display: flex; - flex-direction: inherit; - flex-wrap: nowrap; - gap: inherit; - } - - - // Toolbar sizes - @each $size, $size-props in $kendo-toolbar-sizes { - $_padding-x: map.get( $size-props, padding-x ); - $_padding-y: map.get( $size-props, padding-y ); - $_spacing: map.get( $size-props, spacing ); - $_separator-height: map.get( $size-props, separator-height ); - - .k-toolbar-#{$size} { - padding-block: $_padding-y; - padding-inline: $_padding-x; - gap: $_spacing; - - // Remove once we decide to not size empty containers - &::before { - margin-inline-start: calc( #{$_spacing} * -1 ); - } - - &.k-toolbar-scrollable-overlay::before { - inset-inline-start: $_spacing; - } - - > * > label { - margin-inline-end: $_spacing; - } - - .k-toolbar-items { - gap: $_spacing; - } - - .k-toolbar-button-separator { - height: $_separator-height; - } - - } - - .k-toolbar-items-list-#{$size} { - padding-block: $_padding-y; - padding-inline: $_padding-x; - gap: $_spacing; - } - } - - // Remove once we decide to not size empty containers - .k-toolbar-sm::before { - height: $kendo-button-sm-calc-size; - } - .k-toolbar-md::before { - height: $kendo-button-md-calc-size; - } - .k-toolbar-lg::before { - height: $kendo-button-lg-calc-size; - } - - .k-floating-toolbar, - .editorToolbarWindow.k-window-content { // stylelint-disable-line - padding-block: $kendo-toolbar-md-padding-y !important; // stylelint-disable-line declaration-no-important - padding-inline: $kendo-toolbar-md-padding-x !important; // stylelint-disable-line declaration-no-important - border-width: $kendo-toolbar-border-width; - border-style: solid; - display: flex; - flex-flow: row nowrap; - gap: $kendo-toolbar-md-spacing; - align-items: center; - - .k-toolbar { - padding: 0; - border-width: 0; - flex-shrink: 1; - color: inherit; - background: none; - } - } - .k-editortoolbar-dragHandle { // stylelint-disable-line - cursor: move; - display: flex; - align-items: center; - align-self: stretch; - flex-shrink: 0; - } - - - - // Remove once the Overflow Popup uses - // the proper Menu rendering in all suites. - - // Overflow container - .k-overflow-container { - font-size: $kendo-toolbar-overflow-container-font-size; - line-height: $kendo-toolbar-overflow-container-line-height; - - > .k-item { - border-color: inherit; - } - - .k-separator { - margin: k-spacing(1) 0; - } - - // Group - .k-overflow-tool-group { - display: block; - } - - // Button - .k-overflow-button { - padding-block: $kendo-toolbar-overflow-button-padding-y; - padding-inline: $kendo-toolbar-overflow-button-padding-x; - width: 100%; - height: auto; - border-width: 0; - border-radius: 0; - aspect-ratio: auto; - color: inherit; - background-color: transparent; - background-image: none; - font: inherit; - cursor: pointer; - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - gap: $kendo-icon-spacing; - justify-content: flex-start; - position: relative; - } - - // Button group - .k-button-group { - @include box-shadow( none ); - display: flex; - flex-flow: column nowrap; - - .k-button { - margin: if( $kendo-button-border-width == 0, null, 0); - } - } - - // Split button - .k-split-button { - display: flex; - flex-direction: column; - } - - // Hidden items - .k-overflow-hidden { - display: none; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/toolbar/_layout.scss" as *; @mixin kendo-toolbar--layout() { diff --git a/packages/default/scss/toolbar/_theme.scss b/packages/default/scss/toolbar/_theme.scss index 9db84cd921a..abee8074680 100644 --- a/packages/default/scss/toolbar/_theme.scss +++ b/packages/default/scss/toolbar/_theme.scss @@ -1,195 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../menu/_variables.scss" as *; - -@mixin kendo-toolbar--theme-base() { - - // Theme - .k-toolbar { - // Template item - .k-toolbar-item:focus, - .k-toolbar-item.k-focus { - @include focus-indicator( $kendo-toolbar-item-shadow ); - } - - - // Button group - .k-button-group {} - - } - - .k-toolbar-items { - border-color: inherit; - } - - // Separator - .k-toolbar .k-separator, - .k-toolbar-separator { - border-color: $kendo-toolbar-separator-border; - } - - // Solid Toolbar - .k-toolbar-solid { - @include fill( - $kendo-toolbar-text, - $kendo-toolbar-bg, - $kendo-toolbar-border, - $kendo-toolbar-gradient - ); - @include box-shadow( $kendo-toolbar-shadow ); - - &.k-toolbar-scrollable-overlay { - &::before { - background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay); - } - - &::after { - background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay); - } - } - } - - .k-toolbar-items-list-solid { - border-color: $kendo-toolbar-border; - } - - // Outline Toolbar - .k-toolbar-outline { - @include fill( - $color: $kendo-toolbar-outline-text, - $border: $kendo-toolbar-outline-border - ); - @include box-shadow( $kendo-toolbar-outline-shadow ); - - &.k-toolbar-scrollable-overlay { - &::before { - background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay); - } - - &::after { - background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay); - } - } - } - - .k-toolbar-items-list-outline { - border-color: $kendo-toolbar-outline-border; - } - - // Flat Toolbar - .k-toolbar-flat { - @include fill( - $color: $kendo-toolbar-flat-text, - $border: $kendo-toolbar-flat-border - ); - @include box-shadow( $kendo-toolbar-flat-shadow ); - - - > .k-separator, - .k-toolbar-separator { - border-inline-color: $kendo-toolbar-flat-border; - } - - &.k-toolbar-scrollable-overlay { - &::before { - background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay); - } - - &::after { - background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay); - } - } - } - - .k-toolbar-items-list-flat { - border-color: $kendo-toolbar-flat-border; - } - - .k-floating-toolbar, - .editorToolbarWindow.k-window-content { // stylelint-disable-line - @include fill( - $kendo-toolbar-text, - $kendo-toolbar-bg, - $kendo-toolbar-border, - $kendo-toolbar-gradient - ); - } - - // Overflow container - .k-overflow-container { - - .k-button { - - // Hover state - &:hover, - &.k-hover { - color: $kendo-menu-popup-item-hover-text; - background: $kendo-menu-popup-item-hover-bg; - } - - // Button focus state - &:focus, - &.k-focus { - @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true ); - } - - // Active state - &:active, - &.k-active { - color: $kendo-menu-popup-item-hover-text; - background: $kendo-menu-popup-item-hover-bg; - } - - // Selected - &.k-selected { - color: $kendo-menu-popup-item-active-text; - background: $kendo-menu-popup-item-active-bg; - } - - // Disabled state - &:disabled, - &.k-disabled { - color: inherit; - } - } - - } - - // RTL - .k-rtl, - [dir="rtl"] { - .k-toolbar-scrollable-overlay { - &::before { - background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay); - } - - &::after { - background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay); - } - - &.k-toolbar-outline { - &::before { - background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay); - } - - &::after { - background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay); - } - } - - &.k-toolbar-flat { - &::before { - background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay); - } - - &::after { - background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay); - } - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/toolbar/_theme.scss" as *; @mixin kendo-toolbar--theme() { diff --git a/packages/default/scss/toolbar/_variables.scss b/packages/default/scss/toolbar/_variables.scss index a2654f3a196..f939b7b5824 100644 --- a/packages/default/scss/toolbar/_variables.scss +++ b/packages/default/scss/toolbar/_variables.scss @@ -177,3 +177,53 @@ $kendo-toolbar-sizes: ( separator-height: $kendo-toolbar-lg-separator-height ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/toolbar/_variables.scss" with ( + $kendo-toolbar-padding-x: $kendo-toolbar-padding-x, + $kendo-toolbar-sm-padding-x: $kendo-toolbar-sm-padding-x, + $kendo-toolbar-md-padding-x: $kendo-toolbar-md-padding-x, + $kendo-toolbar-lg-padding-x: $kendo-toolbar-lg-padding-x, + $kendo-toolbar-padding-y: $kendo-toolbar-padding-y, + $kendo-toolbar-sm-padding-y: $kendo-toolbar-sm-padding-y, + $kendo-toolbar-md-padding-y: $kendo-toolbar-md-padding-y, + $kendo-toolbar-lg-padding-y: $kendo-toolbar-lg-padding-y, + $kendo-toolbar-spacing: $kendo-toolbar-spacing, + $kendo-toolbar-sm-spacing: $kendo-toolbar-sm-spacing, + $kendo-toolbar-md-spacing: $kendo-toolbar-md-spacing, + $kendo-toolbar-lg-spacing: $kendo-toolbar-lg-spacing, + $kendo-toolbar-separator-height: $kendo-toolbar-separator-height, + $kendo-toolbar-sm-separator-height: $kendo-toolbar-sm-separator-height, + $kendo-toolbar-md-separator-height: $kendo-toolbar-md-separator-height, + $kendo-toolbar-lg-separator-height: $kendo-toolbar-lg-separator-height, + $kendo-toolbar-border-width: $kendo-toolbar-border-width, + $kendo-toolbar-border-radius: $kendo-toolbar-border-radius, + $kendo-toolbar-font-family: $kendo-toolbar-font-family, + $kendo-toolbar-font-size: $kendo-toolbar-font-size, + $kendo-toolbar-line-height: $kendo-toolbar-line-height, + $kendo-toolbar-bg: $kendo-toolbar-bg, + $kendo-toolbar-text: $kendo-toolbar-text, + $kendo-toolbar-border: $kendo-toolbar-border, + $kendo-toolbar-gradient: $kendo-toolbar-gradient, + $kendo-toolbar-shadow: $kendo-toolbar-shadow, + $kendo-toolbar-scroll-overlay: $kendo-toolbar-scroll-overlay, + $kendo-toolbar-outline-text: $kendo-toolbar-outline-text, + $kendo-toolbar-outline-border: $kendo-toolbar-outline-border, + $kendo-toolbar-outline-gradient: $kendo-toolbar-outline-gradient, + $kendo-toolbar-outline-shadow: $kendo-toolbar-outline-shadow, + $kendo-toolbar-outline-border-width: $kendo-toolbar-outline-border-width, + $kendo-toolbar-outline-scroll-overlay: $kendo-toolbar-outline-scroll-overlay, + $kendo-toolbar-flat-text: $kendo-toolbar-flat-text, + $kendo-toolbar-flat-border: $kendo-toolbar-flat-border, + $kendo-toolbar-flat-gradient: $kendo-toolbar-flat-gradient, + $kendo-toolbar-flat-shadow: $kendo-toolbar-flat-shadow, + $kendo-toolbar-flat-border-width: $kendo-toolbar-flat-border-width, + $kendo-toolbar-flat-scroll-overlay: $kendo-toolbar-flat-scroll-overlay, + $kendo-toolbar-separator-border: $kendo-toolbar-separator-border, + $kendo-toolbar-input-width: $kendo-toolbar-input-width, + $kendo-toolbar-item-shadow: $kendo-toolbar-item-shadow, + $kendo-toolbar-overflow-container-font-size: $kendo-toolbar-overflow-container-font-size, + $kendo-toolbar-overflow-container-line-height: $kendo-toolbar-overflow-container-line-height, + $kendo-toolbar-overflow-button-padding-y: $kendo-toolbar-overflow-button-padding-y, + $kendo-toolbar-overflow-button-padding-x: $kendo-toolbar-overflow-button-padding-x, + $kendo-toolbar-sizes: $kendo-toolbar-sizes +); diff --git a/packages/default/scss/tooltip/_functions.scss b/packages/default/scss/tooltip/_functions.scss new file mode 100644 index 00000000000..97718bb7e7e --- /dev/null +++ b/packages/default/scss/tooltip/_functions.scss @@ -0,0 +1,17 @@ +@use "sass:map"; +@use "../core/_index.scss" as *; +@use "../core/functions/index.import.scss" as *; + +@function tooltip-theme( $colors ) { + $_theme: (); + + @each $name, $color in $colors { + $_theme: map.merge(( $name: ( + color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + background-color: $color, + border: $color, + )), $_theme ); + } + + @return $_theme; +} diff --git a/packages/default/scss/tooltip/_layout.scss b/packages/default/scss/tooltip/_layout.scss index 44fbc887df4..3d2049fad19 100644 --- a/packages/default/scss/tooltip/_layout.scss +++ b/packages/default/scss/tooltip/_layout.scss @@ -1,119 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../icons/_variables.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-tooltip--layout-base() { - - .k-tooltip { - @include border-radius( $kendo-tooltip-border-radius ); - margin: 0; - padding-block: $kendo-tooltip-padding-y; - padding-inline: $kendo-tooltip-padding-x; - border-width: $kendo-tooltip-border-width; - border-style: solid; - box-sizing: border-box; - background-repeat: repeat-x; - outline: 0; - font-family: $kendo-tooltip-font-family; - font-size: $kendo-tooltip-font-size; - line-height: $kendo-tooltip-line-height; - display: flex; - flex-flow: row nowrap; - align-items: flex-start; - position: absolute; - z-index: 12000; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - .k-tooltip-icon { - margin-inline-end: $kendo-icon-spacing; - flex-shrink: 0; - } - - .k-tooltip-title { - margin-bottom: .25em; - font-size: $kendo-tooltip-title-font-size; - line-height: $kendo-tooltip-title-line-height; - } - - .k-tooltip-content { - align-self: stretch; - flex: 1 1 auto; - overflow: hidden; - text-overflow: ellipsis; - } - - .k-tooltip-button { - margin-inline-start: $kendo-icon-spacing; - flex-shrink: 0; - - .k-icon { - color: inherit; - vertical-align: top; - } - } - - - // Callout - .k-callout { - width: calc( #{$kendo-tooltip-callout-size} * 2); - height: calc( #{$kendo-tooltip-callout-size} * 2); - border-width: $kendo-tooltip-callout-size; - border-style: solid; - border-color: transparent; - position: absolute; - pointer-events: none; - } - - // TODO: - // Some implementations rely on margin + transform-rotate to position callout - // Remove margin tweaking and uncomment when their implementation is fixed. - - .k-callout-n { - margin-left: calc( #{$kendo-tooltip-callout-size} * -1 ); - border-bottom-color: currentColor; - // top: 0; - top: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 ); - left: 50%; - // transform: translate(-50%, -100%); - pointer-events: none; - } - .k-callout-e { - margin-top: calc( #{$kendo-tooltip-callout-size} * -1 ); - border-left-color: currentColor; - top: 50%; - // right: 0; - right: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 ); - // transform: translate(100%, -50%); - pointer-events: none; - } - .k-callout-s { - margin-left: calc( #{$kendo-tooltip-callout-size} * -1 ); - border-top-color: currentColor; - // bottom: 0; - bottom: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2); - left: 50%; - // transform: translate(-50%, 100%); - pointer-events: none; - } - .k-callout-w { - margin-top: calc( #{$kendo-tooltip-callout-size} * -1 ); - border-right-color: currentColor; - top: 50%; - // left: 0; - left: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2); - // transform: translate(-100%, -50%); - pointer-events: none; - } - -} +@use "@progress/kendo-theme-core/scss/components/tooltip/_layout.scss" as *; @mixin kendo-tooltip--layout() { diff --git a/packages/default/scss/tooltip/_theme.scss b/packages/default/scss/tooltip/_theme.scss index 950fb6cb6ac..cd1a368b3a6 100644 --- a/packages/default/scss/tooltip/_theme.scss +++ b/packages/default/scss/tooltip/_theme.scss @@ -1,39 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-tooltip--theme-base() { - // Default tooltip - .k-tooltip { - @include fill( - $kendo-tooltip-text, - $kendo-tooltip-bg, - $kendo-tooltip-border - ); - - @include box-shadow( $kendo-tooltip-shadow ); - - .k-callout { - color: $kendo-tooltip-bg; - } - } - - // Tooltip variants - @each $name, $props in $kendo-tooltip-theme { - .k-tooltip-#{$name} { - @include fill( - map.get( $props, color ), - map.get( $props, background-color ), - map.get( $props, border ) - ); - - .k-callout { - color: map.get( $props, background-color ); - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/tooltip/_theme.scss" as *; @mixin kendo-tooltip--theme() { diff --git a/packages/default/scss/tooltip/_variables.scss b/packages/default/scss/tooltip/_variables.scss index f64846a9a29..442903ae372 100644 --- a/packages/default/scss/tooltip/_variables.scss +++ b/packages/default/scss/tooltip/_variables.scss @@ -1,4 +1,5 @@ @use "sass:map"; +@use "./_functions.scss" as *; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; @@ -52,23 +53,28 @@ $kendo-tooltip-border: $kendo-tooltip-bg !default; /// @group tooltip $kendo-tooltip-shadow: k-elevation(2) !default; -@function tooltip-theme( $colors ) { - $_theme: (); - - @each $name, $color in $colors { - $_theme: map.merge(( $name: ( - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), - background-color: $color, - border: $color, - )), $_theme ); - } - - @return $_theme; -} - /// The theme colors map for the Tooltip. /// @group tooltip $kendo-tooltip-theme-colors: $kendo-theme-colors !default; /// The generated theme colors map for the Tooltip. /// @group tooltip $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default; + +@forward "@progress/kendo-theme-core/scss/components/tooltip/_variables.scss" with ( + $kendo-tooltip-padding-y: $kendo-tooltip-padding-y, + $kendo-tooltip-padding-x: $kendo-tooltip-padding-x, + $kendo-tooltip-border-width: $kendo-tooltip-border-width, + $kendo-tooltip-border-radius: $kendo-tooltip-border-radius, + $kendo-tooltip-font-family: $kendo-tooltip-font-family, + $kendo-tooltip-font-size: $kendo-tooltip-font-size, + $kendo-tooltip-line-height: $kendo-tooltip-line-height, + $kendo-tooltip-title-font-size: $kendo-tooltip-title-font-size, + $kendo-tooltip-title-line-height: $kendo-tooltip-title-line-height, + $kendo-tooltip-callout-size: $kendo-tooltip-callout-size, + $kendo-tooltip-bg: $kendo-tooltip-bg, + $kendo-tooltip-text: $kendo-tooltip-text, + $kendo-tooltip-border: $kendo-tooltip-border, + $kendo-tooltip-shadow: $kendo-tooltip-shadow, + $kendo-tooltip-theme-colors: $kendo-tooltip-theme-colors, + $kendo-tooltip-theme: $kendo-tooltip-theme +); diff --git a/packages/default/scss/treelist/_layout.scss b/packages/default/scss/treelist/_layout.scss index 67f00acfd73..42786923017 100644 --- a/packages/default/scss/treelist/_layout.scss +++ b/packages/default/scss/treelist/_layout.scss @@ -1,112 +1,4 @@ -@use "../icons/_variables.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-treelist--layout-base() { - - // Base - .k-treelist { - &.k-grid-display-block.k-grid-lockedcolumns { - display: block; - } - - .k-status { - padding-block: .4em; - padding-inline: .6em; - line-height: 1.6em; - - // TODO: see what this does and use a better name - .k-loading { - vertical-align: baseline; - margin-right: 5px; - - // TODO - display: none; - } - } - - tr.k-hidden { - display: none; - } - - .k-treelist-dragging, - .k-treelist-dragging .k-hover { - cursor: default; - } - - .k-drop-hint { - transform: translate(0, -50%); - } - - .k-table-row.k-footer td, - .k-table-row.k-footer-template td, - .k-table-row.k-footer .k-table-td, - .k-table-row.k-footer-template .k-table-td { - border-width: $kendo-treelist-footer-row-border-width 0; - border-style: solid; - font-weight: bold; - } - - .k-table-row.k-footer + .k-table-row.k-footer td, - .k-table-row.k-footer + .k-table-row.k-footer .k-table-td { - border-top-width: 0; - } - } - - - // Sticky headers - .k-treelist-scrollable { - > .k-table, - .k-grid-header .k-table-row, - .k-grid-header .k-table-th { - background-color: inherit; - } - - .k-grid-toolbar { - position: sticky; - z-index: 3; - top: 0; - left: 0; - } - - .k-grid-header .k-table-th { - position: sticky; - z-index: 1; - } - - .k-grid-header .k-table-th.k-grid-header-sticky { - z-index: 3; - } - - thead.k-grid-header { - padding-right: 0; - } - - .k-table-row.k-group-footer + .k-table-row.k-group-footer td { - border-top-width: 0; - } - } - - :is(.k-treelist-scrollable[dir="rtl"], .k-rtl .k-treelist-scrollable) thead.k-grid-header { - padding-left: 0; - } - - .k-drag-separator { - display: inline-block; - border-right: 1px solid; - height: 1em; - vertical-align: top; - margin-block: 0; - margin-inline: .5em; - } - - .k-treelist-toggle { - margin-block: calc( #{$kendo-icon-padding} * -1 ); - padding: $kendo-icon-padding; - box-sizing: content-box; - cursor: pointer; - } - -} +@use "@progress/kendo-theme-core/scss/components/treelist/_layout.scss" as *; @mixin kendo-treelist--layout() { diff --git a/packages/default/scss/treelist/_theme.scss b/packages/default/scss/treelist/_theme.scss index 7c6d395950f..1979e77f471 100644 --- a/packages/default/scss/treelist/_theme.scss +++ b/packages/default/scss/treelist/_theme.scss @@ -1,16 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-treelist--theme-base() { - - // Theme - .k-treelist { - tr.k-footer, - tr.k-footer-template { - background-color: $kendo-treelist-footer-row-bg; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/treelist/_theme.scss" as *; @mixin kendo-treelist--theme() { diff --git a/packages/default/scss/treelist/_variables.scss b/packages/default/scss/treelist/_variables.scss index 82d6ba13b39..83fbfb9652b 100644 --- a/packages/default/scss/treelist/_variables.scss +++ b/packages/default/scss/treelist/_variables.scss @@ -8,3 +8,8 @@ $kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default; /// The border width of the TreeList footer row. /// @group treelist $kendo-treelist-footer-row-border-width: 1px !default; + +@forward "@progress/kendo-theme-core/scss/components/treelist/_variables.scss" with ( + $kendo-treelist-footer-row-bg: $kendo-treelist-footer-row-bg, + $kendo-treelist-footer-row-border-width: $kendo-treelist-footer-row-border-width +); diff --git a/packages/default/scss/treeview/_layout.scss b/packages/default/scss/treeview/_layout.scss index 52404abeb24..99221eaea1b 100644 --- a/packages/default/scss/treeview/_layout.scss +++ b/packages/default/scss/treeview/_layout.scss @@ -1,202 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-treeview--layout-base() { - - // Treeview - .k-treeview { - padding: 0; - border-width: 0; - background: none; - box-sizing: border-box; - outline: 0; - font-family: $kendo-treeview-font-family; - font-size: $kendo-treeview-font-size; - line-height: $kendo-treeview-line-height; - display: block; - cursor: default; - overflow: auto; - white-space: nowrap; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - } - - - // Treeview filter - .k-treeview-filter { - padding: k-spacing(2); - display: block; - position: relative; - flex: none; - } - - - // Treeview group - .k-treeview-group { - margin: 0; - padding: 0; - list-style: none; - position: relative; - outline: 0; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - &.ng-animating { - overflow: hidden; - } - } - - - // Treeview wrappers - .k-treeview-top, - .k-treeview-mid, - .k-treeview-bot { - display: flex; - flex-direction: row; - align-items: center; - align-content: center; - } - - - // Treeview item - .k-treeview-item { - outline-style: none; - margin: 0; - padding: 0 0 0 $kendo-treeview-indent; - border-width: 0; - display: block; - } - - - // Treeview toggle - .k-treeview-toggle { - margin-inline-start: -$kendo-treeview-indent; - flex: none; - display: inline-flex; - flex-flow: row nowrap; - align-items: center; - cursor: pointer; - } - .k-treeview-toggle .k-icon { - padding: $kendo-icon-padding; - box-sizing: content-box; - } - - - // Loading icon - .k-treeview-loading { - margin-right: $kendo-icon-spacing; - } - - - // Checkbox - .k-treeview .k-checkbox-wrap, - .k-treeview .k-checkbox-wrapper { - align-self: center; - } - - - // Treeview leaf - .k-treeview-leaf { - @include border-radius( $kendo-treeview-item-border-radius ); - padding-block: $kendo-treeview-item-padding-y; - padding-inline: $kendo-treeview-item-padding-x; - border: $kendo-treeview-item-border-width solid transparent; - text-decoration: none; - display: inline-flex; - align-items: center; - align-content: center; - vertical-align: middle; - position: relative; - - .k-icon, - .k-image, - .k-sprite { - margin-right: $kendo-icon-spacing; - } - - &.k-focus { - z-index: 1; - } - } - - - // Treeview load more button - .k-treeview .k-treeview-load-more-button { - cursor: pointer; - - &:hover, - &.k-hover, - &:focus, - &.k-focus { - text-decoration: underline; - } - } - - - // RTL - .k-rtl .k-treeview, - [dir="rtl"] .k-treeview, - .k-treeview.k-rtl, - .k-treeview[dir="rtl"] { - - // Treeview item - .k-treeview-item { - padding-left: 0; - padding-right: $kendo-treeview-indent; - } - - // Loading - .k-treeview-loading { - margin-right: 0; - margin-left: $kendo-icon-spacing; - } - - // Treeview leaf - .k-treeview-leaf, - .k-in { - .k-icon, - .k-image, - .k-sprite { - margin-right: 0; - margin-left: $kendo-icon-spacing; - } - } - } - - @each $size, $size-props in $kendo-treeview-sizes { - $_font-size: map.get( $size-props, font-size); - $_line-height: map.get( $size-props, line-height); - $_item-padding-x: map.get( $size-props, item-padding-x); - $_item-padding-y: map.get( $size-props, item-padding-y); - $_checkbox-padding-x: map.get( $size-props, checkbox-padding-x ); - $_checkbox-padding-y: map.get( $size-props, checkbox-padding-y ); - - .k-treeview-#{$size} { - font-size: $_font-size; - line-height: $_line-height; - - .k-treeview-leaf { - padding-block: $_item-padding-y; - padding-inline: $_item-padding-x; - } - - .k-checkbox-wrap { - padding-block: $_checkbox-padding-y; - padding-inline: $_checkbox-padding-x; - } - } - } - -} +@use "@progress/kendo-theme-core/scss/components/treeview/_layout.scss" as *; @mixin kendo-treeview--layout() { diff --git a/packages/default/scss/treeview/_theme.scss b/packages/default/scss/treeview/_theme.scss index 51eb0a54640..b67716d72ca 100644 --- a/packages/default/scss/treeview/_theme.scss +++ b/packages/default/scss/treeview/_theme.scss @@ -1,85 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-treeview--theme-base() { - - // Treeview - .k-treeview { - @include fill( - $kendo-treeview-text, - $kendo-treeview-bg, - $kendo-treeview-border - ); - } - - - // Treeview item - .k-treeview-item {} - - - // Treeview leaf - .k-treeview-leaf { - - // Hover state - &:hover, - &.k-hover { - @include fill( - $kendo-treeview-item-hover-text, - $kendo-treeview-item-hover-bg, - $kendo-treeview-item-hover-border, - $kendo-treeview-item-hover-gradient - ); - } - - // Focus state - &:focus, - &.k-focus { - @include focus-indicator( $kendo-treeview-item-focus-shadow, true ); - } - - // Selected state - &.k-selected { - @include fill( - $kendo-treeview-item-selected-text, - $kendo-treeview-item-selected-bg, - $kendo-treeview-item-selected-border, - $kendo-treeview-item-selected-gradient - ); - } - } - - - // Treeview load more button - .k-treeview .k-treeview-load-more-button { - @include fill( - $kendo-treeview-loadmore-text, - $kendo-treeview-loadmore-bg, - $kendo-treeview-loadmore-border - ); - - // Hover state - &:hover, - &.k-hover { - @include fill( - $kendo-treeview-loadmore-hover-text, - $kendo-treeview-loadmore-hover-bg, - $kendo-treeview-loadmore-hover-border - ); - } - - // Focus state - &:focus, - &.k-focus { - @include fill( - $kendo-treeview-loadmore-focus-text, - $kendo-treeview-loadmore-focus-bg, - $kendo-treeview-loadmore-focus-border - ); - @include focus-indicator( $kendo-treeview-loadmore-focus-shadow, true ); - } - } - -} +@use "@progress/kendo-theme-core/scss/components/treeview/_theme.scss" as *; @mixin kendo-treeview--theme() { diff --git a/packages/default/scss/treeview/_variables.scss b/packages/default/scss/treeview/_variables.scss index ce5c138f19f..aef8cc50e54 100644 --- a/packages/default/scss/treeview/_variables.scss +++ b/packages/default/scss/treeview/_variables.scss @@ -187,3 +187,55 @@ $kendo-treeview-loadmore-focus-border: null !default; /// @group treeview $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default; + +@forward "@progress/kendo-theme-core/scss/components/treeview/_variables.scss" with ( + $kendo-treeview-font-family: $kendo-treeview-font-family, + $kendo-treeview-font-size: $kendo-treeview-font-size, + $kendo-treeview-sm-font-size: $kendo-treeview-sm-font-size, + $kendo-treeview-md-font-size: $kendo-treeview-md-font-size, + $kendo-treeview-lg-font-size: $kendo-treeview-lg-font-size, + $kendo-treeview-line-height: $kendo-treeview-line-height, + $kendo-treeview-sm-line-height: $kendo-treeview-sm-line-height, + $kendo-treeview-md-line-height: $kendo-treeview-md-line-height, + $kendo-treeview-lg-line-height: $kendo-treeview-lg-line-height, + $kendo-treeview-indent: $kendo-treeview-indent, + $kendo-treeview-item-padding-x: $kendo-treeview-item-padding-x, + $kendo-treeview-sm-item-padding-x: $kendo-treeview-sm-item-padding-x, + $kendo-treeview-md-item-padding-x: $kendo-treeview-md-item-padding-x, + $kendo-treeview-lg-item-padding-x: $kendo-treeview-lg-item-padding-x, + $kendo-treeview-item-padding-y: $kendo-treeview-item-padding-y, + $kendo-treeview-sm-item-padding-y: $kendo-treeview-sm-item-padding-y, + $kendo-treeview-md-item-padding-y: $kendo-treeview-md-item-padding-y, + $kendo-treeview-lg-item-padding-y: $kendo-treeview-lg-item-padding-y, + $kendo-treeview-item-border-width: $kendo-treeview-item-border-width, + $kendo-treeview-item-border-radius: $kendo-treeview-item-border-radius, + $kendo-treeview-sm-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x, + $kendo-treeview-md-checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x, + $kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x, + $kendo-treeview-sm-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y, + $kendo-treeview-md-checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y, + $kendo-treeview-lg-checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y, + $kendo-treeview-sizes: $kendo-treeview-sizes, + $kendo-treeview-bg: $kendo-treeview-bg, + $kendo-treeview-text: $kendo-treeview-text, + $kendo-treeview-border: $kendo-treeview-border, + $kendo-treeview-item-hover-bg: $kendo-treeview-item-hover-bg, + $kendo-treeview-item-hover-text: $kendo-treeview-item-hover-text, + $kendo-treeview-item-hover-border: $kendo-treeview-item-hover-border, + $kendo-treeview-item-hover-gradient: $kendo-treeview-item-hover-gradient, + $kendo-treeview-item-selected-bg: $kendo-treeview-item-selected-bg, + $kendo-treeview-item-selected-text: $kendo-treeview-item-selected-text, + $kendo-treeview-item-selected-border: $kendo-treeview-item-selected-border, + $kendo-treeview-item-selected-gradient: $kendo-treeview-item-selected-gradient, + $kendo-treeview-item-focus-shadow: $kendo-treeview-item-focus-shadow, + $kendo-treeview-loadmore-bg: $kendo-treeview-loadmore-bg, + $kendo-treeview-loadmore-text: $kendo-treeview-loadmore-text, + $kendo-treeview-loadmore-border: $kendo-treeview-loadmore-border, + $kendo-treeview-loadmore-hover-bg: $kendo-treeview-loadmore-hover-bg, + $kendo-treeview-loadmore-hover-text: $kendo-treeview-loadmore-hover-text, + $kendo-treeview-loadmore-hover-border: $kendo-treeview-loadmore-hover-border, + $kendo-treeview-loadmore-focus-bg: $kendo-treeview-loadmore-focus-bg, + $kendo-treeview-loadmore-focus-text: $kendo-treeview-loadmore-focus-text, + $kendo-treeview-loadmore-focus-border: $kendo-treeview-loadmore-focus-border, + $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-loadmore-focus-shadow +); diff --git a/packages/default/scss/typography/_layout.scss b/packages/default/scss/typography/_layout.scss index 0b1dfb06794..89f9ac2100f 100644 --- a/packages/default/scss/typography/_layout.scss +++ b/packages/default/scss/typography/_layout.scss @@ -1,127 +1,4 @@ -@use "sass:map"; -@use "../core/_index.scss" as *; -@use "../_variables.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-typography--layout-base() { - - @if $kendo-enable-typography { - body { @extend .k-body !optional; } - h1 { @extend .k-h1 !optional; } - h2 { @extend .k-h2 !optional; } - h3 { @extend .k-h3 !optional; } - h4 { @extend .k-h4 !optional; } - h5 { @extend .k-h5 !optional; } - h6 { @extend .k-h6 !optional; } - p { @extend .k-paragraph !optional; } - pre { @extend .k-pre !optional; } - code { @extend .k-code !optional; } - } - - // TODO delete k-typography class for R1 2022 - .k-body, - .k-typography { - @include typography( - var( --kendo-font-size, inherit ), - var( --kendo-font-family, inherit ), - var( --kendo-line-height, normal ), - var( --kendo-font-weight-normal, normal ), - var( --kendo-letter-spacing, normal ) - ); - margin: 0; - - p { - margin: $kendo-paragraph-margin; - } - } - - // Headings - @each $heading, $heading-props in $kendo-headings { - $_font-size: map.get( $heading-props, font-size ); - $_font-family: map.get( $heading-props, font-family ); - $_line-height: map.get( $heading-props, line-height ); - $_font-weight: map.get( $heading-props, font-weight ); - $_letter-spacing: map.get( $heading-props, letter-spacing ); - $_margin: map.get( $heading-props, margin ); - - .k-#{$heading} { - @include typography( - var( --kendo-#{$heading}-font-size, #{$_font-size} ), - var( --kendo-#{$heading}-font-family, #{$_font-family} ), - var( --kendo-#{$heading}-line-height, #{$_line-height} ), - var( --kendo-#{$heading}-font-weight, #{$_font-weight} ), - var( --kendo-#{$heading}-letter-spacing, #{$_letter-spacing} ), - ); - margin: var( --kendo-#{$heading}-margin, #{$_margin} ); - } - } - - // Paragraph - .k-paragraph { - @include typography( - var( --kendo-paragraph-font-size, #{$kendo-paragraph-font-size}), - var( --kendo-paragraph-font-family, #{$kendo-paragraph-font-family}), - var( --kendo-paragraph-line-height, #{$kendo-paragraph-line-height}), - var( --kendo-paragraph-font-weight, #{$kendo-paragraph-font-weight}), - var( --kendo-paragraph-letter-spacing, #{$kendo-paragraph-letter-spacing}) - ); - margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin}); - } - - // Code snippet - .k-pre, - .k-code { - @include typography( - var( --kendo-code-font-size, #{$kendo-code-font-size}), - var( --kendo-code-font-family, #{$kendo-code-font-family}), - var( --kendo-code-line-height, #{$kendo-code-line-height}), - var( --kendo-code-font-weight, #{$kendo-code-font-weight}), - var( --kendo-code-letter-spacing, #{$kendo-code-letter-spacing}) - ); - border-style: solid; - border-width: $kendo-code-border-width; - } - - .k-pre { - padding-block: $kendo-pre-padding-y; - padding-inline: $kendo-pre-padding-x; - overflow: auto; - } - - .k-pre > .k-code { - padding: 0; - border-width: 0; - border-color: transparent; - background-color: transparent; - font-family: inherit; - font-size: inherit; - } - - .k-code { - padding-block: $kendo-code-padding-y; - padding-inline: $kendo-code-padding-x; - } - - // Display - @each $display, $kendo-display-props in $kendo-display { - $_font-size: map.get( $kendo-display-props, font-size ); - $_font-family: map.get( $kendo-display-props, font-family ); - $_line-height: map.get( $kendo-display-props, line-height ); - $_font-weight: map.get( $kendo-display-props, font-weight ); - $_letter-spacing: map.get( $kendo-display-props, letter-spacing ); - $_margin: map.get( $kendo-display-props, margin ); - - .k-display-#{$display} { - @include typography( - var( --kendo-display#{$display}-font-size, #{$_font-size} ), - var( --kendo-display#{$display}-font-family, #{$_font-family} ), - var( --kendo-display#{$display}-line-height, #{$_line-height} ), - var( --kendo-display#{$display}-font-weight, #{$_font-weight} ), - var( --kendo-display#{$display}-letter-spacing, #{$_letter-spacing} ), - ); - } - } -} +@use "@progress/kendo-theme-core/scss/components/typography/_layout.scss" as *; @mixin kendo-typography--layout() { diff --git a/packages/default/scss/typography/_theme.scss b/packages/default/scss/typography/_theme.scss index 7efbac1dd24..cdf0ed959d3 100644 --- a/packages/default/scss/typography/_theme.scss +++ b/packages/default/scss/typography/_theme.scss @@ -1,27 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/mixins/index.import.scss" as *; -@use "./_variables.scss" as *; - -@mixin kendo-typography--theme-base() { - - .k-body { - @include fill( - $kendo-body-text, - $kendo-body-bg - ); - } - - // Code snippet - .k-pre, - .k-code { - @include fill( - $kendo-code-text, - $kendo-code-bg, - $kendo-code-border - ); - } - -} +@use "@progress/kendo-theme-core/scss/components/typography/_theme.scss" as *; @mixin kendo-typography--theme() { diff --git a/packages/default/scss/typography/_variables.scss b/packages/default/scss/typography/_variables.scss index 9bdfc989743..3cff926a966 100644 --- a/packages/default/scss/typography/_variables.scss +++ b/packages/default/scss/typography/_variables.scss @@ -336,3 +336,83 @@ $kendo-display: ( letter-spacing: $kendo-display4-letter-spacing ) ) !default; + +@forward "@progress/kendo-theme-core/scss/components/typography/_variables.scss" with ( + $kendo-h1-font-size: $kendo-h1-font-size, + $kendo-h2-font-size: $kendo-h2-font-size, + $kendo-h3-font-size: $kendo-h3-font-size, + $kendo-h4-font-size: $kendo-h4-font-size, + $kendo-h5-font-size: $kendo-h5-font-size, + $kendo-h6-font-size: $kendo-h6-font-size, + $kendo-h1-font-family: $kendo-h1-font-family, + $kendo-h2-font-family: $kendo-h2-font-family, + $kendo-h3-font-family: $kendo-h3-font-family, + $kendo-h4-font-family: $kendo-h4-font-family, + $kendo-h5-font-family: $kendo-h5-font-family, + $kendo-h6-font-family: $kendo-h6-font-family, + $kendo-h1-line-height: $kendo-h1-line-height, + $kendo-h2-line-height: $kendo-h2-line-height, + $kendo-h3-line-height: $kendo-h3-line-height, + $kendo-h4-line-height: $kendo-h4-line-height, + $kendo-h5-line-height: $kendo-h5-line-height, + $kendo-h6-line-height: $kendo-h6-line-height, + $kendo-h1-font-weight: $kendo-h1-font-weight, + $kendo-h2-font-weight: $kendo-h2-font-weight, + $kendo-h3-font-weight: $kendo-h3-font-weight, + $kendo-h4-font-weight: $kendo-h4-font-weight, + $kendo-h5-font-weight: $kendo-h5-font-weight, + $kendo-h6-font-weight: $kendo-h6-font-weight, + $kendo-h1-letter-spacing: $kendo-h1-letter-spacing, + $kendo-h2-letter-spacing: $kendo-h2-letter-spacing, + $kendo-h3-letter-spacing: $kendo-h3-letter-spacing, + $kendo-h4-letter-spacing: $kendo-h4-letter-spacing, + $kendo-h5-letter-spacing: $kendo-h5-letter-spacing, + $kendo-h6-letter-spacing: $kendo-h6-letter-spacing, + $kendo-h1-margin: $kendo-h1-margin, + $kendo-h2-margin: $kendo-h2-margin, + $kendo-h3-margin: $kendo-h3-margin, + $kendo-h4-margin: $kendo-h4-margin, + $kendo-h5-margin: $kendo-h5-margin, + $kendo-h6-margin: $kendo-h6-margin, + $kendo-headings: $kendo-headings, + $kendo-paragraph-margin: $kendo-paragraph-margin, + $kendo-paragraph-font-size: $kendo-paragraph-font-size, + $kendo-paragraph-font-family: $kendo-paragraph-font-family, + $kendo-paragraph-line-height: $kendo-paragraph-line-height, + $kendo-paragraph-font-weight: $kendo-paragraph-font-weight, + $kendo-paragraph-letter-spacing: $kendo-paragraph-letter-spacing, + $kendo-code-font-size: $kendo-code-font-size, + $kendo-code-font-family: $kendo-code-font-family, + $kendo-code-line-height: $kendo-code-line-height, + $kendo-code-font-weight: $kendo-code-font-weight, + $kendo-code-letter-spacing: $kendo-code-letter-spacing, + $kendo-code-padding-x: $kendo-code-padding-x, + $kendo-code-padding-y: $kendo-code-padding-y, + $kendo-pre-padding-x: $kendo-pre-padding-x, + $kendo-pre-padding-y: $kendo-pre-padding-y, + $kendo-code-border-width: $kendo-code-border-width, + $kendo-code-bg: $kendo-code-bg, + $kendo-code-text: $kendo-code-text, + $kendo-code-border: $kendo-code-border, + $kendo-display1-font-size: $kendo-display1-font-size, + $kendo-display2-font-size: $kendo-display2-font-size, + $kendo-display3-font-size: $kendo-display3-font-size, + $kendo-display4-font-size: $kendo-display4-font-size, + $kendo-display1-font-family: $kendo-display1-font-family, + $kendo-display2-font-family: $kendo-display2-font-family, + $kendo-display3-font-family: $kendo-display3-font-family, + $kendo-display4-font-family: $kendo-display4-font-family, + $kendo-display1-line-height: $kendo-display1-line-height, + $kendo-display2-line-height: $kendo-display2-line-height, + $kendo-display3-line-height: $kendo-display3-line-height, + $kendo-display4-line-height: $kendo-display4-line-height, + $kendo-display1-font-weight: $kendo-display1-font-weight, + $kendo-display2-font-weight: $kendo-display2-font-weight, + $kendo-display3-font-weight: $kendo-display3-font-weight, + $kendo-display4-font-weight: $kendo-display4-font-weight, + $kendo-display1-letter-spacing: $kendo-display1-letter-spacing, + $kendo-display2-letter-spacing: $kendo-display2-letter-spacing, + $kendo-display3-letter-spacing: $kendo-display3-letter-spacing, + $kendo-display4-letter-spacing: $kendo-display4-letter-spacing, + $kendo-display: $kendo-display +); diff --git a/packages/default/scss/upload/_layout.scss b/packages/default/scss/upload/_layout.scss index 5be14ffe020..abc16951840 100644 --- a/packages/default/scss/upload/_layout.scss +++ b/packages/default/scss/upload/_layout.scss @@ -1,251 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; -@use "../icons/_variables.scss" as *; - -@mixin kendo-upload--layout-base() { - - .k-upload { - border-width: $kendo-upload-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-upload-font-family; - font-size: $kendo-upload-font-size; - line-height: $kendo-upload-line-height; - position: relative; - display: block; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - .k-upload-button { - min-width: 7em; - } - - // Drop zone - .k-dropzone, - .k-upload-dropzone { - padding-block: $kendo-upload-dropzone-padding-y; - padding-inline: $kendo-upload-dropzone-padding-x; - border-width: 0; - text-align: end; - display: flex; - align-items: center; - justify-content: space-between; - position: relative; - background-color: transparent; - - .k-dropzone-hint { - font-style: normal; - font-weight: normal; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - position: relative; - flex: 1; - } - - .k-upload-status { - font-weight: normal; - display: flex; - align-items: center; - position: relative; - - > .k-icon { - margin-inline-end: $kendo-upload-icon-spacing; - } - } - - .k-upload-status + .k-dropzone-hint { - display: none; - } - } - - .k-dropzone-active { - .k-upload-status { - display: none; - } - - .k-upload-status + .k-dropzone-hint { - display: block; - } - } - - // Upload files list - .k-upload-files { - max-height: $kendo-upload-max-height; - overflow-y: auto; - margin: 0; - padding: 0; - border-width: 1px 0 0; - border-style: solid; - border-color: inherit; - list-style: none; - - .k-file-multiple, - .k-file-single { - width: 100%; - display: flex; - justify-content: space-between; - } - - .k-file-single { - align-items: center; - } - - .k-file-multiple { - align-items: flex-start; - } - - .k-file { - padding: $kendo-upload-item-padding-y $kendo-upload-item-padding-x calc(#{$kendo-upload-item-padding-y} + #{$kendo-upload-progress-thickness}); - border-width: 0 0 1px; - border-style: solid; - outline: none; - display: flex; - align-items: flex-start; - position: relative; - } - - .k-file:last-child { - border-width: 0; - } - - .k-filename { - margin-left: k-spacing(4); - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - position: relative; - } - - .k-upload-pct { - margin-block: 0; - margin-inline: $kendo-upload-icon-spacing; - font-weight: normal; - vertical-align: middle; - } - - ~ .k-clear-selected, - ~ .k-upload-selected { - margin-top: $kendo-upload-files-list-margin; - border-width: 0; - } - - ~ .k-upload-selected { - border-left-width: 1px; - border-left-style: solid; - margin-left: -1px; - } - - .k-file-name, - .k-file-size, - .k-file-validation-message, - .k-file-summary { - display: block; - } - - .k-file-name { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - position: relative; - } - - .k-file-size, - .k-file-summary, - .k-file-validation-message { - font-size: $kendo-upload-validation-font-size; - line-height: $kendo-upload-validation-line-height; - } - - - .k-file-icon-wrapper { - - .k-file-state { - position: absolute; - } - } - - .k-file-state { - visibility: hidden; - } - } - - .k-upload-files .k-file-info { - min-height: $kendo-icon-size-xxl; - display: block; - overflow: hidden; - flex: 1 0 0; - } - - .k-multiple-files-wrapper, - .k-file-single > .k-file-info { - margin-inline-start: $kendo-upload-file-info-margin; - min-height: $kendo-icon-size-xxl; - display: block; - overflow: hidden; - flex: 1 0 0; - } - - .k-multiple-files-wrapper { - .k-file-info { - margin-bottom: $kendo-upload-multiple-items-spacing; - display: block; - } - - .k-file-summary { - margin-top: calc( calc( #{$kendo-upload-multiple-items-spacing} / 3) * -1 ); - } - } - - .k-progressbar { - --kendo-progressbar-height: #{$kendo-upload-progress-thickness}; - position: absolute; - left: $kendo-upload-item-padding-x; - right: $kendo-upload-item-padding-x; - bottom: calc( #{$kendo-upload-item-padding-y} / 2 ); - width: auto; - } - - // Action buttons - .k-actions { - border-top-width: 1px; - } - - } - - .k-upload-button-wrap { - position: relative; - direction: ltr; - - input { - // font should not depend on outside styles, otherwise upload may break - font: 170px monospace !important; // stylelint-disable-line declaration-no-important - margin: 0; - padding: 0; - width: 100%; - height: 100%; - opacity: 0; - cursor: pointer; - position: absolute; - bottom: 0; - right: 0; - z-index: 1; - } - input[disabled], - input.k-disabled { - visibility: hidden; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/upload/_layout.scss" as *; @mixin kendo-upload--layout() { diff --git a/packages/default/scss/upload/_theme.scss b/packages/default/scss/upload/_theme.scss index 7b151bb650a..d51cfaf81fa 100644 --- a/packages/default/scss/upload/_theme.scss +++ b/packages/default/scss/upload/_theme.scss @@ -1,108 +1,4 @@ -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-upload--theme-base() { - - .k-upload { - @include fill( - $kendo-upload-text, - $kendo-upload-bg, - $kendo-upload-border - ); - - .k-dropzone, - .k-upload-dropzone { - @include fill( - $kendo-upload-dropzone-text, - $kendo-upload-dropzone-bg, - $kendo-upload-dropzone-border - ); - - &.k-hover { - background-color: $kendo-upload-dropzone-hover-bg; - } - - .k-dropzone-hint { - color: $kendo-upload-status-text; - opacity: $kendo-upload-status-text-opacity; - } - - } - - .k-upload-files, - .k-file { - border-color: $kendo-upload-border; - } - - .k-file { - &.k-focus { - @include focus-indicator( $indicator: ( inset $kendo-upload-focus-shadow ), $inset: true ); - } - - .k-upload-action.k-focus { - @include focus-indicator( $kendo-upload-focus-shadow ); - } - - } - - .k-upload-status { - color: $kendo-upload-status-text; - opacity: $kendo-upload-status-text-opacity; - } - - // Upload status: uploading - .k-file-progress { - .k-progressbar .k-selected { - background-color: $kendo-upload-progress-bg; - } - } - - - // Upload status: success - .k-file-success { - .k-file-validation-message { - color: $kendo-upload-success-text; - } - - .k-progressbar .k-selected { - background-color: $kendo-upload-success-bg; - } - } - - // Upload status: error - .k-file-error { - .k-file-validation-message { - color: $kendo-upload-error-text; - } - .k-progressbar .k-selected { - background-color: $kendo-upload-error-bg; - } - } - - .k-file-icon-wrapper { - color: $kendo-upload-icon-color; - border-color: $kendo-upload-icon-color; - } - - .k-file-size, - .k-file-validation-message, - .k-file-summary { - color: $kendo-subtle-text; - } - - .k-multiple-files-wrapper .k-file-summary { - color: $kendo-upload-text; - } - - // Invalid, - &.k-invalid, - &.ng-invalid.ng-touched, - &.ng-invalid.ng-dirty { - border-color: $kendo-invalid-border; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/upload/_theme.scss" as *; @mixin kendo-upload--theme() { diff --git a/packages/default/scss/upload/_variables.scss b/packages/default/scss/upload/_variables.scss index b498c4b6283..f98e9197697 100644 --- a/packages/default/scss/upload/_variables.scss +++ b/packages/default/scss/upload/_variables.scss @@ -107,3 +107,38 @@ $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default; $kendo-upload-files-list-margin: calc( -1 * #{k-spacing(1)} ) !default; $kendo-upload-file-info-margin: k-spacing(2) !default; + +@forward "@progress/kendo-theme-core/scss/components/upload/_variables.scss" with ( + $kendo-upload-border-width: $kendo-upload-border-width, + $kendo-upload-font-family: $kendo-upload-font-family, + $kendo-upload-font-size: $kendo-upload-font-size, + $kendo-upload-line-height: $kendo-upload-line-height, + $kendo-upload-max-height: $kendo-upload-max-height, + $kendo-upload-text: $kendo-upload-text, + $kendo-upload-bg: $kendo-upload-bg, + $kendo-upload-border: $kendo-upload-border, + $kendo-upload-dropzone-padding-x: $kendo-upload-dropzone-padding-x, + $kendo-upload-dropzone-padding-y: $kendo-upload-dropzone-padding-y, + $kendo-upload-dropzone-text: $kendo-upload-dropzone-text, + $kendo-upload-dropzone-bg: $kendo-upload-dropzone-bg, + $kendo-upload-dropzone-border: $kendo-upload-dropzone-border, + $kendo-upload-dropzone-hover-bg: $kendo-upload-dropzone-hover-bg, + $kendo-upload-status-text: $kendo-upload-status-text, + $kendo-upload-status-text-opacity: $kendo-upload-status-text-opacity, + $kendo-upload-item-padding-x: $kendo-upload-item-padding-x, + $kendo-upload-item-padding-y: $kendo-upload-item-padding-y, + $kendo-upload-multiple-items-spacing: $kendo-upload-multiple-items-spacing, + $kendo-upload-validation-font-size: $kendo-upload-validation-font-size, + $kendo-upload-validation-line-height: $kendo-upload-validation-line-height, + $kendo-upload-icon-spacing: $kendo-upload-icon-spacing, + $kendo-upload-icon-color: $kendo-upload-icon-color, + $kendo-upload-progress-thickness: $kendo-upload-progress-thickness, + $kendo-upload-progress-bg: $kendo-upload-progress-bg, + $kendo-upload-success-text: $kendo-upload-success-text, + $kendo-upload-success-bg: $kendo-upload-success-bg, + $kendo-upload-error-text: $kendo-upload-error-text, + $kendo-upload-error-bg: $kendo-upload-error-bg, + $kendo-upload-focus-shadow: $kendo-upload-focus-shadow, + $kendo-upload-files-list-margin: $kendo-upload-files-list-margin, + $kendo-upload-file-info-margin: $kendo-upload-file-info-margin +); diff --git a/packages/default/scss/validator/_layout.scss b/packages/default/scss/validator/_layout.scss index c40ef85e229..741d56839ce 100644 --- a/packages/default/scss/validator/_layout.scss +++ b/packages/default/scss/validator/_layout.scss @@ -1,28 +1,4 @@ -@use "../tooltip/_variables.scss" as *; - -@mixin kendo-validator--layout-base() { - - // Validator - .k-validator {} - - - // Validator tooltip - .k-validator-tooltip { - margin-top: calc( #{$kendo-tooltip-callout-size} + #{$kendo-tooltip-border-width} ); - width: auto; - white-space: normal; - display: flex; - align-items: center; - // NOTE: This works around popup / tooltip stacking issue - z-index: 9999; - - // .k-callout-n { inset-inline-start: 16px; } - } - .k-grid .k-validator-tooltip { - max-width: 300px; - } - -} +@use "@progress/kendo-theme-core/scss/components/validator/_layout.scss" as *; @mixin kendo-validator--layout() { diff --git a/packages/default/scss/validator/_theme.scss b/packages/default/scss/validator/_theme.scss index c857d36769f..b1efa354f24 100644 --- a/packages/default/scss/validator/_theme.scss +++ b/packages/default/scss/validator/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-validator--theme-base() { - - // Validator - .k-validator {} - -} +@use "@progress/kendo-theme-core/scss/components/validator/_theme.scss" as *; @mixin kendo-validator--theme() { diff --git a/packages/default/scss/virtual-scroller/_layout.scss b/packages/default/scss/virtual-scroller/_layout.scss index b43735c5db4..64ea4294bb7 100644 --- a/packages/default/scss/virtual-scroller/_layout.scss +++ b/packages/default/scss/virtual-scroller/_layout.scss @@ -1,38 +1,4 @@ -@mixin kendo-virtual-scroller--layout-base() { - - // Virtual scroller - .k-virtual-scroller { - width: 100%; - height: 100%; - flex: 1 1 auto; - overflow: auto; - position: relative; - } - - - // Virtual scroller wrap - .k-virtual-scroller-wrap { - position: relative; - z-index: 1; - } - - - // Virtual scroller content - .k-virtual-scroller-content { - position: absolute; - width: 100%; - top: 0; - inset-inline-start: 0; - } - - - // Virtual scroller size - .k-virtual-scroller-size { - position: relative; - z-index: 0; - } - -} +@use "@progress/kendo-theme-core/scss/components/virtual-scroller/_layout.scss" as *; @mixin kendo-virtual-scroller--layout() { diff --git a/packages/default/scss/virtual-scroller/_theme.scss b/packages/default/scss/virtual-scroller/_theme.scss index 898fb37135e..986669a6cbb 100644 --- a/packages/default/scss/virtual-scroller/_theme.scss +++ b/packages/default/scss/virtual-scroller/_theme.scss @@ -1,9 +1,4 @@ -@mixin kendo-virtual-scroller--theme-base() { - - // Virtual scroller - .k-virtual-scroller {} - -} +@use "@progress/kendo-theme-core/scss/components/virtual-scroller/_theme.scss" as *; @mixin kendo-virtual-scroller--theme() { diff --git a/packages/default/scss/window/_layout.scss b/packages/default/scss/window/_layout.scss index e85d01e4ff9..8b37abc3be8 100644 --- a/packages/default/scss/window/_layout.scss +++ b/packages/default/scss/window/_layout.scss @@ -1,176 +1,4 @@ -@use "sass:list"; -@use "../core/_index.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-window--layout-base() { - - .k-window { - @include border-radius( $kendo-window-border-radius ); - padding: 0; - border-width: $kendo-window-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-window-font-family; - font-size: $kendo-window-font-size; - line-height: $kendo-window-line-height; - display: inline-flex; - flex-direction: column; - position: absolute; - z-index: 10002; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $kendo-color-rgba-transparent; - - // overlay during dragging - // .k-overlay { - // position: absolute; - // opacity: 0; - // } - } - .k-window.k-window-maximized { - max-width: 100vw; - max-height: 100vh; - box-shadow: none; - } - - - // Window sizes - @each $size, $width in $kendo-window-sizes { - .k-window-#{$size} { width: $width; } - } - - - // Title bar - .k-window-titlebar { - @include border-top-radius( $kendo-window-border-radius ); - padding-block: $kendo-window-titlebar-padding-y; - padding-inline: $kendo-window-titlebar-padding-x; - border-width: $kendo-window-titlebar-border-width; - border-style: $kendo-window-titlebar-border-style; - white-space: nowrap; - display: flex; - flex-direction: row; - flex-shrink: 0; - align-items: center; - } - - .k-window-minimized { - .k-window-titlebar { - border-width: 0; - } - } - - // Title bar title text - .k-window-title { - padding-block: .5em; - padding-inline: 0; - margin-block: -.5em; - margin-inline: 0; - font-size: $kendo-window-title-font-size; - line-height: $kendo-window-title-line-height; - text-overflow: ellipsis; - overflow: hidden; - cursor: default; - flex: 1; - - &:empty::before { - content: "\200b"; - } - } - - - // Actions - .k-window-titlebar-actions { - margin-block: -5em; - margin-inline: 0; - margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} ); - line-height: 1; - display: flex; - gap: $kendo-window-actions-gap; - flex-flow: row nowrap; - flex-shrink: 0; - align-items: center; - vertical-align: top; - } - .k-window-titlebar-action { - flex-shrink: 0; - opacity: $kendo-window-action-opacity; - } - .k-window-titlebar-action:hover { - opacity: $kendo-window-action-hover-opacity; - } - - - // Content - .k-window-content, - .k-prompt-container { - padding-block: $kendo-window-inner-padding-y; - padding-inline: $kendo-window-inner-padding-x; - border-width: 0; - border-color: inherit; - color: inherit; - background: none; - outline: 0; - overflow: auto; - position: relative; - flex: 1 1 auto; - } - .k-window-content + .k-prompt-container { - margin-top: - list.slash( $kendo-window-inner-padding-y, 2 ); - } - .k-window-content:first-child { - padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} ); - } - .k-window-content:last-child { - padding-bottom: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} ); - } - - .k-window-iframecontent { - padding: 0; - overflow: visible; - - .k-content-frame { - vertical-align: top; - border: 0; - width: 100%; - height: 100%; - } - } - - // Buttons Layout - .k-window-actions { - @include border-bottom-radius( $kendo-window-border-radius ); - padding-block: $kendo-window-buttongroup-padding-y; - padding-inline: $kendo-window-buttongroup-padding-x; - border-width: $kendo-window-buttongroup-border-width 0 0; - border-style: solid; - border-color: inherit; - flex: 0 0 auto; - display: flex; - flex-flow: row wrap; - align-items: center; - overflow: hidden; - } - - - // Prompt - .k-prompt-container { - - > .k-textarea { - width: 100%; - } - - } - - // Resize Handles - .k-window { // stylelint-disable-line - .k-resize-n { top: 0; } - .k-resize-e { right: 0; } - .k-resize-s { bottom: 0; } - .k-resize-w { left: 0; } - } - -} +@use "@progress/kendo-theme-core/scss/components/window/_layout.scss" as *; @mixin kendo-window--layout() { diff --git a/packages/default/scss/window/_theme.scss b/packages/default/scss/window/_theme.scss index 4c7c061021f..5f98eb17e5b 100644 --- a/packages/default/scss/window/_theme.scss +++ b/packages/default/scss/window/_theme.scss @@ -1,44 +1,4 @@ -@use "../core/_index.scss" as *; -@use "../core/functions/index.import.scss" as *; -@use "./variables.scss" as *; - -@mixin kendo-window--theme-base() { - - // Window - .k-window { - @include fill( - $kendo-window-text, - $kendo-window-bg, - $kendo-window-border - ); - @include box-shadow( $kendo-window-shadow ); - } - - .k-window:focus, - .k-window.k-focus { - @include focus-indicator( $kendo-window-focus-shadow ); - } - - - // Titlebar - .k-window-titlebar { - @include fill( - $kendo-window-titlebar-text, - $kendo-window-titlebar-bg, - $kendo-window-titlebar-border, - $kendo-window-titlebar-gradient - ); - } - - // Window theme colors - @each $name, $color in $kendo-window-theme-colors { - .k-window-#{$name} .k-window-titlebar { - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - background-color: $color; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/window/_theme.scss" as *; @mixin kendo-window--theme() { diff --git a/packages/default/scss/window/_variables.scss b/packages/default/scss/window/_variables.scss index 4b3af56684f..27a3c67b32d 100644 --- a/packages/default/scss/window/_variables.scss +++ b/packages/default/scss/window/_variables.scss @@ -111,3 +111,36 @@ $kendo-window-theme-colors: ( "light": map.get($kendo-theme-colors, "light"), "dark": map.get($kendo-theme-colors, "dark") ) !default; + +@forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with ( + $kendo-window-border-width: $kendo-window-border-width, + $kendo-window-border-radius: $kendo-window-border-radius, + $kendo-window-font-family: $kendo-window-font-family, + $kendo-window-font-size: $kendo-window-font-size, + $kendo-window-line-height: $kendo-window-line-height, + $kendo-window-titlebar-padding-x: $kendo-window-titlebar-padding-x, + $kendo-window-titlebar-padding-y: $kendo-window-titlebar-padding-y, + $kendo-window-titlebar-border-width: $kendo-window-titlebar-border-width, + $kendo-window-titlebar-border-style: $kendo-window-titlebar-border-style, + $kendo-window-title-font-size: $kendo-window-title-font-size, + $kendo-window-title-line-height: $kendo-window-title-line-height, + $kendo-window-actions-gap: $kendo-window-actions-gap, + $kendo-window-action-opacity: $kendo-window-action-opacity, + $kendo-window-action-hover-opacity: $kendo-window-action-hover-opacity, + $kendo-window-inner-padding-x: $kendo-window-inner-padding-x, + $kendo-window-inner-padding-y: $kendo-window-inner-padding-y, + $kendo-window-buttongroup-padding-x: $kendo-window-buttongroup-padding-x, + $kendo-window-buttongroup-padding-y: $kendo-window-buttongroup-padding-y, + $kendo-window-buttongroup-border-width: $kendo-window-buttongroup-border-width, + $kendo-window-bg: $kendo-window-bg, + $kendo-window-text: $kendo-window-text, + $kendo-window-border: $kendo-window-border, + $kendo-window-shadow: $kendo-window-shadow, + $kendo-window-focus-shadow: $kendo-window-focus-shadow, + $kendo-window-titlebar-bg: $kendo-window-titlebar-bg, + $kendo-window-titlebar-text: $kendo-window-titlebar-text, + $kendo-window-titlebar-border: $kendo-window-titlebar-border, + $kendo-window-titlebar-gradient: $kendo-window-titlebar-gradient, + $kendo-window-sizes: $kendo-window-sizes, + $kendo-window-theme-colors: $kendo-window-theme-colors +); diff --git a/packages/default/scss/wizard/_layout.scss b/packages/default/scss/wizard/_layout.scss index d65a174e277..29bbd9a4bca 100644 --- a/packages/default/scss/wizard/_layout.scss +++ b/packages/default/scss/wizard/_layout.scss @@ -1,127 +1,4 @@ -@use "sass:list"; -@use "./variables.scss" as *; - -@mixin kendo-wizard--layout-base() { - - // Wizard - .k-wizard { - padding-block: $kendo-wizard-padding-y; - padding-inline: $kendo-wizard-padding-x; - border-width: $kendo-wizard-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-size: $kendo-wizard-font-size; - line-height: $kendo-wizard-line-height; - font-family: $kendo-wizard-font-family; - position: relative; - color: inherit; - background: none; - display: flex; - align-items: stretch; - overflow: hidden; - - .k-wizard-steps { - box-sizing: border-box; - display: flex; - overflow: hidden; - } - - .k-wizard-step { - box-sizing: border-box; - padding: calc(#{list.slash( $kendo-wizard-content-padding-x, 4 )} + 2px); - width: 100%; - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: space-between; - - &:focus, - &.k-focus { - outline-width: 1px; - outline-style: dotted; - outline-offset: -1px; - } - } - - .k-wizard-content { - box-sizing: border-box; - overflow-y: auto; - } - - .k-wizard-buttons { - margin-top: $kendo-wizard-content-padding-y; - box-sizing: border-box; - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: space-between; - flex-shrink: 0; - - .k-button { - margin-right: $kendo-wizard-buttons-margin-x; - } - - .k-wizard-pager { - vertical-align: middle; - } - } - - .k-wizard-buttons-right { - .k-button:last-of-type { - margin-right: 0; - } - } - - .k-stepper { - .k-step-list-vertical { - .k-step { - flex: 1 0 auto; - } - } - - .k-step-indicator { - flex-shrink: 0; - } - } - } - - .k-wizard-horizontal { - flex-direction: column; - - .k-wizard-steps { - margin-top: $kendo-wizard-content-padding-y; - } - - .k-wizard-steps, - .k-wizard-content { - flex: 1 1 auto; - } - } - - .k-wizard-vertical { - - .k-wizard-steps { - margin-left: $kendo-wizard-content-padding-x; - flex: 1 0 0%; - } - - .k-wizard-content { - flex: 1 1 0%; - } - - } - - .k-wizard-left { - flex-direction: row-reverse; - - .k-wizard-steps { - margin-right: $kendo-wizard-content-padding-x; - margin-left: 0; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/wizard/_layout.scss" as *; @mixin kendo-wizard--layout() { diff --git a/packages/default/scss/wizard/_theme.scss b/packages/default/scss/wizard/_theme.scss index 0c19b20f27e..b3e273b5c86 100644 --- a/packages/default/scss/wizard/_theme.scss +++ b/packages/default/scss/wizard/_theme.scss @@ -1,15 +1,4 @@ -@use "./variables.scss" as *; - -@mixin kendo-wizard--theme-base() { - - .k-wizard-step { - &:focus, - &.k-focus { - outline-color: $kendo-wizard-step-focus-border; - } - } - -} +@use "@progress/kendo-theme-core/scss/components/wizard/_theme.scss" as *; @mixin kendo-wizard--theme() { diff --git a/packages/default/scss/wizard/_variables.scss b/packages/default/scss/wizard/_variables.scss index 909900b5152..2a74854832a 100644 --- a/packages/default/scss/wizard/_variables.scss +++ b/packages/default/scss/wizard/_variables.scss @@ -34,3 +34,16 @@ $kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default; /// The outline of the focused Wizard step. /// @group wizard $kendo-wizard-step-focus-border: #656565 !default; + +@forward "@progress/kendo-theme-core/scss/components/wizard/_variables.scss" with ( + $kendo-wizard-padding-x: $kendo-wizard-padding-x, + $kendo-wizard-padding-y: $kendo-wizard-padding-y, + $kendo-wizard-content-padding-x: $kendo-wizard-content-padding-x, + $kendo-wizard-content-padding-y: $kendo-wizard-content-padding-y, + $kendo-wizard-buttons-margin-x: $kendo-wizard-buttons-margin-x, + $kendo-wizard-border-width: $kendo-wizard-border-width, + $kendo-wizard-font-size: $kendo-wizard-font-size, + $kendo-wizard-line-height: $kendo-wizard-line-height, + $kendo-wizard-font-family: $kendo-wizard-font-family, + $kendo-wizard-step-focus-border: $kendo-wizard-step-focus-border +); From a6775f0b500ab83e7c8f412a25c80cb31252054e Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Thu, 9 Jan 2025 11:44:08 +0200 Subject: [PATCH 06/10] chore: add placeholder motion module --- packages/bootstrap/scss/button/_variables.scss | 1 + .../bootstrap/scss/core/motion/index.import.scss | 1 + packages/bootstrap/scss/input/_layout.scss | 1 + packages/bootstrap/scss/treeview/_layout.scss | 1 + .../classic/scss/core/motion/index.import.scss | 1 + packages/core/scss/_variables.scss | 1 - .../core/scss/components/breadcrumb/_layout.scss | 1 + .../core/scss/components/panelbar/_layout.scss | 1 + packages/core/scss/index.scss | 1 + packages/core/scss/motion/index.import.scss | 7 +++++++ .../default/scss/core/motion/index.import.scss | 1 + packages/fluent/scss/chart-wizard/_layout.scss | 2 +- packages/fluent/scss/core/_index.scss | 6 +++--- packages/fluent/scss/core/_variables.scss | 15 --------------- packages/fluent/scss/core/motion/_index.scss | 2 ++ packages/fluent/scss/dock-manager/_layout.scss | 1 - .../material/scss/core/motion/index.import.scss | 1 + packages/material/scss/menu/_layout.scss | 1 + 18 files changed, 24 insertions(+), 21 deletions(-) create mode 100644 packages/bootstrap/scss/core/motion/index.import.scss create mode 100644 packages/classic/scss/core/motion/index.import.scss create mode 100644 packages/core/scss/motion/index.import.scss create mode 100644 packages/default/scss/core/motion/index.import.scss delete mode 100644 packages/fluent/scss/core/_variables.scss create mode 100644 packages/fluent/scss/core/motion/_index.scss create mode 100644 packages/material/scss/core/motion/index.import.scss diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss index 61c79f941e9..be96a2e3488 100644 --- a/packages/bootstrap/scss/button/_variables.scss +++ b/packages/bootstrap/scss/button/_variables.scss @@ -2,6 +2,7 @@ @use "sass:math"; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; +@use "../core/motion/index.import.scss" as *; // Button diff --git a/packages/bootstrap/scss/core/motion/index.import.scss b/packages/bootstrap/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..a3f2cac0df8 --- /dev/null +++ b/packages/bootstrap/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@forward "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/bootstrap/scss/input/_layout.scss b/packages/bootstrap/scss/input/_layout.scss index 85cd2f8d94f..daec563961e 100644 --- a/packages/bootstrap/scss/input/_layout.scss +++ b/packages/bootstrap/scss/input/_layout.scss @@ -1,4 +1,5 @@ @use "../core/_index.scss" as *; +@use "../core/motion/index.import.scss" as *; @use "./_variables.scss" as *; @use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *; diff --git a/packages/bootstrap/scss/treeview/_layout.scss b/packages/bootstrap/scss/treeview/_layout.scss index 6e8d9a9cc24..54dce7c6e9a 100644 --- a/packages/bootstrap/scss/treeview/_layout.scss +++ b/packages/bootstrap/scss/treeview/_layout.scss @@ -1,4 +1,5 @@ @use "../core/_index.scss" as *; +@use "../core/motion/index.import.scss" as *; @use "@progress/kendo-theme-core/scss/components/treeview/_layout.scss" as *; diff --git a/packages/classic/scss/core/motion/index.import.scss b/packages/classic/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..a3f2cac0df8 --- /dev/null +++ b/packages/classic/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@forward "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/core/scss/_variables.scss b/packages/core/scss/_variables.scss index 726597d2e65..57ca2137544 100644 --- a/packages/core/scss/_variables.scss +++ b/packages/core/scss/_variables.scss @@ -12,7 +12,6 @@ $kendo-enable-typography: false !default; $kendo-use-input-button-width: true !default; $kendo-use-input-spinner-width: true !default; $kendo-use-input-spinner-icon-offset: false !default; -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; // Equilateral triangle variables // stylelint-disable number-max-precision $equilateral-index: 1.7320508076 !default; diff --git a/packages/core/scss/components/breadcrumb/_layout.scss b/packages/core/scss/components/breadcrumb/_layout.scss index 75351111c7d..93fc64f6c9d 100644 --- a/packages/core/scss/components/breadcrumb/_layout.scss +++ b/packages/core/scss/components/breadcrumb/_layout.scss @@ -2,6 +2,7 @@ @use "../../mixins/index.import.scss" as *; @use "../../color-system/_constants.scss" as *; @use "../../color-system/_swatch-legacy.scss" as *; +@use "../../motion/index.import.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; diff --git a/packages/core/scss/components/panelbar/_layout.scss b/packages/core/scss/components/panelbar/_layout.scss index 44a834ffde4..6971e85102c 100644 --- a/packages/core/scss/components/panelbar/_layout.scss +++ b/packages/core/scss/components/panelbar/_layout.scss @@ -1,4 +1,5 @@ @use "../../color-system/_constants.scss" as *; +@use "../../motion/index.import.scss" as *; @use "../icons/_variables.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; diff --git a/packages/core/scss/index.scss b/packages/core/scss/index.scss index 567323efe2d..4ec1dbb62a5 100644 --- a/packages/core/scss/index.scss +++ b/packages/core/scss/index.scss @@ -6,6 +6,7 @@ @forward "./elevation/index.import.scss"; @forward "./typography/index.import.scss"; @forward "./border-radii/index.import.scss"; +@forward "./motion/index.import.scss"; @use "./color-system/index.import.scss" as *; @use "./mixins/index.import.scss" as *; diff --git a/packages/core/scss/motion/index.import.scss b/packages/core/scss/motion/index.import.scss new file mode 100644 index 00000000000..526c72f71e4 --- /dev/null +++ b/packages/core/scss/motion/index.import.scss @@ -0,0 +1,7 @@ +$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default; + +@mixin kendo-transition--styles() { + :root { + --kendo-transition: #{$kendo-transition}; + } +} diff --git a/packages/default/scss/core/motion/index.import.scss b/packages/default/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..a3f2cac0df8 --- /dev/null +++ b/packages/default/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@forward "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/fluent/scss/chart-wizard/_layout.scss b/packages/fluent/scss/chart-wizard/_layout.scss index 7efb2046060..afeb25dd76b 100644 --- a/packages/fluent/scss/chart-wizard/_layout.scss +++ b/packages/fluent/scss/chart-wizard/_layout.scss @@ -3,7 +3,7 @@ @use "../expansion-panel/_variables.scss" as *; @use "../core/spacing/_index.scss" as *; -@use "../core/_variables.scss" as *; +; @use "./_variables.scss" as *; @use "../core/typography/_index.scss" as *; diff --git a/packages/fluent/scss/core/_index.scss b/packages/fluent/scss/core/_index.scss index 7687e5837ed..d6dc985ab7d 100644 --- a/packages/fluent/scss/core/_index.scss +++ b/packages/fluent/scss/core/_index.scss @@ -16,8 +16,7 @@ // Radii @use "./border-radii/_index.scss" as *; -// Variables -@forward "./_variables.scss"; +@use "./motion/_index.scss" as *; @forward "@progress/kendo-theme-core/scss/index.scss" with ( $kendo-enable-color-system: $kendo-enable-color-system !default, @@ -47,7 +46,8 @@ $kendo-spacing: $kendo-spacing !default, // Radii $_default-border-radii: $kendo-border-radii, - $kendo-border-radii: $kendo-border-radii !default + $kendo-border-radii: $kendo-border-radii !default, + $kendo-transition: $kendo-transition !default, ); @forward "./color-system/_swatch-legacy.scss"; diff --git a/packages/fluent/scss/core/_variables.scss b/packages/fluent/scss/core/_variables.scss deleted file mode 100644 index b68fd0e82a6..00000000000 --- a/packages/fluent/scss/core/_variables.scss +++ /dev/null @@ -1,15 +0,0 @@ -// Options -$kendo-enable-typography: false !default; - -$kendo-use-input-button-width: true !default; -$kendo-use-input-spinner-width: true !default; -$kendo-use-input-spinner-icon-offset: false !default; - -// Default transition -$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default; - -@mixin kendo-transition--styles() { - :root { - --kendo-transition: #{$kendo-transition}; - } -} diff --git a/packages/fluent/scss/core/motion/_index.scss b/packages/fluent/scss/core/motion/_index.scss new file mode 100644 index 00000000000..faa13623638 --- /dev/null +++ b/packages/fluent/scss/core/motion/_index.scss @@ -0,0 +1,2 @@ +// Default transition +$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default; diff --git a/packages/fluent/scss/dock-manager/_layout.scss b/packages/fluent/scss/dock-manager/_layout.scss index 106f12a66f5..b0aaadf9f99 100644 --- a/packages/fluent/scss/dock-manager/_layout.scss +++ b/packages/fluent/scss/dock-manager/_layout.scss @@ -1,4 +1,3 @@ -@use "../core/_variables.scss" as *; @use "./_variables.scss" as *; @use "../core/typography/_index.scss" as *; diff --git a/packages/material/scss/core/motion/index.import.scss b/packages/material/scss/core/motion/index.import.scss new file mode 100644 index 00000000000..a3f2cac0df8 --- /dev/null +++ b/packages/material/scss/core/motion/index.import.scss @@ -0,0 +1 @@ +@forward "@progress/kendo-theme-core/scss/motion/index.import.scss"; diff --git a/packages/material/scss/menu/_layout.scss b/packages/material/scss/menu/_layout.scss index f5f2df7a5b9..f62f57029fc 100644 --- a/packages/material/scss/menu/_layout.scss +++ b/packages/material/scss/menu/_layout.scss @@ -1,5 +1,6 @@ @use "../_variables.scss" as *; @use "../core/_index.scss" as *; +@use "../core/motion/index.import.scss" as *; @use "@progress/kendo-theme-core/scss/components/menu/_layout.scss" as *; From 197229e766a9443b8d611cc24e8f3d3d80ce293b Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Fri, 10 Jan 2025 10:31:53 +0200 Subject: [PATCH 07/10] chore(fluent): override legacy color variables from core --- .../core/color-system/_swatch-legacy.scss | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/fluent/scss/core/color-system/_swatch-legacy.scss b/packages/fluent/scss/core/color-system/_swatch-legacy.scss index 27b43a12586..aef44a5cb74 100644 --- a/packages/fluent/scss/core/color-system/_swatch-legacy.scss +++ b/packages/fluent/scss/core/color-system/_swatch-legacy.scss @@ -88,6 +88,42 @@ $kendo-theme-colors: ( ), ) !default; +@forward "@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss" with ( + $kendo-body-bg: $kendo-body-bg, + $kendo-body-text: $kendo-body-text, + $kendo-component-bg: $kendo-component-bg, + $kendo-component-text: $kendo-component-text, + $kendo-component-border: $kendo-component-border, + $kendo-hover-bg: $kendo-hover-bg, + $kendo-hover-text: $kendo-hover-text, + $kendo-hover-border: $kendo-hover-border, + $kendo-selected-bg: $kendo-selected-bg, + $kendo-selected-text: $kendo-selected-text, + $kendo-selected-border: $kendo-selected-border, + $kendo-selected-hover-bg: $kendo-selected-hover-bg, + $kendo-selected-hover-text: $kendo-selected-hover-text, + $kendo-selected-hover-border: $kendo-selected-hover-border, + $kendo-focus-outline: $kendo-focus-outline, + $kendo-subtle-text: $kendo-subtle-text, + $kendo-link-text: $kendo-link-text, + $kendo-link-hover-text: $kendo-link-hover-text, + $kendo-invalid-bg: $kendo-invalid-bg, + $kendo-invalid-text: $kendo-invalid-text, + $kendo-invalid-border: $kendo-invalid-border, + $kendo-invalid-shadow: $kendo-invalid-shadow, + $kendo-valid-bg: $kendo-valid-bg, + $kendo-valid-text: $kendo-valid-text, + $kendo-valid-border: $kendo-valid-border, + $kendo-valid-shadow: $kendo-valid-shadow, + $kendo-disabled-bg: $kendo-disabled-bg, + $kendo-disabled-text: $kendo-disabled-text, + $kendo-disabled-border: $kendo-disabled-border, + $kendo-disabled-opacity: $kendo-disabled-opacity, + $kendo-disabled-filter: $kendo-disabled-filter, + $kendo-disabled-styling: $kendo-disabled-styling, + $kendo-theme-colors: $kendo-theme-colors, +); + :root { --kendo-body-bg: #{$kendo-body-bg}; --kendo-body-text: #{$kendo-body-text}; From ab833432d19e985e518c8e0655c3491d0ebf04cc Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Mon, 13 Jan 2025 16:27:41 +0200 Subject: [PATCH 08/10] chore: do not docs component variables from core --- .../scss/color-system/_swatch-legacy.scss | 5 - .../scss/components/appbar/_variables.scss | 32 --- .../scss/components/avatar/_variables.scss | 12 - .../scss/components/badge/_variables.scss | 46 ---- .../bottom-navigation/_variables.scss | 38 --- .../components/breadcrumb/_variables.scss | 122 --------- .../scss/components/button/_variables.scss | 118 -------- .../scss/components/calendar/_variables.scss | 192 ------------- .../scss/components/captcha/_variables.scss | 28 -- .../core/scss/components/card/_variables.scss | 110 -------- .../components/chart-wizard/_variables.scss | 22 -- .../core/scss/components/chat/_variables.scss | 128 --------- .../scss/components/checkbox/_variables.scss | 94 ------- .../core/scss/components/chip/_variables.scss | 84 ------ .../components/coloreditor/_variables.scss | 104 ------- .../components/colorgradient/_variables.scss | 136 ---------- .../components/colorpalette/_variables.scss | 30 --- .../scss/components/dataviz/_variables.scss | 19 -- .../scss/components/dialog/_variables.scss | 16 -- .../components/dock-manager/_variables.scss | 70 ----- .../scss/components/drawer/_variables.scss | 62 ----- .../components/dropdowntree/_variables.scss | 4 - .../scss/components/dropzone/_variables.scss | 38 --- .../scss/components/editor/_variables.scss | 42 --- .../expansion-panel/_variables.scss | 44 --- .../core/scss/components/fab/_variables.scss | 94 ------- .../components/filemanager/_variables.scss | 114 -------- .../scss/components/filter/_variables.scss | 16 -- .../components/floating-label/_variables.scss | 30 --- .../scss/components/forms/_variables.scss | 102 ------- .../scss/components/gantt/_variables.scss | 150 ----------- .../core/scss/components/grid/_variables.scss | 82 ------ .../scss/components/icons/_variables.scss | 20 -- .../scss/components/input/_variables.scss | 254 ------------------ .../core/scss/components/list/_variables.scss | 84 ------ .../scss/components/listbox/_variables.scss | 30 --- .../scss/components/listview/_variables.scss | 36 --- .../scss/components/loader/_variables.scss | 74 ----- .../core/scss/components/map/_variables.scss | 40 --- .../components/mediaplayer/_variables.scss | 26 -- .../components/menu-button/_variables.scss | 2 - .../core/scss/components/menu/_variables.scss | 138 ---------- .../scss/components/no-data/_variables.scss | 4 - .../components/notification/_variables.scss | 30 --- .../scss/components/orgchart/_variables.scss | 88 ------ .../core/scss/components/otp/_variables.scss | 24 -- .../scss/components/pager/_variables.scss | 90 ------- .../scss/components/panel/_variables.scss | 20 -- .../scss/components/panelbar/_variables.scss | 166 ------------ .../components/pdf-viewer/_variables.scss | 82 ------ .../scss/components/pivotgrid/_variables.scss | 142 ---------- .../scss/components/popover/_variables.scss | 52 ---- .../scss/components/popup/_variables.scss | 24 -- .../components/progressbar/_variables.scss | 44 --- .../scss/components/prompt/_variables.scss | 40 --- .../scss/components/radio/_variables.scss | 90 ------- .../scss/components/rating/_variables.scss | 32 --- .../scss/components/scheduler/_variables.scss | 158 ----------- .../components/scrollview/_variables.scss | 56 ---- .../scss/components/skeleton/_variables.scss | 8 - .../scss/components/slider/_variables.scss | 74 ----- .../components/split-button/_variables.scss | 18 -- .../scss/components/splitter/_variables.scss | 38 --- .../components/spreadsheet/_variables.scss | 164 +---------- .../scss/components/stepper/_variables.scss | 135 ---------- .../scss/components/switch/_variables.scss | 112 -------- .../scss/components/table/_variables.scss | 68 ----- .../scss/components/tabstrip/_variables.scss | 124 --------- .../scss/components/taskboard/_variables.scss | 150 ----------- .../components/tilelayout/_variables.scss | 20 -- .../components/time-marker/_variables.scss | 4 - .../scss/components/timeline/_variables.scss | 100 ------- .../scss/components/toolbar/_variables.scss | 94 ------- .../scss/components/tooltip/_variables.scss | 32 --- .../scss/components/treelist/_variables.scss | 4 - .../scss/components/treeview/_variables.scss | 98 ------- .../components/typography/_variables.scss | 153 ----------- .../scss/components/upload/_variables.scss | 60 ----- .../scss/components/window/_variables.scss | 60 ----- .../scss/components/wizard/_variables.scss | 20 -- 80 files changed, 1 insertion(+), 5565 deletions(-) diff --git a/packages/core/scss/color-system/_swatch-legacy.scss b/packages/core/scss/color-system/_swatch-legacy.scss index 0ce3600cc4f..7f3287721bd 100644 --- a/packages/core/scss/color-system/_swatch-legacy.scss +++ b/packages/core/scss/color-system/_swatch-legacy.scss @@ -106,15 +106,10 @@ $kendo-valid-shadow: null !default; // Disabled Styling -/// The background color of disabled items. $kendo-disabled-bg: null !default; -/// The text color of disabled items. $kendo-disabled-text: null !default; -/// The border color of disabled items. $kendo-disabled-border: null !default; -/// The opacity of disabled items. $kendo-disabled-opacity: null !default; -/// The filter of disabled items. $kendo-disabled-filter: null !default; $kendo-disabled-styling: ( diff --git a/packages/core/scss/components/appbar/_variables.scss b/packages/core/scss/components/appbar/_variables.scss index ca6cbad1efb..e17860aff8d 100644 --- a/packages/core/scss/components/appbar/_variables.scss +++ b/packages/core/scss/components/appbar/_variables.scss @@ -1,54 +1,22 @@ // AppBar -/// The horizontal margin of the AppBar. -/// @group appbar $kendo-appbar-margin-x: null !default; -/// The vertical margin of the AppBar. -/// @group appbar $kendo-appbar-margin-y: null !default; -/// The horizontal padding of the AppBar. -/// @group appbar $kendo-appbar-padding-x: null !default; -/// The vertical padding of the AppBar. -/// @group appbar $kendo-appbar-padding-y: null !default; -/// The width of the border around the AppBar. -/// @group appbar $kendo-appbar-border-width: null !default; -/// The z-index of the AppBar. -/// @group appbar $kendo-appbar-zindex: null !default; -/// The font family of the AppBar. -/// @group appbar $kendo-appbar-font-family: null !default; -/// The font size of the AppBar. -/// @group appbar $kendo-appbar-font-size: null !default; -/// The line height of the AppBar. -/// @group appbar $kendo-appbar-line-height: null !default; -/// The spacing between the AppBar sections. -/// @group appbar $kendo-appbar-gap: null !default; -/// The background color of the AppBar based on light theme color. -/// @group appbar $kendo-appbar-light-bg: null !default; -/// The text color of the AppBar based on light theme color. -/// @group appbar $kendo-appbar-light-text: null !default; -/// The background color of the AppBar based on dark theme color. -/// @group appbar $kendo-appbar-dark-bg: null !default; -/// The text color of the AppBar based on dark theme color. -/// @group appbar $kendo-appbar-dark-text: null !default; -/// The box shadow of the AppBar. -/// @group appbar $kendo-appbar-box-shadow: null !default; -/// The box shadow of the AppBar with bottom position. -/// @group appbar $kendo-appbar-bottom-box-shadow: null !default; diff --git a/packages/core/scss/components/avatar/_variables.scss b/packages/core/scss/components/avatar/_variables.scss index 96c6d32dc34..9b755c8954f 100644 --- a/packages/core/scss/components/avatar/_variables.scss +++ b/packages/core/scss/components/avatar/_variables.scss @@ -1,23 +1,11 @@ // Avatar -/// The border width of the Avatar. -/// @group avatar $kendo-avatar-border-width: null !default; -/// The font family of the Avatar. -/// @group avatar $kendo-avatar-font-family: null !default; -/// The font size of the Avatar. -/// @group avatar $kendo-avatar-font-size: null !default; -/// The line height of the Avatar. -/// @group avatar $kendo-avatar-line-height: null !default; -/// The sizes map of the Avatar. -/// @group avatar $kendo-avatar-sizes: null !default; -/// The theme colors map of the Avatar. -/// @group avatar $kendo-avatar-theme-colors: null !default; diff --git a/packages/core/scss/components/badge/_variables.scss b/packages/core/scss/components/badge/_variables.scss index 572d62b2736..226f732e2c9 100644 --- a/packages/core/scss/components/badge/_variables.scss +++ b/packages/core/scss/components/badge/_variables.scss @@ -1,79 +1,33 @@ // Badge -/// The width of the border around the Badge. -/// @group badge $kendo-badge-border-width: null !default; -/// The border radius of the Badge. -/// @group badge $kendo-badge-border-radius: null !default; -/// The horizontal padding of the Badge. -/// @group badge $kendo-badge-padding-x: null !default; -/// The horizontal padding of the small Badge. -/// @group badge $kendo-badge-sm-padding-x: null !default; -/// The horizontal padding of the medium Badge. -/// @group badge $kendo-badge-md-padding-x: null !default; -/// The horizontal padding of the large Badge. -/// @group badge $kendo-badge-lg-padding-x: null !default; -/// The vertical padding of the Badge. -/// @group badge $kendo-badge-padding-y: null !default; -/// The vertical padding of the small Badge. -/// @group badge $kendo-badge-sm-padding-y: null !default; -/// The vertical padding of the medium Badge. -/// @group badge $kendo-badge-md-padding-y: null !default; -/// The vertical padding of the large Badge. -/// @group badge $kendo-badge-lg-padding-y: null !default; -/// The font sizes of the Badge. -/// @group badge $kendo-badge-font-size: null !default; -/// The font size of the small Badge. -/// @group badge $kendo-badge-sm-font-size: null !default; -/// The font size of the medium Badge. -/// @group badge $kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit )!default; -/// The font size of the large Badge. -/// @group badge $kendo-badge-lg-font-size: null !default; -/// The line heights used along with the $kendo-font-size variable. -/// @group badge $kendo-badge-line-height: null !default; -/// The line height used along with the $kendo-font-size variable of the small Badge. -/// @group badge $kendo-badge-sm-line-height: null !default; -/// The line height used along with the $kendo-font-size variable of the medium Badge. -/// @group badge $kendo-badge-md-line-height: null !default; -/// The line height used along with the $kendo-font-size variable of the large Badge. -/// @group badge $kendo-badge-lg-line-height: null !default; -/// The calculated minimum width of the circular Badge. -/// @group badge $kendo-badge-min-width: null !default; -/// The calculated minimum width of the small circular Badge. -/// @group badge $kendo-badge-sm-min-width: null !default; -/// The calculated minimum width of the medium circular Badge. -/// @group badge $kendo-badge-md-min-width: null !default; -/// The calculated minimum width of the large circular Badge. -/// @group badge $kendo-badge-lg-min-width: null !default; -/// The sizes map for the Badge. -/// @group badge $kendo-badge-sizes: null !default; diff --git a/packages/core/scss/components/bottom-navigation/_variables.scss b/packages/core/scss/components/bottom-navigation/_variables.scss index 4fb48aa513e..eb7667ce294 100644 --- a/packages/core/scss/components/bottom-navigation/_variables.scss +++ b/packages/core/scss/components/bottom-navigation/_variables.scss @@ -1,62 +1,24 @@ // BottomNavigation -/// The horizontal padding of the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-padding-x: null !default; -/// The vertical padding of the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-padding-y: null !default; -/// The spacing between the BottomNavigation items. -/// @group bottom-navigation $kendo-bottom-nav-gap: null !default; -/// The width of the border around the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-border-width: null !default; -/// The font family of the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-font-family: null !default; -/// The font size of the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-font-size: null !default; -/// The line height of the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-line-height: null !default; -/// The letter spacing of the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-letter-spacing: null !default; -/// The horizontal padding of the BottomNavigation item. -/// @group bottom-navigation $kendo-bottom-nav-item-padding-x: null !default; -/// The vertical padding of the BottomNavigation item. -/// @group bottom-navigation $kendo-bottom-nav-item-padding-y: null !default; -/// The minimum width of the BottomNavigation item. -/// @group bottom-navigation $kendo-bottom-nav-item-min-width: null !default; -/// The maximum width of the BottomNavigation item. -/// @group bottom-navigation $kendo-bottom-nav-item-max-width: null !default; -/// The minimum height of the BottomNavigation item. -/// @group bottom-navigation $kendo-bottom-nav-item-min-height: null !default; -/// The border radius of the BottomNavigation item. -/// @group bottom-navigation $kendo-bottom-nav-item-border-radius: null !default; -/// The spacing of the BottomNavigation item. -/// @group bottom-navigation $kendo-bottom-nav-item-gap: null !default; -/// The box shadow of the BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-shadow: null !default; -/// The text color of the flat BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-flat-text: null !default; -/// The background color of the flat BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-flat-bg: null !default; -/// The border color of the flat BottomNavigation. -/// @group bottom-navigation $kendo-bottom-nav-flat-border: null !default; diff --git a/packages/core/scss/components/breadcrumb/_variables.scss b/packages/core/scss/components/breadcrumb/_variables.scss index b5ba1f33c5d..b7b64333362 100644 --- a/packages/core/scss/components/breadcrumb/_variables.scss +++ b/packages/core/scss/components/breadcrumb/_variables.scss @@ -1,205 +1,83 @@ // Breadcrumb -/// The width of the border around the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-border-width: null !default; -/// The horizontal margin of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-margin-x: null !default; -/// The vertical margin of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-margin-y: null !default; -/// The horizontal padding of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-padding-x: null !default; -/// The vertical padding of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-padding-y: null !default; -/// The font family of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-font-family: null !default; -/// The font size of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-font-size: null !default; -/// The font size of the small Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-sm-font-size: null !default; -/// The font size of the medium Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-md-font-size: null !default; -/// The font size of the large Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-lg-font-size: null !default; -/// The line-height of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-line-height: null !default; -/// The line-height of the small Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-sm-line-height: null !default; -/// The line-height of the medium Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-md-line-height: null !default; -/// The line-height of the height Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-lg-line-height: null !default; -/// The base background of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-bg: null !default; -/// The base text color of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-text: null !default; -/// The base border color of the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-border: null !default; -/// The box shadow of the focused Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-focus-shadow: null !default; -/// The horizontal padding of the Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-padding-x: null !default; -/// The horizontal padding of the small Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-sm-link-padding-x: null !default; -/// The horizontal padding of the medium Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-md-link-padding-x: null !default; -/// The horizontal padding of the large Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-lg-link-padding-x: null !default; -/// The vertical padding of the Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-padding-y: null !default; -/// The vertical padding of the small Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-sm-link-padding-y: null !default; -/// The vertical padding of the medium Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-md-link-padding-y: null !default; -/// The vertical padding of the large Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-lg-link-padding-y: null !default; -/// The border-radius of the Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-border-radius: null !default; -/// The vertical padding of the Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-icon-link-padding-y: null !default; -/// The vertical padding of the small Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-sm-icon-link-padding-y: null !default; -/// The vertical padding of the medium Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-md-icon-link-padding-y: null !default; -/// The vertical padding of the large Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-lg-icon-link-padding-y: null !default; -/// The horizontal padding of the Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-icon-link-padding-x: null !default; -/// The horizontal padding of the small Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-sm-icon-link-padding-x: null !default; -/// The horizontal padding of the medium Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-md-icon-link-padding-x: null !default; -/// The horizontal padding of the large Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-lg-icon-link-padding-x: null !default; -/// The text color of the Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-initial-text: null !default; -/// The spacing of the Breadcrumb link icon. -/// @group breadcrumb $kendo-breadcrumb-link-icon-spacing: null !default; -/// The background color of the Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-bg: null !default; -/// The text color of the Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-text: null !default; -/// The border color of the Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-border: null !default; -/// The background color of the hovered Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-hover-bg: null !default; -/// The text color of the hovered Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-hover-text: null !default; -/// The border color of the hovered Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-hover-border: null !default; -/// The background color of the focused Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-focus-bg: null !default; -/// The text color of the focused Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-focus-text: null !default; -/// The border color of the focused Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-focus-border: null !default; -/// The box shadow of the focused Breadcrumb link. -/// @group breadcrumb $kendo-breadcrumb-link-focus-shadow: null !default; -/// The background color of the Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-bg: null !default; -/// The text color of the Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-text: null !default; -/// The border color of the Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-border: null !default; -/// The background color of the hovered Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-hover-bg: null !default; -/// The text color of the hovered Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-hover-text: null !default; -/// The border color of the hovered Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-hover-border: null !default; -/// The background color of the focused Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-focus-bg: null !default; -/// The text color of the focused Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-focus-text: null !default; -/// The border color of the focused Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-focus-border: null !default; -/// The box shadow of the focused Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-root-link-focus-shadow: null !default; -/// The background color of the current Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-current-item-bg: null !default; -/// The text color of the current Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-current-item-text: null !default; -/// The border color of the current Breadcrumb root link. -/// @group breadcrumb $kendo-breadcrumb-current-item-border: null !default; -/// The sizes map for the Breadcrumb. -/// @group breadcrumb $kendo-breadcrumb-sizes: null !default; diff --git a/packages/core/scss/components/button/_variables.scss b/packages/core/scss/components/button/_variables.scss index d9d79d60960..061aeae0e43 100644 --- a/packages/core/scss/components/button/_variables.scss +++ b/packages/core/scss/components/button/_variables.scss @@ -1,185 +1,79 @@ // Button -/// The width of the border around the Button. -/// @group button $kendo-button-border-width: null !default; -/// The border radius of the Button. -/// @group button $kendo-button-border-radius: null !default; -/// The horizontal padding of the Button. -/// @group button $kendo-button-padding-x: null !default; -/// The horizontal padding of the small Button. -/// @group button $kendo-button-sm-padding-x: null !default; -/// The horizontal padding of the medium Button. -/// @group button $kendo-button-md-padding-x: null !default; -/// The horizontal padding of the large Button. -/// @group button $kendo-button-lg-padding-x: null !default; -/// The vertical padding of the Button. -/// @group button $kendo-button-padding-y: null !default; -/// The vertical padding of the small Button. -/// @group button $kendo-button-sm-padding-y: null !default; -/// The vertical padding of the medium Button. -/// @group button $kendo-button-md-padding-y: null !default; -/// The vertical padding of the large Button. -/// @group button $kendo-button-lg-padding-y: null !default; -/// The font family of the Button. -/// @group button $kendo-button-font-family: null !default; -/// The font size of the Button. -/// @group button $kendo-button-font-size: null !default; -/// The font size of the small Button. -/// @group button $kendo-button-sm-font-size: null !default; -/// The font size of the medium Button. -/// @group button $kendo-button-md-font-size: null !default; -/// The font size of the large Button. -/// @group button $kendo-button-lg-font-size: null !default; -/// The line height used along with the $kendo-font-size the. -/// @group button $kendo-button-line-height: null !default; -/// The line height used along with the $kendo-font-size the of the small Button. -/// @group button $kendo-button-sm-line-height: null !default; -/// The line height used along with the $kendo-font-size the of the medium Button. -/// @group button $kendo-button-md-line-height: null !default; -/// The line height used along with the $kendo-font-size the of the large Button. -/// @group button $kendo-button-lg-line-height: null !default; -/// The calculated height of the Button. -/// @group button $kendo-button-calc-size: null !default; $kendo-button-sm-calc-size: null !default; $kendo-button-md-calc-size: null !default; $kendo-button-lg-calc-size: null !default; -/// The calculated inner height of the Button excluding the border width. -/// @group button $kendo-button-inner-calc-size: null !default; $kendo-button-sm-inner-calc-size: null !default; $kendo-button-md-inner-calc-size: null !default; $kendo-button-lg-inner-calc-size: null !default; -/// The sizes map for the Button. -/// @group button $kendo-button-sizes: null !default; -/// The theme colors map for the Button. -/// @group button $kendo-button-theme-colors: null !default; -/// The base background of the Button. -/// @group button $kendo-button-bg: null !default; -/// The base text color of the Button. -/// @group button $kendo-button-text: null !default; -/// The base border color of the Button. -/// @group button $kendo-button-border: null !default; -/// The base background gradient of the Button. -/// @group button $kendo-button-gradient: null !default; -/// The base shadow of the Button. -/// @group button $kendo-button-shadow: null !default; -/// The base background of the hovered Button. -/// @group button $kendo-button-hover-bg: null !default; -/// The base text color of the hovered Button. -/// @group button $kendo-button-hover-text: null !default; -/// The base border color of the hovered Button. -/// @group button $kendo-button-hover-border: null !default; -/// The base background gradient of the hovered Button. -/// @group button $kendo-button-hover-gradient: null !default; -/// The base shadow of the hovered Button. -/// @group button $kendo-button-hover-shadow: null !default; -/// The base background color of the active Button. -/// @group button $kendo-button-active-bg: null !default; -/// The base text color of the active Button. -/// @group button $kendo-button-active-text: null !default; -/// The base border color of the active Button. -/// @group button $kendo-button-active-border: null !default; -/// The base background gradient of the active Button. -/// @group button $kendo-button-active-gradient: null !default; -/// The base shadow of the active Button. -/// @group button $kendo-button-active-shadow: null !default; -/// The base background color of the selected Button. -/// @group button $kendo-button-selected-bg: null !default; -/// The text color of the selected Button. -/// @group button $kendo-button-selected-text: null !default; -/// The border color of the selected Button. -/// @group button $kendo-button-selected-border: null !default; -/// The background gradient of the selected Button. -/// @group button $kendo-button-selected-gradient: null !default; -/// The base shadow of the selected Button. -/// @group button $kendo-button-selected-shadow: null !default; -/// The base background of the focused Button. -/// @group button $kendo-button-focus-bg: null !default; -/// The base text color of the focused Button. -/// @group button $kendo-button-focus-text: null !default; -/// The base border color of the focused Button. -/// @group button $kendo-button-focus-border: null !default; -/// The base background gradient of the focused Button. -/// @group button $kendo-button-focus-gradient: null !default; -/// The base shadow of the focused Button. -/// @group button $kendo-button-focus-shadow: null !default; -/// The base background of the disabled Button. -/// @group button $kendo-button-disabled-bg: null !default; -/// The base text color of the disabled Button. -/// @group button $kendo-button-disabled-text: null !default; -/// The base border color of the disabled Button. -/// @group button $kendo-button-disabled-border: null !default; -/// The base background gradient of the disabled Button. -/// @group button $kendo-button-disabled-gradient: null !default; -/// The base shadow of the disabled Button. -/// @group button $kendo-button-disabled-shadow: null !default; // Solid Button @@ -214,22 +108,10 @@ $kendo-link-button-shadow-opacity: null !default; // Clear Button $kendo-clear-button-focus-opacity: null !default; -/// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button. -/// @group button $kendo-flat-button-hover-opacity: null !default; -/// The overlay opacity of the focused flat Button. Used to create a background for the flat Button. -/// @group button $kendo-flat-button-focus-opacity: null !default; -/// The overlay opacity of the active flat Button. Used to create background for the flat Button. -/// @group button $kendo-flat-button-active-opacity: null !default; -/// The overlay opacity of the selected flat Button. Used to create background for the flat Button. -/// @group button $kendo-flat-button-selected-opacity: null !default; -/// The opacity of the flat Button focus ring. Used to create a border for the flat Button. -/// @group button $kendo-flat-button-focus-ring-opacity: null !default; -/// The color transition of the flat Button. -/// @group button $kendo-button-transition: null !default; diff --git a/packages/core/scss/components/calendar/_variables.scss b/packages/core/scss/components/calendar/_variables.scss index c65042de29c..37a197068c7 100644 --- a/packages/core/scss/components/calendar/_variables.scss +++ b/packages/core/scss/components/calendar/_variables.scss @@ -1,334 +1,142 @@ // Calendar -/// The width of the border around the Calendar. -/// @group calendar $kendo-calendar-border-width: null !default; -/// The font family of the Calendar. -/// @group calendar $kendo-calendar-font-family: null !default; -/// The font size of the Calendar. -/// @group calendar $kendo-calendar-font-size: null !default; -/// The line height of the Calendar. -/// @group calendar $kendo-calendar-line-height: null !default; -/// The size of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-size: null !default; -/// The background color of the Calendar. -/// @group calendar $kendo-calendar-bg: null !default; -/// The text color of the Calendar. -/// @group calendar $kendo-calendar-text: null !default; -/// The border color of the Calendar. -/// @group calendar $kendo-calendar-border: null !default; -/// The horizontal padding of the header in the Calendar. -/// @group calendar $kendo-calendar-header-padding-x: null !default; -/// The vertical padding of the header in the Calendar. -/// @group calendar $kendo-calendar-header-padding-y: null !default; -/// The border width of the header in the Calendar. -/// @group calendar $kendo-calendar-header-border-width: null !default; -/// The background color of the header in the Calendar. -/// @group calendar $kendo-calendar-header-bg: null !default; -/// The text color of the header in the Calendar. -/// @group calendar $kendo-calendar-header-text: null !default; -/// The border color of the header in the Calendar. -/// @group calendar $kendo-calendar-header-border: null !default; -/// The gradient of the header in the Calendar. -/// @group calendar $kendo-calendar-header-gradient: null !default; // TODO: variable is used, but the selector using it is not! Potentially remove; -/// The shadow of the header in the Calendar. -/// @group calendar $kendo-calendar-header-shadow: null !default; -/// The gap between the items in the navigation of the Calendar. -/// @group calendar $kendo-calendar-nav-gap: null !default; -/// The horizontal padding of the footer in the Calendar. -/// @group calendar $kendo-calendar-footer-padding-x: null !default; -/// The vertical padding of the footer in the Calendar. -/// @group calendar $kendo-calendar-footer-padding-y: null !default; -/// The horizontal padding of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-padding-x: null !default; -/// The vertical padding of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-padding-y: null !default; -/// The line height of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-line-height: null !default; -/// The border radius of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-border-radius: null !default; -/// The horizontal padding of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-padding-x: null !default; -/// The vertical padding of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-padding-y: null !default; -/// The width of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-width: null !default; -/// The height of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-height: null !default; -/// The font size of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-font-size: null !default; -/// The line height of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-line-height: null !default; -/// The background color of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-bg: null !default; -/// The text color of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-text: null !default; -/// The opacity of the header cells in the Calendar. -/// @group calendar $kendo-calendar-header-cell-opacity: null !default; -/// The horizontal padding of the caption in the Calendar. -/// @group calendar $kendo-calendar-caption-padding-x: null !default; -/// The vertical padding of the caption in the Calendar. -/// @group calendar $kendo-calendar-caption-padding-y: null !default; -/// The height of the caption in the Calendar. -/// @group calendar $kendo-calendar-caption-height: null !default; -/// The font size of the caption in the Calendar. -/// @group calendar $kendo-calendar-caption-font-size: null !default; -/// The line height of the caption in the Calendar. -/// @group calendar $kendo-calendar-caption-line-height: null !default; -/// The font weight of the caption in the Calendar. -/// @group calendar $kendo-calendar-caption-font-weight: null !default; -/// The font size of the week number cells in the Calendar. -/// @group calendar $kendo-calendar-week-number-font-size: null !default; -/// The width of the Calendar view. -/// @group calendar $kendo-calendar-view-width: null !default; -/// The height of the Calendar view. -/// @group calendar $kendo-calendar-view-height: null !default; -/// The gap between the items in the Calendar view. -/// @group calendar $kendo-calendar-view-gap: null !default; -/// The background color of the weekend cells in the Calendar. -/// @group calendar $kendo-calendar-weekend-bg: null !default; -/// The text color of the weekend cells in the Calendar. -/// @group calendar $kendo-calendar-weekend-text: null !default; -/// The style of the current day in the Calendar. -/// @group calendar $kendo-calendar-today-style: null !default; -/// The color of the current day in the Calendar. -/// @group calendar $kendo-calendar-today-color: null !default; -/// The background color of the week number cells in the Calendar. -/// @group calendar $kendo-calendar-week-number-bg: null !default; -/// The text color of the week number cells in the Calendar. -/// @group calendar $kendo-calendar-week-number-text: null !default; -/// The background color of the preceding/subsequent month cells in the Calendar. -/// @group calendar $kendo-calendar-other-month-bg: null !default; -/// The text color of the preceding/subsequent month cells in the Calendar. -/// @group calendar $kendo-calendar-other-month-text: null !default; -/// The background color of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-bg: null !default; -/// The text color of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-text: null !default; -/// The border color of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-border: null !default; -/// The gradient of the cells in the Calendar. -/// @group calendar $kendo-calendar-cell-gradient: null !default; -/// The background color of the hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-hover-bg: null !default; -/// The text color of the hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-hover-text: null !default; -/// The border color of the hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-hover-border: null !default; -/// The gradient of the hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-hover-gradient: null !default; -/// The background color of the selected cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-bg: null !default; -/// The text color of the selected cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-text: null !default; -/// The border color of the selected cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-border: null !default; -/// The gradient of the selected cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-gradient: null !default; -/// The background color of the selected and hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-hover-bg: null !default; -/// The text color of the selected and hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-hover-text: null !default; -/// The border color of the selected and hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-hover-border: null !default; -/// The gradient of the selected and hovered cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-hover-gradient: null !default; -/// The shadow of the focused cells in the Calendar. -/// @group calendar $kendo-calendar-cell-focus-shadow: null !default; -/// The shadow of the selected and focused cells in the Calendar. -/// @group calendar $kendo-calendar-cell-selected-focus-shadow: null !default; -/// The width of the Calendar navigation. -/// @group calendar $kendo-calendar-navigation-width: null !default; -/// The height of the items in the Calendar navigation. -/// @group calendar $kendo-calendar-navigation-item-height: null !default; -/// The background color of the Calendar navigation. -/// @group calendar $kendo-calendar-navigation-bg: null !default; -/// The text color of the Calendar navigation. -/// @group calendar $kendo-calendar-navigation-text: null !default; -/// The border color of the Calendar navigation. -/// @group calendar $kendo-calendar-navigation-border: null !default; -/// The text color of the hovered items in the Calendar navigation. -/// @group calendar $kendo-calendar-navigation-hover-text: null !default; -/// The horizontal padding of the header in the Infinite Calendar. -/// @group calendar $kendo-infinite-calendar-header-padding-x: null !default; -/// The vertical padding of the header in the Infinite Calendar. -/// @group calendar $kendo-infinite-calendar-header-padding-y: null !default; -/// The horizontal padding of the Calendar view in the Infinite Calendar. -/// @group calendar $kendo-infinite-calendar-view-padding-x: null !default; -/// The vertical padding of the Calendar view in the Infinite Calendar. -/// @group calendar $kendo-infinite-calendar-view-padding-y: null !default; -/// The height of the Calendar view in the Infinite Calendar. -/// @group calendar $kendo-infinite-calendar-view-height: null !default; // Multiview calendar -/// The border radius of the range cells in the Multiview Calendar. -/// @group calendar $kendo-calendar-range-cell-border-radius: null !default; // Calendar sizes -/// The font size of the small Calendar. -/// @group calendar $kendo-calendar-sm-font-size: null !default; -/// The line height of the small Calendar. -/// @group calendar $kendo-calendar-sm-line-height: null !default; -/// The size of the cells in the small Calendar. -/// @group calendar $kendo-calendar-sm-cell-size: null !default; -/// The horizontal padding of the cells in the small Calendar. -/// @group calendar $kendo-calendar-sm-cell-padding-x: null !default; -/// The vertical padding of the cells in the small Calendar. -/// @group calendar $kendo-calendar-sm-cell-padding-y: null !default; -/// The font size of the medium Calendar. -/// @group calendar $kendo-calendar-md-font-size: null !default; -/// The line height of the medium Calendar. -/// @group calendar $kendo-calendar-md-line-height: null !default; -/// The size of the cells in the medium Calendar. -/// @group calendar $kendo-calendar-md-cell-size: null !default; -/// The horizontal padding of the cells in the medium Calendar. -/// @group calendar $kendo-calendar-md-cell-padding-x: null !default; -/// The vertical padding of the cells in the medium Calendar. -/// @group calendar $kendo-calendar-md-cell-padding-y: null !default; -/// The font size of the large Calendar. -/// @group calendar $kendo-calendar-lg-font-size: null !default; -/// The line height of the large Calendar. -/// @group calendar $kendo-calendar-lg-line-height: null !default; -/// The size of the cells in the large Calendar. -/// @group calendar $kendo-calendar-lg-cell-size: null !default; -/// The horizontal padding of the cells in the large Calendar. -/// @group calendar $kendo-calendar-lg-cell-padding-x: null !default; -/// The vertical padding of the cells in the large Calendar. -/// @group calendar $kendo-calendar-lg-cell-padding-y: null !default; -/// The sizes Map of the Calendar. -/// @group calendar $kendo-calendar-sizes: null !default; diff --git a/packages/core/scss/components/captcha/_variables.scss b/packages/core/scss/components/captcha/_variables.scss index 7a17f63a50e..27b5de61902 100644 --- a/packages/core/scss/components/captcha/_variables.scss +++ b/packages/core/scss/components/captcha/_variables.scss @@ -1,47 +1,19 @@ // Captcha -/// The spacer of the Captcha. -/// @group captcha $kendo-captcha-spacer: null !default; -/// The width of the Captcha. -/// @group captcha $kendo-captcha-width: null !default; -/// The font family of the Captcha. -/// @group captcha $kendo-captcha-font-family: null !default; -/// The font size of the Captcha. -/// @group captcha $kendo-captcha-font-size: null !default; -/// The line height of the Captcha. -/// @group captcha $kendo-captcha-line-height: null !default; -/// The gap of the Captcha. -/// @group captcha $kendo-captcha-gap: null !default; -/// The background color of the Captcha. -/// @group captcha $kendo-captcha-bg: null !default; -/// The text color of the Captcha. -/// @group captcha $kendo-captcha-text: null !default; -/// The border color of the Captcha. -/// @group captcha $kendo-captcha-border: null !default; -/// The gap of the Captcha image wrapper. -/// @group captcha $kendo-captcha-image-wrap-gap: null !default; -/// The gap of the Captcha image controls. -/// @group captcha $kendo-captcha-image-controls-gap: null !default; -/// The top margin of the Captcha validation message. -/// @group captcha $kendo-captcha-validation-message-margin-top: null !default; -/// The font size of the Captcha validation message. -/// @group captcha $kendo-captcha-validation-message-font-size: null !default; -/// The font style of the Captcha validation message. -/// @group captcha $kendo-captcha-validation-message-font-style: null !default; diff --git a/packages/core/scss/components/card/_variables.scss b/packages/core/scss/components/card/_variables.scss index 8fcf570e57d..040695783f5 100644 --- a/packages/core/scss/components/card/_variables.scss +++ b/packages/core/scss/components/card/_variables.scss @@ -1,182 +1,72 @@ // Card -/// The horizontal padding of the Card. -/// @group card $kendo-card-padding-x: null !default; -/// The vertical padding of the Card. -/// @group card $kendo-card-padding-y: null !default; -/// The width of the border around the Card. -/// @group card $kendo-card-border-width: null !default; -/// The border radius of the Card. -/// @group card $kendo-card-border-radius: null !default; -/// The inner border radius of the Card. -/// @group card $kendo-card-inner-border-radius: null !default; -/// The font family of the Card. -/// @group card $kendo-card-font-family: null !default; -/// The font size of the Card. -/// @group card $kendo-card-font-size: null !default; -/// The line height of the Card. -/// @group card $kendo-card-line-height: null !default; -/// The spacing between the Cards in the Card deck. -/// @group card $kendo-card-deck-gap: null !default; -/// The background color of the Card. -/// @group card $kendo-card-bg: null !default; -/// The text color of the Card. -/// @group card $kendo-card-text: null !default; -/// The border color of the Card. -/// @group card $kendo-card-border: null !default; -/// The shadow of the Card. -/// @group card $kendo-card-shadow: null !default; -/// The background color of the focused Card. -/// @group card $kendo-card-focus-bg: null !default; -/// The text color of the focused Card. -/// @group card $kendo-card-focus-text: null !default; -/// The border color of the focused Card. -/// @group card $kendo-card-focus-border: null !default; // TODO: double-check: the default theme is not supposed to elevate the Card on focus -/// The shadow of the focused Card. -/// @group card $kendo-card-focus-shadow: null !default; -/// The horizontal padding of the Card header. -/// @group card $kendo-card-header-padding-x: null !default; -/// The vertical padding of the Card header. -/// @group card $kendo-card-header-padding-y: null !default; -/// The bottom border width of the Card header. -/// @group card $kendo-card-header-border-width: null !default; -/// The background color of the Card header. -/// @group card $kendo-card-header-bg: null !default; -/// The text color of the Card header. -/// @group card $kendo-card-header-text: null !default; -/// The border color of the Card header. -/// @group card $kendo-card-header-border: null !default; -/// The horizontal padding of the Card body. -/// @group card $kendo-card-body-padding-x: null !default; -/// The vertical padding of the Card body. -/// @group card $kendo-card-body-padding-y: null !default; -/// The horizontal padding of the Card footer. -/// @group card $kendo-card-footer-padding-x: null !default; -/// The vertical padding of the Card footer. -/// @group card $kendo-card-footer-padding-y: null !default; -/// The top border width of the Card footer. -/// @group card $kendo-card-footer-border-width: null !default; -/// The background color of the Card footer. -/// @group card $kendo-card-footer-bg: null !default; -/// The text color of the Card footer. -/// @group card $kendo-card-footer-text: null !default; -/// The border color of the Card footer. -/// @group card $kendo-card-footer-border: null !default; -/// The bottom margin of the Card title. -/// @group card $kendo-card-title-margin-bottom: null !default; -/// The font size of the Card title. -/// @group card $kendo-card-title-font-size: null !default; -/// The font family of the Card title. -/// @group card $kendo-card-title-font-family: null !default; -/// The line height of the Card title. -/// @group card $kendo-card-title-line-height: null !default; -/// The font weight of the Card title. -/// @group card $kendo-card-title-font-weight: null !default; -/// The letter spacing of the Card title. -/// @group card $kendo-card-title-letter-spacing: null !default; -/// The bottom margin of the Card subtitle. -/// @group card $kendo-card-subtitle-margin-bottom: null !default; -/// The font size of the Card subtitle. -/// @group card $kendo-card-subtitle-font-size: null !default; -/// The font family of the Card subtitle. -/// @group card $kendo-card-subtitle-font-family: null !default; -/// The line height of the Card subtitle. -/// @group card $kendo-card-subtitle-line-height: null !default; -/// The font weight of the Card subtitle. -/// @group card $kendo-card-subtitle-font-weight: null !default; -/// The letter spacing of the Card subtitle. -/// @group card $kendo-card-subtitle-letter-spacing: null !default; -/// The text color of the Card subtitle. -/// @group card $kendo-card-subtitle-text: null !default; -/// The maximum width of the Card image. -/// @group card $kendo-card-img-max-width: null !default; -/// The size of the Avatar in the Card. -/// @group card $kendo-card-avatar-size: null !default; -/// The spacing between the Avatar and the text in the Card. -/// @group card $kendo-card-avatar-spacing: null !default; -/// The horizontal padding of the Card actions. -/// @group card $kendo-card-actions-padding-x: null !default; -/// The vertical padding of the Card actions. -/// @group card $kendo-card-actions-padding-y: null !default; -/// The top border width of the Card actions. -/// @group card $kendo-card-actions-border-width: null !default; -/// The spacing between the Card actions. -/// @group card $kendo-card-actions-gap: null !default; -/// The border radius of the scroll button in the Card deck. -/// @group card $kendo-card-deck-scroll-button-radius: null !default; -/// The border radius of the scroll button in the Card deck. -/// @group card $kendo-card-deck-scroll-button-offset: null !default; -/// The width of the Card callout. -/// @group card $kendo-card-callout-width: null !default; -/// The height of the Card callout. -/// @group card $kendo-card-callout-height: null !default; diff --git a/packages/core/scss/components/chart-wizard/_variables.scss b/packages/core/scss/components/chart-wizard/_variables.scss index 95be4b83d45..45a8291561d 100644 --- a/packages/core/scss/components/chart-wizard/_variables.scss +++ b/packages/core/scss/components/chart-wizard/_variables.scss @@ -1,38 +1,16 @@ // Chart wizard -/// The color of the area around the chart type icon. -/// @group chart-wizard $kendo-chart-wizard-icon-area-color: null !default; -/// The background color of the area around the chart type icon. -/// @group chart-wizard $kendo-chart-wizard-icon-area-bg: null !default; -/// The border radius of the area around the chart type icon. -/// @group chart-wizard $kendo-chart-wizard-icon-area-border-radius: null !default; -/// The padding of the area around the chart type icon. -/// @group chart-wizard $kendo-chart-wizard-icon-area-padding: null !default; -/// The box shadow of the focused area around the chart type icon. -/// @group chart-wizard $kendo-chart-wizard-icon-area-focus-shadow: null !default; -/// The box shadow of the selected area around the chart type icon. -/// @group chart-wizard $kendo-chart-wizard-icon-area-selected-shadow: null !default; -/// The color of the selected chart type items in the Property panel. -/// @group chart-wizard $kendo-chart-wizard-chart-type-selected-color: null !default; -/// The padding of the preview pane. -/// @group chart-wizard $kendo-chart-wizard-preview-pane-padding: null !default; -/// The padding of the property pane. -/// @group chart-wizard $kendo-chart-wizard-property-pane-padding: null !default; -/// The gap between the chart type items in the Property panel. -/// @group chart-wizard $kendo-chart-wizard-chart-type-spacing: null !default; -/// The gap between the icon area and its text. -/// @group chart-wizard $kendo-chart-wizard-icon-text-gap: null !default; diff --git a/packages/core/scss/components/chat/_variables.scss b/packages/core/scss/components/chat/_variables.scss index c9ab9565cab..cbb34a0d37d 100644 --- a/packages/core/scss/components/chat/_variables.scss +++ b/packages/core/scss/components/chat/_variables.scss @@ -1,211 +1,83 @@ // Chat -/// The horizontal padding of the Chat. -/// @group chat $kendo-chat-padding-x: null !default; -/// The vertical padding of the Chat. -/// @group chat $kendo-chat-padding-y: null !default; -/// The width of the Chat. -/// @group chat $kendo-chat-width: null !default; -/// The height of the Chat. -/// @group chat $kendo-chat-height: null !default; -/// The border width of the Chat. -/// @group chat $kendo-chat-border-width: null !default; -/// The font family of the Chat. -/// @group chat $kendo-chat-font-family: null !default; -/// The font size of the Chat. -/// @group chat $kendo-chat-font-size: null !default; -/// The line height of the Chat. -/// @group chat $kendo-chat-line-height: null !default; -/// The horizontal spacing between the items of the Chat. -/// @group chat $kendo-chat-item-spacing-x: null !default; -/// The vertical spacing between the items of the Chat. -/// @group chat $kendo-chat-item-spacing-y: null !default; -/// The horizontal padding of the Chat message list. -/// @group chat $kendo-chat-message-list-padding-x: null !default; -/// The vertical padding of the Chat message list. -/// @group chat $kendo-chat-message-list-padding-y: null !default; -/// The spacing of the Chat message list. -/// @group chat $kendo-chat-message-list-spacing: null !default; -/// The font size of the Chat timestamp. -/// @group chat $kendo-chat-timestamp-font-size: null !default; -/// The line height of the Chat timestamp. -/// @group chat $kendo-chat-timestamp-line-height: null !default; -/// The text transform of the Chat timestamp. -/// @group chat $kendo-chat-timestamp-transform: null !default; -/// The text color of the Chat timestamp. -/// @group chat $kendo-chat-timestamp-text: null !default; -/// The background color of the Chat timestamp. -/// @group chat $kendo-chat-timestamp-bg: null !default; -/// The font size of the Chat message meta text. -/// @group chat $kendo-chat-message-meta-font-size: null !default; -/// The line height of the Chat message meta text. -/// @group chat $kendo-chat-message-meta-line-height: null !default; -/// The font size of the Chat author text. -/// @group chat $kendo-chat-author-font-size: null !default; -/// The line height of the Chat author text. -/// @group chat $kendo-chat-author-line-height: null !default; -/// The horizontal padding of the Chat bubble message. -/// @group chat $kendo-chat-bubble-padding-x: null !default; -/// The vertical padding of the Chat bubble message. -/// @group chat $kendo-chat-bubble-padding-y: null !default; -/// The spacing of the Chat bubble message. -/// @group chat $kendo-chat-bubble-spacing: null !default; -/// The line height of the Chat bubble message. -/// @group chat $kendo-chat-bubble-line-height: null !default; -/// The border radius of the Chat bubble message. -/// @group chat $kendo-chat-bubble-border-radius: null !default; -/// The border radius of the Chat small bubble message -/// @group chat $kendo-chat-bubble-border-radius-sm: null !default; -/// The size of the Chat Avatar. -/// @group chat $kendo-chat-avatar-size: null !default; -/// The spacing of the Chat Avatar. -/// @group chat $kendo-chat-avatar-spacing: null !default; -/// The horizontal padding of the Chat Toolbar. -/// @group chat $kendo-chat-toolbar-padding-x: null !default; -/// The vertical padding of the Chat Toolbar. -/// @group chat $kendo-chat-toolbar-padding-y: null !default; -/// The spacing of the Chat Toolbar. -/// @group chat $kendo-chat-toolbar-spacing: null !default; -/// The background color of the Chat Toolbar. -/// @group chat $kendo-chat-toolbar-bg: null !default; -/// The text color of the Chat Toolbar. -/// @group chat $kendo-chat-toolbar-text: null !default; -/// The border color of the Chat Toolbar. -/// @group chat $kendo-chat-toolbar-border: null !default; -/// The horizontal padding of the Chat quick reply. -/// @group chat $kendo-chat-quick-reply-padding-x: null !default; -/// The vertical padding of the Chat quick reply. -/// @group chat $kendo-chat-quick-reply-padding-y: null !default; -/// The spacing of the Chat quick reply. -/// @group chat $kendo-chat-quick-reply-spacing: null !default; -/// The line height of the Chat quick reply. -/// @group chat $kendo-chat-quick-reply-line-height: null !default; -/// The background color of the Chat. -/// @group chat $kendo-chat-bg: null !default; -/// The text color of the Chat. -/// @group chat $kendo-chat-text: null !default; -/// The border color of the Chat. -/// @group chat $kendo-chat-border: null !default; -/// The background color of the Chat bubble. -/// @group chat $kendo-chat-bubble-bg: null !default; -/// The text color of the Chat bubble. -/// @group chat $kendo-chat-bubble-text: null !default; -/// The border color of the Chat bubble. -/// @group chat $kendo-chat-bubble-border: null !default; -/// The box shadow of the Chat bubble. -/// @group chat $kendo-chat-bubble-shadow: null !default; -/// The shadow of the hovered Chat bubble. -/// @group chat $kendo-chat-bubble-hover-shadow: null !default; -/// The shadow of the selected Chat bubble. -/// @group chat $kendo-chat-bubble-selected-shadow: null !default; -/// The background color of the Chat alt bubble. -/// @group chat $kendo-chat-alt-bubble-bg: null !default; -/// The text color of the Chat alt bubble. -/// @group chat $kendo-chat-alt-bubble-text: null !default; -/// The border color of the Chat alt bubble. -/// @group chat $kendo-chat-alt-bubble-border: null !default; -/// The shadow of the Chat alt bubble. -/// @group chat $kendo-chat-alt-bubble-shadow: null !default; -/// The shadow of the hovered Chat alt bubble. -/// @group chat $kendo-chat-alt-bubble-hover-shadow: null !default; -/// The shadow of the selected Chat alt bubble. -/// @group chat $kendo-chat-alt-bubble-selected-shadow: null !default; -/// The background color of the Chat quick reply. -/// @group chat $kendo-chat-quick-reply-bg: null !default; -/// The text color of the Chat quick reply. -/// @group chat $kendo-chat-quick-reply-text: null !default; -/// The border color of the Chat quick reply. -/// @group chat $kendo-chat-quick-reply-border: null !default; -/// The background color of the hovered Chat quick reply. -/// @group chat $kendo-chat-quick-reply-hover-bg: null !default; -/// The text color of the hovered Chat quick reply. -/// @group chat $kendo-chat-quick-reply-hover-text: null !default; -/// The border color of the hovered Chat quick reply. -/// @group chat $kendo-chat-quick-reply-hover-border: null !default; -/// The shadow blur of the focused Chat quick reply. -/// @group chat $kendo-chat-quick-reply-shadow-blur: null !default; -/// The shadow spread of the focused Chat quick reply. -/// @group chat $kendo-chat-quick-reply-shadow-spread: null !default; -/// The shadow opacity of the focused Chat quick reply. -/// @group chat $kendo-chat-quick-reply-shadow-opacity: null !default; diff --git a/packages/core/scss/components/checkbox/_variables.scss b/packages/core/scss/components/checkbox/_variables.scss index 3b10e378514..b5275d29777 100644 --- a/packages/core/scss/components/checkbox/_variables.scss +++ b/packages/core/scss/components/checkbox/_variables.scss @@ -1,175 +1,81 @@ // CheckBox -/// The border width of the CheckBox. -/// @group checkbox $kendo-checkbox-border-width: null !default; -/// The size of a small CheckBox. -/// @group checkbox $kendo-checkbox-sm-size: null !default; -/// The size of a medium CheckBox. -/// @group checkbox $kendo-checkbox-md-size: null !default; -/// The size of a large CheckBox. -/// @group checkbox $kendo-checkbox-lg-size: null !default; -/// The glyph size of a small CheckBox. -/// @group checkbox $kendo-checkbox-sm-glyph-size: null !default; -/// The glyph size of a medium CheckBox. -/// @group checkbox $kendo-checkbox-md-glyph-size: null !default; -/// The glyph size of a large CheckBox. -/// @group checkbox $kendo-checkbox-lg-glyph-size: null !default; -/// The ripple size of a small CheckBox. -/// @group checkbox $kendo-checkbox-sm-ripple-size: null !default; -/// The ripple size of a medium CheckBox. -/// @group checkbox $kendo-checkbox-md-ripple-size: null !default; -/// The ripple size of a large CheckBox. -/// @group checkbox $kendo-checkbox-lg-ripple-size: null !default; // A map with the different CheckBox sizes. $kendo-checkbox-sizes: null !default; -/// The background color of the CheckBox. -/// @group checkbox $kendo-checkbox-bg: null !default; -/// The text color of the CheckBox. -/// @group checkbox $kendo-checkbox-text: null !default; -/// The border color of the CheckBox. -/// @group checkbox $kendo-checkbox-border: null !default; -/// The background color of the hovered CheckBox. -/// @group checkbox $kendo-checkbox-hover-bg: null !default; -/// The text color of the hovered CheckBox. -/// @group checkbox $kendo-checkbox-hover-text: null !default; -/// The border color of the hovered CheckBox. -/// @group checkbox $kendo-checkbox-hover-border: null !default; -/// The background color of the checked CheckBox. -/// @group checkbox $kendo-checkbox-checked-bg: null !default; -/// The text color of the checked CheckBox. -/// @group checkbox $kendo-checkbox-checked-text: null !default; -/// The border color of the checked CheckBox. -/// @group checkbox $kendo-checkbox-checked-border: null !default; -/// The background color of the indeterminate CheckBox. -/// @group checkbox $kendo-checkbox-indeterminate-bg: null !default; -/// The text color of the indeterminate CheckBox. -/// @group checkbox $kendo-checkbox-indeterminate-text: null !default; -/// The border color of the indeterminate CheckBox. -/// @group checkbox $kendo-checkbox-indeterminate-border: null !default; -/// The border color of the focused CheckBox. -/// @group checkbox $kendo-checkbox-focus-border: null !default; -/// The box shadow of the focused CheckBox. -/// @group checkbox $kendo-checkbox-focus-shadow: null !default; -/// The border color of the focused and checked CheckBox. -/// @group checkbox $kendo-checkbox-focus-checked-border: null !default; -/// The box shadow of the focused and checked CheckBox. -/// @group checkbox $kendo-checkbox-focus-checked-shadow: null !default; -/// The background color of the disabled CheckBox. -/// @group checkbox $kendo-checkbox-disabled-bg: null !default; -/// The text color of the disabled CheckBox. -/// @group checkbox $kendo-checkbox-disabled-text: null !default; -/// The border color of the disabled CheckBox. -/// @group checkbox $kendo-checkbox-disabled-border: null !default; -/// The background color of the disabled and checked CheckBox. -/// @group checkbox $kendo-checkbox-disabled-checked-bg: null !default; -/// The text color of the disabled and checked CheckBox. -/// @group checkbox $kendo-checkbox-disabled-checked-text: null !default; -/// The border color of the disabled and checked CheckBox. -/// @group checkbox $kendo-checkbox-disabled-checked-border: null !default; -/// The background color of an invalid CheckBox. -/// @group checkbox $kendo-checkbox-invalid-bg: null !default; -/// The text color of an invalid CheckBox. -/// @group checkbox $kendo-checkbox-invalid-text: null !default; -/// The border color of an invalid CheckBox. -/// @group checkbox $kendo-checkbox-invalid-border: null !default; // CheckBox indicator -/// The type of the CheckBox indicator. -/// @group checkbox $kendo-checkbox-indicator-type: null !default; -/// The font family of the CheckBox indicator glyph. -/// @group checkbox $kendo-checkbox-glyph-font-family: null !default; -/// The glyph of the CheckBox indicator. -/// @group checkbox $kendo-checkbox-checked-glyph: null !default; -/// The glyph of the indeterminate CheckBox indicator. -/// @group checkbox $kendo-checkbox-indeterminate-glyph: null !default; -/// The image for a checked CheckBox indicator. -/// @group checkbox $kendo-checkbox-checked-image: null !default; -/// The image for a indeterminate CheckBox indicator. -/// @group checkbox $kendo-checkbox-indeterminate-image: null !default; // CheckBox label -/// The horizontal margin of the CheckBox inside a label. -/// @group checkbox $kendo-checkbox-label-margin-x: null !default; // CheckBox list -/// The spacing between the items in a horizontal CheckBox list. -/// @group checkbox $kendo-checkbox-list-spacing: null !default; -/// The horizontal padding of the CheckBox list items. -/// @group checkbox $kendo-checkbox-list-item-padding-x: null !default; -/// The vertical padding of the CheckBox list items. -/// @group checkbox $kendo-checkbox-list-item-padding-y: null !default; // CheckBox ripple -/// The background color of the CheckBox' ripple. -/// @group checkbox $kendo-checkbox-ripple-bg: null !default; -/// The opacity of the CheckBox' ripple. -/// @group checkbox $kendo-checkbox-ripple-opacity: null !default; diff --git a/packages/core/scss/components/chip/_variables.scss b/packages/core/scss/components/chip/_variables.scss index 5bab6db2db6..c744fcea9ef 100644 --- a/packages/core/scss/components/chip/_variables.scss +++ b/packages/core/scss/components/chip/_variables.scss @@ -1,147 +1,63 @@ // Chip -/// The width of the border around the Chip. -/// @group chip $kendo-chip-border-width: null !default; -/// The spacing between the text and the icons of the Chip. -/// @group chip $kendo-chip-spacing: null !default; -/// The horizontal padding of the Chip. -/// @group chip $kendo-chip-padding-x: null !default; -/// The horizontal padding of the small Chip. -/// @group chip $kendo-chip-sm-padding-x: null !default; -/// The horizontal padding of the medium Chip. -/// @group chip $kendo-chip-md-padding-x: null !default; -/// The horizontal padding of the large Chip. -/// @group chip $kendo-chip-lg-padding-x: null !default; -/// The vertical padding of the Chip. -/// @group chip $kendo-chip-padding-y: null !default; -/// The vertical padding of the small Chip. -/// @group chip $kendo-chip-sm-padding-y: null !default; -/// The vertical padding of the medium Chip. -/// @group chip $kendo-chip-md-padding-y: null !default; -/// The vertical padding of the large Chip. -/// @group chip $kendo-chip-lg-padding-y: null !default; -/// The font size of the Chip. -/// @group chip $kendo-chip-font-size: null !default; -/// The font size of the small Chip. -/// @group chip $kendo-chip-sm-font-size: null !default; -/// The font size of the medium Chip. -/// @group chip $kendo-chip-md-font-size: null !default; -/// The font size of the large Chip. -/// @group chip $kendo-chip-lg-font-size: null !default; -/// The Chip's line height that is related to the $kendo-font-size. -/// @group chip $kendo-chip-line-height: null !default; -/// The small Chip's line height that is related to the $kendo-font-size. -/// @group chip $kendo-chip-sm-line-height: null !default; -/// The medium Chip's line height that is related to the $kendo-font-size. -/// @group chip $kendo-chip-md-line-height: null !default; -/// The large Chip's line height that is related to the $kendo-font-size. -/// @group chip $kendo-chip-lg-line-height: null !default; -/// The calculated height of the Chip. -/// @group chip $kendo-chip-calc-size: null !default; $kendo-chip-sm-calc-size: null !default; -/// The map with the sizes of the Chip. -/// @group chip $kendo-chip-sizes: null !default; -/// The base background of the Chip. -/// @group chip $kendo-chip-base-bg: null !default; -/// The theme colors map for the Chip. -/// @group chip $kendo-chip-theme-colors: null !default; -/// The base background color of the solid Chip. -/// @group chip $kendo-chip-solid-bg: null !default; -/// The base text color of the solid Chip. -/// @group chip $kendo-chip-solid-text: null !default; -/// The base border color of the solid Chip. -/// @group chip $kendo-chip-solid-border: null !default; -/// The base shadow of the solid Chip. -/// @group chip $kendo-chip-solid-shadow: null !default; -/// The base gradient of the solid Chip. -/// @group chip $kendo-chip-solid-gradient: null !default; -/// The base background color of the focused solid Chip. -/// @group chip $kendo-chip-solid-focus-bg: null !default; -/// The base text color of the focused solid Chip. -/// @group chip $kendo-chip-solid-focus-text: null !default; -/// The base background color of the hovered solid Chip. -/// @group chip $kendo-chip-solid-hover-bg: null !default; -/// The base text color of the hovered solid Chip. -/// @group chip $kendo-chip-solid-hover-text: null !default; -/// The base background color of the selected solid Chip. -/// @group chip $kendo-chip-solid-selected-bg: null !default; -/// The base text color of the selected solid Chip. -/// @group chip $kendo-chip-solid-selected-text: null !default; -/// The base background color of the outline Chip. -/// @group chip $kendo-chip-outline-bg: null !default; -/// The base text color of the outline Chip. -/// @group chip $kendo-chip-outline-text: null !default; -/// The base border color of the outline Chip. -/// @group chip $kendo-chip-outline-border: null !default; -/// The base shadow of the outline Chip. -/// @group chip $kendo-chip-outline-shadow: null !default; -/// The base background color of the hovered outline Chip. -/// @group chip $kendo-chip-outline-hover-bg: null !default; -/// The base text color of the hovered outline Chip. -/// @group chip $kendo-chip-outline-hover-text: null !default; -/// The base background color of the selected outline Chip. -/// @group chip $kendo-chip-outline-selected-bg: null !default; -/// The base text color of the selected outline Chip. -/// @group chip $kendo-chip-outline-selected-text: null !default; // Chip List -/// The sizes of the Chip list. -/// @group chip $kendo-chip-list-sizes: null !default; diff --git a/packages/core/scss/components/coloreditor/_variables.scss b/packages/core/scss/components/coloreditor/_variables.scss index 967c7867c5d..db91b87eaa8 100644 --- a/packages/core/scss/components/coloreditor/_variables.scss +++ b/packages/core/scss/components/coloreditor/_variables.scss @@ -1,167 +1,63 @@ // ColorEditor/FlatColorPicker -/// The spacer of the ColorEditor. -/// @group color-editor $kendo-color-editor-spacer: null !default; -/// The minimum width of the ColorEditor. -/// @group color-editor $kendo-color-editor-min-width: null !default; -/// The minimum width of the ColorEditor. -/// @group color-editor $kendo-color-editor-sm-min-width: null !default; -/// The minimum width of the ColorEditor. -/// @group color-editor $kendo-color-editor-md-min-width: null !default; -/// The minimum width of the ColorEditor. -/// @group color-editor $kendo-color-editor-lg-min-width: null !default; -/// The width of the border around the ColorEditor. -/// @group color-editor $kendo-color-editor-border-width: null !default; -/// The border radius of the ColorEditor. -/// @group color-editor $kendo-color-editor-border-radius: null !default; -/// The font family of the ColorEditor. -/// @group color-editor $kendo-color-editor-font-family: null !default; -/// The font size of the ColorEditor. -/// @group color-editor $kendo-color-editor-font-size: null !default; -/// The line height of the ColorEditor. -/// @group color-editor $kendo-color-editor-line-height: null !default; -/// The text color of the ColorEditor. -/// @group color-editor $kendo-color-editor-text: null !default; -/// The background color of the ColorEditor. -/// @group color-editor $kendo-color-editor-bg: null !default; -/// The border color of the ColorEditor. -/// @group color-editor $kendo-color-editor-border: null !default; -/// The border color of the focused ColorEditor. -/// @group color-editor $kendo-color-editor-focus-border: null !default; // TODO: does this ever get focused? Isn't it always in a popup? -/// The box shadow of the focused ColorEditor. -/// @group color-editor $kendo-color-editor-focus-shadow: null !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3) -/// The vertical padding of the ColorEditor header. -/// @group color-editor $kendo-color-editor-header-padding-y: null !default; -/// The horizontal padding of the ColorEditor header. -/// @group color-editor $kendo-color-editor-header-padding-x: null !default; -/// The spacing between the ColorEditor header actions. -/// @group color-editor $kendo-color-editor-header-actions-gap: null !default; -/// The vertical padding of the small ColorEditor header. -/// @group color-editor $kendo-color-editor-sm-header-padding-y: null !default; -/// The horizontal padding of the small ColorEditor header. -/// @group color-editor $kendo-color-editor-sm-header-padding-x: null !default; -/// The vertical padding of the medium ColorEditor header. -/// @group color-editor $kendo-color-editor-md-header-padding-y: null !default; -/// The horizontal padding of the medium ColorEditor header. -/// @group color-editor $kendo-color-editor-md-header-padding-x: null !default; -/// The vertical padding of the large ColorEditor header. -/// @group color-editor $kendo-color-editor-lg-header-padding-y: null !default; -/// The horizontal padding of the large ColorEditor header. -/// @group color-editor $kendo-color-editor-lg-header-padding-x: null !default; -/// The width of the ColorEditor preview. -/// @group color-editor $kendo-color-editor-color-preview-width: null !default; -/// The height of the ColorEditor preview. -/// @group color-editor $kendo-color-editor-color-preview-height: null !default; -/// The spacing between the colors in the ColorEditor preview. -/// @group color-editor $kendo-color-editor-preview-gap: null !default; -/// The spacing between the colors in the small ColorEditor preview. -/// @group color-editor $kendo-color-editor-sm-preview-gap: null !default; -/// The spacing between the colors in the medium ColorEditor preview. -/// @group color-editor $kendo-color-editor-md-preview-gap: null !default; -/// The spacing between the colors in the large ColorEditor preview. -/// @group color-editor $kendo-color-editor-lg-preview-gap: null !default; -/// The width of the small ColorEditor preview. -/// @group color-editor $kendo-color-editor-sm-color-preview-width: null !default; -/// The height of the small ColorEditor preview. -/// @group color-editor $kendo-color-editor-sm-color-preview-height: null !default; -/// The width of the medium ColorEditor preview. -/// @group color-editor $kendo-color-editor-md-color-preview-width: null !default; -/// The height of the medium ColorEditor preview. -/// @group color-editor $kendo-color-editor-md-color-preview-height: null !default; -/// The width of the large ColorEditor preview. -/// @group color-editor $kendo-color-editor-lg-color-preview-width: null !default; -/// The height of the large ColorEditor preview. -/// @group color-editor $kendo-color-editor-lg-color-preview-height: null !default; -/// The vertical padding of the ColorEditor views container. -/// @group color-editor $kendo-color-editor-views-padding-y: null !default; -/// The horizontal padding of the ColorEditor views container. -/// @group color-editor $kendo-color-editor-views-padding-x: null !default; -/// The spacing of the ColorEditor views container. -/// @group color-editor $kendo-color-editor-views-gap: null !default; -/// The vertical padding of the small ColorEditor views container. -/// @group color-editor $kendo-color-editor-sm-views-padding-y: null !default; -/// The horizontal padding of the small ColorEditor views container. -/// @group color-editor $kendo-color-editor-sm-views-padding-x: null !default; -/// The spacing of the small ColorEditor views container. -/// @group color-editor $kendo-color-editor-sm-views-gap: null !default; -/// The vertical padding of the medium ColorEditor views container. -/// @group color-editor $kendo-color-editor-md-views-padding-y: null !default; -/// The horizontal padding of the medium ColorEditor views container. -/// @group color-editor $kendo-color-editor-md-views-padding-x: null !default; -/// The spacing of the medium ColorEditor views container. -/// @group color-editor $kendo-color-editor-md-views-gap: null !default; -/// The vertical padding of the large ColorEditor views container. -/// @group color-editor $kendo-color-editor-lg-views-padding-y: null !default; -/// The horizontal padding of the large ColorEditor views container. -/// @group color-editor $kendo-color-editor-lg-views-padding-x: null !default; -/// The spacing of the large ColorEditor views container. -/// @group color-editor $kendo-color-editor-lg-views-gap: null !default; -/// The outline color of the focused ColorGradient. -/// @group color-editor $kendo-color-editor-color-gradient-focus-outline-color: null !default; -/// The outline width of the focused ColorGradient. -/// @group color-editor $kendo-color-editor-color-gradient-focus-outline: null !default; -/// The outline offset of the focused ColorGradient. -/// @group color-editor $kendo-color-editor-color-gradient-focus-outline-offset: null !default; -/// The size map of the ColorEditor. -/// @group color-editor $kendo-color-editor-sizes: () !default; diff --git a/packages/core/scss/components/colorgradient/_variables.scss b/packages/core/scss/components/colorgradient/_variables.scss index e9a9d8e2b2b..054680b07f6 100644 --- a/packages/core/scss/components/colorgradient/_variables.scss +++ b/packages/core/scss/components/colorgradient/_variables.scss @@ -1,221 +1,85 @@ // ColorGradient -/// The spacer of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-spacer: null !default; -/// The width of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-width: null !default; -/// The width of the border around the ColorGradient. -/// @group color-gradient $kendo-color-gradient-border-width: null !default; -/// The border radius of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-border-radius: null !default; -/// The vertical padding of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-padding-y: null !default; -/// The horizontal padding of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-padding-x: null !default; -/// The spacing between the sections of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-gap: null !default; -/// The font family of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-font-family: null !default; -/// The font size of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-font-size: null !default; -/// The line height of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-line-height: null !default; -/// The text color of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-text: null !default; -/// The background color of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-bg: null !default; -/// The border color of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-border: null !default; -/// The vertical padding of the small ColorGradient. -/// @group color-gradient $kendo-color-gradient-sm-padding-y: null !default; -/// The horizontal padding of the small ColorGradient. -/// @group color-gradient $kendo-color-gradient-sm-padding-x: null !default; -/// The vertical padding of the medium ColorGradient. -/// @group color-gradient $kendo-color-gradient-md-padding-y: null !default; -/// The horizontal padding of the medium ColorGradient. -/// @group color-gradient $kendo-color-gradient-md-padding-x: null !default; -/// The vertical padding of the large ColorGradient. -/// @group color-gradient $kendo-color-gradient-lg-padding-y: null !default; -/// The horizontal padding of the large ColorGradient. -/// @group color-gradient $kendo-color-gradient-lg-padding-x: null !default; -/// The width of the small ColorGradient. -/// @group color-gradient $kendo-color-gradient-sm-width: null !default; -/// The width of the medium ColorGradient. -/// @group color-gradient $kendo-color-gradient-md-width: null !default; -/// The width of the large ColorGradient. -/// @group color-gradient $kendo-color-gradient-lg-width: null !default; -/// The spacing between the sections of the small ColorGradient. -/// @group color-gradient $kendo-color-gradient-sm-gap: null !default; -/// The spacing between the sections of the medium ColorGradient. -/// @group color-gradient $kendo-color-gradient-md-gap: null !default; -/// The spacing between the sections of the large ColorGradient. -/// @group color-gradient $kendo-color-gradient-lg-gap: null !default; -/// The border color of the focused ColorGradient. -/// @group color-gradient $kendo-color-gradient-focus-border: null !default; -/// The box shadow of the focused ColorGradient. -/// @group color-gradient $kendo-color-gradient-focus-shadow: null !default; -/// The border radius of the ColorGradient canvas. -/// @group color-gradient $kendo-color-gradient-canvas-border-radius: null !default; -/// The spacing between the items of the ColorGradient canvas. -/// @group color-gradient $kendo-color-gradient-canvas-gap: null !default; -/// The height the ColorGradient canvas hsv rectangle. -/// @group color-gradient $kendo-color-gradient-canvas-rectangle-height: null !default; -/// The height the small ColorGradient canvas hsv rectangle. -/// @group color-gradient $kendo-color-gradient-sm-canvas-rectangle-height: null !default; -/// The height the medium ColorGradient canvas hsv rectangle. -/// @group color-gradient $kendo-color-gradient-md-canvas-rectangle-height: null !default; -/// The height the large ColorGradient canvas hsv rectangle. -/// @group color-gradient $kendo-color-gradient-lg-canvas-rectangle-height: null !default; -/// The spacing between the items of the small ColorGradient canvas. -/// @group color-gradient $kendo-color-gradient-sm-canvas-gap: null !default; -/// The spacing between the items of the medium ColorGradient canvas. -/// @group color-gradient $kendo-color-gradient-md-canvas-gap: null !default; -/// The spacing between the items of the large ColorGradient canvas. -/// @group color-gradient $kendo-color-gradient-lg-canvas-gap: null !default; -/// The width of the ColorGradient slider. -/// @group color-gradient $kendo-color-gradient-slider-track-size: null !default; -/// The border radius of the ColorGradient slider. -/// @group color-gradient $kendo-color-gradient-slider-border-radius: null !default; -/// The width of the border around the ColorGradient slider drag handle. -/// @group color-gradient $kendo-color-gradient-slider-draghandle-border-width: null !default; -/// The height of the ColorGradient vertical slider. -/// @group color-gradient $kendo-color-gradient-slider-vertical-size: null !default; -/// The width of the ColorGradient horizontal slider. -/// @group color-gradient $kendo-color-gradient-slider-horizontal-size: null !default; -/// The background image of the ColorGradient alpha slider. -/// @group color-gradient $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default; -/// The height of the small ColorGradient vertical slider. -/// @group color-gradient $kendo-color-gradient-sm-slider-vertical-size: null !default; -/// The height of the medium ColorGradient vertical slider. -/// @group color-gradient $kendo-color-gradient-md-slider-vertical-size: null !default; -/// The height of the large ColorGradient vertical slider. -/// @group color-gradient $kendo-color-gradient-lg-slider-vertical-size: null !default; -/// The width of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-width: null !default; -/// The height of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-height: null !default; -/// The width of the border around the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-border-width: null !default; -/// The width of the outline around the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-outline-width: null !default; -/// The border radius of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-border-radius: null !default; -/// The text color of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-text: null !default; -/// The background color of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-bg: null !default; -/// The color of the border around the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-border: null !default; -/// The focus color of the outline around the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-focus-shadow: null !default; -/// The hover color of the outline around the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-hover-shadow: null !default; -/// The box shadow of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-draghandle-shadow: null !default; -/// The vertical margin of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-canvas-draghandle-margin-y: null !default; -/// The horizontal margin of the ColorGradient canvas drag handle. -/// @group color-gradient $kendo-color-gradient-canvas-draghandle-margin-x: null !default; -/// The width of the ColorGradient input. -/// @group color-gradient $kendo-color-gradient-input-width: null !default; -/// The spacing between the ColorGradient inputs. -/// @group color-gradient $kendo-color-gradient-input-gap: null !default; -/// The spacing between the ColorGradient inputs and their labels. -/// @group color-gradient $kendo-color-gradient-input-label-gap: null !default; -/// The text color of the ColorGradient input labels. -/// @group color-gradient $kendo-color-gradient-input-label-text: null !default; -/// The width of the small ColorGradient input. -/// @group color-gradient $kendo-color-gradient-sm-input-width: null !default; -/// The width of the medium ColorGradient input. -/// @group color-gradient $kendo-color-gradient-md-input-width: null !default; -/// The width of the large ColorGradient input. -/// @group color-gradient $kendo-color-gradient-lg-input-width: null !default; -/// The font weight of the ColorGradient contrast ratio text. -/// @group color-gradient $kendo-color-gradient-contrast-ratio-font-weight: null !default; -/// The spacing between the items in the ColorGradient contrast tool. -/// @group color-gradient $kendo-color-gradient-contrast-spacer: null !default; -/// The size map of the ColorGradient. -/// @group color-gradient $kendo-color-gradient-sizes: () !default; diff --git a/packages/core/scss/components/colorpalette/_variables.scss b/packages/core/scss/components/colorpalette/_variables.scss index 5e45fcc1387..4f215e92b69 100644 --- a/packages/core/scss/components/colorpalette/_variables.scss +++ b/packages/core/scss/components/colorpalette/_variables.scss @@ -1,50 +1,20 @@ // ColorPalette -/// The font family of the ColorPalette. -/// @group color-palette $kendo-color-palette-font-family: null !default; -/// The font size of the ColorPalette. -/// @group color-palette $kendo-color-palette-font-size: null !default; -/// The line height of the ColorPalette. -/// @group color-palette $kendo-color-palette-line-height: null !default; -/// The width of the ColorPalette tile. -/// @group color-palette $kendo-color-palette-tile-width: null !default; -/// The height of the ColorPalette tile. -/// @group color-palette $kendo-color-palette-tile-height: null !default; -/// The width of the small ColorPalette tile. -/// @group color-palette $kendo-color-palette-sm-tile-width: null !default; -/// The height of the small ColorPalette tile. -/// @group color-palette $kendo-color-palette-sm-tile-height: null !default; -/// The width of the medium ColorPalette tile. -/// @group color-palette $kendo-color-palette-md-tile-width: null !default; -/// The height of the medium ColorPalette tile. -/// @group color-palette $kendo-color-palette-md-tile-height: null !default; -/// The width of the large ColorPalette tile. -/// @group color-palette $kendo-color-palette-lg-tile-width: null !default; -/// The height of the large ColorPalette tile. -/// @group color-palette $kendo-color-palette-lg-tile-height: null !default; -/// The shadow of the ColorPalette focused tile. -/// @group color-palette $kendo-color-palette-tile-focus-shadow: null !default; -/// The shadow of the ColorPalette hovered tile. -/// @group color-palette $kendo-color-palette-tile-hover-shadow: null !default; -/// The shadow of the ColorPalette selected tile. -/// @group color-palette $kendo-color-palette-tile-selected-shadow: null !default; -/// The size map of the ColorPalette. -/// @group color-palette $kendo-color-palette-sizes: () !default; diff --git a/packages/core/scss/components/dataviz/_variables.scss b/packages/core/scss/components/dataviz/_variables.scss index 1be442b3d9a..bb984cb8ee8 100644 --- a/packages/core/scss/components/dataviz/_variables.scss +++ b/packages/core/scss/components/dataviz/_variables.scss @@ -1,56 +1,41 @@ // Chart -/// The first base series color and its light and dark shades. -/// @group charts $kendo-series-a: null !default; $kendo-series-a-dark: null !default; $kendo-series-a-darker: null !default; $kendo-series-a-light: null !default; $kendo-series-a-lighter: null !default; -/// The second base series color and its light and dark shades. -/// @group charts $kendo-series-b: null !default; $kendo-series-b-dark: null !default; $kendo-series-b-darker: null !default; $kendo-series-b-light: null !default; $kendo-series-b-lighter: null !default; -/// The third base series color and its light and dark shades. -/// @group charts $kendo-series-c: null !default; $kendo-series-c-dark: null !default; $kendo-series-c-darker: null !default; $kendo-series-c-light: null !default; $kendo-series-c-lighter: null !default; -/// The fourth base series color and its light and dark shades. -/// @group charts $kendo-series-d: null !default; $kendo-series-d-dark: null !default; $kendo-series-d-darker: null !default; $kendo-series-d-light: null !default; $kendo-series-d-lighter: null !default; -/// The fifth base series color and its light and dark shades. -/// @group charts $kendo-series-e: null !default; $kendo-series-e-dark: null !default; $kendo-series-e-darker: null !default; $kendo-series-e-light: null !default; $kendo-series-e-lighter: null !default; -/// The sixth base series color and its light and dark shades. -/// @group charts $kendo-series-f: null !default; $kendo-series-f-dark: null !default; $kendo-series-f-darker: null !default; $kendo-series-f-light: null !default; $kendo-series-f-lighter: null !default; -/// The series colors in order: -/// base, light, dark, lighter, darker -/// @group charts $kendo-series-1: null !default; $kendo-series-2: null !default; $kendo-series-3: null !default; @@ -92,12 +77,8 @@ $kendo-chart-title-font-size: null !default; $kendo-chart-pane-title-font-size: null !default; $kendo-chart-pane-title-font-weight: null !default; -/// The color of the Chart grid lines (major). -/// @group charts $kendo-chart-major-lines: null !default; -/// The color of the Chart grid lines (minor). -/// @group charts $kendo-chart-minor-lines: null !default; $kendo-chart-inactive: null !default; diff --git a/packages/core/scss/components/dialog/_variables.scss b/packages/core/scss/components/dialog/_variables.scss index d6a02bff129..74fb1134486 100644 --- a/packages/core/scss/components/dialog/_variables.scss +++ b/packages/core/scss/components/dialog/_variables.scss @@ -1,28 +1,12 @@ // Dialog -/// The background color of the Dialog titlebar. -/// @group dialog $kendo-dialog-titlebar-bg: null !default; -/// The text color of the Dialog titlebar. -/// @group dialog $kendo-dialog-titlebar-text: null !default; -/// The border color of the Dialog titlebar. -/// @group dialog $kendo-dialog-titlebar-border: null !default; -/// The horizontal padding of the Dialog action buttons. -/// @group dialog $kendo-dialog-buttongroup-padding-x: null !default; -/// The vertical padding of the Dialog action buttons. -/// @group dialog $kendo-dialog-buttongroup-padding-y: null !default; -/// The width of the top border of the Dialog action buttons. -/// @group dialog $kendo-dialog-buttongroup-border-width: null !default; -/// The spacing between the Dialog action buttons. -/// @group dialog $kendo-dialog-button-spacing: null !default; -/// The theme colors map for the Dialog. -/// @group dialog $kendo-dialog-theme-colors: null !default; diff --git a/packages/core/scss/components/dock-manager/_variables.scss b/packages/core/scss/components/dock-manager/_variables.scss index 7422e57deb3..148a5094e2e 100644 --- a/packages/core/scss/components/dock-manager/_variables.scss +++ b/packages/core/scss/components/dock-manager/_variables.scss @@ -1,113 +1,43 @@ -/// The width of the border around the DockManager component. -/// @group dock-manager $kendo-dock-manager-border-width: null !default; -/// The style of the border around the DockManager component. -/// @group dock-manager $kendo-dock-manager-border-style: null !default; -/// The color of the border around the DockManager component. -/// @group dock-manager $kendo-dock-manager-border: null !default; -/// The vertical padding of the pane header in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-header-padding-y: null !default; -/// The horizontal padding of the pane header in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-header-padding-x: null !default; -/// The width of the border around the pane header in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-header-border-width: null !default; -/// The style of the border around the pane header in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-header-border-style: null !default; -/// The background color of the pane header in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-header-bg: null !default; -/// The vertical padding of the pane title in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-title-padding-y: null !default; -/// The horizontal padding of the pane title in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-title-padding-x: null !default; -/// The font family of the pane title in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-title-font-family: null !default; -/// The font size of the pane title in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-title-font-size: null !default; -/// The line height of the pane title in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-title-line-height: null !default; -/// The font weight of the pane title in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-title-font-weight: null !default; -/// The horizontal padding of the pane content in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-content-padding-x: null !default; -/// The vertical padding of the pane content in the DockManager component. -/// @group dock-manager $kendo-dock-manager-pane-content-padding-y: null !default; -/// The horizontal padding of the tabbed pane in the DockManager component. -/// @group dock-manager $kendo-dock-manager-tabbed-pane-padding-y: null !default; -/// The horizontal padding of the tabbed pane in the DockManager component. -/// @group dock-manager $kendo-dock-manager-tabbed-pane-padding-x: null !default; -/// The width of the unpinned pane container in the DockManager component. -/// @group dock-manager $kendo-dock-manager-unpinned-container-width: null !default; -/// The background-color of the unpinned pane container in the DockManager component. -/// @group dock-manager $kendo-dock-manager-unpinned-container-bg: null !default; -/// The box shadow of the unpinned pane container in the DockManager component. -/// @group dock-manager $kendo-dock-manager-unpinned-container-shadow: null !default; -/// The padding of the dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-padding: null !default; -/// The background color of the dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-bg: null !default; -/// The text color of the dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-text: null !default; -/// The outline width of the dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-outline-width: null !default; -/// The outline style of the dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-outline-style: null !default; -/// The outline color of the dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-outline: null !default; -/// The box shadow of the dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-shadow: null !default; -/// The background color of the hovered dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-hover-bg: null !default; -/// The text color of the hovered dock indicator in the DockManager component. -/// @group dock-manager $kendo-dock-indicator-hover-text: null !default; -/// The width of the border around the dropping area in the DockManager component. -/// @group dock-manager $kendo-dock-manager-dock-preview-border-width: null !default; -/// The style of the border around the dropping area in the DockManager component. -/// @group dock-manager $kendo-dock-manager-dock-preview-border-style: null !default; -/// The border radius of the dropping area in the DockManager component. -/// @group dock-manager $kendo-dock-manager-dock-preview-border-radius: null !default; -/// The background color of the dropping area in the DockManager component. -/// @group dock-manager $kendo-dock-manager-dock-preview-bg: null !default; -/// The border color of the dropping area in the DockManager component. -/// @group dock-manager $kendo-dock-manager-dock-preview-border: null !default; diff --git a/packages/core/scss/components/drawer/_variables.scss b/packages/core/scss/components/drawer/_variables.scss index 17d118822e9..5888daf41fe 100644 --- a/packages/core/scss/components/drawer/_variables.scss +++ b/packages/core/scss/components/drawer/_variables.scss @@ -1,108 +1,46 @@ // Drawer -/// The background color of the Drawer. -/// @group drawer $kendo-drawer-bg: null !default; -/// The text color of the Drawer. -/// @group drawer $kendo-drawer-text: null !default; -/// The border color of the Drawer. -/// @group drawer $kendo-drawer-border: null !default; -/// The border width of the Drawer. -/// @group drawer $kendo-drawer-border-width: null !default; -/// The font family of the Drawer. -/// @group drawer $kendo-drawer-font-family: null !default; -/// The font size of the Drawer. -/// @group drawer $kendo-drawer-font-size: null !default; -/// The line height of the Drawer. -/// @group drawer $kendo-drawer-line-height: null !default; -/// The horizontal padding of the Drawer content. -/// @group drawer $kendo-drawer-content-padding-x: null !default; -/// The vertical padding of the Drawer content. -/// @group drawer $kendo-drawer-content-padding-y: null !default; -/// The width of the Drawer scrollbar. -/// @group drawer $kendo-drawer-scrollbar-width: null !default; -/// The color of the Drawer scrollbar track. -/// @group drawer $kendo-drawer-scrollbar-color: null !default; -/// The background color of the Drawer scrollbar thumb. -/// @group drawer $kendo-drawer-scrollbar-bg: null !default; -/// The border radius of the Drawer scrollbar. -/// @group drawer $kendo-drawer-scrollbar-radius: null !default; -/// The hover color of the Drawer scrollbar track. -/// @group drawer $kendo-drawer-scrollbar-hover-color: null !default; -/// The horizontal padding of the Drawer item. -/// @group drawer $kendo-drawer-item-padding-x: null !default; -/// The vertical padding of the Drawer item. -/// @group drawer $kendo-drawer-item-padding-y: null !default; -/// The font size of the Drawer item. -/// @group drawer $kendo-drawer-item-font-size: null !default; -/// The line height of the Drawer item. -/// @group drawer $kendo-drawer-item-line-height: null !default; -/// The horizontal padding of the Drawer item in each level. -/// @group drawer $kendo-drawer-item-level-padding-x: null !default; -/// The count of the Drawer item levels. -/// @group drawer $kendo-drawer-item-level-count: null !default; -/// The horizontal padding of the Drawer icon. -/// @group drawer $kendo-drawer-icon-padding-x: null !default; -/// The vertical padding of the Drawer icon. -/// @group drawer $kendo-drawer-icon-padding-y: null !default; -/// The initial width of the mini Drawer. -/// @group drawer $kendo-drawer-mini-initial-width: null !default; -/// The background color of the hovered Drawer item. -/// @group drawer $kendo-drawer-hover-bg: null !default; -/// The text color of the hovered Drawer item. -/// @group drawer $kendo-drawer-hover-text: null !default; -/// The background color of the focused Drawer item. -/// @group drawer $kendo-drawer-focus-bg: null !default; -/// The box shadow of the focused Drawer item. -/// @group drawer $kendo-drawer-focus-shadow: null !default; -/// The background color of the selected Drawer item. -/// @group drawer $kendo-drawer-selected-bg: null !default; -/// The text color of the selected Drawer item. -/// @group drawer $kendo-drawer-selected-text: null !default; -/// The background color of the selected and hovered Drawer item. -/// @group drawer $kendo-drawer-selected-hover-bg: null !default; -/// The text color of the selected and hovered Drawer item. -/// @group drawer $kendo-drawer-selected-hover-text: null !default; diff --git a/packages/core/scss/components/dropdowntree/_variables.scss b/packages/core/scss/components/dropdowntree/_variables.scss index 5d6b7f10038..f3293d94f44 100644 --- a/packages/core/scss/components/dropdowntree/_variables.scss +++ b/packages/core/scss/components/dropdowntree/_variables.scss @@ -1,8 +1,4 @@ // Dropdowntree -/// The horizontal padding of the DropdownTree popup -/// @group dropdowntree $kendo-dropdowntree-popup-padding-x: null !default; -/// The vertical padding of the DropdownTree popup -/// @group dropdowntree $kendo-dropdowntree-popup-padding-y: null !default; diff --git a/packages/core/scss/components/dropzone/_variables.scss b/packages/core/scss/components/dropzone/_variables.scss index aa84fec7701..777be96fad4 100644 --- a/packages/core/scss/components/dropzone/_variables.scss +++ b/packages/core/scss/components/dropzone/_variables.scss @@ -1,64 +1,26 @@ // DropZone -/// The horizontal padding of the DropZone. -/// @group dropzone $kendo-dropzone-padding-x: null !default; -/// The vertical padding of the DropZone. -/// @group dropzone $kendo-dropzone-padding-y: null !default; -/// The border width of the DropZone. -/// @group dropzone $kendo-dropzone-border-width: null !default; -/// The minimum height of the DropZone. -/// @group dropzone $kendo-dropzone-min-height: null !default; -/// The font family of the DropZone. -/// @group dropzone $kendo-dropzone-font-family: null !default; -/// The font size of the DropZone. -/// @group dropzone $kendo-dropzone-font-size: null !default; -/// The line height of the DropZone. -/// @group dropzone $kendo-dropzone-line-height: null !default; -/// The background color of the DropZone. -/// @group dropzone $kendo-dropzone-bg: null !default; -/// The text color of the DropZone. -/// @group dropzone $kendo-dropzone-text: null !default; -/// The border color of the DropZone. -/// @group dropzone $kendo-dropzone-border: null !default; -/// The spacing below the DropZone icon. -/// @group dropzone $kendo-dropzone-icon-spacing: null !default; -/// The text color of the DropZone icon. -/// @group dropzone $kendo-dropzone-icon-text: null !default; -/// The text color of the hovered DropZone icon. -/// @group dropzone $kendo-dropzone-icon-hover-text: null !default; -/// The font size of the DropZone hint. -/// @group dropzone $kendo-dropzone-hint-font-size: null !default; -/// The spacing below the DropZone hint. -/// @group dropzone $kendo-dropzone-hint-spacing: null !default; -/// The text color of the DropZone hint. -/// @group dropzone $kendo-dropzone-hint-text: null !default; -/// The font size of the DropZone note. -/// @group dropzone $kendo-dropzone-note-font-size: null !default; -/// The spacing below the DropZone note. -/// @group dropzone $kendo-dropzone-note-spacing: null !default; -/// The text color of the DropZone note. -/// @group dropzone $kendo-dropzone-note-text: null !default; diff --git a/packages/core/scss/components/editor/_variables.scss b/packages/core/scss/components/editor/_variables.scss index 4edb72274bd..280b5595d01 100644 --- a/packages/core/scss/components/editor/_variables.scss +++ b/packages/core/scss/components/editor/_variables.scss @@ -1,74 +1,32 @@ // Editor -/// The width of the border around the Еditor. -/// @group editor $kendo-editor-border-width: null !default; -/// The font family of the Еditor. -/// @group editor $kendo-editor-font-family: null !default; -/// The font size of the Еditor. -/// @group editor $kendo-editor-font-size: null !default; -/// The line height of the Еditor. -/// @group editor $kendo-editor-line-height: null !default; -/// The text color of the Еditor placeholder. -/// @group editor $kendo-editor-placeholder-text: null !default; -/// The opacity of the Editor placeholder. -/// @group editor $kendo-editor-placeholder-opacity: null !default; -/// The selected text color of the Editor. -/// @group editor $kendo-editor-selected-text: null !default; -/// The selected background color of the Editor. -/// @group editor $kendo-editor-selected-bg: null !default; -/// The highlighted background color of the Editor. -/// @group editor $kendo-editor-highlighted-bg: null !default; -/// The horizontal margin of the Editor's export tool icon. -/// @group editor $kendo-editor-export-tool-icon-margin-x: null !default; -/// The size of the Editor's resize handle. -/// @group editor $kendo-editor-resize-handle-size: null !default; -/// The border width of the Editor's resize handle. -/// @group editor $kendo-editor-resize-handle-border-width: null !default; -/// The border color of the Editor's resize handle. -/// @group editor $kendo-editor-resize-handle-border: null !default; -/// The background color of the Editor's resize handle. -/// @group editor $kendo-editor-resize-handle-bg: null !default; -/// The outline width of the Editor's selected node. -/// @group editor $kendo-editor-selectednode-outline-width: null !default; -/// The outline color of the Editor's selected node. -/// @group editor $kendo-editor-selectednode-outline-color: null !default; -/// The horizontal padding of the inline Editor. -/// @group editor $kendo-editor-inline-padding-x: null !default; -/// The vertical padding of the inline Editor. -/// @group editor $kendo-editor-inline-padding-y: null !default; -/// The horizontal padding of the Editor file browser tiles. -/// @group editor $kendo-editor-filebrowser-tiles-padding-x: null !default; -/// The vertical padding of the Editor file browser tiles. -/// @group editor $kendo-editor-filebrowser-tiles-padding-y: null !default; -/// The padding of the Editor content. -/// @group editor $kendo-editor-content-padding: null !default; diff --git a/packages/core/scss/components/expansion-panel/_variables.scss b/packages/core/scss/components/expansion-panel/_variables.scss index ac250e595bd..defb4bb0036 100644 --- a/packages/core/scss/components/expansion-panel/_variables.scss +++ b/packages/core/scss/components/expansion-panel/_variables.scss @@ -1,77 +1,33 @@ // ExpansionPanel -/// The vertical spacing of the ExpansionPanel. -/// @group expander $kendo-expander-spacing-y: null !default; -/// The width of the border around the ExpansionPanel. -/// @group expander $kendo-expander-border-width: null !default; -/// The font family of the ExpansionPanel. -/// @group expander $kendo-expander-font-family: null !default; -/// The font size of the ExpansionPanel. -/// @group expander $kendo-expander-font-size: null !default; -/// The hine height of the ExpansionPanel. -/// @group expander $kendo-expander-line-height: null !default; -/// The text color of the ExpansionPanel. -/// @group expander $kendo-expander-text: null !default; -/// The background color of the ExpansionPanel. -/// @group expander $kendo-expander-bg: null !default; -/// The border color of the ExpansionPanel. -/// @group expander $kendo-expander-border: null !default; -/// The box shadow of the focused ExpansionPanel. -/// @group expander $kendo-expander-focus-shadow: null !default; -/// The horizontal padding of the ExpansionPanel header. -/// @group expander $kendo-expander-header-padding-x: null !default; -/// The vertical padding of the ExpansionPanel header. -/// @group expander $kendo-expander-header-padding-y: null !default; -/// The text color of the ExpansionPanel header. -/// @group expander $kendo-expander-header-text: null !default; -/// The background color of the ExpansionPanel header. -/// @group expander $kendo-expander-header-bg: null !default; -/// The border color of the ExpansionPanel header. -/// @group expander $kendo-expander-header-border: null !default; -/// The background color of the hovered ExpansionPanel header. -/// @group expander $kendo-expander-header-hover-bg: null !default; -/// The background color of the focused ExpansionPanel header. -/// @group expander $kendo-expander-header-focus-bg: null !default; -/// The box shadow of the focused ExpansionPanel header. -/// @group expander $kendo-expander-header-focus-shadow: null !default; -/// The text color of the ExpansionPanel title. -/// @group expander $kendo-expander-title-text: null !default; -/// The text color of the ExpansionPanel sub-title. -/// @group expander $kendo-expander-header-sub-title-text: null !default; -/// The horizontal margin of the ExpansionPanel indicator. -/// @group expander $kendo-expander-indicator-margin-x: null !default; -/// The horizontal padding of the ExpansionPanel content. -/// @group expander $kendo-expander-content-padding-x: null !default; -/// The vertical padding of the ExpansionPanel content. -/// @group expander $kendo-expander-content-padding-y: null !default; diff --git a/packages/core/scss/components/fab/_variables.scss b/packages/core/scss/components/fab/_variables.scss index 864bf3038c8..97ccb0f4cb3 100644 --- a/packages/core/scss/components/fab/_variables.scss +++ b/packages/core/scss/components/fab/_variables.scss @@ -1,156 +1,62 @@ // Floating Action Button -/// The width of the border around the FAB. -/// @group floating-action-button $kendo-fab-border-width: null !default; -/// The border radius of the FAB. -/// @group floating-action-button $kendo-fab-border-radius: null !default; -/// The font family of the FAB. -/// @group floating-action-button $kendo-fab-font-family: null !default; -/// The font size of the FAB. -/// @group floating-action-button $kendo-fab-font-size: null !default; -/// The line height of the FAB. -/// @group floating-action-button $kendo-fab-line-height: null !default; -/// The horizontal padding of the FAB. -/// @group floating-action-button $kendo-fab-padding-x: null !default; -/// The horizontal padding of the small FAB. -/// @group floating-action-button $kendo-fab-sm-padding-x: null !default; -/// The horizontal padding of the medium FAB. -/// @group floating-action-button $kendo-fab-md-padding-x: null !default; -/// The horizontal padding of the large FAB. -/// @group floating-action-button $kendo-fab-lg-padding-x: null !default; -/// The vertical padding of the FAB. -/// @group floating-action-button $kendo-fab-padding-y: null !default; -/// The vertical padding of the small FAB. -/// @group floating-action-button $kendo-fab-sm-padding-y: null !default; -/// The vertical padding of the medium FAB. -/// @group floating-action-button $kendo-fab-md-padding-y: null !default; -/// The vertical padding of the large FAB. -/// @group floating-action-button $kendo-fab-lg-padding-y: null !default; -/// The horizontal padding of the FAB icon. -/// @group floating-action-button $kendo-fab-icon-padding-x: null !default; -/// The vertical padding of the FAB icon. -/// @group floating-action-button $kendo-fab-icon-padding-y: null !default; -/// The spacing of the FAB icon. -/// @group floating-action-button $kendo-fab-icon-spacing: null !default; -/// The horizontal padding of the FAB items. -/// @group floating-action-button $kendo-fab-items-padding-x: null !default; -/// The vertical padding of the FAB items. -/// @group floating-action-button $kendo-fab-items-padding-y: null !default; -/// The horizontal padding of the FAB item text. -/// @group floating-action-button $kendo-fab-item-text-padding-x: null !default; -/// The vertical padding of the FAB item text. -/// @group floating-action-button $kendo-fab-item-text-padding-y: null !default; -/// The width of the FAB item text border. -/// @group floating-action-button $kendo-fab-item-text-border-width: null !default; -/// The border radius of the FAB item text. -/// @group floating-action-button $kendo-fab-item-text-border-radius: null !default; -/// The font size of the FAB item text. -/// @group floating-action-button $kendo-fab-item-text-font-size: null !default; -/// The line height of the FAB item text. -/// @group floating-action-button $kendo-fab-item-text-line-height: null !default; -/// The horizontal padding of the FAB item icon. -/// @group floating-action-button $kendo-fab-item-icon-padding-x: null !default; -/// The vertical padding of the FAB item icon. -/// @group floating-action-button $kendo-fab-item-icon-padding-y: null !default; -/// The width of the FAB item icon border. -/// @group floating-action-button $kendo-fab-item-icon-border-width: null !default; -/// The border radius of the FAB item icon. -/// @group floating-action-button $kendo-fab-item-icon-border-radius: null !default; -/// The theme colors map for the FAB. -/// @group floating-action-button $kendo-fab-theme-colors: null !default; -/// The size map for the FAB. -/// @group floating-action-button $kendo-fab-sizes: null !default; -/// The base shadow of the FAB. -/// @group floating-action-button $kendo-fab-shadow: null !default; -/// The shadow of the disabled FAB. -/// @group floating-action-button $kendo-fab-disabled-shadow: null !default; -/// The shadow of the active FAB. -/// @group floating-action-button $kendo-fab-active-shadow: null !default; -/// The outline style of the FAB. -/// @group floating-action-button $kendo-fab-outline-style: null !default; -/// The outline width of the FAB. -/// @group floating-action-button $kendo-fab-outline-width: null !default; -/// The base text color of the FAB item. -/// @group floating-action-button $kendo-fab-item-text: null !default; -/// The base background color of the FAB item. -/// @group floating-action-button $kendo-fab-item-bg: null !default; -/// The base border color of the FAB item. -/// @group floating-action-button $kendo-fab-item-border: null !default; -/// The base text color of the FAB item icon. -/// @group floating-action-button $kendo-fab-item-icon-text: null !default; -/// The base background color of the FAB item icon. -/// @group floating-action-button $kendo-fab-item-icon-bg: null !default; -/// The base border color of the FAB item icon. -/// @group floating-action-button $kendo-fab-item-icon-border: null !default; -/// The base shadow of the FAB item. -/// @group floating-action-button $kendo-fab-item-shadow: null !default; -/// The shadow of the disabled FAB item. -/// @group floating-action-button $kendo-fab-item-disabled-shadow: null !default; -/// The shadow of the active FAB item. -/// @group floating-action-button $kendo-fab-item-active-shadow: null !default; -/// The outline style of the FAB item. -/// @group floating-action-button $kendo-fab-item-outline-style: null !default; -/// The outline width of the FAB item. -/// @group floating-action-button $kendo-fab-item-outline-width: null !default; -/// The outline color of the FAB item. -/// @group floating-action-button $kendo-fab-item-outline-color: null !default; diff --git a/packages/core/scss/components/filemanager/_variables.scss b/packages/core/scss/components/filemanager/_variables.scss index 4c4543f1e23..2d2ca09eb24 100644 --- a/packages/core/scss/components/filemanager/_variables.scss +++ b/packages/core/scss/components/filemanager/_variables.scss @@ -1,182 +1,68 @@ // FileManager -/// The space between the FileManager items. -/// @group file-manager $kendo-file-manager-spacer: null !default; -/// The border width of the FileManager. -/// @group file-manager $kendo-file-manager-border-width: null !default; -/// The font family of the FileManager. -/// @group file-manager $kendo-file-manager-font-family: null !default; -/// The font size of the FileManager. -/// @group file-manager $kendo-file-manager-font-size: null !default; -/// The line height of the FileManager. -/// @group file-manager $kendo-file-manager-line-height: null !default; -/// The background color of the FileManager. -/// @group file-manager $kendo-file-manager-bg: null !default; -/// The text color of the FileManager. -/// @group file-manager $kendo-file-manager-text: null !default; -/// The border color of the FileManager. -/// @group file-manager $kendo-file-manager-border: null !default; -/// The border width of the FileManager Toolbar. -/// @group file-manager $kendo-file-manager-toolbar-border-width: null !default; -/// The background color of the FileManager Toolbar. -/// @group file-manager $kendo-file-manager-toolbar-bg: null !default; -/// The text color of the FileManager Toolbar. -/// @group file-manager $kendo-file-manager-toolbar-text: null !default; -/// The border color of the FileManager Toolbar. -/// @group file-manager $kendo-file-manager-toolbar-border: null !default; -/// The gradient of the FileManager Toolbar. -/// @group file-manager $kendo-file-manager-toolbar-gradient: null !default; -/// The horizontal padding of the FileManager Navigation. -/// @group file-manager $kendo-file-manager-navigation-padding-x: null !default; -/// The vertical padding of the FileManager Navigation. -/// @group file-manager $kendo-file-manager-navigation-padding-y: null !default; -/// The width of the FileManager Navigation. -/// @group file-manager $kendo-file-manager-navigation-width: null !default; -/// The border width of the FileManager Navigation. -/// @group file-manager $kendo-file-manager-navigation-border-width: null !default; -/// The background color of the FileManager Navigation. -/// @group file-manager $kendo-file-manager-navigation-bg: null !default; -/// The text color of the FileManager Navigation. -/// @group file-manager $kendo-file-manager-navigation-text: null !default; -/// The border color of the FileManager Navigation. -/// @group file-manager $kendo-file-manager-navigation-border: null !default; -/// The horizontal padding of the FileManager Breadcrumb. -/// @group file-manager $kendo-file-manager-breadcrumb-padding-x: null !default; -/// The vertical padding of the FileManager Breadcrumb. -/// @group file-manager $kendo-file-manager-breadcrumb-padding-y: null !default; -/// The border width of the FileManager Breadcrumb. -/// @group file-manager $kendo-file-manager-breadcrumb-border-width: null !default; -/// The background color of the FileManager Breadcrumb. -/// @group file-manager $kendo-file-manager-breadcrumb-bg: null !default; -/// The text color of the FileManager Breadcrumb. -/// @group file-manager $kendo-file-manager-breadcrumb-text: null !default; -/// The border color of the FileManager Breadcrumb. -/// @group file-manager $kendo-file-manager-breadcrumb-border: null !default; -/// The background color of the FileManager ListView. -/// @group file-manager $kendo-file-manager-listview-bg: null !default; -/// The text color of the FileManager ListView. -/// @group file-manager $kendo-file-manager-listview-text: null !default; -/// The border color of the FileManager ListView. -/// @group file-manager $kendo-file-manager-listview-border: null !default; -/// The horizontal padding of the FileManager ListView item. -/// @group file-manager $kendo-file-manager-listview-item-padding-x: null !default; -/// The vertical padding of the FileManager ListView item. -/// @group file-manager $kendo-file-manager-listview-item-padding-y: null !default; -/// The width of the FileManager ListView item. -/// @group file-manager $kendo-file-manager-listview-item-width: null !default; -/// The height of the FileManager ListView item. -/// @group file-manager $kendo-file-manager-listview-item-height: null !default; -/// The background color of the FileManager ListView item. -/// @group file-manager $kendo-file-manager-listview-item-bg: null !default; -/// The text color of the FileManager ListView item. -/// @group file-manager $kendo-file-manager-listview-item-text: null !default; -/// The border color of the FileManager ListView item. -/// @group file-manager $kendo-file-manager-listview-item-border: null !default; -/// The background color of the FileManager ListView item icon. -/// @group file-manager $kendo-file-manager-listview-item-icon-bg: null !default; -/// The text color of the FileManager ListView item icon. -/// @group file-manager $kendo-file-manager-listview-item-icon-text: null !default; -/// The border color of the FileManager ListView item icon. -/// @group file-manager $kendo-file-manager-listview-item-icon-border: null !default; -/// Background color of the FileManager selected ListView item icon. -/// @group file-manager $kendo-file-manager-listview-item-icon-selected-bg: null !default; -/// Text color of the FileManager selected ListView item icon. -/// @group file-manager $kendo-file-manager-listview-item-icon-selected-text: null !default; -/// Border color of the FileManager selected ListView item icon. -/// @group file-manager $kendo-file-manager-listview-item-icon-selected-border: null !default; -/// The background color of the FileManager Grid. -/// @group file-manager $kendo-file-manager-grid-bg: null !default; -/// The text color of the FileManager Grid. -/// @group file-manager $kendo-file-manager-grid-text: null !default; -/// The border color of the FileManager Grid. -/// @group file-manager $kendo-file-manager-grid-border: null !default; -/// The horizontal padding of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-padding-x: null !default; -/// The vertical padding of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-padding-y: null !default; -/// The width of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-width: null !default; -/// The border width of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-border-width: null !default; -/// The spacing of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-spacing: null !default; -/// The gap between the columns in the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-column-gap: null !default; -/// The background color of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-bg: null !default; -/// The text color of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-text: null !default; -/// The border color of the FileManager preview. -/// @group file-manager $kendo-file-manager-preview-border: null !default; -/// The background color of the FileManager preview icon. -/// @group file-manager $kendo-file-manager-preview-icon-bg: null !default; -/// The text color of the FileManager preview icon. -/// @group file-manager $kendo-file-manager-preview-icon-text: null !default; -/// The border color of the FileManager preview icon. -/// @group file-manager $kendo-file-manager-preview-icon-border: null !default; diff --git a/packages/core/scss/components/filter/_variables.scss b/packages/core/scss/components/filter/_variables.scss index 07445b02d2b..c749e9b73eb 100644 --- a/packages/core/scss/components/filter/_variables.scss +++ b/packages/core/scss/components/filter/_variables.scss @@ -1,30 +1,14 @@ // Filter expression builder -/// The horizontal padding of the Filter. -/// @group filter $kendo-filter-padding-x: null !default; -/// The vertical padding of the Filter. -/// @group filter $kendo-filter-padding-y: null !default; -/// The bottom margin of the Filter. -/// @group filter $kendo-filter-bottom-margin: null !default; -/// The width of the line that connects the Filter items. -/// @group filter $kendo-filter-line-size: null !default; -/// The width of the dropdown elements in the Filter items. -/// @group filter $kendo-filter-operator-dropdown-width: null !default; -/// The text color of the Filter preview field. -/// @group filter $kendo-filter-preview-field-text: null !default; -/// The text color of the Filter preview operator. -/// @group filter $kendo-filter-preview-operator-text: null !default; -/// The box shadow of the focused Filter toolbar. -/// @group filter $kendo-filter-toolbar-focus-shadow: null !default; diff --git a/packages/core/scss/components/floating-label/_variables.scss b/packages/core/scss/components/floating-label/_variables.scss index f68f17f56f9..a76d4c7f2e2 100644 --- a/packages/core/scss/components/floating-label/_variables.scss +++ b/packages/core/scss/components/floating-label/_variables.scss @@ -1,51 +1,21 @@ // Floating label -/// The transformation scale of the Floating Label. -/// @group floating-label $kendo-floating-label-scale: null !default; -/// The font size of the Floating Label. -/// @group floating-label $kendo-floating-label-font-size: null !default; -/// The maximum width of the Floating Label. -/// @group floating-label $kendo-floating-label-max-width: null !default; -/// The line height of the Floating Label. -/// @group floating-label $kendo-floating-label-line-height: null !default; -/// The height of the Floating Label. -/// @group floating-label $kendo-floating-label-height: null !default; -/// The horizontal offset of the Floating Label. -/// @group floating-label $kendo-floating-label-offset-x: null !default; -/// The vertical offset of the Floating Label. -/// @group floating-label $kendo-floating-label-offset-y: null !default; -/// The transformation scale of the focused Floating Label. -/// @group floating-label $kendo-floating-label-focus-scale: null !default; -/// The horizontal offset of the focused Floating Label. -/// @group floating-label $kendo-floating-label-focus-offset-x: null !default; -/// The vertical offset of the focused Floating Label. -/// @group floating-label $kendo-floating-label-focus-offset-y: null !default; -/// The transition of the Floating Label. -/// @group floating-label $kendo-floating-label-transition: null !default; -/// The background color of the Floating Label. -/// @group floating-label $kendo-floating-label-bg: null !default; -/// The text color of the Floating Label. -/// @group floating-label $kendo-floating-label-text: null !default; -/// The background color of the focused Floating Label. -/// @group floating-label $kendo-floating-label-focus-bg: null !default; -/// The text color of the focused Floating Label. -/// @group floating-label $kendo-floating-label-focus-text: null !default; diff --git a/packages/core/scss/components/forms/_variables.scss b/packages/core/scss/components/forms/_variables.scss index 60a5d4b7e57..f10e5cb23b1 100644 --- a/packages/core/scss/components/forms/_variables.scss +++ b/packages/core/scss/components/forms/_variables.scss @@ -1,179 +1,77 @@ // Forms -/// The padding of the inline Form. -/// @group form $kendo-form-spacer: null !default; -/// The font size of the Form. -/// @group form $kendo-form-font-size: null !default; -/// The line height of the Form. -/// @group form $kendo-form-line-height: null !default; -/// The line height of the Form in em units. -/// @group form $kendo-form-line-height-em: null !default; -/// The line height of the small Form. -/// @group form $kendo-form-sm-line-height: null !default; -/// The line height of the large Form. -/// @group form $kendo-form-lg-line-height: null !default; -/// The margin of the Form fieldset. -/// @group form $kendo-form-fieldset-margin: null !default; -/// The padding of the Form fieldset. -/// @group form $kendo-form-fieldset-padding: null !default; -/// The margin of the Form legend. -/// @group form $kendo-form-legend-margin: null !default; -/// The padding of the Form legend. -/// @group form $kendo-form-legend-padding: null !default; -/// The border width of the Form legend. -/// @group form $kendo-form-legend-border-width: null !default; -/// The border style of the Form legend. -/// @group form $kendo-form-legend-border-style: null !default; -/// The border color of the Form legend. -/// @group form $kendo-form-legend-border-color: null !default; -/// The width of the Form legend. -/// @group form $kendo-form-legend-width: null !default; -/// The font size of the Form legend. -/// @group form $kendo-form-legend-font-size: null !default; -/// The text capitalization of the Form legend. -/// @group form $kendo-form-legend-text-transform: null !default; -/// The bottom margin of the Form label. -/// @group form $kendo-form-label-margin-bottom: null !default; -/// The horizontal margin of the Form buttons. -/// @group form $kendo-form-button-margin-x: null !default; -/// The font size of the Form hint. -/// @group form $kendo-form-hint-font-size: null !default; -/// The font style of the Form hint. -/// @group form $kendo-form-hint-font-style: null !default; -/// The top margin of the Form hint. -/// @group form $kendo-form-hint-margin-top: null !default; -/// The row spacing of the small Form. -/// @group form $kendo-form-sm-rows-spacing: null !default; -/// The row spacing of the medium Form. -/// @group form $kendo-form-md-rows-spacing: null !default; -/// The row spacing of the large Form. -/// @group form $kendo-form-lg-rows-spacing: null !default; -/// The margin of the Form separator. -/// @group form $kendo-form-separator-margin: null !default; -/// The border color of the Form separator. -/// @group form $kendo-form-separator-border-color: null !default; -/// The top padding of the label in the horizontal Form. -/// @group form $kendo-horizontal-form-label-padding-top: null !default; -/// The horizontal margin of the label in the horizontal Form. -/// @group form $kendo-horizontal-form-label-margin-x: null !default; -/// The width of the label in the horizontal Form. -/// @group form $kendo-horizontal-form-label-width: null !default; -/// The horizontal alignment of the label in the horizontal Form. -/// @group form $kendo-horizontal-form-label-align: null !default; -/// The maximum width of the field wrap in the horizontal Form. -/// @group form $kendo-horizontal-form-field-wrap-max-width: null !default; -/// The width of the inline Form element. -/// @group form $kendo-inline-form-element-width: null !default; -/// The horizontal padding of the inline Form field. -/// @group form $kendo-inline-form-field-padding-x: null !default; -/// The vertical padding of the inline Form field. -/// @group form $kendo-inline-form-field-padding-y: null !default; -/// The invalid text color of the Form. -/// @group form $kendo-forms-invalid-color: null !default; -/// The horizontal margin of the optional label in the Form. -/// @group form $kendo-label-optional-margin-x: null !default; -/// The font size of the optional label in the Form. -/// @group form $kendo-label-optional-font-size: null !default; -/// The font style of the optional label in the Form. -/// @group form $kendo-label-optional-font-style: null !default; -/// The margin of the Form fieldset. -/// @group form $kendo-fieldset-margin: null !default; -/// The font size of the Form fieldset. -/// @group form $kendo-fieldset-font-size: null !default; -/// The background color of the Form fieldset. -/// @group form $kendo-fieldset-bg: null !default; -/// The text color of the Form fieldset. -/// @group form $kendo-fieldset-text: null !default; -/// The border color of the Form fieldset. -/// @group form $kendo-fieldset-border: null !default; -/// The padding of the Form fieldset legend. -/// @group form $kendo-fieldset-legend-padding: null !default; -/// The margin of the Form fieldset legend -/// @group form $kendo-fieldset-legend-margin: null !default; -/// The margin of the Form alert error. -/// @group form $kendo-form-alert-error-margin: null !default; -/// The margin of the Form field info. -/// @group form $kendo-form-field-info-margin: null !default; -/// The background color of the Form legend. -/// @group form $kendo-fieldset-legend-bg: null !default; -/// The text color of the Form legend. -/// @group form $kendo-fieldset-legend-text: null !default; -/// The border color of the Form legend. -/// @group form $kendo-fieldset-legend-border: null !default; -/// The sizes map for the Form. -/// @group form $kendo-form-sizes: null !default; diff --git a/packages/core/scss/components/gantt/_variables.scss b/packages/core/scss/components/gantt/_variables.scss index 4c8f60d2aab..f7dd6b34cd8 100644 --- a/packages/core/scss/components/gantt/_variables.scss +++ b/packages/core/scss/components/gantt/_variables.scss @@ -1,251 +1,101 @@ // Gantt -/// The border width of the Gantt. -/// @group gantt $kendo-gantt-border-width: null !default; -/// The font family of the Gantt. -/// @group gantt $kendo-gantt-font-family: null !default; -/// The font size of the Gantt. -/// @group gantt $kendo-gantt-font-size: null !default; -/// The line height of the Gantt. -/// @group gantt $kendo-gantt-line-height: null !default; -/// The background color of the Gantt. -/// @group gantt $kendo-gantt-bg: null !default; -/// The text color of the Gantt. -/// @group gantt $kendo-gantt-text: null !default; -/// The border color of the Gantt. -/// @group gantt $kendo-gantt-border: null !default; -/// The background color of the Gantt TreeList. -/// @group gantt $kendo-gantt-treelist-bg: null !default; -/// The text color of the Gantt TreeList. -/// @group gantt $kendo-gantt-treelist-text: null !default; -/// The border color of the Gantt TreeList. -/// @group gantt $kendo-gantt-treelist-border: null !default; -/// The background color of the Gantt non-working days. -/// @group gantt $kendo-gantt-nonwork-bg: null !default; -/// The text color of the Gantt non-working days. -/// @group gantt $kendo-gantt-nonwork-text: null !default; -/// The border color of the Gantt non-working days. -/// @group gantt $kendo-gantt-nonwork-border: null !default; -/// The size of the Gantt connecting lines. -/// @group gantt $kendo-gantt-line-size: null !default; -/// The background fill color of the Gantt connecting lines. -/// @group gantt $kendo-gantt-line-fill: null !default; -/// The background fill of the selected Gantt connecting lines. -/// @group gantt $kendo-gantt-line-selected-fill: null !default; -/// The size of the Gantt task dot. -/// @group gantt $kendo-gantt-dot-size: null !default; -/// The spacing of the Gantt task dot. -/// @group gantt $kendo-gantt-dot-spacing: null !default; -/// The background color of the Gantt task dot. -/// @group gantt $kendo-gantt-dot-bg: null !default; -/// The border color of the Gantt task dot. -/// @group gantt $kendo-gantt-dot-border: null !default; -/// The background color of the hovered Gantt task dot. -/// @group gantt $kendo-gantt-dot-hover-bg: null !default; -/// The border color of the hovered Gantt task dot. -/// @group gantt $kendo-gantt-dot-hover-border: null !default; -/// The background color of the Gantt milestone. -/// @group gantt $kendo-gantt-milestone-bg: null !default; -/// The border color of the Gantt milestone. -/// @group gantt $kendo-gantt-milestone-border: null !default; -/// The background color of the selected Gantt milestone. -/// @group gantt $kendo-gantt-milestone-selected-bg: null !default; -/// The border color of the selected Gantt milestone. -/// @group gantt $kendo-gantt-milestone-selected-border: null !default; -/// The background color of the Gantt summary. -/// @group gantt $kendo-gantt-summary-bg: null !default; -/// The background color of the Gantt summary progress. -/// @group gantt $kendo-gantt-summary-progress-bg: null !default; -/// The background color of the selected Gantt summary. -/// @group gantt $kendo-gantt-summary-selected-bg: null !default; -/// The background color of the selected Gantt summary progress. -/// @group gantt $kendo-gantt-summary-progress-selected-bg: null !default; -/// The border width of the Gantt task. -/// @group gantt $kendo-gantt-task-border-width: null !default; -/// The horizontal padding of the Gantt task. -/// @group gantt $kendo-gantt-task-padding-x: null !default; -/// The vertical padding of the Gantt task. -/// @group gantt $kendo-gantt-task-padding-y: null !default; -/// The background color of the Gantt task. -/// @group gantt $kendo-gantt-task-bg: null !default; -/// The text color of the Gantt task. -/// @group gantt $kendo-gantt-task-text: null !default; -/// The border color of the Gantt task. -/// @group gantt $kendo-gantt-task-border: null !default; -/// The background color of the Gantt task progress. -/// @group gantt $kendo-gantt-task-progress-bg: null !default; -/// The background color of selected the Gantt task. -/// @group gantt $kendo-gantt-task-selected-bg: null !default; -/// The text color of the selected Gantt task. -/// @group gantt $kendo-gantt-task-selected-text: null !default; -/// The border color of the selected Gantt task. -/// @group gantt $kendo-gantt-task-selected-border: null !default; -/// The background color of the selected Gantt task progress. -/// @group gantt $kendo-gantt-task-progress-selected-bg: null !default; -/// The padding of the Gantt task actions. -/// @group gantt $kendo-gantt-task-actions-padding: null !default; -/// The vertical margin of the Gantt task planned line. -/// @group gantt $kendo-gantt-planned-margin-y: null !default; -/// The border width of the Gantt task planned line. -/// @group gantt $kendo-gantt-planned-border-width: null !default; -/// The line height of the Gantt task planned line. -/// @group gantt $kendo-gantt-planned-line-height: null !default; -/// The vertical margin of the Gantt planned dependencies. -/// @group gantt $kendo-gantt-planned-dependency-margin-y: null !default; -/// The default width of the Gantt planned line dot. -/// @group gantt $kendo-gantt-planned-moment-width: null !default; -/// The default height of the Gantt planned line dot. -/// @group gantt $kendo-gantt-planned-moment-height: null !default; -/// The border radius of the Gantt planned line dot. -/// @group gantt $kendo-gantt-planned-moment-border-radius: null !default; -/// The horizontal margin of the Gantt planned line dot. -/// @group gantt $kendo-gantt-planned-moment-left-margin-x: null !default; -/// The horizontal margin of the Gantt milestone planned line dot. -/// @group gantt $kendo-gantt-planned-milestone-moment-margin-x: null !default; -/// The default height of the Gantt planned line. -/// @group gantt $kendo-gantt-planned-duration-height: null !default; -/// The height of the hovered Gantt planned line. -/// @group gantt $kendo-gantt-planned-duration-hover-height: null !default; -/// The top position of the Gantt drag hint. -/// @group gantt $kendo-gantt-planned-single-drag-hint-top: null !default; -/// The top position of the Gantt summary drag hint. -/// @group gantt $kendo-gantt-planned-summary-drag-hint-top: null !default; -/// The top position of the Gantt planned milestone drag hint. -/// @group gantt $kendo-gantt-planned-milestone-drag-hint-top: null !default; -/// The horizontal margin of the Gantt milestone wrap. -/// @group gantt $kendo-gantt-rtl-milestone-wrap-margin-x: null !default; -/// The horizontal margin of the Gantt milestone line dot. -/// @group gantt $kendo-gantt-rtl-milestone-planned-moment-margin-x: null !default; -/// The horizontal margin of the Gantt milestone task dot. -/// @group gantt $kendo-gantt-rtl-milestone-dot-start-margin-x: null !default; -/// The horizontal offset of the Gantt delayed task resize handler. -/// @group gantt $kendo-gantt-planned-offset-resize-handler-margin-x: null !default; -/// The background color of the Gantt planned Tooltip. -/// @group gantt $kendo-gantt-planned-bg: null !default; -/// The border color of the Gantt planned Tooltip. -/// @group gantt $kendo-gantt-planned-border: null !default; -/// The background color of the Gantt delayed task. -/// @group gantt $kendo-gantt-delayed-bg: null !default; -/// The complement background color of the Gantt delayed task. -/// @group gantt $kendo-gantt-delayed-bg-lighter: null !default; -/// The background color of the Gantt advanced task. -/// @group gantt $kendo-gantt-advanced-bg: null !default; -/// The complement background color of the Gantt advanced task. -/// @group gantt $kendo-gantt-advanced-bg-lighter: null !default; -/// The text color of the Gantt delayed task action. -/// @group gantt $kendo-gantt-action-on-offset-text: null !default; -/// The top position of the Gantt delayed task resize handler. -/// @group gantt $kendo-gantt-offset-resize-handler-top: null !default; -/// The default width of the Gantt validation Tooltip. -/// @group gantt $kendo-gantt-validation-tooltip-width: null !default; -/// The default width of the Gantt validation Tooltip label. -/// @group gantt $kendo-gantt-validation-tooltip-label-width: null !default; -/// The border color of the Gantt validation Tooltip. -/// @group gantt $kendo-gantt-validation-tooltip-border: null !default; -/// The border color of the valid Gantt validation Tooltip. -/// @group gantt $kendo-gantt-validation-tooltip-valid-border: null !default; -/// The border color of the invalid Gantt validation Tooltip. -/// @group gantt $kendo-gantt-validation-tooltip-invalid-border: null !default; -/// The horizontal padding of the Gantt task Tooltip. -/// @group gantt $kendo-gantt-task-tooltip-padding-x: null !default; -/// The vertical padding of the Gantt task Tooltip. -/// @group gantt $kendo-gantt-task-tooltip-padding-y: null !default; diff --git a/packages/core/scss/components/grid/_variables.scss b/packages/core/scss/components/grid/_variables.scss index c1105d15674..9962d6c3aae 100644 --- a/packages/core/scss/components/grid/_variables.scss +++ b/packages/core/scss/components/grid/_variables.scss @@ -4,46 +4,22 @@ $kendo-grid-font-family: null !default; $kendo-grid-font-size: null !default; $kendo-grid-line-height: null !default; -/// The horizontal padding of the Grid. -/// @group grid $kendo-grid-padding-x: null !default; -/// The vertical padding of the Grid. -/// @group grid $kendo-grid-padding-y: null !default; -/// The horizontal padding of the Grid header. -/// @group grid $kendo-grid-header-padding-x: null !default; -/// The vertical padding of the Grid header. -/// @group grid $kendo-grid-header-padding-y: null !default; -/// The horizontal padding of the Grid grouping header. -/// @group grid $kendo-grid-grouping-header-padding-x: null !default; -/// The vertical padding of the Grid grouping header. -/// @group grid $kendo-grid-grouping-header-padding-y: null !default; -/// The horizontal padding of the Grid cell. -/// @group grid $kendo-grid-cell-padding-x: null !default; -/// The vertical padding of the Grid cell. -/// @group grid $kendo-grid-cell-padding-y: null !default; -/// The horizontal padding of the Grid filter cell. -/// @group grid $kendo-grid-filter-cell-padding-x: null !default; -/// The vertical padding of the Grid filter cell. -/// @group grid $kendo-grid-filter-cell-padding-y: null !default; -/// The horizontal padding of the Grid edit cell. -/// @group grid $kendo-grid-edit-cell-padding-x: null !default; -/// The vertical padding of the Grid filter cell. -/// @group grid $kendo-grid-edit-cell-padding-y: null !default; $kendo-grid-group-drop-hint-size: null !default; @@ -98,89 +74,37 @@ $kendo-grid-toolbar-border-width: null !default; $kendo-grid-cell-horizontal-border-width: null !default; $kendo-grid-cell-vertical-border-width: null !default; -/// The background color of the Grid. -/// @group grid $kendo-grid-bg: null !default; -/// The text color of the Grid. -/// @group grid $kendo-grid-text: null !default; -/// The border color of the Grid. -/// @group grid $kendo-grid-border: null !default; -/// The background color of Grid header. -/// @group grid $kendo-grid-header-bg: null !default; -/// The text color of Grid header. -/// @group grid $kendo-grid-header-text: null !default; -/// The border color of Grid header. -/// @group grid $kendo-grid-header-border: null !default; -/// The background gradient of Grid header. -/// @group grid $kendo-grid-header-gradient: null !default; -/// The background color of Grid footer. -/// @group grid $kendo-grid-footer-bg: null !default; -/// The text color of Grid footer. -/// @group grid $kendo-grid-footer-text: null !default; -/// The border color of Grid footer. -/// @group grid $kendo-grid-footer-border: null !default; -/// The background color of the Grid alternating rows. -/// @group grid $kendo-grid-alt-bg: null !default; -/// The text color of the Grid alternating rows. -/// @group grid $kendo-grid-alt-text: null !default; -/// The border color of the Grid alternating rows. -/// @group grid $kendo-grid-alt-border: null !default; -/// The background color of hovered Grid rows. -/// @group grid $kendo-grid-hover-bg: null !default; -/// The text color of hovered Grid rows. -/// @group grid $kendo-grid-hover-text: null !default; -/// The border color of hovered Grid rows. -/// @group grid $kendo-grid-hover-border: null !default; -/// The background color of selected Grid rows. -/// @group grid $kendo-grid-selected-bg: null !default; -/// The text color of selected Grid rows. -/// @group grid $kendo-grid-selected-text: null !default; -/// The border color of selected Grid rows. -/// @group grid $kendo-grid-selected-border: null !default; -/// The background color of the Grid selection aggregates container. -/// @group grid $kendo-grid-selection-aggregates-bg: null !default; -/// The text color of the Grid selection aggregates container. -/// @group grid $kendo-grid-selection-aggregates-text: null !default; -/// The border color of the Grid selection aggregates container. -/// @group grid $kendo-grid-selection-aggregates-border: null !default; -/// The border width of the Grid selection aggregates container. -/// @group grid $kendo-grid-selection-aggregates-border-width: null !default; -/// The spacing between the selection aggregates items. -/// @group grid $kendo-grid-selection-aggregates-spacing: null !default; -/// The line height of the Grid selection aggregates container. -/// @group grid $kendo-grid-selection-aggregates-line-height: null !default; -/// The font weight of the Grid selection aggregates container. -/// @group grid $kendo-grid-selection-aggregates-font-weight: null !default; $kendo-grid-grouping-row-bg: null !default; @@ -270,12 +194,6 @@ $kendo-grid-grouping-row-border-top: null !default; $kendo-grid-group-footer-border-y: null !default; $kendo-grid-group-footer-second-cell-border: null !default; -/// The background color of the Grid row resize indicator. -/// @group grid $kendo-grid-row-resizer-hover-bg: null !default; -/// The background color of the active Grid row resize indicator. -/// @group grid $kendo-grid-row-resizer-active-bg: null !default; -/// The height of the Grid row resize indicator. -/// @group grid $kendo-grid-row-resizer-height: null !default; diff --git a/packages/core/scss/components/icons/_variables.scss b/packages/core/scss/components/icons/_variables.scss index 8a89c500eb6..9d561c6165e 100644 --- a/packages/core/scss/components/icons/_variables.scss +++ b/packages/core/scss/components/icons/_variables.scss @@ -1,30 +1,10 @@ -/// The default size icon size. -/// @group icon $kendo-icon-size: null !default; -/// The extra small icon size. -/// @group icon $kendo-icon-size-xs: null !default; -/// The small icon size. -/// @group icon $kendo-icon-size-sm: null !default; -/// The medium icon size. -/// @group icon $kendo-icon-size-md: null !default; -/// The large icon size. -/// @group icon $kendo-icon-size-lg: null !default; -/// The extra large icon size. -/// @group icon $kendo-icon-size-xl: null !default; -/// The double extra large icon size. -/// @group icon $kendo-icon-size-xxl: null !default; -/// The triple extra large icon size. -/// @group icon $kendo-icon-size-xxxl: null !default; -/// The default icon spacing. -/// @group icon $kendo-icon-spacing: null !default; -/// The default icon padding. -/// @group icon $kendo-icon-padding: null !default; diff --git a/packages/core/scss/components/input/_variables.scss b/packages/core/scss/components/input/_variables.scss index 972d2bc6ab7..d515ce51405 100644 --- a/packages/core/scss/components/input/_variables.scss +++ b/packages/core/scss/components/input/_variables.scss @@ -1,426 +1,172 @@ // Input -/// The default width of the Input components. -/// @group input $kendo-input-default-width: null !default; -/// The border width of the Input components. -/// @group input $kendo-input-border-width: null !default; $kendo-input-border-height: null !default; -/// The border radius of the Input components. -/// @group input $kendo-input-border-radius: null !default; -/// The horizontal padding of the Input components. -/// @group input $kendo-input-padding-x: null !default; -/// The horizontal padding of the small Input components. -/// @group input $kendo-input-sm-padding-x: null !default; -/// The horizontal padding of the medium Input components. -/// @group input $kendo-input-md-padding-x: null !default; -/// The horizontal padding of the large Input components. -/// @group input $kendo-input-lg-padding-x: null !default; -/// The vertical padding of the Input components. -/// @group input $kendo-input-padding-y: null !default; -/// The vertical padding of the small Input components. -/// @group input $kendo-input-sm-padding-y: null !default; -/// The vertical padding of the medium Input components. -/// @group input $kendo-input-md-padding-y: null !default; -/// The vertical padding of the large Input components. -/// @group input $kendo-input-lg-padding-y: null !default; -/// The font family of the Input components. -/// @group input $kendo-input-font-family: null !default; -/// The font size of the Input components. -/// @group input $kendo-input-font-size: null !default; -/// The font size of the small Input components. -/// @group input $kendo-input-sm-font-size: null !default; -/// The font size of the medium Input components. -/// @group input $kendo-input-md-font-size: null !default; -/// The font size of the large Input components. -/// @group input $kendo-input-lg-font-size: null !default; -/// The line height of the Input components. -/// @group input $kendo-input-line-height: null !default; -/// The line height of the small Input components. -/// @group input $kendo-input-sm-line-height: null !default; -/// The line height of the medium Input components. -/// @group input $kendo-input-md-line-height: null !default; -/// The line height of the large Input components. -/// @group input $kendo-input-lg-line-height: null !default; -/// The calculated height of the Input. -/// @group input $kendo-input-calc-size: null !default; $kendo-input-sm-calc-size: null !default; $kendo-input-md-calc-size: null !default; $kendo-input-lg-calc-size: null !default; -/// The sizes map for the Input components. -/// @group input $kendo-input-sizes: null !default; -/// The background color of the Input components. -/// @group input $kendo-input-bg: null !default; -/// The text color of the Input components. -/// @group input $kendo-input-text: null !default; -/// The border color of the Input components. -/// @group input $kendo-input-border: null !default; -/// The shadow of the Input components. -/// @group input $kendo-input-shadow: null !default; -/// The background color of the hovered Input components. -/// @group input $kendo-input-hover-bg: null !default; -/// The text color of the hovered Input components. -/// @group input $kendo-input-hover-text: null !default; -/// The border color of the hovered Input components. -/// @group input $kendo-input-hover-border: null !default; -/// The shadow of the hovered Input components. -/// @group input $kendo-input-hover-shadow: null !default; -/// The background color of the focused Input components. -/// @group input $kendo-input-focus-bg: null !default; -/// The text color of the focused Input components. -/// @group input $kendo-input-focus-text: null !default; -/// The border color of the focused Input components. -/// @group input $kendo-input-focus-border: null !default; -/// The shadow of the focused Input components. -/// @group input $kendo-input-focus-shadow: null !default; -/// The background color of the selected Input components. -/// @group input $kendo-input-selected-bg: null !default; -/// The text color of the selected Input components. -/// @group input $kendo-input-selected-text: null !default; -/// The background color of the disabled Input components. -/// @group input $kendo-input-disabled-bg: null !default; -/// The text color of the disabled Input components. -/// @group input $kendo-input-disabled-text: null !default; -/// The border color of the disabled Input components. -/// @group input $kendo-input-disabled-border: null !default; -/// The gradient of the disabled Input components. -/// @group input $kendo-input-disabled-gradient: null !default; -/// The shadow of the disabled Input components. -/// @group input $kendo-input-disabled-shadow: null !default; -/// The background color of the outline Input components. -/// @group input $kendo-input-outline-bg: null !default; -/// The text color of the outline Input components. -/// @group input $kendo-input-outline-text: null !default; -/// The border color of the outline Input components. -/// @group input $kendo-input-outline-border: null !default; -/// The background color of the outline hovered Input components. -/// @group input $kendo-input-outline-hover-bg: null !default; -/// The text color of the outline hovered Input components. -/// @group input $kendo-input-outline-hover-text: null !default; -/// The border color of the outline hovered Input components. -/// @group input $kendo-input-outline-hover-border: null !default; -/// The background color of the outline focused Input components. -/// @group input $kendo-input-outline-focus-bg: null !default; -/// The text color of the outline focused Input components. -/// @group input $kendo-input-outline-focus-text: null !default; -/// The border color of the outline focused Input components. -/// @group input $kendo-input-outline-focus-border: null !default; -/// The shadow of the outline focused Input components. -/// @group input $kendo-input-outline-focus-shadow: null !default; -/// The background color of the flat Input components. -/// @group input $kendo-input-flat-bg: null !default; -/// The text color of the flat Input components. -/// @group input $kendo-input-flat-text: null !default; -/// The border color of the flat Input components. -/// @group input $kendo-input-flat-border: null !default; -/// The background color of the flat hovered Input components. -/// @group input $kendo-input-flat-hover-bg: null !default; -/// The text color of the flat hovered Input components. -/// @group input $kendo-input-flat-hover-text: null !default; -/// The border color of the flat hovered Input components. -/// @group input $kendo-input-flat-hover-border: null !default; -/// The background color of the flat focused Input components. -/// @group input $kendo-input-flat-focus-bg: null !default; -/// The text color of the flat focused Input components. -/// @group input $kendo-input-flat-focus-text: null !default; -/// The border color of the flat focused Input components. -/// @group input $kendo-input-flat-focus-border: null !default; -/// The shadow of the flat focused Input components. -/// @group input $kendo-input-flat-focus-shadow: null !default; -/// The text color of the Input placeholder. -/// @group input $kendo-input-placeholder-text: null !default; -/// The opacity of the Input placeholder. -/// @group input $kendo-input-placeholder-opacity: null !default; -/// The color of the Input clear value icon. -/// @group input $kendo-input-clear-value-text: null !default; -/// The opacity of the Input clear value icon. -/// @group input $kendo-input-clear-value-opacity: null !default; -/// The color of the hovered Input clear value icon. -/// @group input $kendo-input-clear-value-hover-text: null !default; -/// The opacity of the hovered Input clear value icon. -/// @group input $kendo-input-clear-value-hover-opacity: null !default; -/// The vertical margin of the clear value icon. -/// @group input $kendo-input-values-margin-y: null !default; -/// The horizontal margin of the clear value icon. -/// @group input $kendo-input-values-margin-x: null !default; -/// The width of the Input button. -/// @group input $kendo-input-button-width: null !default; -/// The border width of the Input button. -/// @group input $kendo-input-button-border-width: null !default; -/// The width of the Input spinner button. -/// @group input $kendo-input-spinner-width: null !default; -/// The icon offset of the Input spinner button. -/// @group input $kendo-input-spinner-icon-offset: null !default; -/// The color of the Input separator. -/// @group input $kendo-input-separator-text: null !default; -/// The opacity of the Input separator. -/// @group input $kendo-input-separator-opacity: null !default; -/// The text color of the Input prefix. -/// @group input $kendo-input-prefix-text: null !default; -/// The text color of the Input suffix. -/// @group input $kendo-input-suffix-text: null !default; -/// The text color of the Input prefix. -/// @group input $kendo-input-prefix-text: null !default; -/// The text color of the Input suffix. -/// @group input $kendo-input-suffix-text: null !default; -/// The border color of the invalid Input components. -/// @group input $kendo-input-invalid-border: null !default; -/// The shadow of the invalid Input components. -/// @group input $kendo-input-invalid-shadow: null !default; -/// The background color of the Picker components. -/// @group picker $kendo-picker-bg: null !default; -/// The text color of the Picker components. -/// @group picker $kendo-picker-text: null !default; -/// The border color of the Picker components. -/// @group picker $kendo-picker-border: null !default; -/// The gradient of the Picker components. -/// @group picker $kendo-picker-gradient: null !default; -/// The shadow of the Picker components. -/// @group picker $kendo-picker-shadow: null !default; -/// The background color of the hovered Picker components. -/// @group picker $kendo-picker-hover-bg: null !default; -/// The text color of the hovered Picker components. -/// @group picker $kendo-picker-hover-text: null !default; -/// The border color of the hovered Picker components. -/// @group picker $kendo-picker-hover-border: null !default; -/// The gradient of the hovered Picker components. -/// @group picker $kendo-picker-hover-gradient: null !default; -/// The shadow of the hovered Picker components. -/// @group picker $kendo-picker-hover-shadow: null !default; -/// The background color of the focused Picker components. -/// @group picker $kendo-picker-focus-bg: null !default; -/// The text color of the focused Picker components. -/// @group picker $kendo-picker-focus-text: null !default; -/// The border color of the focused Picker components. -/// @group picker $kendo-picker-focus-border: null !default; -/// The gradient of the focused Picker components. -/// @group picker $kendo-picker-focus-gradient: null !default; -/// The shadow of the focused Picker components. -/// @group picker $kendo-picker-focus-shadow: null !default; -/// The background color of the disabled Picker components. -/// @group picker $kendo-picker-disabled-bg: null !default; -/// The text color of the disabled Picker components. -/// @group picker $kendo-picker-disabled-text: null !default; -/// The border color of the disabled Picker components. -/// @group picker $kendo-picker-disabled-border: null !default; -/// The gradient of the disabled Picker components. -/// @group picker $kendo-picker-disabled-gradient: null !default; -/// The shadow of the disabled Picker components. -/// @group picker $kendo-picker-disabled-shadow: null !default; -/// The background color of the outline Picker components. -/// @group picker $kendo-picker-outline-bg: null !default; -/// The text color of the outline Picker components. -/// @group picker $kendo-picker-outline-text: null !default; -/// The border color of the outline Picker components. -/// @group picker $kendo-picker-outline-border: null !default; -/// The background color of the outline hovered Picker components. -/// @group picker $kendo-picker-outline-hover-bg: null !default; -/// The text color of the outline hovered Picker components. -/// @group picker $kendo-picker-outline-hover-text: null !default; -/// The border color of the outline hovered Picker components. -/// @group picker $kendo-picker-outline-hover-border: null !default; -/// The background color of the outline focused Picker components. -/// @group picker $kendo-picker-outline-focus-bg: null !default; -/// The text color of the outline focused Picker components. -/// @group picker $kendo-picker-outline-focus-text: null !default; -/// The border color of the outline focused Picker components. -/// @group picker $kendo-picker-outline-focus-border: null !default; -/// The shadow of the outline focused Picker components. -/// @group picker $kendo-picker-outline-focus-shadow: null !default; -/// The background color of the outline hovered and focused Picker components. -/// @group picker $kendo-picker-outline-hover-focus-bg: null !default; -/// The text color of the outline hovered and focused Picker components. -/// @group picker $kendo-picker-outline-hover-focus-text: null !default; -/// The border color of the outline hovered and focused Picker components. -/// @group picker $kendo-picker-outline-hover-focus-border: null !default; -/// The background color of the flat Picker components. -/// @group picker $kendo-picker-flat-bg: null !default; -/// The text color of the flat Picker components. -/// @group picker $kendo-picker-flat-text: null !default; -/// The border color of the flat Picker components. -/// @group picker $kendo-picker-flat-border: null !default; -/// The background color of the flat hovered Picker components. -/// @group picker $kendo-picker-flat-hover-bg: null !default; -/// The text color of the flat hovered Picker components. -/// @group picker $kendo-picker-flat-hover-text: null !default; -/// The border color of the flat hovered Picker components. -/// @group picker $kendo-picker-flat-hover-border: null !default; -/// The background color of the flat focused Picker components. -/// @group picker $kendo-picker-flat-focus-bg: null !default; -/// The text color of the flat focused Picker components. -/// @group picker $kendo-picker-flat-focus-text: null !default; -/// The border color of the flat focused Picker components. -/// @group picker $kendo-picker-flat-focus-border: null !default; -/// The shadow of the flat focused Picker components. -/// @group picker $kendo-picker-flat-focus-shadow: null !default; -/// The background color of the flat hovered and focused Picker components. -/// @group picker $kendo-picker-flat-hover-focus-bg: null !default; -/// The text color of the flat hovered and focused Picker components. -/// @group picker $kendo-picker-flat-hover-focus-text: null !default; -/// The border color of the flat hovered and focused Picker components. -/// @group picker $kendo-picker-flat-hover-focus-border: null !default; diff --git a/packages/core/scss/components/list/_variables.scss b/packages/core/scss/components/list/_variables.scss index f7df3769350..0b72a9f7174 100644 --- a/packages/core/scss/components/list/_variables.scss +++ b/packages/core/scss/components/list/_variables.scss @@ -1,202 +1,118 @@ // List -/// The font family of the List components. -/// @group list $kendo-list-font-family: null !default; -/// The font size of the List component, if no size is set. -/// @group list $kendo-list-font-size: null !default; $kendo-list-sm-font-size: null !default; $kendo-list-md-font-size: null !default; $kendo-list-lg-font-size: null !default; -/// The line height of the List component, if no size is set. -/// @group list $kendo-list-line-height: null !default; $kendo-list-sm-line-height: null !default; $kendo-list-md-line-height: null !default; $kendo-list-lg-line-height: null !default; -/// The horizontal padding of the List header, if no size is set. -/// @group list $kendo-list-header-padding-x: null !default; $kendo-list-sm-header-padding-x: null !default; $kendo-list-md-header-padding-x: null !default; $kendo-list-lg-header-padding-x: null !default; -/// The vertical padding of the List header, if no size is set. -/// @group list $kendo-list-header-padding-y: null !default; $kendo-list-sm-header-padding-y: null !default; $kendo-list-md-header-padding-y: null !default; $kendo-list-lg-header-padding-y: null !default; -/// The border width of the List header. -/// @group list $kendo-list-header-border-width: null !default; -/// The font size of the List header, if no size is set. -/// @group list $kendo-list-header-font-size: null !default; $kendo-list-sm-header-font-size: null !default; $kendo-list-md-header-font-size: null !default; $kendo-list-lg-header-font-size: null !default; -/// The line height of the List header, if no size is set. -/// @group list $kendo-list-header-line-height: null !default; $kendo-list-sm-header-line-height: null !default; $kendo-list-md-header-line-height: null !default; $kendo-list-lg-header-line-height: null !default; -/// The font weight of the List header. -/// @group list $kendo-list-header-font-weight: null !default; -/// The padding of the the List filter input. -/// @group list $kendo-list-filter-padding: null !default; -/// The horizontal padding of the List items, when no size is set. -/// @group list $kendo-list-item-padding-x: null !default; $kendo-list-sm-item-padding-x: null !default; $kendo-list-md-item-padding-x: null !default; $kendo-list-lg-item-padding-x: null !default; -/// The vertical padding of the List items, when no size is set. -/// @group list $kendo-list-item-padding-y: null !default; $kendo-list-sm-item-padding-y: null !default; $kendo-list-md-item-padding-y: null !default; $kendo-list-lg-item-padding-y: null !default; -/// The font size of the List items, if no size is set. -/// @group list $kendo-list-item-font-size: null !default; $kendo-list-sm-item-font-size: null !default; $kendo-list-md-item-font-size: null !default; $kendo-list-lg-item-font-size: null !default; -/// The line height of the List items, if no size is set. -/// @group list $kendo-list-item-line-height: null !default; $kendo-list-sm-item-line-height: null !default; $kendo-list-md-item-line-height: null !default; $kendo-list-lg-item-line-height: null !default; -/// The horizontal padding of the List group items, when no size is set. -/// @group list $kendo-list-group-item-padding-x: null !default; $kendo-list-sm-group-item-padding-x: null !default; $kendo-list-md-group-item-padding-x: null !default; $kendo-list-lg-group-item-padding-x: null !default; -/// The vertical padding of the List group items, when no size is set. -/// @group list $kendo-list-group-item-padding-y: null !default; $kendo-list-sm-group-item-padding-y: null !default; $kendo-list-md-group-item-padding-y: null !default; $kendo-list-lg-group-item-padding-y: null !default; -/// The border width of the List group items. -/// @group list $kendo-list-group-item-border-width: null !default; -/// The font size of the List group items, if no size is set. -/// @group list $kendo-list-group-item-font-size: null !default; $kendo-list-sm-group-item-font-size: null !default; $kendo-list-md-group-item-font-size: null !default; $kendo-list-lg-group-item-font-size: null !default; -/// The line height of the List group items, if no size is set. -/// @group list $kendo-list-group-item-line-height: null !default; $kendo-list-sm-group-item-line-height: null !default; $kendo-list-md-group-item-line-height: null !default; $kendo-list-lg-group-item-line-height: null !default; -/// The font weight of a List group item. -/// @group list $kendo-list-group-item-font-weight: null !default; -/// The map with the sizes of the List. -/// @group list $kendo-list-sizes: null !default; -/// The background color of the List component. -/// @group list $kendo-list-bg: null !default; -/// The text color of the List component. -/// @group list $kendo-list-text: null !default; -/// The border color of the List component. -/// @group list $kendo-list-border: null !default; -/// The background color of the List header. -/// @group list $kendo-list-header-bg: null !default; -/// The text color of the List header. -/// @group list $kendo-list-header-text: null !default; -/// The border color of the List header. -/// @group list $kendo-list-header-border: null !default; -/// The box shadow of the List header. -/// @group list $kendo-list-header-shadow: null !default; -/// The background color of the List items. -/// @group list $kendo-list-item-bg: null !default; -/// The text color of the List items. -/// @group list $kendo-list-item-text: null !default; -/// The background color of the hovered List items. -/// @group list $kendo-list-item-hover-bg: null !default; -/// The text color of the hovered List items. -/// @group list $kendo-list-item-hover-text: null !default; -/// The background color of the focused List items. -/// @group list $kendo-list-item-focus-bg: null !default; -/// The text color of the focused List items. -/// @group list $kendo-list-item-focus-text: null !default; -/// The box shadow of the focused List items. -/// @group list $kendo-list-item-focus-shadow: null !default; -/// The background color of the selected List items. -/// @group list $kendo-list-item-selected-bg: null !default; -/// The text color of the selected List items. -/// @group list $kendo-list-item-selected-text: null !default; -/// The background color of the List group items. -/// @group list $kendo-list-group-item-bg: null !default; -/// The text color of the List group items. -/// @group list $kendo-list-group-item-text: null !default; -/// The border color of the List group items. -/// @group list $kendo-list-group-item-border: null !default; -/// The base shadow of the List group items. -/// @group list $kendo-list-group-item-shadow: null !default; -/// The color of the 'Option Label' text. -/// @group list $kendo-list-option-label-text: null !default; diff --git a/packages/core/scss/components/listbox/_variables.scss b/packages/core/scss/components/listbox/_variables.scss index 34f8ad47850..820dcd3fbec 100644 --- a/packages/core/scss/components/listbox/_variables.scss +++ b/packages/core/scss/components/listbox/_variables.scss @@ -1,50 +1,20 @@ // ListBox -/// The spacing between the ListBox elements. -/// @group listbox $kendo-listbox-spacing: null !default; -/// The spacing between the ListBox buttons. -/// @group listbox $kendo-listbox-button-spacing: null !default; -/// The width of the ListBox. -/// @group listbox $kendo-listbox-width: null !default; -/// The height of the ListBox. -/// @group listbox $kendo-listbox-default-height: null !default; -/// The width of the border around the ListBox. -/// @group listbox $kendo-listbox-border-width: null !default; -/// The font family of the ListBox. -/// @group listbox $kendo-listbox-font-family: null !default; -/// The font size of the ListBox. -/// @group listbox $kendo-listbox-font-size: null !default; -/// The line height of the ListBox. -/// @group listbox $kendo-listbox-line-height: null !default; -/// The text color of the ListBox. -/// @group listbox $kendo-listbox-text: null !default; -/// The background color of the ListBox. -/// @group listbox $kendo-listbox-bg: null !default; -/// The border color of the ListBox. -/// @group listbox $kendo-listbox-border: null !default; -/// The inline padding of the ListBox item. -/// @group listbox $kendo-listbox-item-padding-x: null !default; -/// The block padding of the ListBox item. -/// @group listbox $kendo-listbox-item-padding-y: null !default; -/// The width of the ListBox drop hint. -/// @group listbox $kendo-listbox-drop-hint-width: null !default; -/// The width of the border around the ListBox drop hint. -/// @group listbox $kendo-listbox-drop-hint-border-width: null !default; diff --git a/packages/core/scss/components/listview/_variables.scss b/packages/core/scss/components/listview/_variables.scss index 441a1c6a4ff..25bf55b4760 100644 --- a/packages/core/scss/components/listview/_variables.scss +++ b/packages/core/scss/components/listview/_variables.scss @@ -1,60 +1,24 @@ // ListView -/// The horizontal padding of the ListView. -/// @group listview $kendo-listview-padding-x: null !default; -/// The vertical padding of the ListView. -/// @group listview $kendo-listview-padding-y: null !default; -/// The width of the border around bordered ListView. -/// @group listview $kendo-listview-border-width: null !default; -/// The font family of the ListView. -/// @group listview $kendo-listview-font-family: null !default; -/// The font size of the ListView. -/// @group listview $kendo-listview-font-size: null !default; -/// The line height of the ListView. -/// @group listview $kendo-listview-line-height: null !default; -/// The text color of the ListView. -/// @group listview $kendo-listview-text: null !default; -/// The background color of the ListView. -/// @group listview $kendo-listview-bg: null !default; -/// The border color of the ListView. -/// @group listview $kendo-listview-border: null !default; -/// The horizontal padding of the ListView items. -/// @group listview $kendo-listview-item-padding-x: null !default; -/// The vertical padding of the ListView items. -/// @group listview $kendo-listview-item-padding-y: null !default; -/// The text color of the selected ListView items. -/// @group listview $kendo-listview-item-selected-text: null !default; -/// The background color of the selected ListView items. -/// @group listview $kendo-listview-item-selected-bg: null !default; -/// The border color of the selected ListView items. -/// @group listview $kendo-listview-item-selected-border: null !default; -/// The text color of the focused ListView items. -/// @group listview $kendo-listview-item-focus-text: null !default; -/// The background color of the focused ListView items. -/// @group listview $kendo-listview-item-focus-bg: null !default; -/// The border color of the focused ListView items. -/// @group listview $kendo-listview-item-focus-border: null !default; -/// The box shadow of the focused ListView items. -/// @group listview $kendo-listview-item-focus-shadow: null !default; diff --git a/packages/core/scss/components/loader/_variables.scss b/packages/core/scss/components/loader/_variables.scss index 527325842d9..7ad0b494301 100644 --- a/packages/core/scss/components/loader/_variables.scss +++ b/packages/core/scss/components/loader/_variables.scss @@ -1,125 +1,51 @@ // Loader -/// The border radius of the Loader segment. -/// @group loader $kendo-loader-segment-border-radius: null !default; -/// The size of the small Loader segment. -/// @group loader $kendo-loader-sm-segment-size: null !default; -/// The size of the medium Loader segment. -/// @group loader $kendo-loader-md-segment-size: null !default; -/// The size of the large Loader segment. -/// @group loader $kendo-loader-lg-segment-size: null !default; -/// The padding of the small Loader. -/// @group loader $kendo-loader-sm-padding: null !default; -/// The padding of the medium Loader. -/// @group loader $kendo-loader-md-padding: null !default; -/// The padding of the large Loader. -/// @group loader $kendo-loader-lg-padding: null !default; -/// The width of the small spinner-3 Loader. -/// @group loader $kendo-loader-sm-spinner-3-width: null !default; -/// The width of the medium spinner-3 Loader. -/// @group loader $kendo-loader-md-spinner-3-width: null !default; -/// The width of the large spinner-3 Loader. -/// @group loader $kendo-loader-lg-spinner-3-width: null !default; -/// The height of the small spinner-3 Loader. -/// @group loader $kendo-loader-sm-spinner-3-height: null !default; -/// The height of the medium spinner-3 Loader. -/// @group loader $kendo-loader-md-spinner-3-height: null !default; -/// The height of the large spinner-3 Loader. -/// @group loader $kendo-loader-lg-spinner-3-height: null !default; -/// The width of the small spinner-4 Loader. -/// @group loader $kendo-loader-sm-spinner-4-width: null !default; -/// The width of the medium spinner-4 Loader. -/// @group loader $kendo-loader-md-spinner-4-width: null !default; -/// The width of the large spinner-4 Loader. -/// @group loader $kendo-loader-lg-spinner-4-width: null !default; -/// The height of the small spinner-4 Loader. -/// @group loader $kendo-loader-sm-spinner-4-height: null !default; -/// The height of the medium spinner-4 Loader. -/// @group loader $kendo-loader-md-spinner-4-height: null !default; -/// The height of the large spinner-4 Loader. -/// @group loader $kendo-loader-lg-spinner-4-height: null !default; -/// The border width of the container panel. -/// @group loader $kendo-loader-container-panel-border-width: null !default; -/// The border style of the container panel. -/// @group loader $kendo-loader-container-panel-border-style: null !default; -/// The border color of the container panel. -/// @group loader $kendo-loader-container-panel-border-color: null !default; -/// The border radius of the container panel. -/// @group loader $kendo-loader-container-panel-border-radius: null !default; -/// The background color of the container panel. -/// @group loader $kendo-loader-container-panel-bg: null !default; -/// The padding of the small Loader container. -/// @group loader $kendo-loader-sm-container-padding: null !default; -/// The padding of the medium Loader container. -/// @group loader $kendo-loader-md-container-padding: null !default; -/// The padding of the large Loader container. -/// @group loader $kendo-loader-lg-container-padding: null !default; -/// The gap of the small Loader container. -/// @group loader $kendo-loader-sm-container-gap: null !default; -/// The gap of the medium Loader container. -/// @group loader $kendo-loader-md-container-gap: null !default; -/// The gap of the large Loader container. -/// @group loader $kendo-loader-lg-container-gap: null !default; -/// The font size of the small Loader container. -/// @group loader $kendo-loader-sm-container-font-size: null !default; -/// The font size of the medium Loader container. -/// @group loader $kendo-loader-md-container-font-size: null !default; -/// The font size of the large Loader container. -/// @group loader $kendo-loader-lg-container-font-size: null !default; // Loading indicator -/// The background color of the Loading indicator. -/// @group loading $kendo-loading-bg: null !default; -/// The text color of the Loading indicator. -/// @group loading $kendo-loading-text: null !default; -/// The opacity of the Loading indicator. -/// @group loading $kendo-loading-opacity: null !default; -/// The z-index of the Loading indicator. -/// @group loading $kendo-zindex-loading: null !default; diff --git a/packages/core/scss/components/map/_variables.scss b/packages/core/scss/components/map/_variables.scss index 9cc1741714e..d83398de4b9 100644 --- a/packages/core/scss/components/map/_variables.scss +++ b/packages/core/scss/components/map/_variables.scss @@ -1,69 +1,29 @@ // Map -/// The border width of the Map. -/// @group map $kendo-map-border-width: null !default; -/// The font size of the Map. -/// @group map $kendo-map-font-size: null !default; -/// The line height of the Map. -/// @group map $kendo-map-line-height: null !default; -/// The font family of the Map. -/// @group map $kendo-map-font-family: null !default; -/// The background color of the Map. -/// @group map $kendo-map-bg: null !default; -/// The text color of the Map. -/// @group map $kendo-map-text: null !default; -/// The border color of the Map. -/// @group map $kendo-map-border: null !default; -/// The margin of the Map navigator. -/// @group map $kendo-map-navigator-margin: null !default; -/// The padding of the Map navigator. -/// @group map $kendo-map-navigator-padding: null !default; -/// The width of the Map navigator. -/// @group map $kendo-map-navigator-width: null !default; -/// The height of the Map navigator. -/// @group map $kendo-map-navigator-height: null !default; -/// The border width of the Map navigator. -/// @group map $kendo-map-navigator-border-width: null !default; -/// The margin of the Map zoom control. -/// @group map $kendo-map-zoom-control-margin: null !default; -/// The horizontal padding of the Map zoom control. -/// @group map $kendo-map-zoom-control-button-padding-x: null !default; -/// The vertical padding of the Map zoom control. -/// @group map $kendo-map-zoom-control-button-padding-y: null !default; -/// The horizontal padding of the Map attribution. -/// @group map $kendo-map-attribution-padding-x: null !default; -/// The vertical padding of the Map attribution. -/// @group map $kendo-map-attribution-padding-y: null !default; -/// The font size of the Map attribution. -/// @group map $kendo-map-attribution-font-size: null !default; -/// The background color of the Map attribution. -/// @group map $kendo-map-attribution-bg: null !default; -/// The fill color of the Map marker. -/// @group map $kendo-map-marker-fill: null !default; $kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default; diff --git a/packages/core/scss/components/mediaplayer/_variables.scss b/packages/core/scss/components/mediaplayer/_variables.scss index 34cb278f971..d7c736acfca 100644 --- a/packages/core/scss/components/mediaplayer/_variables.scss +++ b/packages/core/scss/components/mediaplayer/_variables.scss @@ -1,43 +1,17 @@ // Media player -/// The border width of the MediaPlayer. -/// @group mediaplayer $kendo-media-player-border-width: null !default; -/// The font family of the MediaPlayer. -/// @group mediaplayer $kendo-media-player-font-family: null !default; -/// The font size of the MediaPlayer. -/// @group mediaplayer $kendo-media-player-font-size: null !default; -/// The line height of the MediaPlayer. -/// @group mediaplayer $kendo-media-player-line-height: null !default; -/// The background color of the MediaPlayer. -/// @group mediaplayer $kendo-media-player-bg: null !default; -/// The text color of the MediaPlayer. -/// @group mediaplayer $kendo-media-player-text: null !default; -/// The border color of the MediaPlayer. -/// @group mediaplayer $kendo-media-player-border: null !default; -/// The horizontal padding of the MediaPlayer title. -/// @group mediaplayer $kendo-media-player-titlebar-padding-x: null !default; -/// The vertical padding of the MediaPlayer title. -/// @group mediaplayer $kendo-media-player-titlebar-padding-y: null !default; -/// The background color of the MediaPlayer title. -/// @group mediaplayer $kendo-media-player-titlebar-bg: null !default; -/// The text color of the MediaPlayer title. -/// @group mediaplayer $kendo-media-player-titlebar-text: null !default; -/// The border color of the MediaPlayer title. -/// @group mediaplayer $kendo-media-player-titlebar-border: null !default; -/// The gradient of the MediaPlayer title. -/// @group mediaplayer $kendo-media-player-titlebar-gradient: null !default; diff --git a/packages/core/scss/components/menu-button/_variables.scss b/packages/core/scss/components/menu-button/_variables.scss index 8d6d7dbc097..f714a02b77a 100644 --- a/packages/core/scss/components/menu-button/_variables.scss +++ b/packages/core/scss/components/menu-button/_variables.scss @@ -1,5 +1,3 @@ // Menu-button -/// The horizontal padding of the button arrow in the Menu Button.. -/// @group menu-button $kendo-menu-button-arrow-padding-x: null !default; diff --git a/packages/core/scss/components/menu/_variables.scss b/packages/core/scss/components/menu/_variables.scss index fba582db08c..7483aeb5df2 100644 --- a/packages/core/scss/components/menu/_variables.scss +++ b/packages/core/scss/components/menu/_variables.scss @@ -1,267 +1,129 @@ // Menu -/// The width of the border around the Menu. -/// @group menu $kendo-menu-border-width: null !default; -/// The font family of the Menu. -/// @group menu $kendo-menu-font-family: null !default; -/// The font size of the Menu. -/// @group menu $kendo-menu-font-size: null !default; -/// The line height of the Menu used along with $kendo-font-size. -/// @group menu $kendo-menu-line-height: null !default; -/// The background color of the Menu. -/// @group menu $kendo-menu-bg: null !default; -/// The text color of the Menu. -/// @group menu $kendo-menu-text: null !default; -/// The border color of the Menu. -/// @group menu $kendo-menu-border: null !default; -/// The background gradient of the Menu. -/// @group menu $kendo-menu-gradient: null !default; // Menu item -/// The horizontal padding of the Menu item. -/// @group menu $kendo-menu-item-padding-x: null !default; -/// The vertical padding of the Menu item. -/// @group menu $kendo-menu-item-padding-y: null !default; -/// The spacing between the Menu items. -/// @group menu $kendo-menu-item-spacing: null !default; -/// The spacing between the Menu item text and icons. -/// @group menu $kendo-menu-item-icon-spacing: null !default; -/// The font weight of the selected Menu item. -/// @group menu $kendo-menu-item-selected-font-weight: null !default; -/// The background color of the Menu item. -/// @group menu $kendo-menu-item-bg: null !default; -/// The text color of the Menu item. -/// @group menu $kendo-menu-item-text: null !default; -/// The border color of the Menu item. -/// @group menu $kendo-menu-item-border: null !default; -/// The background gradient of the Menu item. -/// @group menu $kendo-menu-item-gradient: null !default; -/// The background color of hovered Menu item. -/// @group menu $kendo-menu-item-hover-bg: null !default; -/// The text color of hovered Menu item. -/// @group menu $kendo-menu-item-hover-text: null !default; -/// The border color of hovered Menu item. -/// @group menu $kendo-menu-item-hover-border: null !default; -/// The background gradient of hovered Menu item. -/// @group menu $kendo-menu-item-hover-gradient: null !default; -/// The background color of active Menu item. -/// @group menu $kendo-menu-item-active-bg: null !default; -/// The text color of active Menu item. -/// @group menu $kendo-menu-item-active-text: null !default; -/// The border color of active Menu item. -/// @group menu $kendo-menu-item-active-border: null !default; -/// The background gradient of active Menu item. -/// @group menu $kendo-menu-item-active-gradient: null !default; -/// The base shadow of focused Menu item. -/// @group menu $kendo-menu-item-focus-shadow: null !default; -/// The background color of selected Menu item. -/// @group menu $kendo-menu-item-selected-bg: null !default; -/// The text color of selected Menu item. -/// @group menu $kendo-menu-item-selected-text: null !default; -/// The border color of selected Menu item. -/// @group menu $kendo-menu-item-selected-border: null !default; -/// The background gradient of selected Menu item. -/// @group menu $kendo-menu-item-selected-gradient: null !default; -/// The background color of the Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-bg: null !default; -/// The text color of the Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-text: null !default; -/// The border color of the Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-border: null !default; -/// The background gradient of the Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-gradient: null !default; -/// The background color of hovered Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-hover-bg: null !default; -/// The text color of hovered Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-hover-text: null !default; -/// The border color of hovered Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-hover-border: null !default; -/// The background gradient of hovered Menu scroll buttons. -/// @group menu $kendo-menu-scroll-button-hover-gradient: null !default; // Menu Separator -/// The inline margin of the horizontal Menu separator. -/// @group menu $kendo-menu-separator-margin-inline: null !default; -/// The block margin of the horizontal Menu separator. -/// @group menu $kendo-menu-separator-margin-block: null !default; -/// The border color of the Menu separator. -/// @group menu $kendo-menu-separator-border: null !default; // Menu popup -/// The horizontal padding of the Menu popup. -/// @group menu $kendo-menu-popup-padding-x: null !default; -/// The vertical padding of the Menu popup. -/// @group menu $kendo-menu-popup-padding-y: null !default; -/// The width of the border around the Menu popup. -/// @group menu $kendo-menu-popup-border-width: null !default; -/// The font sizes of the Menu popup. -/// @group menu $kendo-menu-popup-font-size: null !default; $kendo-menu-popup-sm-font-size: null !default; $kendo-menu-popup-md-font-size: null !default; $kendo-menu-popup-lg-font-size: null !default; -/// The line heights used along with $kendo-font-size. -/// @group menu $kendo-menu-popup-line-height: null !default; $kendo-menu-popup-sm-line-height: null !default; $kendo-menu-popup-md-line-height: null !default; $kendo-menu-popup-lg-line-height: null !default; -/// The background color of the Menu popup. -/// @group menu $kendo-menu-popup-bg: null !default; -/// The text color of the Menu popup. -/// @group menu $kendo-menu-popup-text: null !default; -/// The border color of the Menu popup. -/// @group menu $kendo-menu-popup-border: null !default; -/// The background gradient of the Menu popup. -/// @group menu $kendo-menu-popup-gradient: null !default; // Menu popup item -/// The horizontal padding of the Menu item in popup. -/// @group menu $kendo-menu-popup-item-padding-x: null !default; $kendo-menu-popup-sm-item-padding-x: null !default; $kendo-menu-popup-md-item-padding-x: null !default; $kendo-menu-popup-lg-item-padding-x: null !default; -/// The vertical padding of the Menu item in popup. -/// @group menu $kendo-menu-popup-item-padding-y: null !default; $kendo-menu-popup-sm-item-padding-y: null !default; $kendo-menu-popup-md-item-padding-y: null !default; $kendo-menu-popup-lg-item-padding-y: null !default; -/// The end padding of the Menu item in popup. -/// @group menu $kendo-menu-popup-item-padding-end: null !default; $kendo-menu-popup-sm-item-padding-end: null !default; $kendo-menu-popup-md-item-padding-end: null !default; $kendo-menu-popup-lg-item-padding-end: null !default; -/// The start margin of the Menu item expand icon. -/// @group menu $kendo-menu-popup-sm-item-icon-margin-start: null !default; $kendo-menu-popup-md-item-icon-margin-start: null !default; $kendo-menu-popup-lg-item-icon-margin-start: null !default; -/// The end margin of the Menu item expand icon. -/// @group menu $kendo-menu-popup-sm-item-icon-margin-end: null !default; $kendo-menu-popup-md-item-icon-margin-end: null !default; $kendo-menu-popup-lg-item-icon-margin-end: null !default; -/// The spacing between the Menu items in popup. -/// @group menu $kendo-menu-popup-item-spacing: null !default; -/// The background color of the Menu item in popup. -/// @group menu $kendo-menu-popup-item-bg: null !default; -/// The text color of the Menu item in popup. -/// @group menu $kendo-menu-popup-item-text: null !default; -/// The border color of the Menu item in popup. -/// @group menu $kendo-menu-popup-item-border: null !default; -/// The background gradient of the Menu item in popup. -/// @group menu $kendo-menu-popup-item-gradient: null !default; -/// The background color of hovered Menu item in popup. -/// @group menu $kendo-menu-popup-item-hover-bg: null !default; -/// The text color of hovered Menu item in popup. -/// @group menu $kendo-menu-popup-item-hover-text: null !default; -/// The border color of hovered Menu item in popup. -/// @group menu $kendo-menu-popup-item-hover-border: null !default; -/// The background gradient of hovered Menu item in popup. -/// @group menu $kendo-menu-popup-item-hover-gradient: null !default; -/// The background color of active Menu item in popup. -/// @group menu $kendo-menu-popup-item-active-bg: null !default; -/// The text color of active Menu item in popup. -/// @group menu $kendo-menu-popup-item-active-text: null !default; -/// The border color of active Menu item in popup. -/// @group menu $kendo-menu-popup-item-active-border: null !default; -/// The background gradient of active Menu item in popup. -/// @group menu $kendo-menu-popup-item-active-gradient: null !default; -/// The base shadow of focused Menu item in popup. -/// @group menu $kendo-menu-popup-item-focus-shadow: null !default; diff --git a/packages/core/scss/components/no-data/_variables.scss b/packages/core/scss/components/no-data/_variables.scss index 402342d97e7..64bd3782e74 100644 --- a/packages/core/scss/components/no-data/_variables.scss +++ b/packages/core/scss/components/no-data/_variables.scss @@ -1,7 +1,3 @@ -/// The minimum height of the 'No Data' text container. -/// @group no-data $kendo-no-data-min-height: null !default; -/// The color of the 'No Data' text. -/// @group no-data $kendo-no-data-text: null !default; diff --git a/packages/core/scss/components/notification/_variables.scss b/packages/core/scss/components/notification/_variables.scss index b24f52c5585..56d74b8bed4 100644 --- a/packages/core/scss/components/notification/_variables.scss +++ b/packages/core/scss/components/notification/_variables.scss @@ -1,45 +1,19 @@ // Notification -/// The row-gap between the elements in the Notification group. -/// @group notification $kendo-notification-group-gap: null !default; -/// The horizontal padding of the Notification. -/// @group notification $kendo-notification-padding-x: null !default; -/// The vertical padding of the Notification. -/// @group notification $kendo-notification-padding-y: null !default; -/// The width of the border around the Notification. -/// @group notification $kendo-notification-border-width: null !default; -/// The border radius of the Notification. -/// @group notification $kendo-notification-border-radius: k-border-radius(md)!default; -/// The font family of the Notification. -/// @group notification $kendo-notification-font-family: null !default; -/// The font size of the Notification. -/// @group notification $kendo-notification-font-size: null !default; -/// The line height of the Notification. -/// @group notification $kendo-notification-line-height: null !default; -/// The background color of the Notification. -/// @group notification $kendo-notification-bg: null !default; -/// The text color of the Notification. -/// @group notification $kendo-notification-text: null !default; -/// The border color of the Notification. -/// @group notification $kendo-notification-border: null !default; -/// The box shadow of the Notification. -/// @group notification $kendo-notification-shadow: null !default; -/// The horizontal spacing of the Notification icon. -/// @group notification $kendo-notification-icon-spacing: null !default; @function notification-theme( $colors ) { @@ -56,9 +30,5 @@ $kendo-notification-icon-spacing: null !default; @return $_theme; } -/// The theme colors map for the Notification. -/// @group notification $kendo-notification-theme-colors: null !default; -/// The generated theme colors map for the Notification. -/// @group notification $kendo-notification-theme: null !default; diff --git a/packages/core/scss/components/orgchart/_variables.scss b/packages/core/scss/components/orgchart/_variables.scss index 67f1fc021ef..1bac9ec9070 100644 --- a/packages/core/scss/components/orgchart/_variables.scss +++ b/packages/core/scss/components/orgchart/_variables.scss @@ -1,146 +1,58 @@ // Orgchart -/// The spacing index of the OrgChart. -/// @group orgchart $kendo-orgchart-spacer: null !default; -/// The vertical padding of the OrgChart. -/// @group orgchart $kendo-orgchart-padding-y: null !default; -/// The horizontal padding of the OrgChart. -/// @group orgchart $kendo-orgchart-padding-x: null !default; -/// The font family of the OrgChart. -/// @group orgchart $kendo-orgchart-font-family: null !default; -/// The font size of the OrgChart. -/// @group orgchart $kendo-orgchart-font-size: null !default; -/// The line height of the OrgChart. -/// @group orgchart $kendo-orgchart-line-height: null !default; -/// The background color of the OrgChart. -/// @group orgchart $kendo-orgchart-bg: null !default; -/// The text color of the OrgChart. -/// @group orgchart $kendo-orgchart-text: null !default; -/// The border color of the OrgChart. -/// @group orgchart $kendo-orgchart-border: null !default; -/// The spacing of the OrgChart node. -/// @group orgchart $kendo-orgchart-node-gap: null !default; -/// The spacing of the OrgChart group. -/// @group orgchart $kendo-orgchart-group-gap: null !default; -/// The spacing of the OrgChart node container. -/// @group orgchart $kendo-orgchart-node-container-gap: null !default; -/// The vertical padding of the OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-padding-y: null !default; -/// The horizontal padding of the OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-padding-x: null !default; -/// The border width of the OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-border-width: null !default; -/// The border radius of the OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-border-radius: null !default; -/// The background color of the OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-bg: null !default; -/// The text color of the OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-text: null !default; -/// The border color of the OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-border: null !default; -/// The border color of the focused OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-focus-border: null !default; -/// The shadow of the focused OrgChart node group. -/// @group orgchart $kendo-orgchart-node-group-focus-shadow: null !default; -/// The font size of the OrgChart node group title. -/// @group orgchart $kendo-orgchart-node-group-title-font-size: null !default; -/// The bottom margin of the OrgChart node group title. -/// @group orgchart $kendo-orgchart-node-group-title-margin-bottom: null !default; -/// The line height of the OrgChart node group title. -/// @group orgchart $kendo-orgchart-node-group-title-line-height: null !default; -/// The font size of the OrgChart node group subtitle. -/// @group orgchart $kendo-orgchart-node-group-subtitle-font-size: null !default; -/// The bottom margin of the OrgChart node group subtitle. -/// @group orgchart $kendo-orgchart-node-group-subtitle-margin-bottom: null !default; -/// The line height of the OrgChart node group subtitle. -/// @group orgchart $kendo-orgchart-node-group-subtitle-text: null !default; -/// The width of the OrgChart Card. -/// @group orgchart $kendo-orgchart-card-width: null !default; -/// The vertical padding of the OrgChart Card. -/// @group orgchart $kendo-orgchart-card-padding-y: null !default; -/// The horizontal padding of the OrgChart Card. -/// @group orgchart $kendo-orgchart-card-padding-x: null !default; -/// The border width of the OrgChart Card. -/// @group orgchart $kendo-orgchart-card-border-width: null !default; -/// The shadow of the OrgChart Card. -/// @group orgchart $kendo-orgchart-card-shadow: null !default; -/// The shadow of the focused OrgChart Card. -/// @group orgchart $kendo-orgchart-card-focus-shadow: null !default; -/// The bottom margin of the OrgChart Card title. -/// @group orgchart $kendo-orgchart-card-title-margin-bottom: null !default; -/// The font size of the OrgChart Card title. -/// @group orgchart $kendo-orgchart-card-title-font-size: null !default; -/// The bottom margin of the OrgChart Card subtitle. -/// @group orgchart $kendo-orgchart-card-subtitle-margin-bottom: null !default; -/// The font size of the OrgChart Card subtitle. -/// @group orgchart $kendo-orgchart-card-subtitle-font-size: null !default; -/// The border width of the OrgChart Card body. -/// @group orgchart $kendo-orgchart-card-body-border-width: null !default; -/// The border color of the OrgChart Card body. -/// @group orgchart $kendo-orgchart-card-body-border-color: null !default; -/// The right margin of the OrgChart Card body title wrap. -/// @group orgchart $kendo-orgchart-card-body-vbox-margin-right: null !default; -/// The min height of the OrgChart Card body title wrap. -/// @group orgchart $kendo-orgchart-card-body-vbox-min-height: null !default; -/// The size of the OrgChart connecting line. -/// @group orgchart $kendo-orgchart-line-size: null !default; -/// The fill color of the OrgChart connecting line. -/// @group orgchart $kendo-orgchart-line-fill: null !default; -/// The height of the OrgChart connecting line. -/// @group orgchart $kendo-orgchart-line-v-height: null !default; diff --git a/packages/core/scss/components/otp/_variables.scss b/packages/core/scss/components/otp/_variables.scss index 39ec681abfb..36ebfe5fad5 100644 --- a/packages/core/scss/components/otp/_variables.scss +++ b/packages/core/scss/components/otp/_variables.scss @@ -1,42 +1,18 @@ // OTP -/// The gap between the items in the OTP. -/// @group one-time-password $kendo-otp-gap: null !default; -/// The gap between the items in the small OTP. -/// @group one-time-password $kendo-otp-sm-gap: null !default; -/// The gap between the items in the medium OTP. -/// @group one-time-password $kendo-otp-md-gap: null !default; -/// The gap between the items in the large OTP. -/// @group one-time-password $kendo-otp-lg-gap: null !default; -/// The horizontal padding of the OTP separator. -/// @group one-time-password $kendo-otp-separator-padding-x: null !default; -/// The horizontal padding of the small OTP separator. -/// @group one-time-password $kendo-otp-sm-separator-padding-x: null !default; -/// The horizontal padding of the medium OTP separator. -/// @group one-time-password $kendo-otp-md-separator-padding-x: null !default; -/// The horizontal padding of the large OTP separator. -/// @group one-time-password $kendo-otp-lg-separator-padding-x: null !default; -/// The horizontal padding of the OTP separator. -/// @group one-time-password $kendo-otp-input-width: null !default; -/// The horizontal padding of the small OTP separator. -/// @group one-time-password $kendo-otp-sm-input-width: null !default; -/// The horizontal padding of the medium OTP separator. -/// @group one-time-password $kendo-otp-md-input-width: null !default; -/// The horizontal padding of the large OTP separator. -/// @group one-time-password $kendo-otp-lg-input-width: null !default; $kendo-otp-sizes: null !default; diff --git a/packages/core/scss/components/pager/_variables.scss b/packages/core/scss/components/pager/_variables.scss index efe83c80d8d..5274c0f07b1 100644 --- a/packages/core/scss/components/pager/_variables.scss +++ b/packages/core/scss/components/pager/_variables.scss @@ -1,147 +1,57 @@ // Pager -/// The horizontal padding of the Pager. -/// @group pager $kendo-pager-padding-x: null !default; -/// The horizontal padding of the small Pager. -/// @group pager $kendo-pager-sm-padding-x: null !default; -/// The horizontal padding of the medium Pager. -/// @group pager $kendo-pager-md-padding-x: null !default; -/// The horizontal padding of the large Pager. -/// @group pager $kendo-pager-lg-padding-x: null !default; -/// The vertical padding of the Pager. -/// @group pager $kendo-pager-padding-y: null !default; -/// The vertical padding of the small Pager. -/// @group pager $kendo-pager-sm-padding-y: null !default; -/// The vertical padding of the medium Pager. -/// @group pager $kendo-pager-md-padding-y: null !default; -/// The vertical padding of the large Pager. -/// @group pager $kendo-pager-lg-padding-y: null !default; -/// The minimum width of the items in the small Pager. -/// @group pager $kendo-pager-sm-item-min-width: null !default; -/// The minimum width of the items in the medium Pagers. -/// @group pager $kendo-pager-md-item-min-width: null !default; -/// The minimum width of the items in the large Pagers. -/// @group pager $kendo-pager-lg-item-min-width: null !default; -/// The margin between the item groups in the small Pager. -/// @group pager $kendo-pager-sm-item-group-spacing: null !default; -/// The margin between the item groups in the medium Pager. -/// @group pager $kendo-pager-md-item-group-spacing: null !default; -/// The margin between the item groups in the large Pager. -/// @group pager $kendo-pager-lg-item-group-spacing: null !default; -/// The border width of the Pager. -/// @group pager $kendo-pager-border-width: null !default; -/// The font family of the Pager. -/// @group pager $kendo-pager-font-family: null !default; -/// The font size of the Pager. -/// @group pager $kendo-pager-font-size: null !default; -/// The line height of the Pager. -/// @group pager $kendo-pager-line-height: null !default; -/// The background color of the Pager. -/// @group pager $kendo-pager-bg: null !default; -/// The text color of the Pager. -/// @group pager $kendo-pager-text: null !default; -/// The border color of the Pager. -/// @group pager $kendo-pager-border: null !default; -/// The background color of the focused Pager. -/// @group pager $kendo-pager-focus-bg: null !default; -/// The box shadow of the focused Pager. -/// @group pager $kendo-pager-focus-shadow: null !default; -/// The spacing between the sections of the Pager. -/// @group pager $kendo-pager-section-spacing: null !default; -/// The border width of the Pager items. -/// @group pager $kendo-pager-item-border-width: null !default; -/// The border radius of the Pager items. -/// @group pager $kendo-pager-item-border-radius: null !default; -/// The spacing around the Pager items. -/// @group pager $kendo-pager-item-spacing: null !default; -/// The background color of the Pager items. -/// @group pager $kendo-pager-item-bg: null !default; -/// The text color of the Pager items. -/// @group pager $kendo-pager-item-text: null !default; -/// The border color of the Pager items. -/// @group pager $kendo-pager-item-border: null !default; -/// The background color of the hovered Pager items. -/// @group pager $kendo-pager-item-hover-bg: null !default; -/// The text color of the hovered Pager items. -/// @group pager $kendo-pager-item-hover-text: null !default; -/// The border color of the hovered Pager items. -/// @group pager $kendo-pager-item-hover-border: null !default; -/// The background color of the selected Pager items. -/// @group pager $kendo-pager-item-selected-bg: null !default; -/// The text color of the selected Pager items. -/// @group pager $kendo-pager-item-selected-text: null !default; -/// The border color of the selected Pager items. -/// @group pager $kendo-pager-item-selected-border: null !default; -/// The opacity of the focused Pager items. -/// @group pager $kendo-pager-item-focus-opacity: null !default; -/// The background color of the focused Pager items. -/// @group pager $kendo-pager-item-focus-bg: null !default; -/// The box shadow of the focused Pager items. -/// @group pager $kendo-pager-item-focus-shadow: null !default; -/// The border radius of the Pager numbers. -/// @group pager $kendo-pager-number-border-radius: null !default; -/// The width of the Inputs in the Pager. -/// @group pager $kendo-pager-input-width: null !default; -/// The width of the DropDowns in the small Pager. -/// @group pager $kendo-pager-sm-dropdown-width: null !default; -/// The width of the DropDowns in the medium Pager. -/// @group pager $kendo-pager-md-dropdown-width: null !default; -/// The width of the DropDowns in the large Pager. -/// @group pager $kendo-pager-lg-dropdown-width: null !default; -/// The sizes map of the Pager. -/// @group pager $kendo-pager-sizes: null !default; diff --git a/packages/core/scss/components/panel/_variables.scss b/packages/core/scss/components/panel/_variables.scss index bc3a003fc82..d5623150ce9 100644 --- a/packages/core/scss/components/panel/_variables.scss +++ b/packages/core/scss/components/panel/_variables.scss @@ -1,33 +1,13 @@ -/// The border radius of the Panel. -/// @group panel $kendo-panel-border-radius: null !default; -/// The width of the border around the Panel. -/// @group panel $kendo-panel-border-width: null !default; -/// The style of the border around the Panel. -/// @group panel $kendo-panel-border-style: null !default; -/// The inline padding of the Panel header. -/// @group panel $kendo-panel-header-padding-inline: null !default; -/// The block padding of the Panel header. -/// @group panel $kendo-panel-header-padding-block: null !default; -/// The inline padding of the Panel content. -/// @group panel $kendo-panel-content-padding-inline: null !default; -/// The block padding of the Panel content. -/// @group panel $kendo-panel-content-padding-block: null !default; -/// The text color of the Panel. -/// @group panel $kendo-panel-text: null !default; -/// The background color of the Panel. -/// @group panel $kendo-panel-bg: null !default; -/// The color of the border around the Panel. -/// @group panel $kendo-panel-border: null !default; diff --git a/packages/core/scss/components/panelbar/_variables.scss b/packages/core/scss/components/panelbar/_variables.scss index 58683af110e..ee1883b9746 100644 --- a/packages/core/scss/components/panelbar/_variables.scss +++ b/packages/core/scss/components/panelbar/_variables.scss @@ -1,271 +1,105 @@ // Panelbar -/// The horizontal padding of the PanelBar. -/// @group panelbar $kendo-panelbar-padding-x: null !default; -/// The vertical padding of the PanelBar. -/// @group panelbar $kendo-panelbar-padding-y: null !default; -/// The font family of the PanelBar. -/// @group panelbar $kendo-panelbar-font-family: null !default; -/// The font size of the PanelBar. -/// @group panelbar $kendo-panelbar-font-size: null !default; -/// The line height of the PanelBar. -/// @group panelbar $kendo-panelbar-line-height: null !default; -/// The width of the border around the PanelBar. -/// @group panelbar $kendo-panelbar-border-width: null !default; -/// The border style around the the PanelBar. -/// @group panelbar $kendo-panelbar-border-style: null !default; -/// The width of the border around the PanelBar items. -/// @group panelbar $kendo-panelbar-item-border-width: null !default; -/// The style of the border around the PanelBar items. -/// @group panelbar $kendo-panelbar-item-border-style: null !default; -/// The horizontal padding of the PanelBar header. -/// @group panelbar $kendo-panelbar-header-padding-x: null !default; -/// The vertical padding of the PanelBar header. -/// @group panelbar $kendo-panelbar-header-padding-y: null !default; -/// The horizontal padding of the PanelBar items. -/// @group panelbar $kendo-panelbar-item-padding-x: null !default; -/// The vertical padding of the PanelBar items. -/// @group panelbar $kendo-panelbar-item-padding-y: null !default; -/// The maximum nesting of the PanelBar items. -/// @group panelbar $kendo-panelbar-item-level-count: null !default; -/// The background color of the PanelBar. -/// @group panelbar $kendo-panelbar-bg: null !default; -/// The text color of the PanelBar. -/// @group panelbar $kendo-panelbar-text: null !default; -/// The border color of the PanelBar. -/// @group panelbar $kendo-panelbar-border: null !default; -/// The background color of the PanelBar header. -/// @group panelbar $kendo-panelbar-header-bg: null !default; -/// The text color of the PanelBar header. -/// @group panelbar $kendo-panelbar-header-text: null !default; -/// The border color of the PanelBar header. -/// @group panelbar $kendo-panelbar-header-border: null !default; -/// The gradient of the PanelBar header. -/// @group panelbar $kendo-panelbar-header-gradient: null !default; -/// The background color of the hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-bg: null !default; -/// The text color of the hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-text: null !default; -/// The border color of the hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-border: null !default; -/// The gradient of the hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-gradient: null !default; -/// The background color of the focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-focus-bg: null !default; -/// The text color of the focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-focus-text: null !default; -/// The border color of the focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-focus-border: null !default; -/// The gradient of the focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-focus-gradient: null !default; -/// The shadow of the focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-focus-shadow: null !default; -/// The background color of the focused and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-focus-bg: null !default; -/// The text color of the focused and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-focus-text: null !default; -/// The border color of the focused and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-focus-border: null !default; -/// The gradient of the focused and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-hover-focus-gradient: null !default; -/// The background color of the selected PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-bg: null !default; -/// The text color of the selected PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-text: null !default; -/// The border color of the selected PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-border: null !default; -/// The gradient of the selected PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-gradient: null !default; -/// The background color of the selected and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-bg: null !default; -/// The text color of the selected and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-text: null !default; -/// The border color of the selected and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-border: null !default; -/// The gradient of the selected and hovered PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-gradient: null !default; -/// The background color of the selected and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-focus-bg: null !default; -/// The text color of the selected and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-focus-text: null !default; -/// The border color of the selected and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-focus-border: null !default; -/// The gradient of the selected and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-focus-gradient: null !default; -/// The background color of the selected, hovered and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-focus-bg: null !default; -/// The text color of the selected, hovered and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-focus-text: null !default; -/// The border color of the selected, hovered and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-focus-border: null !default; -/// The gradient of the selected, hovered and focused PanelBar header. -/// @group panelbar $kendo-panelbar-header-selected-hover-focus-gradient: null !default; -/// The background color of the hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-bg: null !default; -/// The text color of the hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-text: null !default; -/// The border color of the hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-border: null !default; -/// The gradient of the hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-gradient: null !default; -/// The background color of the focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-focus-bg: null !default; -/// The text color of the focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-focus-text: null !default; -/// The border color of the focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-focus-border: null !default; -/// The gradient of the focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-focus-gradient: null !default; -/// The box shadow of the focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-focus-shadow: null !default; -/// The background color of the focused and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-focus-bg: null !default; -/// The text color of the focused and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-focus-text: null !default; -/// The border color of the focused and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-focus-border: null !default; -/// The gradient of the focused and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-hover-focus-gradient: null !default; -/// The background color of the selected PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-bg: null !default; -/// The text color of the selected PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-text: null !default; -/// The border color of the selected PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-border: null !default; -/// The gradient of the selected PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-gradient: null !default; -/// The background color of the selected and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-bg: null !default; -/// The text color of the selected and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-text: null !default; -/// The border color of the selected and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-border: null !default; -/// The gradient of the selected and hovered PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-gradient: null !default; -/// The background color of the selected and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-focus-bg: null !default; -/// The text color of the selected and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-focus-text: null !default; -/// The border color of the selected and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-focus-border: null !default; -/// The gradient of the selected and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-focus-gradient: null !default; -/// The background color of the selected, hovered and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-focus-bg: null !default; -/// The text color of the selected, hovered and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-focus-text: null !default; -/// The border color of the selected, hovered and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-focus-border: null !default; -/// The gradient of the selected, hovered and focused PanelBar items. -/// @group panelbar $kendo-panelbar-item-selected-hover-focus-gradient: null !default; -/// The background color of the expanded PanelBar header. -/// @group panelbar $kendo-panelbar-header-expanded-bg: null !default; -/// The text color of the expanded PanelBar header. -/// @group panelbar $kendo-panelbar-header-expanded-text: null !default; -/// The border color of the expanded PanelBar header. -/// @group panelbar $kendo-panelbar-header-expanded-border: null !default; -/// The gradient of the expanded PanelBar header. -/// @group panelbar $kendo-panelbar-header-expanded-gradient: null !default; diff --git a/packages/core/scss/components/pdf-viewer/_variables.scss b/packages/core/scss/components/pdf-viewer/_variables.scss index cbe38c76ce6..6211af99877 100644 --- a/packages/core/scss/components/pdf-viewer/_variables.scss +++ b/packages/core/scss/components/pdf-viewer/_variables.scss @@ -1,136 +1,54 @@ // PDFViewer -/// The border width of the PDFViewer. -/// @group pdf-viewer $kendo-pdf-viewer-border-width: null !default; -/// The font family of the PDFViewer. -/// @group pdf-viewer $kendo-pdf-viewer-font-family: null !default; -/// The font size of the PDFViewer. -/// @group pdf-viewer $kendo-pdf-viewer-font-size: null !default; -/// The line height of the PDFViewer. -/// @group pdf-viewer $kendo-pdf-viewer-line-height: null !default; -/// The background color of the PDFViewer. -/// @group pdf-viewer $kendo-pdf-viewer-bg: null !default; -/// The text color of the PDFViewer. -/// @group pdf-viewer $kendo-pdf-viewer-text: null !default; -/// The border color of the PDFViewer. -/// @group pdf-viewer $kendo-pdf-viewer-border: null !default; -/// The background color of the PDFViewer Toolbar. -/// @group pdf-viewer $kendo-pdf-viewer-toolbar-bg: null !default; -/// The text color of the PDFViewer Toolbar. -/// @group pdf-viewer $kendo-pdf-viewer-toolbar-text: null !default; -/// The border color of the PDFViewer Toolbar. -/// @group pdf-viewer $kendo-pdf-viewer-toolbar-border: null !default; -/// The gradient of the PDFViewer Toolbar. -/// @group pdf-viewer $kendo-pdf-viewer-toolbar-gradient: null !default; -/// The background color of the PDFViewer canvas. -/// @group pdf-viewer $kendo-pdf-viewer-canvas-bg: null !default; -/// The text color of the PDFViewer canvas. -/// @group pdf-viewer $kendo-pdf-viewer-canvas-text: null !default; -/// The border color of the PDFViewer canvas. -/// @group pdf-viewer $kendo-pdf-viewer-canvas-border: null !default; -/// The spacing of the PDFViewer page. -/// @group pdf-viewer $kendo-pdf-viewer-page-spacing: null !default; -/// The background color of the PDFViewer page. -/// @group pdf-viewer $kendo-pdf-viewer-page-bg: null !default; -/// The text color of the PDFViewer page. -/// @group pdf-viewer $kendo-pdf-viewer-page-text: null !default; -/// The border color of the PDFViewer page. -/// @group pdf-viewer $kendo-pdf-viewer-page-border: null !default; -/// The shadow of the PDFViewer page. -/// @group pdf-viewer $kendo-pdf-viewer-page-shadow: null !default; -/// The horizontal padding of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-padding-x: null !default; -/// The vertical padding of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-padding-y: null !default; -/// The spacing of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-spacing: null !default; -/// The border width of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-border-width: null !default; -/// The border radius of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-border-radius: null !default; -/// The background color of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-bg: null !default; -/// The text color of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-text: null !default; -/// The border color of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-border: null !default; -/// The shadow of the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-shadow: null !default; -/// The spacing of the matches container in the PDFViewer search panel. -/// @group pdf-viewer $kendo-pdf-viewer-search-panel-matches-spacing: null !default; -/// The line height of the PDFViewer selection. -/// @group pdf-viewer $kendo-pdf-viewer-selection-line-height: null !default; -/// The background color of the PDFViewer highlight. -/// @group pdf-viewer $kendo-pdf-viewer-search-highlight-bg: null !default; -/// The background color of the PDFViewer highlight mark. -/// @group pdf-viewer $kendo-pdf-viewer-search-highlight-mark-bg: null !default; -/// The text color of the PDFViewer icon. -/// @group pdf-viewer $kendo-pdf-viewer-icon-text: null !default; -/// The vertical padding of the PDFViewer popup. -/// @group pdf-viewer $kendo-pdf-viewer-popup-padding-x: null !default; -/// The horizontal padding of the PDFViewer popup. -/// @group pdf-viewer $kendo-pdf-viewer-popup-padding-y: null !default; -/// The border color of the PDFViewer selected highlight annotation. -/// @group pdf-viewer $kendo-pdf-viewer-highlight-annotation-border: null !default; -/// The background color of the PDFViewer hover highlight annotation. -/// @group pdf-viewer $kendo-pdf-viewer-highlight-annotation-hover-border: null !default; -/// The border color of the PDFViewer selected free text annotation. -/// @group pdf-viewer $kendo-pdf-viewer-free-text-annotation-border: null !default; -/// The placeholder text color of the PDFViewer free text annotation. -/// @group pdf-viewer $kendo-pdf-viewer-free-text-annotation-placeholder-text: null !default; -/// The text color of the PDFViewer free text annotation. -/// @group pdf-viewer $kendo-pdf-viewer-free-text-annotation-text: null !default; -/// The text color of the PDFViewer free text annotation. -/// @group pdf-viewer $kendo-pdf-viewer-free-text-annotation-text: null !default; diff --git a/packages/core/scss/components/pivotgrid/_variables.scss b/packages/core/scss/components/pivotgrid/_variables.scss index 38a609fd943..c8b2bdd295b 100644 --- a/packages/core/scss/components/pivotgrid/_variables.scss +++ b/packages/core/scss/components/pivotgrid/_variables.scss @@ -1,243 +1,101 @@ // Pivot grid -/// The spacer of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-spacer: null !default; -/// The horizontal padding of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-padding-x: null !default; -/// The vertical of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-padding-y: null !default; -/// The font family of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-font-family: null !default; -/// The font size of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-font-size: null !default; -/// The line height of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-line-height: null !default; -/// The border width of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-border-width: null !default; -/// The icon spacing of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-icon-spacing: null !default; -/// The default width of the PivotGrid row header. -/// @group pivotgrid $kendo-pivotgrid-row-header-width: null !default; -/// The default height of the PivotGrid column header. -/// @group pivotgrid $kendo-pivotgrid-column-header-height: null !default; -/// The horizontal padding of the PivotGrid cell. -/// @group pivotgrid $kendo-pivotgrid-cell-padding-x: null !default; -/// The vertical padding of the PivotGrid cell. -/// @group pivotgrid $kendo-pivotgrid-cell-padding-y: null !default; -/// The border width of the PivotGrid cell. -/// @group pivotgrid $kendo-pivotgrid-cell-border-width: null !default; -/// The background color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-bg: null !default; -/// The text color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-text: null !default; -/// The border color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-border: null !default; -/// The alt border color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-alt-border: null !default; -/// The background color of the PivotGrid header. -/// @group pivotgrid $kendo-pivotgrid-headers-bg: null !default; -/// The text color of the PivotGrid header. -/// @group pivotgrid $kendo-pivotgrid-headers-text: null !default; -/// The border color of the PivotGrid header. -/// @group pivotgrid $kendo-pivotgrid-headers-border: null !default; -/// The background color of the PivotGrid total cells. -/// @group pivotgrid $kendo-pivotgrid-total-bg: null !default; -/// The text color of the PivotGrid total cells. -/// @group pivotgrid $kendo-pivotgrid-total-text: null !default; -/// The border color of the PivotGrid total cells. -/// @group pivotgrid $kendo-pivotgrid-total-border: null !default; -/// The hover background color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-hover-bg: null !default; -/// The hover text color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-hover-text: null !default; -/// The hover border color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-hover-border: null !default; -/// The selected background color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-selected-bg: null !default; -/// The selected text color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-selected-text: null !default; -/// The selected border color of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-selected-border: null !default; -/// The focus shadow of the PivotGrid. -/// @group pivotgrid $kendo-pivotgrid-focus-shadow: null !default; // Pivotgrid Configurator -/// The horizontal padding of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-padding-x: null !default; -/// The vertical padding of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-padding-y: null !default; -/// The border width of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-border-width: null !default; -/// The horizontal padding of the PivotGrid configurator header. -/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-x: null !default; -/// The vertical padding of the PivotGrid configurator header. -/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-y: null !default; -/// The font size of the PivotGrid configurator header. -/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-size: null !default; -/// The font weight of the PivotGrid configurator header. -/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-weight: null !default; -/// The horizontal padding of the PivotGrid configurator content. -/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-x: null !default; -/// The vertical padding of the PivotGrid configurator content. -/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-y: null !default; -/// The horizontal margin of the PivotGrid configurator fields. -/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-x: null !default; -/// The vertical margin of the PivotGrid configurator fields. -/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-y: null !default; -/// The default width of the PivotGrid vertical configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-vertical-width: null !default; -/// The default height of the PivotGrid horizontal configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-horizontal-height: null !default; -/// The background color of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-bg: null !default; -/// The text color of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-text: null !default; -/// The border color of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-border: null !default; -/// The background color of the PivotGrid configurator header. -/// @group pivotgrid $kendo-pivotgrid-configurator-header-bg: null !default; -/// The text color of the PivotGrid configurator header. -/// @group pivotgrid $kendo-pivotgrid-configurator-header-text: null !default; -/// The border color of the PivotGrid configurator header. -/// @group pivotgrid $kendo-pivotgrid-configurator-header-border: null !default; -/// The shadow of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-shadow: null !default; -/// The end shadow of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-end-shadow: null !default; // -3px 0px 6px rgba(0, 0, 0, .16) -/// The start shadow of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-start-shadow: null !default; // 3px 0px 6px rgba(0, 0, 0, .16) -/// The top shadow of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-top-shadow: null !default; // 0px -3px 6px rgba(0, 0, 0, .16) -/// The bottom shadow of the PivotGrid configurator. -/// @group pivotgrid $kendo-pivotgrid-configurator-bottom-shadow: null !default; // 0px 3px 6px rgba(0, 0, 0, .16) -/// The horizontal padding of the PivotGrid configurator button. -/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-x: null !default; -/// The vertical padding of the PivotGrid configurator button. -/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-y: null !default; -/// The border width of the PivotGrid configurator button. -/// @group pivotgrid $kendo-pivotgrid-configurator-button-border-width: null !default; -/// The size of the PivotGrid configurator button. -/// @group pivotgrid $kendo-pivotgrid-configurator-button-size: null !default; // Calculated fields -/// The horizontal padding of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-x: null !default; -/// The vertical padding of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-y: null !default; -/// The border width of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-width: null !default; -/// The border radius of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-radius: null !default; -/// The spacing of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-gap: null !default; -/// The background color of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-bg: null !default; -/// The text color of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-text: null !default; -/// The border color of the PivotGrid calculated field. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-border: null !default; -/// The background color of the PivotGrid calculated field header. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-bg: null !default; -/// The text color of the PivotGrid calculated field header. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-text: null !default; -/// The border color of the PivotGrid calculated field header. -/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-border: null !default; -/// The horizontal padding of the PivotGrid treeview. -/// @group pivotgrid $kendo-pivotgrid-treeview-padding-x: null !default; -/// The vertical padding of the PivotGrid treeview. -/// @group pivotgrid $kendo-pivotgrid-treeview-padding-y: null !default; // Legacy variables diff --git a/packages/core/scss/components/popover/_variables.scss b/packages/core/scss/components/popover/_variables.scss index fe4458be965..bd303fded99 100644 --- a/packages/core/scss/components/popover/_variables.scss +++ b/packages/core/scss/components/popover/_variables.scss @@ -1,85 +1,33 @@ // Popover -/// The width of the border around the Popover. -/// @group popover $kendo-popover-border-width: null !default; -/// The style of the border around the Popover. -/// @group popover $kendo-popover-border-style: null !default; -/// The radius of the border around the Popover. -/// @group popover $kendo-popover-border-radius: null !default; -/// The font family of the Popover. -/// @group popover $kendo-popover-font-family: null !default; -/// The font size of the Popover. -/// @group popover $kendo-popover-font-size: null !default; -/// The line height of the Popover. -/// @group popover $kendo-popover-line-height: null !default; -/// The text color of the Popover. -/// @group popover $kendo-popover-text: null !default; -/// The background color of the Popover. -/// @group popover $kendo-popover-bg: null !default; -/// The border color of the Popover. -/// @group popover $kendo-popover-border: null !default; -/// The box shadow of the Popover. -/// @group popover $kendo-popover-shadow: null !default; -/// The horizontal padding of the Popover header. -/// @group popover $kendo-popover-header-padding-x: null !default; -/// The vertical padding of the Popover header. -/// @group popover $kendo-popover-header-padding-y: null !default; -/// The border width of the Popover header. -/// @group popover $kendo-popover-header-border-width: null !default; -/// The border style of the Popover header. -/// @group popover $kendo-popover-header-border-style: null !default; -/// The text color of the Popover header. -/// @group popover $kendo-popover-header-text: null !default; -/// The background color of the Popover header. -/// @group popover $kendo-popover-header-bg: null !default; -/// The border color of the Popover header. -/// @group popover $kendo-popover-header-border: null !default; -/// The horizontal padding of the Popover body. -/// @group popover $kendo-popover-body-padding-x: null !default; -/// The vertical padding of the Popover body. -/// @group popover $kendo-popover-body-padding-y: null !default; -/// The border width of the Popover actions. -/// @group popover $kendo-popover-actions-border-width: null !default; -/// The width of the Popover callout. -/// @group popover $kendo-popover-callout-width: null !default; -/// The height of the Popover callout. -/// @group popover $kendo-popover-callout-height: null !default; -/// The border width of the Popover callout. -/// @group popover $kendo-popover-callout-border-width: null !default; -/// The border style of the Popover callout. -/// @group popover $kendo-popover-callout-border-style: null !default; -/// The background color of the Popover callout. -/// @group popover $kendo-popover-callout-bg: null !default; -/// The border color of the Popover callout. -/// @group popover $kendo-popover-callout-border: null !default; diff --git a/packages/core/scss/components/popup/_variables.scss b/packages/core/scss/components/popup/_variables.scss index 1da4cb08693..c3efa56d47d 100644 --- a/packages/core/scss/components/popup/_variables.scss +++ b/packages/core/scss/components/popup/_variables.scss @@ -1,39 +1,15 @@ -/// Horizontal padding of the popup. -/// @group popup $kendo-popup-padding-x: null !default; -/// Vertical padding of the popup. -/// @group popup $kendo-popup-padding-y: null !default; -/// Width of the border around the popup. -/// @group popup $kendo-popup-border-width: null !default; -/// Border radius of the popup. -/// @group popup $kendo-popup-border-radius: null !default; -/// Font size of the popup. -/// @group popup $kendo-popup-font-size: null !default; -/// Line height of the popup. -/// @group popup $kendo-popup-line-height: null !default; -/// Horizontal padding of the popup content. -/// @group popup $kendo-popup-content-padding-x: null !default; -/// Vertical padding of the popup content. -/// @group popup $kendo-popup-content-padding-y: null !default; -/// Background color of the popup. -/// @group popup $kendo-popup-bg: null !default; -/// Text color of the popup. -/// @group popup $kendo-popup-text: null !default; -/// Border color of the popup. -/// @group popup $kendo-popup-border: null !default; -/// Box shadow of the popup. -/// @group popup $kendo-popup-shadow: null !default; diff --git a/packages/core/scss/components/progressbar/_variables.scss b/packages/core/scss/components/progressbar/_variables.scss index dc327065863..22fd9cf17bb 100644 --- a/packages/core/scss/components/progressbar/_variables.scss +++ b/packages/core/scss/components/progressbar/_variables.scss @@ -1,74 +1,30 @@ // ProgressBar -/// The height of the ProgressBar. -/// @group progressbar $kendo-progressbar-height: null !default; -/// The horizontal width of the ProgressBar. -/// @group progressbar $kendo-progressbar-horizontal-width: null !default; -/// The animation timing of the ProgressBar. -/// @group progressbar $kendo-progressbar-animation-timing: null !default; -/// The width of the border around the ProgressBar. -/// @group progressbar $kendo-progressbar-border-width: null !default; -/// The font family of the ProgressBar. -/// @group progressbar $kendo-progressbar-font-family: null !default; -/// The font size of the ProgressBar. -/// @group progressbar $kendo-progressbar-font-size: null !default; -/// The line height of the ProgressBar. -/// @group progressbar $kendo-progressbar-line-height: null !default; -/// The background color of the ProgressBar. -/// @group progressbar $kendo-progressbar-bg: null !default; -/// The text color of the ProgressBar. -/// @group progressbar $kendo-progressbar-text: null !default; -/// The border color of the ProgressBar. -/// @group progressbar $kendo-progressbar-border: null !default; -/// The background gradient of the ProgressBar. -/// @group progressbar $kendo-progressbar-gradient: null !default; -/// The progress background color of the ProgressBar. -/// @group progressbar $kendo-progressbar-value-bg: null !default; -/// The progress text color of the ProgressBar. -/// @group progressbar $kendo-progressbar-value-text: null !default; -/// The progress border color of the ProgressBar. -/// @group progressbar $kendo-progressbar-value-border: null !default; -/// The progress background gradient of the ProgressBar. -/// @group progressbar $kendo-progressbar-value-gradient: null !default; -/// The background color of the indeterminate ProgressBar. -/// @group progressbar $kendo-progressbar-indeterminate-bg: null !default; -/// The text color of the indeterminate ProgressBar. -/// @group progressbar $kendo-progressbar-indeterminate-text: null !default; -/// The border color of the indeterminate ProgressBar. -/// @group progressbar $kendo-progressbar-indeterminate-border: null !default; -/// The background gradient of the indeterminate ProgressBar. -/// @group progressbar $kendo-progressbar-indeterminate-gradient: null !default; -/// The border color of the chunk ProgressBar. -/// @group progressbar $kendo-progressbar-chunk-border: null !default; // Circular Progressbar -/// The arc stroke color of the circular ProgressBar. -/// @group progressbar $kendo-circular-progressbar-arc-stroke: null !default; -/// The scale stroke background color of the circular ProgressBar. -/// @group progressbar $kendo-circular-progressbar-scale-stroke: null !default; diff --git a/packages/core/scss/components/prompt/_variables.scss b/packages/core/scss/components/prompt/_variables.scss index 963728861de..b598596cc9e 100644 --- a/packages/core/scss/components/prompt/_variables.scss +++ b/packages/core/scss/components/prompt/_variables.scss @@ -1,66 +1,26 @@ // AIPrompt -/// The text color of the AIPrompt. -/// @group prompt $kendo-prompt-text: null !default; -/// The background color of the AIPrompt. -/// @group prompt $kendo-prompt-bg: null !default; -/// The border color of the AIPrompt. -/// @group prompt $kendo-prompt-border: null !default; -/// The text color of the AIPrompt header. -/// @group prompt $kendo-prompt-header-text: null !default; -/// The background color of the AIPrompt header. -/// @group prompt $kendo-prompt-header-bg: null !default; -/// The border color of the AIPrompt header. -/// @group prompt $kendo-prompt-header-border: null !default; -/// The vertical padding of the AIPrompt content. -/// @group prompt $kendo-prompt-content-padding-y: null !default; -/// The horizontal padding of the AIPrompt content. -/// @group prompt $kendo-prompt-content-padding-x: null !default; -/// The spacing between the items of the AIPrompt content. -/// @group prompt $kendo-prompt-content-spacing: null !default; -/// The text color of the AIPrompt content. -/// @group prompt $kendo-prompt-content-text: null !default; -/// The background color of the AIPrompt content. -/// @group prompt $kendo-prompt-content-bg: null !default; -/// The text border of the AIPrompt content. -/// @group prompt $kendo-prompt-content-border: null !default; -/// The spacing between the items of the AIPrompt content expander. -/// @group prompt $kendo-prompt-expander-spacing: null !default; -/// The vertical padding of the AIPrompt suggestion container. -/// @group prompt $kendo-prompt-suggestion-padding-y: null !default; -/// The horizontal padding of the AIPrompt suggestion container. -/// @group prompt $kendo-prompt-suggestion-padding-x: null !default; -/// The border radius of the AIPrompt suggestion container. -/// @group prompt $kendo-prompt-suggestion-border-radius: null !default; -/// The text color of the AIPrompt suggestion container. -/// @group prompt $kendo-prompt-suggestion-text: null !default; -/// The background color of the AIPrompt suggestion container. -/// @group prompt $kendo-prompt-suggestion-bg: null !default; -/// The border color of the AIPrompt suggestion container. -/// @group prompt $kendo-prompt-suggestion-border: null !default; -/// The elevation of the AIPrompt suggestion container. -/// @group prompt $kendo-prompt-suggestion-shadow: null !default; diff --git a/packages/core/scss/components/radio/_variables.scss b/packages/core/scss/components/radio/_variables.scss index fca8b4176a6..a3dcef5a7a8 100644 --- a/packages/core/scss/components/radio/_variables.scss +++ b/packages/core/scss/components/radio/_variables.scss @@ -1,167 +1,77 @@ // Radio button -/// The border radius of the RadioButton. -/// @group radio $kendo-radio-radius: null !default; -/// The border width of the RadioButton. -/// @group radio $kendo-radio-border-width: null !default; -/// The size of a small RadioButton. -/// @group radio $kendo-radio-sm-size: null !default; -/// The size of a medium RadioButton. -/// @group radio $kendo-radio-md-size: null !default; -/// The size of a large RadioButton. -/// @group radio $kendo-radio-lg-size: null !default; -/// The glyph size of a small RadioButton. -/// @group radio $kendo-radio-sm-glyph-size: null !default; -/// The glyph size of a medium RadioButton. -/// @group radio $kendo-radio-md-glyph-size: null !default; -/// The glyph size of a large RadioButton. -/// @group radio $kendo-radio-lg-glyph-size: null !default; -/// The ripple size of a small RadioButton. -/// @group radio $kendo-radio-sm-ripple-size: null !default; -/// The ripple size of a medium RadioButton. -/// @group radio $kendo-radio-md-ripple-size: null !default; -/// The ripple size of a large RadioButton. -/// @group radio $kendo-radio-lg-ripple-size: null !default; -/// The map with the different RadioButton sizes. -/// @group radio $kendo-radio-sizes: null !default; -/// The background color of the RadioButton. -/// @group radio $kendo-radio-bg: null !default; -/// The color of the RadioButton. -/// @group radio $kendo-radio-text: null !default; -/// The border color of the RadioButton. -/// @group radio $kendo-radio-border: null !default; -/// The background color of the hovered RadioButton. -/// @group radio $kendo-radio-hover-bg: null !default; -/// The color of the hovered RadioButton. -/// @group radio $kendo-radio-hover-text: null !default; -/// The border color of the hovered RadioButton. -/// @group radio $kendo-radio-hover-border: null !default; -/// The background color of the checked RadioButton. -/// @group radio $kendo-radio-checked-bg: null !default; -/// The color of the checked RadioButton. -/// @group radio $kendo-radio-checked-text: null !default; -/// The border color of the checked RadioButton. -/// @group radio $kendo-radio-checked-border: null !default; -/// The border color of the focused RadioButton. -/// @group radio $kendo-radio-focus-border: null !default; -/// The box shadow of the focused RadioButton. -/// @group radio $kendo-radio-focus-shadow: null !default; -/// The border color of the focused and checked RadioButton. -/// @group radio $kendo-radio-focus-checked-border: null !default; -/// The box shadow of the focused and checked RadioButton. -/// @group radio $kendo-radio-focus-checked-shadow: null !default; -/// The background color of the disabled RadioButton. -/// @group radio $kendo-radio-disabled-bg: null !default; -/// The color of the disabled RadioButton. -/// @group radio $kendo-radio-disabled-text: null !default; -/// The border color of the disabled RadioButton. -/// @group radio $kendo-radio-disabled-border: null !default; -/// The background color of the disabled and checked RadioButton. -/// @group radio $kendo-radio-disabled-checked-bg: null !default; -/// The color of the disabled and checked RadioButton. -/// @group radio $kendo-radio-disabled-checked-text: null !default; -/// The border color of disabled and checked RadioButton. -/// @group radio $kendo-radio-disabled-checked-border: null !default; -/// The background color of the invalid RadioButton. -/// @group radio $kendo-radio-invalid-bg: null !default; -/// The color of the invalid RadioButton. -/// @group radio $kendo-radio-invalid-text: null !default; -/// The border color of the invalid RadioButton. -/// @group radio $kendo-radio-invalid-border: null !default; // Radio indicator -/// The type of the RadioButton indicator. -/// @group radio $kendo-radio-indicator-type: null !default; -/// The font family of the RadioButton indicator glyph. -/// @group radio $kendo-radio-glyph-font-family: null !default; -/// The glyph of the RadioButton indicator. -/// @group radio $kendo-radio-checked-glyph: null !default; -/// The image of the checked RadioButton indicator. -/// @group radio $kendo-radio-checked-image: null !default; -/// The image of the disabled and checked RadioButton indicator. -/// @group radio $kendo-radio-disabled-checked-image: null !default; // Radio label -/// The horizontal margin of the RadioButton inside of a label. -/// @group radio $kendo-radio-label-margin-x: null !default; // Radio list -/// The horizontal list item margin of the RadioButton. -/// @group radio $kendo-radio-list-spacing: null !default; -/// The horizontal list item padding of the RadioButton. -/// @group radio $kendo-radio-list-item-padding-x: null !default; -/// The vertical list item padding of the RadioButton. -/// @group radio $kendo-radio-list-item-padding-y: null !default; // Radio ripple -/// The background color of the RadioButton ripple. -/// @group radio $kendo-radio-ripple-bg: null !default; -/// The opacity of the RadioButton ripple. -/// @group radio $kendo-radio-ripple-opacity: null !default; diff --git a/packages/core/scss/components/rating/_variables.scss b/packages/core/scss/components/rating/_variables.scss index fd4185b4ba2..0f3c901c525 100644 --- a/packages/core/scss/components/rating/_variables.scss +++ b/packages/core/scss/components/rating/_variables.scss @@ -1,56 +1,24 @@ // Rating -/// The font family of the Rating. -/// @group rating $kendo-rating-font-family: null !default; -/// The font size of the Rating. -/// @group rating $kendo-rating-font-size: null !default; -/// The line height of the Rating. -/// @group rating $kendo-rating-line-height: null !default; -/// The horizontal margin of the Rating container. -/// @group rating $kendo-rating-container-margin-x: null !default; -/// The horizontal padding of the Rating item. -/// @group rating $kendo-rating-item-padding-x: null !default; -/// The vertical padding of the Rating item. -/// @group rating $kendo-rating-item-padding-y: null !default; -/// The horizontal margin of the Rating label. -/// @group rating $kendo-rating-label-margin-x: null !default; -/// The vertical margin of the Rating label. -/// @group rating $kendo-rating-label-margin-y: null !default; -/// The line height of the Rating label. -/// @group rating $kendo-rating-label-line-height: null !default; -/// The size of the Rating icon. -/// @group rating $kendo-rating-icon-size: null !default; -/// The text color of the Rating icon. -/// @group rating $kendo-rating-icon-text: null !default; -/// The text color of the selected Rating icon. -/// @group rating $kendo-rating-icon-selected-text: null !default; -/// The text color of the hovered Rating icon. -/// @group rating $kendo-rating-icon-hover-text: null !default; -/// The text color of the focused Rating icon. -/// @group rating $kendo-rating-icon-focus-text: null !default; -/// The shadow of the focused Rating icon. -/// @group rating $kendo-rating-icon-focus-shadow: null !default; -/// The shadow of the focused and selected Rating icon. -/// @group rating $kendo-rating-icon-focus-selected-shadow: null !default; diff --git a/packages/core/scss/components/scheduler/_variables.scss b/packages/core/scss/components/scheduler/_variables.scss index 2851aa8ce4f..615b86ff3e3 100644 --- a/packages/core/scss/components/scheduler/_variables.scss +++ b/packages/core/scss/components/scheduler/_variables.scss @@ -1,264 +1,106 @@ // Scheduler -/// The width of the border around the Scheduler. -/// @group scheduler $kendo-scheduler-border-width: null !default; -/// The font family of the Scheduler. -/// @group scheduler $kendo-scheduler-font-family: null !default; -/// The font size of the Scheduler. -/// @group scheduler $kendo-scheduler-font-size: null !default; -/// The line height of the Scheduler. -/// @group scheduler $kendo-scheduler-line-height: null !default; -/// The background color of the Scheduler. -/// @group scheduler $kendo-scheduler-bg: null !default; -/// The text color of the Scheduler. -/// @group scheduler $kendo-scheduler-text: null !default; -/// The border color of the Scheduler. -/// @group scheduler $kendo-scheduler-border: null !default; -/// The background color of the Scheduler ToolBar. -/// @group scheduler $kendo-scheduler-toolbar-bg: null !default; -/// The text color of the Scheduler ToolBar. -/// @group scheduler $kendo-scheduler-toolbar-text: null !default; -/// The border color of the Scheduler ToolBar. -/// @group scheduler $kendo-scheduler-toolbar-border: null !default; -/// The gradient of the Scheduler ToolBar. -/// @group scheduler $kendo-scheduler-toolbar-gradient: null !default; -/// The background color of the Scheduler footer. -/// @group scheduler $kendo-scheduler-footer-bg: null !default; -/// The text color of the Scheduler footer. -/// @group scheduler $kendo-scheduler-footer-text: null !default; -/// The border color of the Scheduler footer. -/// @group scheduler $kendo-scheduler-footer-border: null !default; -/// The gradient of the Scheduler footer. -/// @group scheduler $kendo-scheduler-footer-gradient: null !default; -/// The minimum height of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-min-height: null !default; -/// The border radius of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-border-radius: null !default; -/// The line height of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-line-height: null !default; -/// The background color of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-bg: null !default; -/// The text color of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-text: null !default; -/// The border color of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-border: null !default; -/// The gradient of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-gradient: null !default; -/// The shadow of the Scheduler event. -/// @group scheduler $kendo-scheduler-event-shadow: null !default; -/// The background color of the hovered Scheduler event. -/// @group scheduler $kendo-scheduler-event-hover-bg: null !default; -/// The text color of the hovered Scheduler event. -/// @group scheduler $kendo-scheduler-event-hover-text: null !default; -/// The border color of the hovered Scheduler event. -/// @group scheduler $kendo-scheduler-event-hover-border: null !default; -/// The gradient of the hovered Scheduler event. -/// @group scheduler $kendo-scheduler-event-hover-gradient: null !default; -/// The shadow of the hovered Scheduler event. -/// @group scheduler $kendo-scheduler-event-hover-shadow: null !default; -/// The background color of the selected Scheduler event. -/// @group scheduler $kendo-scheduler-event-selected-bg: null !default; -/// The text color of the selected Scheduler event. -/// @group scheduler $kendo-scheduler-event-selected-text: null !default; -/// The border color of the selected Scheduler event. -/// @group scheduler $kendo-scheduler-event-selected-border: null !default; -/// The gradient of the selected Scheduler event. -/// @group scheduler $kendo-scheduler-event-selected-gradient: null !default; -/// The shadow of the selected Scheduler event. -/// @group scheduler $kendo-scheduler-event-selected-shadow: null !default; -/// The shadow of the ongoing Scheduler event. -/// @group scheduler $kendo-scheduler-event-ongoing-shadow: null !default; -/// The horizontal padding of the Scheduler cell. -/// @group scheduler $kendo-scheduler-cell-padding-x: null !default; -/// The vertical padding of the Scheduler cell. -/// @group scheduler $kendo-scheduler-cell-padding-y: null !default; -/// The height of the Scheduler cell. -/// @group scheduler $kendo-scheduler-cell-height: null !default; -/// The width of the Scheduler date column. -/// @group scheduler $kendo-scheduler-datecolumn-width: null !default; -/// The width of the Scheduler time column. -/// @group scheduler $kendo-scheduler-timecolumn-width: null !default; -/// The background color of the non-working hours in the Scheduler. -/// @group scheduler $kendo-scheduler-nonwork-bg: null !default; -/// The text color of the non-working hours in the Scheduler. -/// @group scheduler $kendo-scheduler-nonwork-text: null !default; -/// The background color of the weekends in the Scheduler. -/// @group scheduler $kendo-scheduler-weekend-bg: null !default; -/// The text color of the weekends in the Scheduler. -/// @group scheduler $kendo-scheduler-weekend-text: null !default; -/// The background color of the preceding/subsequent month cells in the Calendar. -/// @group scheduler $kendo-scheduler-othermonth-bg: null !default; -/// The text color of the preceding/subsequent month cells in the Calendar. -/// @group scheduler $kendo-scheduler-othermonth-text: null !default; -/// The horizontal padding of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-padding-x: null !default; -/// The vertical padding of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-padding-y: null !default; -/// The spacing between the calendars of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-calendar-gap: null !default; -/// The days with events indicator size of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-indicator-size: null !default; -/// The top position of the days with events indicator of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-indicator-calc-offset-top: null !default; -/// The left position of the days with events indicator of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-indicator-calc-offset-left: null !default; -/// The border radius of the days with events indicator of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-indicator-border-radius: null !default; -/// The background color of the days with events indicator of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-indicator-bg: null !default; -/// The background color of the selected days with events indicator of the year view in the Scheduler. -/// @group scheduler $kendo-scheduler-yearview-indicator-selected-bg: null !default; -/// The horizontal padding of the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-padding-x: null !default; -/// The vertical padding of the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-padding-y: null !default; -/// The width of the border of the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-border-width: null !default; -/// The background color of the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-bg: null !default; -/// The text color of the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-text: null !default; -/// The border color of the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-border: null !default; -/// The shadow of the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-shadow: null !default; -/// The vertical margin of the Scheduler Tooltip title. -/// @group scheduler $kendo-scheduler-tooltip-title-margin-y: null !default; -/// The font size of the month inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-month-font-size: null !default; -/// The font size of the day inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-day-font-size: null !default; -/// The max height of the events inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-events-max-height: null !default; -/// The spacing between the events inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-events-gap: null !default; -/// The horizontal padding of the events inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-event-padding-x: null !default; -/// The vertical padding of the events inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-event-padding-y: null !default; -/// The border radius of the events inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-event-border-radius: null !default; -/// The spacing between the events items inside the Scheduler Tooltip. -/// @group scheduler $kendo-scheduler-tooltip-event-gap: null !default; -/// The color of the Scheduler Tooltip callout. -/// @group scheduler $kendo-scheduler-tooltip-callout-text: null !default; -/// The padding of the Scheduler appointments. -/// @group scheduler $kendo-scheduler-appointments-padding: null !default; -/// The horizontal padding of the Scheduler event template. -/// @group scheduler $kendo-scheduler-event-template-padding-x: null !default; -/// The vertical padding of the Scheduler event template. -/// @group scheduler $kendo-scheduler-event-template-padding-y: null !default; -/// The inline inset of the Scheduler event actions. -/// @group scheduler $kendo-scheduler-event-actions-inset-x: null !default; -/// The margin of the Scheduler event indicators. -/// @group scheduler $kendo-scheduler-indicators-margin: null !default; -/// The margin of the Scheduler event indicators in rtl. -/// @group scheduler $kendo-scheduler-rtl-indicators-margin: null !default; -/// The inline inset of the Scheduler marquee labels. -/// @group scheduler $kendo-scheduler-marquee-label-inset-x: null !default; -/// The block inset of the Scheduler marquee labels. -/// @group scheduler $kendo-scheduler-marquee-label-inset-y: null !default; diff --git a/packages/core/scss/components/scrollview/_variables.scss b/packages/core/scss/components/scrollview/_variables.scss index c34e32128d2..f984cdcdc32 100644 --- a/packages/core/scss/components/scrollview/_variables.scss +++ b/packages/core/scss/components/scrollview/_variables.scss @@ -1,92 +1,36 @@ // ScrollView -/// The width of the border around the ScrollView. -/// @group scrollview $kendo-scrollview-border-width: null !default; -/// The font family of the ScrollView. -/// @group scrollview $kendo-scrollview-font-family: null !default; -/// The font size of the ScrollView. -/// @group scrollview $kendo-scrollview-font-size: null !default; -/// The line height of the ScrollView. -/// @group scrollview $kendo-scrollview-line-height: null !default; -/// The text color of the ScrollView. -/// @group scrollview $kendo-scrollview-text: null !default; -/// The background color of the ScrollView. -/// @group scrollview $kendo-scrollview-bg: null !default; -/// The border color of the ScrollView. -/// @group scrollview $kendo-scrollview-border: null !default; -/// The size of the ScrollView page button. -/// @group scrollview $kendo-scrollview-pagebutton-size: null !default; -/// The background color of the ScrollView page button. -/// @group scrollview $kendo-scrollview-pagebutton-bg: null !default; -/// The border color of the ScrollView page button. -/// @group scrollview $kendo-scrollview-pagebutton-border: null !default; -/// The primary background color of the ScrollView page button. -/// @group scrollview $kendo-scrollview-pagebutton-primary-bg: null !default; -/// The primary border color of the ScrollView page button. -/// @group scrollview $kendo-scrollview-pagebutton-primary-border: null !default; -/// The box shadow of the ScrollView page button. -/// @group scrollview $kendo-scrollview-pagebutton-shadow: null !default; -/// The offset of the ScrollView pager. -/// @group scrollview $kendo-scrollview-pager-offset: null !default; -/// The spacing between the ScrollView pager items. -/// @group scrollview $kendo-scrollview-pager-item-spacing: null !default; -/// The border width of the ScrollView pager items. -/// @group scrollview $kendo-scrollview-pager-item-border-width: null !default; -/// The height of the ScrollView pager. -/// @group scrollview $kendo-scrollview-pager-height: null !default; -/// The text color of the highlight over the tapped ScrollView navigation arrows. -/// @group scrollview $kendo-scrollview-arrow-tap-highlight-color: null !default; -/// The color of the ScrollView navigation arrows. -/// @group scrollview $kendo-scrollview-navigation-color: null !default; -/// The box shadow of the ScrollView navigation arrows. -/// @group scrollview $kendo-scrollview-navigation-icon-shadow: null !default; -/// The background color of the ScrollView navigation. -/// @group scrollview $kendo-scrollview-navigation-bg: null !default; -/// The opacity of the ScrollView navigation. -/// @group scrollview $kendo-scrollview-navigation-default-opacity: null !default; -/// The hover opacity of the ScrollView navigation. -/// @group scrollview $kendo-scrollview-navigation-hover-opacity: null !default; -/// The hover background color of the ScrollView navigation arrows. -/// @group scrollview $kendo-scrollview-navigation-hover-span-bg: null !default; -/// The background color of the ScrollView pager in light mode. -/// @group scrollview $kendo-scrollview-light-bg: null !default; -/// The background color of the ScrollView pager in dark mode. -/// @group scrollview $kendo-scrollview-dark-bg: null !default; -/// The duration of the ScrollView transition. -/// @group scrollview $kendo-scrollview-transition-duration: null !default; -/// The timing function of the ScrollView transition. -/// @group scrollview $kendo-scrollview-transition-timing-function: null !default; diff --git a/packages/core/scss/components/skeleton/_variables.scss b/packages/core/scss/components/skeleton/_variables.scss index c939f967269..325ea8a57c9 100644 --- a/packages/core/scss/components/skeleton/_variables.scss +++ b/packages/core/scss/components/skeleton/_variables.scss @@ -1,18 +1,10 @@ // Skeleton -/// The transform scale of the Skeleton text. -/// @group skeleton $kendo-skeleton-text-transform: null !default; -/// The border radius of the Skeleton text. -/// @group skeleton $kendo-skeleton-text-border-radius: null !default; -/// The border radius of the rectangular Skeleton. -/// @group skeleton $kendo-skeleton-rect-border-radius: null !default; -/// The border radius of the circular Skeleton. -/// @group skeleton $kendo-skeleton-circle-border-radius: null !default; $kendo-skeleton-item-bg: null !default; diff --git a/packages/core/scss/components/slider/_variables.scss b/packages/core/scss/components/slider/_variables.scss index 10158756c74..497a5427ea4 100644 --- a/packages/core/scss/components/slider/_variables.scss +++ b/packages/core/scss/components/slider/_variables.scss @@ -1,122 +1,48 @@ // Slider -/// The default size of the Slider. -/// @group slider $kendo-slider-size: null !default; -/// The default size of the Slider tick. -/// @group slider $kendo-slider-tick-size: null !default; -/// The default size of the Slider's track wrap. -/// @group slider $kendo-slider-alt-size: null !default; -/// The font family of the Slider. -/// @group slider $kendo-slider-font-family: null !default; -/// The font size of the Slider. -/// @group slider $kendo-slider-font-size: null !default; -/// The line height of the Slider. -/// @group slider $kendo-slider-line-height: null !default; -/// The offset of the Slider Buttons. -/// @group slider $kendo-slider-button-offset: null !default; -/// The size of the Slider Buttons. -/// @group slider $kendo-slider-button-size: null !default; -/// The spacing of the Slider Buttons. -/// @group slider $kendo-slider-button-spacing: null !default; -/// The shadow of the focused Slider Buttons. -/// @group slider $kendo-slider-button-focus-shadow: null !default; -/// The thickness of the Slider track. -/// @group slider $kendo-slider-track-thickness: null !default; -/// The size of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-size: null !default; -/// The border width of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-border-width: null !default; -/// The transition scale of the active Slider drag handle. -/// @group slider $kendo-slider-draghandle-active-scale: null !default; -/// The size of the active Slider drag handle. -/// @group slider $kendo-slider-draghandle-active-size: null !default; -/// The background color of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-bg: null !default; -/// The text color of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-text: null !default; -/// The border color of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-border: null !default; -/// The gradient of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-gradient: null !default; -/// The background color of the hovered Slider drag handle. -/// @group slider $kendo-slider-draghandle-hover-bg: null !default; -/// The text color of the hovered Slider drag handle. -/// @group slider $kendo-slider-draghandle-hover-text: null !default; -/// The border color of the hovered Slider drag handle. -/// @group slider $kendo-slider-draghandle-hover-border: null !default; -/// The gradient of the hovered Slider drag handle. -/// @group slider $kendo-slider-draghandle-hover-gradient: null !default; -/// The background color of the active Slider drag handle. -/// @group slider $kendo-slider-draghandle-pressed-bg: null !default; -/// The text color of the active Slider drag handle. -/// @group slider $kendo-slider-draghandle-pressed-text: null !default; -/// The border color of the active Slider drag handle. -/// @group slider $kendo-slider-draghandle-pressed-border: null !default; -/// The gradient of the active Slider drag handle. -/// @group slider $kendo-slider-draghandle-pressed-gradient: null !default; -/// The shadow of the focused Slider drag handle. -/// @group slider $kendo-slider-draghandle-focus-shadow: null !default; -/// The transition speed of the Slider. -/// @group slider $kendo-slider-transition-speed: null !default; -/// The transition function of the Slider. -/// @group slider $kendo-slider-transition-function: null !default; -/// The transition speed of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-transition-speed: null !default; -/// The transition function of the Slider drag handle. -/// @group slider $kendo-slider-draghandle-transition-function: null !default; -/// The background color of the Slider track. -/// @group slider $kendo-slider-track-bg: null !default; -/// The background color of the Slider's track selection. -/// @group slider $kendo-slider-selection-bg: null !default; -/// @group slider -/// The opacity of the disabled Slider. $kendo-slider-disabled-opacity: null !default; -/// The background image of the horizontal Slider tick. -/// @group slider $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default; -/// The background image of the vertical Slider tick. -/// @group slider $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default; diff --git a/packages/core/scss/components/split-button/_variables.scss b/packages/core/scss/components/split-button/_variables.scss index d3b76f8f4b1..a3fed415f09 100644 --- a/packages/core/scss/components/split-button/_variables.scss +++ b/packages/core/scss/components/split-button/_variables.scss @@ -1,31 +1,13 @@ // Split-button -/// The focus shadow of the SplitButton. -/// @group split-button $kendo-split-button-focus-shadow: null !default; -/// The horizontal padding of the arrow Button. -/// @group split-button $kendo-split-button-arrow-padding-x: null !default; -/// The horizontal padding of the small arrow Button. -/// @group split-button $kendo-split-button-sm-arrow-padding-x: null !default; -/// The horizontal padding of the medium arrow Button. -/// @group split-button $kendo-split-button-md-arrow-padding-x: null !default; -/// The horizontal padding of the large arrow Button. -/// @group split-button $kendo-split-button-lg-arrow-padding-x: null !default; -/// The vertical padding of the arrow Button. -/// @group split-button $kendo-split-button-arrow-padding-y: null !default; -/// The vertical padding of the small arrow Button. -/// @group split-button $kendo-split-button-sm-arrow-padding-y: null !default; -/// The vertical padding of the medium arrow Button. -/// @group split-button $kendo-split-button-md-arrow-padding-y: null !default; -/// The vertical padding of the large arrow Button. -/// @group split-button $kendo-split-button-lg-arrow-padding-y: null !default; diff --git a/packages/core/scss/components/splitter/_variables.scss b/packages/core/scss/components/splitter/_variables.scss index 9f5294a9ec6..d5b64878822 100644 --- a/packages/core/scss/components/splitter/_variables.scss +++ b/packages/core/scss/components/splitter/_variables.scss @@ -1,64 +1,26 @@ // Splitter -/// The width of the border around the Splitter. -/// @group splitter $kendo-splitter-border-width: null !default; -/// The font family of the Splitter. -/// @group splitter $kendo-splitter-font-family: null !default; -/// The font size of the Splitter. -/// @group splitter $kendo-splitter-font-size: null !default; -/// The line height of the Splitter. -/// @group splitter $kendo-splitter-line-height: null !default; -/// The background color of the Splitter. -/// @group splitter $kendo-splitter-bg: null !default; -/// The text color of the Splitter. -/// @group splitter $kendo-splitter-text: null !default; -/// The border color of the Splitter. -/// @group splitter $kendo-splitter-border: null !default; -/// The size of the Splitter split bar. -/// @group splitter $kendo-splitter-splitbar-size: null !default; -/// The length of the Splitter drag handle. -/// @group splitter $kendo-splitter-drag-handle-length: null !default; -/// The thickness of the Splitter drag handle. -/// @group splitter $kendo-splitter-drag-handle-thickness: null !default; -/// The margin of the Splitter drag handle icon. -/// @group splitter $kendo-splitter-drag-icon-margin: null !default; -/// The horizontal padding of the collapse icon in the Splitter. -/// @group splitter $kendo-splitter-collapse-icon-padding-x: null !default; -/// The vertical padding of the collapse icon in the Splitter. -/// @group splitter $kendo-splitter-collapse-icon-padding-y: null !default; -/// The background color of the Splitter split bar. -/// @group splitter $kendo-splitbar-bg: null !default; -/// The text color of the Splitter split bar. -/// @group splitter $kendo-splitbar-text: null !default; -/// The hover background color of the Splitter split bar. -/// @group splitter $kendo-splitbar-hover-bg: null !default; -/// The hover text color of the Splitter split bar. -/// @group splitter $kendo-splitbar-hover-text: null !default; -/// The selected background color of the Splitter split bar. -/// @group splitter $kendo-splitbar-selected-bg: null !default; -/// The selected text color of the Splitter split bar. -/// @group splitter $kendo-splitbar-selected-text: null !default; diff --git a/packages/core/scss/components/spreadsheet/_variables.scss b/packages/core/scss/components/spreadsheet/_variables.scss index 54ebd4182b5..e3c6146109c 100644 --- a/packages/core/scss/components/spreadsheet/_variables.scss +++ b/packages/core/scss/components/spreadsheet/_variables.scss @@ -1,270 +1,108 @@ // Spreadsheet -/// The width of the border around the Spreadsheet. -/// @group spreadsheet $kendo-spreadsheet-border-width: null !default; -/// The font family of the Spreadsheet. -/// @group spreadsheet $kendo-spreadsheet-font-family: null !default; -/// The font size of the Spreadsheet. -/// @group spreadsheet $kendo-spreadsheet-font-size: null !default; -/// The line height of the Spreadsheet. -/// @group spreadsheet $kendo-spreadsheet-line-height: null !default; -/// The background color of the Spreadsheet. -/// @group spreadsheet $kendo-spreadsheet-bg: null !default; -/// The text color of the Spreadsheet. -/// @group spreadsheet $kendo-spreadsheet-text: null !default; -/// The border color of the Spreadsheet. -/// @group spreadsheet $kendo-spreadsheet-border: null !default; -/// The background color of the Spreadsheet header. -/// @group spreadsheet $kendo-spreadsheet-header-bg: null !default; -/// The text color of the Spreadsheet header. -/// @group spreadsheet $kendo-spreadsheet-header-text: null !default; -/// The border color of the Spreadsheet header. -/// @group spreadsheet $kendo-spreadsheet-header-border: null !default; -/// The gradient of the Spreadsheet header. -/// @group spreadsheet $kendo-spreadsheet-header-gradient: null !default; -/// The background color of the Spreadsheet table headers. -/// @group spreadsheet $kendo-spreadsheet-table-header-bg: null !default; -/// The text color of the Spreadsheet table headers. -/// @group spreadsheet $kendo-spreadsheet-table-header-text: null !default; -/// The border color of the Spreadsheet table headers. -/// @group spreadsheet $kendo-spreadsheet-table-header-border: null !default; -/// The gradient of the Spreadsheet table headers. -/// @group spreadsheet $kendo-spreadsheet-table-header-gradient: null !default; -/// The border width of the Spreadsheet action bar. -/// @group spreadsheet $kendo-spreadsheet-action-bar-border-width: null !default; -/// The horizontal padding of the Spreadsheet action bar. -/// @group spreadsheet $kendo-spreadsheet-action-bar-padding-y: null !default; -/// The vertical padding of the Spreadsheet action bar. -/// @group spreadsheet $kendo-spreadsheet-action-bar-padding-x: null !default; -/// The font size of the Spreadsheet action bar. -/// @group spreadsheet $kendo-spreadsheet-action-bar-font-size: null !default; -/// The font family of the Spreadsheet action bar. -/// @group spreadsheet $kendo-spreadsheet-action-bar-font-family: null !default; -/// The spacings of the Spreadsheet action bar. -/// @group spreadsheet $kendo-spreadsheet-action-bar-spacing: null !default; -/// The gap of the Spreadsheet formula bar. -/// @group spreadsheet $kendo-spreadsheet-formula-bar-gap: null !default; -/// The horizontal padding of the Spreadsheet formula input. -/// @group spreadsheet $kendo-spreadsheet-formula-input-padding-x: null !default; -/// The vertical padding of the Spreadsheet formula input. -/// @group spreadsheet $kendo-spreadsheet-formula-input-padding-y: null !default; -/// The line height of the Spreadsheet formula input. -/// @group spreadsheet $kendo-spreadsheet-formula-input-line-height: null !default; -/// The padding of the Spreadsheet formula bar icon. -/// @group spreadsheet $kendo-spreadsheet-formula-bar-icon-padding: null !default; -/// The font family of the Spreadsheet view. -/// @group spreadsheet $kendo-spreadsheet-view-font-family: null !default; -/// The font size of the Spreadsheet view. -/// @group spreadsheet $kendo-spreadsheet-view-font-size: null !default; -/// The background color of the Spreadsheet selection. -/// @group spreadsheet $kendo-spreadsheet-selection-bg: null !default; -/// The text color of the Spreadsheet selection. -/// @group spreadsheet $kendo-spreadsheet-selection-text: null !default; -/// The border color of the Spreadsheet selection. -/// @group spreadsheet $kendo-spreadsheet-selection-border: null !default; -/// The shadow of the Spreadsheet selection. -/// @group spreadsheet $kendo-spreadsheet-selection-shadow: null !default; -/// The background color of the Spreadsheet single selection. -/// @group spreadsheet $kendo-spreadsheet-single-selection-bg: null !default; -/// The text color of the Spreadsheet single selection. -/// @group spreadsheet $kendo-spreadsheet-single-selection-text: null !default; -/// The border color of the Spreadsheet single selection. -/// @group spreadsheet $kendo-spreadsheet-single-selection-border: null !default; -/// The background color of the Spreadsheet partial selection. -/// @group spreadsheet $kendo-spreadsheet-partial-selection-bg: null !default; -/// The background color of the Spreadsheet active cell. -/// @group spreadsheet $kendo-spreadsheet-active-cell-bg: null !default; -/// The shadow of the Spreadsheet active cell. -/// @group spreadsheet $kendo-spreadsheet-active-cell-shadow: null !default; -/// The background color of the Spreadsheet auto fill. -/// @group spreadsheet $kendo-spreadsheet-auto-fill-bg: null !default; -/// The text color of the Spreadsheet auto fill. -/// @group spreadsheet $kendo-spreadsheet-auto-fill-text: null !default; -/// The border color of the Spreadsheet auto fill. -/// @group spreadsheet $kendo-spreadsheet-auto-fill-border: null !default; -/// The shadow of the Spreadsheet auto fill. -/// @group spreadsheet $kendo-spreadsheet-auto-fill-shadow: null !default; -/// The background color of the Spreadsheet auto fill punch. -/// @group spreadsheet $kendo-spreadsheet-auto-fill-punch-bg: null !default; -/// The vertical padding of the Spreadsheet cell. -/// @group spreadsheet $kendo-spreadsheet-cell-padding-y: null !default; -/// The horizontal padding of the Spreadsheet cell. -/// @group spreadsheet $kendo-spreadsheet-cell-padding-x: null !default; -/// The line height of the Spreadsheet cell editor. -/// @group spreadsheet $kendo-spreadsheet-cell-editor-line-height: null !default; -/// The horizontal padding of the Spreadsheet cell editor. -/// @group spreadsheet $kendo-spreadsheet-cell-editor-padding-x: null !default; -/// The vertical padding of the Spreadsheet cell editor. -/// @group spreadsheet $kendo-spreadsheet-cell-editor-padding-y: null !default; -/// The background color of the Spreadsheet cell editor. -/// @group spreadsheet $kendo-spreadsheet-cell-editor-bg: null !default; -/// The text color of the Spreadsheet cell editor. -/// @group spreadsheet $kendo-spreadsheet-cell-editor-text: null !default; -/// The border color of the Spreadsheet cell editor. -/// @group spreadsheet $kendo-spreadsheet-cell-editor-border: null !default; -/// The background color of the Spreadsheet resize handle. -/// @group spreadsheet $kendo-spreadsheet-resize-handle-bg: null !default; -/// The border color of the Spreadsheet cell comment indicator. -/// @group spreadsheet $kendo-spreadsheet-cell-comment-border: null !default; -/// The border color of the Spreadsheet cell dirty indicator. -/// @group spreadsheet $kendo-spreadsheet-cell-dirty-border: null !default; -/// The horizontal padding of the Spreadsheet sheets bar. -/// @group spreadsheet $kendo-spreadsheet-sheets-bar-padding-x: null !default; -/// The vertical padding of the Spreadsheet sheets bar. -/// @group spreadsheet $kendo-spreadsheet-sheets-bar-padding-y: null !default; -/// The border width of the Spreadsheet sheets bar. -/// @group spreadsheet $kendo-spreadsheet-sheets-bar-border-width: null !default; -/// The border style of the Spreadsheet image Dialog. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-border-style: null !default; -/// The border width of the Spreadsheet image Dialog. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-border-width: null !default; -/// The bottom margin of the Spreadsheet image Dialog. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-text-margin-bottom: null !default; -/// The width of the Spreadsheet image Dialog preview. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-preview-width: null !default; -/// The height of the Spreadsheet image Dialog preview. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-preview-height: null !default; -/// The image of the Spreadsheet image Dialog preview. -/// @group spreadsheet -$kendo-spreadsheet-insert-image-dialog-preview-img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAGQCAYAAAAjl1AKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMGVmMzZmZi04YmI1LTRlN2YtOTcwMS04OTU5ZTg1N2ZhY2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDNDOTBDNUQ2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDNDOTBDNUM2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmZmZjM0Mi05NjEyLTQwM2YtYWZhYS01MTE1ZjQ2NThmMWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphYjlhMmUwMy1kNmIwLTY3NGMtODc4ZS0yMjUzMjdkNDI5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68UHLbAAAgpElEQVR42uzd2ZNc9dnY8TOL9gU0IAkjgwpkI8QOQmI1FS+FHW9VLt/7wpWb900qKV+lTL3vTZzElSvnJilfvM4fkQunfEOw2LUgiUUsNhiMAFsjtIzQrpmJnhOdoaent+np5SyfT1XXiJ4R0hz19Lef31l6ZHZ2NgEAWhu1CQBAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQQAwQQAwQQAwQQAMuP9/gNGRkZsZQAGop/v8WzCBIA8TJj9GFr9swGUYyAUTHEEoLvn+NxGdLwgG1BEAaoxYY7kNZ55C+bIEu4DoFixHGkT0JE8RTMvwWwXxRHBBKhMQGcbPN8PPZx5COZIh6EcEU+AQgex2fRYH8tm4RxqNIcdzGbxa/dROAGKOT3WhnCk5nOzTX5PbqI5zGB2Estmv24XTwDyO2HOtohi/f25ieawgtkqlvW/HukgnqIJULxY1v96tsV0OvRo5mkfZn0YR5tEs920CUB+o9kokvW3mQ6iWYkJc6RNLOtvo7/85S/X/eIXv/jntWvX/mjZsmVfGRsbG3eNWoCClvOq6enpy1f9/Ysvvvjfv/nNb/7zr3/96zM1oRxN2u/THHhAR/p5odr0D1gYtvpg1kdztObj6N///vf/NDEx8e/Gx8eXeZgBlM+VK1cunzhx4n9u3rz5n65Fc6Zm0my0dFs/tdbGuG9/z2FefL1ROOdi+ZOf/GTl1NTU/920adMvxBKgvOI5/upz/X+I5/x47q8bnEaSnByvMugJs1EkRxoEcyw23Lp16x72UAKojjNnzuxfv379N6/+crrBlDnbbsos44TZ7Mo+aTSPHTv2X8USoHriuT8a0GS6HOqUOewl2QW3OMBnYmLiHz1sAKopGhAtSFqfJTH4aA1pSbbRUmx6m5yc/O833njjv/GQAaiu48eP/6+NGzf+++TLg4AaLc0mSQWWZJuN1iNr1qz5vocKQLVdbcG/TnJ2cZpBBrPV1Xnmps1ly5Zt8lABqLarLdiYNL9YTbOmlCaY9fFsdHm8kbgogYcKQLVda0HTVpR9wuwonq7gA0CD418qtSTbzdQJQIW7macujOZgYwBA7psxmrONIKAA5LIN42XaIFeuXEmmpqaSixcvJjMzMx5qAMOYxEZHkxUrViTr16+P68T2shGVe3uvvohYTk5OCiXAkMXz8Pnz59PhZePGjb2IZj5eCJTlHygmS7EEyFc447m5NJNzWb6ReCUDQL5cuHBBMPP4SgaAfOn39coFEwBypjQH/bhCEAAmTAAQTAAQTAAQTAAQTABAMAFAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQSAAhkvyzcyMjLiXxMAEyYACCYACCYACCYACCYAIJgAIJgAIJgAIJgAIJgAIJgAIJgAIJgAgGACwBJ5ey8AMGECgGACgGACgGACgGACgGACgGACAIIJAIIJAIIJAIIJAIIJAKXg4usAYMIEAMEEAMEEAMEEAMEEAMEEAMEEAAQTAAQTAAQTAAQTAAQTAErBxdcBwIQJAIIJAAMzbhMA9cbGxpLx8fH0Fr8eHR1NP8auj+wWZmdn527T09PJzMxM+vHKlSvpLX4NggmUKpDLly9Pb8uWLUsD2YnaeMb/o14E9PLly8mlS5fSm4AimEDhRBRXrlyZ3mKSrHXmzJnk5MmTyalTp5IvvvgivV28eDG9RfQigukTyLUpdMWKFWls165dm96uv/76ZMOGDcn69evTz8UtxNR54cKF9BYxBcEEcivCtmrVqrmIZYGcnJxMPv300+Rvf/tbGsZMLLc2ky29nj9/Pv3vY8eOzft8/Bk33XRTsmXLlmTTpk3JunXr5qIaf0b8vpg8oQhGWv0w9OQP+PJ0j5Gaj9lttOYW6zljV/8+J7v5c+p/UIFkQbzWrFkzb5r88MMPk7/85S9pKOt18tzQ6msafe7mm29Otm3bltx2223zonv27Nl5kaZc4sVSl/3YcPXD9LXbTM1ttuaW1HxM+tk0wYSSi32SMdHFx5BNku++++7c0mqvItlpROPvsmPHjrnJM8TfJZZ+6/9OCKZgCib0VeyjjFDGPsrw+eefpxPlO++80/NpsptpM3PXXXelE+eNN96Y/nfs34xw2scpmIIpmNB3sfwa+wuzo13/9Kc/JXv37h1oJFt9vtH9jz32WLJ9+/b01xHL2K9qmVYwBVMwoW8/bxHKbKr8+OOPkwMHDqT7CPMwTbb7XEzEu3fvTrZu3To3bUY4+/08hWAKJlRInAcZp3HE/sE49ePgwYPpfsphT5OLnTRD7N/ctWtX+j3FPs2pqSnncArm0IPptBIogYjkddddly7BxkE9L7/8cseT2bCmyVb3HzlyJDl69Gjy1FNPpU+2cU7n6dOnHRDEUJVmwownCaiiOK8yJsv4WfvrX/+avPTSS+mpGkWZJlt9LibMiGYcFBRfE5Om8zaLZ+PGjaWYMF18HQosDu7JYvn+++8ne/bsaRnL7Lqv3Xy+9rqx3Xyu099Te398L88++2zy3nvvpd9jduUgGAZLslDgyTIO8ImQ/PnPf05eeeWVQk+Tre6PFwLxMY6ije85fm3SZNBMmFDEV7rj43OTZbNYFm2abHf/888/nx7ElE2a9de/BcEE5v/Qjo6mB/hky7D1sew2hJ3+3l4GdLH3x6SZLc9mBzmBYAILZNNVhOKjjz5Kj4btVQjzNE22uv+5555LPvjgg3kvHGAQxsv0RAJlFxdPj1NI4jJ3EctBnxLS632Tnd7fKJqxLTZv3pxe7CAupQcmTCCVvS1XiGXYZuckLnVizNM02ey++N4jmnExg7iqkSNnEUwgFSsoMUmF2Id34sSJjqPWj8/18/5O4xlvbp3tv41p0yoTggmkQYh9dnFt2FdffbWjqbCbyXCQU2Mn02S7qL7xxhvp+3nGtoltBIIJFRanT2QXU9+3b1/HU+FiJr28TpOdRPXFF19MP8Y2cqoJggkVVrsUGwe3DOKUkF6dKtLLabLZ/XHN3LfeemvetgLBhIqJg1liaoqjYltdnGBQ50cOI4jtvjZ+/cc//jF9x6LYVg4AQjChgrKjYuO8w35Nk0sJaK+j2s3XZuJNsmu3GQgmVEScRhITU0xOb7/9du5PCRnENNnqaw8dOpR89tln6TaLbQeCCRWRHejzySef5PpydYOcJuuXYuvvi7c3q912IJhQ9h/M0dH0ij7hnXfeyd00OYggtvvaRvcdPnx4bjp3nVl6zaXxIIfiwJV4TMf1YrO3scr75ery8LWxreIdTeJtwGLKPH/+vAcTJkwoezBDHOxjmmy/FFt7fwSzdhuCCRPK+ip2dDQ9cGVqaiqdMAc5NRZpmmx2X2yzuGze9ddfn27LmZkZDypMmFBG2RGecXTsoKfGok2TzX7/p59+Om9bgmBCCWUH+xw9ejT3R7q2+38sNZ7d/v4PP/xw3raEXrAkCzkNZjYl1YahmaUudy72/n4spfby98dF6gUTwYQSGxsbS4+Ojf2XFy9e7Hv4ihrEdvfF0bHZfszYpvG+mSCYULJghtOnTw88fGWL5+TkZBrMOIBKMOkF+zAhh8GM6ag+BHm++Hke92MeP3583jYFEyaU6RXstavTxIRpmlza12bb0BV/EMw6rvRDKX4gr70BcuzDbDRFDTuIRYpnbMNswvT8gGBCyWRP7OfOnRPEJX5ttg3FEsGEEgfzwoULhb/izrDjmV1HVjARTChxMOsv5yaei//aK1euCCaCCWUPZrzrhiAu/Z1LBBPBhJJbygE/4tn6qkggmFCSUMZEFJd0u3z5cqGClLe/a3bhdfFEMKHEwYxTIbIlxbIEbdDnlGYXLBBMBBNKGsxsOsqO8ixj/AYRz5UrVwomggllD+bq1asXXB4vD0Ea9u9fzP8jtqFg0kuuGQU5kl0kfP369fNiMKjrr/bjWrG9vNbsYq6Zm21DF17HhFnHoeOUQXb+5XXXXVf5pdil/j9iG2bb1PMDggklnTA3bNhQyCAO+mtb3b9x48Z5L0JAMKGEwYz3cazaOZK9jmcWzOyKPyCYUCIxDcWTfiwnxlGecU3ZPMQv79Nk/f2rVq1KJiYm0vtNmPSKg34gZ+KCBWHLli2FPDCn26/t9v/R6P9z6623ztuWIJhQQtkSYvak30lMlhq0QQSxl0fAtro/brfddtu8bQm9YEkWcjphfuUrX6nc1Xl6df9Xv/pVEyYmTCi72OcWB//Efsxt27a1nMSKuhTbr/tDTJc33HBDug3tv0QwoeSy68h+/etfL/xS7CDvj9s999wzbxtCr1iShZwGM470jAkzrivbi/fHHPTyar+XYht9LrbV3XffLZiYMKEqYikx2/9233335XqaHNaU2ehzDz/8cPoxtp3lWASTwjt+/LiN0IGLFy+mH7du3drz+PU6fIPYN9ns/trP3X777fO2HfSSa8ky8Fg+//zzyZNPPpls2rTJBmkhTomIA1fiaNkHHnggOXjw4IJINApHs6AM6msHcX+jz+3evTu55ZZb0m0W285zAiZMCh3LPXv2pO/zGNE8duyYjdJGdqWfOPin22kyr0fALnaKbfe5u+66a942A8Gk8LHMntREs73YFxcT00033ZR885vfzEUQlxq9pQS02ee+973vJTfffHO6rZx7iWBSmljWTk+i2d65c+fSj/fee2+ybt26wl6urpcBrf1cvO/lQw89NG9bgWBSyFhGFOtjKZqdi6kpO0XiqaeeGug02cvL1fXi9zT6fU8//XT6MbaRN4tGMCl0LNu96s+iOTk5aaM1ES84IhJf+9rXkm9961uluMBAN9Nk/ed37dqVbN++Pb2/2YsyEExKEcvaaMayrWgmTYORbcs4LzN7r8eiXK6uV9NkrXiT7XjxUPuCAgSTQsYynsTi0P5Ob3HunEmzuTiYJTu/8Dvf+U4yPj5eqWmy9vPxvf/4xz9OP8ZSrKv6IJgUOpbdsDzbfvtkR81+97vfXXTI8nKBgW4/l30+YhnvSBLbwlIsgkkhY/nCCy8s+QlMNJuLYJw9ezb9eMcdd8xFMy9TZi8/1+zPi1ju2LFj3raAQRjp94Ot5mobIzUfs9tozW0sblf/Pie7+XNOnz7tX3OIIm69iGWtlStXuiJQE2NjY8maNWvSn6833ngj+cMf/tAwNs0i1Iv7h/G5H/7wh+lVj7JYOiq2GOKt6rrsx4arH6av3WZqbrM1t6TmY19fQJkwyWUss0kz/r9OOVkoQhEHAcWTQ5yfWTtplmmarPWDH/xgLpbxvYslgyaYLEm2DBtxW8wBPos5EEg0G4vrpWZHh0Y042o3ebtcXSch7OTzP/rRj5IHH3xw7vSR+N5BMClULGNfY7+v3SmazcWRs9mkGW+cnB05mofL1S31SNjsaNif/vSnyf333z83Wbr0HcNiHya5jmWtFStW2KfZRO0+zU8++ST5/e9/n5w8eXIuPq2mt8Xcv5TPLfbzExMT6QuAeAcS+yyLrSz7MAWTrmLZj32WncgOBMpO3OdLo6OjyerVq9N4Rliee+65ZP/+/T0J3lJC2M3vjSv4fPvb306WLVs2t7/WG0ILpmAKpliKZk9/3mL7LF++PP3v9957L3n22WfTn488T5O1T6xxbdg777wz/e+4IEGsYjh1RDAFUzALGcs8vN9gtjwrmo3FZLZq1aq5n7948+n6U0+GMU22+prvf//7yc6dO+e+Jl6U2V8pmIIpmGIpmgOfNj/99NPk7bffTvbu3ZuLaTLzyCOPJHfffXeyZcsWU6VgCqZgFtvnn38+9GVY0exeHGka4Yx9m+Ho0aPJBx98kOzbty+NU7+WZFt9Tfy77d69O9m2bVt6UE+IfZURSqeMCKZg9jmYU1NTHpV9nCzzfL3OiMETTzzh6NkOwhmhysIZ3n333eTNN99MPw5imox9k3H6S1zaLhOhjFOHhLK84k2+BVMwxVI0CxnO2McZt9pVhI8//jh5//33k48++mjBv3m302TsR926dWv6Pp633nprcsMNN8x9LvZPxk0oBVMwBbPwsXzxxRcL9U4QlmcX/7OZhbN26swCGheKiNupU6fSW5zakV1lJ3s7rez3xwuWOA/0+uuvT2/xb7B58+Z5gcymySyU9lEKpmAKpljmYNIUzcWJczhj8oxwxsean9slieeXCGyEMj46l1IwBVMwSyMmi4hlTBNFJZq9CWjEMz5mt+z6vrU/19nzR3YpuwhidotICiSCKZiljmUZ3pA3lmdFEwSzpy8k/VNStliGOOoyvh9vQg0IJmLZQTRfeukl0QQEE7FsJ06EF01AMFlyLCMm/Xrz57zcskkzjv4FEEy6imVZJ8t62T5N0QS6VZqjZM+cOeNfcxGxLPMybCtxysnjjz/u6FkYoHXr1nXbD0fJIpbDYp8mYMI0YXYcyzy9RdewxHmaJk0wYZowaRjL7AAfnHICCCYtYlnVZdhW0Xz55ZdFExBMxLKdmLgjmo6eBdqxD7PETpw4IZYdyvZp3njjjTYG9Jh9mIhlibi4AVCZCfOLL77wr3mNA3yWNmk+9thjjp6FHlq7dq0JE7Es46TpQCBAMCsQy3iyF0vRZPg8fgSTnMfSPsveRfOVV17xpEdXYl/4888/nxw7dszGKBH7ME2WtJDt03T0LIuJ5Z49e9IXr3Ht4m984xvJpk2bKr1N7MMkF+JoWLHs76TpPE26iWWIn0uTZnkIplgimvQhlhnRFExyEkv7LEWTfMQyotjszdjj8fPCCy+IZsHZh2myZBFin+ajjz5qnyYLYtnJi9fYp/nkk09Wbp9mWfZhliaYZ8+ercQDzwE++YmmixsQR1F3GsvaaFbtQKA1a9aUIpiWZAsWyzjVQSyHyykn1May2TJss1s8fuzTLCbBLFgs7bMUTfIVy24fP6JZPJZkC8A+y/yyT7OasYwDeHrx4rUq+zQtySKWzE2ajp4Vy27Ez7WjZ4tDMMUS0WQIsRTN4rEkm+NYOsCnWGJ59pFHHrE8W0K151n2SyzPPvHEE6VcnrUki1iyYNJ89dVXTZpi2fWk+eKLL5o0c0wwxRLRZMixFE3BRCxFk0LHMvYtDvrnUTTzqzT7MM+dO1fof4g4zzKeZMWyPOzTLK5+HeCzGGU65WT16tXd9sM+TMTSpEneY7nYK/j0+haPH5NmvgjmkMUyrFiWO5p79+4VzQLGMg8sz+aLJVmxZABieXb37t2WZ3Ms22eZx8tPFv2UE0uyiCUmTbE0aVaIYIolA4zmvn37RFMsRVMwEUs6edITzfzFctgH+DgQqBjswxxwLGNZTizJ9mnecMMNNsYQYxnxKeJb5mX7NIvyJub2YSKWdC3bpxmnFDF4sd0jlkWZLJtNmt6P1YRZugnz5MmT6TJsPMih1vLly02aQ4plGd6MPSbNxx9/PPeTZlkmzNIEM68PfpMl7cTy7K5du5xyMgBFXoZtF808n3KyatWqUgTTkqxYMmSOnhXLpYjnl5deesny7ACYMPscS8uwdMrybP9jWeYXr7FSkdcDgUyYiCU9denSJQcC9SmWMYGVfaUnnm9Mmv0lmH2IZSyviSXdRjMeP6LZ21iWbRm2Gcuz/WVJVizJoViejQOBLM+KZTfydvRsWZZkBVMsEc3SqT3Psqpin2ZeomkfJnPiPMv9+/eLJT0Vy7PxuLI8K5bdiOejl19+2fKsCTM/E2bE0mRJvyfNhx9+2KQpll2J5dnHHntsqJOmJVnBFEsGGs1Ynp2YmLAxWsSyCkfDdiNbnh3WxTEsyVacWDJI2fJs7CtHLBcrO+XExTFMmKlB/qDEk5Z9lgxr0rQ8O19VzrPshWEtz8afa8KsILEkD5OmA4HEstvBwoFAJsyB/MBYhiUvYp/Uzp07Kz1pWoZd2uNnkJOmCbNixJI8icfhgQMHKjtpiuXSHz8mTRNm32JpGZY8in2aVZs0xbK3k9+jjz7a90nThFmhyVIsyavYpxmTZlWOno1YxmQklr0R2/GVV15x9KwJUyyp1qQZR8+W+TxNseyfbJ9mv87TLMuEKZgtYhmv3MWSIkUzlmfLGE2xLHY0LcmWmFhSRGVdnhXLwcgOBLI8K5hiiWgWUHwfsY9NLAcXTfs0W0y8lmS/dOrUqXSfZTzpQJHF8uxDDz1U6OXZiKXJcjhieTaOnu3V8qwl2ZKJWMYrc7GkLJPmwYMHCztpiqVJM48EsyaWlmEp25NeEaMplqKZV6VZku02drHP8rXXXhNLSqtIy7NxgE88SQ/r/W1ZKLu4wVKWZ2OJt8t+OK0kL8EUS6oinrAefPDBXEczi6XJMp+Pn6VEsyzBrOySrFhSJXlfnhXL/D9+LM9WdMKMfZZiSRXF8mzeJs3s1BHLsOWdNC3JFjSYYoknvRXJAw88kItoOs+ymI+fRx55ZFHRFMwCBjOLpVNHMGkuH3o0xbI60bQPs2AilrEPRyzh/5+neejQoXRf/rBi+eqrr4plQcWAEv9+VdunWYlgZrG0DAvDj2YWS/ssix/NvXv3VupNzEu/JCuW0Fq2T3PDhg0mS7p6/MTybKs3MbcPswDBPH36tH2W0IFsn2Y/oxmTrH2W1YymYOY8mBFLkyXkI5oRS5Nl+aO5e/fuhtF00E/ORJizm1jC4tXu06z9eVrqTSyroXafZv1joDSdKcuEmS27OhoW8jNp2mdZ3Umz9pSTeEyVYcIsVTAjlvEK2WQJw49mxDImDrGsZjR37do1F03BzFkwjx07lsbSZAm9sWzZsq6jKZbURrMswSzNPkyxhN66fPlycvjw4UWfpymWhFjp27dvX6nO0yxNMMUS+vNztZhoiiX10YzHQ1mMl+UbKdORWJDHSfP+++9vuTwbUY2JIp4k/TxSxmFm1D8n0Gk0m02acb/JkrITTKDjaL7++uvp0ehiiWACtBDLa0eOHEmmp6fFksqxDxPoWJxqct999yVjY2NzsbTPEhMmQF0sd+7cmaxdu3beAT4gmADXxInnEct169bNxdIyLFVjSRZoO1k+9NBDaSzjPEuxRDABWsQyJsv9+/fbZ0llWZIFOoqlyRITZkl4xQu9j2XtAT5iiWACtImlZViwJAu0iGW2zxKwJAtkTwbj4wtiaRkWShhMYGmT5YMPPpjGMq4V62hYWMiSLIjlvFi6gg+UfML0Shi6eAIYH284WQIlDiaw+MnygQcesAwLJkygVSzvv//+BVfwAUyYQIPJUixBMIEOYnngwIH0TaGt0ECFgukHHtrHMpZha2NpsoTOOa0ExBKo0oQJtI9lHA372muvWYaFKgfTDz80+AEfH58XS5MlCCbQYLK877775k4dMVnC0tiHCRWJpckSTJgpr5rh2g/1+LhYgmACnUyW2dGwBw8eFEsQTKCTWFp9AcGcx5MClf5BvrYMa7KE/nHQD4glUKUJE6oolmHvvffeufMsDx065NQRMGECrWJpsgQTZke8oqZSP7jj42IJggm0myzvueeeebG0DAuCacKEusmyUSwBwQRqYhnLsGvWrJl3gA8wGA76gYLG0j5LMGECNbJ9llksDx8+bJ8lCGb3PHlQ1smyPpYmSxgOS7JQgFiePn1aLMGECdSLZdi777577mhYy7AgmD3jiYQyTZb1sTRZgmACdbG0zxIEE2ghW4Z1NCwIZl95UqHok2WjWAL54ShZyFksX3/9dbEEwQSaxTJOHYlY2mcJOf15tQkgH7G0zxIEcyA8yVC0WN51110LYgkIJtAklrEMe/nyZS/6IOfsw4Qhx9JkCSbMgfLqnKLEcvXq1WIJggl0Ess33njDMiwUjCVZGEIsTZZgwhwar9TJayx37NghlmDCBDqN5ZtvvimWYMI0YUJ9LO+8884FsfQ4BRMmUDdZxqkjU1NTyVtvvWWyBBMm0CiWJksQzNzyhEQeYtloGRYoB0uy0IdYWoYFwQQ6iKW36ALBBMQSqvnzXpZvxD5MhhHL7du3L1iG9VgEE2aujY2N+ddkKLGMU0eOHDlinyWU/Lm5NBPm+vXrk5MnT3p0MvBYmiyhuYmJCcHMm1tuuSU5c+ZMMj097RFKX18tN4ol0PjF5W233Vaa72dkdna2v3/Al6+6R2o+ZrfRmlvM7WNX/z5dj4kXLlxIjh49mj6RCSf9+OG/4447xBI6eGEZk2XEMn5eltCPDVc/TF+7zdTcZmtuSc3HpJ9Ny0MwR67FMn49vpRgAlAe14J55Vokp6+FcWjBzMtBPwu+aQAqL1dtGM3JxgCAXDdjNGcbQkAByGUXRvO2Qaanp0UToOJmZmZyF85hBbPRN5/ed+UqDxWAart8+fKVVq0oezAb7bydrdsAsxcuXJj0UAGotnPnzk0mLY6GTYZwQFBelmTnfn3mzJnfe6gAVNupU6f+T5NADk2eTitJb7/97W//+eoo7qoDABV16dKl6d/97nf/1GDCHKpBXrgg/c8GHxdc9efEiRP/bcOGDf/Wwwagej744IP/sW3btv+YdHZ1n3kRK8uVfmpDWR/LBVf+OX/+/HMrV67c6aEDUB3Hjh07sHnz5n+VNL+yT/3EObBgDnpJttnRTvW3mZ/97GdPX7hw4S0PH4BqmJycPPLzn//86RaRnG3TlP4OgAOeMJtNmUndhDm3RHvixIn/snr16n9YsWLFMg8ngPK5Ohxd/uyzz357++23P5MsXIKdSRaeUdE0mGW/luxsk4kzvdjuxMTEM7/61a9uPXr06L9MTU19dunSpSv9jjwA/RMXJbh48eKVkydPfvbhhx/+yzPPPHPr1Vj+MvnyXUnaLr0OwzAmzEZTZu202ektafARgHxqdLDOYm5JJwHtZ9PGc7IRRxpsiFaRHGkRXgDyGctGwUzaBDI371gyPsSNN9Immo3imYglQKmimXQQyaEe7JOHCbNVNEeabKDa++sjKZoA+Y9lJ/HMXSyHHczFTpr1X18fTkcCAZQnnLmKZR6C2SyaSdJ+iTYXGxCAvsUzN7HMSzAbRbCTcAJQnmC2imIuGjCew4030mZDCShAeaOZu1DmMZiNNtBI3jcgAAONqGAuYsM5GhZAHAWzbBsYgHIYtQkAQDABoCf6viTrnUUAMGECgGACAIIJAIIJAIIJAIIJAIIJAIIJAIIJAIIJAAgmAAgmAAgmAAgmAAgmAAgmAAgmACCYACCYACCYACCYACCYAFB0/0+AAQDHHxQEMMRIrwAAAABJRU5ErkJggg==" !default; -/// The border of the Spreadsheet image Dialog preview. -/// @group spreadsheet +$kendo-spreadsheet-insert-image-dialog-preview-img: null !default; $kendo-spreadsheet-insert-image-dialog-preview-border: null !default; -/// The border radius of the Spreadsheet image Dialog preview. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-preview-border-radius: null !default; -/// The shadow of the Spreadsheet image Dialog preview. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: null !default; -/// The border radius of the Spreadsheet image Dialog preview overlay. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: null !default; -/// The text color of the hovered Spreadsheet image Dialog preview. -/// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-overlay-hover-text: null !default; -/// The width of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-width: null !default; -/// The height of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-height: null !default; -/// The border style of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-border-style: null !default; -/// The border width of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-border-width: null !default; -/// The border color of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-outline-color: null !default; -/// The outline color of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-border-color: null !default; -/// The border color of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-bg: null !default; -/// The border radius of the Spreadsheet drawing handle. -/// @group spreadsheet $kendo-spreadsheet-drawing-handle-border-radius: null !default; -/// The outline style of the Spreadsheet drawing. -/// @group spreadsheet $kendo-spreadsheet-drawing-outline-style: null !default; -/// The outline width of the Spreadsheet drawing. -/// @group spreadsheet $kendo-spreadsheet-drawing-outline-width: null !default; -/// The background color of the Spreadsheet drawing anchor. -/// @group spreadsheet $kendo-spreadsheet-drawing-anchor-bg: null !default; -/// The vertical spacing of the Spreadsheet DropZone. -/// @group spreadsheet $kendo-spreadsheet-dropzone-spacing-y: null !default; -/// The padding of the Spreadsheet filter. -/// @group spreadsheet $kendo-spreadsheet-filter-padding: null !default; diff --git a/packages/core/scss/components/stepper/_variables.scss b/packages/core/scss/components/stepper/_variables.scss index 2a309369619..e89c3a6ce82 100644 --- a/packages/core/scss/components/stepper/_variables.scss +++ b/packages/core/scss/components/stepper/_variables.scss @@ -1,227 +1,92 @@ // Stepper -/// The horizontal margin the Stepper. -/// @group stepper $kendo-stepper-margin-x: null !default; -/// The vertical margin the Stepper. -/// @group stepper $kendo-stepper-margin-y: null !default; -/// The horizontal padding the Stepper. -/// @group stepper $kendo-stepper-padding-x: null !default; -/// The vertical padding the Stepper. -/// @group stepper $kendo-stepper-padding-y: null !default; -/// The horizontal margin the Stepper label. -/// @group stepper $kendo-stepper-label-margin-x: null !default; -/// The horizontal padding the Stepper label. -/// @group stepper $kendo-stepper-label-padding-x: null !default; -/// The vertical padding the Stepper label. -/// @group stepper $kendo-stepper-label-padding-y: null !default; -/// The border radius of the Stepper label. -/// @group stepper $kendo-stepper-label-border-radius: null !default; -/// The width of the border around the Stepper. -/// @group stepper $kendo-stepper-border-width: null !default; -/// The horizontal padding of the Stepper content. -/// @group stepper $kendo-stepper-inline-content-padding-x: null !default; -/// The vertical padding of the Stepper content. -/// @group stepper $kendo-stepper-inline-content-padding-y: null !default; // The font size of the Stepper. -/// @group stepper $kendo-stepper-font-size: null !default; // The line height of the Stepper. -/// @group stepper $kendo-stepper-line-height: null !default; // The font family of the Stepper. -/// @group stepper $kendo-stepper-font-family: null !default; -/// The background color of the Stepper. -/// @group stepper $kendo-stepper-bg: null !default; -/// The text color of the Stepper. -/// @group stepper $kendo-stepper-text: null !default; -/// The border color of the Stepper. -/// @group stepper $kendo-stepper-border: null !default; -/// The width of the Stepper indicator. -/// @group stepper $kendo-stepper-indicator-width: null !default; -/// The height of the Stepper indicator. -/// @group stepper $kendo-stepper-indicator-height: null !default; -/// The border width of the Stepper indicator. -/// @group stepper $kendo-stepper-indicator-border-width: null !default; -/// The border radius of the Stepper indicator. -/// @group stepper $kendo-stepper-indicator-border-radius: null !default; -/// The border width of the focused Stepper indicator. -/// @group stepper $kendo-stepper-indicator-focus-border-width: null !default; -/// The size of the focused Stepper indicator. -/// @group stepper $kendo-stepper-indicator-focus-size: null !default; -/// The offset of the Stepper's focused indicator. -/// @group stepper $kendo-stepper-indicator-focus-offset: null !default; -/// The calculated offset of the Stepper's focused indicator. -/// @group stepper $kendo-stepper-indicator-focus-calc-offset: null !default; -/// The background color of the Stepper indicator. -/// @group stepper $kendo-stepper-indicator-bg: null !default; -/// The text color of the Stepper indicator. -/// @group stepper $kendo-stepper-indicator-text: null !default; -/// The border color of the Stepper indicator. -/// @group stepper $kendo-stepper-indicator-border: null !default; -/// The background color of the hovered Stepper indicator. -/// @group stepper $kendo-stepper-indicator-hover-bg: null !default; -/// The text color of the hovered Stepper indicator. -/// @group stepper $kendo-stepper-indicator-hover-text: null !default; -/// The border color of the hovered Stepper indicator. -/// @group stepper $kendo-stepper-indicator-hover-border: null !default; -/// The background color of the disabled Stepper indicator. -/// @group stepper $kendo-stepper-indicator-disabled-bg: null !default; -/// The text color of the disabled Stepper indicator. -/// @group stepper $kendo-stepper-indicator-disabled-text: null !default; -/// The border color of the disabled Stepper indicator. -/// @group stepper $kendo-stepper-indicator-disabled-border: null !default; -/// The background color of the Stepper's done indicator. -/// @group stepper $kendo-stepper-indicator-done-bg: null !default; -/// The text color of the Stepper's done indicator. -/// @group stepper $kendo-stepper-indicator-done-text: null !default; -/// The border color of the Stepper's done indicator. -/// @group stepper $kendo-stepper-indicator-done-border: null !default; -/// The background color of the Stepper's hovered done indicator. -/// @group stepper $kendo-stepper-indicator-done-hover-bg: null !default; -/// The text color of the Stepper's hovered done indicator. -/// @group stepper $kendo-stepper-indicator-done-hover-text: null !default; -/// The border color of the Stepper's hovered done indicator. -/// @group stepper $kendo-stepper-indicator-done-hover-border: null !default; -/// The background color of the Stepper's disabled done indicator. -/// @group stepper $kendo-stepper-indicator-done-disabled-bg: null !default; -/// The text color of the Stepper's disabled done indicator. -/// @group stepper $kendo-stepper-indicator-done-disabled-text: null !default; -/// The border color of the Stepper's disabled done indicator. -/// @group stepper $kendo-stepper-indicator-done-disabled-border: null !default; -/// The background color of the Stepper current indicator. -/// @group stepper $kendo-stepper-indicator-current-bg: null !default; -/// The text color of the Stepper current indicator. -/// @group stepper $kendo-stepper-indicator-current-text: null !default; -/// The border color of the Stepper current indicator. -/// @group stepper $kendo-stepper-indicator-current-border: null !default; -/// The background color of the Stepper's hovered current indicator. -/// @group stepper $kendo-stepper-indicator-current-hover-bg: null !default; -/// The text color of the Stepper's hovered current indicator. -/// @group stepper $kendo-stepper-indicator-current-hover-text: null !default; -/// The border color of the Stepper's hovered current indicator. -/// @group stepper $kendo-stepper-indicator-current-hover-border: null !default; -/// The background color of the Stepper's disabled current indicator. -/// @group stepper $kendo-stepper-indicator-current-disabled-bg: null !default; -/// The text color of the Stepper's disabled current indicator. -/// @group stepper $kendo-stepper-indicator-current-disabled-text: null !default; -/// The border color of the Stepper's disabled current indicator. -/// @group stepper $kendo-stepper-indicator-current-disabled-border: null !default; -/// The text color of the Stepper label. -/// @group stepper $kendo-stepper-label-text: null !default; -/// The success text color of the Stepper label. -/// @group stepper $kendo-stepper-label-success-text: null !default; -/// The error text color of the Stepper label. -/// @group stepper $kendo-stepper-label-error-text: null !default; -/// The text color of the hovered Stepper label. -/// @group stepper $kendo-stepper-label-hover-text: null !default; -/// The text color of the disabled Stepper label. -/// @group stepper $kendo-stepper-label-disabled-text: null !default; -/// The text color of the optional Stepper label. -/// @group stepper $kendo-stepper-optional-label-text: null !default; -/// The opacity of the optional Stepper label. -/// @group stepper $kendo-stepper-optional-label-opacity: null !default; -/// The font size of the optional Stepper label. -/// @group stepper $kendo-stepper-optional-label-font-size: null !default; -/// The font style of the optional Stepper label. -/// @group stepper $kendo-stepper-optional-label-font-style: null !default; -/// The size of the Stepper ProgressBar. -/// @group stepper $kendo-stepper-progressbar-size: null !default; -/// The background color of the Stepper ProgressBar. -/// @group stepper $kendo-stepper-progressbar-bg: null !default; -/// The text color of the Stepper ProgressBar. -/// @group stepper $kendo-stepper-progressbar-text: null !default; -/// The background color of the selected Stepper ProgressBar. -/// @group stepper $kendo-stepper-progressbar-fill-bg: null !default; -/// The text color of the selected Stepper ProgressBar. -/// @group stepper $kendo-stepper-progressbar-fill-text: null !default; -/// The property name of the Stepper transition. -/// @group stepper $kendo-stepper-content-transition-property: null !default; -/// The duration of the Stepper transition. -/// @group stepper $kendo-stepper-content-transition-duration: null !default; -/// The timing function of the Stepper transition. -/// @group stepper $kendo-stepper-content-transition-timing-function: null !default; diff --git a/packages/core/scss/components/switch/_variables.scss b/packages/core/scss/components/switch/_variables.scss index 2d387f65fd7..c957b224f27 100644 --- a/packages/core/scss/components/switch/_variables.scss +++ b/packages/core/scss/components/switch/_variables.scss @@ -1,188 +1,76 @@ // Switch -/// The font family of the Switch. -/// @group switch $kendo-switch-font-family: null !default; -/// The border width of the Switch track. -/// @group switch $kendo-switch-track-border-width: null !default; -/// The border width of the Switch thumb. -/// @group switch $kendo-switch-thumb-border-width: null !default; -/// The text transform of the Switch label. -/// @group switch $kendo-switch-label-text-transform: null !default; -/// The display of the Switch label. -/// @group switch $kendo-switch-label-display: null !default; -/// The map with the different Switch sizes. -/// @group switch $kendo-switch-sizes: null !default; -/// The background of the track when the Switch is not checked. -/// @group switch $kendo-switch-off-track-bg: null !default; -/// The text color of the track when the Switch is not checked. -/// @group switch $kendo-switch-off-track-text: null !default; -/// The border color of the track when the Switch is not checked. -/// @group switch $kendo-switch-off-track-border: null !default; -/// The background gradient of the track when the Switch is not checked. -/// @group switch $kendo-switch-off-track-gradient: null !default; -/// The background of the track when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-track-hover-bg: null !default; -/// The text color of the track when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-track-hover-text: null !default; -/// The border color of the track when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-track-hover-border: null !default; -/// The background gradient of the track when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-track-hover-gradient: null !default; -/// The background of the track when the focused Switch is not checked. -/// @group switch $kendo-switch-off-track-focus-bg: null !default; -/// The text color of the track when the focused Switch is not checked. -/// @group switch $kendo-switch-off-track-focus-text: null !default; -/// The border color of the track when the focused Switch is not checked. -/// @group switch $kendo-switch-off-track-focus-border: null !default; -/// The background gradient of the track when the focused Switch is not checked. -/// @group switch $kendo-switch-off-track-focus-gradient: null !default; -/// The ring around the track when the focused Switch is not checked. -/// @group switch $kendo-switch-off-track-focus-ring: null !default; -/// The background of the track when the disabled Switch is not checked. -/// @group switch $kendo-switch-off-track-disabled-bg: null !default; -/// The text color of the track when the disabled Switch is not checked. -/// @group switch $kendo-switch-off-track-disabled-text: null !default; -/// The border color of the track when the disabled Switch is not checked. -/// @group switch $kendo-switch-off-track-disabled-border: null !default; -/// The background gradient of the track when the disabled Switch is not checked. -/// @group switch $kendo-switch-off-track-disabled-gradient: null !default; -/// The background of the thumb when the Switch is not checked. -/// @group switch $kendo-switch-off-thumb-bg: null !default; -/// The text color of the thumb when the Switch is not checked. -/// @group switch $kendo-switch-off-thumb-text: null !default; -/// The border color of the thumb when the Switch is not checked. -/// @group switch $kendo-switch-off-thumb-border: null !default; -/// The background gradient of the thumb when the Switch is not checked. -/// @group switch $kendo-switch-off-thumb-gradient: null !default; -/// The background of the thumb when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-thumb-hover-bg: null !default; -/// The text color of the thumb when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-thumb-hover-text: null !default; -/// The border color of the thumb when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-thumb-hover-border: null !default; -/// The background gradient of the thumb when the hovered Switch is not checked. -/// @group switch $kendo-switch-off-thumb-hover-gradient: null !default; -/// The background of the track when the Switch is checked. -/// @group switch $kendo-switch-on-track-bg: null !default; -/// The text color of the track when the Switch is checked. -/// @group switch $kendo-switch-on-track-text: null !default; -/// The border color of the track when the Switch is checked. -/// @group switch $kendo-switch-on-track-border: null !default; -/// The background gradient of the track when the Switch is checked. -/// @group switch $kendo-switch-on-track-gradient: null !default; -/// The background of the track when the hovered Switch is checked. -/// @group switch $kendo-switch-on-track-hover-bg: null !default; -/// The text color of the track when the hovered Switch is checked. -/// @group switch $kendo-switch-on-track-hover-text: null !default; -/// The border color of the track when the hovered Switch is checked. -/// @group switch $kendo-switch-on-track-hover-border: null !default; -/// The background gradient of the track when the hovered Switch is checked. -/// @group switch $kendo-switch-on-track-hover-gradient: null !default; -/// The background of the track when the focused Switch is checked. -/// @group switch $kendo-switch-on-track-focus-bg: null !default; -/// The text color of the track when the focused Switch is checked. -/// @group switch $kendo-switch-on-track-focus-text: null !default; -/// The border color of the track when the focused Switch is checked. -/// @group switch $kendo-switch-on-track-focus-border: null !default; -/// The background gradient of the track when the focused Switch is checked. -/// @group switch $kendo-switch-on-track-focus-gradient: null !default; -/// The ring around the track when the focused Switch is checked. -/// @group switch $kendo-switch-on-track-focus-ring: null !default; -/// The background of the track when the disabled Switch is checked. -/// @group switch $kendo-switch-on-track-disabled-bg: null !default; -/// The text color of the track when the disabled Switch is checked. -/// @group switch $kendo-switch-on-track-disabled-text: null !default; -/// The border color of the track when the disabled Switch is checked. -/// @group switch $kendo-switch-on-track-disabled-border: null !default; -/// The background gradient of the track when the disabled Switch is checked. -/// @group switch $kendo-switch-on-track-disabled-gradient: null !default; -/// The background of the thumb when the Switch is checked. -/// @group switch $kendo-switch-on-thumb-bg: null !default; -/// The text color of the thumb when the Switch is checked. -/// @group switch $kendo-switch-on-thumb-text: null !default; -/// The border color of the thumb when the Switch is checked. -/// @group switch $kendo-switch-on-thumb-border: null !default; -/// The background gradient of the thumb when the Switch is checked. -/// @group switch $kendo-switch-on-thumb-gradient: null !default; -/// The background of the thumb when the hovered Switch is checked. -/// @group switch $kendo-switch-on-thumb-hover-bg: null !default; -/// The text color of the thumb when the hovered Switch is checked. -/// @group switch $kendo-switch-on-thumb-hover-text: null !default; -/// The border color of the thumb when the hovered Switch is checked. -/// @group switch $kendo-switch-on-thumb-hover-border: null !default; -/// The background gradient of the thumb when the hovered Switch is checked. -/// @group switch $kendo-switch-on-thumb-hover-gradient: null !default; diff --git a/packages/core/scss/components/table/_variables.scss b/packages/core/scss/components/table/_variables.scss index d8c30f46d34..c4a3fd82516 100644 --- a/packages/core/scss/components/table/_variables.scss +++ b/packages/core/scss/components/table/_variables.scss @@ -1,29 +1,15 @@ // Table -/// The width of the table border. -/// @group table $kendo-table-border-width: null !default; -/// The width of vertical border of table cells. -/// @group table $kendo-table-cell-vertical-border-width: null !default; -/// The width of horizontal border of table cells. -/// @group table $kendo-table-cell-horizontal-border-width: null !default; -/// The font size of the table if no size is specified. -/// @group table $kendo-table-font-size: null !default; -/// The line-height of the table if no size is specified. -/// @group table $kendo-table-line-height: null !default; -/// The horizontal padding of the cells in the table if no size is specified. -/// @group table $kendo-table-cell-padding-x: null !default; -/// The vertical padding of the cells in the table if no size is specified. -/// @group table $kendo-table-cell-padding-y: null !default; $kendo-table-sm-cell-padding-x: null !default; @@ -35,99 +21,45 @@ $kendo-table-md-cell-padding-y: null !default; $kendo-table-lg-cell-padding-x: null !default; $kendo-table-lg-cell-padding-y: null !default; -/// The sizes of the table. -/// @group table $kendo-table-sizes: null !default; -/// Background color of tables. -/// @group table $kendo-table-bg: null !default; -/// Text color of tables. -/// @group table $kendo-table-text: null !default; -/// Border color of tables. -/// @group table $kendo-table-border: null !default; -/// Background color of table headers. -/// @group table $kendo-table-header-bg: null !default; -/// Text color of table headers. -/// @group table $kendo-table-header-text: null !default; -/// Border color of table headers. -/// @group table $kendo-table-header-border: null !default; -/// Gradient of table headers. -/// @group table $kendo-table-header-gradient: null !default; -/// Background color of table footers. -/// @group table $kendo-table-footer-bg: null !default; -/// Text color of table footers. -/// @group table $kendo-table-footer-text: null !default; -/// Border color of table footers. -/// @group table $kendo-table-footer-border: null !default; -/// Background color of group rows in table. -/// @group table $kendo-table-group-row-bg: null !default; -/// Text color of group rows in table. -/// @group table $kendo-table-group-row-text: null !default; -/// Border color of group rows in table. -/// @group table $kendo-table-group-row-border: null !default; -/// Background color of alternating rows in table. -/// @group table $kendo-table-alt-row-bg: null !default; -/// Text color of alternating rows in table. -/// @group table $kendo-table-alt-row-text: null !default; -/// Border color of alternating rows in table. -/// @group table $kendo-table-alt-row-border: null !default; -/// Background color of hovered rows in table. -/// @group table $kendo-table-hover-bg: null !default; -/// Text color of hovered rows in table. -/// @group table $kendo-table-hover-text: null !default; -/// Border color of hovered rows in table. -/// @group table $kendo-table-hover-border: null !default; -/// Background color of focused rows in table. -/// @group table $kendo-table-focus-bg: null !default; -/// Text color of focused rows in table. -/// @group table $kendo-table-focus-text: null !default; -/// Border color of focused rows in table. -/// @group table $kendo-table-focus-border: null !default; -/// Box shadow of focused rows in table. -/// @group table $kendo-table-focus-shadow: null !default; -/// Background color of selected rows in table. -/// @group table $kendo-table-selected-bg: null !default; -/// Text color of selected rows in table. -/// @group table $kendo-table-selected-text: null !default; -/// Border color of selected rows in table. -/// @group table $kendo-table-selected-border: null !default; diff --git a/packages/core/scss/components/tabstrip/_variables.scss b/packages/core/scss/components/tabstrip/_variables.scss index 2ea1be65e78..97f7fefa632 100644 --- a/packages/core/scss/components/tabstrip/_variables.scss +++ b/packages/core/scss/components/tabstrip/_variables.scss @@ -1,206 +1,82 @@ // TabStrip -/// The horizontal padding of the TabStrip wrapper. -/// @group tabstrip $kendo-tabstrip-wrapper-padding-x: null !default; -/// The vertical padding of the TabStrip wrapper. -/// @group tabstrip $kendo-tabstrip-wrapper-padding-y: null !default; -/// The border width around the TabStrip wrapper. -/// @group tabstrip $kendo-tabstrip-wrapper-border-width: null !default; -/// The font family of the TabStrip. -/// @group tabstrip $kendo-tabstrip-font-family: null !default; -/// The font size of the TabStrip. -/// @group tabstrip $kendo-tabstrip-font-size: null !default; -/// The line height of the TabStrip. -/// @group tabstrip $kendo-tabstrip-line-height: null !default; -/// The border width around the TabStrip. -/// @group tabstrip $kendo-tabstrip-border-width: null !default; -/// The font size of the small TabStrip. -/// @group tabstrip $kendo-tabstrip-sm-font-size: null !default; -/// The line height of the small TabStrip. -/// @group tabstrip $kendo-tabstrip-sm-line-height: null !default; -/// The font size of the medium TabStrip. -/// @group tabstrip $kendo-tabstrip-md-font-size: null !default; -/// The line height of the medium TabStrip. -/// @group tabstrip $kendo-tabstrip-md-line-height: null !default; -/// The font size of the large TabStrip. -/// @group tabstrip $kendo-tabstrip-lg-font-size: null !default; -/// The line height of the large TabStrip. -/// @group tabstrip $kendo-tabstrip-lg-line-height: null !default; -/// The background color of the TabStrip wrapper. -/// @group tabstrip $kendo-tabstrip-wrapper-bg: null !default; -/// The text color of the TabStrip wrapper. -/// @group tabstrip $kendo-tabstrip-wrapper-text: null !default; -/// The border color of the TabStrip wrapper. -/// @group tabstrip $kendo-tabstrip-wrapper-border: null !default; -/// The background color of the TabStrip. -/// @group tabstrip $kendo-tabstrip-bg: null !default; -/// The text color of the TabStrip. -/// @group tabstrip $kendo-tabstrip-text: null !default; -/// The border color of the TabStrip. -/// @group tabstrip $kendo-tabstrip-border: null !default; -/// The horizontal padding of the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-padding-x: null !default; -/// The vertical padding of the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-padding-y: null !default; -/// The border width around the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-border-width: null !default; -/// The border radius of the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-border-radius: null !default; -/// The gap between the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-gap: null !default; -/// The horizontal padding of the small TabStrip items. -/// @group tabstrip $kendo-tabstrip-sm-item-padding-x: null !default; -/// The vertical padding of the small TabStrip items. -/// @group tabstrip $kendo-tabstrip-sm-item-padding-y: null !default; -/// The horizontal padding of the medium TabStrip items. -/// @group tabstrip $kendo-tabstrip-md-item-padding-x: null !default; -/// The vertical padding of the medium TabStrip items. -/// @group tabstrip $kendo-tabstrip-md-item-padding-y: null !default; -/// The horizontal padding of the large TabStrip items. -/// @group tabstrip $kendo-tabstrip-lg-item-padding-x: null !default; -/// The vertical padding of the large TabStrip items. -/// @group tabstrip $kendo-tabstrip-lg-item-padding-y: null !default; -/// The background color of the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-bg: null !default; -/// The text color of the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-text: null !default; -/// The border color of the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-border: null !default; -/// The gradient of the TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-gradient: null !default; -/// The background color of the hovered TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-hover-bg: null !default; -/// The text color of the hovered TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-hover-text: null !default; -/// The border color of the hovered TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-hover-border: null !default; -/// The gradient of the hovered TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-hover-gradient: null !default; -/// The background color of the selected TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-selected-bg: null !default; -/// The text color of the selected TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-selected-text: null !default; -/// The border color of the selected TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-selected-border: null !default; -/// The gradient of the selected TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-selected-gradient: null !default; -/// The font weight of the selected TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-selected-font-weight: null !default; -/// The shadow of the focused TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-focus-shadow: null !default; -/// The shadow of the dragged TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-dragging-shadow: null !default; -/// The background color of the disabled TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-disabled-bg: null !default; -/// The text color of the disabled TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-disabled-text: null !default; -/// The border color of the disabled TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-disabled-border: null !default; -/// The gradient of the disabled TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-disabled-gradient: null !default; -/// The opacity of the disabled TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-disabled-opacity: null !default; -/// The filter of the disabled TabStrip items. -/// @group tabstrip $kendo-tabstrip-item-disabled-filter: null !default; -/// The border width of the TabStrip indicator. -/// @group tabstrip $kendo-tabstrip-indicator-size: null !default; -/// The border color of the TabStrip ripple. -/// @group tabstrip $kendo-tabstrip-indicator-color: null !default; -/// The horizontal padding of the TabStrip content. -/// @group tabstrip $kendo-tabstrip-content-padding-x: null !default; -/// The vertical padding of the TabStrip content. -/// @group tabstrip $kendo-tabstrip-content-padding-y: null !default; -/// The border width around the TabStrip content. -/// @group tabstrip $kendo-tabstrip-content-border-width: null !default; -/// The background color of the TabStrip content. -/// @group tabstrip $kendo-tabstrip-content-bg: null !default; -/// The text color of the TabStrip content. -/// @group tabstrip $kendo-tabstrip-content-text: null !default; -/// The border color of the TabStrip content. -/// @group tabstrip $kendo-tabstrip-content-border: null !default; -/// The border color of the focused TabStrip content. -/// @group tabstrip $kendo-tabstrip-content-focus-border: null !default; -/// The left and right scroll overlay of the TabStrip. -/// @group tabstrip $kendo-tabstrip-scroll-overlay: null !default; -/// The size map of the TabStrip. -/// @group tabstrip $kendo-tabstrip-sizes: null !default; diff --git a/packages/core/scss/components/taskboard/_variables.scss b/packages/core/scss/components/taskboard/_variables.scss index 93b6bfab316..01a6419852b 100644 --- a/packages/core/scss/components/taskboard/_variables.scss +++ b/packages/core/scss/components/taskboard/_variables.scss @@ -1,245 +1,95 @@ // TaskBoard -/// The spacing index of the TaskBoard. -/// @group taskboard $kendo-taskboard-spacer: null !default; -/// The vertical padding of the TaskBoard. -/// @group taskboard $kendo-taskboard-padding-y: null !default; -/// The horizontal of the TaskBoard. -/// @group taskboard $kendo-taskboard-padding-x: null !default; -/// The font family of the TaskBoard. -/// @group taskboard $kendo-taskboard-font-family: null !default; -/// The font size of the TaskBoard. -/// @group taskboard $kendo-taskboard-font-size: null !default; -/// The line height of the TaskBoard. -/// @group taskboard $kendo-taskboard-line-height: null !default; -/// The background color of the TaskBoard. -/// @group taskboard $kendo-taskboard-bg: null !default; -/// The text color of the TaskBoard. -/// @group taskboard $kendo-taskboard-text: null !default; -/// The border color of the TaskBoard. -/// @group taskboard $kendo-taskboard-border: null !default; -/// The vertical padding of the TaskBoard Toolbar. -/// @group taskboard $kendo-taskboard-toolbar-padding-y: null !default; -/// The horizontal padding of the TaskBoard Toolbar. -/// @group taskboard $kendo-taskboard-toolbar-padding-x: null !default; -/// The background color of the TaskBoard Toolbar. -/// @group taskboard $kendo-taskboard-toolbar-bg: null !default; -/// The text color of the TaskBoard Toolbar. -/// @group taskboard $kendo-taskboard-toolbar-text: null !default; -/// The border color of the TaskBoard Toolbar. -/// @group taskboard $kendo-taskboard-toolbar-border: null !default; -/// The gradient of the TaskBoard Toolbar. -/// @group taskboard $kendo-taskboard-toolbar-gradient: null !default; -/// The vertical padding of the TaskBoard content. -/// @group taskboard $kendo-taskboard-content-padding-y: null !default; -/// The horizontal padding of the TaskBoard content. -/// @group taskboard $kendo-taskboard-content-padding-x: null !default; -/// The vertical spacing of the TaskBoard column container. -/// @group taskboard $kendo-taskboard-column-container-spacing-y: null !default; -/// The vertical padding of the TaskBoard column container. -/// @group taskboard $kendo-taskboard-column-container-padding-y: null !default; -/// The horizontal padding of the TaskBoard column container. -/// @group taskboard $kendo-taskboard-column-container-padding-x: null !default; -/// The spacing of the TaskBoard columns container. -/// @group taskboard $kendo-taskboard-columns-container-gap: null !default; -/// The default width of the TaskBoard column. -/// @group taskboard $kendo-taskboard-column-width: null !default; -/// The border width of the TaskBoard column. -/// @group taskboard $kendo-taskboard-column-border-width: null !default; -/// The border radius of the TaskBoard column. -/// @group taskboard $kendo-taskboard-column-border-radius: null !default; -/// The background color of the TaskBoard column. -/// @group taskboard $kendo-taskboard-column-bg: null !default; -/// The text color of the TaskBoard column. -/// @group taskboard $kendo-taskboard-column-text: null !default; -/// The border color of the TaskBoard column. -/// @group taskboard $kendo-taskboard-column-border: null !default; -/// The background color of the focused TaskBoard column. -/// @group taskboard $kendo-taskboard-column-focus-bg: null !default; -/// The text color of the focused TaskBoard column. -/// @group taskboard $kendo-taskboard-column-focus-text: null !default; -/// The border color of the focused TaskBoard column. -/// @group taskboard $kendo-taskboard-column-focus-border: null !default; -/// The vertical padding of the TaskBoard column header. -/// @group taskboard $kendo-taskboard-column-header-padding-y: null !default; -/// The horizontal padding of the TaskBoard column header. -/// @group taskboard $kendo-taskboard-column-header-padding-x: null !default; -/// The spacing of the TaskBoard column header. -/// @group taskboard $kendo-taskboard-column-header-gap: null !default; -/// The spacing of the TaskBoard column header actions. -/// @group taskboard $kendo-taskboard-column-header-actions-gap: null !default; -/// The font weight of the TaskBoard column header. -/// @group taskboard $kendo-taskboard-column-header-font-weight: null !default; -/// The text color of the TaskBoard column header. -/// @group taskboard $kendo-taskboard-column-header-text: null !default; -/// The vertical padding of the TaskBoard column Card wrapper. -/// @group taskboard $kendo-taskboard-column-cards-padding-y: null !default; -/// The horizontal padding of the TaskBoard column Card wrapper. -/// @group taskboard $kendo-taskboard-column-cards-padding-x: null !default; -/// The spacing of the TaskBoard column Card wrapper. -/// @group taskboard $kendo-taskboard-column-cards-gap: null !default; -/// The default width of the TaskBoard pane. -/// @group taskboard $kendo-taskboard-pane-width: null !default; -/// The vertical padding of the TaskBoard pane. -/// @group taskboard $kendo-taskboard-pane-padding-y: null !default; -/// The horizontal padding of the TaskBoard pane. -/// @group taskboard $kendo-taskboard-pane-padding-x: null !default; -/// The border width of the TaskBoard pane. -/// @group taskboard $kendo-taskboard-pane-border-width: null !default; -/// The background color of the TaskBoard pane. -/// @group taskboard $kendo-taskboard-pane-bg: null !default; -/// The text color of the TaskBoard pane. -/// @group taskboard $kendo-taskboard-pane-text: null !default; -/// The border color of the TaskBoard pane. -/// @group taskboard $kendo-taskboard-pane-border: null !default; -/// The vertical padding of the TaskBoard pane header. -/// @group taskboard $kendo-taskboard-pane-header-padding-y: null !default; -/// The horizontal padding of the TaskBoard pane header. -/// @group taskboard $kendo-taskboard-pane-header-padding-x: null !default; -/// The font weight of the TaskBoard pane header. -/// @group taskboard $kendo-taskboard-pane-header-font-weight: null !default; -/// The text color of the TaskBoard pane header. -/// @group taskboard $kendo-taskboard-pane-header-text: null !default; -/// The vertical padding of the TaskBoard pane content. -/// @group taskboard $kendo-taskboard-pane-content-padding-y: null !default; -/// The horizontal padding of the TaskBoard pane content. -/// @group taskboard $kendo-taskboard-pane-content-padding-x: null !default; -/// The vertical padding of the TaskBoard pane actions. -/// @group taskboard $kendo-taskboard-pane-actions-padding-y: null !default; -/// The horizontal padding of the TaskBoard pane actions. -/// @group taskboard $kendo-taskboard-pane-actions-padding-x: null !default; -/// The vertical padding of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-padding-y: null !default; -/// The horizontal padding of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-padding-x: null !default; -/// The border width of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-border-width: null !default; -/// The border radius of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-border-radius: null !default; -/// The shadow of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-shadow: null !default; -/// The background color of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-bg: null !default; -/// The text color of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-text: null !default; -/// The border color of the TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-border: null !default; -/// The border width of the TaskBoard Card category. -/// @group taskboard $kendo-taskboard-card-category-border-width: null !default; -/// The border color of the hovered TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-hover-border: null !default; -/// The border color of the focused TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-focus-border: null !default; -/// The shadow of the focused TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-focus-shadow: null !default; -/// The border of the selected TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-selected-border: null !default; -/// The shadow of the selected TaskBoard Card. -/// @group taskboard $kendo-taskboard-card-selected-shadow: null !default; -/// The text color of the TaskBoard Card header text. -/// @group taskboard $kendo-taskboard-card-header-text: null !default; -/// The text color of the hovered TaskBoard Card header text. -/// @group taskboard $kendo-taskboard-card-header-hover-text: null !default; -/// The text color of the focused TaskBoard Card header text. -/// @group taskboard $kendo-taskboard-card-header-focus-text: null !default; -/// The border width of the TaskBoard Card placeholder. -/// @group taskboard $kendo-taskboard-drag-placeholder-border-width: null !default; -/// The border radius of the TaskBoard Card placeholder. -/// @group taskboard $kendo-taskboard-drag-placeholder-border-radius: null !default; -/// The background color of the TaskBoard Card placeholder. -/// @group taskboard $kendo-taskboard-drag-placeholder-bg: null !default; -/// The border color of the TaskBoard Card placeholder. -/// @group taskboard $kendo-taskboard-drag-placeholder-border: null !default; diff --git a/packages/core/scss/components/tilelayout/_variables.scss b/packages/core/scss/components/tilelayout/_variables.scss index 6373aed5b97..2d57ba35faa 100644 --- a/packages/core/scss/components/tilelayout/_variables.scss +++ b/packages/core/scss/components/tilelayout/_variables.scss @@ -1,38 +1,18 @@ // TileLayout -/// The width of the border around the TileLayout. -/// @group tile-layout $kendo-tile-layout-border-width: null !default; -/// The background color of the TileLayout. -/// @group tile-layout $kendo-tile-layout-bg: null !default; -/// The horizontal padding of the TileLayout. -/// @group tile-layout $kendo-tile-layout-padding-x: null !default; -/// The vertical padding of the TileLayout -/// @group tile-layout $kendo-tile-layout-padding-y: null !default; -/// The width of the border around the TileLayout card. -/// @group tile-layout $kendo-tile-layout-card-border-width: null !default; -/// The focus box shadow of the TileLayout card. -/// @group tile-layout $kendo-tile-layout-card-focus-shadow: null !default; -/// The width of the border around the TileLayout hint. -/// @group tile-layout $kendo-tile-layout-hint-border-width: null !default; -/// The radius of the border around the TileLayout hint. -/// @group tile-layout $kendo-tile-layout-hint-border-radius: null !default; -/// The color of the border around the TileLayout hint. -/// @group tile-layout $kendo-tile-layout-hint-border: null !default; -/// The background color of the TileLayout hint. -/// @group tile-layout $kendo-tile-layout-hint-bg: null !default; diff --git a/packages/core/scss/components/time-marker/_variables.scss b/packages/core/scss/components/time-marker/_variables.scss index a9f095e22f9..853c1fd497f 100644 --- a/packages/core/scss/components/time-marker/_variables.scss +++ b/packages/core/scss/components/time-marker/_variables.scss @@ -1,6 +1,2 @@ -/// The border width of the current time indicator. -/// @group time-marker $kendo-current-time-width: null !default; -/// The color of the current time indicator. -/// @group time-marker $kendo-current-time-color: null !default; diff --git a/packages/core/scss/components/timeline/_variables.scss b/packages/core/scss/components/timeline/_variables.scss index bebc3728df2..d88810b9e94 100644 --- a/packages/core/scss/components/timeline/_variables.scss +++ b/packages/core/scss/components/timeline/_variables.scss @@ -1,167 +1,67 @@ // Timeline -/// The horizontal spacing of the Timeline. -/// @group timeline $kendo-timeline-spacing-x: null !default; -/// The vertical spacing of the Timeline. -/// @group timeline $kendo-timeline-spacing-y: null !default; -/// The padding between the Timeline's track items. -/// @group timeline $kendo-timeline-items-padding: null !default; -/// The font family of the Timeline. -/// @group timeline $kendo-timeline-font-family: null !default; -/// The font size of the Timeline. -/// @group timeline $kendo-timeline-font-size: null !default; -/// The line height of the Timeline. -/// @group timeline $kendo-timeline-line-height: null !default; -/// The horizontal spacing of the mobile Timeline. -/// @group timeline $kendo-timeline-mobile-spacing-x: null !default; -/// The vertical spacing of the mobile Timeline. -/// @group timeline $kendo-timeline-mobile-spacing-y: null !default; -/// The width of the Timeline track arrow. -/// @group timeline $kendo-timeline-track-arrow-width: null !default; -/// The height of the Timeline track arrow. -/// @group timeline $kendo-timeline-track-arrow-height: null !default; -/// The background color of the disabled Timeline track arrow. -/// @group timeline $kendo-timeline-track-arrow-disabled-bg: null !default; -/// The text color of the disabled Timeline track arrow. -/// @group timeline $kendo-timeline-track-arrow-disabled-text: null !default; -/// The border color of the disabled Timeline track arrow. -/// @group timeline $kendo-timeline-track-arrow-disabled-border: null !default; -/// The size of the Timeline track. -/// @group timeline $kendo-timeline-track-size: null !default; -/// The bottom padding of the Timeline's track wrapper. -/// @group timeline $kendo-timeline-track-wrap-padding-bottom: null !default; -/// The border width of the Timeline track. -/// @group timeline $kendo-timeline-track-border-width: null !default; -/// The bottom margin of the Timeline track. -/// @group timeline $kendo-timeline-track-margin-bottom: null !default; -/// The bottom offset of the Timeline track. -/// @group timeline $kendo-timeline-track-bottom-calc: null !default; -/// The left offset of the Timeline track. -/// @group timeline $kendo-timeline-track-start-calc: null !default; -/// The right offset of the Timeline track. -/// @group timeline $kendo-timeline-track-end-calc: null !default; -/// The background color of the Timeline track. -/// @group timeline $kendo-timeline-track-bg: null !default; -/// The border color of the Timeline track. -/// @group timeline $kendo-timeline-track-border-color: null !default; -/// The shadow of the Timeline's focused track items. -/// @group timeline $kendo-timeline-track-item-focus-shadow: null !default; -/// The offset of the Timeline track event. -/// @group timeline $kendo-timeline-track-event-offset: null !default; -/// The horizontal padding of the Timeline flag. -/// @group timeline $kendo-timeline-flag-padding-x: null !default; -/// The vertical padding of the Timeline flag. -/// @group timeline $kendo-timeline-flag-padding-y: null !default; -/// The line height of the Timeline flag. -/// @group timeline $kendo-timeline-flag-line-height: null !default; -/// The minimum width of the Timeline flag. -/// @group timeline $kendo-timeline-flag-min-width: null !default; -/// The maximum width of the Timeline flag. -/// @group timeline $kendo-timeline-flag-max-width: null !default; -/// The maximum width of the mobile Timeline flag. -/// @group timeline $kendo-timeline-mobile-flag-max-width: null !default; -/// The minimum width of the horizontal Timeline flag. -/// @group timeline $kendo-timeline-horizontal-flag-min-width: null !default; -/// The background color of the Timeline flag. -/// @group timeline $kendo-timeline-flag-bg: null !default; -/// The text color of the Timeline flag. -/// @group timeline $kendo-timeline-flag-text: null !default; -/// The width of the Timeline's flag callout. -/// @group timeline $kendo-timeline-flag-callout-width: null !default; -/// The height of the Timeline's flag callout. -/// @group timeline $kendo-timeline-flag-callout-height: null !default; -/// The bottom offset of the Timeline flag. -/// @group timeline $kendo-timeline-flag-offset-bottom: null !default; -/// The bottom margin of the Timeline flag. -/// @group timeline $kendo-timeline-flag-margin-bottom-calc: null !default; -/// The width of the Timeline date. -/// @group timeline $kendo-timeline-date-width: null !default; -/// The bottom margin of the Timeline date. -/// @group timeline $kendo-timeline-date-margin-bottom: null !default; -/// The padding of the vertical Timeline. -/// @group timeline $kendo-timeline-vertical-padding-calc: null !default; -/// The padding of the vertical Timeline date. -/// @group timeline $kendo-timeline-vertical-padding-with-dates-calc: null !default; -/// The padding of the vertical mobile Timeline. -/// @group timeline $kendo-timeline-mobile-vertical-padding-calc: null !default; -/// The padding of the vertical mobile Timeline date. -/// @group timeline $kendo-timeline-mobile-vertical-padding-with-dates-calc: null !default; -/// The width of the Timeline circle. -/// @group timeline $kendo-timeline-circle-width: null !default; -/// The height of the Timeline circle. -/// @group timeline $kendo-timeline-circle-height: null !default; -/// The background color of the Timeline circle. -/// @group timeline $kendo-timeline-circle-bg: null !default; -/// The horizontal padding of the Timeline collapse arrow. -/// @group timeline $kendo-timeline-collapse-arrow-padding-x: null !default; -/// The width of the Timeline event. -/// @group timeline $kendo-timeline-event-width: null !default; -/// The height of the Timeline event. -/// @group timeline $kendo-timeline-event-height: null !default; -/// The minimum height of the Timeline event. -/// @group timeline $kendo-timeline-event-min-height-calc: null !default; diff --git a/packages/core/scss/components/toolbar/_variables.scss b/packages/core/scss/components/toolbar/_variables.scss index 8c8c4933032..9365b04e04c 100644 --- a/packages/core/scss/components/toolbar/_variables.scss +++ b/packages/core/scss/components/toolbar/_variables.scss @@ -1,156 +1,62 @@ // Toolbar -/// The horizontal padding of the Toolbar. -/// @group toolbar $kendo-toolbar-padding-x: null !default; -/// The horizontal padding of the small Toolbar. -/// @group toolbar $kendo-toolbar-sm-padding-x: null !default; -/// The horizontal padding of the medium Toolbar. -/// @group toolbar $kendo-toolbar-md-padding-x: null !default; -/// The horizontal padding of the large Toolbar. -/// @group toolbar $kendo-toolbar-lg-padding-x: null !default; -/// The vertical padding of the Toolbar. -/// @group toolbar $kendo-toolbar-padding-y: null !default; -/// The vertical padding of the small Toolbar. -/// @group toolbar $kendo-toolbar-sm-padding-y: null !default; -/// The vertical padding of the medium Toolbar. -/// @group toolbar $kendo-toolbar-md-padding-y: null !default; -/// The vertical padding of the large Toolbar. -/// @group toolbar $kendo-toolbar-lg-padding-y: null !default; -/// The spacing between the Toolbar tools. -/// @group toolbar $kendo-toolbar-spacing: null !default; -/// The spacing between the tools of the small Toolbar. -/// @group toolbar $kendo-toolbar-sm-spacing: null !default; -/// The spacing between the tools of the medium Toolbar. -/// @group toolbar $kendo-toolbar-md-spacing: null !default; -/// The spacing between the tools of the large Toolbar. -/// @group toolbar $kendo-toolbar-lg-spacing: null !default; -/// The height of the Toolbar button separator. -/// @group toolbar $kendo-toolbar-separator-height: null !default; -/// The height of the small Toolbar button separator. -/// @group toolbar $kendo-toolbar-sm-separator-height: null !default; -/// The height of the medium Toolbar button separator. -/// @group toolbar $kendo-toolbar-md-separator-height: null !default; -/// The height of the large Toolbar button separator. -/// @group toolbar $kendo-toolbar-lg-separator-height: null !default; -/// The width of the border around the Toolbar. -/// @group toolbar $kendo-toolbar-border-width: null !default; -/// The border radius of the Toolbar. -/// @group toolbar $kendo-toolbar-border-radius: null !default; -/// The font family of the Toolbar. -/// @group toolbar $kendo-toolbar-font-family: null !default; -/// The font size of the Toolbar. -/// @group toolbar $kendo-toolbar-font-size: null !default; -/// The line height of the Toolbar. -/// @group toolbar $kendo-toolbar-line-height: null !default; -/// The background color of the Toolbar. -/// @group toolbar $kendo-toolbar-bg: null !default; -/// The text color of the Toolbar. -/// @group toolbar $kendo-toolbar-text: null !default; -/// The color of the border around the Toolbar. -/// @group toolbar $kendo-toolbar-border: null !default; -/// The gradient of the Toolbar. -/// @group toolbar $kendo-toolbar-gradient: null !default; -/// The box shadow of the Toolbar. -/// @group toolbar $kendo-toolbar-shadow: null !default; -/// The left and right scroll overlay of the Toolbar. -/// @group toolbar $kendo-toolbar-scroll-overlay: null !default; -/// The text color of the outline Toolbar. -/// @group toolbar $kendo-toolbar-outline-text: null !default; -/// The color of the border around the outline Toolbar. -/// @group toolbar $kendo-toolbar-outline-border: null !default; -/// The gradient of the outline Toolbar. -/// @group toolbar $kendo-toolbar-outline-gradient: null !default; -/// The box shadow of the outline Toolbar. -/// @group toolbar $kendo-toolbar-outline-shadow: null !default; -/// The width of the border around the outline Toolbar. -/// @group toolbar $kendo-toolbar-outline-border-width: null !default; -/// The left and right scroll overlay of the outline Toolbar. -/// @group toolbar $kendo-toolbar-outline-scroll-overlay: null !default; -/// The text color of the flat Toolbar. -/// @group toolbar $kendo-toolbar-flat-text: null !default; -/// The color of the border around the flat Toolbar. -/// @group toolbar $kendo-toolbar-flat-border: null !default; -/// The gradient of the flat Toolbar. -/// @group toolbar $kendo-toolbar-flat-gradient: null !default; -/// The box shadow of the flat Toolbar. -/// @group toolbar $kendo-toolbar-flat-shadow: null !default; -/// Border width of the flat Toolbar. -/// @group toolbar $kendo-toolbar-flat-border-width: null !default; -/// The left and right scroll overlay of the flat Toolbar. -/// @group toolbar $kendo-toolbar-flat-scroll-overlay: null !default; -/// The color of the separator border of the Toolbar. -/// @group toolbar $kendo-toolbar-separator-border: null !default; -/// The width of the input in the Toolbar. -/// @group toolbar $kendo-toolbar-input-width: null !default; -/// The box shadow of the focused Toolbar item. -/// @group toolbar $kendo-toolbar-item-shadow: null !default; -/// The font size of the Toolbar overflow container. -/// @group toolbar $kendo-toolbar-overflow-container-font-size: null !default; -/// The line-height of the Toolbar overflow container. -/// @group toolbar $kendo-toolbar-overflow-container-line-height: null !default; -/// The vertical padding of the Toolbar overflow button. -/// @group toolbar $kendo-toolbar-overflow-button-padding-y: null !default; -/// The horizontal padding of the Toolbar overflow button. -/// @group toolbar $kendo-toolbar-overflow-button-padding-x: null !default; -/// The sizes map for the Toolbar. -/// @group toolbar $kendo-toolbar-sizes: null !default; diff --git a/packages/core/scss/components/tooltip/_variables.scss b/packages/core/scss/components/tooltip/_variables.scss index 7e03a1c91c3..59af87ddc70 100644 --- a/packages/core/scss/components/tooltip/_variables.scss +++ b/packages/core/scss/components/tooltip/_variables.scss @@ -1,51 +1,23 @@ // Tooltip -/// The vertical padding of the Tooltip. -/// @group tooltip $kendo-tooltip-padding-y: null !default; -/// The horizontal padding of the Tooltip. -/// @group tooltip $kendo-tooltip-padding-x: null !default; -/// The width of the border around the Tooltip. -/// @group tooltip $kendo-tooltip-border-width: null !default; -/// The border radius of the Tooltip. -/// @group tooltip $kendo-tooltip-border-radius: null !default; -/// The font family of the Tooltip. -/// @group tooltip $kendo-tooltip-font-family: null !default; -/// The font size of the Tooltip. -/// @group tooltip $kendo-tooltip-font-size: null !default; -/// The line height of the Tooltip. -/// @group tooltip $kendo-tooltip-line-height: null !default; -/// The font size of the Tooltip title. -/// @group tooltip $kendo-tooltip-title-font-size: null !default; -/// The line height of the Tooltip title. -/// @group tooltip $kendo-tooltip-title-line-height: null !default; -/// The size of the Tooltip callout. -/// @group tooltip $kendo-tooltip-callout-size: null !default; -/// The default background of the Tooltip. -/// @group tooltip $kendo-tooltip-bg: null !default; -/// The default text color of the Tooltip. -/// @group tooltip $kendo-tooltip-text: null !default; -/// The default border color of the Tooltip. -/// @group tooltip $kendo-tooltip-border: null !default; -/// The box-shadow of the Tooltip. -/// @group tooltip $kendo-tooltip-shadow: null !default; @function tooltip-theme( $colors ) { @@ -62,9 +34,5 @@ $kendo-tooltip-shadow: null !default; @return $_theme; } -/// The theme colors map for the Tooltip. -/// @group tooltip $kendo-tooltip-theme-colors: null !default; -/// The generated theme colors map for the Tooltip. -/// @group tooltip $kendo-tooltip-theme: null !default; diff --git a/packages/core/scss/components/treelist/_variables.scss b/packages/core/scss/components/treelist/_variables.scss index e6a9b1bc96a..95a9bd160ff 100644 --- a/packages/core/scss/components/treelist/_variables.scss +++ b/packages/core/scss/components/treelist/_variables.scss @@ -1,8 +1,4 @@ // Treelist -/// The background color of the TreeList footer row. -/// @group treelist $kendo-treelist-footer-row-bg: null !default; -/// The border width of the TreeList footer row. -/// @group treelist $kendo-treelist-footer-row-border-width: null !default; diff --git a/packages/core/scss/components/treeview/_variables.scss b/packages/core/scss/components/treeview/_variables.scss index e15c631090a..6ddfdd74bf9 100644 --- a/packages/core/scss/components/treeview/_variables.scss +++ b/packages/core/scss/components/treeview/_variables.scss @@ -1,162 +1,64 @@ // TreeView -/// The font family of the TreeView. -/// @group treeview $kendo-treeview-font-family: null !default; -/// The font size of the TreeView. -/// @group treeview $kendo-treeview-font-size: null !default; -/// The font size of the small TreeView. -/// @group treeview $kendo-treeview-sm-font-size: null !default; -/// The font size of the medium TreeView. -/// @group treeview $kendo-treeview-md-font-size: null !default; -/// The font size of the large TreeView. -/// @group treeview $kendo-treeview-lg-font-size: null !default; -/// The line height of the TreeView. -/// @group treeview $kendo-treeview-line-height: null !default; -/// The line height of the small TreeView. -/// @group treeview $kendo-treeview-sm-line-height: null !default; -/// The line height of the medium TreeView. -/// @group treeview $kendo-treeview-md-line-height: null !default; -/// The line height of the large TreeView. -/// @group treeview $kendo-treeview-lg-line-height: null !default; -/// The indentation of child groups in the TreeView. -/// @group treeview $kendo-treeview-indent: null !default; -/// The horizontal padding of the TreeView items. -/// @group treeview $kendo-treeview-item-padding-x: null !default; -/// The horizontal padding of the small TreeView items. -/// @group treeview $kendo-treeview-sm-item-padding-x: null !default; -/// The horizontal padding of the medium TreeView items. -/// @group treeview $kendo-treeview-md-item-padding-x: null !default; -/// The horizontal padding of the large TreeView items. -/// @group treeview $kendo-treeview-lg-item-padding-x: null !default; -/// The vertical padding of the TreeView items. -/// @group treeview $kendo-treeview-item-padding-y: null !default; -/// The vertical padding of the small TreeView items. -/// @group treeview $kendo-treeview-sm-item-padding-y: null !default; -/// The vertical padding of the medium TreeView items. -/// @group treeview $kendo-treeview-md-item-padding-y: null !default; -/// The vertical padding of the large TreeView items. -/// @group treeview $kendo-treeview-lg-item-padding-y: null !default; -/// The border width of the TreeView items. -/// @group treeview $kendo-treeview-item-border-width: null !default; -/// The border radius of the TreeView items. -/// @group treeview $kendo-treeview-item-border-radius: null !default; -/// The horizontal padding of the checkbox in the small TreeView. -/// @group treeview $kendo-treeview-sm-checkbox-padding-x: null !default; -/// The horizontal padding of the checkbox in the medium TreeView. -/// @group treeview $kendo-treeview-md-checkbox-padding-x: null !default; -/// The horizontal padding of the checkbox in the large TreeView. -/// @group treeview $kendo-treeview-lg-checkbox-padding-x: null !default; -/// The vertical padding of the checkbox in the small TreeView. -/// @group treeview $kendo-treeview-sm-checkbox-padding-y: null !default; -/// The vertical padding of the checkbox in the medium TreeView. -/// @group treeview $kendo-treeview-md-checkbox-padding-y: null !default; -/// The vertical padding of the checkbox in the large TreeView. -/// @group treeview $kendo-treeview-lg-checkbox-padding-y: null !default; -/// The sizes map of the TreeView. -/// @group treeview $kendo-treeview-sizes: null !default; -/// The background color of the TreeView. -/// @group treeview $kendo-treeview-bg: null !default; -/// The text color of the TreeView. -/// @group treeview $kendo-treeview-text: null !default; -/// The border color of the TreeView. -/// @group treeview $kendo-treeview-border: null !default; -/// The background color of hovered TreeView items. -/// @group treeview $kendo-treeview-item-hover-bg: null !default; -/// The text color of hovered TreeView items. -/// @group treeview $kendo-treeview-item-hover-text: null !default; -/// The border color of hovered TreeView items. -/// @group treeview $kendo-treeview-item-hover-border: null !default; -/// The background gradient of hovered TreeView items. -/// @group treeview $kendo-treeview-item-hover-gradient: null !default; -/// The background color of selected TreeView items. -/// @group treeview $kendo-treeview-item-selected-bg: null !default; -/// The text color of selected TreeView items. -/// @group treeview $kendo-treeview-item-selected-text: null !default; -/// The border color of selected TreeView items. -/// @group treeview $kendo-treeview-item-selected-border: null !default; -/// The background gradient of selected TreeView items. -/// @group treeview $kendo-treeview-item-selected-gradient: null !default; -/// The box shadow of focused TreeView items. -/// @group treeview $kendo-treeview-item-focus-shadow: null !default; -/// The background color of the Load More button in the TreeView -/// @group treeview $kendo-treeview-loadmore-bg: null !default; -/// The text color of the Load More button in the TreeView -/// @group treeview $kendo-treeview-loadmore-text: null !default; -/// The border color of the Load More button in the TreeView -/// @group treeview $kendo-treeview-loadmore-border: null !default; -/// The background color of the hovered Load More button in the TreeView -/// @group treeview $kendo-treeview-loadmore-hover-bg: null !default; -/// The text color of the hovered Load More button in the TreeView. -/// @group treeview $kendo-treeview-loadmore-hover-text: null !default; -/// The border color of the hovered Load More button in the TreeView. -/// @group treeview $kendo-treeview-loadmore-hover-border: null !default; -/// The background color of the focused Load More button in the TreeView. -/// @group treeview $kendo-treeview-loadmore-focus-bg: null !default; -/// The text color of the focused Load More button in the TreeView. -/// @group treeview $kendo-treeview-loadmore-focus-text: null !default; -/// The border color of the focused Load More button in the TreeView. -/// @group treeview $kendo-treeview-loadmore-focus-border: null !default; -/// The box shadow of the focused Load More button in the TreeView. -/// @group treeview $kendo-treeview-loadmore-focus-shadow: null !default; diff --git a/packages/core/scss/components/typography/_variables.scss b/packages/core/scss/components/typography/_variables.scss index b1784d0cab7..22c21c9982a 100644 --- a/packages/core/scss/components/typography/_variables.scss +++ b/packages/core/scss/components/typography/_variables.scss @@ -3,257 +3,104 @@ // Headings -/// The font size of the highest level heading. -/// @group typography $kendo-h1-font-size: null !default; -/// The font size of the second highest level heading. -/// @group typography $kendo-h2-font-size: null !default; -/// The font size of the third highest level heading. -/// @group typography $kendo-h3-font-size: null !default; -/// The font size of the fourth highest level heading. -/// @group typography $kendo-h4-font-size: null !default; -/// The font size of the fifth highest level heading. -/// @group typography $kendo-h5-font-size: null !default; -/// The font size of the sixth highest level heading. -/// @group typography $kendo-h6-font-size: null !default; -/// The font family of the highest level heading. -/// @group typography $kendo-h1-font-family: null !default; -/// The font family of the second highest level heading. -/// @group typography $kendo-h2-font-family: null !default; -/// The font family of the third highest level heading. -/// @group typography $kendo-h3-font-family: null !default; -/// The font family of the fourth highest level heading. -/// @group typography $kendo-h4-font-family: null !default; -/// The font family of the fifth highest level heading. -/// @group typography $kendo-h5-font-family: null !default; -/// The font family of the sixth highest level heading. -/// @group typography $kendo-h6-font-family: null !default; -/// The line height of the highest level heading. -/// @group typography $kendo-h1-line-height: null !default; -/// The line height of the second highest level heading. -/// @group typography $kendo-h2-line-height: null !default; -/// The line height of the third highest level heading. -/// @group typography $kendo-h3-line-height: null !default; -/// The line height of the fourth highest level heading. -/// @group typography $kendo-h4-line-height: null !default; -/// The line height of the fifth highest level heading. -/// @group typography $kendo-h5-line-height: null !default; -/// The line height of the sixth highest level heading. -/// @group typography $kendo-h6-line-height: null !default; -/// The font weight of the highest level heading. -/// @group typography $kendo-h1-font-weight: null !default; -/// The font weight of the second highest level heading. -/// @group typography $kendo-h2-font-weight: null !default; -/// The font weight of the third highest level heading. -/// @group typography $kendo-h3-font-weight: null !default; -/// The font weight of the fourth highest level heading. -/// @group typography $kendo-h4-font-weight: null !default; -/// The font weight of the fifth highest level heading. -/// @group typography $kendo-h5-font-weight: null !default; -/// The font weight of the sixth highest level heading. -/// @group typography $kendo-h6-font-weight: null !default; -/// The letter spacing of the highest level heading. -/// @group typography $kendo-h1-letter-spacing: null !default; -/// The letter spacing of the second highest level heading. -/// @group typography $kendo-h2-letter-spacing: null !default; -/// The letter spacing of the third highest level heading. -/// @group typography $kendo-h3-letter-spacing: null !default; -/// The letter spacing of the fourth highest level heading. -/// @group typography $kendo-h4-letter-spacing: null !default; -/// The letter spacing of the fifth highest level heading. -/// @group typography $kendo-h5-letter-spacing: null !default; -/// The letter spacing of the sixth highest level heading. -/// @group typography $kendo-h6-letter-spacing: null !default; -/// The margin of the highest level heading. -/// @group typography $kendo-h1-margin: null !default; -/// The margin of the second highest level heading. -/// @group typography $kendo-h2-margin: null !default; -/// The margin of the third highest level heading. -/// @group typography $kendo-h3-margin: null !default; -/// The margin of the fourth highest level heading. -/// @group typography $kendo-h4-margin: null !default; -/// The margin of the fifth highest level heading. -/// @group typography $kendo-h5-margin: null !default; -/// The margin of the sixth highest level heading. -/// @group typography $kendo-h6-margin: null !default; -/// The headings Map. -/// @group typography $kendo-headings: null !default; // Paragraph -/// The margin of the paragraph. -/// @group typography $kendo-paragraph-margin: null !default; -/// The font size of the paragraph. -/// @group typography $kendo-paragraph-font-size: null !default; -/// The font family of the paragraph. -/// @group typography $kendo-paragraph-font-family: null !default; -/// The line height of the paragraph. -/// @group typography $kendo-paragraph-line-height: null !default; -/// The font weight of the paragraph. -/// @group typography $kendo-paragraph-font-weight: null !default; -/// The letter spacing of the paragraph. -/// @group typography $kendo-paragraph-letter-spacing: null !default; // Code -/// The font size of the code tag. -/// @group typography $kendo-code-font-size: null !default; -/// The font family of the code tag. -/// @group typography $kendo-code-font-family: null !default; -/// The line height of the code tag. -/// @group typography $kendo-code-line-height: null !default; -/// The font weight of the code tag. -/// @group typography $kendo-code-font-weight: null !default; -/// The letter spacing of the code tag. -/// @group typography $kendo-code-letter-spacing: null !default; -/// The horizontal padding of the code tag. -/// @group typography $kendo-code-padding-x: null !default; -/// The vertical padding of the code tag. -/// @group typography $kendo-code-padding-y: null !default; -/// The horizontal padding of the preformatted text. -/// @group typography $kendo-pre-padding-x: null !default; -/// The vertical padding of the preformatted text. -/// @group typography $kendo-pre-padding-y: null !default; -/// The width of the border of the code tag. -/// @group typography $kendo-code-border-width: null !default; -/// The background color of the code tag. -/// @group typography $kendo-code-bg: null !default; -/// The color of the code tag. -/// @group typography $kendo-code-text: null !default; -/// The border color of the code tag. -/// @group typography $kendo-code-border: null !default; // Display -/// The font size of the largest display text. -/// @group typography $kendo-display1-font-size: null !default; -/// The font size of the second largest display text. -/// @group typography $kendo-display2-font-size: null !default; -/// The font size of the third largest display text. -/// @group typography $kendo-display3-font-size: null !default; -/// The font size of the fourth largest display text. -/// @group typography $kendo-display4-font-size: null !default; -/// The font family of the largest display text. -/// @group typography $kendo-display1-font-family: null !default; -/// The font family of the second largest display text. -/// @group typography $kendo-display2-font-family: null !default; -/// The font family of the third largest display text. -/// @group typography $kendo-display3-font-family: null !default; -/// The font family of the fourth largest display text. -/// @group typography $kendo-display4-font-family: null !default; -/// The line height of the largest display text. -/// @group typography $kendo-display1-line-height: null !default; -/// The line height of the second largest display text. -/// @group typography $kendo-display2-line-height: null !default; -/// The line height of the third largest display text. -/// @group typography $kendo-display3-line-height: null !default; -/// The line height of the fourth largest display text. -/// @group typography $kendo-display4-line-height: null !default; -/// The font weight of the largest display text. -/// @group typography $kendo-display1-font-weight: null !default; -/// The font weight of the second largest display text. -/// @group typography $kendo-display2-font-weight: null !default; -/// The font weight of the third largest display text. -/// @group typography $kendo-display3-font-weight: null !default; -/// The font weight of the fourth largest display text. -/// @group typography $kendo-display4-font-weight: null !default; -/// The letter spacing of the largest display text. -/// @group typography $kendo-display1-letter-spacing: null !default; -/// The letter spacing of the second largest display text. -/// @group typography $kendo-display2-letter-spacing: null !default; -/// The letter spacing of the third largest display text. -/// @group typography $kendo-display3-letter-spacing: null !default; -/// The letter spacing of the fourth largest display text. -/// @group typography $kendo-display4-letter-spacing: null !default; -/// The displays Map. $kendo-display: null !default; diff --git a/packages/core/scss/components/upload/_variables.scss b/packages/core/scss/components/upload/_variables.scss index a8434b7298d..11f96e14d8a 100644 --- a/packages/core/scss/components/upload/_variables.scss +++ b/packages/core/scss/components/upload/_variables.scss @@ -1,104 +1,44 @@ // Upload -/// The width of the border around the Upload. -/// @group upload $kendo-upload-border-width: null !default; -/// The font family of the Upload. -/// @group upload $kendo-upload-font-family: null !default; -/// The font size of the Upload. -/// @group upload $kendo-upload-font-size: null !default; -/// The line height of the Upload. -/// @group upload $kendo-upload-line-height: null !default; -/// The maximum height of the list with uploaded items. -/// @group upload $kendo-upload-max-height: null !default; -/// The text color of the Upload. -/// @group upload $kendo-upload-text: null !default; -/// The background color of the Upload. -/// @group upload $kendo-upload-bg: null !default; -/// The border color of the Upload. -/// @group upload $kendo-upload-border: null !default; -/// The horizontal padding of the Upload dropzone. -/// @group upload $kendo-upload-dropzone-padding-x: null !default; -/// The vertical padding of the Upload dropzone. -/// @group upload $kendo-upload-dropzone-padding-y: null !default; -/// The text color of the Upload dropzone. -/// @group upload $kendo-upload-dropzone-text: null !default; -/// The background color of the Upload dropzone. -/// @group upload $kendo-upload-dropzone-bg: null !default; -/// The border color of the Upload dropzone. -/// @group upload $kendo-upload-dropzone-border: null !default; -/// The background color of the hovered Upload dropzone. -/// @group upload $kendo-upload-dropzone-hover-bg: null !default; -/// The text color of the Upload status message. -/// @group upload $kendo-upload-status-text: null !default; -/// The opacity of the Upload status message. -/// @group upload $kendo-upload-status-text-opacity: null !default; -/// The horizontal padding of an uploaded item. -/// @group upload $kendo-upload-item-padding-x: null !default; -/// The vertical padding of an uploaded item. -/// @group upload $kendo-upload-item-padding-y: null !default; -/// The vertical spacing between uploaded batch items. -/// @group upload $kendo-upload-multiple-items-spacing: null !default; -/// The font size of the Upload validation message. -/// @group upload $kendo-upload-validation-font-size: null !default; -/// The line height of the Upload validation message. -/// @group upload $kendo-upload-validation-line-height: null !default; -/// The horizontal spacing of the Upload status icon. -/// @group upload $kendo-upload-icon-spacing: null !default; -/// The color of the uploaded items icon. -/// @group upload $kendo-upload-icon-color: null !default; -/// The thickness of the Upload progress bar. -/// @group upload $kendo-upload-progress-thickness: null !default; -/// The background color of the Upload progress bar. -/// @group upload $kendo-upload-progress-bg: null !default; -/// The success text color of the Upload. -/// @group upload $kendo-upload-success-text: null !default; -/// The success background color of the Upload progress bar. -/// @group upload $kendo-upload-success-bg: null !default; -/// The error text color of the Upload. -/// @group upload $kendo-upload-error-text: null !default; -/// The error background color of the Upload progress bar. -/// @group upload $kendo-upload-error-bg: null !default; -/// The shadow of the focused Upload button, actions and uploaded items. -/// @group upload $kendo-upload-focus-shadow: null !default; $kendo-upload-files-list-margin: null !default; diff --git a/packages/core/scss/components/window/_variables.scss b/packages/core/scss/components/window/_variables.scss index d8ffc1bb1e9..34fc8bd324a 100644 --- a/packages/core/scss/components/window/_variables.scss +++ b/packages/core/scss/components/window/_variables.scss @@ -1,101 +1,41 @@ // Window -/// The width of the border around the Window. -/// @group window $kendo-window-border-width: null !default; -/// The border radius of the Window. -/// @group window $kendo-window-border-radius: null !default; -/// The font family of the Window. -/// @group window $kendo-window-font-family: null !default; -/// The font size of the Window. -/// @group window $kendo-window-font-size: null !default; -/// The line height of the Window. -/// @group window $kendo-window-line-height: null !default; -/// The horizontal padding of the Window titlebar. -/// @group window $kendo-window-titlebar-padding-x: null !default; -/// The vertical padding of the Window titlebar. -/// @group window $kendo-window-titlebar-padding-y: null !default; -/// The width of the border of the Window titlebar. -/// @group window $kendo-window-titlebar-border-width: null !default; -/// The style of the border of the Window titlebar. -/// @group window $kendo-window-titlebar-border-style: null !default; -/// The font size of the title of the Window. -/// @group window $kendo-window-title-font-size: null !default; -/// The line height of the title of the Window. -/// @group window $kendo-window-title-line-height: null !default; -/// The spacing between the buttons in the Window titlebar. -/// @group window $kendo-window-actions-gap: null !default; -/// The opacity of the buttons in the Window titlebar. -/// @group window $kendo-window-action-opacity: null !default; -/// The opacity of the hovered buttons in the Window titlebar. -/// @group window $kendo-window-action-hover-opacity: null !default; -/// The horizontal padding of the content of the Window. -/// @group window $kendo-window-inner-padding-x: null !default; -/// The vertical padding of the content of the Window. -/// @group window $kendo-window-inner-padding-y: null !default; -/// The horizontal padding of the Window action buttons. -/// @group window $kendo-window-buttongroup-padding-x: null !default; -/// The vertical padding of the Window action buttons. -/// @group window $kendo-window-buttongroup-padding-y: null !default; -/// The width of the top border of the Window action buttons. -/// @group window $kendo-window-buttongroup-border-width: null !default; -/// The background color of the Window. -/// @group window $kendo-window-bg: null !default; -/// The text color of the Window. -/// @group window $kendo-window-text: null !default; -/// The border color of the Window. -/// @group window $kendo-window-border: null !default; -/// The box shadow of the Window. -/// @group window $kendo-window-shadow: null !default; -/// The box shadow of the focused Window. -/// @group window $kendo-window-focus-shadow: null !default; -/// The background color of the Window titlebar. -/// @group window $kendo-window-titlebar-bg: null !default; -/// The text color of the Window titlebar. -/// @group window $kendo-window-titlebar-text: null !default; -/// The border color of the Window titlebar. -/// @group window $kendo-window-titlebar-border: null !default; -/// The background gradient of the Window titlebar. -/// @group window $kendo-window-titlebar-gradient: null !default; -/// The map of the width for the different Window sizes. -/// @group window $kendo-window-sizes: null !default; -/// The theme colors map for the Window. -/// @group window $kendo-window-theme-colors: null !default; diff --git a/packages/core/scss/components/wizard/_variables.scss b/packages/core/scss/components/wizard/_variables.scss index 3544ba6ae85..665de63fa6f 100644 --- a/packages/core/scss/components/wizard/_variables.scss +++ b/packages/core/scss/components/wizard/_variables.scss @@ -1,34 +1,14 @@ // Wizard -/// The horizontal padding of the Wizard. -/// @group wizard $kendo-wizard-padding-x: null !default; -/// The vertical padding of the Wizard. -/// @group wizard $kendo-wizard-padding-y: null !default; -/// The horizontal padding of the Wizard content. -/// @group wizard $kendo-wizard-content-padding-x: null !default; -/// The vertical padding of the Wizard content. -/// @group wizard $kendo-wizard-content-padding-y: null !default; -/// The horizontal margin of the Wizard's Button container. -/// @group wizard $kendo-wizard-buttons-margin-x: null !default; -/// The border width of the Wizard. -/// @group wizard $kendo-wizard-border-width: null !default; -/// The font size of the Wizard. -/// @group wizard $kendo-wizard-font-size: null !default; -/// The line height of the Wizard. -/// @group wizard $kendo-wizard-line-height: null !default; -/// The font family of the Wizard. -/// @group wizard $kendo-wizard-font-family: null !default; -/// The outline of the focused Wizard step. -/// @group wizard $kendo-wizard-step-focus-border: null !default; From 81eafe21b4ee0de78c631fd95bc4353ec2af8fc7 Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Tue, 14 Jan 2025 18:26:07 +0200 Subject: [PATCH 09/10] chore: remove redundant popup border radius styles --- packages/core/scss/components/popup/_theme.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/core/scss/components/popup/_theme.scss b/packages/core/scss/components/popup/_theme.scss index 579c85477b2..7b095818852 100644 --- a/packages/core/scss/components/popup/_theme.scss +++ b/packages/core/scss/components/popup/_theme.scss @@ -12,10 +12,6 @@ @include box-shadow( $kendo-popup-shadow ); } - .k-animation-container { - @include border-bottom-radius-only( k-border-radius(md) ); - } - } From 36520145e1c24feb91c0fd16a0504ba2fdad228a Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Mon, 13 Jan 2025 16:29:26 +0200 Subject: [PATCH 10/10] chore: regen docs --- .../bootstrap/docs/customization-toolbar.md | 40 ++++++++++++++ packages/bootstrap/docs/customization.md | 40 ++++++++++++++ .../classic/docs/customization-taskboard.md | 12 ++--- .../classic/docs/customization-toolbar.md | 40 ++++++++++++++ packages/classic/docs/customization.md | 52 ++++++++++++++++--- packages/default/docs/customization-common.md | 10 ---- packages/default/docs/customization-input.md | 20 ------- .../default/docs/customization-pdf-viewer.md | 10 ---- packages/default/docs/customization.md | 40 -------------- 9 files changed, 172 insertions(+), 92 deletions(-) diff --git a/packages/bootstrap/docs/customization-toolbar.md b/packages/bootstrap/docs/customization-toolbar.md index 7eef9b7023a..2382c56a8f4 100644 --- a/packages/bootstrap/docs/customization-toolbar.md +++ b/packages/bootstrap/docs/customization-toolbar.md @@ -447,6 +447,46 @@ The following table lists the available variables for customization.
Description
The box shadow of the focused Toolbar item.
+ + $kendo-toolbar-overflow-container-font-size + String + $kendo-menu-popup-md-font-size + var(--kendo-font-size, inherit) + + +
Description
The font size of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-container-line-height + String + $kendo-menu-popup-md-line-height + var(--kendo-line-height, normal) + + +
Description
The line-height of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-button-padding-y + String + $kendo-menu-popup-md-item-padding-y + var(--kendo-spacing-1, 0.25rem) + + +
Description
The vertical padding of the Toolbar overflow button.
+ + + + $kendo-toolbar-overflow-button-padding-x + String + $kendo-menu-popup-md-item-padding-x + var(--kendo-spacing-4, 1rem) + + +
Description
The horizontal padding of the Toolbar overflow button.
+ + $kendo-toolbar-sizes Map diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md index 0e2040bfd0b..c8aac32cd54 100644 --- a/packages/bootstrap/docs/customization.md +++ b/packages/bootstrap/docs/customization.md @@ -29116,6 +29116,46 @@ The following table lists the available variables for customizing the Bootstrap
Description
The box shadow of the focused Toolbar item.
+ + $kendo-toolbar-overflow-container-font-size + String + $kendo-menu-popup-md-font-size + var(--kendo-font-size, inherit) + + +
Description
The font size of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-container-line-height + String + $kendo-menu-popup-md-line-height + var(--kendo-line-height, normal) + + +
Description
The line-height of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-button-padding-y + String + $kendo-menu-popup-md-item-padding-y + var(--kendo-spacing-1, 0.25rem) + + +
Description
The vertical padding of the Toolbar overflow button.
+ + + + $kendo-toolbar-overflow-button-padding-x + String + $kendo-menu-popup-md-item-padding-x + var(--kendo-spacing-4, 1rem) + + +
Description
The horizontal padding of the Toolbar overflow button.
+ + $kendo-toolbar-sizes Map diff --git a/packages/classic/docs/customization-taskboard.md b/packages/classic/docs/customization-taskboard.md index c8a7bb1a9e4..0675bf3a3dd 100644 --- a/packages/classic/docs/customization-taskboard.md +++ b/packages/classic/docs/customization-taskboard.md @@ -719,9 +719,9 @@ The following table lists the available variables for customization. $kendo-taskboard-card-header-focus-text - Null - $kendo-color-primary-darker - null + String + if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + var(--kendo-color-primary-hover, #e05100)
Description
The text color of the hovered TaskBoard Card header text.
@@ -729,9 +729,9 @@ The following table lists the available variables for customization. $kendo-taskboard-card-header-hover-text - Null - $kendo-color-primary-darker - null + String + if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + var(--kendo-color-primary-hover, #e05100)
Description
The text color of the focused TaskBoard Card header text.
diff --git a/packages/classic/docs/customization-toolbar.md b/packages/classic/docs/customization-toolbar.md index a4d2e19eaff..d26c3a49e46 100644 --- a/packages/classic/docs/customization-toolbar.md +++ b/packages/classic/docs/customization-toolbar.md @@ -447,6 +447,46 @@ The following table lists the available variables for customization.
Description
The box shadow of the focused Toolbar item.
+ + $kendo-toolbar-overflow-container-font-size + String + $kendo-menu-popup-md-font-size + var(--kendo-font-size, inherit) + + +
Description
The font size of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-container-line-height + String + $kendo-menu-popup-md-line-height + var(--kendo-line-height, normal) + + +
Description
The line-height of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-button-padding-y + String + $kendo-menu-popup-md-item-padding-y + var(--kendo-spacing-1, 0.25rem) + + +
Description
The vertical padding of the Toolbar overflow button.
+ + + + $kendo-toolbar-overflow-button-padding-x + String + $kendo-menu-popup-md-item-padding-x + var(--kendo-spacing-2, 0.5rem) + + +
Description
The horizontal padding of the Toolbar overflow button.
+ + $kendo-toolbar-sizes Map diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md index 40b06c2044d..bed0fa2b43d 100644 --- a/packages/classic/docs/customization.md +++ b/packages/classic/docs/customization.md @@ -28319,9 +28319,9 @@ The following table lists the available variables for customizing the Classic th $kendo-taskboard-card-header-focus-text - Null - $kendo-color-primary-darker - null + String + if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + var(--kendo-color-primary-hover, #e05100)
Description
The text color of the hovered TaskBoard Card header text.
@@ -28329,9 +28329,9 @@ The following table lists the available variables for customizing the Classic th $kendo-taskboard-card-header-hover-text - Null - $kendo-color-primary-darker - null + String + if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + var(--kendo-color-primary-hover, #e05100)
Description
The text color of the focused TaskBoard Card header text.
@@ -29497,6 +29497,46 @@ The following table lists the available variables for customizing the Classic th
Description
The box shadow of the focused Toolbar item.
+ + $kendo-toolbar-overflow-container-font-size + String + $kendo-menu-popup-md-font-size + var(--kendo-font-size, inherit) + + +
Description
The font size of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-container-line-height + String + $kendo-menu-popup-md-line-height + var(--kendo-line-height, normal) + + +
Description
The line-height of the Toolbar overflow container.
+ + + + $kendo-toolbar-overflow-button-padding-y + String + $kendo-menu-popup-md-item-padding-y + var(--kendo-spacing-1, 0.25rem) + + +
Description
The vertical padding of the Toolbar overflow button.
+ + + + $kendo-toolbar-overflow-button-padding-x + String + $kendo-menu-popup-md-item-padding-x + var(--kendo-spacing-2, 0.5rem) + + +
Description
The horizontal padding of the Toolbar overflow button.
+ + $kendo-toolbar-sizes Map diff --git a/packages/default/docs/customization-common.md b/packages/default/docs/customization-common.md index a11e9d52be5..cc4ac1b6b28 100644 --- a/packages/default/docs/customization-common.md +++ b/packages/default/docs/customization-common.md @@ -37,16 +37,6 @@ The following table lists the available variables for customization.
Description
Box shadow of focused items.
- - $kendo-transition - List - color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out - (color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out) - - -
Description
Transition used across all components.
- - $kendo-disabled-bg Null diff --git a/packages/default/docs/customization-input.md b/packages/default/docs/customization-input.md index 98d8211e2e0..1f4ddb42a0b 100644 --- a/packages/default/docs/customization-input.md +++ b/packages/default/docs/customization-input.md @@ -822,26 +822,6 @@ The following table lists the available variables for customization.
Description
The text color of the Input suffix.
- - $kendo-input-prefix-text - String - $kendo-subtle-text - var(--kendo-color-subtle, #666666) - - -
Description
The text color of the Input prefix.
- - - - $kendo-input-suffix-text - String - $kendo-subtle-text - var(--kendo-color-subtle, #666666) - - -
Description
The text color of the Input suffix.
- - $kendo-input-invalid-border String diff --git a/packages/default/docs/customization-pdf-viewer.md b/packages/default/docs/customization-pdf-viewer.md index 8ef46b2c911..bf4b4873250 100644 --- a/packages/default/docs/customization-pdf-viewer.md +++ b/packages/default/docs/customization-pdf-viewer.md @@ -427,16 +427,6 @@ The following table lists the available variables for customization.
Description
The text color of the PDFViewer free text annotation.
- - $kendo-pdf-viewer-free-text-annotation-text - Color - rgba(124, 22, 27, 0.7) - rgba(124, 22, 27, 0.5) - - -
Description
The text color of the PDFViewer free text annotation.
- - diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index 82a32fd6403..1b120da0fff 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -41,16 +41,6 @@ The following table lists the available variables for customizing the Default th
Description
Box shadow of focused items.
- - $kendo-transition - List - color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out - (color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out) - - -
Description
Transition used across all components.
- - $kendo-disabled-bg Null @@ -13957,26 +13947,6 @@ The following table lists the available variables for customizing the Default th
Description
The text color of the Input suffix.
- - $kendo-input-prefix-text - String - $kendo-subtle-text - var(--kendo-color-subtle, #666666) - - -
Description
The text color of the Input prefix.
- - - - $kendo-input-suffix-text - String - $kendo-subtle-text - var(--kendo-color-subtle, #666666) - - -
Description
The text color of the Input suffix.
- - $kendo-input-invalid-border String @@ -17606,16 +17576,6 @@ The following table lists the available variables for customizing the Default th
Description
The text color of the PDFViewer free text annotation.
- - $kendo-pdf-viewer-free-text-annotation-text - Color - rgba(124, 22, 27, 0.7) - rgba(124, 22, 27, 0.5) - - -
Description
The text color of the PDFViewer free text annotation.
- -