diff options
author | 2018-06-05 16:07:35 +0100 | |
---|---|---|
committer | 2018-06-05 16:07:35 +0100 | |
commit | 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 (patch) | |
tree | 290c6d668ec9161a39065456a33ec634215907cc /scss/pysite/_mixins.scss | |
parent | documentation 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.scss | 43 |
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; +} |