spectre_scss 0.3.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +13 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +6 -0
  6. data/LICENSE.txt +21 -0
  7. data/README.md +48 -0
  8. data/Rakefile +34 -0
  9. data/bin/console +7 -0
  10. data/bin/setup +6 -0
  11. data/lib/spectre_scss.rb +5 -0
  12. data/lib/spectre_scss/engine.rb +4 -0
  13. data/lib/spectre_scss/version.rb +3 -0
  14. data/spectre_scss.gemspec +26 -0
  15. data/vendor/assets/stylesheets/spectre.scss +1 -0
  16. data/vendor/assets/stylesheets/spectre/spectre-exp.scss +16 -0
  17. data/vendor/assets/stylesheets/spectre/spectre-icons.scss +8 -0
  18. data/vendor/assets/stylesheets/spectre/spectre.scss +50 -0
  19. data/vendor/assets/stylesheets/spectre/src/_accordions.scss +34 -0
  20. data/vendor/assets/stylesheets/spectre/src/_animations.scss +20 -0
  21. data/vendor/assets/stylesheets/spectre/src/_asian.scss +33 -0
  22. data/vendor/assets/stylesheets/spectre/src/_autocomplete.scss +41 -0
  23. data/vendor/assets/stylesheets/spectre/src/_avatars.scss +77 -0
  24. data/vendor/assets/stylesheets/spectre/src/_badges.scss +70 -0
  25. data/vendor/assets/stylesheets/spectre/src/_bars.scss +71 -0
  26. data/vendor/assets/stylesheets/spectre/src/_base.scss +40 -0
  27. data/vendor/assets/stylesheets/spectre/src/_breadcrumbs.scss +29 -0
  28. data/vendor/assets/stylesheets/spectre/src/_buttons.scss +182 -0
  29. data/vendor/assets/stylesheets/spectre/src/_calendars.scss +206 -0
  30. data/vendor/assets/stylesheets/spectre/src/_cards.scss +39 -0
  31. data/vendor/assets/stylesheets/spectre/src/_carousels.scss +124 -0
  32. data/vendor/assets/stylesheets/spectre/src/_chips.scss +24 -0
  33. data/vendor/assets/stylesheets/spectre/src/_codes.scss +32 -0
  34. data/vendor/assets/stylesheets/spectre/src/_comparison-sliders.scss +114 -0
  35. data/vendor/assets/stylesheets/spectre/src/_dropdowns.scss +36 -0
  36. data/vendor/assets/stylesheets/spectre/src/_empty.scss +21 -0
  37. data/vendor/assets/stylesheets/spectre/src/_filters.scss +29 -0
  38. data/vendor/assets/stylesheets/spectre/src/_forms.scss +514 -0
  39. data/vendor/assets/stylesheets/spectre/src/_icons.scss +656 -0
  40. data/vendor/assets/stylesheets/spectre/src/_labels.scss +33 -0
  41. data/vendor/assets/stylesheets/spectre/src/_layout.scss +422 -0
  42. data/vendor/assets/stylesheets/spectre/src/_media.scss +70 -0
  43. data/vendor/assets/stylesheets/spectre/src/_menus.scss +56 -0
  44. data/vendor/assets/stylesheets/spectre/src/_meters.scss +57 -0
  45. data/vendor/assets/stylesheets/spectre/src/_mixins.scss +185 -0
  46. data/vendor/assets/stylesheets/spectre/src/_modals.scss +73 -0
  47. data/vendor/assets/stylesheets/spectre/src/_navbar.scss +29 -0
  48. data/vendor/assets/stylesheets/spectre/src/_navigation.scss +13 -0
  49. data/vendor/assets/stylesheets/spectre/src/_navs.scss +34 -0
  50. data/vendor/assets/stylesheets/spectre/src/_normalize.scss +437 -0
  51. data/vendor/assets/stylesheets/spectre/src/_pagination.scss +61 -0
  52. data/vendor/assets/stylesheets/spectre/src/_panels.scss +23 -0
  53. data/vendor/assets/stylesheets/spectre/src/_parallax.scss +131 -0
  54. data/vendor/assets/stylesheets/spectre/src/_popovers.scss +70 -0
  55. data/vendor/assets/stylesheets/spectre/src/_progress.scss +45 -0
  56. data/vendor/assets/stylesheets/spectre/src/_sliders.scss +93 -0
  57. data/vendor/assets/stylesheets/spectre/src/_steps.scss +70 -0
  58. data/vendor/assets/stylesheets/spectre/src/_tables.scss +45 -0
  59. data/vendor/assets/stylesheets/spectre/src/_tabs.scss +62 -0
  60. data/vendor/assets/stylesheets/spectre/src/_tiles.scss +38 -0
  61. data/vendor/assets/stylesheets/spectre/src/_timelines.scss +55 -0
  62. data/vendor/assets/stylesheets/spectre/src/_toasts.scss +41 -0
  63. data/vendor/assets/stylesheets/spectre/src/_tooltips.scss +77 -0
  64. data/vendor/assets/stylesheets/spectre/src/_typography.scss +127 -0
  65. data/vendor/assets/stylesheets/spectre/src/_utilities.scss +7 -0
  66. data/vendor/assets/stylesheets/spectre/src/_variables.scss +105 -0
  67. data/vendor/assets/stylesheets/spectre/src/utilities/_colors.scss +45 -0
  68. data/vendor/assets/stylesheets/spectre/src/utilities/_display.scss +47 -0
  69. data/vendor/assets/stylesheets/spectre/src/utilities/_divider.scss +50 -0
  70. data/vendor/assets/stylesheets/spectre/src/utilities/_loading.scss +34 -0
  71. data/vendor/assets/stylesheets/spectre/src/utilities/_position.scss +35 -0
  72. data/vendor/assets/stylesheets/spectre/src/utilities/_shapes.scss +7 -0
  73. data/vendor/assets/stylesheets/spectre/src/utilities/_text.scss +52 -0
  74. 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
