cloudstack/ui/src/style
David Jumani 3c25a35426
ui: AntD3 upgrade (#7306)
Continuation of #6369

This PR for Fixes #6342. Upgrade ant-design-vue to version 3.x.
Related https://www.antdv.com/docs/vue/migration-v3.

Co-authored-by: utchoang <hoangnm@unitech.vn>
2023-04-11 14:05:21 +05:30
..
ant-overwrite UI: Fixes suffix icon on project selector not work (#6671) 2022-08-25 22:14:31 +05:30
common UI: Upgrade to Vue3 library (#5151) 2022-03-09 09:47:09 -03:00
components ui,server,api: resource metrics improvements (#6803) 2023-01-30 09:48:03 +01:00
frame src: add apache v2.0 license header to files 2021-01-20 07:06:14 +05:30
layout image: zones tab for template and iso (#102) 2021-01-20 07:06:15 +05:30
objects src: add apache v2.0 license header to files 2021-01-20 07:06:14 +05:30
variables src: add apache v2.0 license header to files 2021-01-20 07:06:14 +05:30
README.md Fix spelling (#6860) 2022-11-13 10:56:15 +01:00
dark-mode.less ui: AntD3 upgrade (#7306) 2023-04-11 14:05:21 +05:30
index.less ui: AntD3 upgrade (#7306) 2023-04-11 14:05:21 +05:30
vars.less ui: AntD3 upgrade (#7306) 2023-04-11 14:05:21 +05:30

README.md

index.less

  • src/styles/index.less imports all necessary rules for cloudstack

ant .less structure node_modules/ant-design-vue/

main .less entry points:

  1. dist/antd.less
    • imports everthing with index.less + components.less
  2. lib/style/index.less
    • themes/default.less
      • color/colors'
      • default theme @variables
    • core/index.less
      • includes base styles, motion rules and iconfont

src/style/ explaination

  • index.less includes ant styles, as well as all custom variables and rules

folders:

  1. variables
    • include all custom variables here
  2. common
    • include all rules that reset styles, define global stuffs without classes at all
    • e.g. body {} p, ul, li {} h1, h2, h3 {}
  3. ant-overwrite
    • any styles that overwrites the existin ant rules by any reason
    • e.g. classes like .ant-layout-header .anticon {}
  4. frame
    • everything that belongs to the frame
    • e.g. header, footer, nav, sider, content (just the actual content frame, not every component in it)
  5. layout
    • rules that modify the page at all if new layout class is set.
    • e.g. #html class="layout-ant-black"#
  6. objects
    • repeatly used elements like buttons, inputs
  7. components
    • complex elements like dropdown, forms, table, search (usually include this to components/FooterToolbar/ folder)

The "/deep/" combinator