Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
ed151127 by bootflat
Options

update sass 3.3.3 support

1 parent ab644282
Expand all
Inline Side-by-side
Showing 22 changed files with 119 additions and 124 deletions
......@@ -2,7 +2,7 @@
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with `Sass 3.3.0.rc.2`.
Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with `Sass 3.3.3`.
Bootflat is compatible with the following browsers: `IE8, IE9, IE10, Firefox, Safari, Opera, Chrome`.
......
......@@ -231,7 +231,7 @@ blockquote {
background-color: #ffce54;
}
.btn-danger, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled],
.btn-danger .open .dropdown-toggle.btn-danger {
.btn-danger .open .dropdown-toggle.btn {
border-color: #da4453;
background-color: #da4453;
}
......@@ -406,22 +406,22 @@ blockquote {
-moz-box-shadow: none;
box-shadow: none;
}
.progress .progress-bar {
.progress-bar {
background-color: #3bafda;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.progress .progress-bar-success {
.progress-bar-success {
background-color: #8cc152;
}
.progress .progress-bar-info {
.progress-bar-info {
background-color: #37bc9b;
}
.progress .progress-bar-warning {
.progress-bar-warning {
background-color: #f6bb42;
}
.progress .progress-bar-danger {
.progress-bar-danger {
background-color: #da4453;
}
......@@ -798,7 +798,7 @@ blockquote {
margin-bottom: 10px;
font-weight: bold;
}
.alert .alert-dismissable .close {
.alert-dismissable .close {
color: black;
opacity: 0.7;
filter: alpha(opacity=70);
......@@ -1321,7 +1321,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
* modal
* --------------------------------------------------
*/
.modal .modal-content {
.modal-content {
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
......@@ -1331,13 +1331,13 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.modal .modal-header {
.modal-header {
border-bottom: none;
}
.modal .modal-body {
.modal-body {
padding: 0 15px;
}
.modal .modal-footer {
.modal-footer {
border-top: none;
}
......@@ -1473,17 +1473,17 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
.panel .list-group-item:first-child {
border-top: 1px solid #e6e9ed;
}
.panel .panel-heading {
.panel-heading {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.panel .panel-title {
.panel-title {
font-size: 14px;
color: #434a54;
font-weight: normal;
}
.panel .panel-footer {
.panel-footer {
background-color: #e6e9ed;
border-top-color: #e6e9ed;
-webkit-border-radius: 0 0 4px 4px;
......@@ -1538,11 +1538,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
background-color: #da4453;
border-color: #da4453;
}
.panel-primary > .panel-heading > .panel-title,
.panel-success > .panel-heading > .panel-title,
.panel-info > .panel-heading > .panel-title,
.panel-warning > .panel-heading > .panel-title,
.panel-danger > .panel-heading > .panel-title {
.panel-primary > .panel-heading > .panel-title, .panel-success > .panel-heading > .panel-title, .panel-info > .panel-heading > .panel-title, .panel-warning > .panel-heading > .panel-title, .panel-danger > .panel-heading > .panel-title {
color: white;
}
.panel > .list-group:first-child .list-group-item:first-child, .panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child {
......@@ -1675,54 +1671,52 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
padding: 40px 0;
background-color: #434a54;
}
.footer .footer-logo,
.footer .footer-nav {
.footer-logo, .footer-nav {
float: left;
padding: 0 20px;
width: 20%;
}
@media (max-width: 768px) {
.footer .footer-logo {
.footer-logo {
margin-bottom: 20px;
}
.footer .footer-logo,
.footer .footer-nav {
.footer-logo, .footer-nav {
float: none;
display: block;
width: 100%;
}
}
.footer .footer-logo {
.footer-logo {
margin-top: -5px;
height: 32px;
line-height: 32px;
}
.footer .footer-logo img {
.footer-logo img {
margin-right: 10px;
}
.footer .footer-logo a {
.footer-logo a {
font-size: 20px;
font-weight: bold;
color: white;
}
.footer .footer-logo a:hover, .footer .footer-logo a:active {
.footer-logo a:hover, .footer-logo a:active {
text-decoration: none;
}
.footer .footer-nav .nav-title {
.footer-nav .nav-title {
margin-bottom: 15px;
color: #e6e9ed;
}
.footer .footer-nav .nav-item {
.footer-nav .nav-item {
line-height: 28px;
}
.footer .footer-nav .nav-item > a {
.footer-nav .nav-item > a {
color: #aab2bd;
}
.footer .footer-nav .nav-item > a:hover, .footer .footer-nav .nav-item > a:active {
.footer-nav .nav-item > a:hover, .footer-nav .nav-item > a:active {
color: #ccd1d9;
text-decoration: none;
}
.footer .footer-copyright {
.footer-copyright {
color: #aab2bd;
}
......@@ -1822,4 +1816,4 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
border-radius: 4px 0 4px 4px;
}
/*# sourceMappingURL=bootflat.css.map */
\ No newline at end of file
/*# sourceMappingURL=bootflat.css.map */
......
......@@ -22,7 +22,7 @@ $accordion-panel-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
*/
.accordion {
& #{&}-header {
& &-header {
margin-top: 0;
font-size: 16px;
display: block;
......
......@@ -26,29 +26,29 @@ $alert-link-color: $mediumgray-light !default;
font-weight: bold;
}
#{&}-dismissable .close {
&-dismissable .close {
color: $alert-close-color;
@include opacity($opacity: 70, $filter: true);
}
@at-root #{&}-info {
@at-root &-info {
background-color: lighten($alert-primary, 10%);
border: $alert-primary;
}
@at-root #{&}-warning {
@at-root &-warning {
background-color: lighten($alert-warning, 10%);
border: $alert-warning;
}
@at-root #{&}-danger {
@at-root &-danger {
background-color: lighten($alert-danger, 10%);
border: $alert-danger;
}
@at-root #{&}-success {
@at-root &-success {
background-color: lighten($alert-success, 10%);
border: $alert-success;
}
@at-root & #{&}-link {
@at-root & &-link {
cursor: pointer;
text-decoration: underline;
@include opacity($opacity: 65, $filter: true);
......
......@@ -58,7 +58,7 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
@include opacity($opacity: $button-opacity, $filter: true);
}
@at-root #{&}-link {
@at-root &-link {
&,
&:hover,
&:focus,
......@@ -77,7 +77,7 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
}
}
@at-root #{&}-default {
@at-root &-default {
color: $button-font-color-dark;
border-color: $button-normal !important;
......@@ -94,12 +94,12 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
background-color: $button-default;
}
}
@at-root .open .dropdown-toggle#{&}-default {
@at-root .open .dropdown-toggle.btn-default {
border-color: $button-normal-hover;
background-color: $button-normal-hover;
}
@at-root #{&}-primary {
@at-root &-primary {
&,
&:active,
&.active,
......@@ -114,12 +114,12 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
background-color: $button-primary-hover;
}
}
@at-root .open .dropdown-toggle#{&}-primary {
@at-root .open .dropdown-toggle.btn-primary {
border-color: $button-primary-hover;
background-color: $button-primary-hover;
}
@at-root #{&}-info {
@at-root &-info {
&,
&:active,
&.active,
......@@ -134,12 +134,12 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
background-color: $button-info-hover;
}
}
@at-root .open .dropdown-toggle#{&}-info {
@at-root .open .dropdown-toggle.btn-info {
border-color: $button-info-hover;
background-color: $button-info-hover;
}
@at-root #{&}-success {
@at-root &-success {
&,
&:active,
&.active,
......@@ -154,12 +154,12 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
background-color: $button-success-hover;
}
}
@at-root .open .dropdown-toggle#{&}-success {
@at-root .open .dropdown-toggle.btn-success {
border-color: $button-success-hover;
background-color: $button-success-hover;
}
@at-root #{&}-warning {
@at-root &-warning {
&,
&:active,
&.active,
......@@ -174,18 +174,18 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
background-color: $button-warning-hover;
}
}
@at-root .open .dropdown-toggle#{&}-warning {
@at-root .open .dropdown-toggle.btn-warning {
border-color: $button-warning-hover;
background-color: $button-warning-hover;
}
@at-root #{&}-danger {
@at-root &-danger {
&,
&:active,
&.active,
&.disabled,
&[disabled],
.open .dropdown-toggle#{&} {
.open .dropdown-toggle.btn {
border-color: $button-danger;
background-color: $button-danger;
}
......@@ -195,7 +195,7 @@ $button-shaodw: inset 0 1px 2px rgba(0, 0, 0, .125) !default;
background-color: $button-danger-hover;
}
}
@at-root .open .dropdown-toggle#{&}-danger {
@at-root .open .dropdown-toggle.btn-danger {
border-color: $button-danger-hover;
background-color: $button-danger-hover;
}
......
......@@ -8,7 +8,7 @@
* --------------------------------------------------
*/
.btn-group {
@at-root #{&}.open .dropdown-toggle {
@at-root &.open .dropdown-toggle {
@include box-shadow($value: inset 0 1px 2px rgba(0, 0, 0, .125));
}
......@@ -16,7 +16,7 @@
border-left-color: darken($button-normal, 7%);
}
@at-root #{&}.open .btn-default.dropdown-toggle,
@at-root &.open .btn-default.dropdown-toggle,
& .btn-default:focus,
& .btn-default:active,
& .btn-default.active {
......
......@@ -22,24 +22,24 @@ $footer-logo-color: $white !default;
padding: 40px 0;
background-color: $footer-background-color;
#{&}-logo,
#{&}-nav {
&-logo,
&-nav {
float: left;
padding: 0 20px;
width: 20%;
}
@media (max-width: 768px) {
#{&}-logo {
&-logo {
margin-bottom: 20px;
}
#{&}-logo,
#{&}-nav {
&-logo,
&-nav {
float: none;
display: block;
width: 100%;
}
}
#{&}-logo {
&-logo {
margin-top: -5px;
height: 32px;
line-height: 32px;
......@@ -57,11 +57,11 @@ $footer-logo-color: $white !default;
text-decoration: none;
}
}
#{&}-nav .nav-title {
&-nav .nav-title {
margin-bottom: 15px;
color: $footer-menu-title-color;
}
#{&}-nav .nav-item {
&-nav .nav-item {
line-height: 28px;
& > a {
color: $footer-menu-item-color;
......@@ -72,7 +72,7 @@ $footer-logo-color: $white !default;
text-decoration: none;
}
}
#{&}-copyright {
&-copyright {
color: $footer-menu-item-color;
}
}
......
// Global Variables
//------------------------------------------------------
$modules: () !global;
$modules: () !default;
$experimental: true !default;
......@@ -34,8 +34,8 @@ $bittersweet-light: #FC6E51 !default;
$grapefruit-dark: #DA4453 !default;
$grapefruit-light: #ED5565 !default;
$lavander-dark: #967ADC !default;
$lavander-light: #AC92EC !default;
$lavender-dark: #967ADC !default;
$lavender-light: #AC92EC !default;
$pinkrose-dark: #D770AD !default;
$pinkrose-light: #EC87C0 !default;
......@@ -54,7 +54,8 @@ $darkgray-light: #656D78 !default;
// We use this to loading scss files
@mixin exports($name) {
@if (index($modules, $name) == false) {
@if index($modules, $name) {
} @else {
$modules: append($modules, $name);
@content;
}
......
......@@ -28,12 +28,12 @@ $jumbotron-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
@include radius($type: border-radius, $value: $jumbotron-radius);
}
& > #{&}-photo img {
& > &-photo img {
@include radius($type: border-radius, $value: $jumbotron-radius $jumbotron-radius 0 0);
width: 100%;
}
& #{&}-contents {
& &-contents {
padding: 20px;
color: $jumbotron-font-color;
}
......
......@@ -36,12 +36,12 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
.list-group {
@include radius($type: border-radius, $value: $list-radius);
@include box-shadow($value: $list-shadow);
@at-root #{&}-item {
@at-root &-item {
border-top-color: $list-border-color;
&:first-child {
border-top: none;
}
@at-root #{&}-heading {
@at-root &-heading {
color: $list-font-color;
}
}
......@@ -79,7 +79,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
&:first-child {
border-color: transparent;
}
@at-root a#{&} {
@at-root a.list-group-item-primary {
color: darken($list-primary, 30%);
&:hover,
&:focus {
......@@ -101,7 +101,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
&:first-child {
border-color: transparent;
}
@at-root a#{&} {
@at-root a.list-group-item-success {
color: darken($list-success, 30%);
&:hover,
&:focus {
......@@ -123,7 +123,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
&:first-child {
border-color: transparent;
}
@at-root a#{&} {
@at-root a.list-group-item-warning {
color: darken($list-warning, 40%);
&:hover,
&:focus {
......@@ -145,7 +145,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
&:first-child {
border-color: transparent;
}
@at-root a#{&} {
@at-root a.list-group-item-info {
color: darken($list-info, 30%);
&:hover,
&:focus {
......@@ -167,7 +167,7 @@ $list-shadow: 0 1px 2px rgba(0, 0, 0, .2) !defa
&:first-child {
border-color: transparent;
}
@at-root a#{&} {
@at-root a.list-group-item-danger {
color: darken($list-danger, 30%);
&:hover,
&:focus {
......
......@@ -17,19 +17,19 @@ $modal-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
*/
.modal {
#{&}-content {
&-content {
border: none;
@include radius($type: border-radius, $value: $modal-radius);
color: $modal-font-color;
@include box-shadow($value: $modal-shadow);
}
#{&}-header {
&-header {
border-bottom: none;
}
#{&}-body {
&-body {
padding: 0 15px;
}
#{&}-footer {
&-footer {
border-top: none;
}
}
......
......@@ -37,21 +37,21 @@ $panel-radius: 4px !default;
border-top: 1px solid $panel-normal;
}
#{&}-heading {
&-heading {
@include radius($type: border-radius, $value: $panel-radius $panel-radius 0 0);
}
#{&}-title {
&-title {
font-size: 14px;
color: $panel-font-color;
font-weight: normal;
}
#{&}-footer {
&-footer {
background-color: $panel-normal;
border-top-color: $panel-normal;
@include radius($type: border-radius, $value: 0 0 $panel-radius $panel-radius);
}
@at-root #{&}-default {
@at-root &-default {
border-color: $panel-normal;
& > .panel-heading {
color: $panel-font-color;
......@@ -59,7 +59,7 @@ $panel-radius: 4px !default;
border-color: $panel-normal;
}
}
@at-root #{&}-primary {
@at-root &-primary {
border-color: $panel-primary;
& > .panel-heading {
color: $panel-default;
......@@ -67,7 +67,7 @@ $panel-radius: 4px !default;
border-color: $panel-primary;
}
}
@at-root #{&}-success {
@at-root &-success {
border-color: $panel-success;
& > .panel-heading {
color: $panel-default;
......@@ -75,7 +75,7 @@ $panel-radius: 4px !default;
border-color: $panel-success;
}
}
@at-root #{&}-info {
@at-root &-info {
border-color: $panel-info;
& > .panel-heading {
color: $panel-default;
......@@ -83,7 +83,7 @@ $panel-radius: 4px !default;
border-color: $panel-info;
}
}
@at-root #{&}-warning {
@at-root &-warning {
border-color: $panel-warning;
& > .panel-heading {
color: $panel-default;
......@@ -91,7 +91,7 @@ $panel-radius: 4px !default;
border-color: $panel-warning;
}
}
@at-root #{&}-danger {
@at-root &-danger {
border-color: $panel-danger;
& > .panel-heading {
color: $panel-default;
......@@ -100,11 +100,11 @@ $panel-radius: 4px !default;
}
}
@at-root #{&}-primary > #{&}-heading > #{&}-title,
#{&}-success > #{&}-heading > #{&}-title,
#{&}-info > #{&}-heading > #{&}-title,
#{&}-warning > #{&}-heading > #{&}-title,
#{&}-danger > #{&}-heading > #{&}-title {
@at-root &-primary > &-heading > &-title,
&-success > &-heading > &-title,
&-info > &-heading > &-title,
&-warning > &-heading > &-title,
&-danger > &-heading > &-title {
color: $panel-default;
}
......@@ -160,8 +160,8 @@ $panel-radius: 4px !default;
& > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
@include radius($type: border-radius, $value: 0 0 $panel-radius 0);
}
& > #{&}-body + .table,
& > #{&}-body + .table-responsive {
& > &-body + .table,
& > &-body + .table-responsive {
border-top-color: $panel-normal;
}
}
......
......@@ -20,7 +20,7 @@ $popover-title-font-color: $mediumgray-dark !default;
color: $popover-font-color;
border-color: $popover-background-color;
@at-root #{&}-title {
@at-root &-title {
padding-bottom: 0;
font-weight: bold;
color: $popover-title-font-color;
......
......@@ -20,20 +20,20 @@ $progress-background-color: $lightgray-dark !default;
background-color: $progress-background-color;
@include box-shadow($value: none);
#{&}-bar {
&-bar {
background-color: $progress-primary;
@include box-shadow($value: none);
}
#{&}-bar-success {
&-bar-success {
background-color: $progress-success;
}
#{&}-bar-info {
&-bar-info {
background-color: $progress-info;
}
#{&}-bar-warning {
&-bar-warning {
background-color: $progress-warning;
}
#{&}-bar-danger {
&-bar-danger {
background-color: $progress-danger;
}
}
......
......@@ -15,24 +15,24 @@ $tooltip-font-color: $white !default;
*/
.tooltip {
@at-root #{&}-inner {
@at-root &-inner {
color: $tooltip-font-color;
background-color: $tooltip-background-color;
}
&.top #{&}-arrow,
&.top-left #{&}-arrow,
&.top-right #{&}-arrow {
&.top &-arrow,
&.top-left &-arrow,
&.top-right &-arrow {
border-top-color: $tooltip-background-color;
}
&.right #{&}-arrow {
&.right &-arrow {
border-right-color: $tooltip-background-color;
}
&.left #{&}-arrow {
&.left &-arrow {
border-left-color: $tooltip-background-color;
}
&.bottom #{&}-arrow,
&.bottom-left #{&}-arrow,
&.bottom-right #{&}-arrow {
&.bottom &-arrow,
&.bottom-left &-arrow,
&.bottom-right &-arrow {
border-bottom-color: $tooltip-background-color;
}
}
......
......@@ -30,10 +30,10 @@ $well-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
& blockquote {
border-color: $well-blockquote-color;
}
@at-root #{&}-lg {
@at-root &-lg {
padding: 20px;
}
@at-root #{&}-sm {
@at-root &-sm {
padding: 5px;
}
}
......
This diff could not be displayed because it is too large.
......@@ -144,7 +144,7 @@
================================================== -->
<div class="docs-article docs--start" id="css-sass">
<h3>CSS/SASS</h3>
<p>The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.3.0.rc.2</a> and includes easily customized variables and mixins. We feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.</p>
<p>The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.3.3</a> and includes easily customized variables and mixins. We feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.</p>
</div>
<!-- Browser Support
================================================== -->
......
......@@ -71,7 +71,7 @@
<div id="learn-more" class="desc container">
<div class="desc__introduces">
<h3>Designed for everyone, everywhere.</h3>
<p>Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.3.0.rc.2</a>.</p>
<p>Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.3.3</a>.</p>
</div>
<div class="desc__features">
<div class="row">
......
......@@ -6,12 +6,12 @@
"author":"Flathemes",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-contrib-copy": "~0.4.1",
"grunt": "~0.4.4",
"grunt-contrib-cssmin": "~0.9.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-sass": "~0.5.0",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-sass": "~0.7.3",
"load-grunt-tasks": "~0.2.0"
}
}
\ No newline at end of file
......