web-apps/apps/common/mobile/resources/sass/_common-settingslist.scss

.x-list.settings {
  $icon-size: 24px;
  @include border-radius($panel-border-radius);

  &.x-list-round .x-scroll-view {
    @include border-radius($panel-border-radius);
  }

  &.x-list-round.x-list-grouped {
    .x-list-header-wrap {
      .x-dock-horizontal {
        padding-top: 0;
      }

      .x-list-header {
        display: none;
      }
    }

    .x-list-footer-wrap {
      &.x-list-item-last {
        .x-dock-horizontal {
          padding-bottom: 0;
        }
      }
    }

    .x-list-item {
      .x-dock-horizontal {
        border: 1px solid darken($base-color, 6%);
        border-width: 1px 1px 0 1px;
        background: lighten($base-color, 100%);

        .x-innerhtml {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      &.x-item-pressed {
        .x-dock-horizontal {
          //@include background-gradient($list-active-color, $list-active-gradient);
          @include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
          @include color-by-background($list-active-color);
          //@include bevel-by-background($list-active-color);

          .disclosure {
            background-position: -1 * $settinglist-icon-size 0;
          }
        }
      }

      &.x-item-selected {
        .x-dock-horizontal {
          color: inherit;

          .x-list-item-body {
            padding-right: 1.2em;
          }

          &:after {
            content: "";
            width: $settinglist-icon-size;
            height: $settinglist-icon-size;
            position: absolute;
            top: ($global-list-height - $settinglist-icon-size) / 2;
            right: ($global-list-height - $settinglist-icon-size) / 2;
            background-image: url($icons-setting-list-image);
            background-size: $settinglist-image-width $settinglist-image-height;
            background-position: 0 -1 * $settinglist-icon-size;
          }
        }

        &.x-item-pressed {
          .x-dock-horizontal {
            color: lighten($base-color, 100%);

            &:after {
              background-position: -1 * $settinglist-icon-size -1 * $settinglist-icon-size;
            }
          }
        }
      }

      .list-icon {
        width: $icon-size;
        height: $icon-size;
        position: absolute;
      }

      // offset text from icom
      .icon-offset {
        margin-left: $icon-size + 6px;
      }

      .disclosure {
        right: $icon-size / 2;
        background-image: url($icons-setting-list-image);
        background-size: $settinglist-image-width $settinglist-image-height;
        background-position: 0 0;
      }
    }

    .x-list-header-wrap.x-list-footer-wrap {
      .x-dock-body {
        @include border-radius($form-fieldset-radius);
      }
    }

    .x-list-footer-wrap {
      .x-dock-horizontal {
        border: none;
        background: transparent;
        padding-bottom: $global-list-height * .3;

        > .x-dock-body {
          border: 1px solid darken($base-color, 6%);
          background: lighten($base-color, 100%);
        }
      }

      &.x-item-pressed {
        .x-dock-horizontal {
          background: transparent;
          > .x-dock-body {
            @include border-bottom-radius($form-fieldset-radius);
            //@include background-gradient($list-active-color, $list-active-gradient);
            @include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
            @include color-by-background($list-active-color);
            //@include bevel-by-background($list-active-color);
          }
        }
      }
    }
  }
}