├── screenshot.png ├── font └── fontawesome-webfont.ttf ├── qml.qrc ├── font.qrc ├── .gitignore ├── README.md ├── QMLBootstrap.pro ├── component.qrc ├── qml ├── Components │ ├── RadioGroup.qml │ ├── RoundedImage.frag │ ├── ImageScope.frag │ ├── FontAwesomeIcon.qml │ ├── RoundedImage.qml │ ├── Thumbnail.qml │ ├── RoundedThumbnail.qml │ ├── CheckBox.qml │ ├── ImageScope.qml │ ├── Radio.qml │ ├── Input.qml │ ├── Button.qml │ └── TextArea.qml └── main.qml ├── src ├── bootstrap │ ├── properties.h │ └── properties.cpp └── main.cpp └── LICENSE /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuntan/QMLBootstrap/HEAD/screenshot.png -------------------------------------------------------------------------------- /font/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuntan/QMLBootstrap/HEAD/font/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | qml/main.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /font.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | font/fontawesome-webfont.ttf 4 | 5 | 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.user 2 | *.user.* 3 | *.autosave 4 | build* 5 | *.dll 6 | *.lib 7 | *.a 8 | Makefile* 9 | *.Debug 10 | *.Release 11 | *.o 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | QML Bootstrap 2 | ============= 3 | 4 | ![screenshot](screenshot.png) 5 | 6 | ## Features 7 | 8 | * easy to use FontAwesome Icons 9 | * display independent pixel unit 10 | * Color Theme 11 | * Button 12 | * Input (TextForm, TextArea, CheckBox, Radio) 13 | * Rounded image 14 | * Image Scope 15 | * Thumbnail 16 | 17 | ## Now working 18 | 19 | * Select 20 | * Button Group 21 | * Input Group 22 | 23 | ## About this software 24 | This software is distributed under the MIT License. 25 | 26 | __The following are used__ 27 | [Font Awesome](http://fortawesome.github.io/Font-Awesome/) SIL OFL 1.1 28 | -------------------------------------------------------------------------------- /QMLBootstrap.pro: -------------------------------------------------------------------------------- 1 | TARGET = YourAppName 2 | TEMPLATE = app 3 | 4 | QT += qml quick widgets 5 | android : QT += androidextras 6 | 7 | QMAKE_CXXFLAGS += -std=c++0x 8 | 9 | SOURCES += \ 10 | src/main.cpp \ 11 | src/bootstrap/properties.cpp 12 | 13 | HEADERS += \ 14 | src/bootstrap/properties.h 15 | 16 | COMPONENT_FILES += $$files(qml/Components/*.qml) 17 | 18 | QML_FILES += \ 19 | qml/main.qml 20 | 21 | JS_FILES += $$files(js/*.js) 22 | 23 | OTHER_FILES += \ 24 | $$COMPONENT_FILES \ 25 | $$QML_FILES \ 26 | $$JS_FILES 27 | 28 | RESOURCES += \ 29 | qml.qrc \ 30 | font.qrc \ 31 | component.qrc 32 | -------------------------------------------------------------------------------- /component.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | qml/Components/FontAwesomeIcon.qml 4 | qml/Components/Button.qml 5 | qml/Components/Input.qml 6 | qml/Components/TextArea.qml 7 | qml/Components/Radio.qml 8 | qml/Components/CheckBox.qml 9 | qml/Components/RadioGroup.qml 10 | qml/Components/Thumbnail.qml 11 | qml/Components/ImageScope.frag 12 | qml/Components/RoundedImage.frag 13 | qml/Components/ImageScope.qml 14 | qml/Components/RoundedImage.qml 15 | qml/Components/RoundedThumbnail.qml 16 | 17 | 18 | -------------------------------------------------------------------------------- /qml/Components/RadioGroup.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* RadioGroup 4 | * \qml 5 | * RadioGropu { id: rGroup } 6 | * Radio { 7 | * checked: false 8 | * text: "Radio1" 9 | * group: rGroup 10 | * } 11 | * \endqml 12 | */ 13 | QtObject { 14 | id: radioGroup 15 | property var _radios 16 | property int _checkedIndex: -1 17 | 18 | function add(r) { 19 | if(typeof _radios == 'undefined') { _radios = new Array(0) } 20 | _radios.push(r) 21 | if(r.checked && _checkedIndex === -1) { 22 | _checkedIndex = _radios.length - 1 23 | // console.debug(_checkedIndex) 24 | } 25 | else { 26 | r.checked = false 27 | } 28 | } 29 | 30 | function update() { 31 | for(var i = 0; i < _radios.length; i++) { 32 | if(_radios[i].checked && i !== _checkedIndex) { 33 | _radios[_checkedIndex].checked = false 34 | _checkedIndex = i 35 | return 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/bootstrap/properties.h: -------------------------------------------------------------------------------- 1 | #ifndef PROPERTIES_H 2 | #define PROPERTIES_H 3 | 4 | class QQmlPropertyMap; 5 | class QColor; 6 | 7 | extern QQmlPropertyMap *m_faIcons; 8 | extern QQmlPropertyMap *m_properties; 9 | 10 | #define ADD_ICON(key, unicode) \ 11 | m_faIcons->insert(QLatin1String(#key), QVariant(#unicode)); 12 | 13 | #define SET_PROPERTY(key, value) \ 14 | m_properties->insert(QLatin1String(#key), QVariant(value)); 15 | 16 | #define SET_PROPERTY_BY_ID(key, id) \ 17 | m_properties->insert(QLatin1String(#key), m_properties->value(#id)); 18 | 19 | #define GET_VALUE(key) \ 20 | m_properties->value(#key) 21 | 22 | #define GET_COLOR(key) \ 23 | QColor(m_properties->value(#key).toString()) 24 | 25 | // populate m_faIcons 26 | void setupFaIcons(); 27 | // populate m_properties 28 | void setupProperties(); 29 | // user customization 30 | void customize(); 31 | 32 | // less lighten, darken 33 | // amount: percentage(0-100) 34 | QColor lighten(QColor color, uint amount); 35 | QColor darken(QColor color, uint amount); 36 | 37 | #endif // PROPERTIES_H 38 | -------------------------------------------------------------------------------- /qml/Components/RoundedImage.frag: -------------------------------------------------------------------------------- 1 | varying highp vec2 qt_TexCoord0; 2 | uniform sampler2D _image; 3 | uniform lowp float qt_Opacity; 4 | uniform highp float _rX; 5 | uniform highp float _rY; 6 | 7 | // square float 8 | highp float sq(float a) 9 | { 10 | return a * a; 11 | } 12 | 13 | void main() { 14 | lowp float opacity = qt_Opacity; 15 | highp float x = qt_TexCoord0.x; 16 | highp float y = qt_TexCoord0.y; 17 | 18 | if(x <= _rX && y <= _rY 19 | && sq(x - _rX) / sq(_rX) + sq(y - _rY) / sq(_rY) > 1.0) 20 | opacity = 0.0; 21 | if(x <= _rX && y >= 1.0 - _rY 22 | && sq(x - _rX) / sq(_rX) + sq(y - 1.0 + _rY) / sq(_rY) > 1.0) 23 | opacity = 0.0; 24 | if(x >= 1.0 - _rX && y <= _rY 25 | && sq(x - 1.0 + _rX) / sq(_rX) + sq(y - _rY) / sq(_rY) > 1.0) 26 | opacity = 0.0; 27 | if(x >= 1.0 - _rX && y >= 1.0 - _rY 28 | && sq(x - 1.0 + _rX) / sq(_rX) + sq(y - 1.0 + _rY) / sq(_rY) > 1.0) 29 | opacity = 0.0; 30 | 31 | gl_FragColor = texture2D(_image, vec2(x, y)) * opacity; 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Yuto Tokunaga 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /qml/Components/ImageScope.frag: -------------------------------------------------------------------------------- 1 | varying highp vec2 qt_TexCoord0; 2 | uniform sampler2D _image; 3 | uniform lowp float qt_Opacity; 4 | uniform highp float _w; 5 | uniform highp float _h; 6 | uniform highp float _cX; 7 | uniform highp float _cY; 8 | uniform highp float _rX; 9 | uniform highp float _rY; 10 | 11 | // square float 12 | highp float sq(float a) 13 | { 14 | return a * a; 15 | } 16 | 17 | void main() { 18 | lowp float opacity = qt_Opacity; 19 | highp float x = qt_TexCoord0.x; 20 | highp float y = qt_TexCoord0.y; 21 | 22 | if(x <= _rX && y <= _rY 23 | && sq(x - _rX) / sq(_rX) + sq(y - _rY) / sq(_rY) > 1.0) 24 | opacity = 0.0; 25 | if(x <= _rX && y >= 1.0 - _rY 26 | && sq(x - _rX) / sq(_rX) + sq(y - 1.0 + _rY) / sq(_rY) > 1.0) 27 | opacity = 0.0; 28 | if(x >= 1.0 - _rX && y <= _rY 29 | && sq(x - 1.0 + _rX) / sq(_rX) + sq(y - _rY) / sq(_rY) > 1.0) 30 | opacity = 0.0; 31 | if(x >= 1.0 - _rX && y >= 1.0 - _rY 32 | && sq(x - 1.0 + _rX) / sq(_rX) + sq(y - 1.0 + _rY) / sq(_rY) > 1.0) 33 | opacity = 0.0; 34 | 35 | x = x * _w + _cX; y = y * _h + _cY; 36 | if(x < 0.0 || x > 1.0 || y < 0.0 || y > 1.0) opacity = 0.0; 37 | 38 | gl_FragColor = texture2D(_image, vec2(x, y)) * opacity; 39 | } 40 | -------------------------------------------------------------------------------- /qml/Components/FontAwesomeIcon.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* FontAwesomeIcon - display FontAwesome icon 4 | * 5 | * \property string faIcon 6 | * Specify FontAwesome icon's name. 7 | * (ex. fa-github fa-flag) 8 | * \property color color 9 | * Specify color (not bootstrap color name). 10 | * \property string size 11 | * Specify bootstrap size name. 12 | * (large, base, small, xsmall) 13 | * \property int fontDpSize 14 | * Specify font dp size. 15 | * \property bool boldFont 16 | * 17 | * \qml 18 | * FontAwesomeIcon { 19 | * size: "large" 20 | * boldFont: true 21 | * color: "#333" 22 | * faIcon: "fa-github" 23 | * } 24 | * \endqml 25 | */ 26 | Item { 27 | id: faItem 28 | property string faIcon : "" 29 | property alias color : innertext.color 30 | property string size 31 | property int fontDpSize: bs["font-size-base"]*dp 32 | property alias boldFont: innertext.font.bold 33 | implicitWidth: innertext.implicitWidth 34 | implicitHeight: innertext.implicitHeight 35 | 36 | Text { 37 | id: innertext 38 | text: faIcon !== "" ? faIcons[faIcon] !== undefined ? faIcons[faIcon] 39 | : faIcons["fa-question"] 40 | : "" 41 | font.family: "FontAwesome" 42 | font.pointSize: size !== undefined ? (bs["font-size-%1".arg(size)] - 4)*dp 43 | : fontPointSize 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /qml/Components/RoundedImage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* RoundedImage - Round shaped image 4 | * property string source 5 | * Image source 6 | * property real radius 7 | * 8 | * RoundedImage { 9 | * source: "sample.img" 10 | * radius: 30 11 | * } 12 | */ 13 | Item { 14 | id: roundedImg 15 | 16 | property real radius: 0 17 | 18 | // interImage aliases 19 | property alias fillMode: interImage.fillMode 20 | property alias horizontalAlignment: interImage.horizontalAlignment 21 | property alias mirror: interImage.mirror 22 | property alias paintedHeight: interImage.paintedHeight 23 | property alias paintedWidth: interImage.paintedWidth 24 | property alias progress: interImage.progress 25 | property alias smooth: interImage.smooth 26 | property alias source: interImage.source 27 | property alias sourceSize: interImage.sourceSize 28 | property alias status: interImage.status 29 | property alias verticalAlignment: interImage.verticalAlignment 30 | 31 | implicitWidth: interImage.sourceSize.width 32 | implicitHeight: interImage.sourceSize.height 33 | 34 | Image { 35 | id: interImage 36 | anchors.fill: parent 37 | visible: false 38 | } 39 | 40 | ShaderEffect { 41 | id: effect 42 | 43 | anchors.fill: parent 44 | 45 | property Image _image: interImage 46 | property real _rX: radius / interImage.width 47 | property real _rY: radius / interImage.height 48 | 49 | fragmentShader: roundedImageFragShader 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /qml/Components/Thumbnail.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* Thumbnail - Image with border 4 | * property string source 5 | * property bool round 6 | * Whether button should have rounded corner. 7 | * 8 | * Thumbnail { 9 | * source: "sample.png" 10 | * round: false 11 | * } 12 | */ 13 | Item { 14 | id: thumbnail 15 | 16 | property bool round: true 17 | 18 | // interImage aliases 19 | property alias fillMode: interImage.fillMode 20 | property alias horizontalAlignment: interImage.horizontalAlignment 21 | property alias mirror: interImage.mirror 22 | property alias paintedHeight: interImage.paintedHeight 23 | property alias paintedWidth: interImage.paintedWidth 24 | property alias progress: interImage.progress 25 | property alias smooth: interImage.smooth 26 | property alias source: interImage.source 27 | property alias sourceSize: interImage.sourceSize 28 | property alias status: interImage.status 29 | property alias verticalAlignment: interImage.verticalAlignment 30 | 31 | implicitWidth: interImage.sourceSize.width 32 | + (thumbRect.border.width + bs["thumbnail-padding"]*dp) * 2 33 | implicitHeight: interImage.sourceSize.height 34 | + (thumbRect.border.width + bs["thumbnail-padding"]*dp) * 2 35 | 36 | Rectangle { 37 | id: thumbRect 38 | anchors.fill: parent 39 | color: bs["thumbnail-bg"] 40 | border.width: 1*dp; border.color: bs["thumbnail-border"] 41 | radius: thumbnail.round ? bs["thumbnail-border-radius"]*dp : 0 42 | 43 | Image { 44 | id: interImage 45 | anchors.fill: parent; anchors.margins: bs["thumbnail-padding"] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /qml/Components/RoundedThumbnail.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* RoundedThumbnail - Round shaped image with border 4 | * property string source 5 | * property real radius 6 | * 7 | * RoundedThumbnail { 8 | * source: "sample.png" 9 | * radius: 30 10 | * } 11 | */ 12 | Item { 13 | id: rThumb 14 | 15 | property alias radius: thumbRect.radius 16 | 17 | // interImage aliases 18 | property alias fillMode: interImage.fillMode 19 | property alias horizontalAlignment: interImage.horizontalAlignment 20 | property alias mirror: interImage.mirror 21 | property alias paintedHeight: interImage.paintedHeight 22 | property alias paintedWidth: interImage.paintedWidth 23 | property alias progress: interImage.progress 24 | property alias smooth: interImage.smooth 25 | property alias source: interImage.source 26 | property alias sourceSize: interImage.sourceSize 27 | property alias status: interImage.status 28 | property alias verticalAlignment: interImage.verticalAlignment 29 | 30 | implicitWidth: interImage.sourceSize.width 31 | + (thumbRect.border.width + effect.anchors.margins) * 2 32 | implicitHeight: interImage.sourceSize.height 33 | + (thumbRect.border.width + effect.anchors.margins) * 2 34 | 35 | Image { 36 | id: interImage 37 | anchors.fill: parent 38 | visible: false 39 | } 40 | 41 | Rectangle { 42 | id: thumbRect 43 | anchors.fill: parent 44 | color: bs["thumbnail-bg"] 45 | border.width: 1*dp; border.color: bs["thumbnail-border"] 46 | 47 | ShaderEffect { 48 | id: effect 49 | anchors.fill: parent; anchors.margins: bs["thumbnail-padding"]*dp 50 | 51 | property Image _image: interImage 52 | property real _rX: radius / interImage.width 53 | property real _rY: radius / interImage.height 54 | 55 | fragmentShader: roundedImageFragShader 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /qml/Components/CheckBox.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* CheckBox - Bootstrap style checkbox form 4 | * \property bool checked 5 | * \property bool boldFont 6 | * \property bool enabled 7 | * When it is false, form becomes unmodifyable 8 | * and be slightly different look. 9 | * \property string text 10 | * Text displayed right side of checkBox 11 | * \property bool readOnly 12 | * 13 | * \qml 14 | * CheckBox { 15 | * checked: true 16 | * text: "Check me!" 17 | * } 18 | * \endqml 19 | */ 20 | Item { 21 | id: checkBox 22 | property bool checked: false 23 | property alias text: chkText.text 24 | property bool readOnly: false 25 | 26 | // property alias 27 | property alias boldFont: chkText.font.bold 28 | 29 | width: implicitWidth; height: implicitHeight 30 | implicitWidth: chkIcon.width + bs["padding-base-horizontal"] + chkText.width 31 | implicitHeight: bs["padding-base-vertical"]*dp * 2 + Math.max(chkIcon.height, chkText.height) 32 | 33 | FontAwesomeIcon { 34 | id: chkIcon 35 | anchors { left: parent.left; verticalCenter: parent.verticalCenter } 36 | width: implicitWidth; height: implicitHeight 37 | faIcon: checked ? "fa-check-square" : "fa-square" 38 | fontDpSize: bs["font-size-base"]*dp 39 | color: enabled ? bs["input-color"] : bs["gray-lighter"] 40 | } 41 | 42 | Text { 43 | id: chkText 44 | anchors { 45 | left: chkIcon.right; leftMargin: bs["padding-base-horizontal"] 46 | verticalCenter: parent.verticalCenter 47 | } 48 | width: implicitWidth; height: implicitHeight 49 | font.pixelSize: bs["font-size-base"]*dp 50 | color: bs["input-color"] 51 | } 52 | 53 | MouseArea { 54 | anchors.centerIn: parent 55 | width: parent.width; height: Math.max(chkIcon.height, chkText.height) 56 | cursorShape: Qt.PointingHandCursor 57 | onClicked: !checkBox.readOnly ? checked = !checked : "do nothing" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /qml/Components/ImageScope.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* ImageScope - Scope a Image 4 | * property string source 5 | * Image source 6 | * property real magnification 7 | * magnification of image (>0) 8 | * property int scopeX / scopeY 9 | * position of scope 10 | * property real radius 11 | * radius of scope 12 | * 13 | * ImageScope { 14 | * width: 50; height: 50 15 | * source: "sample.img" 16 | * radius: width / 2 17 | * scopeX: 30; scopeY: 20 18 | * } 19 | */ 20 | Item { 21 | id: imgScope 22 | 23 | property real magnification: 1.0 24 | property int scopeX: 0 25 | property int scopeY: 0 26 | property real radius: 0 27 | 28 | // interImage aliases 29 | property alias fillMode: interImage.fillMode 30 | property alias horizontalAlignment: interImage.horizontalAlignment 31 | property alias mirror: interImage.mirror 32 | property alias paintedHeight: interImage.paintedHeight 33 | property alias paintedWidth: interImage.paintedWidth 34 | property alias progress: interImage.progress 35 | property alias smooth: interImage.smooth 36 | property alias source: interImage.source 37 | property alias sourceSize: interImage.sourceSize 38 | property alias status: interImage.status 39 | property alias verticalAlignment: interImage.verticalAlignment 40 | 41 | Image { 42 | id: interImage 43 | visible: false 44 | width: sourceSize.width * magnification 45 | height: sourceSize.height * magnification 46 | } 47 | 48 | ShaderEffect { 49 | id: effect 50 | anchors.fill: parent 51 | 52 | implicitWidth: interImage.sourceSize.width 53 | implicitHeight: interImage.sourceSize.height 54 | 55 | property Image _image: interImage 56 | property real _w: width / interImage.width 57 | property real _h: height / interImage.height 58 | property real _rX: radius / interImage.width / _w 59 | property real _rY: radius / interImage.height / _h 60 | property real _cX: scopeX / interImage.width 61 | property real _cY: scopeY / interImage.height 62 | 63 | fragmentShader: imageScopeFragShader 64 | 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /qml/Components/Radio.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* Radio - Bootstrap style radio form 4 | * \property bool checked 5 | * \property bool boldFont 6 | * \property bool enabled 7 | * When it is false, form becomes unmodifyable 8 | * and be slightly different look. 9 | * \property string text 10 | * Text displayed right side of checkBox 11 | * \property bool readOnly 12 | * \property RadioGroup group 13 | * Specify RadioGroup for checking only one of many. 14 | * 15 | * \qml 16 | * RadioGropu { id: rGroup } 17 | * Radio { 18 | * checked: false 19 | * text: "Radio1" 20 | * group: rGroup 21 | * } 22 | * \endqml 23 | */ 24 | Item { 25 | id: radio 26 | property bool checked: false 27 | property alias text: rdoText.text 28 | property bool readOnly: false 29 | property QtObject group 30 | 31 | // property alias 32 | property alias boldFont: rdoText.font.bold 33 | 34 | width: implicitWidth; height: implicitHeight 35 | implicitWidth: rdoIcon.width + bs["padding-base-horizontal"] + rdoText.width 36 | implicitHeight: bs["padding-base-vertical"]*dp * 2 + Math.max(rdoIcon.height, rdoText.height) 37 | 38 | onGroupChanged: group.add(radio) 39 | 40 | FontAwesomeIcon { 41 | id: rdoIcon 42 | anchors { left: parent.left; verticalCenter: parent.verticalCenter } 43 | width: implicitWidth; height: implicitHeight 44 | faIcon: checked ? "fa-dot-circle-o" : "fa-circle" 45 | fontDpSize: bs["font-size-base"]*dp 46 | color: enabled ? bs["input-color"] : bs["gray-lighter"] 47 | } 48 | 49 | Text { 50 | id: rdoText 51 | anchors { 52 | left: rdoIcon.right; leftMargin: bs["padding-base-horizontal"] 53 | verticalCenter: parent.verticalCenter 54 | } 55 | width: implicitWidth; height: implicitHeight 56 | font.pixelSize: bs["font-size-base"]*dp 57 | color: bs["input-color"] 58 | } 59 | 60 | MouseArea { 61 | anchors.centerIn: parent 62 | width: parent.width; height: Math.max(rdoIcon.height, rdoText.height) 63 | cursorShape: Qt.PointingHandCursor 64 | onClicked: { 65 | if(!readOnly && !checked) { 66 | checked = true 67 | group.update() 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | #include 6 | 7 | #ifdef Q_OS_ANDROID 8 | #include 9 | #endif 10 | 11 | #include "bootstrap/properties.h" 12 | 13 | QApplication *app; 14 | QQmlApplicationEngine *engine; 15 | 16 | void setupDpUnit() 17 | { 18 | //implement density-independent pixel 19 | qreal dp; 20 | qreal dotsPerInch = app->screens()[0]->physicalDotsPerInch(); 21 | qDebug() << "physicalDotsPerInch = " << dotsPerInch; 22 | dp = qRound(dotsPerInch) / 125.0; 23 | #ifdef Q_OS_ANDROID 24 | qDebug() << "Android OS detected"; 25 | QAndroidJniObject activity = QAndroidJniObject::callStaticObjectMethod("org/qtproject/qt5/android/QtNative", "activity", "()Landroid/app/Activity;"); 26 | QAndroidJniObject resource = activity.callObjectMethod("getResources","()Landroid/content/res/Resources;"); 27 | QAndroidJniObject metrics = resource.callObjectMethod("getDisplayMetrics","()Landroid/util/DisplayMetrics;"); 28 | dp = metrics.getField("density"); 29 | #endif 30 | #ifdef Q_OS_IOS 31 | qDebug() << "iOS detected"; 32 | dp = 3; 33 | #endif 34 | if(dp < 1) { dp = 1; } 35 | qDebug() << "1dp = " << dp; 36 | engine->rootContext()->setContextProperty(QLatin1String("dp"), QVariant::fromValue(dp)); 37 | } 38 | 39 | void setupFontAwesome() 40 | { 41 | int fontId = QFontDatabase::addApplicationFont(":/font/fontawesome-webfont.ttf"); 42 | if(fontId == -1) { qWarning() << "Error: failed to load FontAwesome font"; } 43 | } 44 | 45 | void registerTypes() 46 | { 47 | // const char *uri = "QMLBootstrap"; 48 | // const int major = 1, minor = 0; 49 | 50 | setupFaIcons(); 51 | setupProperties(); 52 | customize(); 53 | engine->rootContext()->setContextProperty(QLatin1String("faIcons"), m_faIcons); 54 | engine->rootContext()->setContextProperty(QLatin1String("bs"), m_properties); 55 | 56 | QFile fragFile1(":/qml/Components/RoundedImage.frag"); 57 | if(fragFile1.open(QIODevice::ReadOnly)) { 58 | QTextStream in(&fragFile1); 59 | engine->rootContext()->setContextProperty(QLatin1String("roundedImageFragShader"), in.readAll()); 60 | fragFile1.close(); 61 | } 62 | QFile fragFile2(":/qml/Components/ImageScope.frag"); 63 | if(fragFile2.open(QIODevice::ReadOnly)) { 64 | QTextStream in(&fragFile2); 65 | engine->rootContext()->setContextProperty(QLatin1String("imageScopeFragShader"), in.readAll()); 66 | fragFile2.close(); 67 | } 68 | } 69 | 70 | int main(int argc, char *argv[]) 71 | { 72 | // QApplication app(argc, argv); 73 | app = new QApplication(argc,argv); 74 | app->setOrganizationName("YourOrganizationName"); 75 | app->setApplicationName("YourAppName"); 76 | 77 | // QQmlApplicationEngine engine; 78 | engine = new QQmlApplicationEngine(); 79 | 80 | setupDpUnit(); 81 | setupFontAwesome(); 82 | registerTypes(); 83 | 84 | qDebug() << "OfflineStoragePath: " << engine->offlineStoragePath(); 85 | 86 | // qmlファイルをロード 87 | engine->load(QUrl("qrc:/qml/main.qml")); 88 | 89 | QObject *topLevel = engine->rootObjects().value(0); 90 | QQuickWindow *window = qobject_cast(topLevel); 91 | if ( !window ) { 92 | qWarning("Error: Your root item has to be a Window."); 93 | return -1; 94 | } 95 | window->show(); 96 | return app->exec(); 97 | } 98 | -------------------------------------------------------------------------------- /qml/Components/Input.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* Input - Bootstrap style oneline text input form 4 | * \property string size 5 | * Specify bootstrap size name. 6 | * (large, base, small) 7 | * note: height is settled by this property. 8 | * \property bool boldFont 9 | * \property bool enabled 10 | * When it is false, form becomes uneditable 11 | * and be slightly different look. 12 | * \property bool round 13 | * Whether form should have rounded corner. 14 | * \property string text 15 | * \property string placeHolderText 16 | * \property bool readOnly 17 | * 18 | * \qml 19 | * Input { 20 | * width: parent.width 21 | * size: "large" 22 | * placeHolderText: "Input name" 23 | * } 24 | * \endqml 25 | */ 26 | Item { 27 | id: input 28 | 29 | // TODO implement type 30 | property string type: "text" 31 | property string size: "base" 32 | property string placeHolderText: "" 33 | property bool round: true 34 | property bool boldFont: false 35 | // TODO implement 36 | readonly property string validationStates: "success" 37 | 38 | // property alias 39 | property alias text: textInput.text 40 | property alias readOnly: textInput.readOnly 41 | property alias _textInput: textInput 42 | 43 | // signal 44 | signal accepted() 45 | 46 | height: implicitHeight 47 | implicitWidth: ((inputRect.border.width + bs["padding-%1-horizontal".arg(input.size)]) * 2 + textInput.height)*dp 48 | implicitHeight: ((inputRect.border.width + bs["padding-%1-vertical".arg(input.size)]) * 2 + textInput.height)*dp 49 | 50 | Rectangle { 51 | id: inputRect 52 | anchors.fill: parent 53 | radius: input.round ? bs["input-border-radius"]*dp : 0 54 | color: enabled ? bs["input-bg"] : bs["input-bg-disabled"] 55 | border.width: 1*dp 56 | border.color: textInput.focus ? bs["input-border-focus"] 57 | : bs["input-border"] 58 | 59 | Rectangle { 60 | id: rectShadow 61 | anchors { 62 | top: parent.top; topMargin: parent.border.width 63 | horizontalCenter: parent.horizontalCenter 64 | } 65 | width: parent.width - parent.border.width * 2 66 | height: 3*dp 67 | radius: parent.radius 68 | visible: true 69 | gradient: Gradient { 70 | GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0.25) } 71 | GradientStop { position: 1.0; color: "transparent" } 72 | } 73 | } 74 | 75 | Text { 76 | id: placeHolder 77 | clip: true 78 | anchors.centerIn: parent 79 | width: parent.width - (parent.border.width + bs["padding-%1-horizontal".arg(input.size)]*dp) * 2 80 | height: implicitHeight 81 | color: bs["input-color-placeholder"] 82 | text: textInput.text === "" ? placeHolderText : "" 83 | font.pixelSize: bs["font-size-%1".arg(input.size)]*dp 84 | font.bold: input.boldFont 85 | } 86 | 87 | // TODO flickable 88 | TextInput { 89 | id: textInput 90 | clip: true 91 | anchors.centerIn: parent 92 | width: parent.width - (parent.border.width + bs["padding-%1-horizontal".arg(input.size)]*dp) * 2 93 | height: implicitHeight 94 | color: bs["input-color"] 95 | text: "" 96 | font.pixelSize: bs["font-size-%1".arg(input.size)]*dp 97 | font.bold: input.boldFont 98 | onAccepted: input.accepted() 99 | // TODO cursor 100 | } 101 | 102 | // in order only to set mouse cursor to Ibeam 103 | MouseArea { 104 | anchors.fill: parent 105 | cursorShape: Qt.IBeamCursor 106 | acceptedButtons: Qt.NoButton 107 | } 108 | 109 | Behavior on border.color { ColorAnimation { duration: 200 } } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /qml/Components/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import QtQuick.Layouts 1.1 3 | 4 | /* Button - Bootstrap style button 5 | * \property string option 6 | * Specify bootstrap option name. 7 | * (ex. default, primary, success) 8 | * \property string faIcon 9 | * Specify FontAwesome icon's name. 10 | * \property string size 11 | * Specify bootstrap size name. 12 | * (large, base, small, xsmall) 13 | * note: width and height is settled by this property. 14 | * \property bool boldFont 15 | * \property bool enabled 16 | * When it is true, button becomes unclickable. 17 | * \property bool round 18 | * Whether button should have rounded corner. 19 | * \property string text 20 | * \property readonly pressed 21 | * 22 | * \signal clicked() 23 | * \signal doubleClicked() 24 | * \signal pressAndHold() 25 | * 26 | * \qml 27 | * Button { 28 | * option: "info" 29 | * faIcon: "fa-github" 30 | * size: "large" 31 | * text: "Github" 32 | * } 33 | * \endqml 34 | */ 35 | Item { 36 | id: btn 37 | property string option: "default" 38 | property string size: "base" 39 | property string text: "" 40 | property bool round: true 41 | property alias faIcon: faText.faIcon 42 | property bool boldFont: false 43 | readonly property alias pressed: mouse.pressed 44 | 45 | signal clicked() 46 | signal doubleClicked() 47 | signal pressAndHold() 48 | 49 | width: implicitWidth; height: implicitHeight 50 | implicitWidth: (2 + bs["padding-%1-horizontal".arg(btn.size)] * 2 + textRow.width)*dp 51 | implicitHeight: (2 + bs["padding-%1-vertical".arg(btn.size)] * 2 + textRow.height)*dp 52 | 53 | Rectangle { 54 | id: btnRect 55 | anchors.fill: parent 56 | color: mouse.containsMouse ? Qt.darker(bs["btn-%1-bg".arg(btn.option)], 1.1) 57 | : bs["btn-%1-bg".arg(btn.option)] 58 | 59 | opacity: btn.enabled ? 1 : 0.65 60 | border { 61 | color: mouse.containsMouse ? Qt.darker(bs["btn-%1-border".arg(btn.option)], 1.1) 62 | : bs["btn-%1-border".arg(btn.option)] 63 | width: 1*dp 64 | } 65 | radius: btn.round ? bs["border-radius-%1".arg(btn.size)] : 0 66 | 67 | Rectangle { 68 | id: rectShadow 69 | anchors.centerIn: parent 70 | width: parent.width - parent.border.width * 2 71 | height: parent.height - parent.border.width * 2 72 | radius: parent.radius 73 | visible: mouse.pressed && mouse.containsMouse 74 | gradient: Gradient { 75 | GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0.25) } 76 | GradientStop { position: 0.2; color: "transparent" } 77 | GradientStop { position: 1.0; color: "transparent" } 78 | } 79 | } 80 | 81 | RowLayout { 82 | id: textRow 83 | anchors.centerIn: parent 84 | width: faText.implicitWidth + spacing + btnText.implicitWidth 85 | height: btnText.implicitHeight 86 | spacing: faText.implicitWidth !== 0 ? 3*dp : 0 87 | FontAwesomeIcon { 88 | id: faText 89 | Layout.alignment: Qt.AlignVCenter 90 | size: btn.size 91 | boldFont: btn.boldFont 92 | color: bs["btn-%1-color".arg(btn.option)] 93 | } 94 | Text { 95 | id: btnText 96 | text: btn.text 97 | font.pixelSize: bs["font-size-%1".arg(btn.size)]*dp 98 | font.bold: btn.boldFont 99 | color: bs["btn-%1-color".arg(btn.option)] 100 | } 101 | } 102 | 103 | MouseArea { 104 | id: mouse 105 | anchors.fill: parent 106 | hoverEnabled: true 107 | cursorShape: Qt.PointingHandCursor 108 | onClicked: btn.clicked() 109 | onDoubleClicked: btn.doubleClicked() 110 | onPressAndHold: btn.pressAndHold() 111 | } 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /qml/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import QtQuick.Controls 1.1 as Controls 3 | import "Components" 4 | 5 | Controls.ApplicationWindow { 6 | id: mainWindow 7 | title: qsTr("Hello QML Bootstrap!") 8 | 9 | width: 720*dp ; height: 480*dp 10 | 11 | Rectangle { 12 | anchors.fill: parent 13 | color: bs["body-bg"] 14 | 15 | // FontAwesomeIcon { 16 | // anchors.centerIn: parent 17 | // faIcon: "fa-github" 18 | // } 19 | 20 | Column { 21 | anchors.centerIn: parent 22 | spacing: 10*dp 23 | Button { 24 | size: "large" 25 | option: "info" 26 | faIcon: "fa-github" 27 | boldFont: true 28 | text: "Hello QML Bootstrap!" 29 | onClicked: Qt.quit() 30 | // round: false 31 | // enabled: false 32 | } 33 | 34 | Row { 35 | spacing: 5*dp 36 | Button { 37 | // faIcon: "fa-github" 38 | // faIcon: "fa-trash-o" 39 | size: "large" 40 | option: "default" 41 | text: "Default" 42 | } 43 | Button { 44 | option: "primary" 45 | text: "Primaty" 46 | } 47 | Button { 48 | size: "small" 49 | option: "success" 50 | text: "Success" 51 | } 52 | Button { 53 | size: "xsmall" 54 | option: "info" 55 | text: "Info" 56 | } 57 | } 58 | 59 | Input { 60 | width: 300*dp; 61 | placeHolderText: "Input" 62 | enabled: false 63 | } 64 | 65 | TextArea { 66 | width: 300*dp 67 | placeHolderText: "TextArea" 68 | row: 3 69 | // enabled: false 70 | } 71 | 72 | CheckBox { 73 | text: "CheckBox" 74 | enabled: false 75 | } 76 | 77 | Row { 78 | spacing: 10*dp 79 | RadioGroup { id: radioGroup } 80 | Radio { text: "Radio1"; group: radioGroup } 81 | Radio { text: "Radio2"; checked: true; group: radioGroup } 82 | Radio { text: "Radio3"; group: radioGroup } 83 | Radio { text: "Radio4"; group: radioGroup } 84 | } 85 | 86 | Row { 87 | spacing: 30*dp 88 | Thumbnail { 89 | id: sampleImage 90 | width: sourceSize.width; height: sourceSize.height 91 | source: "file:///home/yuntan/Download/sample.jpg" 92 | // round: false 93 | } 94 | Rectangle { 95 | width: sampleImage.width; height: sampleImage.height 96 | color: "#999" 97 | RoundedImage { 98 | id: imageShape1 99 | anchors.fill: parent 100 | radius: height / 2 101 | source: sampleImage.source 102 | Rectangle { 103 | width: imageShape2.width; height: imageShape2.height 104 | x: imageShape2.scopeX; y: imageShape2.scopeY 105 | radius: imageShape2.radius; opacity: 0.5 106 | } 107 | } 108 | } 109 | ImageScope { 110 | id: imageShape2 111 | width: 100; height: 100; radius: height / 2 112 | scopeX: 30; scopeY: 20 113 | y: scopeY 114 | source: sampleImage.source 115 | } 116 | // RoundedThumbnail { 117 | // source: sampleImage.source; radius: 30 118 | // } 119 | } 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /qml/Components/TextArea.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | /* TextArea - Bootstrap style text input area form 4 | * \property string size 5 | * Specify bootstrap size name. 6 | * (large, base, small) 7 | * note: height is settled by this property. 8 | * \property int row 9 | * number of rows 10 | * \property bool boldFont 11 | * \property bool enabled 12 | * When it is false, form becomes uneditable 13 | * and be slightly different look. 14 | * \property bool round 15 | * Whether form should have rounded corner. 16 | * \property string text 17 | * \property string placeHolderText 18 | * \property bool readOnly 19 | * 20 | * \qml 21 | * TextArea { 22 | * width: parent.width 23 | * size: "large" 24 | * row: 3 25 | * placeHolderText: "Input name" 26 | * } 27 | * \endqml 28 | */ 29 | Item { 30 | id: textArea 31 | 32 | property string size: "base" 33 | property int row: 3 34 | property string placeHolderText: "" 35 | property bool round: true 36 | property bool boldFont: false 37 | 38 | // property alias 39 | property alias text: textEdit.text 40 | property alias readOnly: textEdit.readOnly 41 | property alias _textEdit: textEdit 42 | 43 | height: implicitHeight 44 | implicitHeight: ((areaRect.border.width + bs["padding-%1-vertical".arg(textArea.size)]) * 2 45 | + placeHolder.implicitHeight * row)*dp 46 | 47 | Rectangle { 48 | id: areaRect 49 | anchors.fill: parent 50 | radius: textArea.round ? bs["input-border-radius"]*dp : 0 51 | color: enabled ? bs["input-bg"] : bs["input-bg-disabled"] 52 | border.width: 1*dp 53 | border.color: textEdit.focus ? bs["input-border-focus"] 54 | : bs["input-border"] 55 | 56 | Rectangle { 57 | id: rectShadow 58 | anchors { 59 | top: parent.top; topMargin: parent.border.width 60 | horizontalCenter: parent.horizontalCenter 61 | } 62 | width: parent.width - parent.border.width * 2 63 | height: 3*dp 64 | radius: parent.radius 65 | visible: true 66 | gradient: Gradient { 67 | GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0.25) } 68 | GradientStop { position: 1.0; color: "transparent" } 69 | } 70 | } 71 | 72 | Text { 73 | id: placeHolder 74 | clip: true 75 | anchors { 76 | top: parent.top; topMargin: parent.border.width + bs["padding-%1-vertical".arg(textArea.size)]*dp 77 | horizontalCenter: parent.horizontalCenter 78 | } 79 | width: parent.width - (parent.border.width + bs["padding-%1-horizontal".arg(textArea.size)]*dp) * 2 80 | height: implicitHeight 81 | color: bs["input-color-placeholder"] 82 | text: textEdit.text === "" ? placeHolderText : "" 83 | font.pixelSize: bs["font-size-%1".arg(textArea.size)]*dp 84 | font.bold: textArea.boldFont 85 | } 86 | 87 | Flickable { 88 | id: flick 89 | clip: true 90 | anchors.centerIn: parent 91 | width: parent.width - (parent.border.width + bs["padding-%1-horizontal".arg(textArea.size)]*dp) * 2 92 | height: parent.height - (parent.border.width + bs["padding-%1-vertical".arg(textArea.size)]*dp) * 2 93 | contentWidth: width; contentHeight: textEdit.height 94 | flickableDirection: Flickable.VerticalFlick 95 | 96 | function ensureVisible(r) { 97 | if (contentY >= r.y) { contentY = r.y } 98 | else if (contentY+height <= r.y+r.height) { contentY = r.y+r.height-height } 99 | } 100 | 101 | TextEdit { 102 | id: textEdit 103 | clip: true 104 | anchors.centerIn: parent 105 | width: parent.width 106 | height: implicitHeight 107 | color: bs["input-color"] 108 | text: "" 109 | font.pixelSize: bs["font-size-%1".arg(textArea.size)]*dp 110 | font.bold: textArea.boldFont 111 | wrapMode: TextEdit.Wrap 112 | onCursorRectangleChanged: flick.ensureVisible(cursorRectangle) 113 | // TODO cursor 114 | } 115 | } 116 | 117 | // in order only to set mouse cursor to Ibeam 118 | MouseArea { 119 | anchors.fill: parent 120 | cursorShape: Qt.IBeamCursor 121 | acceptedButtons: Qt.NoButton 122 | // TODO focus on click 123 | } 124 | 125 | Behavior on border.color { ColorAnimation { duration: 200 } } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/bootstrap/properties.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | #include "properties.h" 6 | 7 | QQmlPropertyMap *m_faIcons; 8 | QQmlPropertyMap *m_properties; 9 | 10 | // Override or add property 11 | void customize() 12 | { 13 | 14 | } 15 | 16 | void setupFaIcons() 17 | { 18 | m_faIcons = new QQmlPropertyMap(); 19 | 20 | ADD_ICON(fa-glass, \uf000) 21 | ADD_ICON(fa-glass, \uf000) 22 | ADD_ICON(fa-music, \uf001) 23 | ADD_ICON(fa-search, \uf002) 24 | ADD_ICON(fa-envelope-o, \uf003) 25 | ADD_ICON(fa-heart, \uf004) 26 | ADD_ICON(fa-star, \uf005) 27 | ADD_ICON(fa-star-o, \uf006) 28 | ADD_ICON(fa-user, \uf007) 29 | ADD_ICON(fa-film, \uf008) 30 | ADD_ICON(fa-th-large, \uf009) 31 | ADD_ICON(fa-th, \uf00a) 32 | ADD_ICON(fa-th-list, \uf00b) 33 | ADD_ICON(fa-check, \uf00c) 34 | ADD_ICON(fa-times, \uf00d) 35 | ADD_ICON(fa-search-plus, \uf00e) 36 | ADD_ICON(fa-search-minus, \uf010) 37 | ADD_ICON(fa-power-off, \uf011) 38 | ADD_ICON(fa-signal, \uf012) 39 | ADD_ICON(fa-cog, \uf013) 40 | ADD_ICON(fa-trash-o, \uf014) 41 | ADD_ICON(fa-home, \uf015) 42 | ADD_ICON(fa-file-o, \uf016) 43 | ADD_ICON(fa-clock-o, \uf017) 44 | ADD_ICON(fa-road, \uf018) 45 | ADD_ICON(fa-download, \uf019) 46 | ADD_ICON(fa-arrow-circle-o-down, \uf01a) 47 | ADD_ICON(fa-arrow-circle-o-up, \uf01b) 48 | ADD_ICON(fa-inbox, \uf01c) 49 | ADD_ICON(fa-play-circle-o, \uf01d) 50 | ADD_ICON(fa-repeat, \uf01e) 51 | ADD_ICON(fa-refresh, \uf021) 52 | ADD_ICON(fa-list-alt, \uf022) 53 | ADD_ICON(fa-lock, \uf023) 54 | ADD_ICON(fa-flag, \uf024) 55 | ADD_ICON(fa-headphones, \uf025) 56 | ADD_ICON(fa-volume-off, \uf026) 57 | ADD_ICON(fa-volume-down, \uf027) 58 | ADD_ICON(fa-volume-up, \uf028) 59 | ADD_ICON(fa-qrcode, \uf029) 60 | ADD_ICON(fa-barcode, \uf02a) 61 | ADD_ICON(fa-tag, \uf02b) 62 | ADD_ICON(fa-tags, \uf02c) 63 | ADD_ICON(fa-book, \uf02d) 64 | ADD_ICON(fa-bookmark, \uf02e) 65 | ADD_ICON(fa-print, \uf02f) 66 | ADD_ICON(fa-camera, \uf030) 67 | ADD_ICON(fa-font, \uf031) 68 | ADD_ICON(fa-bold, \uf032) 69 | ADD_ICON(fa-italic, \uf033) 70 | ADD_ICON(fa-text-height, \uf034) 71 | ADD_ICON(fa-text-width, \uf035) 72 | ADD_ICON(fa-align-left, \uf036) 73 | ADD_ICON(fa-align-center, \uf037) 74 | ADD_ICON(fa-align-right, \uf038) 75 | ADD_ICON(fa-align-justify, \uf039) 76 | ADD_ICON(fa-list, \uf03a) 77 | ADD_ICON(fa-outdent, \uf03b) 78 | ADD_ICON(fa-indent, \uf03c) 79 | ADD_ICON(fa-video-camera, \uf03d) 80 | ADD_ICON(fa-picture-o, \uf03e) 81 | ADD_ICON(fa-pencil, \uf040) 82 | ADD_ICON(fa-map-marker, \uf041) 83 | ADD_ICON(fa-adjust, \uf042) 84 | ADD_ICON(fa-tint, \uf043) 85 | ADD_ICON(fa-pencil-square-o, \uf044) 86 | ADD_ICON(fa-share-square-o, \uf045) 87 | ADD_ICON(fa-check-square-o, \uf046) 88 | ADD_ICON(fa-move, \uf047) 89 | ADD_ICON(fa-step-backward, \uf048) 90 | ADD_ICON(fa-fast-backward, \uf049) 91 | ADD_ICON(fa-backward, \uf04a) 92 | ADD_ICON(fa-play, \uf04b) 93 | ADD_ICON(fa-pause, \uf04c) 94 | ADD_ICON(fa-stop, \uf04d) 95 | ADD_ICON(fa-forward, \uf04e) 96 | ADD_ICON(fa-fast-forward, \uf050) 97 | ADD_ICON(fa-step-forward, \uf051) 98 | ADD_ICON(fa-eject, \uf052) 99 | ADD_ICON(fa-chevron-left, \uf053) 100 | ADD_ICON(fa-chevron-right, \uf054) 101 | ADD_ICON(fa-plus-circle, \uf055) 102 | ADD_ICON(fa-minus-circle, \uf056) 103 | ADD_ICON(fa-times-circle, \uf057) 104 | ADD_ICON(fa-check-circle, \uf058) 105 | ADD_ICON(fa-question-circle, \uf059) 106 | ADD_ICON(fa-info-circle, \uf05a) 107 | ADD_ICON(fa-crosshairs, \uf05b) 108 | ADD_ICON(fa-times-circle-o, \uf05c) 109 | ADD_ICON(fa-check-circle-o, \uf05d) 110 | ADD_ICON(fa-ban, \uf05e) 111 | ADD_ICON(fa-arrow-left, \uf060) 112 | ADD_ICON(fa-arrow-right, \uf061) 113 | ADD_ICON(fa-arrow-up, \uf062) 114 | ADD_ICON(fa-arrow-down, \uf063) 115 | ADD_ICON(fa-share, \uf064) 116 | ADD_ICON(fa-resize-full, \uf065) 117 | ADD_ICON(fa-resize-small, \uf066) 118 | ADD_ICON(fa-plus, \uf067) 119 | ADD_ICON(fa-minus, \uf068) 120 | ADD_ICON(fa-asterisk, \uf069) 121 | ADD_ICON(fa-exclamation-circle, \uf06a) 122 | ADD_ICON(fa-gift, \uf06b) 123 | ADD_ICON(fa-leaf, \uf06c) 124 | ADD_ICON(fa-fire, \uf06d) 125 | ADD_ICON(fa-eye, \uf06e) 126 | ADD_ICON(fa-eye-slash, \uf070) 127 | ADD_ICON(fa-exclamation-triangle, \uf071) 128 | ADD_ICON(fa-plane, \uf072) 129 | ADD_ICON(fa-calendar, \uf073) 130 | ADD_ICON(fa-random, \uf074) 131 | ADD_ICON(fa-comment, \uf075) 132 | ADD_ICON(fa-magnet, \uf076) 133 | ADD_ICON(fa-chevron-up, \uf077) 134 | ADD_ICON(fa-chevron-down, \uf078) 135 | ADD_ICON(fa-retweet, \uf079) 136 | ADD_ICON(fa-shopping-cart, \uf07a) 137 | ADD_ICON(fa-folder, \uf07b) 138 | ADD_ICON(fa-folder-open, \uf07c) 139 | ADD_ICON(fa-resize-vertical, \uf07d) 140 | ADD_ICON(fa-resize-horizontal, \uf07e) 141 | ADD_ICON(fa-bar-chart-o, \uf080) 142 | ADD_ICON(fa-twitter-square, \uf081) 143 | ADD_ICON(fa-facebook-square, \uf082) 144 | ADD_ICON(fa-camera-retro, \uf083) 145 | ADD_ICON(fa-key, \uf084) 146 | ADD_ICON(fa-cogs, \uf085) 147 | ADD_ICON(fa-comments, \uf086) 148 | ADD_ICON(fa-thumbs-o-up, \uf087) 149 | ADD_ICON(fa-thumbs-o-down, \uf088) 150 | ADD_ICON(fa-star-half, \uf089) 151 | ADD_ICON(fa-heart-o, \uf08a) 152 | ADD_ICON(fa-sign-out, \uf08b) 153 | ADD_ICON(fa-linkedin-square, \uf08c) 154 | ADD_ICON(fa-thumb-tack, \uf08d) 155 | ADD_ICON(fa-external-link, \uf08e) 156 | ADD_ICON(fa-sign-in, \uf090) 157 | ADD_ICON(fa-trophy, \uf091) 158 | ADD_ICON(fa-github-square, \uf092) 159 | ADD_ICON(fa-upload, \uf093) 160 | ADD_ICON(fa-lemon-o, \uf094) 161 | ADD_ICON(fa-phone, \uf095) 162 | ADD_ICON(fa-square-o, \uf096) 163 | ADD_ICON(fa-bookmark-o, \uf097) 164 | ADD_ICON(fa-phone-square, \uf098) 165 | ADD_ICON(fa-twitter, \uf099) 166 | ADD_ICON(fa-facebook, \uf09a) 167 | ADD_ICON(fa-github, \uf09b) 168 | ADD_ICON(fa-unlock, \uf09c) 169 | ADD_ICON(fa-credit-card, \uf09d) 170 | ADD_ICON(fa-rss, \uf09e) 171 | ADD_ICON(fa-hdd, \uf0a0) 172 | ADD_ICON(fa-bullhorn, \uf0a1) 173 | ADD_ICON(fa-bell, \uf0f3) 174 | ADD_ICON(fa-certificate, \uf0a3) 175 | ADD_ICON(fa-hand-o-right, \uf0a4) 176 | ADD_ICON(fa-hand-o-left, \uf0a5) 177 | ADD_ICON(fa-hand-o-up, \uf0a6) 178 | ADD_ICON(fa-hand-o-down, \uf0a7) 179 | ADD_ICON(fa-arrow-circle-left, \uf0a8) 180 | ADD_ICON(fa-arrow-circle-right, \uf0a9) 181 | ADD_ICON(fa-arrow-circle-up, \uf0aa) 182 | ADD_ICON(fa-arrow-circle-down, \uf0ab) 183 | ADD_ICON(fa-globe, \uf0ac) 184 | ADD_ICON(fa-wrench, \uf0ad) 185 | ADD_ICON(fa-tasks, \uf0ae) 186 | ADD_ICON(fa-filter, \uf0b0) 187 | ADD_ICON(fa-briefcase, \uf0b1) 188 | ADD_ICON(fa-fullscreen, \uf0b2) 189 | ADD_ICON(fa-group, \uf0c0) 190 | ADD_ICON(fa-link, \uf0c1) 191 | ADD_ICON(fa-cloud, \uf0c2) 192 | ADD_ICON(fa-flask, \uf0c3) 193 | ADD_ICON(fa-scissors, \uf0c4) 194 | ADD_ICON(fa-files-o, \uf0c5) 195 | ADD_ICON(fa-paperclip, \uf0c6) 196 | ADD_ICON(fa-floppy-o, \uf0c7) 197 | ADD_ICON(fa-square, \uf0c8) 198 | ADD_ICON(fa-reorder, \uf0c9) 199 | ADD_ICON(fa-list-ul, \uf0ca) 200 | ADD_ICON(fa-list-ol, \uf0cb) 201 | ADD_ICON(fa-strikethrough, \uf0cc) 202 | ADD_ICON(fa-underline, \uf0cd) 203 | ADD_ICON(fa-table, \uf0ce) 204 | ADD_ICON(fa-magic, \uf0d0) 205 | ADD_ICON(fa-truck, \uf0d1) 206 | ADD_ICON(fa-pinterest, \uf0d2) 207 | ADD_ICON(fa-pinterest-square, \uf0d3) 208 | ADD_ICON(fa-google-plus-square, \uf0d4) 209 | ADD_ICON(fa-google-plus, \uf0d5) 210 | ADD_ICON(fa-money, \uf0d6) 211 | ADD_ICON(fa-caret-down, \uf0d7) 212 | ADD_ICON(fa-caret-up, \uf0d8) 213 | ADD_ICON(fa-caret-left, \uf0d9) 214 | ADD_ICON(fa-caret-right, \uf0da) 215 | ADD_ICON(fa-columns, \uf0db) 216 | ADD_ICON(fa-sort, \uf0dc) 217 | ADD_ICON(fa-sort-asc, \uf0dd) 218 | ADD_ICON(fa-sort-desc, \uf0de) 219 | ADD_ICON(fa-envelope, \uf0e0) 220 | ADD_ICON(fa-linkedin, \uf0e1) 221 | ADD_ICON(fa-undo, \uf0e2) 222 | ADD_ICON(fa-gavel, \uf0e3) 223 | ADD_ICON(fa-tachometer, \uf0e4) 224 | ADD_ICON(fa-comment-o, \uf0e5) 225 | ADD_ICON(fa-comments-o, \uf0e6) 226 | ADD_ICON(fa-bolt, \uf0e7) 227 | ADD_ICON(fa-sitemap, \uf0e8) 228 | ADD_ICON(fa-umbrella, \uf0e9) 229 | ADD_ICON(fa-clipboard, \uf0ea) 230 | ADD_ICON(fa-lightbulb-o, \uf0eb) 231 | ADD_ICON(fa-exchange, \uf0ec) 232 | ADD_ICON(fa-cloud-download, \uf0ed) 233 | ADD_ICON(fa-cloud-upload, \uf0ee) 234 | ADD_ICON(fa-user-md, \uf0f0) 235 | ADD_ICON(fa-stethoscope, \uf0f1) 236 | ADD_ICON(fa-suitcase, \uf0f2) 237 | ADD_ICON(fa-bell-o, \uf0a2) 238 | ADD_ICON(fa-coffee, \uf0f4) 239 | ADD_ICON(fa-cutlery, \uf0f5) 240 | ADD_ICON(fa-file-text-o, \uf0f6) 241 | ADD_ICON(fa-building, \uf0f7) 242 | ADD_ICON(fa-hospital, \uf0f8) 243 | ADD_ICON(fa-ambulance, \uf0f9) 244 | ADD_ICON(fa-medkit, \uf0fa) 245 | ADD_ICON(fa-fighter-jet, \uf0fb) 246 | ADD_ICON(fa-beer, \uf0fc) 247 | ADD_ICON(fa-h-square, \uf0fd) 248 | ADD_ICON(fa-plus-square, \uf0fe) 249 | ADD_ICON(fa-angle-double-left, \uf100) 250 | ADD_ICON(fa-angle-double-right, \uf101) 251 | ADD_ICON(fa-angle-double-up, \uf102) 252 | ADD_ICON(fa-angle-double-down, \uf103) 253 | ADD_ICON(fa-angle-left, \uf104) 254 | ADD_ICON(fa-angle-right, \uf105) 255 | ADD_ICON(fa-angle-up, \uf106) 256 | ADD_ICON(fa-angle-down, \uf107) 257 | ADD_ICON(fa-desktop, \uf108) 258 | ADD_ICON(fa-laptop, \uf109) 259 | ADD_ICON(fa-tablet, \uf10a) 260 | ADD_ICON(fa-mobile, \uf10b) 261 | ADD_ICON(fa-circle-o, \uf10c) 262 | ADD_ICON(fa-quote-left, \uf10d) 263 | ADD_ICON(fa-quote-right, \uf10e) 264 | ADD_ICON(fa-spinner, \uf110) 265 | ADD_ICON(fa-circle, \uf111) 266 | ADD_ICON(fa-reply, \uf112) 267 | ADD_ICON(fa-github-alt, \uf113) 268 | ADD_ICON(fa-folder-o, \uf114) 269 | ADD_ICON(fa-folder-open-o, \uf115) 270 | ADD_ICON(fa-expand-o, \uf116) 271 | ADD_ICON(fa-collapse-o, \uf117) 272 | ADD_ICON(fa-smile-o, \uf118) 273 | ADD_ICON(fa-frown-o, \uf119) 274 | ADD_ICON(fa-meh-o, \uf11a) 275 | ADD_ICON(fa-gamepad, \uf11b) 276 | ADD_ICON(fa-keyboard-o, \uf11c) 277 | ADD_ICON(fa-flag-o, \uf11d) 278 | ADD_ICON(fa-flag-checkered, \uf11e) 279 | ADD_ICON(fa-terminal, \uf120) 280 | ADD_ICON(fa-code, \uf121) 281 | ADD_ICON(fa-reply-all, \uf122) 282 | ADD_ICON(fa-mail-reply-all, \uf122) 283 | ADD_ICON(fa-star-half-o, \uf123) 284 | ADD_ICON(fa-location-arrow, \uf124) 285 | ADD_ICON(fa-crop, \uf125) 286 | ADD_ICON(fa-code-fork, \uf126) 287 | ADD_ICON(fa-chain-broken, \uf127) 288 | ADD_ICON(fa-question, \uf128) 289 | ADD_ICON(fa-info, \uf129) 290 | ADD_ICON(fa-exclamation, \uf12a) 291 | ADD_ICON(fa-superscript, \uf12b) 292 | ADD_ICON(fa-subscript, \uf12c) 293 | ADD_ICON(fa-eraser, \uf12d) 294 | ADD_ICON(fa-puzzle-piece, \uf12e) 295 | ADD_ICON(fa-microphone, \uf130) 296 | ADD_ICON(fa-microphone-slash, \uf131) 297 | ADD_ICON(fa-shield, \uf132) 298 | ADD_ICON(fa-calendar-o, \uf133) 299 | ADD_ICON(fa-fire-extinguisher, \uf134) 300 | ADD_ICON(fa-rocket, \uf135) 301 | ADD_ICON(fa-maxcdn, \uf136) 302 | ADD_ICON(fa-chevron-circle-left, \uf137) 303 | ADD_ICON(fa-chevron-circle-right, \uf138) 304 | ADD_ICON(fa-chevron-circle-up, \uf139) 305 | ADD_ICON(fa-chevron-circle-down, \uf13a) 306 | ADD_ICON(fa-html5, \uf13b) 307 | ADD_ICON(fa-css3, \uf13c) 308 | ADD_ICON(fa-anchor, \uf13d) 309 | ADD_ICON(fa-unlock-o, \uf13e) 310 | ADD_ICON(fa-bullseye, \uf140) 311 | ADD_ICON(fa-ellipsis-horizontal, \uf141) 312 | ADD_ICON(fa-ellipsis-vertical, \uf142) 313 | ADD_ICON(fa-rss-square, \uf143) 314 | ADD_ICON(fa-play-circle, \uf144) 315 | ADD_ICON(fa-ticket, \uf145) 316 | ADD_ICON(fa-minus-square, \uf146) 317 | ADD_ICON(fa-minus-square-o, \uf147) 318 | ADD_ICON(fa-level-up, \uf148) 319 | ADD_ICON(fa-level-down, \uf149) 320 | ADD_ICON(fa-check-square, \uf14a) 321 | ADD_ICON(fa-pencil-square, \uf14b) 322 | ADD_ICON(fa-external-link-square, \uf14c) 323 | ADD_ICON(fa-share-square, \uf14d) 324 | ADD_ICON(fa-compass, \uf14e) 325 | ADD_ICON(fa-caret-square-o-down, \uf150) 326 | ADD_ICON(fa-caret-square-o-up, \uf151) 327 | ADD_ICON(fa-caret-square-o-right, \uf152) 328 | ADD_ICON(fa-eur, \uf153) 329 | ADD_ICON(fa-gbp, \uf154) 330 | ADD_ICON(fa-usd, \uf155) 331 | ADD_ICON(fa-inr, \uf156) 332 | ADD_ICON(fa-jpy, \uf157) 333 | ADD_ICON(fa-rub, \uf158) 334 | ADD_ICON(fa-krw, \uf159) 335 | ADD_ICON(fa-btc, \uf15a) 336 | ADD_ICON(fa-file, \uf15b) 337 | ADD_ICON(fa-file-text, \uf15c) 338 | ADD_ICON(fa-sort-alpha-asc, \uf15d) 339 | ADD_ICON(fa-sort-alpha-desc, \uf15e) 340 | ADD_ICON(fa-sort-amount-asc, \uf160) 341 | ADD_ICON(fa-sort-amount-desc, \uf161) 342 | ADD_ICON(fa-sort-numeric-asc, \uf162) 343 | ADD_ICON(fa-sort-numeric-desc, \uf163) 344 | ADD_ICON(fa-thumbs-up, \uf164) 345 | ADD_ICON(fa-thumbs-down, \uf165) 346 | ADD_ICON(fa-youtube-square, \uf166) 347 | ADD_ICON(fa-youtube, \uf167) 348 | ADD_ICON(fa-xing, \uf168) 349 | ADD_ICON(fa-xing-square, \uf169) 350 | ADD_ICON(fa-youtube-play, \uf16a) 351 | ADD_ICON(fa-dropbox, \uf16b) 352 | ADD_ICON(fa-stack-overflow, \uf16c) 353 | ADD_ICON(fa-instagram, \uf16d) 354 | ADD_ICON(fa-flickr, \uf16e) 355 | ADD_ICON(fa-adn, \uf170) 356 | ADD_ICON(fa-bitbucket, \uf171) 357 | ADD_ICON(fa-bitbucket-square, \uf172) 358 | ADD_ICON(fa-tumblr, \uf173) 359 | ADD_ICON(fa-tumblr-square, \uf174) 360 | ADD_ICON(fa-long-arrow-down, \uf175) 361 | ADD_ICON(fa-long-arrow-up, \uf176) 362 | ADD_ICON(fa-long-arrow-left, \uf177) 363 | ADD_ICON(fa-long-arrow-right, \uf178) 364 | ADD_ICON(fa-apple, \uf179) 365 | ADD_ICON(fa-windows, \uf17a) 366 | ADD_ICON(fa-android, \uf17b) 367 | ADD_ICON(fa-linux, \uf17c) 368 | ADD_ICON(fa-dribbble, \uf17d) 369 | ADD_ICON(fa-skype, \uf17e) 370 | ADD_ICON(fa-foursquare, \uf180) 371 | ADD_ICON(fa-trello, \uf181) 372 | ADD_ICON(fa-female, \uf182) 373 | ADD_ICON(fa-male, \uf183) 374 | ADD_ICON(fa-gittip, \uf184) 375 | ADD_ICON(fa-sun-o, \uf185) 376 | ADD_ICON(fa-moon-o, \uf186) 377 | ADD_ICON(fa-archive, \uf187) 378 | ADD_ICON(fa-bug, \uf188) 379 | ADD_ICON(fa-vk, \uf189) 380 | ADD_ICON(fa-weibo, \uf18a) 381 | ADD_ICON(fa-renren, \uf18b) 382 | ADD_ICON(fa-pagelines, \uf18c) 383 | ADD_ICON(fa-stack-exchange, \uf18d) 384 | ADD_ICON(fa-arrow-circle-o-right, \uf18e) 385 | ADD_ICON(fa-arrow-circle-o-left, \uf190) 386 | ADD_ICON(fa-caret-square-o-left, \uf191) 387 | ADD_ICON(fa-dot-circle-o, \uf192) 388 | ADD_ICON(fa-wheelchair, \uf193) 389 | ADD_ICON(fa-vimeo-square, \uf194) 390 | ADD_ICON(fa-try, \uf195) 391 | ADD_ICON(fa-plus-square-o, \uf196) 392 | } 393 | 394 | QColor lighten(QColor color, uint amount) 395 | { 396 | 397 | int lightness = color.lightness() + 255 * amount / 100; 398 | if(lightness > 255) { lightness = 255; } 399 | return QColor::fromHsl(color.hue(), color.saturation(), lightness); 400 | } 401 | 402 | QColor darken(QColor color, uint amount) 403 | { 404 | int lightness = color.lightness() - 255 * amount / 100; 405 | if(lightness < 0) { lightness = 0; } 406 | return QColor::fromHsl(color.hue(), color.saturation(), lightness); 407 | } 408 | 409 | void setupProperties() 410 | { 411 | m_properties = new QQmlPropertyMap(); 412 | 413 | // == Colors == 414 | // Gray and brand colors 415 | auto black = QColor("#000"); 416 | SET_PROPERTY(gray-darker, lighten(black, 14)) // #222 417 | SET_PROPERTY(gray-dark, lighten(black, 20)) // #333 418 | SET_PROPERTY(gray, lighten(black, 34)) // #555 419 | SET_PROPERTY(gray-light, lighten(black, 60)) // #999 420 | SET_PROPERTY(gray-lighter, lighten(black, 94)) // #eee 421 | 422 | SET_PROPERTY(brand-primary, "#428bca") 423 | SET_PROPERTY(brand-success, "#5cb85c") 424 | SET_PROPERTY(brand-info, "#5bc0de") 425 | SET_PROPERTY(brand-warning, "#f0ad4e") 426 | SET_PROPERTY(brand-danger, "#d9534f") 427 | 428 | 429 | // == Scaffolding == 430 | // Settings for some of the most global styles. 431 | SET_PROPERTY(body-bg, "#fff") // Background color 432 | SET_PROPERTY_BY_ID(text-color, gray-dark) // Global text color 433 | SET_PROPERTY_BY_ID(link-color, brand-primary) // Global textual link color 434 | SET_PROPERTY(link-hover-color, darken(GET_COLOR(link-color), 15)) // Link hover color 435 | 436 | 437 | // == Typography == 438 | // Font, line-height, and color for body text, headings, and more. 439 | /* not used 440 | SET_PROPERTY(font-family-sans-serif, "\"Helvetica Neue\", Helvetica, Arial, sans-serif") 441 | SET_PROPERTY(font-family-serif, "Georgia, \"Times New Roman\", Times, serif") 442 | // Default monospace fonts for `

