Mercurial > nebulaweb3

comparison default/assets/scss/base/_mixins.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }