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 display: flex; 86 flex-direction: column; 87 flex-grow: 0; 88 padding-left: 16px; 89 padding-top: 13px; 90 } 91 92 .right-column { 93 display: flex; 94 flex-direction: column; 95 flex-grow: 1; 96 padding-left: 16px; 97 padding-top: 13px; 98 position: relative; 99 } 100 101 .title { 102 font-size: 12px; 103 font-weight: 600; 104 line-height: 16px; 105 padding-bottom: 4px; 106 } 107 108 .subtitle { 109 color: #5E6D7A; 110 font-weight: normal; 111 font-size: 12px; 112 line-height: 16px; 113 } 114 115 116 .actions { 117 display: flex; 118 align-items: center; 119 justify-content: center; 120 flex-grow: 0; 121 margin-right: 16px; 122 } 123 124 &.with-click-handler { 125 cursor: pointer; 126 } 127 128 &.with-click-handler:hover, 129 &.with-click-handler:focus { 130 background-color: #c7ddff; 131 } 132 133 .add-button { 134 width: 30px; 135 height: 30px; 136 padding: 0px; 137 } 138 139 i { 140 cursor: inherit; 141 } 142 143 .join-button { 144 display: none; 145 } 146 147 &:hover .join-button { 148 display: block 149 } 150 } 151 152 .delete-meeting { 153 display: none; 154 margin-right: 16px; 155 position: absolute; 156 157 &> svg { 158 fill: #0074e0; 159 } 160 } 161 162 .item:hover, .item:focus, .item:focus-within { 163 .delete-meeting { 164 display: block; 165 } 166 } 167 }