|
0
|
1 // main: ../style.scss
|
|
|
2 /* Media Queries */
|
|
|
3 $tablet-width: 768px;
|
|
|
4 $desktop-width: 1024px;
|
|
|
5
|
|
|
6 @mixin mobile {
|
|
|
7 @media (max-width: #{$tablet-width - 1px}) {
|
|
|
8 @content;
|
|
|
9 }
|
|
|
10 }
|
|
|
11
|
|
|
12 @mixin tablet {
|
|
|
13 @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
|
|
|
14 @content;
|
|
|
15 }
|
|
|
16 }
|
|
|
17
|
|
|
18 @mixin desktop {
|
|
|
19 @media (min-width: #{$desktop-width}) {
|
|
|
20 @content;
|
|
|
21 }
|
|
|
22 }
|
|
|
23
|
|
|
24 @mixin retina {
|
|
|
25 @media
|
|
|
26 only screen and (-webkit-min-device-pixel-ratio: 2),
|
|
|
27 only screen and (min--moz-device-pixel-ratio: 2),
|
|
|
28 only screen and (-o-min-device-pixel-ratio: 2/1),
|
|
|
29 only screen and (min-device-pixel-ratio: 2),
|
|
|
30 only screen and (min-resolution: 192dpi),
|
|
|
31 only screen and (min-resolution: 2dppx) {
|
|
|
32 @content;
|
|
|
33 }
|
|
|
34 }
|
|
|
35
|
|
|
36 @mixin print {
|
|
|
37 @media print {
|
|
|
38 @content;
|
|
|
39 }
|
|
|
40 }
|
|
|
41
|
|
|
42
|
|
|
43 // Button variants
|
|
|
44 // ----------------------------
|
|
|
45 //
|
|
|
46 // The below is an alternative to the native button-variant mixin of bootstrap, to accomodate color parameter.
|
|
|
47 //
|
|
|
48 // ----------------------------
|
|
|
49 //
|
|
|
50 // Easily pump out default styles, as well as :hover, :focus, :active,
|
|
|
51 // and disabled options for all buttons
|
|
|
52
|
|
|
53 @mixin theme-button-variant($background, $border, $color: $content-color, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
|
|
|
54 color: $color;
|
|
|
55 background-color: $background;
|
|
|
56 border-color: $border;
|
|
|
57 box-shadow: none;
|
|
|
58 // @include box-shadow($btn-box-shadow);
|
|
|
59
|
|
|
60 &:hover {
|
|
|
61 color: $color;
|
|
|
62 background-color: $active-background;
|
|
|
63 border-color: $active-border;
|
|
|
64 }
|
|
|
65
|
|
|
66 &:focus,
|
|
|
67 &.focus {
|
|
|
68 // Avoid using mixin so we can pass custom focus shadow properly
|
|
|
69 @if $enable-shadows {
|
|
|
70 box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
|
|
|
71 } @else {
|
|
|
72 box-shadow: 0 0 0 3px rgba($border, .5);
|
|
|
73 }
|
|
|
74 }
|
|
|
75
|
|
|
76 // Disabled comes first so active can properly restyle
|
|
|
77 &.disabled,
|
|
|
78 &:disabled {
|
|
|
79 background-color: $background;
|
|
|
80 border-color: $border;
|
|
|
81 }
|
|
|
82
|
|
|
83 &:active,
|
|
|
84 &.active,
|
|
|
85 .show > &.dropdown-toggle {
|
|
|
86 background-color: $active-background;
|
|
|
87 background-image: none; // Remove the gradient for the pressed/active state
|
|
|
88 border-color: $active-border;
|
|
|
89 @include box-shadow($btn-active-box-shadow);
|
|
|
90 }
|
|
|
91 }
|
|
|
92
|
|
|
93 // Button Variants
|
|
|
94 @mixin buttons-variant($col, $color, $background, $border) {
|
|
|
95 .btn-#{$col} {
|
|
|
96 color: $color;
|
|
|
97 background-color: $background;
|
|
|
98 border-color: $border;
|
|
|
99
|
|
|
100 &:focus,
|
|
|
101 &:hover,
|
|
|
102 &:active,
|
|
|
103 &:active:focus,
|
|
|
104 &:active:hover,
|
|
|
105 .show>&.dropdown-toggle,
|
|
|
106 .show>&.dropdown-toggle:hover,
|
|
|
107 .show>&.dropdown-toggle:focus {
|
|
|
108 color: $color;
|
|
|
109 background-color: darken($background, 5%);
|
|
|
110 border-color: darken($border, 5%);
|
|
|
111 }
|
|
|
112 &:focus,
|
|
|
113 &:active,
|
|
|
114 &:active:focus,
|
|
|
115 .show>&.dropdown-toggle:focus {
|
|
|
116 outline: 0 0 0 2px rgba($background,.3);
|
|
|
117 }
|
|
|
118 }
|
|
|
119
|
|
|
120 .btn-outline-#{$col} {
|
|
|
121 color: $background;
|
|
|
122 background: transparent;
|
|
|
123 border-color: $background;
|
|
|
124
|
|
|
125 &:focus,
|
|
|
126 &:hover,
|
|
|
127 &:active,
|
|
|
128 &:active:focus,
|
|
|
129 &:active:hover,
|
|
|
130 .show>&.dropdown-toggle,
|
|
|
131 .show>&.dropdown-toggle:hover,
|
|
|
132 .show>&.dropdown-toggle:focus {
|
|
|
133 color: $color;
|
|
|
134 background-color: $background;
|
|
|
135 }
|
|
|
136 }
|
|
|
137 }
|
|
|
138
|
|
|
139
|
|
|
140
|
|
|
141 /* Placeholder */
|
|
|
142 @mixin placeholder {
|
|
|
143 &::-webkit-input-placeholder {
|
|
|
144 @content;
|
|
|
145 }
|
|
|
146 &:-moz-placeholder {
|
|
|
147 @content;
|
|
|
148 }
|
|
|
149 &::-moz-placeholder {
|
|
|
150 @content;
|
|
|
151 }
|
|
|
152 &:-ms-input-placeholder {
|
|
|
153 @content;
|
|
|
154 }
|
|
|
155 }
|
|
|
156
|
|
|
157
|
|
|
158 /* Set Margin & Padding */
|
|
|
159 @mixin allspace($top-bottom: 0, $left-right: 0) {
|
|
|
160 padding: $top-bottom $left-right;
|
|
|
161 margin: $top-bottom $left-right;
|
|
|
162 }
|
|
|
163
|
|
|
164 /* Making tiny, small, large, huge classes */
|
|
|
165 $spacing-unit-tiny: round(0.25 * $spacing-unit);
|
|
|
166 $spacing-unit-small: round(0.5 * $spacing-unit);
|
|
|
167 $spacing-unit-large: round(2 * $spacing-unit);
|
|
|
168 $spacing-unit-huge: round(4 * $spacing-unit);
|
|
|
169
|
|
|
170 @mixin sizes($properties...) {
|
|
|
171 &--tiny {
|
|
|
172 @each $property in $properties {
|
|
|
173 #{$property}: $spacing-unit-tiny;
|
|
|
174 }
|
|
|
175 }
|
|
|
176
|
|
|
177 &--small {
|
|
|
178 @each $property in $properties {
|
|
|
179 #{$property}: $spacing-unit-small;
|
|
|
180 }
|
|
|
181 }
|
|
|
182
|
|
|
183 &--large {
|
|
|
184 @each $property in $properties {
|
|
|
185 #{$property}: $spacing-unit-large;
|
|
|
186 }
|
|
|
187 }
|
|
|
188
|
|
|
189 &--huge {
|
|
|
190 @each $property in $properties {
|
|
|
191 #{$property}: $spacing-unit-huge;
|
|
|
192 }
|
|
|
193 }
|
|
|
194 }
|
|
|
195
|
|
|
196 @function em($target, $base: $font-size-base-px) {
|
|
|
197 @return strip-unit($target) / strip-unit($base) * 1em;
|
|
|
198 }
|
|
|
199
|
|
|
200 @function rem($target) {
|
|
|
201 @return strip-unit($target)/16 * 1rem;
|
|
|
202 }
|
