metro-rails 0.1.0

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in metro-rails.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Martin Schürrer
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,14 @@
+# metro-rails
+
+Make https://github.com/olton/Metro-UI-CSS available for the asset
+pipeline.
+
+Due to this bug the stylesheets still are `.less`: https://github.com/nex3/sass/issues/122
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"

data/lib/metro-rails.rb

@@ -0,0 +1,7 @@
+require "metro-rails/version"
+
+module Metro
+  module Rails
+    # Your code goes here...
+  end
+end

data/lib/metro-rails/version.rb

@@ -0,0 +1,5 @@
+module Metro
+  module Rails
+    VERSION = "0.1.0"
+  end
+end

data/metro-rails.gemspec

@@ -0,0 +1,18 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/metro-rails/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.authors       = ["Martin Schürrer"]
+  gem.email         = ["martin@schuerrer.org"]
+  gem.description   = %q{metroui.org.ua as a plugin for the Rails Asset Pipeline}
+  gem.summary       = %q{Uses less and not sass for now.}
+  gem.homepage      = ""
+
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.name          = "metro-rails"
+  gem.require_paths = ["lib"]
+  gem.version       = Metro::Rails::VERSION
+  gem.add_runtime_dependency 'less-rails'
+end

data/vendor/assets/stylesheets/metro/buttons.less

