Sign in
apache
/
cloudstack-primate
/
e666f1f31ea50e5e72c6f50f771ee945e07bcced
/
.
/
src
/
style
tree: 5ce20e9d0b283cac662384b4dcc8816bd074ca8a [
path history
]
[
tgz
]
ant-overwrite/
common/
component/
frame/
layout/
objects/
variables/
index.less
README.md
vars.less
src/style/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:
dist/antd.less
imports everthing with index.less + components.less
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:
variables
include all custom variables here
common
include all rules that reset styles, define global stuffs without classes at all
e.g. body {} p, ul, li {} h1, h2, h3 {}
ant-overwrite
any styles that overwrites the existin ant rules by any reason
e.g. classes like .ant-layout-header .anticon {}
frame
everything that belongs to the frame
e.g. header, footer, nav, sider, content (just the actual content frame, not every component in it)
layout
rules that modify the page at all if new layout class is set.
e.g. #html class=“layout-ant-black”#
objects
repeatly used elements like buttons, inputs
components
complex elements like dropdown, forms, table, search (usualy include this to components/FooterToolbar/ folder)
The “/deep/” combinator
use the /deep/ combinator (or in other versions “>>>”) helps us to exclude “scoped” rules into global
e.g. .a .b .c {} will scope a generated data ID like .a .b .c[data-abcde] {}
but .a /deep/ .b .c {} will scope .a[data-abcde] .b .c {}
so everything after deep will be outside the defined scope
watch this article for technical information.
https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements