logo

.gitignore

@@ -3,6 +3,8 @@ _gh_pages
 _site
 .ruby-version
 .sass-cache
+dist/template-app/index-og.html
+docs/dist/template-app/index-og.html
 
 # Numerous always-ignore extensions
 *.diff

Gruntfile.js

@@ -47,6 +47,10 @@ module.exports = function(grunt) {
         src: 'sass/photon.scss',
         dest: '<%= meta.distPath %>css/<%= pkg.name %>.css'
       },
+      osx: {
+        src: 'sass/theme-osx.scss',
+        dest: '<%= meta.distPath %>css/<%= pkg.name %>-theme-osx.css'
+      },
       docs: {
         src: 'sass/docs.scss',
         dest: '<%= meta.docsAssetsPath %>css/docs.css'

dist/css/photon-theme-osx.css

@@ -0,0 +1,327 @@
+/*!
+ * =====================================================
+ * Photon v0.1.2
+ * Copyright 2016 Connor Sears
+ * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE)
+ *
+ * v0.1.2 designed by @connors.
+ * =====================================================
+ */
+
+.toolbar {
+  box-shadow: inset 0 1px 0 #f5f4f5;
+  background-color: #e8e6e8;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e6e8), color-stop(100%, #d1cfd1));
+  background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%);
+  background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%);
+}
+
+.toolbar-header {
+  border-bottom: 1px solid #c2c0c2;
+}
+
+.toolbar-footer {
+  border-top: 1px solid #c2c0c2;
+}
+
+.toolbar-actions {
+  margin-top: 4px;
+  margin-bottom: 3px;
+  padding-right: 3px;
+  padding-left: 3px;
+  padding-bottom: 3px;
+}
+
+.title {
+  font-weight: 400;
+  color: #555;
+}
+
+.btn {
+  border-radius: 4px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+}
+
+.btn-group .btn + .btn {
+  border-left: 1px solid #c2c0c2;
+}
+.btn-group .active {
+  color: #fff;
+  background-color: #6d6c6d;
+}
+.btn-group .active .icon {
+  color: #fff;
+}
+
+.btn-default {
+  color: #333;
+  border-top-color: #c2c0c2;
+  border-right-color: #c2c0c2;
+  border-bottom-color: #a19fa1;
+  border-left-color: #c2c0c2;
+  background-color: #fcfcfc;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f1f1f1));
+  background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
+  background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
+}
+.btn-default:active {
+  background-color: #ddd;
+  background-image: none;
+}
+
+.btn-primary,
+.btn-positive,
+.btn-negative,
+.btn-warning {
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary {
+  border-color: #388df8;
+  border-bottom-color: #0866dc;
+  background-color: #6eb4f7;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb));
+  background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%);
+  background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%);
+}
+.btn-primary:active {
+  background-color: #3e9bf4;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de));
+  background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%);
+  background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%);
+}
+
+.btn-positive {
+  border-color: #29a03b;
+  border-bottom-color: #248b34;
+  background-color: #5bd46d;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b));
+  background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%);
+  background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%);
+}
+.btn-positive:active {
+  background-color: #34c84a;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34));
+  background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%);
+  background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%);
+}
+
+.btn-negative {
+  border-color: #fb2f29;
+  border-bottom-color: #fb1710;
+  background-color: #fd918d;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29));
+  background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%);
+  background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%);
+}
+.btn-negative:active {
+  background-color: #fc605b;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710));
+  background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%);
+  background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%);
+}
+
+.btn-warning {
+  border-color: #fcaa0e;
+  border-bottom-color: #ee9d02;
+  background-color: #fece72;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e));
+  background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%);
+  background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
+}
+.btn-warning:active {
+  background-color: #fdbc40;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02));
+  background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%);
+  background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
+}
+
+.btn-link {
+  color: #3b99fc;
+  box-shadow: none;
+}
+.btn-link:active {
+  color: #097ffb;
+}
+
+.btn .icon {
+  color: #737475;
+}
+
+.form-control {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.form-control:focus {
+  border-color: #6db3fd;
+  box-shadow: 0 0 0 3px #6db3fd;
+}
+
+.pane {
+  border-left: 1px solid #ddd;
+}
+
+.img-rounded {
+  border-radius: 4px;
+}
+
+.list-group-item {
+  color: #414142;
+  border-top: 1px solid #ddd;
+}
+.list-group-item.active, .list-group-item.selected {
+  background-color: #116cd6;
+}
+
+.nav-group-item {
+  padding: 2px 10px 2px 25px;
+  color: #333;
+}
+.nav-group-item:active, .nav-group-item.active {
+  background-color: #dcdfe1;
+}
+.nav-group-item .icon {
+  color: #737475;
+}
+
+.nav-group-title {
+  font-size: 12px;
+  letter-spacing: normal;
+  text-transform: none;
+  color: #666666;
+}
+
+thead {
+  background-color: #f5f5f4;
+}
+
+.table-striped tr:nth-child(even) {
+  background-color: #f5f5f4;
+}
+
+tr:active,
+.table-striped tr:active:nth-child(even) {
+  color: #fff;
+  background-color: #116cd6;
+}
+
+thead tr:active {
+  color: #333;
+  background-color: #f5f5f4;
+}
+
+th {
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+.tab-group {
+  border-top: 1px solid #989698;
+  border-bottom: 1px solid #989698;
+}
+
+.tab-item {
+  border-left: 1px solid #989698;
+  background-color: #b8b6b8;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
+  background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
+  background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%);
+}
+.tab-item.active {
+  background-color: #d4d2d4;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc));
+  background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%);
+  background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%);
+}
+.tab-item .icon-close-tab {
+  color: #666;
+}
+.tab-item:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  background-color: rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  transition: opacity .1s linear;
+  z-index: 1;
+}
+.tab-item:hover:not(.active):after {
+  opacity: 1;
+}
+.tab-item .icon-close-tab:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.padded {
+  padding: 10px;
+}
+
+.padded-less {
+  padding: 5px;
+}
+
+.padded-more {
+  padding: 20px;
+}
+
+.padded-vertically {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.padded-vertically-less {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.padded-vertically-more {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.padded-horizontally {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.padded-horizontally-less {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.padded-horizontally-more {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+.padded-top {
+  padding-top: 10px;
+}
+
+.padded-top-less {
+  padding-top: 5px;
+}
+
+.padded-top-more {
+  padding-top: 20px;
+}
+
+.padded-bottom {
+  padding-bottom: 10px;
+}
+
+.padded-bottom-less {
+  padding-bottom: 5px;
+}
+
+.padded-bottom-more {
+  padding-bottom: 20px;
+}
+
+.sidebar {
+  background-color: #f5f5f4;
+}