style.scss (1485B)
1 .block-timer { 2 padding: 5px; 3 background-color: #2d2d2d; 4 border-radius: 500px; 5 width: 277px; 6 box-sizing: border-box; 7 display: -webkit-box; 8 display: -ms-flexbox; 9 display: flex; 10 -webkit-box-pack: justify; 11 -ms-flex-pack: justify; 12 justify-content: space-between; 13 -webkit-box-align: center; 14 -ms-flex-align: center; 15 align-items: center; 16 box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2); 17 -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2); 18 -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2); 19 padding-left: 50px; 20 img { 21 width: 50px; 22 height: 50px; 23 border-radius: 50%; 24 } 25 26 h3 { 27 font-size: 14px; 28 font-weight: 500; 29 color: #fff; 30 margin: 0; 31 } 32 33 p { 34 font-size: 14px; 35 font-weight: 100; 36 color: #ababab; 37 margin: 0; 38 } 39 40 .caret-icon { 41 border: 2px solid; 42 border-radius: 50%; 43 color: #6c6c6c; 44 margin: 0 15px; 45 width: 23px; 46 height: 23px; 47 font-size: 20px; 48 cursor: pointer; 49 .fa { 50 width: 100%; 51 text-align: center; 52 -webkit-transition: 400ms; 53 -o-transition: 400ms; 54 transition: 400ms; 55 } 56 &.closed .fa { 57 -webkit-transform: rotate(180deg) translateY(1px); 58 -ms-transform: rotate(180deg) translateY(1px); 59 transform: rotate(180deg) translateY(1px); 60 } 61 } 62 }