projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * @class Ext.Button\r | |
| 3 | */\r | |
| 4 | \r | |
| 5 | /**\r | |
| 6 | * @var {color}\r | |
| 7 | * Button background-color\r | |
| 8 | */\r | |
| 9 | $button-background-color: dynamic($neutral-light-color);\r | |
| 10 | \r | |
| 11 | /**\r | |
| 12 | * @var {color}\r | |
| 13 | * Button background-color when pressed\r | |
| 14 | */\r | |
| 15 | $button-pressed-background-color: dynamic(button-pressed-background-color($button-background-color));\r | |
| 16 | \r | |
| 17 | /**\r | |
| 18 | * @var {string/list}\r | |
| 19 | * Button background-gradient. Can be either the name of a gradient defined by\r | |
| 20 | * {@link Global_CSS#background-gradient} or a list of color stops.\r | |
| 21 | */\r | |
| 22 | $button-background-gradient: dynamic(button-background-gradient($button-background-color));\r | |
| 23 | \r | |
| 24 | /**\r | |
| 25 | * @var {string/list}\r | |
| 26 | * Button background-gradient when pressed. Can be either the name of a gradient\r | |
| 27 | * defined by {@link Global_CSS#background-gradient} or a list of color stops.\r | |
| 28 | */\r | |
| 29 | $button-pressed-background-gradient: dynamic(button-pressed-background-gradient($button-pressed-background-color));\r | |
| 30 | \r | |
| 31 | /**\r | |
| 32 | * @var {color}\r | |
| 33 | * Button text color\r | |
| 34 | */\r | |
| 35 | $button-color: dynamic($highlight-color);\r | |
| 36 | \r | |
| 37 | /**\r | |
| 38 | * @var {color}\r | |
| 39 | * Button text color when pressed\r | |
| 40 | */\r | |
| 41 | $button-pressed-color: dynamic(button-color($button-pressed-background-color));\r | |
| 42 | \r | |
| 43 | /**\r | |
| 44 | * @var {color/list}\r | |
| 45 | * Button border-color\r | |
| 46 | */\r | |
| 47 | $button-border-color: dynamic(button-border-color($button-background-color));\r | |
| 48 | \r | |
| 49 | /**\r | |
| 50 | * @var {color/list}\r | |
| 51 | * Button border-color when pressed\r | |
| 52 | */\r | |
| 53 | $button-pressed-border-color: dynamic(button-pressed-border-color($button-pressed-background-color));\r | |
| 54 | \r | |
| 55 | /**\r | |
| 56 | * @var {number/list}\r | |
| 57 | * Button border-width\r | |
| 58 | */\r | |
| 59 | $button-border-width: dynamic(1px);\r | |
| 60 | \r | |
| 61 | /**\r | |
| 62 | * @var {string/list}\r | |
| 63 | * Button border-style\r | |
| 64 | */\r | |
| 65 | $button-border-style: dynamic(solid);\r | |
| 66 | \r | |
| 67 | /**\r | |
| 68 | * @var {number}\r | |
| 69 | * Button border-radius\r | |
| 70 | */\r | |
| 71 | $button-border-radius: dynamic(.25em);\r | |
| 72 | \r | |
| 73 | /**\r | |
| 74 | * @var {number}\r | |
| 75 | * Button border-radius in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 76 | */\r | |
| 77 | $button-border-radius-big: dynamic(.2em);\r | |
| 78 | \r | |
| 79 | /**\r | |
| 80 | * @var {string/number}\r | |
| 81 | * Button font-weight\r | |
| 82 | */\r | |
| 83 | $button-font-weight: dynamic($font-weight-bold);\r | |
| 84 | \r | |
| 85 | /**\r | |
| 86 | * @var {number}\r | |
| 87 | * Button font-size\r | |
| 88 | */\r | |
| 89 | $button-font-size: dynamic(1rem);\r | |
| 90 | \r | |
| 91 | /**\r | |
| 92 | * @var {number}\r | |
| 93 | * Button font-size in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 94 | */\r | |
| 95 | $button-font-size-big: dynamic($button-font-size);\r | |
| 96 | \r | |
| 97 | /**\r | |
| 98 | * @var {number}\r | |
| 99 | * Button line-height\r | |
| 100 | */\r | |
| 101 | $button-line-height: dynamic(1.23em);\r | |
| 102 | \r | |
| 103 | /**\r | |
| 104 | * @var {number}\r | |
| 105 | * Button line-height in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 106 | */\r | |
| 107 | $button-line-height-big: dynamic(1.6em);\r | |
| 108 | \r | |
| 109 | /**\r | |
| 110 | * @var {string}\r | |
| 111 | * Button font-family\r | |
| 112 | */\r | |
| 113 | $button-font-family: dynamic($font-family);\r | |
| 114 | \r | |
| 115 | /**\r | |
| 116 | * @var {number/list}\r | |
| 117 | * Button padding\r | |
| 118 | */\r | |
| 119 | $button-padding: dynamic(.23em .6em);\r | |
| 120 | \r | |
| 121 | /**\r | |
| 122 | * @var {number/list}\r | |
| 123 | * Button padding in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 124 | */\r | |
| 125 | $button-padding-big: dynamic(.2em .6em);\r | |
| 126 | \r | |
| 127 | /**\r | |
| 128 | * @var {color}\r | |
| 129 | * Button icon color.\r | |
| 130 | */\r | |
| 131 | $button-icon-color: dynamic($button-color);\r | |
| 132 | \r | |
| 133 | /**\r | |
| 134 | * @var {color}\r | |
| 135 | * Button icon color when pressed.\r | |
| 136 | */\r | |
| 137 | $button-pressed-icon-color: dynamic(button-color($button-pressed-background-color));\r | |
| 138 | \r | |
| 139 | /**\r | |
| 140 | * @var {number}\r | |
| 141 | * Button icon size. If specified in terms of `em` units, the icon will be sized\r | |
| 142 | * relative to {@link #$button-icon-font-size}.\r | |
| 143 | */\r | |
| 144 | $button-icon-size: dynamic(1em);\r | |
| 145 | \r | |
| 146 | /**\r | |
| 147 | * @var {number}\r | |
| 148 | * Button icon size in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 149 | * If specified in terms of `em` units, the icon will be sized\r | |
| 150 | * relative to {@link #$button-icon-font-size-big}.\r | |
| 151 | */\r | |
| 152 | $button-icon-size-big: dynamic(1em);\r | |
| 153 | \r | |
| 154 | /**\r | |
| 155 | * @var {number}\r | |
| 156 | * Button icon font-size. Used for configuring the size of font icons\r | |
| 157 | */\r | |
| 158 | $button-icon-font-size: dynamic($button-line-height);\r | |
| 159 | \r | |
| 160 | /**\r | |
| 161 | * @var {number}\r | |
| 162 | * Button icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 163 | */\r | |
| 164 | $button-icon-font-size-big: dynamic($button-line-height-big);\r | |
| 165 | \r | |
| 166 | /**\r | |
| 167 | * @var {number}\r | |
| 168 | * The space between the button icon and text when the icon is horizontally aligned\r | |
| 169 | */\r | |
| 170 | $button-icon-horizontal-spacing: dynamic(.6em);\r | |
| 171 | \r | |
| 172 | /**\r | |
| 173 | * @var {number}\r | |
| 174 | * The space between the button icon and text when the icon is horizontally aligned\r | |
| 175 | * in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 176 | */\r | |
| 177 | $button-icon-horizontal-spacing-big: dynamic($button-icon-horizontal-spacing);\r | |
| 178 | \r | |
| 179 | /**\r | |
| 180 | * @var {number}\r | |
| 181 | * The space between the button icon and text when the icon is vertically aligned\r | |
| 182 | */\r | |
| 183 | $button-icon-vertical-spacing: dynamic(.2em);\r | |
| 184 | \r | |
| 185 | /**\r | |
| 186 | * @var {number}\r | |
| 187 | * The space between the button icon and text when the icon is vertically aligned\r | |
| 188 | * in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 189 | */\r | |
| 190 | $button-icon-vertical-spacing-big: dynamic($button-icon-vertical-spacing);\r | |
| 191 | \r | |
| 192 | /**\r | |
| 193 | * @var {number}\r | |
| 194 | * Button opacity when disabled\r | |
| 195 | */\r | |
| 196 | $button-disabled-opacity: dynamic(.5);\r | |
| 197 | \r | |
| 198 | /**\r | |
| 199 | * @var {color}\r | |
| 200 | * The background-color of the button's {@link #badgeText badge}\r | |
| 201 | */\r | |
| 202 | $button-badge-background-color: dynamic(darken($alert-color, 10%));\r | |
| 203 | \r | |
| 204 | /**\r | |
| 205 | * @var {string/list}\r | |
| 206 | * The background-gradient of the button's {@link #badgeText badge} Can be either the name\r | |
| 207 | * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops.\r | |
| 208 | */\r | |
| 209 | $button-badge-background-gradient: dynamic($base-background-gradient);\r | |
| 210 | \r | |
| 211 | /**\r | |
| 212 | * @var {color}\r | |
| 213 | * The text color of the button's {@link #badgeText badge}\r | |
| 214 | */\r | |
| 215 | $button-badge-color: dynamic(color-by-background($button-badge-background-color));\r | |
| 216 | \r | |
| 217 | /**\r | |
| 218 | * @var {color}\r | |
| 219 | * The border-color of the button's {@link #badgeText badge}\r | |
| 220 | */\r | |
| 221 | $button-badge-border-color: dynamic(darken($button-badge-background-color, 10%));\r | |
| 222 | \r | |
| 223 | /**\r | |
| 224 | * @var {number/list}\r | |
| 225 | * The border-radius of the button's {@link #badgeText badge}\r | |
| 226 | */\r | |
| 227 | $button-badge-border-radius: dynamic(.2em);\r | |
| 228 | \r | |
| 229 | /**\r | |
| 230 | * @var {number}\r | |
| 231 | * The min-width of the button's {@link #badgeText badge}\r | |
| 232 | */\r | |
| 233 | $button-badge-min-width: dynamic(2em);\r | |
| 234 | \r | |
| 235 | /**\r | |
| 236 | * @var {number}\r | |
| 237 | * The max-width of the button's {@link #badgeText badge}\r | |
| 238 | */\r | |
| 239 | $button-badge-max-width: dynamic(95%);\r | |
| 240 | \r | |
| 241 | /**\r | |
| 242 | * @var {string/number}\r | |
| 243 | * The font-weight of the button's {@link #badgeText badge}\r | |
| 244 | */\r | |
| 245 | $button-badge-font-weight: dynamic(null);\r | |
| 246 | \r | |
| 247 | /**\r | |
| 248 | * @var {number}\r | |
| 249 | * The font-size of the button's {@link #badgeText badge}\r | |
| 250 | */\r | |
| 251 | $button-badge-font-size: dynamic(1em);\r | |
| 252 | \r | |
| 253 | /**\r | |
| 254 | * @var {string}\r | |
| 255 | * The font-family of the button's {@link #badgeText badge}\r | |
| 256 | */\r | |
| 257 | $button-badge-font-family: dynamic($button-font-family);\r | |
| 258 | \r | |
| 259 | /**\r | |
| 260 | * @var {number}\r | |
| 261 | * The line-height of the button's {@link #badgeText badge}\r | |
| 262 | */\r | |
| 263 | $button-badge-line-height: dynamic($button-line-height);\r | |
| 264 | \r | |
| 265 | /**\r | |
| 266 | * @var {number}\r | |
| 267 | * Offset of the {@link #badgeText badge} from the top of the button\r | |
| 268 | */\r | |
| 269 | $button-badge-top: dynamic(-.2em);\r | |
| 270 | \r | |
| 271 | /**\r | |
| 272 | * @var {number}\r | |
| 273 | * Offset of the {@link #badgeText badge} from the right of the button\r | |
| 274 | */\r | |
| 275 | $button-badge-right: dynamic(0);\r | |
| 276 | \r | |
| 277 | /**\r | |
| 278 | * @var {number}\r | |
| 279 | * Offset of the {@link #badgeText badge} from the bottom of the button\r | |
| 280 | */\r | |
| 281 | $button-badge-bottom: dynamic(null);\r | |
| 282 | \r | |
| 283 | /**\r | |
| 284 | * @var {number}\r | |
| 285 | * Offset of the {@link #badgeText badge} from the left of the button\r | |
| 286 | */\r | |
| 287 | $button-badge-left: dynamic(null);\r | |
| 288 | \r | |
| 289 | /**\r | |
| 290 | * @var {number}\r | |
| 291 | * The padding of the button's {@link #badgeText badge}\r | |
| 292 | */\r | |
| 293 | $button-badge-padding: dynamic(.1em .3em);\r | |
| 294 | \r | |
| 295 | /**\r | |
| 296 | * @var {boolean}\r | |
| 297 | * `true` to include the "action" button UI\r | |
| 298 | */\r | |
| 299 | $button-action-ui: dynamic($include-default-uis);\r | |
| 300 | \r | |
| 301 | /**\r | |
| 302 | * @var {boolean}\r | |
| 303 | * `true` to include the "confirm" button UI\r | |
| 304 | */\r | |
| 305 | $button-confirm-ui: dynamic($include-default-uis);\r | |
| 306 | \r | |
| 307 | /**\r | |
| 308 | * @var {boolean}\r | |
| 309 | * `true` to include the "decline" button UI\r | |
| 310 | */\r | |
| 311 | $button-decline-ui: dynamic($include-default-uis);\r | |
| 312 | \r | |
| 313 | /**\r | |
| 314 | * @var {boolean}\r | |
| 315 | * `true` to include the "round" button UI\r | |
| 316 | */\r | |
| 317 | $button-round-ui: dynamic($include-default-uis);\r | |
| 318 | \r | |
| 319 | /**\r | |
| 320 | * @var {boolean}\r | |
| 321 | * `true` to include the "small" button UI\r | |
| 322 | */\r | |
| 323 | $button-small-ui: dynamic($include-default-uis);\r | |
| 324 | \r | |
| 325 | \r | |
| 326 | /**\r | |
| 327 | * Creates a visual theme for a Button.\r | |
| 328 | *\r | |
| 329 | * @param {string} $ui\r | |
| 330 | * The name of the UI being created. Can not included spaces or special punctuation\r | |
| 331 | * (used in CSS class names).\r | |
| 332 | *\r | |
| 333 | * @param {color} $background-color\r | |
| 334 | * Button background-color\r | |
| 335 | *\r | |
| 336 | * @param {color} $pressed-background-color\r | |
| 337 | * Button background-color when pressed\r | |
| 338 | *\r | |
| 339 | * @param {string/list} $background-gradient\r | |
| 340 | * Button background-gradient. Can be either the name of a gradient defined by\r | |
| 341 | * {@link Global_CSS#background-gradient} or a list of color stops.\r | |
| 342 | *\r | |
| 343 | * @param {string/list} $pressed-background-gradient\r | |
| 344 | * Button background-gradient when pressed. Can be either the name of a gradient\r | |
| 345 | * defined by {@link Global_CSS#background-gradient} or a list of color stops.\r | |
| 346 | *\r | |
| 347 | * @param {color} $color\r | |
| 348 | * Button text color\r | |
| 349 | *\r | |
| 350 | * @param {color} $pressed-color\r | |
| 351 | * Button text color when pressed\r | |
| 352 | *\r | |
| 353 | * @param {color/list} $border-color\r | |
| 354 | * Button border-color\r | |
| 355 | *\r | |
| 356 | * @param {color/list} $pressed-border-color\r | |
| 357 | * Button border-color when pressed\r | |
| 358 | *\r | |
| 359 | * @param {number/list} $border-width\r | |
| 360 | * Button border-width\r | |
| 361 | *\r | |
| 362 | * @param {number/list} $border-style\r | |
| 363 | * Button border-style\r | |
| 364 | *\r | |
| 365 | * @param {number} $border-radius\r | |
| 366 | * Button border-radius\r | |
| 367 | *\r | |
| 368 | * @param {number} $border-radius-big\r | |
| 369 | * Button border-radius in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 370 | *\r | |
| 371 | * @param {number} $font-weight\r | |
| 372 | * Button font-weight\r | |
| 373 | *\r | |
| 374 | * @param {number} $font-size\r | |
| 375 | * Button font-size\r | |
| 376 | *\r | |
| 377 | * @param {number} $font-size-big\r | |
| 378 | * Button font-size in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 379 | *\r | |
| 380 | * @param {number} $line-height\r | |
| 381 | * Button line-height\r | |
| 382 | *\r | |
| 383 | * @param {number} $line-height-big\r | |
| 384 | * Button line-height in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 385 | *\r | |
| 386 | * @param {font-family} $font-family\r | |
| 387 | * Button font-family\r | |
| 388 | *\r | |
| 389 | * @param {number/list} $padding\r | |
| 390 | * Button padding\r | |
| 391 | *\r | |
| 392 | * @param {number/list} $padding-big\r | |
| 393 | * Button padding in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 394 | *\r | |
| 395 | * @param {color} $icon-color\r | |
| 396 | * Button icon color.\r | |
| 397 | *\r | |
| 398 | * @param {color} $pressed-icon-color\r | |
| 399 | * Button icon color when pressed.\r | |
| 400 | *\r | |
| 401 | * @param {number} $icon-size\r | |
| 402 | * @param {number} $icon-size\r | |
| 403 | * Button icon size\r | |
| 404 | *\r | |
| 405 | * @param {number} $icon-size-big\r | |
| 406 | * Button icon size in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 407 | *\r | |
| 408 | * @param {number} $icon-font-size\r | |
| 409 | * Button icon font-size. Used for configuring the size of font icons\r | |
| 410 | *\r | |
| 411 | * @param {number} $icon-font-size-big\r | |
| 412 | * Button icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 413 | *\r | |
| 414 | * @param {number} $icon-horizontal-spacing\r | |
| 415 | * The space between the button icon and text when the icon is horizontally aligned\r | |
| 416 | *\r | |
| 417 | * @param {number} $icon-horizontal-spacing-big\r | |
| 418 | * The space between the button icon and text when the icon is horizontally aligned\r | |
| 419 | * in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 420 | *\r | |
| 421 | * @param {number} $icon-vertical-spacing\r | |
| 422 | * The space between the button icon and text when the icon is vertically aligned\r | |
| 423 | *\r | |
| 424 | * @param {number} $icon-vertical-spacing-big\r | |
| 425 | * The space between the button icon and text when the icon is vertically aligned\r | |
| 426 | * in the {@link Global_CSS#$enable-big big} sizing scheme\r | |
| 427 | *\r | |
| 428 | * @param {number} $disabled-opacity\r | |
| 429 | * Button opacity when disabled\r | |
| 430 | *\r | |
| 431 | * @param {color} $badge-background-color\r | |
| 432 | * The background-color of the button's {@link #badgeText badge}\r | |
| 433 | *\r | |
| 434 | * @param {string/list} $badge-background-gradient\r | |
| 435 | * The background-gradient of the button's {@link #badgeText badge} Can be either the name\r | |
| 436 | * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops.\r | |
| 437 | *\r | |
| 438 | * @param {color} $badge-color\r | |
| 439 | * The text color of the button's {@link #badgeText badge}\r | |
| 440 | *\r | |
| 441 | * @param {color} $badge-border-color\r | |
| 442 | * The border-color of the button's {@link #badgeText badge}\r | |
| 443 | *\r | |
| 444 | * @param {number/list} $badge-border-radius\r | |
| 445 | * The border-radius of the button's {@link #badgeText badge}\r | |
| 446 | *\r | |
| 447 | * @param {number} $badge-min-width\r | |
| 448 | * The min-width of the button's {@link #badgeText badge}\r | |
| 449 | *\r | |
| 450 | * @param {number} $badge-max-width\r | |
| 451 | * The max-width of the button's {@link #badgeText badge}\r | |
| 452 | *\r | |
| 453 | * @param {number} $badge-font-weight\r | |
| 454 | * The font-weight of the button's {@link #badgeText badge}\r | |
| 455 | *\r | |
| 456 | * @param {number} $badge-font-size\r | |
| 457 | * The font-size of the button's {@link #badgeText badge}\r | |
| 458 | *\r | |
| 459 | * @param {string} $badge-font-family\r | |
| 460 | * The font-family of the button's {@link #badgeText badge}\r | |
| 461 | *\r | |
| 462 | * @param {number} $badge-line-height\r | |
| 463 | * The line-height of the button's {@link #badgeText badge}\r | |
| 464 | *\r | |
| 465 | * @param {number} $badge-top\r | |
| 466 | * Offset of the {@link #badgeText badge} from the top of the button\r | |
| 467 | *\r | |
| 468 | * @param {number} $badge-right\r | |
| 469 | * Offset of the {@link #badgeText badge} from the right of the button\r | |
| 470 | *\r | |
| 471 | * @param {number} $badge-bottom\r | |
| 472 | * Offset of the {@link #badgeText badge} from the bottom of the button\r | |
| 473 | *\r | |
| 474 | * @param {number} $badge-left\r | |
| 475 | * Offset of the {@link #badgeText badge} from the left of the button\r | |
| 476 | *\r | |
| 477 | * @param {number} $badge-padding\r | |
| 478 | * The padding of the button's {@link #badgeText badge}\r | |
| 479 | *\r | |
| 480 | * @member Ext.Button\r | |
| 481 | */\r | |
| 482 | @mixin button-ui(\r | |
| 483 | $ui: null,\r | |
| 484 | \r | |
| 485 | $background-color: null,\r | |
| 486 | $pressed-background-color: null,\r | |
| 487 | \r | |
| 488 | $background-gradient: null,\r | |
| 489 | $pressed-background-gradient: null,\r | |
| 490 | \r | |
| 491 | $color: null,\r | |
| 492 | $pressed-color: null,\r | |
| 493 | \r | |
| 494 | $border-color: null,\r | |
| 495 | $pressed-border-color: null,\r | |
| 496 | \r | |
| 497 | $border-width: null,\r | |
| 498 | $border-style: null,\r | |
| 499 | \r | |
| 500 | $border-radius: null,\r | |
| 501 | $border-radius-big: null,\r | |
| 502 | \r | |
| 503 | $font-weight: null,\r | |
| 504 | $font-size: null,\r | |
| 505 | $font-size-big: null,\r | |
| 506 | $line-height: null,\r | |
| 507 | $line-height-big: null,\r | |
| 508 | $font-family: null,\r | |
| 509 | \r | |
| 510 | $padding: null,\r | |
| 511 | $padding-big: null,\r | |
| 512 | \r | |
| 513 | $icon-color: null,\r | |
| 514 | $pressed-icon-color: null,\r | |
| 515 | $icon-size: null,\r | |
| 516 | $icon-size-big: null,\r | |
| 517 | $icon-font-size: null,\r | |
| 518 | $icon-font-size-big: null,\r | |
| 519 | $icon-horizontal-spacing: null,\r | |
| 520 | $icon-horizontal-spacing-big: null,\r | |
| 521 | $icon-vertical-spacing: null,\r | |
| 522 | $icon-vertical-spacing-big: null,\r | |
| 523 | \r | |
| 524 | $disabled-opacity: null,\r | |
| 525 | \r | |
| 526 | $badge-background-color: null,\r | |
| 527 | $badge-background-gradient: null,\r | |
| 528 | $badge-color: null,\r | |
| 529 | $badge-border-color: null,\r | |
| 530 | $badge-border-radius: null,\r | |
| 531 | $badge-min-width: null,\r | |
| 532 | $badge-max-width: null,\r | |
| 533 | $badge-font-weight: null,\r | |
| 534 | $badge-font-size: null,\r | |
| 535 | $badge-font-family: null,\r | |
| 536 | $badge-line-height: null,\r | |
| 537 | $badge-top: null,\r | |
| 538 | $badge-right: null,\r | |
| 539 | $badge-bottom: null,\r | |
| 540 | $badge-left: null,\r | |
| 541 | $badge-padding: null\r | |
| 542 | ) {\r | |
| 543 | $ui-suffix: ui-suffix($ui);\r | |
| 544 | \r | |
| 545 | @if $background-color != null {\r | |
| 546 | @if $pressed-background-color == null {\r | |
| 547 | $pressed-background-color: button-pressed-background-color($background-color);\r | |
| 548 | }\r | |
| 549 | \r | |
| 550 | @if $border-color == null {\r | |
| 551 | $border-color: button-border-color($background-color);\r | |
| 552 | }\r | |
| 553 | \r | |
| 554 | @if $color == null {\r | |
| 555 | $color: button-color($background-color);\r | |
| 556 | }\r | |
| 557 | \r | |
| 558 | @if $background-gradient == null {\r | |
| 559 | $background-gradient: button-background-gradient($background-color);\r | |
| 560 | }\r | |
| 561 | }\r | |
| 562 | \r | |
| 563 | @if $pressed-background-color != null {\r | |
| 564 | @if $pressed-border-color == null {\r | |
| 565 | $pressed-border-color: button-pressed-border-color($pressed-background-color);\r | |
| 566 | }\r | |
| 567 | \r | |
| 568 | @if $pressed-color == null {\r | |
| 569 | $pressed-color: button-pressed-color($pressed-background-color);\r | |
| 570 | }\r | |
| 571 | \r | |
| 572 | @if $pressed-background-gradient == null {\r | |
| 573 | $pressed-background-gradient: button-pressed-background-gradient($pressed-background-color);\r | |
| 574 | }\r | |
| 575 | }\r | |
| 576 | \r | |
| 577 | @if $icon-color == null {\r | |
| 578 | $icon-color: $color;\r | |
| 579 | }\r | |
| 580 | \r | |
| 581 | @if $pressed-icon-color == null {\r | |
| 582 | @if $pressed-color == null and $icon-color != null {\r | |
| 583 | $pressed-icon-color: button-pressed-color($icon-color);\r | |
| 584 | } @else {\r | |
| 585 | $pressed-icon-color: $pressed-color;\r | |
| 586 | }\r | |
| 587 | }\r | |
| 588 | \r | |
| 589 | .x-button#{$ui-suffix} {\r | |
| 590 | color: $color;\r | |
| 591 | padding: $padding;\r | |
| 592 | @include font($font-weight, $font-size, $line-height, $font-family);\r | |
| 593 | @include border($border-width, $border-style, $border-color);\r | |
| 594 | \r | |
| 595 | @if $include-border-radius {\r | |
| 596 | @include border-radius($border-radius);\r | |
| 597 | }\r | |
| 598 | \r | |
| 599 | @if $enable-big {\r | |
| 600 | .x-big & {\r | |
| 601 | padding: $padding-big;\r | |
| 602 | font-size: $font-size-big;\r | |
| 603 | line-height: $line-height-big;\r | |
| 604 | @include border-radius($border-radius-big);\r | |
| 605 | }\r | |
| 606 | }\r | |
| 607 | \r | |
| 608 | @include background-gradient($background-color, $background-gradient);\r | |
| 609 | \r | |
| 610 | &.x-button-pressing, &.x-button-pressed {\r | |
| 611 | color: $pressed-color;\r | |
| 612 | @include background-gradient($pressed-background-color, $pressed-background-gradient);\r | |
| 613 | border-color: $pressed-border-color;\r | |
| 614 | }\r | |
| 615 | \r | |
| 616 | .x-button-icon {\r | |
| 617 | color: $icon-color;\r | |
| 618 | width: $icon-size;\r | |
| 619 | height: $icon-size;\r | |
| 620 | line-height: $icon-size;\r | |
| 621 | font-size: $icon-font-size;\r | |
| 622 | \r | |
| 623 | @if $enable-big {\r | |
| 624 | .x-big & {\r | |
| 625 | width: $icon-size-big;\r | |
| 626 | height: $icon-size-big;\r | |
| 627 | line-height: $icon-size-big;\r | |
| 628 | font-size: $icon-font-size-big;\r | |
| 629 | }\r | |
| 630 | }\r | |
| 631 | }\r | |
| 632 | \r | |
| 633 | &.x-iconalign-left .x-button-icon {\r | |
| 634 | margin-right: $icon-horizontal-spacing;\r | |
| 635 | \r | |
| 636 | @if $enable-big and $icon-horizontal-spacing-big != $icon-horizontal-spacing {\r | |
| 637 | .x-big & {\r | |
| 638 | margin-right: $icon-horizontal-spacing-big;\r | |
| 639 | }\r | |
| 640 | }\r | |
| 641 | }\r | |
| 642 | \r | |
| 643 | &.x-iconalign-right .x-button-icon {\r | |
| 644 | margin-left: $icon-horizontal-spacing;\r | |
| 645 | \r | |
| 646 | @if $enable-big and $icon-horizontal-spacing-big != $icon-horizontal-spacing {\r | |
| 647 | .x-big & {\r | |
| 648 | margin-left: $icon-horizontal-spacing-big;\r | |
| 649 | }\r | |
| 650 | }\r | |
| 651 | }\r | |
| 652 | \r | |
| 653 | &.x-iconalign-top .x-button-icon {\r | |
| 654 | margin-bottom: $icon-vertical-spacing;\r | |
| 655 | \r | |
| 656 | @if $enable-big and $icon-vertical-spacing-big != $icon-vertical-spacing {\r | |
| 657 | .x-big & {\r | |
| 658 | margin-bottom: $icon-vertical-spacing-big;\r | |
| 659 | }\r | |
| 660 | }\r | |
| 661 | }\r | |
| 662 | \r | |
| 663 | &.x-iconalign-bottom .x-button-icon {\r | |
| 664 | margin-top: $icon-vertical-spacing;\r | |
| 665 | \r | |
| 666 | @if $enable-big and $icon-vertical-spacing-big != $icon-vertical-spacing {\r | |
| 667 | .x-big & {\r | |
| 668 | margin-top: $icon-vertical-spacing-big;\r | |
| 669 | }\r | |
| 670 | }\r | |
| 671 | }\r | |
| 672 | \r | |
| 673 | .x-button-label {\r | |
| 674 | // prevents the button height from shrinking when it has no text\r | |
| 675 | min-height: $line-height;\r | |
| 676 | }\r | |
| 677 | \r | |
| 678 | @if $icon-size != null or $icon-horizontal-spacing != null {\r | |
| 679 | \r | |
| 680 | $horz-spacing: $icon-horizontal-spacing;\r | |
| 681 | @if $horz-spacing == null {\r | |
| 682 | $horz-spacing: $button-icon-horizontal-spacing;\r | |
| 683 | }\r | |
| 684 | \r | |
| 685 | $size: $icon-size;\r | |
| 686 | @if $size == null {\r | |
| 687 | $size: $button-icon-size;\r | |
| 688 | }\r | |
| 689 | \r | |
| 690 | &.x-iconalign-right > .x-button-label {\r | |
| 691 | padding-left: calc(#{$size} + #{$horz-spacing});\r | |
| 692 | }\r | |
| 693 | \r | |
| 694 | &.x-iconalign-left > .x-button-label {\r | |
| 695 | padding-right: calc(#{$size} + #{$horz-spacing});\r | |
| 696 | }\r | |
| 697 | }\r | |
| 698 | \r | |
| 699 | @if $enable-big and ($icon-size-big != null or $icon-horizontal-spacing != null) {\r | |
| 700 | \r | |
| 701 | $horz-spacing: $icon-horizontal-spacing-big;\r | |
| 702 | @if $horz-spacing == null {\r | |
| 703 | $horz-spacing: $button-icon-horizontal-spacing-big;\r | |
| 704 | }\r | |
| 705 | \r | |
| 706 | $size: $icon-size-big;\r | |
| 707 | @if $size == null {\r | |
| 708 | $size: $button-icon-size-big;\r | |
| 709 | }\r | |
| 710 | \r | |
| 711 | &.x-iconalign-right > .x-button-label {\r | |
| 712 | .x-big & {\r | |
| 713 | padding-left: calc(#{$size} + #{$horz-spacing});\r | |
| 714 | }\r | |
| 715 | }\r | |
| 716 | \r | |
| 717 | &.x-iconalign-left > .x-button-label {\r | |
| 718 | .x-big & {\r | |
| 719 | padding-right: calc(#{$size} + #{$horz-spacing});\r | |
| 720 | }\r | |
| 721 | }\r | |
| 722 | }\r | |
| 723 | \r | |
| 724 | &.x-item-disabled {\r | |
| 725 | opacity: $disabled-opacity;\r | |
| 726 | }\r | |
| 727 | \r | |
| 728 | .x-badge {\r | |
| 729 | border-color: $badge-border-color;\r | |
| 730 | min-width: $badge-min-width;\r | |
| 731 | \r | |
| 732 | @include font($badge-font-weight, $badge-font-size, $badge-line-height, $badge-font-family);\r | |
| 733 | \r | |
| 734 | top: $badge-top;\r | |
| 735 | right: $badge-right;\r | |
| 736 | bottom: $badge-bottom;\r | |
| 737 | left: $badge-left;\r | |
| 738 | padding: $badge-padding;\r | |
| 739 | max-width: $badge-max-width;\r | |
| 740 | color: $badge-color;\r | |
| 741 | \r | |
| 742 | @include background-gradient($badge-background-color, $badge-background-gradient);\r | |
| 743 | \r | |
| 744 | @if $include-border-radius {\r | |
| 745 | @include border-radius($badge-border-radius);\r | |
| 746 | }\r | |
| 747 | }\r | |
| 748 | }\r | |
| 749 | }\r | |
| 750 | \r | |
| 751 | /**\r | |
| 752 | * Generates style rules for the "action" button UI. This mixin is invoked automatically\r | |
| 753 | * when {@link #$button-action-ui} is `true`.\r | |
| 754 | *\r | |
| 755 | * Can be overridden in derived themes to customize the look and feel of the "action" UI.\r | |
| 756 | *\r | |
| 757 | * @member Ext.Button\r | |
| 758 | * @protected\r | |
| 759 | */\r | |
| 760 | @mixin button-action-ui {\r | |
| 761 | @include button-ui(\r | |
| 762 | $ui: 'action',\r | |
| 763 | $background-color: $base-highlight-color\r | |
| 764 | );\r | |
| 765 | }\r | |
| 766 | \r | |
| 767 | /**\r | |
| 768 | * Generates style rules for the "confirm" button UI. This mixin is invoked automatically\r | |
| 769 | * when {@link #$button-confirm-ui} is `true`.\r | |
| 770 | *\r | |
| 771 | * Can be overridden in derived themes to customize the look and feel of the "confirm" UI.\r | |
| 772 | *\r | |
| 773 | * @member Ext.Button\r | |
| 774 | * @protected\r | |
| 775 | */\r | |
| 776 | @mixin button-confirm-ui {\r | |
| 777 | @include button-ui(\r | |
| 778 | $ui: 'confirm',\r | |
| 779 | $background-color: desaturate(darken($confirm-color, 10%), 5%)\r | |
| 780 | );\r | |
| 781 | }\r | |
| 782 | \r | |
| 783 | /**\r | |
| 784 | * Generates style rules for the "decline" button UI. This mixin is invoked automatically\r | |
| 785 | * when {@link #$button-decline-ui} is `true`.\r | |
| 786 | *\r | |
| 787 | * Can be overridden in derived themes to customize the look and feel of the "decline" UI.\r | |
| 788 | *\r | |
| 789 | * @member Ext.Button\r | |
| 790 | * @protected\r | |
| 791 | */\r | |
| 792 | @mixin button-decline-ui {\r | |
| 793 | @include button-ui(\r | |
| 794 | $ui: 'decline',\r | |
| 795 | $background-color: desaturate(darken($alert-color, 10%), 5%)\r | |
| 796 | );\r | |
| 797 | }\r | |
| 798 | \r | |
| 799 | /**\r | |
| 800 | * Generates style rules for the "round" button UI. This mixin is invoked automatically\r | |
| 801 | * when {@link #$button-round-ui} is `true`.\r | |
| 802 | *\r | |
| 803 | * Can be overridden in derived themes to customize the look and feel of the "round" UI.\r | |
| 804 | *\r | |
| 805 | * @member Ext.Button\r | |
| 806 | * @protected\r | |
| 807 | */\r | |
| 808 | @mixin button-round-ui {\r | |
| 809 | @include button-ui(\r | |
| 810 | $ui: 'round',\r | |
| 811 | $border-radius: 10000px,\r | |
| 812 | $border-radius-big: 20000px\r | |
| 813 | );\r | |
| 814 | }\r | |
| 815 | \r | |
| 816 | /**\r | |
| 817 | * Creates a theme UI for buttons.\r | |
| 818 | * Also automatically generates UIs for {ui-label}-round and {ui-label}-small.\r | |
| 819 | *\r | |
| 820 | * // SCSS\r | |
| 821 | * @include sencha-button-ui('secondary', #99A4AE, 'glossy');\r | |
| 822 | *\r | |
| 823 | * // JS\r | |
| 824 | * var cancelBtn = new Ext.Button({text: 'Cancel', ui: 'secondary'});\r | |
| 825 | *\r | |
| 826 | * @param {string} $ui-label The name of the UI being created.\r | |
| 827 | * Can not included spaces or special punctuation (used in class names)\r | |
| 828 | * @param {color} $color Base color for the UI.\r | |
| 829 | * @param {string} $gradient Default gradient for the UI.\r | |
| 830 | *\r | |
| 831 | * @member Ext.Button\r | |
| 832 | * @deprecated 6.0 Use {@link #button-ui} instead\r | |
| 833 | */\r | |
| 834 | @mixin sencha-button-ui($ui-label, $color, $gradient: $button-background-gradient) {\r | |
| 835 | @include button-ui(\r | |
| 836 | $ui: $ui-label,\r | |
| 837 | $background-color: $color,\r | |
| 838 | $background-gradient: $gradient\r | |
| 839 | );\r | |
| 840 | }\r |