diff --git a/app/styleguide/list/_list.scss b/app/styleguide/list/_list.scss index cb7b286e..655e2524 100644 --- a/app/styleguide/list/_list.scss +++ b/app/styleguide/list/_list.scss @@ -6,39 +6,41 @@ $list-container-item-height: 70px; $list-container-item-border-color: #ddd; $list-container-view-background: rgba(255,255,255,1); -.List { +.wsk-list { display : block; height : $list-container-height; overflow: scroll; width : $list-container-width; } -.List .List-view { +.wsk-list--styled-view { background: $list-container-view-background; transition: background 0.3s 0.1s; z-index : 1; - - ul { - display : inline; - list-style-type: none; - li { - &:hover { - background: #efefef; - } - border-bottom: 1px solid $list-container-item-border-color; - height : $list-container-item-height; - left : 0; - right : 0; - } - } } -.List .List-name { +.wsk-list--styled-view ul { + display : inline; + list-style-type: none; +} + +.wsk-list--styled-view li { + border-bottom: 1px solid $list-container-item-border-color; + height : $list-container-item-height; + left : 0; + right : 0; +} + +.wsk-list--styled-view li:hover { + background: #efefef; +} + +.wsk-list-view--name { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } -.List .List-avatar { +.wsk-list-view--avatar { background : url("images/avatar.png"); background-size: 100%; border-radius : 50%; @@ -50,13 +52,13 @@ $list-container-view-background: rgba(255,255,255,1); width : 50px; } -.List--inline { +.wsk-list--inline { list-style : none; margin-left : -5px; padding-left: 0; } -.List--inline > li { +.wsk-list--inline > li { display : inline-block; padding-left : 5px; padding-right: 5px; diff --git a/app/styleguide/list/demo.html b/app/styleguide/list/demo.html index c1c72683..d6498868 100644 --- a/app/styleguide/list/demo.html +++ b/app/styleguide/list/demo.html @@ -35,7 +35,7 @@
  • Item 5

    • Inlined

    -