diff --git a/examples/mobile/UIComponents/components/controllers/expand-button.html b/examples/mobile/UIComponents/components/controllers/expand-button.html index 687b3b40e6..08d6b427ba 100644 --- a/examples/mobile/UIComponents/components/controllers/expand-button.html +++ b/examples/mobile/UIComponents/components/controllers/expand-button.html @@ -27,6 +27,11 @@

Expand button on list +
  • + + Expand button on card + +
    • diff --git a/examples/mobile/UIComponents/components/controllers/expandable-card.html b/examples/mobile/UIComponents/components/controllers/expandable-card.html new file mode 100644 index 0000000000..a9f041f82d --- /dev/null +++ b/examples/mobile/UIComponents/components/controllers/expandable-card.html @@ -0,0 +1,51 @@ + + + + + Expandable Card + + + + + + + +
    +
    +
    + +
    +
    + Expand button on card +
    +
    + +
    +
    +
    +
    +
    +

    + Subtitle 1 +

    +
    + Contents area +
    +
    +
    +
    +
    +

    + Subtitle 2 +

    +
    + Contents area +
    +
    +
    +
    +
    + + + diff --git a/examples/mobile/UIComponents/css/style.css b/examples/mobile/UIComponents/css/style.css index 5f34f72998..fbd3e3763b 100644 --- a/examples/mobile/UIComponents/css/style.css +++ b/examples/mobile/UIComponents/css/style.css @@ -1,6 +1,6 @@ /* Header */ .btn-icon-back::after { - -webkit-mask-image: url(./images/core_icon_back.png); + -webkit-mask-image: url(./images/core_icon_back.png); mask-image: url(./images/core_icon_back.png); } @@ -468,7 +468,7 @@ } /************************************** - Slider + Slider ***************************************/ #slider-demo .ui-slider-vertical { left: 50%; @@ -624,14 +624,14 @@ } /************************************** - text input with buttons + text input with buttons ***************************************/ #textinputwithbuttons-demo .ui-content { top: 80px; background: white; } /****************************************************** - List Styles - sliders + List Styles - sliders ******************************************************/ #slider-description{ @@ -671,7 +671,7 @@ } /****************************************************** - Indexscrollbar with search floating button + Indexscrollbar with search floating button ******************************************************/ #indexscrollbarPage .ui-header.search-active h1 { @@ -704,4 +704,14 @@ } .sample-unit-lines p { margin-bottom: 2px; +} + +.app-content-example { + height: 150px; + width: 100%; + background-color: #ddd; + display: flex; + text-align: center; + align-items: center; + justify-content: center; } \ No newline at end of file diff --git a/src/css/profile/mobile/common/core.less b/src/css/profile/mobile/common/core.less index 1d44725702..c51e023824 100644 --- a/src/css/profile/mobile/common/core.less +++ b/src/css/profile/mobile/common/core.less @@ -166,6 +166,10 @@ border-top-right-radius: 0; mask-border-width: 0 26 * @px_base 26 * @px_base; } + + ~ .ui-content-area { + margin-top: 5 * @px_base; + } } .ui-content-subheader { diff --git a/src/css/profile/mobile/common/expandable.less b/src/css/profile/mobile/common/expandable.less index dd90f7086e..44b891224f 100644 --- a/src/css/profile/mobile/common/expandable.less +++ b/src/css/profile/mobile/common/expandable.less @@ -1,4 +1,5 @@ -.ui-listview .ui-expandable { +.ui-listview .ui-expandable, +.ui-content-area .ui-expandable { padding: 0 24 * @px_base; user-select: none; flex-direction: column;