@@ -0,0 +1,362 @@
+/*
+ * Metro UI CSS v 1.0.1
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ */
+
+
+.metro {
+    .metro-button {
+        text-decoration: none;
+        border: 2px #e2e2e2 solid;
+        padding: 5px 20px;
+        margin: 10px 10px 0 10px;
+        color: #fff !important;
+        background: #1d1d1d;
+        cursor: pointer;
+        min-width: 50px;
+        //min-height: 22px;
+        display: inline-block;
+        position: relative;
+        text-align: center;
+        border-radius: 0;
+
+        &:hover {
+            background: #3a3a3a;
+        }
+
+        &.default:hover {
+            background: #219297;
+        }
+
+        &:active {
+            background: #ffffff;
+            color: #1d1d1d !important;
+            top: 2px;
+            left: 2px;
+        }
+    }
+
+    .metro-button.disabled, .metro-button:disabled, .metro-command-button.disabled, .metro-command-button:disabled {
+        border-color: #777777;
+        color: #777777 !important;
+        cursor: default;
+        background: #1d1d1d !important;
+        &:hover {
+            background: #1d1d1d;
+        }
+        &:active {
+            top: 0;
+            left: 0;
+        }
+    }
+
+    input.metro-button, button.metro-button {
+        min-width: 94px !important;
+    }
+
+    .metro-button.default {
+        background: #008287;
+        &:active {
+            background: #fff;
+        }
+    }
+
+    .metro-command-button {
+        text-decoration: none;
+        border: 2px @white solid;
+        padding: 5px 20px;
+        display: block;
+        width: 240px;
+        height: 40px;
+        background: #1d1d1d;
+        position: relative;
+        margin: 10px 10px 0 10px;
+
+        .title {
+            color: #fff;
+            display: block;
+            font-weight: bold;
+        }
+        .subtitle {
+            color: #a1a1a1;
+            display: block;
+            font-size: 90%;
+        }
+
+        &:hover {
+            background: #3a3a3a;
+        }
+
+        &:active {
+            background: @white;
+            * {
+                color: #000;
+            }
+            top: 2px;
+            left: 2px;
+        }
+    }
+
+    .metro-command-button.default {
+        background: #008287;
+        &:active {
+            background: #fff;
+        }
+    }
+
+    .metro-command-button.default:hover {
+        background: #219297;
+    }
+
+    button.metro-command-button {
+        text-align: left;
+        min-width: 285px !important;
+        min-height: 60px;
+    }
+
+    .metro-command-button.disabled, .metro-command-button:disabled {
+        .title, .subtitle {color: #3a3a3a;}
+        &:active {
+            .title, .subtitle {color: #3a3a3a;}
+        }
+    }
+
+    .metro-radio, .metro-check, .metro-switch {
+        cursor: pointer;
+        cursor: hand;
+        position: relative;
+    }
+
+    .metro-radio {
+        input[type=radio],
+        input[type=radio] + span,
+        input[type=radio] + span::before,
+        input[type=radio] + span::after, {
+            vertical-align: middle;
+            display: inline-block;
+        }
+
+        input[type=radio] {
+            position: absolute;
+            filter: alpha(opacity=0);
+            -moz-opacity: 0;
+            opacity: 0;
+        }
+
+        input[type=radio] + span {
+            font: normal 13px/14px "Segoe UI", Sans-serif;
+        }
+
+        input[type=radio] + span::before {
+            content: "\2022";
+            text-indent: -9999px;
+            width: 24px;
+            height: 24px;
+            background: #cfcfcf;
+            margin-right: 10px;
+            border-radius: 50%;
+        }
+
+        input[type=radio]:checked + span::after {
+            text-indent: -9999px;
+            position: absolute;
+            content: "\2022";
+            background: #212121;
+            z-index: 1000;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            left: 6px;
+            top: 6px;
+        }
+        input[type=radio]:checked + span::before {
+            background: #d1d1d1;
+        }
+
+        input[type=radio]:not(:checked):disabled + span::before {
+            cursor: default;
+            background: #868686;
+        }
+
+        input[type=radio]:disabled + span::before {
+            cursor: default;
+            background: #868686;
+        }
+
+        input[type=radio]:disabled + span::after {
+            background: #484848;
+        }
+
+        &:hover input[type=radio]:not(:checked):disabled + span::before {
+            background: #868686;
+        }
+        &:hover input[type=radio]:not(:checked) + span::before {
+            background: #ffffff;
+        }
+        &:hover input[type=radio]:checked + span::before {
+            background: #dfdfdf;
+        }
+        &:hover input[type=radio]:checked:disabled + span::before {
+            background: #868686;
+        }
+        &:hover input[type=radio]:checked:disabled + span::after {
+            background: #484848;
+        }
+        &:hover input[type=radio]:checked + span::after {
+            background: #000000;
+        }
+    }
+
+    .metro-check {
+        input[type=checkbox],
+        input[type=checkbox] + span,
+        input[type=checkbox] + span::before,
+        input[type=checkbox] + span::after, {
+            vertical-align: middle;
+            display: inline-block;
+        }
+
+        input[type=checkbox] {
+            position: absolute;
+            filter: alpha(opacity=0);
+            -moz-opacity: 0;
+            opacity: 0;
+        }
+
+        input[type=checkbox] + span {
+            font: normal 13px/14px "Segoe UI", Sans-serif;
+        }
+
+        &:hover input[type=checkbox] + span::before {
+            background: #fff;
+        }
+
+        &:hover input[type=checkbox]:checked + span::before {
+            background: #e1e1e1;
+        }
+
+        input[type=checkbox] + span::before {
+            content: "\2714";
+            text-indent: -9999px;
+            width: 22px;
+            height: 22px;
+            background: #d1d1d1;
+            margin-right: 10px;
+        }
+
+        input[type=checkbox]:checked + span::after {
+            position: absolute;
+            content: "\2713";
+            color: #202020;
+            z-index: 1000;
+            font-size: 20px;
+            font-weight: bold;
+            font-family: Tahoma;
+            left: 4px;
+            top: 4px;
+        }
+        input[type=checkbox]:checked + span::before {
+            background: #d1d1d1;
+        }
+
+        input[type=checkbox]:not(:checked):disabled + span::before {
+            cursor: default;
+            background: #767676;
+        }
+
+        input[type=checkbox]:disabled + span::before {
+            cursor: default;
+            background: #767676;
+        }
+
+        input[type=checkbox]:disabled + span::after {
+            color: #4c4c4c;
+        }
+
+        &:hover input[type=checkbox]:disabled + span::before {
+            cursor: default;
+            background: #767676;
+        }
+
+    }
+
+    .metro-switch {
+        input[type=checkbox],
+        input[type=checkbox] + span,
+        input[type=checkbox] + span::before,
+        input[type=checkbox] + span::after, {
+            vertical-align: middle;
+            display: inline-block;
+        }
+
+        input[type=checkbox] {
+            position: absolute;
+            filter: alpha(opacity=0);
+            -moz-opacity: 0;
+            opacity: 0;
+        }
+
+        input[type=checkbox] + span {
+            font: normal 13px/14px "Segoe UI", Sans-serif;
+        }
+
+        input[type=checkbox] + span::before {
+            content: "";
+            width: 43px;
+            height: 14px;
+            outline: 2px #777777 solid;
+            border: 1px @darken solid;
+            cursor: pointer;
+            background: #6c6c6c;
+            margin-left: 2px;
+            position: relative;
+            margin-right: 10px;
+            z-index: 100;
+        }
+
+        input[type=checkbox] + span::after {
+            content: "";
+            position: absolute;
+            top: 2px;
+            left: 35px;
+            width: 13px;
+            height: 19px;
+            background: #ffffff;
+            z-index: 200;
+        }
+
+        input[type=checkbox]:checked + span::before {
+            background: #008287;
+        }
+
+        input[type=checkbox]:not(:checked) + span::after {
+            top: 2px;
+            left: 0px;
+        }
+
+        input[type=checkbox]:disabled + span::before {
+            cursor: default !important;
+            background: #383838;
+            outline: 2px #494949 solid;
+        }
+
+        input[type=checkbox]:disabled + span::after {
+            background: #6c6c6c;
+        }
+
+        &:hover input[type=checkbox]:not(:checked) + span::before {
+            background: #5f5f5f;
+        }
+
+        &:hover input[type=checkbox] + span::before {
+            background: #219297;
+        }
+
+        &:hover input[type=checkbox]:disabled + span::before {
+            cursor: default;
+            background: #383838;
+        }
+    }
+
+}