Revision cd670dfa
Von Hans Peter Schlaepfer vor etwa 5 Jahren hinzugefügt
- ID cd670dfafdb3560614634765e2a377946ff1809b
- Vorgänger ff33b093
| 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) |
| 31 |
//form {
|
|
| 32 |
|
|
| 33 |
// General |
|
| 34 |
input[type="button"], |
|
| 35 |
input[type="submit"], |
|
| 36 |
input[type="reset"], |
|
| 37 |
button {
|
|
| 38 |
|
|
| 39 |
.mx-button ; // Mixin |
|
| 40 |
|
|
| 41 |
&.clear { clear: left; }
|
|
| 42 |
|
|
| 43 |
// DIMENSIONS |
|
| 44 |
&.wi-verysmall { min-width: @input-wi-verysmall ; }
|
|
| 45 |
&.wi-small { min-width: @input-wi-small ; }
|
|
| 46 |
&.wi-mediumsmall { min-width: @input-wi-mediumsmall ; }
|
|
| 47 |
&.wi-normal { min-width: @input-wi-normal ; }
|
|
| 48 |
&.wi-lightwide { width: @input-wi-lightwide ; }
|
|
| 49 |
&.wi-wide { width: @input-wi-wide ; }
|
|
| 50 |
&.wi-wider { width: @input-wi-wider ; }
|
|
| 51 |
&.wi-verywide { width: @input-wi-verywide ; }
|
|
| 52 |
&.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; |
|
| 61 |
} |
|
| 62 |
&.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; |
|
| 68 |
} |
|
| 69 | 35 |
|
| 36 |
// A lot of buttons are outside of a form, so let be this tag deactivated |
|
| 37 |
//form {
|
|
| 70 | 38 |
|
| 71 |
} // /input[type="button etc."] /button |
|
| 39 |
// General |
|
| 40 |
input[type="button"], |
|
| 41 |
input[type="submit"], |
|
| 42 |
input[type="reset"], |
|
| 43 |
button {
|
|
| 44 |
|
|
| 45 |
.mx-button ; // Mixin |
|
| 46 |
|
|
| 47 |
&.clear { clear: left; }
|
|
| 48 |
|
|
| 49 |
// DIMENSIONS |
|
| 50 |
&.wi-verysmall { min-width: @input-wi-verysmall ; }
|
|
| 51 |
&.wi-small { min-width: @input-wi-small ; }
|
|
| 52 |
&.wi-mediumsmall { min-width: @input-wi-mediumsmall ; }
|
|
| 53 |
&.wi-normal { min-width: @input-wi-normal ; }
|
|
| 54 |
&.wi-lightwide { width: @input-wi-lightwide ; }
|
|
| 55 |
&.wi-wide { width: @input-wi-wide ; }
|
|
| 56 |
&.wi-wider { width: @input-wi-wider ; }
|
|
| 57 |
&.wi-verywide { width: @input-wi-verywide ; }
|
|
| 58 |
&.wi-tiny {
|
|
| 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; |
|
| 67 |
} |
|
| 68 |
&.wi-verytiny{
|
|
| 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; |
|
| 74 |
} |
|
| 75 |
|
|
| 76 |
|
|
| 77 |
} // /input[type="button etc."] |
|
| 72 | 78 |
|
| 73 | 79 |
button.icon{
|
| 74 | 80 |
padding: 0 ; |
| 75 | 81 |
margin: 0 ; |
| 76 | 82 |
background: none !important; |
| 77 |
border: none;
|
|
| 78 |
display: inline-block; |
|
| 83 |
border: 0 !important;
|
|
| 84 |
display: inline-block;
|
|
| 79 | 85 |
img { vertical-align: middle ; }
|
| 80 | 86 |
} |
| 81 | 87 |
|
| ... | ... | |
| 86 | 92 |
input[type="button"].button, |
| 87 | 93 |
button[type="submit"], |
| 88 | 94 |
button[type="button"] {
|
| 89 |
color: @btn-default-color ;
|
|
| 90 |
background-color: @btn-default-bg;
|
|
| 91 |
border-color: @btn-default-border ;
|
|
| 95 |
color: @button-strong-color ;
|
|
| 96 |
background-color: @button-strong-bg;
|
|
| 97 |
border: @button-strong-border ;
|
|
| 92 | 98 |
&:hover{
|
| 93 |
color: @btn-default-hover-color ;
|
|
| 94 |
background-color: @btn-default-hover-bg;
|
|
| 95 |
border-color: @btn-default-hover-border ;
|
|
| 99 |
color: @button-strong-hover-color ;
|
|
| 100 |
background-color: @button-strong-hover-bg;
|
|
| 101 |
border: @button-strong-hover-border ;
|
|
| 96 | 102 |
} |
| 97 | 103 |
&:active, |
| 98 | 104 |
&:focus{
|
| 99 |
color: @btn-default-active-color ;
|
|
| 100 |
background-color: @btn-default-active-bg;
|
|
| 101 |
border-color: @btn-default-active-border ;
|
|
| 105 |
color: @button-strong-active-color ;
|
|
| 106 |
background-color: @button-strong-active-bg;
|
|
| 107 |
border: @button-strong-active-border ;
|
|
| 102 | 108 |
} |
| 103 | 109 |
} |
| 104 | 110 |
|
| ... | ... | |
| 110 | 116 |
input[type="reset"].neutral, |
| 111 | 117 |
button.neutral, |
| 112 | 118 |
button[type="reset"] {
|
| 113 |
color: @btn-neutral-color ;
|
|
| 114 |
background-color: @btn-neutral-bg;
|
|
| 115 |
border-color: @btn-neutral-border ;
|
|
| 119 |
color: @button-neutral-color ;
|
|
| 120 |
background-color: @button-neutral-bg;
|
|
| 121 |
border: @button-neutral-border ;
|
|
| 116 | 122 |
&:hover {
|
| 117 |
color: @btn-neutral-hover-color ;
|
|
| 118 |
background-color: @btn-neutral-hover-bg;
|
|
| 119 |
border-color: @btn-neutral-hover-border ;
|
|
| 123 |
color: @button-neutral-hover-color ;
|
|
| 124 |
background-color: @button-neutral-hover-bg;
|
|
| 125 |
border: @button-neutral-hover-border ;
|
|
| 120 | 126 |
} |
| 121 | 127 |
&:active, |
| 122 | 128 |
&:focus {
|
| 123 |
color: @btn-neutral-active-color;
|
|
| 124 |
background-color: @btn-neutral-active-bg;
|
|
| 125 |
border-color: @btn-neutral-active-border ;
|
|
| 129 |
color: @button-neutral-active-color;
|
|
| 130 |
background-color: @button-neutral-active-bg;
|
|
| 131 |
border: @button-neutral-active-border ;
|
|
| 126 | 132 |
} |
| 127 |
} |
|
| 133 |
|
|
| 134 |
// Toggle-Button (e.g. for position details in tables) |
|
| 135 |
&.positions {
|
|
| 136 |
padding-right: 1.2em ; |
|
| 137 |
// ::after does not work in buttons |
|
| 138 |
// input#cb_show_details {
|
|
| 139 |
// &::after {
|
|
| 140 |
// content: "▸" !important ; |
|
| 141 |
// } |
|
| 142 |
// } |
|
| 143 |
// input#cb_hide_details::after {
|
|
| 144 |
// content: "▾" !important ; |
|
| 145 |
// } |
|
| 146 |
} // /.positions |
|
| 147 |
|
|
| 148 |
} // /input[type="*"].neutral |
|
| 128 | 149 |
|
| 129 | 150 |
// PENDENT: Neu |
| 130 | 151 |
input[type="button"]{
|
| 131 | 152 |
&.below{
|
| 132 | 153 |
clear: both !important; |
| 133 | 154 |
float: none; |
| 134 |
margin-top: 0.3em; |
|
| 155 |
//margin-top: 0.3em;
|
|
| 135 | 156 |
overflow: hidden ; |
| 136 | 157 |
} |
| 137 | 158 |
} |
| 138 | 159 |
//} // /form |
| 139 | 160 |
|
| 140 | 161 |
|
| 162 |
|
|
| 163 |
|
|
| 164 |
|
|
| 141 | 165 |
|
| 142 | 166 |
|
| 143 | 167 |
// -------------------------------------- |
| ... | ... | |
| 175 | 199 |
&.wi-verywide { min-width: @input-wi-verywide ; }
|
| 176 | 200 |
// Tiny button (one letter button) |
| 177 | 201 |
&.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% ;
|
|
| 202 |
display: inline-block;
|
|
| 203 |
width: auto ;
|
|
| 204 |
padding: 0.16em 0.2em 0.1em 0.2em;
|
|
| 205 |
margin: -0.3em 0 0 0.2em;
|
|
| 206 |
font-size: 84% ;
|
|
| 183 | 207 |
} |
| 184 | 208 |
|
| 185 | 209 |
// Toggle (for filters e.g.) |
| 186 | 210 |
&.toggle {
|
| 211 |
background-color: @controlpanel-bg-color !important ; |
|
| 212 |
|
|
| 187 | 213 |
&.off::after{
|
| 188 | 214 |
content: " ▸"; |
| 189 | 215 |
padding-right: 1.0em; |
| ... | ... | |
| 197 | 223 |
border-bottom: none; |
| 198 | 224 |
border-bottom-left-radius: 0px ; |
| 199 | 225 |
border-bottom-right-radius: 0px ; |
| 226 |
&:hover {
|
|
| 227 |
border-top: @controlpanel-border !important ; |
|
| 228 |
border-right: @controlpanel-border !important ; |
|
| 229 |
border-bottom: 0 !important; |
|
| 230 |
border-left: @controlpanel-border !important ; |
|
| 231 |
} |
|
| 200 | 232 |
} |
| 201 | 233 |
&:hover{
|
| 202 |
background-color: @btn-neutral-bg !important;
|
|
| 203 |
border-color: @btn-neutral-border !important ;
|
|
| 204 |
color: @btn-neutral-color;
|
|
| 234 |
background-color: @button-neutral-bg !important;
|
|
| 235 |
border: @controlpanel-border !important ;
|
|
| 236 |
color: @button-neutral-color;
|
|
| 205 | 237 |
text-decoration: none; |
| 206 | 238 |
} |
| 207 | 239 |
} // /.toggle |
| ... | ... | |
| 238 | 270 |
// -------------------------------------- |
| 239 | 271 |
// Container fuer Buttons |
| 240 | 272 |
div.buttons {
|
| 241 |
padding: 1.0em ;
|
|
| 242 |
clear: left ;
|
|
| 243 |
display: block;
|
|
| 244 |
// PENDENT: anschauen, ist fuer Anzeige von Positionsdetails
|
|
| 273 |
padding: 1.0em ; |
|
| 274 |
clear: left ; |
|
| 275 |
display: block; |
|
| 276 |
// PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
|
|
| 245 | 277 |
&.positions {
|
| 246 |
margin: 0 0 -2.0em 26.0em;
|
|
| 247 |
padding: 0em;
|
|
| 278 |
margin: 0 0 -1.7em 26.0em;
|
|
| 279 |
padding: 0em; |
|
| 248 | 280 |
} |
| 249 | 281 |
&.below {
|
| 250 |
padding: 0 ;
|
|
| 251 |
margin: 0 ;
|
|
| 282 |
padding: 0 ; |
|
| 283 |
margin: 0 ; |
|
| 252 | 284 |
} |
| 253 | 285 |
} |
| 254 | 286 |
.col > .buttons, |
| 255 | 287 |
.wrapper * .buttons {
|
| 256 |
padding: 1.0em 1.0em 1.0em 0 !important;
|
|
| 288 |
padding: 1.0em 1.0em 1.0em 0 !important; |
|
| 257 | 289 |
} |
| 258 | 290 |
|
| 259 | 291 |
|
| ... | ... | |
| 278 | 310 |
} |
| 279 | 311 |
input[type="button"].button-image{
|
| 280 | 312 |
&.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;
|
|
| 313 |
background-image: url("image/cross.png");
|
|
| 314 |
background-repeat: no-repeat;
|
|
| 315 |
background-position: 0 0;
|
|
| 316 |
color: #fff;
|
|
| 317 |
background-color: transparent;
|
|
| 318 |
border-color: none;
|
|
| 319 |
border-width: 0;
|
|
| 288 | 320 |
} |
| 289 | 321 |
} |
| 290 | 322 |
|
Auch abrufbar als: Unified diff
Erweiterung und Optimierung less und css fuer Design 4.0