1 .meetings-list { 2 font-size: 14px; 3 color: #253858; 4 line-height: 20px; 5 text-align: left; 6 text-overflow: ellipsis; 7 display: flex; 8 flex-direction: column; 9 position: relative; 10 overflow: auto; 11 width: 100%; 12 13 .meetings-list-empty { 14 text-align: center; 15 align-items: center; 16 justify-content: center; 17 display: flex; 18 flex-grow: 1; 19 flex-direction: column; 20 21 .description { 22 color: #2f3237; 23 font-size: 14px; 24 line-height: 18px; 25 margin-bottom: 16px; 26 max-width: 436px; 27 } 28 } 29 30 .meetings-list-empty-image { 31 text-align: center; 32 margin: 24px 0 20px 0; 33 } 34 35 .meetings-list-empty-button { 36 align-items: center; 37 color: #0163FF; 38 cursor: pointer; 39 display: flex; 40 font-size: 14px; 41 line-height: 18px; 42 margin: 24px 0 32px 0; 43 } 44 45 .meetings-list-empty-icon { 46 display: inline-block; 47 margin-right: 8px; 48 } 49 50 .button { 51 background: #0074E0; 52 border-radius: 4px; 53 color: #FFFFFF; 54 display: flex; 55 justify-content: center; 56 align-items: center; 57 padding: 8px; 58 cursor: pointer; 59 } 60 61 .calendar-action-buttons { 62 .button { 63 margin: 0px 10px; 64 } 65 } 66 67 .item { 68 background: #fff; 69 box-sizing: border-box; 70 border-radius: 4px; 71 display: inline-flex; 72 margin: 4px 4px 0 4px; 73 min-height: 60px; 74 width: calc(100% - 8px); 75 word-break: break-word; 76 display: flex; 77 flex-direction: row; 78 text-align: left; 79 80 &:first-child { 81 margin-top: 0px; 82 } 83 84 .left-column { 85 order: -1; 86 display: flex; 87 flex-direction: column; 88 flex-grow: 0; 89 padding-left: 16px; 90 padding-top: 13px; 91 } 92 93 .right-column { 94 display: flex; 95 flex-direction: column; 96 align-items: flex-start; 97 flex-grow: 1; 98 padding-left: 16px; 99 padding-top: 13px; 100 position: relative; 101 } 102 103 .title { 104 font-size: 12px; 105 font-weight: 600; 106 line-height: 16px; 107 margin-bottom: 4px; 108 } 109 110 .subtitle { 111 color: #5E6D7A; 112 font-weight: normal; 113 font-size: 12px; 114 line-height: 16px; 115 } 116 117 118 .actions { 119 display: flex; 120 align-items: center; 121 justify-content: center; 122 flex-grow: 0; 123 margin-right: 16px; 124 } 125 126 &.with-click-handler { 127 cursor: pointer; 128 } 129 130 &.with-click-handler:hover { 131 background-color: #c7ddff; 132 } 133 134 .add-button { 135 width: 30px; 136 height: 30px; 137 padding: 0px; 138 } 139 140 i { 141 cursor: inherit; 142 } 143 144 .join-button { 145 display: none; 146 } 147 148 &:hover .join-button { 149 display: block 150 } 151 } 152 153 .delete-meeting { 154 display: none; 155 margin-right: 16px; 156 position: absolute; 157 158 &> svg { 159 fill: #0074e0; 160 } 161 } 162 163 .item:hover, .item:focus, .item:focus-within { 164 .delete-meeting { 165 display: block; 166 } 167 } 168 }