Mercurial > repos > immport-devteam > cs_overview
comparison js/Editor-1.5.6/css/scss/mixins.scss @ 2:a64ece32a01a draft default tip
"planemo upload for repository https://github.com/ImmPortDB/immport-galaxy-tools/tree/master/flowtools/cs_overview commit a46097db0b6056e1125237393eb6974cfd51eb41"
author | azomics |
---|---|
date | Tue, 28 Jul 2020 08:32:36 -0400 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
1:bca68066a957 | 2:a64ece32a01a |
---|---|
1 | |
2 | |
3 @function tint( $color, $percent ) { | |
4 @return mix(white, $color, $percent); | |
5 } | |
6 | |
7 @function shade( $color, $percent ) { | |
8 @return mix(black, $color, $percent); | |
9 } | |
10 | |
11 | |
12 @mixin border-radius ( $radius ) { | |
13 -webkit-border-radius: $radius; | |
14 -moz-border-radius: $radius; | |
15 -ms-border-radius: $radius; | |
16 -o-border-radius: $radius; | |
17 border-radius: $radius; | |
18 } | |
19 | |
20 @mixin box-sizing($box-model) { | |
21 -webkit-box-sizing: $box-model; // Safari <= 5 | |
22 -moz-box-sizing: $box-model; // Firefox <= 19 | |
23 box-sizing: $box-model; | |
24 } | |
25 | |
26 @mixin box-shadow($top, $left, $blur, $color, $inset: false) { | |
27 @if $inset { | |
28 -webkit-box-shadow:inset $top $left $blur $color; | |
29 -moz-box-shadow:inset $top $left $blur $color; | |
30 box-shadow:inset $top $left $blur $color; | |
31 } @else { | |
32 -webkit-box-shadow: $top $left $blur $color; | |
33 -moz-box-shadow: $top $left $blur $color; | |
34 box-shadow: $top $left $blur $color; | |
35 } | |
36 } | |
37 | |
38 @mixin three-stop-gradient($fromColor, $middleColor, $toColor) { | |
39 background-color: $toColor; /* Fallback */ | |
40 background-image: -webkit-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */ | |
41 background-image: -moz-linear-gradient(top, $fromColor, $middleColor, $toColor); /* FF3.6 */ | |
42 background-image: -ms-linear-gradient(top, $fromColor, $middleColor, $toColor); /* IE10 */ | |
43 background-image: -o-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Opera 11.10+ */ | |
44 background-image: linear-gradient(to bottom, $fromColor, $middleColor, $toColor); | |
45 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}'); | |
46 } | |
47 | |
48 @mixin radial-gradient ($fromColor, $toColor ) { | |
49 background: $toColor; /* Fallback */ | |
50 background: -ms-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* IE10 Consumer Preview */ | |
51 background: -moz-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Firefox */ | |
52 background: -o-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Opera */ | |
53 background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, $fromColor), color-stop(1, $toColor)); /* Webkit (Safari/Chrome 10) */ | |
54 background: -webkit-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Webkit (Chrome 11+) */ | |
55 background: radial-gradient(ellipse farthest-corner at center, $fromColor 0%, $toColor 100%); /* W3C Markup, IE10 Release Preview */ | |
56 } | |
57 | |
58 @mixin keyframe ($animation_name) { | |
59 @-webkit-keyframes #{$animation_name} { | |
60 @content; | |
61 } | |
62 | |
63 @-moz-keyframes #{$animation_name} { | |
64 @content; | |
65 } | |
66 | |
67 @-o-keyframes #{$animation_name} { | |
68 @content; | |
69 } | |
70 | |
71 @keyframes #{$animation_name} { | |
72 @content; | |
73 } | |
74 } | |
75 | |
76 @mixin animation ($duration, $animation) { | |
77 -webkit-animation-duration: $duration; | |
78 -webkit-animation-name: $animation; | |
79 -webkit-animation-fill-mode: forwards; | |
80 -webkit-animation-iteration-count: infinite; | |
81 -webkit-animation-timing-function: linear; | |
82 -webkit-animation-direction: alternate; | |
83 | |
84 -moz-animation-duration: $duration; | |
85 -moz-animation-name: $animation; | |
86 -moz-animation-fill-mode: forwards; | |
87 -moz-animation-iteration-count: infinite; | |
88 -moz-animation-timing-function: linear; | |
89 -moz-animation-direction: alternate; | |
90 | |
91 -o-animation-duration: $duration; | |
92 -o-animation-name: $animation; | |
93 -o-animation-fill-mode: forwards; | |
94 -o-animation-iteration-count: infinite; | |
95 -o-animation-timing-function: linear; | |
96 -o-animation-direction: alternate; | |
97 | |
98 animation-duration: $duration; | |
99 animation-name: $animation; | |
100 animation-fill-mode: forwards; | |
101 animation-iteration-count: infinite; | |
102 animation-timing-function: linear; | |
103 animation-direction: alternate; | |
104 } | |
105 | |
106 @mixin close-icon () { | |
107 position: absolute; | |
108 top: -11px; | |
109 right: -11px; | |
110 width: 22px; | |
111 height: 22px; | |
112 border: 2px solid white; | |
113 background-color: black; | |
114 text-align: center; | |
115 border-radius: 15px; | |
116 cursor: pointer; | |
117 z-index: 12; | |
118 box-shadow: 2px 2px 6px #111; | |
119 | |
120 &:after { | |
121 content: '\00d7'; | |
122 color: white; | |
123 font-weight: bold; | |
124 font-size: 18px; | |
125 line-height: 22px; | |
126 font-family: 'Courier New', Courier, monospace; | |
127 padding-left: 1px; | |
128 } | |
129 | |
130 &:hover { | |
131 background-color: #092079; | |
132 box-shadow: 2px 2px 9px #111; | |
133 } | |
134 } | |
135 | |
136 @mixin overlay-background () { | |
137 position: fixed; | |
138 top: 0; | |
139 left: 0; | |
140 width: 100%; | |
141 height: 100%; | |
142 | |
143 @include radial-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) ); | |
144 | |
145 z-index: 10; | |
146 | |
147 // IE8- doesn't support RGBA and jQuery uses `filter:` for the fade-in | |
148 // animation, so we need a child element that is used just for the display | |
149 >div { | |
150 position: absolute; | |
151 top: 0; | |
152 right: 0; | |
153 left: 0; | |
154 bottom: 0; | |
155 | |
156 // IE7- | |
157 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); | |
158 | |
159 // IE8 | |
160 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; | |
161 } | |
162 | |
163 // IE9 has both filter and rgba support, so we need a hack to disable the filter | |
164 >div:not([dummy]) { | |
165 filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); | |
166 } | |
167 } | |
168 | |
169 @mixin background-transision () { | |
170 -webkit-transition: background-color 500ms linear; | |
171 -moz-transition: background-color 500ms linear; | |
172 -ms-transition: background-color 500ms linear; | |
173 -o-transition: background-color 500ms linear; | |
174 transition: background-color 500ms linear; | |
175 } | |
176 |