style.scss (6786B)
1 @import "../../_variables"; 2 3 .redux-templates-collection-modal-sidebar { 4 min-width: 270px; 5 background: #fff; 6 color: $primaryColor; /* $secondaryColor;*/ 7 8 border-right: 1px solid #e2e4e7; 9 overflow-y: auto; 10 11 .redux-templates-template-filter-button-group { 12 margin: 10px 0; 13 border-bottom: 1px solid #e2e4e7; 14 width: 100%; 15 display: inline-flex; 16 17 button { 18 font-weight: 500; 19 flex-grow: 1; 20 min-width: 30%; 21 line-height: 20px; 22 padding: 8px 0 10px 15px; 23 align-items: center; 24 text-align: left; 25 background: none; 26 position: relative; 27 margin-bottom: -1px; 28 border-width: 0; 29 z-index: 1; 30 cursor: pointer; 31 outline: none; 32 border-color: transparent; 33 box-shadow: none; 34 border-bottom: unset; 35 36 &::after { 37 content: attr(data-label); 38 display: block; 39 height: 0; 40 overflow: hidden; 41 speak: none; 42 visibility: hidden; 43 } 44 &:hover { 45 color: #007cba; 46 color: var(--wp-admin-theme-color); 47 } 48 49 &:focus { 50 box-shadow: inset 0 0 0 1.5px #007cba; 51 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color); 52 } 53 54 &.active { 55 box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 #007cba; 56 box-shadow: inset 0 0 0 1.5px transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); 57 58 &::before { 59 content: ""; 60 position: absolute; 61 top: 0; 62 bottom: 1px; 63 right: 0; 64 left: 0; 65 border-bottom: 4px solid transparent; 66 } 67 68 &:focus { 69 box-shadow: inset 0 0 0 1.5px #007cba, inset 0 -4px 0 0 #007cba; 70 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); 71 } 72 } 73 74 &.disabled { 75 opacity: 0.4; 76 } 77 78 img { 79 display: inline-block; 80 width: auto; 81 height: 14px; 82 margin-right: 4px; 83 } 84 &:last-child { 85 img { 86 margin-bottom: -2px; 87 } 88 } 89 } 90 91 92 } 93 94 .redux-templates-modal-sidebar-content { 95 padding: 0 15px 15px; 96 97 h3 { 98 margin: 5px 12px 10px 0; 99 color: #757575; 100 text-transform: uppercase; 101 font-size: 11px; 102 font-weight: 500; 103 104 &::after { 105 //content: ""; 106 //width: 100%; 107 //height: 1px; 108 //margin-top: -3px; 109 //background-color: $secondaryColor; 110 //margin-left: 20px; 111 //display: block; 112 } 113 } 114 115 ul { 116 list-style: unset; 117 -webkit-touch-callout: none; /* iOS Safari */ 118 -webkit-user-select: none; /* Safari */ 119 -khtml-user-select: none; /* Konqueror HTML */ 120 -moz-user-select: none; /* Old versions of Firefox */ 121 -ms-user-select: none; /* Internet Explorer/Edge */ 122 user-select: none; 123 /* Non-prefixed version, currently 124 supported by Chrome, Edge, Opera and Firefox */ 125 126 margin: 0 15px 15px 15px; 127 padding: 0; 128 129 li { 130 display: block; 131 font-size: 13px; 132 cursor: pointer; 133 height: auto; 134 -webkit-transition: height 0.5s linear; 135 -moz-transition: height 0.5s linear; 136 -ms-transition: height 0.5s linear; 137 -o-transition: height 0.5s linear; 138 transition: height 0.5s linear; 139 .redux-icon-wrapper { 140 margin-left: 10px; 141 } 142 143 &:not(.disabled):hover { 144 color: #007cba; 145 color: var(--wp-admin-theme-color); 146 } 147 148 &.active { 149 color: #007cba; 150 color: var(--wp-admin-theme-color); 151 text-shadow: 0 0 0.5px #007cba; 152 text-shadow: 0 0 0.5px var(--wp-admin-theme-color); 153 } 154 155 &.disabled { 156 display: none; 157 height: 0px; 158 -webkit-transition: height 0.5s linear; 159 -moz-transition: height 0.5s linear; 160 -ms-transition: height 0.5s linear; 161 -o-transition: height 0.5s linear; 162 transition: height 0.5s linear; 163 } 164 165 span { 166 float: right; 167 } 168 169 &.missing-dependency { 170 i { 171 &.fa-exclamation-triangle { 172 color: $missingColor; 173 } 174 } 175 &:hover { 176 i.fa-exclamation-triangle { 177 color: $missingColorHover; 178 } 179 } 180 181 &.active { 182 i.fa-exclamation-triangle { 183 color: $missingColorHover; 184 } 185 } 186 } 187 } 188 } 189 } 190 191 ul.redux-templates-sidebar-dependencies li { 192 .components-base-control { 193 display: inline-block; 194 margin-bottom: 0 !important; 195 196 .components-base-control__field { 197 margin-bottom: 3px; 198 } 199 200 span { 201 float: none; 202 } 203 } 204 205 } 206 207 .redux-templates-select-actions { 208 //text-align: center; 209 margin: 0 0 10px 15px; 210 display: inline-flex; 211 212 i.challenge-dot { 213 margin-left: 10px; 214 } 215 &.disabled { 216 a { 217 pointer-events: none; 218 cursor: default; 219 text-decoration: none; 220 opacity: 0.6; 221 } 222 } 223 } 224 225 .redux-templates-sidebar-dependencies li a { 226 display: inline-block; 227 //color: #9b9b9b; 228 margin-left: 10px; 229 } 230 #redux-templates-filter-dependencies { 231 h3 { 232 margin-top: 0; 233 padding-top: 3px; 234 } 235 } 236 }