1/*Internet Explorer 11 compatibility workaround - IE does not support CSS variables */ 2 3@media all and (-ms-high-contrast: none), 4(-ms-high-contrast: active) { 5 .pf-c-tile { 6 position: relative; 7 display: -ms-inline-grid; 8 display: inline-grid; 9 padding: 1.5rem 1.5rem 1.5rem 1.5rem; 10 margin-bottom: 0.25rem; 11 text-align: center; 12 cursor: pointer; 13 background-color: #fff; 14 grid-template-rows: -webkit-min-content; 15 -ms-grid-rows: -webkit-min-content; 16 -ms-grid-rows: min-content; 17 grid-template-rows: min-content; 18 } 19 .pf-c-tile::before { 20 position: absolute; 21 top: 0; 22 right: 0; 23 bottom: 0; 24 left: 0; 25 pointer-events: none; 26 content: ""; 27 border: 1px solid #d2d2d2; 28 border-radius: 3px; 29 } 30 .pf-c-tile:hover { 31 border: 1px solid #06c; 32 border-radius: 3px; 33 } 34 .pf-c-tile:hover .pf-c-tile__title, 35 .pf-c-tile:hover .pf-c-tile__icon { 36 color: #06c; 37 } 38 .pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__title, 39 .pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__icon { 40 color: #06c; 41 } 42 .pf-c-tile__input:checked + .pf-c-tile { 43 border: 2px solid #06c; 44 border-radius: 3px; 45 } 46 .pf-c-tile.pf-m-disabled { 47 pointer-events: none; 48 } 49 .pf-c-tile__header { 50 display: flex; 51 align-items: center; 52 justify-content: center; 53 } 54 .pf-c-tile__header.pf-m-stacked { 55 flex-direction: column; 56 justify-content: initial; 57 } 58 .pf-c-tile__header.pf-m-stacked .pf-c-tile__icon { 59 display: flex; 60 align-items: center; 61 justify-content: center; 62 margin-bottom: 0.25rem; 63 } 64 .pf-c-tile__title { 65 color: #6a6e73; 66 } 67 .pf-c-tile__body { 68 font-size: 0.75rem; 69 color: #6a6e73; 70 } 71 .pf-c-tile__icon { 72 margin-right: 0.5rem; 73 font-size: 1.5rem; 74 color: #6a6e73; 75 } 76} 77 78 79/*End of the IE11 workaround*/ 80 81.pf-c-tile { 82 --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg); 83 --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg); 84 --pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg); 85 --pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg); 86 --pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100); 87 --pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100); 88 --pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm); 89 --pf-c-tile--before--BorderRadius: var(--pf-global--BorderRadius--sm); 90 --pf-c-tile--hover--before--BorderColor: var(--pf-global--primary-color--100); 91 --pf-c-tile--m-selected--before--BorderWidth: var(--pf-global--BorderWidth--md); 92 --pf-c-tile--m-selected--before--BorderColor: var(--pf-global--primary-color--100); 93 --pf-c-tile--focus--before--BorderWidth: var(--pf-global--BorderWidth--md); 94 --pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100); 95 --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300); 96 --pf-c-tile__title--Color: var(--pf-global--Color--100); 97 --pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100); 98 --pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100); 99 --pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100); 100 --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100); 101 --pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm); 102 --pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md); 103 --pf-c-tile__icon--Color: var(--pf-global--Color--100); 104 --pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100); 105 --pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100); 106 --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100); 107 --pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100); 108 --pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs); 109 --pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg); 110 --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl); 111 --pf-c-tile__body--Color: var(--pf-global--Color--100); 112 --pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs); 113 --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100); 114 position: relative; 115 display: inline-grid; 116 padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft); 117 margin-bottom: 0.25rem; 118 text-align: center; 119 cursor: pointer; 120 background-color: var(--pf-c-tile--BackgroundColor); 121 grid-template-rows: min-content; 122 overflow: hidden; 123} 124 125.pf-c-tile::before { 126 position: absolute; 127 top: 0; 128 right: 0; 129 bottom: 0; 130 left: 0; 131 pointer-events: none; 132 content: ""; 133 border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor); 134 border-radius: var(--pf-c-tile--before--BorderRadius); 135} 136 137.pf-c-tile:hover { 138 --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color); 139 --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color); 140 --pf-c-tile--before--BorderColor: var(--pf-c-tile--hover--before--BorderColor); 141} 142 143.pf-c-tile__input:checked + .pf-c-tile { 144 --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color); 145 --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color); 146 --pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth); 147 --pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor); 148} 149 150.pf-c-tile:focus { 151 --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color); 152 --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color); 153 --pf-c-tile--before--BorderWidth: var(--pf-c-tile--focus--before--BorderWidth); 154 --pf-c-tile--before--BorderColor: var(--pf-c-tile--focus--before--BorderColor); 155} 156 157.pf-c-tile.pf-m-disabled { 158 --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor); 159 --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color); 160 --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color); 161 --pf-c-tile--before--BorderWidth: 0; 162 --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color); 163 pointer-events: none; 164} 165 166.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked { 167 --pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize); 168} 169 170.pf-c-tile__input { 171 display: none; 172} 173 174.pf-c-tile__header { 175 display: flex; 176 align-items: center; 177 justify-content: center; 178} 179 180.pf-c-tile__header.pf-m-stacked { 181 --pf-c-tile__icon--MarginRight: 0; 182 --pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize); 183 flex-direction: column; 184 justify-content: initial; 185} 186 187.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon { 188 display: flex; 189 align-items: center; 190 justify-content: center; 191 margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom); 192} 193 194.pf-c-tile__title { 195 color: var(--pf-c-tile__title--Color); 196} 197 198.pf-c-tile__body { 199 font-size: var(--pf-c-tile__body--FontSize); 200 color: var(--pf-c-tile__body--Color); 201} 202 203.pf-c-tile__icon { 204 margin-right: var(--pf-c-tile__icon--MarginRight); 205 font-size: var(--pf-c-tile__icon--FontSize); 206 color: var(--pf-c-tile__icon--Color); 207}