spectre_scss 0.3.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +13 -0
- data/.rspec +2 -0
- data/.travis.yml +5 -0
- data/Gemfile +6 -0
- data/LICENSE.txt +21 -0
- data/README.md +48 -0
- data/Rakefile +34 -0
- data/bin/console +7 -0
- data/bin/setup +6 -0
- data/lib/spectre_scss.rb +5 -0
- data/lib/spectre_scss/engine.rb +4 -0
- data/lib/spectre_scss/version.rb +3 -0
- data/spectre_scss.gemspec +26 -0
- data/vendor/assets/stylesheets/spectre.scss +1 -0
- data/vendor/assets/stylesheets/spectre/spectre-exp.scss +16 -0
- data/vendor/assets/stylesheets/spectre/spectre-icons.scss +8 -0
- data/vendor/assets/stylesheets/spectre/spectre.scss +50 -0
- data/vendor/assets/stylesheets/spectre/src/_accordions.scss +34 -0
- data/vendor/assets/stylesheets/spectre/src/_animations.scss +20 -0
- data/vendor/assets/stylesheets/spectre/src/_asian.scss +33 -0
- data/vendor/assets/stylesheets/spectre/src/_autocomplete.scss +41 -0
- data/vendor/assets/stylesheets/spectre/src/_avatars.scss +77 -0
- data/vendor/assets/stylesheets/spectre/src/_badges.scss +70 -0
- data/vendor/assets/stylesheets/spectre/src/_bars.scss +71 -0
- data/vendor/assets/stylesheets/spectre/src/_base.scss +40 -0
- data/vendor/assets/stylesheets/spectre/src/_breadcrumbs.scss +29 -0
- data/vendor/assets/stylesheets/spectre/src/_buttons.scss +182 -0
- data/vendor/assets/stylesheets/spectre/src/_calendars.scss +206 -0
- data/vendor/assets/stylesheets/spectre/src/_cards.scss +39 -0
- data/vendor/assets/stylesheets/spectre/src/_carousels.scss +124 -0
- data/vendor/assets/stylesheets/spectre/src/_chips.scss +24 -0
- data/vendor/assets/stylesheets/spectre/src/_codes.scss +32 -0
- data/vendor/assets/stylesheets/spectre/src/_comparison-sliders.scss +114 -0
- data/vendor/assets/stylesheets/spectre/src/_dropdowns.scss +36 -0
- data/vendor/assets/stylesheets/spectre/src/_empty.scss +21 -0
- data/vendor/assets/stylesheets/spectre/src/_filters.scss +29 -0
- data/vendor/assets/stylesheets/spectre/src/_forms.scss +514 -0
- data/vendor/assets/stylesheets/spectre/src/_icons.scss +656 -0
- data/vendor/assets/stylesheets/spectre/src/_labels.scss +33 -0
- data/vendor/assets/stylesheets/spectre/src/_layout.scss +422 -0
- data/vendor/assets/stylesheets/spectre/src/_media.scss +70 -0
- data/vendor/assets/stylesheets/spectre/src/_menus.scss +56 -0
- data/vendor/assets/stylesheets/spectre/src/_meters.scss +57 -0
- data/vendor/assets/stylesheets/spectre/src/_mixins.scss +185 -0
- data/vendor/assets/stylesheets/spectre/src/_modals.scss +73 -0
- data/vendor/assets/stylesheets/spectre/src/_navbar.scss +29 -0
- data/vendor/assets/stylesheets/spectre/src/_navigation.scss +13 -0
- data/vendor/assets/stylesheets/spectre/src/_navs.scss +34 -0
- data/vendor/assets/stylesheets/spectre/src/_normalize.scss +437 -0
- data/vendor/assets/stylesheets/spectre/src/_pagination.scss +61 -0
- data/vendor/assets/stylesheets/spectre/src/_panels.scss +23 -0
- data/vendor/assets/stylesheets/spectre/src/_parallax.scss +131 -0
- data/vendor/assets/stylesheets/spectre/src/_popovers.scss +70 -0
- data/vendor/assets/stylesheets/spectre/src/_progress.scss +45 -0
- data/vendor/assets/stylesheets/spectre/src/_sliders.scss +93 -0
- data/vendor/assets/stylesheets/spectre/src/_steps.scss +70 -0
- data/vendor/assets/stylesheets/spectre/src/_tables.scss +45 -0
- data/vendor/assets/stylesheets/spectre/src/_tabs.scss +62 -0
- data/vendor/assets/stylesheets/spectre/src/_tiles.scss +38 -0
- data/vendor/assets/stylesheets/spectre/src/_timelines.scss +55 -0
- data/vendor/assets/stylesheets/spectre/src/_toasts.scss +41 -0
- data/vendor/assets/stylesheets/spectre/src/_tooltips.scss +77 -0
- data/vendor/assets/stylesheets/spectre/src/_typography.scss +127 -0
- data/vendor/assets/stylesheets/spectre/src/_utilities.scss +7 -0
- data/vendor/assets/stylesheets/spectre/src/_variables.scss +105 -0
- data/vendor/assets/stylesheets/spectre/src/utilities/_colors.scss +45 -0
- data/vendor/assets/stylesheets/spectre/src/utilities/_display.scss +47 -0
- data/vendor/assets/stylesheets/spectre/src/utilities/_divider.scss +50 -0
- data/vendor/assets/stylesheets/spectre/src/utilities/_loading.scss +34 -0
- data/vendor/assets/stylesheets/spectre/src/utilities/_position.scss +35 -0
- data/vendor/assets/stylesheets/spectre/src/utilities/_shapes.scss +7 -0
- data/vendor/assets/stylesheets/spectre/src/utilities/_text.scss +52 -0
- metadata +157 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 5a5cc9555880679eac1e7c98036661315d1fc50c
|
4
|
+
data.tar.gz: fe34e8aaa7a20ea4477b41b2db6c598b20f246fd
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 8f396555c77dfa21b2e8ba6c7206c990c37a19c9403bc8709d0e7cb8c0c986adfd15ecb2bf8c601659fe8f23f8da9e0329254966e5eb6aff096a7e62f494ff19
|
7
|
+
data.tar.gz: d7ea94c364a1c970e9f9f11fd956dd03266d1e0e718850757613d7bb5908d8ac9c74c74e5f5ec68ad99d76b29d836df62aed8d76a6077b01550bb510cdc7d372
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2017 Zoran Pesic
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,48 @@
|
|
1
|
+
# Spectre.scss
|
2
|
+
|
3
|
+
[Spectre](https://picturepan2.github.io/spectre/) is a lightweight, responsive and modern CSS framework. This gem packages a Sass version of Spectre's assets for drop-in use in Rails applications.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'spectre_scss'
|
11
|
+
```
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
|
15
|
+
$ bundle
|
16
|
+
|
17
|
+
Or install it yourself as:
|
18
|
+
|
19
|
+
$ gem install spectre_scss
|
20
|
+
|
21
|
+
## Usage
|
22
|
+
|
23
|
+
Once installed, add the following to your `application.scss`:
|
24
|
+
|
25
|
+
```scss
|
26
|
+
@import "spectre";
|
27
|
+
```
|
28
|
+
|
29
|
+
Or, import components as needed:
|
30
|
+
|
31
|
+
```scss
|
32
|
+
// Core variables and mixins
|
33
|
+
@import 'spectre/src/variables';
|
34
|
+
@import 'spectre/src/mixins';
|
35
|
+
@import 'spectre/src/utilities';
|
36
|
+
|
37
|
+
// Reset and dependencies
|
38
|
+
@import 'spectre/src/normalize';
|
39
|
+
@import 'spectre/src/base';
|
40
|
+
|
41
|
+
@import 'spectre/src/buttons';
|
42
|
+
@import 'spectre/src/navbar';
|
43
|
+
@import 'spectre/src/tables';
|
44
|
+
```
|
45
|
+
|
46
|
+
## License
|
47
|
+
|
48
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
require 'bundler/gem_tasks'
|
2
|
+
require 'rspec/core/rake_task'
|
3
|
+
require 'spectre_scss/version'
|
4
|
+
|
5
|
+
RSpec::Core::RakeTask.new(:spec)
|
6
|
+
|
7
|
+
task :default => :spec
|
8
|
+
|
9
|
+
namespace :spectre_scss do
|
10
|
+
namespace :assets do
|
11
|
+
desc 'Update Spectre\'s assets.'
|
12
|
+
task update: :clean do
|
13
|
+
# version = ARGV[1] || "v#{SpectreScss::VERSION.sub(/.\d+$/, '')}"
|
14
|
+
commit = ARGV[1] || 'HEAD'
|
15
|
+
|
16
|
+
sh 'git clone git@github.com:trilbymedia/spectre-scss.git spectre_source'
|
17
|
+
sh "cd spectre_source && git checkout #{commit}"
|
18
|
+
sh 'cp -R spectre_source/scss/ vendor/assets/stylesheets/spectre/'
|
19
|
+
|
20
|
+
File.open('vendor/assets/stylesheets/spectre.scss', 'w') do |f|
|
21
|
+
f.write('@import "spectre/spectre.scss";')
|
22
|
+
end
|
23
|
+
|
24
|
+
puts "\n=*=*=*=*=*=*=*=*=*=*\n=* ASSETS UPDATED! *=\n=*=*=*=*=*=*=*=*=*=*\n"
|
25
|
+
end
|
26
|
+
|
27
|
+
desc 'Remove previous Spectre assets.'
|
28
|
+
task :clean do
|
29
|
+
sh 'rm -rf vendor'
|
30
|
+
sh 'rm -rf spectre_source'
|
31
|
+
sh 'mkdir -p vendor/assets/stylesheets/'
|
32
|
+
end
|
33
|
+
end
|
34
|
+
end
|
data/bin/console
ADDED
data/bin/setup
ADDED
data/lib/spectre_scss.rb
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'spectre_scss/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = 'spectre_scss'
|
8
|
+
spec.version = SpectreScss::VERSION
|
9
|
+
spec.authors = ['Zoran']
|
10
|
+
|
11
|
+
spec.summary = 'Sass port of the Spectre CSS framework'
|
12
|
+
spec.description = 'Spectre is a lightweight, responsive and modern CSS framework'
|
13
|
+
spec.homepage = 'https://github.com/zokioki/spectre_scss'
|
14
|
+
spec.license = 'MIT'
|
15
|
+
|
16
|
+
spec.files = `git ls-files -z`.split("\x0").reject do |f|
|
17
|
+
f.match(%r{^(test|spec|features)/})
|
18
|
+
end
|
19
|
+
spec.bindir = 'exe'
|
20
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
21
|
+
spec.require_paths = ['lib']
|
22
|
+
|
23
|
+
spec.add_development_dependency 'bundler', '~> 1.15'
|
24
|
+
spec.add_development_dependency 'rake', '~> 10.0'
|
25
|
+
spec.add_development_dependency 'rspec', '~> 3.0'
|
26
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
@import "spectre/spectre.scss";
|
@@ -0,0 +1,16 @@
|
|
1
|
+
/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
|
2
|
+
|
3
|
+
// Core variables and mixins
|
4
|
+
@import 'src/variables';
|
5
|
+
@import 'src/mixins';
|
6
|
+
|
7
|
+
// Experimentals
|
8
|
+
@import 'src/calendars';
|
9
|
+
@import 'src/carousels';
|
10
|
+
@import 'src/comparison-sliders';
|
11
|
+
@import 'src/filters';
|
12
|
+
@import 'src/meters';
|
13
|
+
@import 'src/parallax';
|
14
|
+
@import 'src/progress';
|
15
|
+
@import 'src/sliders';
|
16
|
+
@import 'src/timelines';
|
@@ -0,0 +1,50 @@
|
|
1
|
+
/*! Spectre.css | MIT License | github.com/picturepan2/spectre */
|
2
|
+
|
3
|
+
// Core variables and mixins
|
4
|
+
@import 'src/variables';
|
5
|
+
@import 'src/mixins';
|
6
|
+
|
7
|
+
// Reset and dependencies
|
8
|
+
@import 'src/normalize';
|
9
|
+
@import 'src/base';
|
10
|
+
|
11
|
+
// Core classes
|
12
|
+
@import 'src/typography';
|
13
|
+
@import 'src/asian';
|
14
|
+
@import 'src/tables';
|
15
|
+
@import 'src/buttons';
|
16
|
+
@import 'src/forms';
|
17
|
+
@import 'src/labels';
|
18
|
+
@import 'src/codes';
|
19
|
+
@import 'src/media';
|
20
|
+
|
21
|
+
// Layout
|
22
|
+
@import 'src/layout';
|
23
|
+
@import 'src/navbar';
|
24
|
+
@import 'src/panels';
|
25
|
+
@import 'src/empty';
|
26
|
+
|
27
|
+
// Components
|
28
|
+
@import 'src/accordions';
|
29
|
+
@import 'src/autocomplete';
|
30
|
+
@import 'src/avatars';
|
31
|
+
@import 'src/badges';
|
32
|
+
@import 'src/breadcrumbs';
|
33
|
+
@import 'src/bars';
|
34
|
+
@import 'src/cards';
|
35
|
+
@import 'src/chips';
|
36
|
+
@import 'src/dropdowns';
|
37
|
+
@import 'src/menus';
|
38
|
+
@import 'src/modals';
|
39
|
+
@import 'src/navs';
|
40
|
+
@import 'src/pagination';
|
41
|
+
@import 'src/popovers';
|
42
|
+
@import 'src/steps';
|
43
|
+
@import 'src/tabs';
|
44
|
+
@import 'src/tiles';
|
45
|
+
@import 'src/toasts';
|
46
|
+
@import 'src/tooltips';
|
47
|
+
|
48
|
+
// Utility classes
|
49
|
+
@import 'src/animations';
|
50
|
+
@import 'src/utilities';
|
@@ -0,0 +1,34 @@
|
|
1
|
+
// Accordions
|
2
|
+
.accordion {
|
3
|
+
.accordion-item {
|
4
|
+
input {
|
5
|
+
&:checked {
|
6
|
+
& ~ .accordion-header {
|
7
|
+
.icon {
|
8
|
+
transform: rotate(90deg);
|
9
|
+
|
10
|
+
}
|
11
|
+
}
|
12
|
+
& ~ .accordion-body {
|
13
|
+
max-height: 1000px;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
.accordion-header {
|
19
|
+
display: block;
|
20
|
+
padding: $unit-1 $unit-2;
|
21
|
+
|
22
|
+
.icon {
|
23
|
+
transition: all .2s ease;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
.accordion-body {
|
28
|
+
margin-bottom: $layout-spacing;
|
29
|
+
max-height: 0;
|
30
|
+
overflow: hidden;
|
31
|
+
transition: max-height .2s ease;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// Animations
|
2
|
+
@keyframes loading {
|
3
|
+
0% {
|
4
|
+
transform: rotate(0deg);
|
5
|
+
}
|
6
|
+
100% {
|
7
|
+
transform: rotate(360deg);
|
8
|
+
}
|
9
|
+
}
|
10
|
+
|
11
|
+
@keyframes slide-down {
|
12
|
+
0% {
|
13
|
+
opacity: 0;
|
14
|
+
transform: translateY(-$unit-8);
|
15
|
+
}
|
16
|
+
100% {
|
17
|
+
opacity: 1;
|
18
|
+
transform: translateY(0);
|
19
|
+
}
|
20
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// Optimized for East Asian CJK
|
2
|
+
:lang(zh) {
|
3
|
+
font-family: $cjk-zh-font-family;
|
4
|
+
}
|
5
|
+
|
6
|
+
:lang(ja) {
|
7
|
+
font-family: $cjk-jp-font-family;
|
8
|
+
}
|
9
|
+
|
10
|
+
:lang(ko) {
|
11
|
+
font-family: $cjk-ko-font-family;
|
12
|
+
}
|
13
|
+
|
14
|
+
:lang(zh),
|
15
|
+
:lang(ja),
|
16
|
+
.cjk {
|
17
|
+
ins,
|
18
|
+
u {
|
19
|
+
border-bottom: $border-width solid;
|
20
|
+
text-decoration: none;
|
21
|
+
}
|
22
|
+
|
23
|
+
del + del,
|
24
|
+
del + s,
|
25
|
+
ins + ins,
|
26
|
+
ins + u,
|
27
|
+
s + del,
|
28
|
+
s + s,
|
29
|
+
u + ins,
|
30
|
+
u + u {
|
31
|
+
margin-left: .125em;
|
32
|
+
}
|
33
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
// Autocomplete
|
2
|
+
.form-autocomplete {
|
3
|
+
position: relative;
|
4
|
+
|
5
|
+
.form-autocomplete-input {
|
6
|
+
align-content: flex-start;
|
7
|
+
display: flex;
|
8
|
+
flex-wrap: wrap;
|
9
|
+
height: auto;
|
10
|
+
min-height: $unit-8;
|
11
|
+
padding: $unit-h;
|
12
|
+
|
13
|
+
&.is-focused {
|
14
|
+
border-color: $primary-color;
|
15
|
+
@include control-shadow();
|
16
|
+
}
|
17
|
+
|
18
|
+
.form-input {
|
19
|
+
border-color: transparent;
|
20
|
+
box-shadow: none;
|
21
|
+
display: inline-block;
|
22
|
+
flex: 1 0 auto;
|
23
|
+
height: $unit-6;
|
24
|
+
line-height: $unit-4;
|
25
|
+
margin: $unit-h;
|
26
|
+
width: auto;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
mark {
|
31
|
+
font-size: 1;
|
32
|
+
padding: .1em 0;
|
33
|
+
}
|
34
|
+
|
35
|
+
.menu {
|
36
|
+
left: 0;
|
37
|
+
position: absolute;
|
38
|
+
top: 100%;
|
39
|
+
width: 100%;
|
40
|
+
}
|
41
|
+
}
|
@@ -0,0 +1,77 @@
|
|
1
|
+
// Avatars
|
2
|
+
.avatar {
|
3
|
+
@include avatar-base();
|
4
|
+
background: $primary-color;
|
5
|
+
border-radius: 50%;
|
6
|
+
color: rgba($light-color, .85);
|
7
|
+
display: inline-block;
|
8
|
+
font-weight: 300;
|
9
|
+
line-height: 1;
|
10
|
+
margin: 0;
|
11
|
+
position: relative;
|
12
|
+
vertical-align: middle;
|
13
|
+
|
14
|
+
&.avatar-xs {
|
15
|
+
@include avatar-base($unit-4);
|
16
|
+
}
|
17
|
+
&.avatar-sm {
|
18
|
+
@include avatar-base($unit-6);
|
19
|
+
}
|
20
|
+
&.avatar-lg {
|
21
|
+
@include avatar-base($unit-12);
|
22
|
+
}
|
23
|
+
&.avatar-xl {
|
24
|
+
@include avatar-base($unit-16);
|
25
|
+
}
|
26
|
+
|
27
|
+
img {
|
28
|
+
border-radius: 50%;
|
29
|
+
height: 100%;
|
30
|
+
position: relative;
|
31
|
+
width: 100%;
|
32
|
+
z-index: $zindex-0;
|
33
|
+
}
|
34
|
+
|
35
|
+
.avatar-icon,
|
36
|
+
.avatar-presence {
|
37
|
+
background: $bg-color-light;
|
38
|
+
bottom: 14.64%;
|
39
|
+
height: 50%;
|
40
|
+
padding: $border-width-lg;
|
41
|
+
position: absolute;
|
42
|
+
right: 14.64%;
|
43
|
+
transform: translate(50%, 50%);
|
44
|
+
width: 50%;
|
45
|
+
z-index: $zindex-0 + 1;
|
46
|
+
}
|
47
|
+
|
48
|
+
.avatar-presence {
|
49
|
+
background: $gray-color;
|
50
|
+
box-shadow: 0 0 0 $border-width-lg $light-color;
|
51
|
+
border-radius: 50%;
|
52
|
+
height: .5em;
|
53
|
+
width: .5em;
|
54
|
+
|
55
|
+
&.online {
|
56
|
+
background: $success-color;
|
57
|
+
}
|
58
|
+
|
59
|
+
&.busy {
|
60
|
+
background: $error-color;
|
61
|
+
}
|
62
|
+
|
63
|
+
&.away {
|
64
|
+
background: $warning-color;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
&[data-initial]::before {
|
69
|
+
color: currentColor;
|
70
|
+
content: attr(data-initial);
|
71
|
+
left: 50%;
|
72
|
+
position: absolute;
|
73
|
+
top: 50%;
|
74
|
+
transform: translate(-50%, -50%);
|
75
|
+
z-index: $zindex-0;
|
76
|
+
}
|
77
|
+
}
|