UNPKG

iot-ui

Version:
203 lines (179 loc) 4.85 kB
.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); }