@import url('app://bower_components/fontawesome/css/font-awesome.min.css'); :host { display: flex; } .home { position: relative; display: flex; flex-direction: column; flex: 1; padding: 10px; } .home header { border-bottom: 1px solid #666; padding: 10px 5px; } .home .control { padding: 8px 4px; } .home .control i { padding: 4px 6px; cursor: pointer; transition: color 0.3s; } .home .control .fa-pencil-square-o[edit] { color: #cc0000; } .home .list { overflow: auto; background: #333; padding: 0; flex: 1; } .home .list ul { padding: 0; margin: 0; } .home .list ul li { padding: 5px 12px; line-height: 20px; display: flex; list-style: none; } .home .list ul li:hover { background: #282828; } .home .list ul li .edit { width: 0; opacity: 0; font-size: 15px; transition: opacity 0.3s, width 0.3s; overflow: hidden; margin-right: 5px; } .home .list ul li .edit i { padding: 3px; cursor: pointer; color: #cc0000; } .home .list ul li .edit[edit] { width: 18px; opacity: 1; } .home .list ul li .name { width: 110px; overflow: hidden; text-overflow: ellipsis; } .home .popup { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: none; } .home .popup .mask { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #474747; opacity: 0.9; } .home .popup .language { position: absolute; width: 260px; left: 50%; top: 45%; margin: -50px 0 0 -130px; } .home .popup .language h3 { margin: 0 0 12px 0; text-align: center; } .home .popup .language .button { text-align: right; display: flex; } .home .popup .language .button ui-button { margin: 10px; flex: 1; } .home .popup[active] { display: block; }