`, ``, and ``.
 443 |     SET_PROPERTY(font-family-monospace, "Menlo, Monaco, Consolas, \"Courier New\", monospace")
 444 |     SET_PROPERTY_BY_ID(font-family-base, font-family-sans-serif)
 445 |      */
 446 | 
 447 |     SET_PROPERTY(font-size-base, 14) // dp
 448 |     SET_PROPERTY(font-size-large, qCeil(GET_VALUE(font-size-base).toFloat() * 1.25f)) // 18dp
 449 |     SET_PROPERTY(font-size-small, qCeil(GET_VALUE(font-size-base).toFloat() * 0.85f)) // 12dp
 450 |     SET_PROPERTY(font-size-xsmall, qCeil(GET_VALUE(font-size-base).toFloat() * 0.85f)) // 12dp
 451 | 
 452 |     SET_PROPERTY(font-size-h1, qFloor(GET_VALUE(font-size-base).toFloat() * 2.6f)) // 36dp
 453 |     SET_PROPERTY(font-size-h2, qFloor(GET_VALUE(font-size-base).toFloat() * 2.15f)) // 30dp
 454 |     SET_PROPERTY(font-size-h3, qCeil(GET_VALUE(font-size-base).toFloat() * 1.7f)) // 24dp
 455 |     SET_PROPERTY(font-size-h4, qCeil(GET_VALUE(font-size-base).toFloat() * 1.25f)) // 18dp
 456 |     SET_PROPERTY_BY_ID(font-size-h5, font-size-base)
 457 |     SET_PROPERTY(font-size-h6, qCeil(GET_VALUE(font-size-base).toFloat() * 0.85f)) // 12dp
 458 | 
 459 |     /* not used
 460 |     // Unit-less `line-height` for use in components like buttons.
 461 |     SET_PROPERTY(line-height-base, 1.428571429f) // 20/14
 462 |     // Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 463 |     SET_PROPERTY(line-height-computed, qFloor((font-size-base * line-height-base))) // ~20px
 464 | 
 465 |     // By default, this inherits from the ``.
 466 |     SET_PROPERTY(headings-font-family, inherit)
 467 |     SET_PROPERTY(headings-font-weight, 500)
 468 |     SET_PROPERTY(headings-line-height, 1.1)
 469 |     SET_PROPERTY(headings-color, inherit)
 470 |      */
 471 | 
 472 | 
 473 |     /* needless
 474 |     // == Iconography ==
 475 |     // Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
 476 |     SET_PROPERTY(icon-font-path, "../fonts/")
 477 |     SET_PROPERTY(icon-font-name, "glyphicons-halflings-regular")
 478 |     SET_PROPERTY(icon-font-svg-id, "glyphicons_halflingsregular")
 479 |      */
 480 | 
 481 | 
 482 |     // == Components ==
 483 |     // Define common padding and border radius sizes and more.
 484 |     // Values based on 14px text.
 485 |     SET_PROPERTY(padding-base-vertical, 6)
 486 |     SET_PROPERTY(padding-base-horizontal, 12)
 487 | 
 488 |     SET_PROPERTY(padding-large-vertical, 10)
 489 |     SET_PROPERTY(padding-large-horizontal, 16)
 490 | 
 491 |     SET_PROPERTY(padding-small-vertical, 5)
 492 |     SET_PROPERTY(padding-small-horizontal, 10)
 493 | 
 494 |     SET_PROPERTY(padding-xsmall-vertical, 1)
 495 |     SET_PROPERTY(padding-xsmall-horizontal, 5)
 496 | 
 497 | //    SET_PROPERTY(line-height-large, 1.33)
 498 | //    SET_PROPERTY(line-height-small, 1.5)
 499 | 
 500 |     SET_PROPERTY(border-radius-base, 4)
 501 |     SET_PROPERTY(border-radius-large, 6)
 502 |     SET_PROPERTY(border-radius-small, 3)
 503 |     SET_PROPERTY(border-radius-xsmall, 3)
 504 | 
 505 |     // Global color for active items (e.g., navs or dropdowns).
 506 |     SET_PROPERTY(component-active-color, "#fff")
 507 |     // Global background color for active items (e.g., navs or dropdowns).
 508 |     SET_PROPERTY_BY_ID(component-active-bg, brand-primary)
 509 | 
 510 |     // Width of the `border` for generating carets that indicator dropdowns.
 511 |     SET_PROPERTY(caret-width-base, 4)
 512 |     SET_PROPERTY(caret-width-small, 4)
 513 |     SET_PROPERTY(caret-width-xsmall, 4)
 514 |     // Carets increase slightly in size for larger components.
 515 |     SET_PROPERTY(caret-width-large, 5)
 516 | 
 517 | 
 518 |     /*
 519 |     // == Tables ==
 520 |     // Customizes the table component with basic values, each used across all table variations.
 521 | 
 522 |     SET_PROPERTY(table-cell-padding, 8)
 523 |     // Padding for cells in `.table-condensed`.
 524 |     SET_PROPERTY(table-condensed-cell-padding, 5)
 525 | 
 526 |     // Default background color used for all tables.
 527 |     SET_PROPERTY(table-bg, transparent)
 528 |     // Background color used for `.table-striped`.
 529 |     SET_PROPERTY(table-bg-accent, #f9f9f9)
 530 |     // Background color used for `.table-hover`.
 531 |     SET_PROPERTY(table-bg-hover, #f5f5f5)
 532 |     SET_PROPERTY(table-bg-active, table-bg-hover)
 533 | 
 534 |     // Border color for table and cell borders.
 535 |     SET_PROPERTY(table-border-color, #ddd)
 536 |      */
 537 | 
 538 |     // == Buttons ==
 539 |     // For each of buttons, define text, background and border color.
 540 | //    SET_PROPERTY(btn-font-weight, normal)
 541 | 
 542 |     SET_PROPERTY(btn-default-color, "#333")
 543 |     SET_PROPERTY(btn-default-bg, "#fff")
 544 |     SET_PROPERTY(btn-default-border, "#ccc")
 545 | 
 546 |     SET_PROPERTY(btn-primary-color, "#fff")
 547 |     SET_PROPERTY_BY_ID(btn-primary-bg, brand-primary)
 548 |     SET_PROPERTY(btn-primary-border, darken(GET_COLOR(btn-primary-bg), 5))
 549 | 
 550 |     SET_PROPERTY(btn-success-color, "#fff")
 551 |     SET_PROPERTY_BY_ID(btn-success-bg, brand-success)
 552 |     SET_PROPERTY(btn-success-border, darken(GET_COLOR(btn-success-bg), 5))
 553 | 
 554 |     SET_PROPERTY(btn-info-color, "#fff")
 555 |     SET_PROPERTY_BY_ID(btn-info-bg, brand-info)
 556 |     SET_PROPERTY(btn-info-border, darken(GET_COLOR(btn-info-bg), 5))
 557 | 
 558 |     SET_PROPERTY(btn-warning-color, "#fff")
 559 |     SET_PROPERTY_BY_ID(btn-warning-bg, brand-warning)
 560 |     SET_PROPERTY(btn-warning-border, darken(GET_COLOR(btn-warning-bg), 5))
 561 | 
 562 |     SET_PROPERTY(btn-danger-color, "#fff")
 563 |     SET_PROPERTY_BY_ID(btn-danger-bg, brand-danger)
 564 |     SET_PROPERTY(btn-danger-border, darken(GET_COLOR(btn-danger-bg), 5))
 565 | 
 566 |     SET_PROPERTY_BY_ID(btn-link-disabled-color, gray-light)
 567 | 
 568 | 
 569 |     // == Forms ==
 570 |     SET_PROPERTY(input-bg, "#fff") // input background color
 571 |     SET_PROPERTY_BY_ID(input-bg-disabled, gray-lighter) // input disabled background color
 572 |     SET_PROPERTY_BY_ID(input-color, gray) // Text color for inputs
 573 |     SET_PROPERTY(input-border, "#ccc") // input border color
 574 |     SET_PROPERTY_BY_ID(input-border-radius, border-radius-base) // input border radius
 575 |     SET_PROPERTY(input-border-focus, "#66afe9") // Border color for inputs on focus
 576 | 
 577 |     SET_PROPERTY_BY_ID(input-color-placeholder, gray-light) // Placeholder text color
 578 | 
 579 |     /* needless
 580 |     // Default form-control height
 581 |     SET_PROPERTY(input-height-base, (line-height-computed + (padding-base-vertical * 2) + 2))
 582 |     // Large form-control height
 583 |     SET_PROPERTY(input-height-large, (qCeil(font-size-large * line-height-large) + (padding-large-vertical * 2) + 2))
 584 |     // Small form-control height
 585 |     SET_PROPERTY(input-height-small, (qFloor(font-size-small * line-height-small) + (padding-small-vertical * 2) + 2))
 586 |      */
 587 | 
 588 |     SET_PROPERTY_BY_ID(legend-color, gray-dark)
 589 |     SET_PROPERTY(legend-border-color, "#e5e5e5")
 590 | 
 591 |     // Background color for textual input addons
 592 |     SET_PROPERTY_BY_ID(input-group-addon-bg, gray-lighter)
 593 |     // Border color for textual input addons
 594 |     SET_PROPERTY_BY_ID(input-group-addon-border-color, input-border)
 595 | 
 596 | 
 597 |     // == Dropdowns ==
 598 |     // Dropdown menu container and contents.
 599 |     SET_PROPERTY(dropdown-bg, "#fff") // Background for the dropdown menu.
 600 |     SET_PROPERTY(dropdown-border, QColor(0, 0, 0, 38)) // Dropdown menu `border-color`.
 601 | //    SET_PROPERTY(dropdown-fallback-border, "#ccc") // Dropdown menu `border-color` for IE8.
 602 |     SET_PROPERTY(dropdown-divider-bg, "#e5e5e5") // Divider color for between dropdown items.
 603 | 
 604 |     SET_PROPERTY_BY_ID(dropdown-link-color, gray-dark) // Dropdown link text color.
 605 |     // Hover color for dropdown links.
 606 |     SET_PROPERTY(dropdown-link-hover-color, darken(GET_COLOR(gray-dark), 5))
 607 |     SET_PROPERTY(dropdown-link-hover-bg, "#f5f5f5") // Hover background for dropdown links.
 608 | 
 609 |     // Active dropdown menu item text color.
 610 |     SET_PROPERTY_BY_ID(dropdown-link-active-color, component-active-color)
 611 |     // Active dropdown menu item background color.
 612 |     SET_PROPERTY_BY_ID(dropdown-link-active-bg, component-active-bg)
 613 | 
 614 |     // Disabled dropdown menu item background color.
 615 |     SET_PROPERTY_BY_ID(dropdown-link-disabled-color, gray-light)
 616 | 
 617 |     // Text color for headers within dropdown menus.
 618 |     SET_PROPERTY_BY_ID(dropdown-header-color, gray-light)
 619 | 
 620 |     // Note, Deprecated dropdown-caret-color as of v3.1.0
 621 |     SET_PROPERTY(dropdown-caret-color, "#000")
 622 | 
 623 | 
 624 |     /*
 625 |     //-- Z-index master list
 626 |     //
 627 |     // Warning, Avoid customizing these values. They're used for a bird's eye view
 628 |     // of components dependent on the z-axis and are designed to all work together.
 629 |     //
 630 |     // Note, These variables are not generated into the Customizer.
 631 | 
 632 |     SET_PROPERTY(zindex-navbar, 1000)
 633 |     SET_PROPERTY(zindex-dropdown, 1000)
 634 |     SET_PROPERTY(zindex-popover, 1010)
 635 |     SET_PROPERTY(zindex-tooltip, 1030)
 636 |     SET_PROPERTY(zindex-navbar-fixed, 1030)
 637 |     SET_PROPERTY(zindex-modal-background, 1040)
 638 |     SET_PROPERTY(zindex-modal, 1050)
 639 | 
 640 | 
 641 |     //== Media queries breakpoints
 642 |     //
 643 |     // Define the breakpoints at which your layout will change, adapting to different screen sizes.
 644 | 
 645 |     // Extra small screen / phone
 646 |     // Note, Deprecated screen-xs and screen-phone as of v3.0.1
 647 |     SET_PROPERTY(screen-xs, 480px)
 648 |     SET_PROPERTY(screen-xs-min, screen-xs)
 649 |     SET_PROPERTY(screen-phone, screen-xs-min)
 650 | 
 651 |     // Small screen / tablet
 652 |     // Note, Deprecated screen-sm and screen-tablet as of v3.0.1
 653 |     SET_PROPERTY(screen-sm, 768px)
 654 |     SET_PROPERTY(screen-sm-min, screen-sm)
 655 |     SET_PROPERTY(screen-tablet, screen-sm-min)
 656 | 
 657 |     // Medium screen / desktop
 658 |     // Note, Deprecated screen-md and screen-desktop as of v3.0.1
 659 |     SET_PROPERTY(screen-md, 992px)
 660 |     SET_PROPERTY(screen-md-min, screen-md)
 661 |     SET_PROPERTY(screen-desktop, screen-md-min)
 662 | 
 663 |     // Large screen / wide desktop
 664 |     // Note, Deprecated screen-lg and screen-lg-desktop as of v3.0.1
 665 |     SET_PROPERTY(screen-lg, 1200px)
 666 |     SET_PROPERTY(screen-lg-min, screen-lg)
 667 |     SET_PROPERTY(screen-lg-desktop, screen-lg-min)
 668 | 
 669 |     // So media queries don't overlap when required, provide a maximum
 670 |     SET_PROPERTY(screen-xs-max, (screen-sm-min - 1))
 671 |     SET_PROPERTY(screen-sm-max, (screen-md-min - 1))
 672 |     SET_PROPERTY(screen-md-max, (screen-lg-min - 1))
 673 | 
 674 | 
 675 |     //== Grid system
 676 |     //
 677 |     // Define your custom responsive grid.
 678 | 
 679 |     // Number of columns in the grid.
 680 |     SET_PROPERTY(grid-columns, 12)
 681 |     // Padding between columns. Gets divided in half for the left and right.
 682 |     SET_PROPERTY(grid-gutter-width, 30px)
 683 |     // Navbar collapse
 684 |     // Point at which the navbar becomes uncollapsed.
 685 |     SET_PROPERTY(grid-float-breakpoint, screen-sm-min)
 686 |     // Point at which the navbar begins collapsing.
 687 |     SET_PROPERTY(grid-float-breakpoint-max, (grid-float-breakpoint - 1))
 688 | 
 689 | 
 690 |     //== Container sizes
 691 |     //
 692 |     // Define the maximum width of `.container` for different screen sizes.
 693 | 
 694 |     // Small screen / tablet
 695 |     SET_PROPERTY(container-tablet, ((720px + grid-gutter-width)))
 696 |     // For `screen-sm-min` and up.
 697 |     SET_PROPERTY(container-sm, container-tablet)
 698 | 
 699 |     // Medium screen / desktop
 700 |     SET_PROPERTY(container-desktop, ((940px + grid-gutter-width)))
 701 |     // For `screen-md-min` and up.
 702 |     SET_PROPERTY(container-md, container-desktop)
 703 | 
 704 |     // Large screen / wide desktop
 705 |     SET_PROPERTY(container-large-desktop, ((1140px + grid-gutter-width)))
 706 |     // For `screen-lg-min` and up.
 707 |     SET_PROPERTY(container-lg, container-large-desktop)
 708 | 
 709 | 
 710 |     //== Navbar
 711 |     //
 712 |     //
 713 | 
 714 |     // Basics of a navbar
 715 |     SET_PROPERTY(navbar-height, 50px)
 716 |     SET_PROPERTY(navbar-margin-bottom, line-height-computed)
 717 |     SET_PROPERTY(navbar-border-radius, border-radius-base)
 718 |     SET_PROPERTY(navbar-padding-horizontal, qFloor((grid-gutter-width / 2)))
 719 |     SET_PROPERTY(navbar-padding-vertical, ((navbar-height - line-height-computed) / 2))
 720 |     SET_PROPERTY(navbar-collapse-max-height, 340px)
 721 | 
 722 |     SET_PROPERTY(navbar-default-color, #777)
 723 |     SET_PROPERTY(navbar-default-bg, #f8f8f8)
 724 |     SET_PROPERTY(navbar-default-border, darken(navbar-default-bg, 6.5%))
 725 | 
 726 |     // Navbar links
 727 |     SET_PROPERTY(navbar-default-link-color, #777)
 728 |     SET_PROPERTY(navbar-default-link-hover-color, #333)
 729 |     SET_PROPERTY(navbar-default-link-hover-bg, transparent)
 730 |     SET_PROPERTY(navbar-default-link-active-color, #555)
 731 |     SET_PROPERTY(navbar-default-link-active-bg, darken(navbar-default-bg, 6.5%))
 732 |     SET_PROPERTY(navbar-default-link-disabled-color, #ccc)
 733 |     SET_PROPERTY(navbar-default-link-disabled-bg, transparent)
 734 | 
 735 |     // Navbar brand label
 736 |     SET_PROPERTY(navbar-default-brand-color, navbar-default-link-color)
 737 |     SET_PROPERTY(navbar-default-brand-hover-color, darken(navbar-default-brand-color, 10%))
 738 |     SET_PROPERTY(navbar-default-brand-hover-bg, transparent)
 739 | 
 740 |     // Navbar toggle
 741 |     SET_PROPERTY(navbar-default-toggle-hover-bg, #ddd)
 742 |     SET_PROPERTY(navbar-default-toggle-icon-bar-bg, #888)
 743 |     SET_PROPERTY(navbar-default-toggle-border-color, #ddd)
 744 | 
 745 | 
 746 |     // Inverted navbar
 747 |     // Reset inverted navbar basics
 748 |     SET_PROPERTY(navbar-inverse-color, gray-light)
 749 |     SET_PROPERTY(navbar-inverse-bg, #222)
 750 |     SET_PROPERTY(navbar-inverse-border, darken(navbar-inverse-bg, 10%))
 751 | 
 752 |     // Inverted navbar links
 753 |     SET_PROPERTY(navbar-inverse-link-color, gray-light)
 754 |     SET_PROPERTY(navbar-inverse-link-hover-color, #fff)
 755 |     SET_PROPERTY(navbar-inverse-link-hover-bg, transparent)
 756 |     SET_PROPERTY(navbar-inverse-link-active-color, navbar-inverse-link-hover-color)
 757 |     SET_PROPERTY(navbar-inverse-link-active-bg, darken(navbar-inverse-bg, 10%))
 758 |     SET_PROPERTY(navbar-inverse-link-disabled-color, #444)
 759 |     SET_PROPERTY(navbar-inverse-link-disabled-bg, transparent)
 760 | 
 761 |     // Inverted navbar brand label
 762 |     SET_PROPERTY(navbar-inverse-brand-color, navbar-inverse-link-color)
 763 |     SET_PROPERTY(navbar-inverse-brand-hover-color, #fff)
 764 |     SET_PROPERTY(navbar-inverse-brand-hover-bg, transparent)
 765 | 
 766 |     // Inverted navbar toggle
 767 |     SET_PROPERTY(navbar-inverse-toggle-hover-bg, #333)
 768 |     SET_PROPERTY(navbar-inverse-toggle-icon-bar-bg, #fff)
 769 |     SET_PROPERTY(navbar-inverse-toggle-border-color, #333)
 770 | 
 771 | 
 772 |     //== Navs
 773 |     //
 774 |     //
 775 | 
 776 |     //=== Shared nav styles
 777 |     SET_PROPERTY(nav-link-padding, 10px 15px)
 778 |     SET_PROPERTY(nav-link-hover-bg, gray-lighter)
 779 | 
 780 |     SET_PROPERTY(nav-disabled-link-color, gray-light)
 781 |     SET_PROPERTY(nav-disabled-link-hover-color, gray-light)
 782 | 
 783 |     SET_PROPERTY(nav-open-link-hover-color, #fff)
 784 | 
 785 |     //== Tabs
 786 |     SET_PROPERTY(nav-tabs-border-color, #ddd)
 787 | 
 788 |     SET_PROPERTY(nav-tabs-link-hover-border-color, gray-lighter)
 789 | 
 790 |     SET_PROPERTY(nav-tabs-active-link-hover-bg, body-bg)
 791 |     SET_PROPERTY(nav-tabs-active-link-hover-color, gray)
 792 |     SET_PROPERTY(nav-tabs-active-link-hover-border-color, #ddd)
 793 | 
 794 |     SET_PROPERTY(nav-tabs-justified-link-border-color, #ddd)
 795 |     SET_PROPERTY(nav-tabs-justified-active-link-border-color, body-bg)
 796 | 
 797 |     //== Pills
 798 |     SET_PROPERTY(nav-pills-border-radius, border-radius-base)
 799 |     SET_PROPERTY(nav-pills-active-link-hover-bg, component-active-bg)
 800 |     SET_PROPERTY(nav-pills-active-link-hover-color, component-active-color)
 801 | 
 802 | 
 803 |     //== Pagination
 804 |     //
 805 |     //
 806 | 
 807 |     SET_PROPERTY(pagination-color, link-color)
 808 |     SET_PROPERTY(pagination-bg, #fff)
 809 |     SET_PROPERTY(pagination-border, #ddd)
 810 | 
 811 |     SET_PROPERTY(pagination-hover-color, link-hover-color)
 812 |     SET_PROPERTY(pagination-hover-bg, gray-lighter)
 813 |     SET_PROPERTY(pagination-hover-border, #ddd)
 814 | 
 815 |     SET_PROPERTY(pagination-active-color, #fff)
 816 |     SET_PROPERTY(pagination-active-bg, brand-primary)
 817 |     SET_PROPERTY(pagination-active-border, brand-primary)
 818 | 
 819 |     SET_PROPERTY(pagination-disabled-color, gray-light)
 820 |     SET_PROPERTY(pagination-disabled-bg, #fff)
 821 |     SET_PROPERTY(pagination-disabled-border, #ddd)
 822 | 
 823 | 
 824 |     //== Pager
 825 |     //
 826 |     //
 827 | 
 828 |     SET_PROPERTY(pager-bg, pagination-bg)
 829 |     SET_PROPERTY(pager-border, pagination-border)
 830 |     SET_PROPERTY(pager-border-radius, 15px)
 831 | 
 832 |     SET_PROPERTY(pager-hover-bg, pagination-hover-bg)
 833 | 
 834 |     SET_PROPERTY(pager-active-bg, pagination-active-bg)
 835 |     SET_PROPERTY(pager-active-color, pagination-active-color)
 836 | 
 837 |     SET_PROPERTY(pager-disabled-color, pagination-disabled-color)
 838 | 
 839 | 
 840 |     //== Jumbotron
 841 |     //
 842 |     //
 843 | 
 844 |     SET_PROPERTY(jumbotron-padding, 30px)
 845 |     SET_PROPERTY(jumbotron-color, inherit)
 846 |     SET_PROPERTY(jumbotron-bg, gray-lighter)
 847 |     SET_PROPERTY(jumbotron-heading-color, inherit)
 848 |     SET_PROPERTY(jumbotron-font-size, qCeil((font-size-base * 1.5)))
 849 | 
 850 | 
 851 |     //== Form states and alerts
 852 |     //
 853 |     // Define colors for form feedback states and, by default, alerts.
 854 | 
 855 |     SET_PROPERTY(state-success-text, #3c763d)
 856 |     SET_PROPERTY(state-success-bg, #dff0d8)
 857 |     SET_PROPERTY(state-success-border, darken(spin(state-success-bg, -10), 5%))
 858 | 
 859 |     SET_PROPERTY(state-info-text, #31708f)
 860 |     SET_PROPERTY(state-info-bg, #d9edf7)
 861 |     SET_PROPERTY(state-info-border, darken(spin(state-info-bg, -10), 7%))
 862 | 
 863 |     SET_PROPERTY(state-warning-text, #8a6d3b)
 864 |     SET_PROPERTY(state-warning-bg, #fcf8e3)
 865 |     SET_PROPERTY(state-warning-border, darken(spin(state-warning-bg, -10), 5%))
 866 | 
 867 |     SET_PROPERTY(state-danger-text, #a94442)
 868 |     SET_PROPERTY(state-danger-bg, #f2dede)
 869 |     SET_PROPERTY(state-danger-border, darken(spin(state-danger-bg, -10), 5%))
 870 | 
 871 | 
 872 |     //== Tooltips
 873 |     //
 874 |     //
 875 | 
 876 |     // Tooltip max width
 877 |     SET_PROPERTY(tooltip-max-width, 200px)
 878 |     // Tooltip text color
 879 |     SET_PROPERTY(tooltip-color, #fff)
 880 |     // Tooltip background color
 881 |     SET_PROPERTY(tooltip-bg, #000)
 882 |     SET_PROPERTY(tooltip-opacity, .9)
 883 | 
 884 |     // Tooltip arrow width
 885 |     SET_PROPERTY(tooltip-arrow-width, 5px)
 886 |     // Tooltip arrow color
 887 |     SET_PROPERTY(tooltip-arrow-color, tooltip-bg)
 888 | 
 889 | 
 890 |     //== Popovers
 891 |     //
 892 |     //
 893 | 
 894 |     // Popover body background color
 895 |     SET_PROPERTY(popover-bg, #fff)
 896 |     // Popover maximum width
 897 |     SET_PROPERTY(popover-max-width, 276px)
 898 |     // Popover border color
 899 |     SET_PROPERTY(popover-border-color, rgba(0,0,0,.2))
 900 |     // Popover fallback border color
 901 |     SET_PROPERTY(popover-fallback-border-color, #ccc)
 902 | 
 903 |     // Popover title background color
 904 |     SET_PROPERTY(popover-title-bg, darken(popover-bg, 3%))
 905 | 
 906 |     // Popover arrow width
 907 |     SET_PROPERTY(popover-arrow-width, 10px)
 908 |     // Popover arrow color
 909 |     SET_PROPERTY(popover-arrow-color, #fff)
 910 | 
 911 |     // Popover outer arrow width
 912 |     SET_PROPERTY(popover-arrow-outer-width, (popover-arrow-width + 1))
 913 |     // Popover outer arrow color
 914 |     SET_PROPERTY(popover-arrow-outer-color, fadein(popover-border-color, 5%))
 915 |     // Popover outer arrow fallback color
 916 |     SET_PROPERTY(popover-arrow-outer-fallback-color, darken(popover-fallback-border-color, 20%))
 917 | 
 918 | 
 919 |     //== Labels
 920 |     //
 921 |     //
 922 | 
 923 |     // Default label background color
 924 |     SET_PROPERTY(label-default-bg, gray-light)
 925 |     // Primary label background color
 926 |     SET_PROPERTY(label-primary-bg, brand-primary)
 927 |     // Success label background color
 928 |     SET_PROPERTY(label-success-bg, brand-success)
 929 |     // Info label background color
 930 |     SET_PROPERTY(label-info-bg, brand-info)
 931 |     // Warning label background color
 932 |     SET_PROPERTY(label-warning-bg, brand-warning)
 933 |     // Danger label background color
 934 |     SET_PROPERTY(label-danger-bg, brand-danger)
 935 | 
 936 |     // Default label text color
 937 |     SET_PROPERTY(label-color, #fff)
 938 |     // Default text color of a linked label
 939 |     SET_PROPERTY(label-link-hover-color, #fff)
 940 | 
 941 | 
 942 |     //== Modals
 943 |     //
 944 |     //
 945 | 
 946 |     // Padding applied to the modal body
 947 |     SET_PROPERTY(modal-inner-padding, 20px)
 948 | 
 949 |     // Padding applied to the modal title
 950 |     SET_PROPERTY(modal-title-padding, 15px)
 951 |     // Modal title line-height
 952 |     SET_PROPERTY(modal-title-line-height, line-height-base)
 953 | 
 954 |     // Background color of modal content area
 955 |     SET_PROPERTY(modal-content-bg, #fff)
 956 |     // Modal content border color
 957 |     SET_PROPERTY(modal-content-border-color, rgba(0,0,0,.2))
 958 |     // Modal content border color for IE8
 959 |     SET_PROPERTY(modal-content-fallback-border-color, #999)
 960 | 
 961 |     // Modal backdrop background color
 962 |     SET_PROPERTY(modal-backdrop-bg, #000)
 963 |     // Modal backdrop opacity
 964 |     SET_PROPERTY(modal-backdrop-opacity, .5)
 965 |     // Modal header border color
 966 |     SET_PROPERTY(modal-header-border-color, #e5e5e5)
 967 |     // Modal footer border color
 968 |     SET_PROPERTY(modal-footer-border-color, modal-header-border-color)
 969 | 
 970 |     SET_PROPERTY(modal-lg, 900px)
 971 |     SET_PROPERTY(modal-md, 600px)
 972 |     SET_PROPERTY(modal-sm, 300px)
 973 | 
 974 | 
 975 |     //== Alerts
 976 |     //
 977 |     // Define alert colors, border radius, and padding.
 978 | 
 979 |     SET_PROPERTY(alert-padding, 15px)
 980 |     SET_PROPERTY(alert-border-radius, border-radius-base)
 981 |     SET_PROPERTY(alert-link-font-weight, bold)
 982 | 
 983 |     SET_PROPERTY(alert-success-bg, state-success-bg)
 984 |     SET_PROPERTY(alert-success-text, state-success-text)
 985 |     SET_PROPERTY(alert-success-border, state-success-border)
 986 | 
 987 |     SET_PROPERTY(alert-info-bg, state-info-bg)
 988 |     SET_PROPERTY(alert-info-text, state-info-text)
 989 |     SET_PROPERTY(alert-info-border, state-info-border)
 990 | 
 991 |     SET_PROPERTY(alert-warning-bg, state-warning-bg)
 992 |     SET_PROPERTY(alert-warning-text, state-warning-text)
 993 |     SET_PROPERTY(alert-warning-border, state-warning-border)
 994 | 
 995 |     SET_PROPERTY(alert-danger-bg, state-danger-bg)
 996 |     SET_PROPERTY(alert-danger-text, state-danger-text)
 997 |     SET_PROPERTY(alert-danger-border, state-danger-border)
 998 | 
 999 | 
1000 |     //== Progress bars
1001 |     //
1002 |     //
1003 | 
1004 |     // Background color of the whole progress component
1005 |     SET_PROPERTY(progress-bg, #f5f5f5)
1006 |     // Progress bar text color
1007 |     SET_PROPERTY(progress-bar-color, #fff)
1008 | 
1009 |     // Default progress bar color
1010 |     SET_PROPERTY(progress-bar-bg, brand-primary)
1011 |     // Success progress bar color
1012 |     SET_PROPERTY(progress-bar-success-bg, brand-success)
1013 |     // Warning progress bar color
1014 |     SET_PROPERTY(progress-bar-warning-bg, brand-warning)
1015 |     // Danger progress bar color
1016 |     SET_PROPERTY(progress-bar-danger-bg, brand-danger)
1017 |     // Info progress bar color
1018 |     SET_PROPERTY(progress-bar-info-bg, brand-info)
1019 | 
1020 | 
1021 |     //== List group
1022 |     //
1023 |     //
1024 | 
1025 |     // Background color on `.list-group-item`
1026 |     SET_PROPERTY(list-group-bg, #fff)
1027 |     // `.list-group-item` border color
1028 |     SET_PROPERTY(list-group-border, #ddd)
1029 |     // List group border radius
1030 |     SET_PROPERTY(list-group-border-radius, border-radius-base)
1031 | 
1032 |     // Background color of single list elements on hover
1033 |     SET_PROPERTY(list-group-hover-bg, #f5f5f5)
1034 |     // Text color of active list elements
1035 |     SET_PROPERTY(list-group-active-color, component-active-color)
1036 |     // Background color of active list elements
1037 |     SET_PROPERTY(list-group-active-bg, component-active-bg)
1038 |     // Border color of active list elements
1039 |     SET_PROPERTY(list-group-active-border, list-group-active-bg)
1040 |     SET_PROPERTY(list-group-active-text-color, lighten(list-group-active-bg, 40%))
1041 | 
1042 |     SET_PROPERTY(list-group-link-color, #555)
1043 |     SET_PROPERTY(list-group-link-heading-color, #333)
1044 | 
1045 | 
1046 |     //== Panels
1047 |     //
1048 |     //
1049 | 
1050 |     SET_PROPERTY(panel-bg, #fff)
1051 |     SET_PROPERTY(panel-body-padding, 15px)
1052 |     SET_PROPERTY(panel-border-radius, border-radius-base)
1053 | 
1054 |     // Border color for elements within panels
1055 |     SET_PROPERTY(panel-inner-border, #ddd)
1056 |     SET_PROPERTY(panel-footer-bg, #f5f5f5)
1057 | 
1058 |     SET_PROPERTY(panel-default-text, gray-dark)
1059 |     SET_PROPERTY(panel-default-border, #ddd)
1060 |     SET_PROPERTY(panel-default-heading-bg, #f5f5f5)
1061 | 
1062 |     SET_PROPERTY(panel-primary-text, #fff)
1063 |     SET_PROPERTY(panel-primary-border, brand-primary)
1064 |     SET_PROPERTY(panel-primary-heading-bg, brand-primary)
1065 | 
1066 |     SET_PROPERTY(panel-success-text, state-success-text)
1067 |     SET_PROPERTY(panel-success-border, state-success-border)
1068 |     SET_PROPERTY(panel-success-heading-bg, state-success-bg)
1069 | 
1070 |     SET_PROPERTY(panel-info-text, state-info-text)
1071 |     SET_PROPERTY(panel-info-border, state-info-border)
1072 |     SET_PROPERTY(panel-info-heading-bg, state-info-bg)
1073 | 
1074 |     SET_PROPERTY(panel-warning-text, state-warning-text)
1075 |     SET_PROPERTY(panel-warning-border, state-warning-border)
1076 |     SET_PROPERTY(panel-warning-heading-bg, state-warning-bg)
1077 | 
1078 |     SET_PROPERTY(panel-danger-text, state-danger-text)
1079 |     SET_PROPERTY(panel-danger-border, state-danger-border)
1080 |     SET_PROPERTY(panel-danger-heading-bg, state-danger-bg)
1081 |     */
1082 | 
1083 |     // == Thumbnails ==
1084 |     // Padding around the thumbnail image
1085 |     SET_PROPERTY(thumbnail-padding, 4)
1086 |     // Thumbnail background color
1087 |     SET_PROPERTY_BY_ID(thumbnail-bg, body-bg)
1088 |     // Thumbnail border color
1089 |     SET_PROPERTY(thumbnail-border, "#ddd")
1090 |     // Thumbnail border radius
1091 |     SET_PROPERTY_BY_ID(thumbnail-border-radius, border-radius-base)
1092 | 
1093 |     // needless
1094 |     // Custom text color for thumbnail captions
1095 | //    SET_PROPERTY_BY_ID(thumbnail-caption-color, text-color)
1096 |     // Padding around the thumbnail caption
1097 | //    SET_PROPERTY(thumbnail-caption-padding, 9)
1098 | 
1099 |     /*
1100 |     //== Wells
1101 |     //
1102 |     //
1103 | 
1104 |     SET_PROPERTY(well-bg, #f5f5f5)
1105 |     SET_PROPERTY(well-border, darken(well-bg, 7%))
1106 | 
1107 | 
1108 |     //== Badges
1109 |     //
1110 |     //
1111 | 
1112 |     SET_PROPERTY(badge-color, #fff)
1113 |     // Linked badge text color on hover
1114 |     SET_PROPERTY(badge-link-hover-color, #fff)
1115 |     SET_PROPERTY(badge-bg, gray-light)
1116 | 
1117 |     // Badge text color in active nav link
1118 |     SET_PROPERTY(badge-active-color, link-color)
1119 |     // Badge background color in active nav link
1120 |     SET_PROPERTY(badge-active-bg, #fff)
1121 | 
1122 |     SET_PROPERTY(badge-font-weight, bold)
1123 |     SET_PROPERTY(badge-line-height, 1)
1124 |     SET_PROPERTY(badge-border-radius, 10px)
1125 | 
1126 | 
1127 |     //== Breadcrumbs
1128 |     //
1129 |     //
1130 | 
1131 |     SET_PROPERTY(breadcrumb-padding-vertical, 8px)
1132 |     SET_PROPERTY(breadcrumb-padding-horizontal, 15px)
1133 |     // Breadcrumb background color
1134 |     SET_PROPERTY(breadcrumb-bg, #f5f5f5)
1135 |     // Breadcrumb text color
1136 |     SET_PROPERTY(breadcrumb-color, #ccc)
1137 |     // Text color of current page in the breadcrumb
1138 |     SET_PROPERTY(breadcrumb-active-color, gray-light)
1139 |     // Textual separator for between breadcrumb elements
1140 |     SET_PROPERTY(breadcrumb-separator, "/")
1141 | 
1142 | 
1143 |     //== Carousel
1144 |     //
1145 |     //
1146 | 
1147 |     SET_PROPERTY(carousel-text-shadow, 0 1px 2px rgba(0,0,0,.6))
1148 | 
1149 |     SET_PROPERTY(carousel-control-color, #fff)
1150 |     SET_PROPERTY(carousel-control-width, 15%)
1151 |     SET_PROPERTY(carousel-control-opacity, .5)
1152 |     SET_PROPERTY(carousel-control-font-size, 20px)
1153 | 
1154 |     SET_PROPERTY(carousel-indicator-active-bg, #fff)
1155 |     SET_PROPERTY(carousel-indicator-border-color, #fff)
1156 | 
1157 |     SET_PROPERTY(carousel-caption-color, #fff)
1158 | 
1159 | 
1160 |     //== Close
1161 |     //
1162 |     //
1163 | 
1164 |     SET_PROPERTY(close-font-weight, bold)
1165 |     SET_PROPERTY(close-color, #000)
1166 |     SET_PROPERTY(close-text-shadow, 0 1px 0 #fff)
1167 | 
1168 | 
1169 |     //== Code
1170 |     //
1171 |     //
1172 | 
1173 |     SET_PROPERTY(code-color, #c7254e)
1174 |     SET_PROPERTY(code-bg, #f9f2f4)
1175 | 
1176 |     SET_PROPERTY(kbd-color, #fff)
1177 |     SET_PROPERTY(kbd-bg, #333)
1178 | 
1179 |     SET_PROPERTY(pre-bg, #f5f5f5)
1180 |     SET_PROPERTY(pre-color, gray-dark)
1181 |     SET_PROPERTY(pre-border-color, #ccc)
1182 |     SET_PROPERTY(pre-scrollable-max-height, 340px)
1183 | 
1184 | 
1185 |     //== Type
1186 |     //
1187 |     //
1188 | 
1189 |     // Text muted color
1190 |     SET_PROPERTY(text-muted, gray-light)
1191 |     // Abbreviations and acronyms border color
1192 |     SET_PROPERTY(abbr-border-color, gray-light)
1193 |     // Headings small color
1194 |     SET_PROPERTY(headings-small-color, gray-light)
1195 |     // Blockquote small color
1196 |     SET_PROPERTY(blockquote-small-color, gray-light)
1197 |     // Blockquote font size
1198 |     SET_PROPERTY(blockquote-font-size, (font-size-base * 1.25))
1199 |     // Blockquote border color
1200 |     SET_PROPERTY(blockquote-border-color, gray-lighter)
1201 |     // Page header border color
1202 |     SET_PROPERTY(page-header-border-color, gray-lighter)
1203 | 
1204 | 
1205 |     //== Miscellaneous
1206 |     //
1207 |     //
1208 | 
1209 |     // Horizontal line color.
1210 |     SET_PROPERTY(hr-border, gray-lighter)
1211 | 
1212 |     // Horizontal offset for forms and lists.
1213 |     SET_PROPERTY(component-offset-horizontal, 180px)
1214 |      */
1215 | }
1216 | 


--------------------------------------------------------------------------------