Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
* studip-mixins.less
*
* This file contains all mixins created specifically for Stud.IP
* while mixins.less should contain a copy of the mixins from
* twitter's bootstrap.
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of
* the License, or (at your option) any later version.
*
* @author Jan-Hendrik Willms <tleilax+studip@gmail.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html GPL version 2
* @category Stud.IP
* @since 4.4
*/
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
@mixin clearfix {
&::before,
&::after {
display: table;
content: '';
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&::after {
clear: both;
}
}
// CSS image replacement
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
@mixin hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
@function icon-path($icon, $role: clickable) {
Jan-Hendrik Willms
committed
$icon: unquote($icon);
$role: unquote($role);
$color: 'blue';
@if $role == info {
$color: 'black';
} @else if $role == accept or $role == status-green {
$color: 'green';
} @else if $role == inactive {
$color: 'grey';
} @else if $role == new or $role == attention or $role == status-red {
$color: 'red';
} @else if $role == info_alt or $role == info-alt {
$color: 'white';
} @else if $role == status-yellow {
@return "#{$icon-path}/#{$color}/#{$icon}.svg";
}
@function icon-size($size) {
Jan-Hendrik Willms
committed
@if unitless($size) {
@warn "Assuming icon size to be in pixels";
$size: $size * 1px;
}
@if $size == $icon-size-default {
@return var(--icon-size-default);
}
@if $size == $icon-size-inline {
@return var(--icon-size-inline);
}
@if $size == $icon-size-button {
@return var(--icon-size-button);
}
@return $size;
}
@mixin background-icon($icon, $role: clickable, $size: $icon-size-default) {
$svg: icon-path($icon, $role);
background-image: url("#{$svg}");
background-size: icon-size($size);
@mixin retina-background-image($image0, $image1, $width: 100%, $height: $width) {
background-image: url("#{$image-path}/#{$image0}");
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
background-image: url("#{$image-path}/#{$image1}");
background-size: $width;
}
}
@mixin icon($position, $icon, $role: clickable, $size: $icon-size-default, $padding: 0, $inline: false) {
@if $inline {
$size: $icon-size-inline;
}
@if $position == before or $position == after {
&::#{$position} {
@include background-icon($icon, $role, $size);
background-repeat: no-repeat;
content: ' ';
display: inline-block;
margin-right: $padding;
} @else {
margin-left: $padding;
}
}
}
}
// Mixin that replaces the navigation icon tags with css images
@mixin navigation-icon($default-icon-name, $toggled-icon-name) {
img { display: none; }
display: inline-block;
@include background-icon($default-icon-name, $size: $icon-size-default);
@include square($icon-size-default);
@include background-icon($toggled-icon-name, $size: $icon-size-default);
@mixin empty-placeholder-image($icon, $background-color: $dark-gray-color-5) {
&::before,
&::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
display: block;
background-image: url(icon-path($icon));
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
&::before {
height: 280px;
width: 280px;
opacity: 0.3;
transform: translate(-50%, -50%);
}
&::after {
height: 180px;
width: 180px;
opacity: 0.6;
transform: translate($icon-size-default, -50px);
}
background-image: url(icon-path($icon));
background-repeat: no-repeat;
background-size: 140px;
background-position: calc(50% - 100px) calc(50% + 40px);
Jan-Hendrik Willms
committed
background-color: mix($background-color, rgba(255, 255, 255, 0), 70%);
}
text-align: center;
color: $content-color;
font-size: 1.6em;
position: relative;
}
// Scrollboxes
// From http://lea.verou.me/2012/04/background-attachment-local/
// and http://dabblet.com/gist/6134408
%scrollbox-vertical {
overflow: auto;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
overflow: auto;
background:
/* Shadow covers */
linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
linear-gradient(90deg, rgba(255,255,255,0), white 70%) 100% 0,
/* Shadows */
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
// Define action icons for widgets
@mixin widget-action($action, $icon: $action, $role: clickable) {
.widget-action[data-action="#{$action}"] {
width: var(--icon-size-default);
height: var(--icon-size-default);
@include background-icon($icon, $role);