Revision 00462921
Von Hans P. Schlaepfer vor mehr als 3 Jahren hinzugefügt
| css/less/buttons.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* BUTTONS (buttons.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// BUTTONS (FORM BUTTONS & LINKS AS BUTTONS) |
| ... | ... | |
| 28 | 32 |
// At first we tried to nest the buttons within the form element, |
| 29 | 33 |
// but it is not possible because some forms do not have a form element |
| 30 | 34 |
// (e.g. print dialog) |
| 35 |
|
|
| 36 |
// A lot of buttons are outside of a form, so let be this tag deactivated |
|
| 31 | 37 |
//form {
|
| 32 | 38 |
|
| 33 | 39 |
// General |
| ... | ... | |
| 50 | 56 |
&.wi-wider { width: @input-wi-wider ; }
|
| 51 | 57 |
&.wi-verywide { width: @input-wi-verywide ; }
|
| 52 | 58 |
&.wi-tiny {
|
| 53 |
width: auto ; |
|
| 54 |
padding: 0.16em 0.2em 0.1em 0.2em; |
|
| 55 |
margin: -0.3em 0 0 0.2em; |
|
| 56 |
//float: right; |
|
| 57 |
display: inline-block; |
|
| 58 |
font-size: 84% ; |
|
| 59 |
min-height: 23px; |
|
| 60 |
max-height: 23px; |
|
| 59 |
width: auto ;
|
|
| 60 |
padding: 0.16em 0.2em 0.1em 0.2em;
|
|
| 61 |
margin: -0.3em 0 0 0.2em;
|
|
| 62 |
//float: right;
|
|
| 63 |
display: inline-block;
|
|
| 64 |
font-size: 84% ;
|
|
| 65 |
min-height: 23px;
|
|
| 66 |
max-height: 23px;
|
|
| 61 | 67 |
} |
| 62 | 68 |
&.wi-verytiny{
|
| 63 |
font-size: 8pt !important; |
|
| 64 |
padding: 0.0em 0.3em 0.1em 0.3em; |
|
| 65 |
display: inline-block; |
|
| 66 |
min-height: 17px; |
|
| 67 |
max-height: 17px; |
|
| 69 |
font-size: 8pt !important;
|
|
| 70 |
padding: 0.0em 0.3em 0.1em 0.3em;
|
|
| 71 |
display: inline-block;
|
|
| 72 |
min-height: 17px;
|
|
| 73 |
max-height: 17px;
|
|
| 68 | 74 |
} |
| 69 | 75 |
|
| 70 |
|
|
| 71 |
} // /input[type="button etc."] /button |
|
| 76 |
} // /input[type="button etc."] |
|
| 72 | 77 |
|
| 73 | 78 |
button.icon{
|
| 74 |
padding: 0 ; |
|
| 75 |
margin: 0 ; |
|
| 76 |
background: none !important; |
|
| 77 |
border: none;
|
|
| 78 |
display: inline-block; |
|
| 79 |
padding: 0 ;
|
|
| 80 |
margin: 0 ;
|
|
| 81 |
background: none !important;
|
|
| 82 |
border: 0 !important;
|
|
| 83 |
display: inline-block;
|
|
| 79 | 84 |
img { vertical-align: middle ; }
|
| 80 | 85 |
} |
| 81 | 86 |
|
| ... | ... | |
| 86 | 91 |
input[type="button"].button, |
| 87 | 92 |
button[type="submit"], |
| 88 | 93 |
button[type="button"] {
|
| 89 |
color: @btn-default-color ;
|
|
| 90 |
background-color: @btn-default-bg;
|
|
| 91 |
border-color: @btn-default-border ;
|
|
| 94 |
color: @button-strong-color ;
|
|
| 95 |
background-color: @button-strong-bg;
|
|
| 96 |
border: @button-strong-border ;
|
|
| 92 | 97 |
&:hover{
|
| 93 |
color: @btn-default-hover-color ;
|
|
| 94 |
background-color: @btn-default-hover-bg;
|
|
| 95 |
border-color: @btn-default-hover-border ;
|
|
| 98 |
color: @button-strong-hover-color ;
|
|
| 99 |
background-color: @button-strong-hover-bg;
|
|
| 100 |
border: @button-strong-hover-border ;
|
|
| 96 | 101 |
} |
| 97 | 102 |
&:active, |
| 98 | 103 |
&:focus{
|
| 99 |
color: @btn-default-active-color ;
|
|
| 100 |
background-color: @btn-default-active-bg;
|
|
| 101 |
border-color: @btn-default-active-border ;
|
|
| 104 |
color: @button-strong-active-color ;
|
|
| 105 |
background-color: @button-strong-active-bg;
|
|
| 106 |
border: @button-strong-active-border ;
|
|
| 102 | 107 |
} |
| 103 | 108 |
} |
| 104 | 109 |
|
| ... | ... | |
| 110 | 115 |
input[type="reset"].neutral, |
| 111 | 116 |
button.neutral, |
| 112 | 117 |
button[type="reset"] {
|
| 113 |
color: @btn-neutral-color ;
|
|
| 114 |
background-color: @btn-neutral-bg;
|
|
| 115 |
border-color: @btn-neutral-border ;
|
|
| 118 |
color: @button-neutral-color ;
|
|
| 119 |
background-color: @button-neutral-bg;
|
|
| 120 |
border: @button-neutral-border ;
|
|
| 116 | 121 |
&:hover {
|
| 117 |
color: @btn-neutral-hover-color ;
|
|
| 118 |
background-color: @btn-neutral-hover-bg;
|
|
| 119 |
border-color: @btn-neutral-hover-border ;
|
|
| 122 |
color: @button-neutral-hover-color ;
|
|
| 123 |
background-color: @button-neutral-hover-bg;
|
|
| 124 |
border: @button-neutral-hover-border ;
|
|
| 120 | 125 |
} |
| 121 | 126 |
&:active, |
| 122 | 127 |
&:focus {
|
| 123 |
color: @btn-neutral-active-color;
|
|
| 124 |
background-color: @btn-neutral-active-bg;
|
|
| 125 |
border-color: @btn-neutral-active-border ;
|
|
| 128 |
color: @button-neutral-active-color;
|
|
| 129 |
background-color: @button-neutral-active-bg;
|
|
| 130 |
border: @button-neutral-active-border ;
|
|
| 126 | 131 |
} |
| 127 |
} |
|
| 132 |
|
|
| 133 |
// Toggle-Button (e.g. for position details in tables) |
|
| 134 |
&.positions {
|
|
| 135 |
padding-right: 1.2em ; |
|
| 136 |
// ::after does not work in buttons |
|
| 137 |
// input#cb_show_details {
|
|
| 138 |
// &::after {
|
|
| 139 |
// content: "▸" !important ; |
|
| 140 |
// } |
|
| 141 |
// } |
|
| 142 |
// input#cb_hide_details::after {
|
|
| 143 |
// content: "▾" !important ; |
|
| 144 |
// } |
|
| 145 |
} // /.positions |
|
| 146 |
|
|
| 147 |
} // /input[type="*"].neutral |
|
| 128 | 148 |
|
| 129 | 149 |
// PENDENT: Neu |
| 130 | 150 |
input[type="button"]{
|
| 131 | 151 |
&.below{
|
| 132 | 152 |
clear: both !important; |
| 133 | 153 |
float: none; |
| 134 |
margin-top: 0.3em; |
|
| 154 |
//margin-top: 0.3em;
|
|
| 135 | 155 |
overflow: hidden ; |
| 136 | 156 |
} |
| 137 | 157 |
} |
| ... | ... | |
| 140 | 160 |
|
| 141 | 161 |
|
| 142 | 162 |
|
| 163 |
|
|
| 164 |
|
|
| 165 |
|
|
| 143 | 166 |
// -------------------------------------- |
| 144 | 167 |
// LINKS DESIGNED AS BUTTONS |
| 145 | 168 |
// They may be placed inside or outside a form |
| ... | ... | |
| 175 | 198 |
&.wi-verywide { min-width: @input-wi-verywide ; }
|
| 176 | 199 |
// Tiny button (one letter button) |
| 177 | 200 |
&.wi-tiny {
|
| 178 |
display: inline-block;
|
|
| 179 |
width: auto ;
|
|
| 180 |
padding: 0.16em 0.2em 0.1em 0.2em;
|
|
| 181 |
margin: -0.3em 0 0 0.2em;
|
|
| 182 |
font-size: 84% ;
|
|
| 201 |
display: inline-block; |
|
| 202 |
width: auto ; |
|
| 203 |
padding: 0.16em 0.2em 0.1em 0.2em; |
|
| 204 |
margin: -0.3em 0 0 0.2em; |
|
| 205 |
font-size: 84% ; |
|
| 183 | 206 |
} |
| 184 | 207 |
|
| 185 | 208 |
// Toggle (for filters e.g.) |
| 186 | 209 |
&.toggle {
|
| 210 |
background-color: @controlpanel-bg-color !important ; |
|
| 211 |
|
|
| 187 | 212 |
&.off::after{
|
| 188 | 213 |
content: " ▸"; |
| 189 | 214 |
padding-right: 1.0em; |
| ... | ... | |
| 197 | 222 |
border-bottom: none; |
| 198 | 223 |
border-bottom-left-radius: 0px ; |
| 199 | 224 |
border-bottom-right-radius: 0px ; |
| 225 |
&:hover {
|
|
| 226 |
border-top: @controlpanel-border !important ; |
|
| 227 |
border-right: @controlpanel-border !important ; |
|
| 228 |
border-bottom: 0 !important; |
|
| 229 |
border-left: @controlpanel-border !important ; |
|
| 230 |
} |
|
| 200 | 231 |
} |
| 201 | 232 |
&:hover{
|
| 202 |
background-color: @btn-neutral-bg !important;
|
|
| 203 |
border-color: @btn-neutral-border !important ;
|
|
| 204 |
color: @btn-neutral-color;
|
|
| 233 |
background-color: @button-neutral-bg !important;
|
|
| 234 |
border: @controlpanel-border !important ;
|
|
| 235 |
color: @button-neutral-color;
|
|
| 205 | 236 |
text-decoration: none; |
| 206 | 237 |
} |
| 207 | 238 |
} // /.toggle |
| ... | ... | |
| 238 | 269 |
// -------------------------------------- |
| 239 | 270 |
// Container fuer Buttons |
| 240 | 271 |
div.buttons {
|
| 241 |
padding: 1.0em ;
|
|
| 242 |
clear: left ;
|
|
| 243 |
display: block;
|
|
| 244 |
// PENDENT: anschauen, ist fuer Anzeige von Positionsdetails
|
|
| 272 |
padding: 1.0em ; |
|
| 273 |
clear: left ; |
|
| 274 |
display: block; |
|
| 275 |
// PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
|
|
| 245 | 276 |
&.positions {
|
| 246 |
margin: 0 0 -2.0em 26.0em; |
|
| 247 |
padding: 0em; |
|
| 277 |
margin: 0 0 -1.9em 26.0em; |
|
| 278 |
padding: 0em; |
|
| 279 |
label.button.neutral, |
|
| 280 |
input.positions {
|
|
| 281 |
border-bottom-left-radius: 0 !important; |
|
| 282 |
border-bottom-right-radius: 0 !important; |
|
| 283 |
padding-bottom: 0.6em !important; |
|
| 284 |
margin-bottom: -0.8em !important; |
|
| 285 |
background: none !important; |
|
| 286 |
border-bottom: none !important; |
|
| 287 |
} |
|
| 288 |
input.positions{
|
|
| 289 |
|
|
| 290 |
} |
|
| 248 | 291 |
} |
| 249 | 292 |
&.below {
|
| 250 |
padding: 0 ;
|
|
| 251 |
margin: 0 ;
|
|
| 293 |
padding: 0 ; |
|
| 294 |
margin: 0 ; |
|
| 252 | 295 |
} |
| 253 | 296 |
} |
| 254 | 297 |
.col > .buttons, |
| 255 | 298 |
.wrapper * .buttons {
|
| 256 |
padding: 1.0em 1.0em 1.0em 0 !important;
|
|
| 299 |
padding: 1.0em 1.0em 1.0em 0 !important; |
|
| 257 | 300 |
} |
| 258 | 301 |
|
| 259 | 302 |
|
| ... | ... | |
| 278 | 321 |
} |
| 279 | 322 |
input[type="button"].button-image{
|
| 280 | 323 |
&.delete {
|
| 281 |
background-image: url("image/cross.png");
|
|
| 282 |
background-repeat: no-repeat;
|
|
| 283 |
background-position: 0 0;
|
|
| 284 |
color: #fff;
|
|
| 285 |
background-color:transparent;
|
|
| 286 |
border-color: none;
|
|
| 287 |
border-width: 0;
|
|
| 324 |
background-image: url("image/cross.png");
|
|
| 325 |
background-repeat: no-repeat;
|
|
| 326 |
background-position: 0 0;
|
|
| 327 |
color: #fff;
|
|
| 328 |
background-color: transparent;
|
|
| 329 |
border-color: none;
|
|
| 330 |
border-width: 0;
|
|
| 288 | 331 |
} |
| 289 | 332 |
} |
| 290 | 333 |
|
Auch abrufbar als: Unified diff
css/less -> Geaenderte & Neue Less-Dateien