blob: 6cf9b96387cdebf7b550187ed4ac9395c81b2375 (
plain)
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
//
// Alert Box Variables
//
$include-html-alert-classes: $include-html-classes !default;
// We use this to control alert padding.
$alert-padding-top: rem-calc(14) !default;
$alert-padding-default-float: $alert-padding-top !default;
$alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default;
$alert-padding-bottom: $alert-padding-top !default;
// We use these to control text style.
$alert-font-weight: $font-weight-normal !default;
$alert-font-size: rem-calc(13) !default;
$alert-font-color: $white !default;
$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
// We use this for close hover effect.
$alert-function-factor: -14% !default;
// We use these to control border styles.
$alert-border-style: solid !default;
$alert-border-width: 1px !default;
$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default;
$alert-bottom-margin: rem-calc(20) !default;
// We use these to style the close buttons
$alert-close-color: $oil !default;
$alert-close-top: 50% !default;
$alert-close-position: rem-calc(4) !default;
$alert-close-font-size: rem-calc(22) !default;
$alert-close-opacity: 0.3 !default;
$alert-close-opacity-hover: 0.5 !default;
$alert-close-padding: 9px 6px 4px !default;
// We use this to control border radius
$alert-radius: $global-radius !default;
$alert-transition-speed: 300ms !default;
$alert-transition-ease: ease-out !default;
//
// Alert Mixins
//
// We use this mixin to create a default alert base.
@mixin alert-base {
border-style: $alert-border-style;
border-width: $alert-border-width;
display: block;
font-weight: $alert-font-weight;
margin-bottom: $alert-bottom-margin;
position: relative;
padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
font-size: $alert-font-size;
@include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
}
// We use this mixin to add alert styles
//
// $bg - The background of the alert. Default: $primary-color.
@mixin alert-style($bg:$primary-color) {
// This finds the lightness percentage of the background color.
$bg-lightness: lightness($bg);
// We control which background color and border come through.
background-color: $bg;
border-color: scale-color($bg, $lightness: $alert-function-factor);
// We control the text color for you based on the background color.
@if $bg-lightness > 70% { color: $alert-font-color-alt; }
@else { color: $alert-font-color; }
}
// We use this to create the close button.
@mixin alert-close {
font-size: $alert-close-font-size;
padding: $alert-close-padding;
line-height: 0;
position: absolute;
top: $alert-close-top;
margin-top: -($alert-close-font-size / 2);
#{$opposite-direction}: $alert-close-position;
color: $alert-close-color;
opacity: $alert-close-opacity;
&:hover,
&:focus { opacity: $alert-close-opacity-hover; }
}
// We use this to quickly create alerts with a single mixin.
//
// $bg - Background of alert. Default: $primary-color.
// $radius - Radius of alert box. Default: false.
@mixin alert($bg:$primary-color, $radius:false) {
@include alert-base;
@include alert-style($bg);
@include radius($radius);
}
@include exports("alert-box") {
@if $include-html-alert-classes {
.alert-box {
@include alert;
.close { @include alert-close; }
&.radius { @include radius($alert-radius); }
&.round { @include radius($global-rounded); }
&.success { @include alert-style($success-color); }
&.alert { @include alert-style($alert-color); }
&.secondary { @include alert-style($secondary-color); }
&.warning { @include alert-style($warning-color); }
&.info { @include alert-style($info-color); }
&.alert-close { opacity: 0}
}
}
}
|
