Commit e12a2f6e authored by Marius Trautrims's avatar Marius Trautrims

Change sass to scss

parent 9679966c
......@@ -17,7 +17,7 @@ standard-minifier-js # JS minifier run for production mode
es5-shim # ECMAScript 5 compatibility for older browsers.
ecmascript # Enable ECMAScript2015+ syntax in app code
fourseven:scss@=3.2.0
fourseven:scss
tap:i18n
iron:router
twbs:bootstrap
......
......@@ -42,7 +42,7 @@ es5-shim@4.5.10
facebook@1.2.6
fastclick@1.0.11
fortawesome:fontawesome@4.5.0
fourseven:scss@3.2.0
fourseven:scss@3.4.3
geojson-utils@1.0.8
google@1.1.11
harrison:papa-parse@1.1.1
......@@ -195,7 +195,7 @@ tap:i18n@1.8.0
tap:i18n-db@0.4.0
templating@1.1.9
templating-tools@1.0.4
themeteorchef:bert@1.1.0
themeteorchef:bert@2.1.0
tracker@1.0.13
twbs:bootstrap@3.3.6
twitter@1.1.9
......
@import '../imports/ui/main/main.sass'
@import '../imports/ui/welcome/welcome.sass'
@import '../imports/ui/cardsets/cardsets.sass'
@import '../imports/ui/cardset/cardset.sass'
@import '../imports/ui/card/card.sass'
@import '../imports/ui/profile/profile.sass'
@import '../imports/ui/learn/box.sass'
@import '../imports/ui/learn/memo.sass'
@import '../imports/ui/main/main.scss';
@import '../imports/ui/welcome/welcome.scss';
@import '../imports/ui/cardsets/cardsets.scss';
@import '../imports/ui/cardset/cardset.scss';
@import '../imports/ui/card/card.scss';
@import '../imports/ui/profile/profile.scss';
@import '../imports/ui/learn/box.scss';
@import '../imports/ui/learn/memo.scss';
.cardtext
margin-bottom: 20px
.md-footer img
display: block
height: auto
max-width: 100%
.cardtext {
margin-bottom: 20px;
}
.md-footer img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-inner
min-height: 278px
.box
border: 1px solid #DDDDDD
font-family: 'Georgia', serif
//height: 400px
min-height: 400px
padding: 50px
margin: 0 auto
border-radius: 4px
background-color: #fff
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1)
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1)
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1)
.btn-editCard
position: absolute
left: 12px
top: 11px
.btn-showPictureDetails
position: absolute
left: 45px
top: 11px
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
.clicktoflip
color: #666
position: absolute
right: 10px
top: 13px
font-style: italic
img.cardside
position: absolute
right: 88px
top: 13px
.block
text-align: center
height: 100%
&:before
content: ''
display: inline-block
height: 100%
vertical-align: middle
margin-right: -0.25em
.centered
display: inline-block
vertical-align: middle
font-size: 1.2em
img
max-width: 370px
.block pre
text-align: left
.carousel-control
&.left, &.right
background-image: none
height: 320px
margin-top: 40px
margin-bottom: 40px
color: #000
width: 7%
z-index: 5
.cardNumber
color: #999
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
font-size: 85%
position: absolute
left: 50%
top: 14px
margin-left: -16px
.meteorBox
line-height: 32px
font-family: 'Georgia', serif
margin: 12px 0 12px
display: inline-table
width: 100%
#editSetDescription
resize: none
#pictureModal .modal-header
min-height: 50px
#setdetails-pictureModal-body img
max-width: 100%
width: auto
margin: auto
display: block
.nav-header-cardset
display: block
padding-left: 0
margin-bottom: 3px
font-size: 11px
font-weight: bold
line-height: 20px
color: #999999
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
text-transform: uppercase
.ratingStars
margin-left: -33px
padding-left: 50%
.ratingText
display: inline-block
font-size: 11px
text-align: center
width: 100%
#ratingLocked .stars
cursor: auto
.button-group-content
margin-bottom: 20px
.btn-editCardset
float: left
margin-right: 7px
#importModal hr
margin: 20px 0
.btn-file
position: relative
overflow: hidden
input[type=file]
position: absolute
top: 0
right: 0
min-width: 100%
min-height: 100%
font-size: 100px
text-align: right
filter: alpha(opacity = 0)
opacity: 0
outline: none
background: white
cursor: inherit
display: block
//colors
$color_alto_approx: rgb(221, 221, 221);
$white: rgb(255, 255, 255);
$black_20: rgba(0, 0, 0, 0.2);
$black_10: rgba(0, 0, 0, 0.1);
$color_storm_dust_approx: rgb(102, 102, 102);
$black: rgb(0, 0, 0);
$color_mountain_mist_approx: rgb(153, 153, 153);
$white_50: rgba(255, 255, 255, 0.5);
//fonts
$font_0: Georgia;
$font_1: serif;
$font_2: Helvetica Neue;
$font_3: Helvetica;
$font_4: Arial;
$font_5: sans-serif;
//@extend-elements
//original selectors
//.carousel-control.left, .carousel-control.right
%extend_1 {
background-image: none;
height: 320px;
margin-top: 40px;
margin-bottom: 40px;
}
.carousel-inner {
min-height: 278px;
}
.box {
border: 1px solid $color_alto_approx;
font-family: $font_0, $font_1;
min-height: 400px;
padding: 50px;
margin: 0 auto;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 4px;
background-color: $white;
//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
box-shadow: 0 0 5px $black_20, inset 0 0 50px $black_10;
}
.btn-editCard {
position: absolute;
left: 12px;
top: 11px;
}
.btn-showPictureDetails {
position: absolute;
left: 45px;
top: 11px;
font-family: $font_2, $font_3, $font_4, $font_5;
}
.clicktoflip {
color: $color_storm_dust_approx;
position: absolute;
right: 10px;
top: 13px;
font-style: italic;
}
.block {
text-align: center;
height: 100%;
&:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
pre {
text-align: left;
}
}
.centered {
display: inline-block;
vertical-align: middle;
font-size: 1.2em;
img {
max-width: 370px;
}
}
.carousel-control {
color: $black;
width: 7%;
z-index: 5;
&.left {
@extend %extend_1;
}
&.right {
@extend %extend_1;
}
}
.cardNumber {
color: $color_mountain_mist_approx;
font-family: $font_2, $font_3, $font_4, $font_5;
font-size: 85%;
position: absolute;
left: 50%;
top: 14px;
margin-left: -16px;
}
.meteorBox {
line-height: 32px;
font-family: $font_0, $font_1;
margin: 12px 0;
display: inline-table;
width: 100%;
}
#editSetDescription {
resize: none;
}
.nav-header-cardset {
display: block;
padding-left: 0;
margin-bottom: 3px;
font-size: 11px;
font-weight: bold;
line-height: 20px;
color: $color_mountain_mist_approx;
//Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
text-shadow: 0 1px 0 $white_50;
text-transform: uppercase;
}
.ratingStars {
margin-left: -33px;
padding-left: 50%;
}
.ratingText {
display: inline-block;
font-size: 11px;
text-align: center;
width: 100%;
}
.button-group-content {
margin-bottom: 20px;
}
.btn-editCardset {
float: left;
margin-right: 7px;
}
.btn-file {
position: relative;
overflow: hidden;
input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: $white;
cursor: inherit;
display: block;
}
}
img.cardside {
position: absolute;
right: 88px;
top: 13px;
}
#pictureModal .modal-header {
min-height: 50px;
}
#setdetails-pictureModal-body img {
max-width: 100%;
width: auto;
margin: auto;
display: block;
}
#ratingLocked .stars {
cursor: auto;
}
#importModal hr {
margin: 20px 0;
}
hr
margin: 10px 0
.nav-header
display: block
padding: 3px 15px
font-size: 11px
font-weight: bold
line-height: 20px
color: #999999
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
text-transform: uppercase
.table th
background-color: #fff
.emptyCellList
padding-top: 33px !important
.emptyTextList
color: #666
font-family: "Georgia", serif
font-style: italic
.btn-newSet
margin-bottom: 27px
margin-top: 20px
ul.nav-list li.active
font-weight: bold
.cardsetBadge
float: right
#newSetDescription
resize: none
//colors
$color_mountain_mist_approx: rgb(153, 153, 153);
$white: rgb(255, 255, 255);
$black_50: rgba(0, 0, 0, 0.5);
$color_storm_dust_approx: rgb(102, 102, 102);
//fonts
$font_0: Georgia;
$font_1: serif;
hr {
margin: 10px 0;
}
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 20px;
color: $color_mountain_mist_approx;
text-shadow: 0 1px 0 $black_50;
text-transform: uppercase;
}
.emptyCellList {
padding-top: 33px !important;
}
.emptyTextList {
color: $color_storm_dust_approx;
font-family: $font_0, $font_1;
font-style: italic;
}
.btn-newSet {
margin-bottom: 27px;
margin-top: 20px;
}
.cardsetBadge {
float: right;
}
#newSetDescription {
resize: none;
}
.table th {
background-color: $white;
}
ul.nav-list li.active {
font-weight: bold;
}
.learn-box
width: 100%
margin-top: 10px
#subject1
margin-top: 0px
#cardsetName
margin: 0
#cardsetDesc
font-family: 'Georgia'
font-style: italic
#cardsetCreated
padding-left: 0
#cardsetWrap
font-family: 'Georgia'
.learn-cardHelptext
display: inline-block
width: 100%
margin-top: 20px
text-align: center
color: #666
font-style: italic
font-family: 'Georgia', serif
.carousel-inner
border-radius: 4px
min-height: 278px
#cardCarousel .carousel-indicators
bottom: 0px
.clicktoflip
color: #666
position: absolute
right: 10px
top: 13px
font-style: italic
img.cardside
position: absolute
right: 88px
top: 13px
#boxPictureModal .modal-header
min-height: 50px
#setdetails-boxPictureModal-body img
max-width: 100%
width: auto
margin: auto
display: block
//colors
$color_storm_dust_approx: rgb(102, 102, 102);
//fonts
$font_0: Georgia;
$font_1: serif;
.learn-box {
width: 100%;
margin-top: 10px;
}
#subject1 {
margin-top: 0;
}
#cardsetName {
margin: 0;
}
#cardsetDesc {
font-family: $font_0;
font-style: italic;
}
#cardsetCreated {
padding-left: 0;
}
#cardsetWrap {
font-family: $font_0;
}
.learn-cardHelptext {
display: inline-block;
width: 100%;
margin-top: 20px;
text-align: center;
color: $color_storm_dust_approx;
font-style: italic;
font-family: $font_0, $font_1;
}
.carousel-inner {
border-radius: 4px;
min-height: 278px;
}
.clicktoflip {
color: $color_storm_dust_approx;
position: absolute;
right: 10px;
top: 13px;
font-style: italic;
}
#cardCarousel .carousel-indicators {
bottom: 0;
}
img.cardside {
position: absolute;
right: 88px;
top: 13px;
}
#boxPictureModal .modal-header {
min-height: 50px;
}
#setdetails-boxPictureModal-body img {
max-width: 100%;
width: auto;
margin: auto;
display: block;
}
.memo-site
color: #666
position: absolute
right: 20px
top: 10px
font-style: italic
img.cardside
position: relative
right: 5px
top: 0
.memocontent-block
span
display: inline-block
vertical-align: middle
font-size: 1.2em
img
max-width: 370px
#memoEndBtn
top: -50px
position: relative
#memoPictureModal .modal-header
min-height: 50px
#setdetails-memoPictureModal-body img
max-width: 100%
width: auto
margin: auto
display: block
//colors
$color_storm_dust_approx: rgb(102, 102, 102);
.memo-site {
color: $color_storm_dust_approx;
position: absolute;
right: 20px;
top: 10px;
font-style: italic;
img.cardside {
position: relative;
right: 5px;
top: 0;
}
}
.memocontent-block {
span {
display: inline-block;
vertical-align: middle;
font-size: 1.2em;
}
img {
max-width: 370px;
}
}
#memoEndBtn {
top: -50px;
position: relative;
}
#memoPictureModal .modal-header {
min-height: 50px;
}
#setdetails-memoPictureModal-body img {
max-width: 100%;
width: auto;
margin: auto;
display: block;
}
$bgColor: #dfe5e6
$bgDefault: #3d9c19
$bgHighlight: #328114
$colDefault: #ecf0f1
$colHighlight: white
$dropDown: false
$bgFooter: whitesmoke
html
position: relative
min-height: 100%
body
margin-bottom: 60px
background-color: $bgColor
> .container
padding: 80px 15px 0
.table
background-color: $colHighlight
img
max-width: 370px
.navbar-default
background-color: $bgDefault
border-color: $bgHighlight
.navbar-brand
color: $colDefault
padding: 10px 20px
> img
height: 22px
margin-top: 5px
&:hover,
&:focus
color: $colHighlight
.navbar-text
color: $colDefault
.navbar-nav
> li
> a
color: $colDefault
&:hover,
&:focus
color: $colHighlight
@if $dropDown
> .dropdown-menu
background-color: $bgDefault
> li
> a
color: $colDefault
&:hover,
&:focus
color: $colHighlight
background-color: $bgHighlight
> .divider
background-color: $bgHighlight
@if $dropDown
.open .dropdown-menu > .active
> a,
> a:hover,
> a:focus
color: $colHighlight
background-color: $bgHighlight
> .active
> a,
> a:hover,
> a:focus