@spark-hire/bootstrap-themes 0.7.17 → 0.7.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/css/dark.css +1 -1
  2. package/css/dark.map +2 -1
  3. package/css/light.css +1 -1
  4. package/css/light.map +2 -1
  5. package/html/dark.html +23 -0
  6. package/html/light.html +24 -1
  7. package/package.json +1 -1
  8. package/scss/labels.scss +152 -0
  9. package/scss/shared.scss +2 -1
package/html/dark.html CHANGED
@@ -1059,6 +1059,29 @@
1059
1059
  <span class="badge badge-pill badge-dark">Dark</span>
1060
1060
  </div>
1061
1061
  </div>
1062
+ <div style="margin-top: 20px;">
1063
+ <h2>Labels</h2>
1064
+ <div class="bs-component" style="margin-bottom: 40px;">
1065
+ <span class="label label-primary">Primary</span>
1066
+ <span class="label label-secondary">Secondary</span>
1067
+ <span class="label label-success">Success</span>
1068
+ <span class="label label-danger">Danger</span>
1069
+ <span class="label label-warning">Warning</span>
1070
+ <span class="label label-info">Info</span>
1071
+ <span class="label label-light">Light</span>
1072
+ <span class="label label-dark">Dark</span>
1073
+ </div>
1074
+ <div class="bs-component" style="margin-bottom: 40px;">
1075
+ <span class="label label-primary has-remove">Primary <a href="" class="remove" title="Remove">×</a></span>
1076
+ <span class="label label-secondary has-remove">Secondary <a href="" class="remove" title="Remove">×</a></span>
1077
+ <span class="label label-success has-remove">Success <a href="" class="remove" title="Remove">×</a></span>
1078
+ <span class="label label-danger has-remove">Danger <a href="" class="remove" title="Remove">×</a></span>
1079
+ <span class="label label-warning has-remove">Warning <a href="" class="remove" title="Remove">×</a></span>
1080
+ <span class="label label-info has-remove">Info <a href="" class="remove" title="Remove">×</a></span>
1081
+ <span class="label label-light has-remove">Light <a href="" class="remove" title="Remove">×</a></span>
1082
+ <span class="label label-dark has-remove">Dark <a href="" class="remove" title="Remove">×</a></span>
1083
+ </div>
1084
+ </div>
1062
1085
  </div>
1063
1086
 
1064
1087
  <!-- Progress
package/html/light.html CHANGED
@@ -994,7 +994,7 @@
994
994
  <path id="circle-info" d="M16,4A12,12,0,1,0,28,16,12.01312,12.01312,0,0,0,16,4Zm2.42529,10.91565L16.6,21h1.25958a.5.5,0,0,1,.48505.62134l-.25,1A.50007.50007,0,0,1,17.60962,23H14a1.40763,1.40763,0,0,1-1.42529-1.91565L14.4,15h-.75958a.5.5,0,0,1-.48505-.62134l.25-1A.49994.49994,0,0,1,13.89038,13H17A1.40763,1.40763,0,0,1,18.42529,14.91565Zm.14435-3.33337A.5.5,0,0,1,18.07642,12H15.59021a.5.5,0,0,1-.49316-.58228l.33331-2A.5.5,0,0,1,15.92358,9h2.48621a.5.5,0,0,1,.49316.58228Z"/>
995
995
  </svg>
996
996
  Oh snap!
997
- </strong>
997
+ </strong>
998
998
  <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
999
999
  </div>
1000
1000
  </div>
@@ -1065,6 +1065,29 @@
1065
1065
  <span class="badge badge-pill badge-dark">Dark</span>
1066
1066
  </div>
1067
1067
  </div>
1068
+ <div style="margin-top: 20px;">
1069
+ <h2>Labels</h2>
1070
+ <div class="bs-component" style="margin-bottom: 40px;">
1071
+ <span class="label label-primary">Primary</span>
1072
+ <span class="label label-secondary">Secondary</span>
1073
+ <span class="label label-success">Success</span>
1074
+ <span class="label label-danger">Danger</span>
1075
+ <span class="label label-warning">Warning</span>
1076
+ <span class="label label-info">Info</span>
1077
+ <span class="label label-light">Light</span>
1078
+ <span class="label label-dark">Dark</span>
1079
+ </div>
1080
+ <div class="bs-component" style="margin-bottom: 40px;">
1081
+ <span class="label label-primary has-remove">Primary <a href="" class="remove" title="Remove">×</a></span>
1082
+ <span class="label label-secondary has-remove">Secondary <a href="" class="remove" title="Remove">×</a></span>
1083
+ <span class="label label-success has-remove">Success <a href="" class="remove" title="Remove">×</a></span>
1084
+ <span class="label label-danger has-remove">Danger <a href="" class="remove" title="Remove">×</a></span>
1085
+ <span class="label label-warning has-remove">Warning <a href="" class="remove" title="Remove">×</a></span>
1086
+ <span class="label label-info has-remove">Info <a href="" class="remove" title="Remove">×</a></span>
1087
+ <span class="label label-light has-remove">Light <a href="" class="remove" title="Remove">×</a></span>
1088
+ <span class="label label-dark has-remove">Dark <a href="" class="remove" title="Remove">×</a></span>
1089
+ </div>
1090
+ </div>
1068
1091
  </div>
