[403] | 1 | //LAYOUT
|
---|
| 2 | .newLine () {
|
---|
| 3 | float: left;
|
---|
| 4 | clear: left;
|
---|
| 5 | }
|
---|
| 6 |
|
---|
| 7 | .transition (@time: @transition_time) {
|
---|
| 8 | -webkit-transition: all @time;
|
---|
| 9 | -moz-transition: all @time;
|
---|
| 10 | -o-transition: all @time;
|
---|
| 11 | -ms-transition: all @time;
|
---|
| 12 | transition: all @time;
|
---|
| 13 | }
|
---|
| 14 |
|
---|
| 15 | .flatShading () {
|
---|
| 16 | //Disable borders, gradients and other effects. One flat colour shading.
|
---|
| 17 | border: none;
|
---|
| 18 | background-image: none;
|
---|
| 19 | -webkit-box-shadow: none;
|
---|
| 20 | box-shadow: none;
|
---|
| 21 | border-radius: 0;
|
---|
| 22 | }
|
---|
| 23 |
|
---|
| 24 | .noOffset () {
|
---|
| 25 | .noMargin;
|
---|
| 26 | .noPadding;
|
---|
| 27 | }
|
---|
| 28 |
|
---|
| 29 | .noMargin () {
|
---|
[411] | 30 | margin: 0 0 0 0;
|
---|
[403] | 31 | }
|
---|
| 32 |
|
---|
| 33 | .noPadding () {
|
---|
[411] | 34 | padding: 0 0 0 0;
|
---|
[403] | 35 | }
|
---|
| 36 | //------------------------------------------
|
---|
| 37 | //ICONS
|
---|
| 38 |
|
---|
[411] | 39 | .setIconSize (@size, @b) when (@size < 24px) {
|
---|
[403] | 40 | width: @size;
|
---|
| 41 | height: @size;
|
---|
| 42 | margin: ((24px - @size) / 2) 0;
|
---|
[411] | 43 | .noPadding ();
|
---|
[403] | 44 | background-image: url('images/icons/rftIcons16@{b}.png');
|
---|
| 45 | }
|
---|
| 46 |
|
---|
[411] | 47 | .setIconSize (@size, @b) when (@size >= 24px) and (@size < 32) {
|
---|
| 48 | width: 24px;
|
---|
| 49 | height: 24px;
|
---|
| 50 | .noMargin ();
|
---|
| 51 | .noPadding ();
|
---|
[403] | 52 | background-image: url('images/icons/rftIcons24@{b}.png');
|
---|
| 53 | }
|
---|
| 54 |
|
---|
| 55 | .setIconSize (@size, @b) when (@size >= 32px) {
|
---|
[411] | 56 | width: 32px;
|
---|
| 57 | height: 32px;
|
---|
[403] | 58 | margin: 0;
|
---|
[411] | 59 | .noPadding ();
|
---|
[403] | 60 | background-image: url('images/icons/rftIcons32@{b}.png');
|
---|
| 61 | }
|
---|
| 62 |
|
---|
| 63 | .setIcon (@size, black) {
|
---|
| 64 | .setIconSize(@size, "b");
|
---|
| 65 | }
|
---|
| 66 | .setIcon (@size, white) {
|
---|
| 67 | .setIconSize(@size, "");
|
---|
| 68 | }
|
---|
| 69 | .setIcon (@size) {
|
---|
| 70 | .setIconSize(@size, "");
|
---|
| 71 | }
|
---|
[411] | 72 | //------------------------------------------
|
---|
| 73 |
|
---|
| 74 | //Old colour settings
|
---|
| 75 | //TODO: I AM NOT SURE IF THIS ACTUALLY WORKS! THOROUGHLY TEST WHEN APPLIED TO PAGES!!!!
|
---|
| 76 | // Oke, wat. Deze shit is echt niet te snappen. :P Gewoon maar weer de oude meuk erin hangen?
|
---|
| 77 | .blockButtonColorMixin (@color) {
|
---|
| 78 | .dijitButtonNode {
|
---|
| 79 | background-color: @@color;
|
---|
| 80 | }
|
---|
| 81 |
|
---|
| 82 | &.dijitHover {
|
---|
| 83 | .dijitButtonNode {
|
---|
| 84 | background-color: @text;
|
---|
[412] | 85 | color: @darkest;
|
---|
[411] | 86 | }
|
---|
| 87 | }
|
---|
| 88 | &.dijitActive {
|
---|
| 89 | .dijitButtonNode {
|
---|
| 90 | @colorName: "@{color}_light";
|
---|
| 91 | background-color: @@colorName;
|
---|
[412] | 92 | color: @text;
|
---|
[411] | 93 | }
|
---|
| 94 | }
|
---|
| 95 |
|
---|
| 96 | } |
---|