Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Namespace LESS mixins in order to play nice with others #1362

Merged
merged 2 commits into from
Jul 7, 2015
Merged

Namespace LESS mixins in order to play nice with others #1362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d8767e
Namespace LESS mixins in order to play nice with others
interactivellama Jun 19, 2015
2024b50
Remove camel case from mixins. Use dash style.
interactivellama Jun 19, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion less/checkbox.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
position: relative;

&:before {
.iconBaseStyles("Glyphicons Halflings");
#fuelux > .icon-base-styles("Glyphicons Halflings");
border: 1px solid #adadad;
border-radius: @baseBorderRadius;
color: #fff;
Expand Down
4 changes: 2 additions & 2 deletions less/icons.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@

//This could be an interesting addition...
//[data-icon]:before {
// .iconBaseStyles();
// #fuelux > .icon-base-styles();
// content: attr(data-icon);
//}

.fuelux {

[class^="fueluxicon-"]:before,
[class*=" fueluxicon-"]:before {
.iconBaseStyles();
#fuelux > .icon-base-styles();
}

.fueluxicon-loader-full:before {
Expand Down
2 changes: 1 addition & 1 deletion less/loader.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
width: 64px;

&:after, &:before {
.iconBaseStyles();
#fuelux > .icon-base-styles();

bottom: 0;
display: block;
Expand Down
167 changes: 84 additions & 83 deletions less/mixins.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,35 @@
}
}

// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
#fuelux {
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}

// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradient Bar Colors for buttons and alerts
.gradient-bar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}

// Gradients
#gradient {
// Gradients
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
Expand All @@ -53,68 +53,69 @@
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
}

// Icon Base Styles
.iconBaseStyles(@fontFamily: "fuelux"){
font-family: @fontFamily !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Icon Base Styles
.icon-base-styles(@fontFamily: "fuelux"){
font-family: @fontFamily !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

// Disables selection of text
.noSelectionAllowed(){
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
// Disables selection of text
.no-selection-allowed(){
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}

// Helpers
// -------------------------
.data-label() {
text-transform: uppercase;
font-size: 10px;
margin-bottom: 2px;
text-shadow: 0 1px #fff;
color: #666;
}
// Helpers
// -------------------------
.data-label() {
text-transform: uppercase;
font-size: 10px;
margin-bottom: 2px;
text-shadow: 0 1px #fff;
color: #666;
}

.data-value() {
font-size: 14px;
}
.data-value() {
font-size: 14px;
}

.section-heading() {
font-size: 16px;
color: #333;
margin: 0 0 10px;
padding: 0;
text-shadow: 0 1px #fff;
}
.section-heading() {
font-size: 16px;
color: #333;
margin: 0 0 10px;
padding: 0;
text-shadow: 0 1px #fff;
}

.text-emphasis-variant(@color) {
color: @color;
a&:hover {
color: darken(@color, 10%);
.text-emphasis-variant(@color) {
color: @color;
a&:hover {
color: darken(@color, 10%);
}
}
}

.vertical-align() {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
}
.vertical-align() {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
}

}
2 changes: 1 addition & 1 deletion less/preloader.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@
width: 64px;

&.iefix span, &:before, b, i {
.iconBaseStyles();
#fuelux > .icon-base-styles();
}

&:before {
Expand Down
8 changes: 4 additions & 4 deletions less/repeater-list.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
line-height: 1.42857;
padding: 8px;

.noSelectionAllowed();
#fuelux > .no-selection-allowed();

&:first-child {
border-left: none;
Expand All @@ -100,7 +100,7 @@
&:hover, &.sorted {
background: #F1F1F1;
cursor: pointer;
#gradient > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
#fuelux > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
}
}

Expand Down Expand Up @@ -147,7 +147,7 @@
top: 0;
z-index: 1;

.noSelectionAllowed();
#fuelux > .no-selection-allowed();

&.shifted {
margin-left: -1px;
Expand All @@ -162,7 +162,7 @@
&:hover, &.sorted {
background: #F1F1F1;
cursor: pointer;
#gradient > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
#fuelux > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
}

&.sorted {
Expand Down
4 changes: 2 additions & 2 deletions less/repeater.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@

&-header {
border-bottom: 1px solid #ddd;
.border-top-radius(4px);
#fuelux.border-top-radius(4px);
}

&-footer {
border-top: 1px solid #ddd;
.border-bottom-radius(4px);
#fuelux.border-bottom-radius(4px);
}

&-loader {
Expand Down
2 changes: 1 addition & 1 deletion less/selectlist.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
padding-right: unit((2 * @selectlist-horizontal-padding + @selectlist-caret-width), px);

.caret {
.vertical-align();
#fuelux > .vertical-align();
right: @selectlist-horizontal-padding;

}
Expand Down
6 changes: 3 additions & 3 deletions less/utility.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,13 +198,13 @@
// Helpers
// -------------------------
.data-label {
.data-label();
#fuelux > .data-label();
}
.data-value {
.data-value();
#fuelux > .data-value();
}
.section-heading {
.section-heading();
#fuelux > .section-heading();
}

}