1069
1092
 
1070
1093
  <!-- Progress
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-hire/bootstrap-themes",
3
- "version": "0.7.17",
3
+ "version": "0.7.18",
4
4
  "description": "Custom Bootstrap 4 Themes",
5
5
  "repository": {
6
6
  "type": "git",
package/scss/labels.scss ADDED
@@ -0,0 +1,152 @@
1
+ .label {
2
+ display: flex;
3
+ margin-bottom: 4px;
4
+ margin-right: 5px;
5
+ font-size: 14px;
6
+ padding: 5px 12px;
7
+ font-weight: 500;
8
+ padding: 6px 12px;
9
+ font-size: 13px;
10
+ border-radius: 0px;
11
+ color: #fff;
12
+ text-align: center;
13
+ white-space: nowrap;
14
+
15
+ &.has-remove {
16
+ position: relative;
17
+ padding-right: 20px;
18
+ }
19
+
20
+ .remove {
21
+ position: absolute;
22
+ top: 0;
23
+ right: 0;
24
+ bottom: 0;
25
+ display: inline-block;
26
+ width: 17px;
27
+ padding: 1px 0 0;
28
+ padding-right: 2px;
29
+ font-size: 16px;
30
+ font-weight: 700;
31
+ color: inherit;
32
+ cursor: pointer;
33
+ text-align: center;
34
+ text-decoration: none;
35
+ vertical-align: middle;
36
+ border-left: 1px solid transparent;
37
+ border-radius: 0 2px 2px 0;
38
+ box-sizing: border-box;
39
+ }
40
+
41
+ &.label-default {
42
+ background-color: #777;
43
+
44
+ svg {
45
+ fill: $white;
46
+ }
47
+
48
+ .remove:hover {
49
+ background-color: darken(#777, 10%);
50
+ }
51
+ }
52
+
53
+ &.label-primary {
54
+ background-color: $primary;
55
+
56
+ svg {
57
+ fill: $white;
58
+ }
59
+
60
+ .remove:hover {
61
+ background-color: darken($primary, 10%);
62
+ }
63
+ }
64
+
65
+ &.label-secondary {
66
+ background-color: $secondary;
67
+
68
+ svg {
69
+ fill: $white;
70
+ }
71
+
72
+ .remove:hover {
73
+ background-color: darken($secondary, 10%);
74
+ }
75
+ }
76
+
77
+ &.label-success {
78
+ background-color: $success;
79
+
80
+ svg {
81
+ fill: $white;
82
+ }
83
+
84
+ .remove:hover {
85
+ background-color: darken($success, 10%);
86
+ }
87
+ }
88
+
89
+ &.label-danger {
90
+ background-color: $danger;
91
+
92
+ svg {
93
+ fill: $white;
94
+ }
95
+
96
+ .remove:hover {
97
+ background-color: darken($danger, 10%);
98
+ }
99
+ }
100
+
101
+ &.label-warning {
102
+ background-color: $warning;
103
+ color: $black;
104
+
105
+ svg {
106
+ fill: $white;
107
+ }
108
+
109
+ .remove:hover {
110
+ background-color: darken($warning, 10%);
111
+ }
112
+ }
113
+
114
+ &.label-info {
115
+ background-color: $info;
116
+ color: $black;
117
+
118
+ svg {
119
+ fill: $white;
120
+ }
121
+
122
+ .remove:hover {
123
+ background-color: darken($info, 10%);
124
+ }
125
+ }
126
+
127
+ &.label-light {
128
+ background-color: $light;
129
+ color: $black;
130
+
131
+ svg {
132
+ fill: $white;
133
+ }
134
+
135
+ .remove:hover {
136
+ background-color: darken($light, 10%);
137
+ }
138
+ }
139
+
140
+ &.label-dark {
141
+ background-color: $dark;
142
+ color: $white;
143
+
144
+ svg {
145
+ fill: $white;
146
+ }
147
+
148
+ .remove:hover {
149
+ background-color: darken($dark, 10%);
150
+ }
151
+ }
152
+ }
package/scss/shared.scss CHANGED
@@ -10,4 +10,5 @@
10
10
  @import "utilities";
11
11
  @import "bootstrap-grid";
12
12
  @import "custom-forms";
13
- @import "form-group";
13
+ @import "form-group";
14
+ @import "labels";