iot-ui
Version:
203 lines (179 loc) • 4.85 kB
text/less
.root-box {
flex-direction: column;
height: 100%;
}
.title {
background-color: @TwoLevelListTitleBackground;
height: @TwoLevelListTitleHeight;
}
.title-line {
width: 100%;
height: @TwoLevelListLineHeight;
background-color: @TwoLevelListLineColor;
}
.header {
padding-top: 18px;
padding-bottom: 60px;
background-color: @TwoLevelListBackgroundColor;
padding-right: @TwoLevelListItemPaddingRight;
text {
font-size: @TwoLevelListHeaderFooterFontSize;
}
}
.header-box {
background-color: @TwoLevelListBackgroundColor;
}
.item-group {
background-color: @TwoLevelListBackgroundColor;
text {
font-size: @TwoLevelListHeaderFooterFontSize ;
}
a {
font-size: @TwoLevelListHeaderFooterFontSize ;
}
}
.item-group-header {
padding-top: @TwoLevelListItemGroupPadding;
padding-bottom: 9px;
padding-right: @TwoLevelListItemPaddingRight;
}
.item-group-footer {
padding-top: 18px;
padding-bottom: 60px;
padding-right: @TwoLevelListItemPaddingRight;
flex-direction: row;
flex-wrap: wrap;
}
.item-group-padding {
width: 100%;
height: @TwoLevelListItemGroupPadding;
}
.footer {
padding-top: 60px;
padding-bottom: 60px;
padding-right: @TwoLevelListItemPaddingRight;
background-color: @TwoLevelListBackgroundColor;
flex-direction: row;
flex-wrap: wrap;
text {
font-size: @TwoLevelListHeaderFooterFontSize ;
}
}
.footer-link {
color: @TwoLevelListLinkColor;
font-size: @TwoLevelListHeaderFooterFontSize ;
}
.footer-text {
color: @TwoLevelListFooterTextColor;
}
.footer-box {
background-color: @TwoLevelListBackgroundColor;
}
.title-stack {
width: 100%;
height: 100%;
}
.title-icon {
width: @TwoLevelListTitleBackIconSize + @TwoLevelListTitlePaddingLeft + @TwoLevelListTitlePaddingLeft;
padding-left: @TwoLevelListTitlePaddingLeft;
padding-right: @TwoLevelListTitlePaddingLeft;
height: 100%;
justify-content: center;
align-items: center;
}
.title-icon-2 {
width: @TwoLevelListTitleBackIconSize ;
height: @TwoLevelListTitleBackIconSize;
border-style: solid;
border-width: @TwoLevelListTitleBackIconBold @TwoLevelListTitleBackIconBold 0 0;
border-color: @TwoLevelListTitleBackIconColor;
transform: rotate(-135deg);
}
.title-text {
height: 100%;
justify-content: center;
width: 100%;
text {
font-size: @TwoLevelListTitleFontSize;
font-weight: bold;
}
}
list {
height: 100%;
flex: 1;
background-color: @TwoLevelListBackgroundColor;
}
list-item {
flex-direction: column;
background-color: @TwoLevelListItemBackground;
padding-left: @TwoLevelListItemPaddingLeft;
}
.item-content {
flex: 1; // background-color: orange;
align-items: center;
}
.item-content-content {
flex: 1;
padding-top: @TwoLevelListItemPaddingTop;
padding-bottom: @TwoLevelListItemPaddingBottom;
.item-title-box {
flex-direction: column;
justify-content: center;
flex: 1;
}
.item-title-sub {
color: @TwoLevelListItemSubTitleColor;
font-size: @TwoLevelListItemSubTitleFontSize;
padding-top: @TwoLevelListItemSubTitlePaddingTop;
}
.item-title-sub-none {
width: 0px;
height: 0px;
}
.item-title {
font-size: @TwoLevelListItemTitleFontSize;
}
.item-content-content-icon {
border-radius: @TwoLevelListItemIconBorderRadius;
background-color: @TwoLevelListItemIconBackground;
width: @TwoLevelListItemIconSize;
height: @TwoLevelListItemIconSize;
justify-content: center;
align-items: center;
}
.item-content-content-icon image {
width: @TwoLevelListItemIconImageSize;
height: @TwoLevelListItemIconImageSize;
}
.item-content-content-icon-padding-right {
height: 100%;
width: @TwoLevelListItemIconPaddingRight;
}
.item-right-text {
text {
font-size: @TwoLevelListItemRightTextFontSize;
color: @TwoLevelListItemRightTextFontColor;
padding-right: @TwoLevelListItemRightTextPaddingRight;
}
}
}
.item-line {
width: 100%;
height: @TwoLevelListLineHeight;
background-color: @TwoLevelListLineColor;
}
.item-arrow-box {
width: @TwoLevelListItemArrowSize + @TwoLevelListItemPaddingRight;
justify-content: center;
align-items: center;
padding-right: @TwoLevelListItemPaddingRight;
height: 100%;
}
.item-arrow-icon {
width: @TwoLevelListItemArrowSize ;
height: @TwoLevelListItemArrowSize;
border-style: solid;
border-width: @TwoLevelListItemArrowBold @TwoLevelListItemArrowBold 0 0;
border-color: @TwoLevelListItemArrowColor;
transform: rotate(45deg);
}