Rev 182 | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 179 | espaco | 1 | @mixin icon-override($icon) { |
| 2 | font-family: 'primeicons' !important; |
||
| 3 | font-style: normal; |
||
| 4 | font-weight: normal; |
||
| 5 | display: inline-block; |
||
| 6 | background: none; |
||
| 7 | |||
| 8 | &:before { |
||
| 9 | content: $icon; |
||
| 10 | } |
||
| 11 | } |
||
| 12 | |||
| 13 | @mixin icon-override-with-content($icon) { |
||
| 14 | &:before { |
||
| 15 | content: $icon; |
||
| 16 | font-family: 'primeicons' !important; |
||
| 17 | speak: none; |
||
| 18 | font-style: normal; |
||
| 19 | font-weight: normal; |
||
| 20 | font-variant: normal; |
||
| 21 | text-transform: none; |
||
| 22 | display: inline-block; |
||
| 23 | -webkit-font-smoothing: antialiased; |
||
| 24 | -moz-osx-font-smoothing: grayscale; |
||
| 25 | text-indent: 0 !important; |
||
| 26 | background-image: none !important; |
||
| 27 | @content |
||
| 28 | } |
||
| 29 | } |
||
| 30 | |||
| 31 | @mixin action-icon { |
||
| 32 | width: $actionIconWidth; |
||
| 33 | height: $actionIconHeight; |
||
| 34 | background: $actionIconBg; |
||
| 35 | color: $actionIconColor; |
||
| 36 | transition: $transition; |
||
| 37 | border-radius: $actionIconBorderRadius; |
||
| 38 | border: $actionIconBorder; |
||
| 39 | text-align: center; |
||
| 40 | line-height: $actionIconHeight; |
||
| 41 | padding: 0; |
||
| 42 | user-select: none; |
||
| 43 | |||
| 44 | &:hover { |
||
| 45 | background: $actionIconHoverBg; |
||
| 46 | color: $actionIconHoverColor; |
||
| 47 | border-color: $actionIconHoverBorderColor; |
||
| 48 | } |
||
| 49 | } |
||
| 50 | |||
| 51 | @mixin secondary-button() { |
||
| 52 | background: $secondaryButtonBg; |
||
| 53 | color: $secondaryButtonTextColor; |
||
| 54 | border: $secondaryButtonBorder; |
||
| 55 | |||
| 56 | &.ui-state-hover, &:not(:disabled):hover { |
||
| 57 | background: $secondaryButtonHoverBg; |
||
| 58 | border-color: $secondaryButtonHoverBorderColor; |
||
| 59 | color: $secondaryButtonTextHoverColor; |
||
| 60 | } |
||
| 61 | |||
| 62 | &.ui-state-focus { |
||
| 63 | box-shadow: $secondaryButtonFocusShadow; |
||
| 64 | } |
||
| 65 | |||
| 66 | &.ui-state-active, &:active { |
||
| 67 | background: $secondaryButtonActiveBg; |
||
| 68 | border-color: $secondaryButtonActiveBorderColor; |
||
| 69 | color: $secondaryButtonTextActiveColor; |
||
| 70 | } |
||
| 71 | |||
| 72 | &.ui-button-outlined { |
||
| 73 | background-color: transparent; |
||
| 74 | color: $secondaryButtonBg; |
||
| 75 | border: $outlinedButtonBorder; |
||
| 76 | |||
| 77 | &:enabled:hover { |
||
| 78 | background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity); |
||
| 79 | color: $secondaryButtonBg; |
||
| 80 | border: $outlinedButtonBorder; |
||
| 81 | } |
||
| 82 | |||
| 83 | &:enabled:active { |
||
| 84 | background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity); |
||
| 85 | color: $secondaryButtonBg; |
||
| 86 | border: $outlinedButtonBorder; |
||
| 87 | } |
||
| 88 | } |
||
| 89 | |||
| 90 | &.ui-button-flat { |
||
| 91 | background-color: transparent; |
||
| 92 | color: $secondaryButtonBg; |
||
| 93 | border-color: transparent; |
||
| 94 | |||
| 95 | &:enabled:hover { |
||
| 96 | background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity); |
||
| 97 | border-color: transparent; |
||
| 98 | color: $secondaryButtonBg; |
||
| 99 | } |
||
| 100 | |||
| 101 | &:enabled:active { |
||
| 102 | background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity); |
||
| 103 | border-color: transparent; |
||
| 104 | color: $secondaryButtonBg; |
||
| 105 | } |
||
| 106 | } |
||
| 107 | } |
||
| 108 | |||
| 109 | @mixin border-radius-right($val) { |
||
| 110 | border-top-right-radius: $val; |
||
| 111 | border-bottom-right-radius: $val; |
||
| 112 | } |
||
| 113 | |||
| 114 | @mixin border-radius-left($val) { |
||
| 115 | border-top-left-radius: $val; |
||
| 116 | border-bottom-left-radius: $val; |
||
| 117 | } |
||
| 118 | |||
| 119 | @mixin border-radius-top($val) { |
||
| 120 | border-top-left-radius: $val; |
||
| 121 | border-top-right-radius: $val; |
||
| 122 | } |
||
| 123 | |||
| 124 | @mixin border-radius-bottom($val) { |
||
| 125 | border-bottom-left-radius: $val; |
||
| 126 | border-bottom-right-radius: $val; |
||
| 127 | } |
||
| 128 | |||
| 129 | @mixin focused() { |
||
| 130 | outline: $focusOutline; |
||
| 131 | outline-offset: $focusOutlineOffset; |
||
| 132 | box-shadow: $focusShadow; |
||
| 133 | } |
||
| 134 | |||
| 135 | @mixin focused-inset() { |
||
| 136 | outline: $focusOutline; |
||
| 137 | outline-offset: $focusOutlineOffset; |
||
| 138 | box-shadow: inset $focusShadow; |
||
| 139 | } |
||
| 140 | |||
| 141 | @mixin focused-input() { |
||
| 142 | border-color: $inputFocusBorderColor; |
||
| 143 | outline: 0 none; |
||
| 144 | box-shadow: $inputFocusShadow; |
||
| 145 | } |
||
| 146 | |||
| 147 | @mixin focused-listitem() { |
||
| 148 | outline: $focusOutline; |
||
| 149 | outline-offset: $focusOutlineOffset; |
||
| 150 | box-shadow: $inputFocusShadow; |
||
| 151 | } |
||
| 152 | |||
| 153 | @mixin invalid-input() { |
||
| 154 | border-color: $inputErrorBorderColor; |
||
| 155 | } |
||
| 156 | |||
| 157 | @mixin flex() { |
||
| 158 | display: -ms-flexbox; |
||
| 159 | display: flex; |
||
| 160 | } |
||
| 161 | |||
| 162 | @mixin flex-wrap($value) { |
||
| 163 | -ms-flex-wrap: $value; |
||
| 164 | flex-wrap: $value; |
||
| 165 | } |
||
| 166 | |||
| 167 | @mixin flex-direction-row() { |
||
| 168 | -ms-flex-direction: row; |
||
| 169 | flex-direction: row; |
||
| 170 | } |
||
| 171 | |||
| 172 | @mixin flex-direction-column() { |
||
| 173 | -ms-flex-direction: column; |
||
| 174 | flex-direction: column; |
||
| 175 | } |
||
| 176 | |||
| 177 | @mixin flex-justify-center() { |
||
| 178 | -ms-flex-pack: center; |
||
| 179 | justify-content: center; |
||
| 180 | } |
||
| 181 | |||
| 182 | @mixin flex-justify-between() { |
||
| 183 | -ms-flex-pack: justify; |
||
| 184 | justify-content: space-between; |
||
| 185 | } |
||
| 186 | |||
| 187 | @mixin flex-align-center() { |
||
| 188 | -ms-flex-align: center; |
||
| 189 | align-items: center; |
||
| 190 | } |
||
| 191 | |||
| 192 | @mixin flex-align-start() { |
||
| 193 | -ms-flex-align: start; |
||
| 194 | align-items: flex-start; |
||
| 195 | } |
||
| 196 | |||
| 197 | @mixin flex-align-end() { |
||
| 198 | -ms-flex-align: end; |
||
| 199 | align-items: flex-end; |
||
| 200 | } |
||
| 201 | |||
| 202 | @mixin flex-justify-start() { |
||
| 203 | -ms-flex-pack: start; |
||
| 204 | justify-content: flex-start; |
||
| 205 | } |
||
| 206 | |||
| 207 | @mixin flex-justify-end() { |
||
| 208 | -ms-flex-pack: end; |
||
| 209 | justify-content: flex-end; |
||
| 210 | } |
||
| 211 | |||
| 212 | @mixin placeholder { |
||
| 213 | ::-webkit-input-placeholder {@content} |
||
| 214 | :-moz-placeholder {@content; opacity: 1} |
||
| 215 | ::-moz-placeholder {@content; opacity: 1} |
||
| 216 | :-ms-input-placeholder {@content} |
||
| 217 | } |