Copied starter Meteor App files.
Cut and paste of the BasicMeteorApp.
This commit is contained in:
52
imports/ui/styles/buttons.import.styl
vendored
Normal file
52
imports/ui/styles/buttons.import.styl
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
|
||||
span.button
|
||||
margin: 0 0 0 1px
|
||||
padding: 0.5em 1em
|
||||
border: 1px solid #d4d4d4
|
||||
border-radius: 50em
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
cursor: pointer
|
||||
outline: none
|
||||
background-color: #ececec
|
||||
color: #333
|
||||
font: 11px/normal sans-serif
|
||||
text-shadow: 1px 1px 0 #fff
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
//Prevent selection
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently not supported by any browser */
|
||||
span.button:hover
|
||||
color: blue
|
||||
span.button:active
|
||||
color: #fff
|
||||
background-color: #141414
|
||||
text-shadow: 1px 1px 0 #000
|
||||
border: 1px solid #292929
|
||||
span.button.primary
|
||||
font-weight: 800
|
||||
span.button.selected //Use this if they are toggle buttons
|
||||
color: #fff
|
||||
background-color: #141414
|
||||
text-shadow: 1px 1px 0 #000
|
||||
cursor: default
|
||||
span.buttonGroup
|
||||
:not(:first-child):not(:last-child)
|
||||
border-radius: 0
|
||||
:first-child
|
||||
border-top-left-radius: 50em
|
||||
border-bottom-left-radius: 50em
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
margin-left: 0
|
||||
:last-child
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
border-top-right-radius: 50em
|
||||
border-bottom-right-radius: 50em
|
||||
52
imports/ui/styles/effects.import.styl
vendored
Normal file
52
imports/ui/styles/effects.import.styl
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
// For black text.
|
||||
@-webkit-keyframes neon6
|
||||
from
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@-moz-keyframes neon6
|
||||
from
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@keyframes neon6
|
||||
from
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
|
||||
// For white text.
|
||||
@-webkit-keyframes neon7
|
||||
from
|
||||
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@-moz-keyframes neon7
|
||||
from
|
||||
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@keyframes neon7
|
||||
from
|
||||
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
|
||||
//@-webkit-keyframes neon6_drop
|
||||
// from
|
||||
// -webkit-filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7))
|
||||
// filter: url(shadow.svg#drop-shadow)
|
||||
// 50%
|
||||
// -webkit-filter: drop-shadow(0px 0px 20px rgba(255,0,0,1))
|
||||
// filter: url(shadow.svg#drop-shadow)
|
||||
// to
|
||||
// -webkit-filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7))
|
||||
// filter: url(shadow.svg#drop-shadow)
|
||||
|
||||
@keyframes neon6_drop
|
||||
from
|
||||
filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7)) brightness(120%)
|
||||
50%
|
||||
filter: drop-shadow(0px 0px 20px rgba(255,0,0,1)) brightness(80%)
|
||||
to
|
||||
filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7)) brightness(100%)
|
||||
117
imports/ui/styles/forms.import.styl
vendored
Normal file
117
imports/ui/styles/forms.import.styl
vendored
Normal file
@@ -0,0 +1,117 @@
|
||||
|
||||
//Form Styles
|
||||
.select2-container
|
||||
font-size: 10px
|
||||
.select2-selection
|
||||
font-size: 13px //Make the font small enough the control can have a height similar to a standard input field.
|
||||
margin-bottom: 0px
|
||||
min-height: 10px !important //This is what really sets the height of the box containing the selection(s)
|
||||
padding-bottom: 2px //Add a little space below the selections to balance it all out.
|
||||
input
|
||||
padding: 6px
|
||||
border-radius: 4px
|
||||
border-width: 1px
|
||||
border-style: solid
|
||||
border-color: #ccc
|
||||
//input[type='button'].btn-success, input[type='submit'].btn-success
|
||||
// background-color: #5cb85c
|
||||
// :hover
|
||||
// background-color:
|
||||
//input[type='button'].btn-danger, input[type='submit'].btn-danger
|
||||
// background-color: #e55b46
|
||||
.form-control, .select2-selection //?
|
||||
font-size: 14px
|
||||
margin-bottom: 0px
|
||||
.form-group
|
||||
margin: 4px 0
|
||||
.has-error .form-control
|
||||
border-color: #a94442
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0)
|
||||
input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control
|
||||
line-height: 34px
|
||||
|
||||
.form-control
|
||||
display: block
|
||||
width: 100%
|
||||
height: 34px
|
||||
padding: 6px 12px
|
||||
font-size: 14px
|
||||
line-height: 1.42857143
|
||||
color: #555
|
||||
background-color: #fff
|
||||
background-image: none
|
||||
border: 1px solid #ccc
|
||||
border-radius: 4px
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
|
||||
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]
|
||||
align-items: center
|
||||
-webkit-padding-start: 1px
|
||||
overflow: hidden
|
||||
padding-left: 10px
|
||||
input
|
||||
-webkit-appearance: textfield
|
||||
background-color: white
|
||||
-webkit-rtl-ordering: logical
|
||||
user-select: text
|
||||
cursor: auto
|
||||
padding: 1px
|
||||
border-width: 2px
|
||||
border-style: inset
|
||||
border-color: initial
|
||||
border-image: initial
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control
|
||||
background-color: #eee
|
||||
opacity: 1
|
||||
input, textarea, keygen, select, button
|
||||
text-rendering: auto
|
||||
color: initial
|
||||
letter-spacing: normal
|
||||
word-spacing: normal
|
||||
text-transform: none
|
||||
text-indent: 0px
|
||||
text-shadow: none
|
||||
display: inline-block
|
||||
text-align: start
|
||||
margin: 0em 0em 0em 0em
|
||||
font: 13.3333px Arial
|
||||
input, textarea, keygen, select, button, meter, progress
|
||||
-webkit-writing-mode: horizontal-tb
|
||||
//.btn.disabled, .btn[disabled], fieldset[disabled] .btn
|
||||
// cursor: not-allowed
|
||||
// filter: unquote("alpha(opacity=65)")
|
||||
// -webkit-box-shadow: none
|
||||
// box-shadow: none
|
||||
// opacity: .65
|
||||
//button, html input[type="button"], input[type="reset"], input[type="submit"]
|
||||
// -webkit-appearance: button
|
||||
// cursor: pointer
|
||||
//button, html input[type="button"], input[type="reset"], input[type="submit"]
|
||||
// -webkit-appearance: button
|
||||
// cursor: pointer
|
||||
//.btn
|
||||
// display: inline-block;
|
||||
// padding: 6px 12px;
|
||||
// margin-bottom: 0;
|
||||
// font-size: 14px;
|
||||
// font-weight: normal;
|
||||
// line-height: 1.42857143;
|
||||
// text-align: center;
|
||||
// white-space: nowrap;
|
||||
// vertical-align: middle;
|
||||
// -ms-touch-action: manipulation;
|
||||
// touch-action: manipulation;
|
||||
// cursor: pointer;
|
||||
// -webkit-user-select: none;
|
||||
// -moz-user-select: none;
|
||||
// -ms-user-select: none;
|
||||
// user-select: none;
|
||||
// background-image: none;
|
||||
// border: 1px solid transparent;
|
||||
// border-radius: 4px;
|
||||
133
imports/ui/styles/maxHeightLayout.import.styl
vendored
Normal file
133
imports/ui/styles/maxHeightLayout.import.styl
vendored
Normal file
@@ -0,0 +1,133 @@
|
||||
section.maxHeightContainer, div.maxHeightContainer
|
||||
display: table
|
||||
height: 100%
|
||||
width: 100%
|
||||
section.maxHeightRow, div.maxHeightRow
|
||||
display: table-row
|
||||
section.maxHeightContent, div.maxHeightContent //Use this for a row of content that should shrink to fit the content size.
|
||||
display: table-cell
|
||||
height: 1px
|
||||
section.maxHeightContentExpandAndScroll, div.maxHeightContentExpandAndScroll //Use this for a row of content that should take up all remaining space and will contain potentially scrolled content.
|
||||
display: table-cell
|
||||
height: 100%
|
||||
position: relative
|
||||
section.maxHeightContentScrolled, div.maxHeightContentScrolled //Use this to create the scrolled content. Can use any display within it.
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
width: auto
|
||||
height: auto
|
||||
overflow-y: auto
|
||||
|
||||
// *****************
|
||||
// ** Vertical Stack
|
||||
// ** Use .verticalStack on containers, and .vscFixed or .vscExpand on children (they can also be containers).
|
||||
// ** Designed to use Flexbox to allow full screen (vertical) layouts. Fixed children will fit the content, and expand children will consume all available vertical space, but will not exceed the vertical space.
|
||||
// ** Use .columnContainer to setup a horizontally scrolling, full height container where children are tiled down first, then wrap to the next column.
|
||||
/*
|
||||
Test Code:
|
||||
-------CSS------
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
body {
|
||||
background: purple;
|
||||
color: black;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.vscFixed {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.vscExpand {
|
||||
flex: 1 1 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.verticalStack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: stretch;
|
||||
}
|
||||
.columnContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
overflow-x: auto;
|
||||
background: white;
|
||||
}
|
||||
.columnContent {
|
||||
flex: none;
|
||||
width: 300px;
|
||||
}
|
||||
-------Javascript------
|
||||
var container = document.querySelector('.columnContainer');
|
||||
for(var i = 0; i < 400; i++) {
|
||||
var child = document.createElement("div");
|
||||
child.innerHTML = "Element " + i;
|
||||
child.className = "columnContent";
|
||||
container.appendChild(child);
|
||||
}
|
||||
-------HTML------
|
||||
<div class="verticalStack">
|
||||
<div class='vscFixed' style="width: 100%; background:green">
|
||||
<p>
|
||||
Some content.
|
||||
</p>
|
||||
<p>
|
||||
More content...
|
||||
</p>
|
||||
</div>
|
||||
<div class="verticalStack vscExpand">
|
||||
<div class='vscFixed' style="background: yellow;">
|
||||
Test bar.
|
||||
</div>
|
||||
<div class="columnContainer vscExpand">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
.vscFixed {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.vscExpand {
|
||||
flex: 1 1 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.verticalStack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: stretch;
|
||||
}
|
||||
.columnContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.columnContent {
|
||||
flex: none;
|
||||
}
|
||||
61
imports/ui/styles/tabs.import.styl
vendored
Normal file
61
imports/ui/styles/tabs.import.styl
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
ul.tabRow
|
||||
position: relative
|
||||
text-align: left
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0 0 0 10px
|
||||
line-height: 24px
|
||||
height: 26px
|
||||
font-size: 12px
|
||||
overflow: hidden
|
||||
li
|
||||
position: relative
|
||||
z-index: 0
|
||||
border: 1px solid #AAA
|
||||
background: #D1D1D1
|
||||
display: inline-block
|
||||
border-top-left-radius: 6px
|
||||
border-top-right-radius: 6px
|
||||
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF
|
||||
text-shadow: 0 1px #FFF
|
||||
margin: 0 -5px
|
||||
padding: 0 20px
|
||||
li:before, li:after
|
||||
position: absolute
|
||||
bottom: -1px
|
||||
width: 5px
|
||||
height: 5px
|
||||
content: " "
|
||||
border: 1px solid #AAA
|
||||
li:before
|
||||
left: -6px
|
||||
border-bottom-right-radius: 6px
|
||||
border-width: 0 1px 1px 0
|
||||
box-shadow: 2px 2px 0 #D1D1D1
|
||||
li:after
|
||||
right: -6px
|
||||
border-bottom-left-radius: 6px
|
||||
border-width: 0 0 1px 1px
|
||||
box-shadow: -2px 2px 0 #D1D1D1
|
||||
li.selected
|
||||
z-index: 2
|
||||
background: white
|
||||
color: #333
|
||||
border-bottom-color: #FFF
|
||||
li.selected:before
|
||||
box-shadow: 2px 2px 0 #FFF
|
||||
li.selected:after
|
||||
box-shadow: -2px 2px 0 #FFF
|
||||
ul.tabRow:before
|
||||
position: absolute
|
||||
width: 100%
|
||||
bottom: 0
|
||||
left: 0
|
||||
border-bottom: 1px solid #AAA
|
||||
z-index: 1
|
||||
content: " "
|
||||
Reference in New Issue
Block a user