@@ -0,0 +1,13 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
10
+ /spectre_source/
11
+
12
+ # rspec failure tracking
13
+ .rspec_status
data/.rspec ADDED
@@ -0,0 +1,2 @@
1
+ --format documentation
2
+ --color
data/.travis.yml ADDED
@@ -0,0 +1,5 @@
1
+ sudo: false
2
+ language: ruby
3
+ rvm:
4
+ - 2.4.1
5
+ before_install: gem install bundler -v 1.15.4
data/Gemfile ADDED
@@ -0,0 +1,6 @@
1
+ source 'https://rubygems.org'
2
+
3
+ git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
4
+
5
+ # Specify your gem's dependencies in spectre_scss.gemspec
6
+ gemspec
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
@@ -0,0 +1,7 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require 'bundler/setup'
4
+ require 'spectre_scss'
5
+
6
+ require 'irb'
7
+ IRB.start(__FILE__)
data/bin/setup ADDED
@@ -0,0 +1,6 @@
1
+ #!/usr/bin/env bash
2
+ set -euo pipefail
3
+ IFS=$'\n\t'
4
+ set -vx
5
+
6
+ bundle install
@@ -0,0 +1,5 @@
1
+ require 'spectre_scss/version'
2
+ require 'spectre_scss/engine' if (defined?(Rails) && defined?(Rails::Engine))
3
+
4
+ module SpectreScss
5
+ end
@@ -0,0 +1,4 @@
1
+ module SpectreScss
2
+ class Engine < Rails::Engine
3
+ end
4
+ end
@@ -0,0 +1,3 @@
1
+ module SpectreScss
2
+ VERSION = '0.3.2.0'
3
+ end
@@ -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,8 @@
1
+ /*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */
2
+
3
+ // Core variables and mixins
4
+ @import 'src/variables';
5
+ @import 'src/mixins';
6
+
7
+ // Icons
8
+ @import 'src/icons';
@@ -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
+ }