Created
June 28, 2016 18:15
-
-
Save nobre84/c22230f65ba8c74f817b1fc295575674 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Demo InterfaCSS stylesheet file. | |
* | |
* Read more about the stylesheet format here: https://github.com/tolo/InterfaCSS/wiki/Stylesheet-format | |
* Checkout this page for a reference on what properties can be set: https://github.com/tolo/InterfaCSS/wiki/Stylesheet-Property-Reference | |
* | |
* For a short selection of available properties that can be set, see bottom of file. | |
*/ | |
/** Load remote font: **/ | |
@SanFranciscoDisplayUltralight: url("https://github.com/supermarin/YosemiteSanFranciscoFont/raw/master/System%20San%20Francisco%20Display%20Ultralight.ttf"); | |
@stdFont1: AvenirNextCondensed-Regular 14; | |
@stdFont2: Superclarendon-BlackItalic 15; | |
@stdFont3: GillSans-Bold 13; | |
@stdFont4: AvenirNextCondensed-Bold 16; | |
@stdFont5: Futura-Medium 16; | |
@pinkColor: #ff3ab7; | |
@magentaColor: #4d0e8d; | |
@lightGreenColor: #c3e217; | |
@greenColor: #a1d22a; | |
@orangeColor: #e26317; | |
@mediumGray: #6e6e6e; | |
@blueColor: #00bce3; | |
/** Common style declarations **/ | |
.roundedCorners { | |
cornerRadius: 5; | |
clipsToBounds: YES; | |
} | |
.buttonStyle1, .buttonStyle2, .buttonStyle3 { | |
titleColor: white; | |
titleColor(highlighted): @lightGreenColor; | |
font: @stdFont4; | |
titleLabel.adjustsFontSizeToFitWidth: YES; | |
titleLabel.minimumScaleFactor: 0.5; | |
} | |
.buttonStyle1 { | |
backgroundImage: @magentaColor; // Color as image | |
backgroundImage(highlighted): darken(#4d0e8d, 50%); // Color function example | |
} | |
.buttonStyle2 { | |
backgroundColor: @pinkColor; | |
backgroundImage: url("http://photos.leafnode.se/Iceland-July-2013-Quick-Favorite/i-WPgkgsz/0/S/C5D_1826-S.jpg"); | |
contentVerticalAlignment: top; | |
titleColor: black; | |
titleColor(highlighted): @lightGreenColor; | |
} | |
.buttonStyle3 { | |
borderColor: @greenColor; | |
borderWidth: 2; | |
font: @stdFont5; | |
} | |
UIView > UILabel { /* Set default font for all labels that are direct children of UIViews */ | |
font: @stdFont1; | |
} | |
UIView.headerView > UILabel { /* Set default font for all labels that are direct children of UIViews with style class "headerView" */ | |
font: @SanFranciscoDisplayUltralight 30; | |
} | |
.labelStyle1, .labelStyle2, .labelStyle3 { | |
textAlignment: center; | |
} | |
.labelStyle1 { | |
textColor: @magentaColor; | |
font: @stdFont1; | |
borderColor: @magentaColor; | |
borderWidth: 0.5; | |
} | |
.labelStyle2 { | |
backgroundColor: #ff3ab7; | |
textColor: white; | |
font: @stdFont2; | |
} | |
.labelStyle3 { | |
font: @stdFont3; | |
} | |
/** Element specific styles (and layout) **/ | |
#demoRootView { | |
backgroundColor: gradient(#fafafa, #e0e0e0); | |
} | |
#demoHeaderView { | |
layout: top(guide.top + 1), height(44), centerX(parent); /* Placing label at top layout guide (with offset) and using intrinsic content size of label */ | |
#demoHeaderLabel { /* Example of nested style declaration */ | |
layout: size(parent, parent); | |
textAlignment: center; | |
text: "Welcome to InterfaCSS"; | |
} | |
} | |
#demoLabel1 { | |
layout: height(40), width(parent.width * 0.27), bottom(demoButton1 - 40), centerX(parent.width * 0.18); | |
text: "I am label #1"; | |
} | |
#demoLabel2 { | |
layout: height(40), width(parent.width * 0.3), centerY(demoLabel1), centerX(parent.width * 0.5); | |
text: "Label #2"; | |
} | |
#demoLabel3 { | |
layout: height(40), width(parent.width * 0.27), centerY(demoLabel1), centerX(parent.width * 0.82); | |
attributedText: "I am " (underlineStyle: single, color: #4d0e8d), "label " (underlineStyle: single, color: lighten(#4d0e8d, 50%)), "#3" (underlineStyle: single, color: fadeout(lighten(#4d0e8d, 50%), 33%)); | |
} | |
#demoButton1 { | |
layout: height(40), width(parent.width * 0.25), centerY(demoButton2), centerX(parent.width * 0.15); | |
title: "Button #1"; | |
} | |
#demoButton2 { | |
layout: size(120, 80), center(parent, parent); /* Using implicit/default parent relations that evaluates to parent.centerX / parent.centerY (same attributes used) */ | |
title: "I am a button #2"; | |
} | |
#demoButton3 { | |
layout: height(40), width(parent.width * 0.25), centerY(demoButton2), centerX(parent.width * 0.85); | |
attributedTitle: "✔︎" (color: @greenColor), " Button #3" (color: @mediumGray); | |
attributedTitle(highlighted): "✘" (color: @orangeColor), " " (), "Button #3" (color: @mediumGray, underlineStyle: single); | |
} | |
#demoButton3:phone:portrait { | |
attributedTitle: "✔︎" (color: @greenColor), " Btn #3" (color: @mediumGray); | |
attributedTitle(highlighted): "✘" (color: @orangeColor), " " (), "Btn #3" (color: @mediumGray, underlineStyle: single); | |
} | |
#demoSpinner { | |
layout: centerX(demoButton2), top(demoButton2.bottom + 50); | |
activityIndicatorViewStyle: whiteLarge; | |
color: @pinkColor; | |
hidesWhenStopped: NO; | |
/*animating: YES; Comment out this line if you want the spinner to start animating automatically */ | |
transform: scale(1.5, 1.5); | |
} | |
#demoSpinner:landscape { | |
layout: right(parent.marginRight - 10), top(guide.top + 10); | |
transform: scale(1, 1); | |
} | |
#demoSlider { | |
layout: width(120), center(demoButton2.left - 50, demoButton2.bottom + 70); | |
transform: rotate(75); | |
anchorPoint: point(0.5, 0.5); /* Make sure the slider is rotated around it's center point */ | |
tintColor: @lightGreenColor; | |
thumbTintColor: @magentaColor; | |
maximumValue: 10; | |
value: 5; | |
} | |
#demoSlider:landscape { | |
transform: rotate(15); | |
} | |
#demoSwitch { | |
layout: topLeft(demoButton2 + 30, demoButton2 + 50); | |
tintColor: lighten(gray, 60%); | |
onTintColor: @greenColor; | |
thumbTintColor: @blueColor; | |
} | |
/** | |
Below is a small selection of available properties that can be set on different view classes in UIKit. | |
UIView { | |
alpha: 0.33; | |
anchorPoint: point(0.5, 0.5); | |
autoresizingMask: width height left right top bottom; | |
center: point(5, 6); | |
clipsToBounds: YES; | |
contentMode: center; | |
cornerRadius: 5; | |
frame: rect(1,2,3,4); | |
shadowColor: red; | |
tintColor: #ffffff; | |
transform: rotate(10) scale(20,30) translate(40,50); | |
} | |
UILabel { | |
attributedText: "text" (font: HelveticaNeue-Medium 12, backgroundColor: rgb(0,0,255), color: darken(green, 33%), baselineOffset: 10, strokeColor: yellow, strokeWidth: 1.0); | |
numberOfLines: 2; | |
text: "Text:"; | |
textAlignment: right; | |
textColor: rgba(64, 64, 64, 0.5); | |
} | |
UIButton { | |
attributedTitle: "Hello " (font: @someFontVariable, foregroundColor: @someColorVariable), "World" (font: @someOtherFontVariable, foregroundColor: red, underlineStyle: single dash); | |
backgroundImage: #2bff8a; // Color as image | |
backgroundImage(selected): darken(#2bff8a, 50%); // Parameterized property that sets a value for a specific UIControlState | |
contentInset: insets(10, 20, 30, 40); | |
font: HelveticaNeue-Medium 12; // Basically and alias for titleLabel.font | |
title: "Title"; | |
title(selected): "Selected Title"; | |
titleColor(selectedHighlighted): blue; | |
} | |
UITextField { | |
adjustsFontSizeToFitWidth: YES; | |
autocorrectionType: default; | |
attributedText: "Hello " (font: @someFontVariable, foregroundColor: @someColorVariable), "World" (font: @someOtherFontVariable, foregroundColor: red, underlineStyle: single dash); | |
borderStyle: roundedRect; | |
clearsOnInsertion: NO; | |
keyboardAppearance: light | |
keyboardType: numbersAndPunctuation; | |
minimumScaleFactor: 0.5; | |
placeholder: "placeholder"; | |
returnKeyType: done; | |
text: "Text:"; | |
textColor: rgba(64, 64, 64, 0.5); | |
} | |
**/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment