aboutsummaryrefslogtreecommitdiffstats
path: root/scss/pysite/_mixins.scss
diff options
context:
space:
mode:
authorGravatar Gareth Coles <[email protected]>2018-06-05 16:07:35 +0100
committerGravatar GitHub <[email protected]>2018-06-05 16:07:35 +0100
commit13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 (patch)
tree290c6d668ec9161a39065456a33ec634215907cc /scss/pysite/_mixins.scss
parentdocumentation metadata API (#57) (diff)
Move from CSS to SCSS (#86)
* Rewrite existing style.css with sass * Add "uses-rst" class for pages that use rendered RST This replaces the previous method of just listing every page in the sass * Remove old debug print * Mixins and error pages * Newly built CSS * Add SASS cache to .gitignore * New error SASS * Slight changes to error template * Add UIKit SCSS to repo This includes the LICENSE and our customizations, which makes life way easier for contributors * Reorganize sass folder; your watchers can avoid uikit now * Sass folder should be called scss * Change variable names * [SCSS] Linting * Fix scss_lint gem name [ci skip] * [SCSS] Now you can compile with just Python! * Temporary hack to make the wiki editor taller * [SCSS] @jchristgit * [SCSS.py] Require specification of include dir to simplify the SCSS imports * [SCSS] All inline styles have been removed * [SCSS] Update UIKit theme to import from our variables * [SCSS] Remove extra newlines in errors/_common.scss
Diffstat (limited to 'scss/pysite/_mixins.scss')
-rw-r--r--scss/pysite/_mixins.scss43
1 files changed, 43 insertions, 0 deletions
diff --git a/scss/pysite/_mixins.scss b/scss/pysite/_mixins.scss
new file mode 100644
index 00000000..a7883a23
--- /dev/null
+++ b/scss/pysite/_mixins.scss
@@ -0,0 +1,43 @@
+// scss-lint:disable VendorPrefix
+
+@mixin linear_gradient_background($base_colour, $start_colour, $end_colour) {
+ // Apply a linear gradient background to a selector
+ // scss-lint:disable DuplicateProperty NameFormat
+
+ background: $base_colour;
+ background: -webkit-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+ background: -moz-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+ background: -ms-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+ background: -o-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+ background: -webkit-gradient(linear, top, bottom, color-stop(3%, $start_colour), color-stop(100%, $end_colour));
+ background: linear-gradient(to bottom, $start_colour 3%, $end_colour 100%);
+
+ // Why is this a thing?
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$base_colour}', endColorstr='#{$end_colour}', GradientType=0);
+}
+
+@mixin box_shadow($offset_x, $offset_y, $colour, $blur_radius: 0, $spread_radius: 0) {
+ // Apply a box shadow to a selector
+ -webkit-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour;
+ -moz-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour;
+ box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour;
+}
+
+@mixin inset_box_shadow($offset_x, $offset_y, $colour, $blur_radius: 0, $spread_radius: 0) {
+ // Apply an inset box shadow to a selector
+ -webkit-box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour;
+ -moz-box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour;
+ box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour;
+}
+
+@mixin border_radius($radius) {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ border-radius: $radius;
+}
+
+@mixin transition($type, $time, $effect) {
+ transition: $type $time $effect;
+ -moz-transition: $type $time $effect;
+ -webkit-transition: $type $time $effect;
+}