Repository: akveo/blur-admin Branch: master Commit: 7f2596f4abeb Files: 354 Total size: 627.7 KB Directory structure: gitextract_8_fkymag/ ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── bower.json ├── docs/ │ ├── config.json │ ├── contents/ │ │ ├── articles/ │ │ │ ├── 001-getting-started/ │ │ │ │ └── index.md │ │ │ ├── 002-installation-guidelines/ │ │ │ │ └── index.md │ │ │ ├── 011-changing-color-scheme/ │ │ │ │ └── index.md │ │ │ ├── 012-project-structure/ │ │ │ │ └── index.md │ │ │ ├── 013-create-new-page/ │ │ │ │ └── index.md │ │ │ ├── 014-switch-to-blur-theme/ │ │ │ │ └── index.md │ │ │ ├── 051-sidebar/ │ │ │ │ └── index.md │ │ │ └── 091-downloads/ │ │ │ └── index.md │ │ ├── css/ │ │ │ └── main.css │ │ └── index.json │ ├── package.json │ ├── plugins/ │ │ └── paginator.coffee │ └── templates/ │ ├── article.jade │ ├── index.jade │ └── layout.jade ├── gulp/ │ ├── build.js │ ├── conf.js │ ├── devRelease.js │ ├── docs.js │ ├── images.js │ ├── inject.js │ ├── marketplace.js │ ├── scripts.js │ ├── server.js │ ├── styles.js │ └── watch.js ├── gulpfile.js ├── package.json ├── preview.html └── src/ ├── 404.html ├── app/ │ ├── app.js │ ├── pages/ │ │ ├── charts/ │ │ │ ├── amCharts/ │ │ │ │ ├── amCharts.module.js │ │ │ │ ├── areaChart/ │ │ │ │ │ ├── AreaChartCtrl.js │ │ │ │ │ └── areaChart.html │ │ │ │ ├── barChart/ │ │ │ │ │ ├── BarChartCtrl.js │ │ │ │ │ └── barChart.html │ │ │ │ ├── charts.html │ │ │ │ ├── combinedChart/ │ │ │ │ │ ├── combinedChart.html │ │ │ │ │ └── combinedChartCtrl.js │ │ │ │ ├── funnelChart/ │ │ │ │ │ ├── FunnelChartCtrl.js │ │ │ │ │ └── funnelChart.html │ │ │ │ ├── ganttChart/ │ │ │ │ │ ├── ganttChart.html │ │ │ │ │ └── ganttChartCtrl.js │ │ │ │ ├── lineChart/ │ │ │ │ │ ├── LineChartCtrl.js │ │ │ │ │ └── lineChart.html │ │ │ │ └── pieChart/ │ │ │ │ ├── PieChartCtrl.js │ │ │ │ └── pieChart.html │ │ │ ├── chartJs/ │ │ │ │ ├── chartJs.html │ │ │ │ ├── chartJs.module.js │ │ │ │ ├── chartJs1DCtrl.js │ │ │ │ ├── chartJs2DCtrl.js │ │ │ │ └── chartJsWaveCtrl.js │ │ │ ├── chartist/ │ │ │ │ ├── chartist.html │ │ │ │ ├── chartist.module.js │ │ │ │ └── chartistCtrl.js │ │ │ ├── charts.module.js │ │ │ └── morris/ │ │ │ ├── morris.html │ │ │ ├── morris.module.js │ │ │ └── morrisCtrl.js │ │ ├── components/ │ │ │ ├── components.module.js │ │ │ ├── mail/ │ │ │ │ ├── MailTabCtrl.js │ │ │ │ ├── composeBox/ │ │ │ │ │ ├── compose.html │ │ │ │ │ ├── composeBoxCtrl.js │ │ │ │ │ └── composeModal.js │ │ │ │ ├── detail/ │ │ │ │ │ ├── MailDetailCtrl.js │ │ │ │ │ └── mailDetail.html │ │ │ │ ├── list/ │ │ │ │ │ ├── MailListCtrl.js │ │ │ │ │ └── mailList.html │ │ │ │ ├── mail.html │ │ │ │ ├── mail.module.js │ │ │ │ └── mailMessages.js │ │ │ ├── timeline/ │ │ │ │ ├── TimelineCtrl.js │ │ │ │ ├── timeline.html │ │ │ │ └── timeline.module.js │ │ │ └── tree/ │ │ │ ├── tree.html │ │ │ ├── tree.module.js │ │ │ └── treeCtrl.js │ │ ├── dashboard/ │ │ │ ├── blurFeed/ │ │ │ │ ├── BlurFeedCtrl.js │ │ │ │ ├── blurFeed.directive.js │ │ │ │ └── blurFeed.html │ │ │ ├── calendar/ │ │ │ │ └── dashboardCalendar.js │ │ │ ├── dashboard.html │ │ │ ├── dashboard.module.js │ │ │ ├── dashboardCalendar/ │ │ │ │ ├── DashboardCalendarCtrl.js │ │ │ │ ├── dashboardCalendar.directive.js │ │ │ │ └── dashboardCalendar.html │ │ │ ├── dashboardLineChart/ │ │ │ │ ├── DashboardLineChartCtrl.js │ │ │ │ ├── dashboardLineChart.directive.js │ │ │ │ └── dashboardLineChart.html │ │ │ ├── dashboardMap/ │ │ │ │ ├── DashboardMapCtrl.js │ │ │ │ ├── dashboardMap.directive.js │ │ │ │ └── dashboardMap.html │ │ │ ├── dashboardPieChart/ │ │ │ │ ├── DashboardPieChartCtrl.js │ │ │ │ ├── dashboardPieChart.directive.js │ │ │ │ └── dashboardPieChart.html │ │ │ ├── dashboardTodo/ │ │ │ │ ├── DashboardTodoCtrl.js │ │ │ │ ├── dashboardTodo.directive.js │ │ │ │ └── dashboardTodo.html │ │ │ ├── pieCharts/ │ │ │ │ └── dashboardPieChart.js │ │ │ ├── popularApp/ │ │ │ │ ├── popularApp.directive.js │ │ │ │ └── popularApp.html │ │ │ ├── trafficChart/ │ │ │ │ ├── TrafficChartCtrl.js │ │ │ │ ├── trafficChart.directive.js │ │ │ │ └── trafficChart.html │ │ │ └── weather/ │ │ │ ├── WeatherCtrl.js │ │ │ ├── weather.directive.js │ │ │ └── weather.html │ │ ├── form/ │ │ │ ├── form.module.js │ │ │ ├── inputs/ │ │ │ │ ├── inputs.html │ │ │ │ └── widgets/ │ │ │ │ ├── checkboxesRadios.html │ │ │ │ ├── datePickers/ │ │ │ │ │ ├── datePickers.html │ │ │ │ │ ├── datepickerCtrl.js │ │ │ │ │ └── datepickerpopupCtrl.js │ │ │ │ ├── inputGroups.html │ │ │ │ ├── oldSelect/ │ │ │ │ │ ├── OldSelectpickerPanelCtrl.js │ │ │ │ │ ├── select.html │ │ │ │ │ └── selectpicker.directive.js │ │ │ │ ├── oldSwitches/ │ │ │ │ │ ├── OldSwitchPanelCtrl.js │ │ │ │ │ ├── switch.directive.js │ │ │ │ │ └── switch.html │ │ │ │ ├── select/ │ │ │ │ │ ├── GroupSelectpickerOptions.js │ │ │ │ │ ├── SelectpickerPanelCtrl.js │ │ │ │ │ └── select.html │ │ │ │ ├── standardFields.html │ │ │ │ ├── switches/ │ │ │ │ │ ├── SwitchDemoPanelCtrl.js │ │ │ │ │ └── switch.html │ │ │ │ ├── tagsInput/ │ │ │ │ │ ├── tagsInput.directive.js │ │ │ │ │ └── tagsInput.html │ │ │ │ └── validationStates.html │ │ │ ├── layouts/ │ │ │ │ ├── layouts.html │ │ │ │ └── widgets/ │ │ │ │ ├── basicForm.html │ │ │ │ ├── blockForm.html │ │ │ │ ├── formWithoutLabels.html │ │ │ │ ├── horizontalForm.html │ │ │ │ └── inlineForm.html │ │ │ └── wizard/ │ │ │ ├── wizard.html │ │ │ └── wizrdCtrl.js │ │ ├── maps/ │ │ │ ├── google-maps/ │ │ │ │ ├── GmapPageCtrl.js │ │ │ │ └── google-maps.html │ │ │ ├── leaflet/ │ │ │ │ ├── LeafletPageCtrl.js │ │ │ │ └── leaflet.html │ │ │ ├── map-bubbles/ │ │ │ │ ├── MapBubblePageCtrl.js │ │ │ │ └── map-bubbles.html │ │ │ ├── map-lines/ │ │ │ │ ├── MapLinesPageCtrl.js │ │ │ │ └── map-lines.html │ │ │ ├── maps.html │ │ │ └── maps.module.js │ │ ├── pages.module.js │ │ ├── profile/ │ │ │ ├── ProfileModalCtrl.js │ │ │ ├── ProfilePageCtrl.js │ │ │ ├── profile.html │ │ │ ├── profile.module.js │ │ │ └── profileModal.html │ │ ├── tables/ │ │ │ ├── TablesPageCtrl.js │ │ │ ├── basic/ │ │ │ │ └── tables.html │ │ │ ├── smart/ │ │ │ │ └── tables.html │ │ │ ├── tables.module.js │ │ │ └── widgets/ │ │ │ ├── basicTable.html │ │ │ ├── borderedTable.html │ │ │ ├── condensedTable.html │ │ │ ├── contextualTable.html │ │ │ ├── editableRowTable.html │ │ │ ├── editableTable.html │ │ │ ├── hoverRows.html │ │ │ ├── responsiveTable.html │ │ │ ├── smartTable.html │ │ │ └── stripedRows.html │ │ └── ui/ │ │ ├── alerts/ │ │ │ ├── alerts.html │ │ │ └── alerts.module.js │ │ ├── buttons/ │ │ │ ├── ButtonPageCtrl.js │ │ │ ├── buttons.html │ │ │ ├── buttons.module.js │ │ │ └── widgets/ │ │ │ ├── buttonGroups.html │ │ │ ├── buttons.html │ │ │ ├── dropdowns.html │ │ │ ├── iconButtons.html │ │ │ ├── largeButtons.html │ │ │ └── progressButtons.html │ │ ├── grid/ │ │ │ ├── baseGrid.html │ │ │ ├── grid.html │ │ │ └── grid.module.js │ │ ├── icons/ │ │ │ ├── IconsPageCtrl.js │ │ │ ├── icons.html │ │ │ ├── icons.module.js │ │ │ └── widgets/ │ │ │ ├── fontAwesomeIcons.html │ │ │ ├── ionicons.html │ │ │ ├── kameleon.html │ │ │ ├── kameleonRounded.html │ │ │ └── socicon.html │ │ ├── modals/ │ │ │ ├── ModalsPageCtrl.js │ │ │ ├── modalTemplates/ │ │ │ │ ├── basicModal.html │ │ │ │ ├── dangerModal.html │ │ │ │ ├── infoModal.html │ │ │ │ ├── largeModal.html │ │ │ │ ├── smallModal.html │ │ │ │ ├── successModal.html │ │ │ │ └── warningModal.html │ │ │ ├── modals.html │ │ │ ├── modals.module.js │ │ │ ├── notifications/ │ │ │ │ ├── NotificationsCtrl.js │ │ │ │ └── notifications.html │ │ │ └── progressModal/ │ │ │ ├── ProgressModalCtrl.js │ │ │ └── progressModal.html │ │ ├── notifications/ │ │ │ ├── NotificationsPageCtrl.js │ │ │ ├── notifications.html │ │ │ └── notifications.module.js │ │ ├── panels/ │ │ │ ├── panels.html │ │ │ └── panels.module.js │ │ ├── progressBars/ │ │ │ ├── progressBars.html │ │ │ ├── progressBars.module.js │ │ │ └── widgets/ │ │ │ ├── animated.html │ │ │ ├── basic.html │ │ │ ├── label.html │ │ │ ├── stacked.html │ │ │ └── striped.html │ │ ├── slider/ │ │ │ ├── slider.html │ │ │ └── slider.module.js │ │ ├── tabs/ │ │ │ ├── contextualAccordion.html │ │ │ ├── mainTabs.html │ │ │ ├── sampleAccordion.html │ │ │ ├── sideTabs.html │ │ │ ├── tabs.html │ │ │ └── tabs.module.js │ │ ├── typography/ │ │ │ ├── typography.html │ │ │ └── typography.module.js │ │ └── ui.module.js │ └── theme/ │ ├── components/ │ │ ├── baPanel/ │ │ │ ├── baPanel.directive.js │ │ │ ├── baPanel.service.js │ │ │ ├── baPanelBlur.directive.js │ │ │ ├── baPanelBlurHelper.service.js │ │ │ └── baPanelSelf.directive.js │ │ ├── baSidebar/ │ │ │ ├── BaSidebarCtrl.js │ │ │ ├── ba-sidebar.html │ │ │ ├── baSidebar.directive.js │ │ │ ├── baSidebar.service.js │ │ │ └── baSidebarHelpers.directive.js │ │ ├── baWizard/ │ │ │ ├── baWizard.directive.js │ │ │ ├── baWizard.html │ │ │ ├── baWizardCtrl.js │ │ │ ├── baWizardStep.directive.js │ │ │ └── baWizardStep.html │ │ ├── backTop/ │ │ │ ├── backTop.directive.js │ │ │ └── backTop.html │ │ ├── components.module.js │ │ ├── contentTop/ │ │ │ ├── contentTop.directive.js │ │ │ └── contentTop.html │ │ ├── msgCenter/ │ │ │ ├── MsgCenterCtrl.js │ │ │ ├── msgCenter.directive.js │ │ │ └── msgCenter.html │ │ ├── pageTop/ │ │ │ ├── pageTop.directive.js │ │ │ └── pageTop.html │ │ ├── progressBarRound/ │ │ │ ├── progressBarRound.directive.js │ │ │ └── progressBarRound.html │ │ ├── toastrLibConfig.js │ │ └── widgets/ │ │ ├── widgets.directive.js │ │ └── widgets.html │ ├── directives/ │ │ ├── animatedChange.js │ │ ├── autoExpand.js │ │ ├── autoFocus.js │ │ ├── includeWithScope.js │ │ ├── ionSlider.js │ │ ├── ngFileSelect.js │ │ ├── scrollPosition.js │ │ ├── trackWidth.js │ │ └── zoomIn.js │ ├── filters/ │ │ ├── image/ │ │ │ ├── appImage.js │ │ │ ├── kameleonImg.js │ │ │ └── profilePicture.js │ │ └── text/ │ │ └── removeHtml.js │ ├── inputs/ │ │ ├── baSwitcher/ │ │ │ ├── baSwitcher.html │ │ │ └── baSwitcher.js │ │ └── inputs.module.js │ ├── services/ │ │ ├── baProgressModal.js │ │ ├── baUtil.js │ │ ├── fileReader.js │ │ ├── preloader.js │ │ └── stopableInterval.js │ ├── theme.config.js │ ├── theme.configProvider.js │ ├── theme.constants.js │ ├── theme.module.js │ ├── theme.run.js │ └── theme.service.js ├── auth.html ├── index.html ├── reg.html └── sass/ ├── 404.scss ├── README.md ├── app/ │ ├── _alerts.scss │ ├── _buttonsPage.scss │ ├── _chartsPage.scss │ ├── _dashboard.scss │ ├── _email.scss │ ├── _form.scss │ ├── _grid.scss │ ├── _iconsPage.scss │ ├── _modalNotifications.scss │ ├── _modals.scss │ ├── _notifications.scss │ ├── _profile.scss │ ├── _slider.scss │ ├── _table.scss │ ├── _tabsPage.scss │ ├── _tplSkinPanel.scss │ ├── _tree.scss │ ├── _typography.scss │ └── maps/ │ ├── _google-maps.scss │ ├── _leaflet.scss │ ├── _map-bubbles.scss │ └── _map-lines.scss ├── auth.scss ├── common.scss ├── main.scss └── theme/ ├── _blur-admin-theme.scss ├── _buttons.scss ├── _datePicker.scss ├── _icons.scss ├── _layout.scss ├── _preloader.scss ├── _socicon.scss ├── _table.scss ├── _tree.scss ├── bootstrap-overrides/ │ ├── _panel.scss │ └── _tabs.scss ├── components/ │ ├── _accordion.scss │ ├── _baWizard.scss │ ├── _backTop.scss │ ├── _contentTop.scss │ ├── _msgCenter.scss │ ├── _pageTop.scss │ ├── _progressRound.scss │ ├── _sidebar.scss │ └── _widgets.scss ├── conf/ │ ├── _mixins.scss │ ├── _variables.scss │ └── colorScheme/ │ ├── _blur.scss │ └── _mint.scss └── dashboard/ ├── _amChart.scss ├── _amChartMap.scss ├── _blurFeed.scss ├── _calendar.scss ├── _pieCharts.scss ├── _popularApp.scss ├── _timeline.scss ├── _todo.scss ├── _trafficChart.scss └── _weather.scss ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion *.iml ## Directory-based project format: .idea/ # if you remove the above rule, at least ignore the following: # User-specific stuff: # .idea/workspace.xml # .idea/tasks.xml # .idea/dictionaries # Sensitive or high-churn files: # .idea/dataSources.ids # .idea/dataSources.xml # .idea/sqlDataSources.xml # .idea/dynamic.xml # .idea/uiDesigner.xml # Gradle: # .idea/gradle.xml # .idea/libraries # Mongo Explorer plugin: # .idea/mongoSettings.xml ## File-based project format: *.ipr *.iws ## Plugin-specific files: # IntelliJ /out/ # mpeltonen/sbt-idea plugin .idea_modules/ # JIRA plugin atlassian-ide-plugin.xml # Crashlytics plugin (for Android Studio and IntelliJ) com_crashlytics_export_strings.xml crashlytics.properties crashlytics-build.properties node_modules gulp.1 build .tmp /src/release /release /bower_components ================================================ FILE: .travis.yml ================================================ sudo: false language: node_js node_js: - "8" addons: apt: sources: - ubuntu-toolchain-r-test packages: - g++-4.8 install: - npm config set spin false - npm install -g gulp - npm install script: - gulp build ================================================ FILE: CHANGELOG.md ================================================ v1.3.1 - 15 Dec 2016 -------------------- - Fix gulp build - Update dependencies - Fix datepicker position v1.3.0 - 10 Dec 2016 -------------------- - Update bower dependencies - Add progress dialog component - Add datepicker component - Scroll up pages upon navigation - CSS-only switchers - Use ui-select instead of bootstrap-select v1.2.0 - 16 May 2016 -------------------- - Refactoring to improve customization, fixes #22, #26 - Add documentation - Sidebar refactoring, fixes #14, #15, #27 - Bootstrap select refactoring #18 v1.1.1 - 11 Apr 2016 -------------------- - Improved scrolling performance, fixes #2 - Set 0.9.5 version for the Chartist library by default, fixes #5 ================================================ FILE: LICENSE.txt ================================================ The MIT License (MIT) Copyright (c) 2016 Akvemus GSC Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Status API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Contact Help ================================================ FILE: README.md ================================================ [![Build Status](https://travis-ci.org/akveo/blur-admin.svg?branch=master)](https://travis-ci.org/akveo/blur-admin) # BlurAdmin Angular admin panel front-end framework Customizable admin panel framework made with :heart: by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get latest news about this template first! ### Demo **[Mint version demo](http://akveo.com/blur-admin-mint/)** | **[Blur version demo](http://akveo.com/blur-admin/)** :-------------------------:|:-------------------------: ![Mint version demo](http://i.imgur.com/A3TMviJ.png) | ![Blur version demo](http://i.imgur.com/EAoiK2O.jpg) ## Angular 2 version Here you can find Angular2 based version: [ng2-admin](https://github.com/akveo/ng2-admin). ### Documentation Installation, customization and other useful articles: https://akveo.github.io/blur-admin/ *If you have problems installing and just want to download JS and css files, you can find download links here*: http://akveo.github.io/blur-admin/articles/091-downloads/ ## How can I support developers? - Star our GitHub repo - Create pull requests, submit bugs, suggest new features or documentation updates - Follow us on [Twitter](https://twitter.com/akveo_inc) - Like our page on [Facebook](https://www.facebook.com/akveo/) ## Can I hire you guys? Yes! We are available for hire. Visit [our homepage](http://akveo.com/) or simply leave us a note to contact@akveo.com. We will be happy to work with you! ## Features * Responsive layout * High resolution * Bootstrap CSS Framework * Sass * Gulp build * AngularJS * Jquery * Charts (amChart, Chartist, Chart.js, Morris) * Maps (Google, Leaflet, amMap) * etc License ------------- MIT license. ### From akveo Enjoy! We're always happy to hear your feedback. ================================================ FILE: bower.json ================================================ { "name": "blur-admin", "version": "1.3.1", "homepage": "https://github.com/1itvinka/blur-admin", "authors": [ "akveo" ], "description": "Blur Admin HTML template", "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "~3.1.1", "jquery-ui": "~1.12.1", "jquery.easing": "~1.3.1", "jquery.easy-pie-chart": "~2.1.6", "chart.js": "~2.4.0", "Ionicons": "ionicons#~2.0.1", "amcharts": "~3.15.2", "amcharts-stock": "*", "ammap": "~3.14.5", "angular": "~1.5.8", "angular-route": "~1.5.8", "angular-slimscroll": "~1.1.5", "angular-smart-table": "~2.1.3", "angular-toastr": "~2.1.1", "angular-touch": "~1.5.8", "angular-ui-sortable": "~0.15.0", "animate.css": "~3.5.2", "bootstrap": "~3.3.5", "bootstrap-select": "~1.12.1", "bootstrap-switch": "~3.3.2", "bootstrap-tagsinput": "~0.7.1", "font-awesome": "fontawesome#~4.4.0", "fullcalendar": "~3.0.1", "highlight": "~8.8.0", "leaflet": "~0.7.5", "moment": "~2.17.0", "slimScroll": "jquery-slimscroll#~1.3.6", "angular-progress-button-styles": "~0.1.0", "angular-ui-router": "~0.3.2", "angular-chart.js": "~1.0.3", "angular-chartist.js": "~3.3.12", "chartist": "0.9.5", "angular-morris-chart": "~1.1.0", "ionrangeslider": "2.1.4", "angular-bootstrap": "~1.3.3", "angular-animate": "~1.5.8", "textAngular": "~1.4.6", "angular-xeditable": "~0.5.0", "ng-js-tree": "~0.0.7", "angular-ui-select": "^0.19.6" }, "resolutions": { "angular": "~1.5.9", "jquery": "~3.1.1" }, "overrides": { "amcharts": { "main": [ "./dist/amcharts/amcharts.js", "./dist/amcharts/plugins/responsive/responsive.min.js", "./dist/amcharts/serial.js", "./dist/amcharts/funnel.js", "./dist/amcharts/pie.js", "./dist/amcharts/gantt.js" ] }, "amcharts-stock": { "main": "./dist/amcharts/amstock.js" }, "ammap": { "main": [ "./dist/ammap/ammap.js", "./dist/ammap/maps/js/worldLow.js" ] }, "bootstrap": { "main": [ "dist/css/bootstrap.css", "js/dropdown.js", "./dist/fonts/**.*" ] }, "slimScroll": { "main": "./jquery.slimscroll.js" }, "font-awesome": { "main": [ "css/font-awesome.css", "fonts/FontAwesome.otf", "fonts/fontawesome-webfont.eot", "fonts/fontawesome-webfont.svg", "fonts/fontawesome-webfont.ttf", "fonts/fontawesome-webfont.woff", "fonts/fontawesome-webfont.woff2" ] } } } ================================================ FILE: docs/config.json ================================================ { "baseUrl": "/blur-admin/", "locals": { "url": "http://localhost:8080", "name": "The Wintersmith's blog", "owner": "Someone", "description": "Ramblings of an immor(t)al demigod" }, "plugins": [ "./plugins/paginator.coffee" ], "require": { "moment": "moment", "_": "underscore", "typogr": "typogr" }, "jade": { "pretty": true }, "markdown": { "smartLists": true, "smartypants": true }, "paginator": { "perPage": 3, "groupSort": { "Quick Start": 1000, "Customization": 900, "Components": 800, "Other": 100 } } } ================================================ FILE: docs/contents/articles/001-getting-started/index.md ================================================ --- title: Getting Started author: vl sort: 999 group: Quick Start template: article.jade --- ## What is BlurAdmin? Blur admin is Angular front-end Admin Dashboard template. That means all data you can see on graphs, charts tables is hardcoded in Javascript. You can use any backend you want with it without limitations. ## How can it help me? We believe that that at the moment a lot of business applications have some kind of admin interface inside of them. Sometimes it's not that obvious, but a lot of web applications have dashboard with panels, charts analytics. BlurAdmin aims to bootstrap development of your product and provide ecosystem for building a prototype or even production-ready application. Despite frameworks like Bootstrap provide a number of components, usually it's not enough of them to build real-world app. This template comes with lots of popular UI components with unified color scheme. As well you can use BlurAdmin for learning purposes. ## List of features * Responsive layout * High resolution * Bootstrap CSS Framework * Sass * Gulp build * AngularJS * Jquery * Jquery ui * Charts (amChart, Chartist, Chart.js, Morris) * Maps (Google, Leaflet, amMap) * etc ## I want to start developing with BlurAdmin Welcome abroad! You can start with [Installation Guidelines](/blur-admin/articles/002-installation-guidelines/). We describe there how can you download and run template on you local machine. Good luck and have fun! ================================================ FILE: docs/contents/articles/002-installation-guidelines/index.md ================================================ --- title: Installation Guidelines author: vl sort: 500 group: Quick Start template: article.jade --- ## Prerequisites Despite BlurAdmin can be run without any development experience, it would be much easier if you already know something about it. In general following instruction do allow to run local copy by complete newbie, but it doesn't answer questions that can arise in the process of installation. ## Install tools If you don't havee any of these tools installed already, you will need to: * Download and install [git](https://git-scm.com/) * Download and install nodejs [https://nodejs.org](https://nodejs.org) **Note**: It seems like there are some problems with some libraries used in this template and old node versions. That's why we suggest you to have one of the latest. ## Clone repository and install dependencies You will need to clone source code of BlurAdmin GitHub repository. To do this open console and execute following lines: ```bash git clone https://github.com/akveo/blur-admin.git ``` After repository is cloned, go inside of repository directory and install dependencies there: ```bash cd blur-admin npm install ``` This will setup a working copy of BlurAdmin on your local machine ## Running local copy To run local copy in development mode, execute: ```bash gulp serve ``` This script should automatically open template in your default browser. To run local copy in production mode, execute: ```bash gulp serve:dist ``` For addition information about build, please check out [this angular generator](https://github.com/Swiip/generator-gulp-angular) ================================================ FILE: docs/contents/articles/011-changing-color-scheme/index.md ================================================ --- title: Changing Color Scheme author: vl sort: 900 group: Customization template: article.jade --- We tried to make the process of changing color scheme in BlurAdmin as easy as possible. By default BlurAdmin has two color profiles: mint and blur. This article will help you to create your own color profile. Let's say you want to make BlurAdmin dark. First we advice you to take some colorscheme file as a basis. For light themes we suggest you to take `src/sass/theme/conf/colorScheme/_mint.scss` one and for dark take `src/sass/theme/conf/colorScheme/_blur.scss` one. As we want dark theme, we're taking `blur`. 1) Copy `src/sass/theme/conf/colorScheme/_blur.scss` to `src/sass/theme/conf/colorScheme/_dark.scss`. 2) Include your colorscheme file in `src/sass/theme/common.scs`. To do this, replace ```scss @import 'theme/conf/colorScheme/mint'; ``` to ```scss @import 'theme/conf/colorScheme/dark'; ``` Now you can start changing your colors. For example, after playing a bit with different colors, we changed 5 first main variables in `_dark.scss` file: ```sass $default: rgba(#000000, 0.2); //Panel background color $body-bg: #F0F3F4; // Body background color $default-text: #ffffff; // Default text color $help-text: #eeeeee; // Default subtext color $label-text: #ffffff; // Text for labels in forms (Basically it should be equal to default-text in most cases) ``` After this is done, you need to setup javascript to use **same colors** while building charts and other javascript components. To do this, add following code to some configuration block, for example to `src/app/theme/theme.config.js`: ```javascript baConfigProvider.changeColors({ default: '#4e4e55', defaultText: '#e2e2e2', }); ``` That's basically it! Right now your admin application should look like this: ![](new-color-scheme.jpg) For further reference, please look in - Colorscheme scss file (`src/sass/theme/conf/colorScheme/_mint.scss` or `src/sass/theme/conf/colorScheme/_blur.scss`) - `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed - If you want to know how to change theme to blur, read [following article](/blur-admin/articles/014-switch-to-blur-theme/) ================================================ FILE: docs/contents/articles/012-project-structure/index.md ================================================ --- title: Project Structure author: vl sort: 800 group: Customization template: article.jade --- Project structure was originally based on [this angular generator](https://github.com/Swiip/generator-gulp-angular). We made some changes we thought would be better for our particular problem. The directory structure of this template is as follows: ``` ├── bower.json <- front-end library dependencies ├── gulpfile.js <- main task runner file ├── package.json <- mostly task runner dependencies ├── docs/ <- wintersmith documentation generator ├── gulp/ <- build tasks ├── src/ <- main front-end assets │   ├── 404.html │   ├── auth.html │   ├── index.html <- main app dashboard page │   ├── reg.html │   ├── app/ <- angular application files │   │   ├── app.js <- angular application entry point. Used for managing dependencies │   │   ├── pages/ <- UI router pages. Pages created for demonstration purposes. Put your application js and html files here │   │   ├── theme/ <- theme components. Contains various common widgets, panels which used across application │   ├── assets/ <- static files (images, fonts etc.) │   ├── sass/ <- sass styles │   │   ├── app/ <- application styles. Used mostly for demonstration purposes. Put your app styles here. │   │   ├── theme/ <- theme styles. Used to customize bootstrap and other common components used in tempate. ``` In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That's why when you start developing using them, it gets very hard for you to remove things you don't need. Though we understand that our structure is not ideal, but we're aiming to make it as good as possible. ================================================ FILE: docs/contents/articles/013-create-new-page/index.md ================================================ --- title: Create New Page author: vl sort: 300 group: Customization template: article.jade --- Blur admin uses [Angular UI router](https://github.com/angular-ui/ui-router) for navigation. That means to create new page you need to basically configure `ui-router` state. We strongly recommend to follow pages structure in your application. If it doesn't fit your needs please create a GitHub issue and tell us why. We would be glad to discuss. Also we recommend to put pages to separate modules. This will allow you to easily switch off some pages in the future if needed. ## Page creation example 0) Let's assume we want to create a blank page with title 'My New Page' 1) Let's Create a new directory to contain our new page inside of `src/app/pages`. Let's call this directory `myNewPage`. 2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`: ```javascript (function () { 'use strict'; angular.module('BlurAdmin.pages.myNewPage', []) .config(routeConfig); /** @ngInject */ function routeConfig() { } })(); ``` 3) Then let's create empty html file called `my-new-page.html` inside of `src/app/pages/myNewPage`. 4) Lastly let's create ui router state for this page. To do this we need to modify module.js file we created on step 2: ```javascript (function () { 'use strict'; angular.module('BlurAdmin.pages.myNewPage', []) .config(routeConfig); /** @ngInject */ function routeConfig($stateProvider) { $stateProvider .state('myNewPage', { url: '/myNewPage', templateUrl: 'app/pages/myNewPage/my-new-page.html', title: 'My New Page', sidebarMeta: { order: 800, }, }); } })(); ``` That's it! Your can now open your new page either from sidebar or through hash URL. ================================================ FILE: docs/contents/articles/014-switch-to-blur-theme/index.md ================================================ --- title: Enabling blur theme author: kd sort: 850 group: Customization template: article.jade --- If you want to switch theme to the blur, you need to follow 3 simple steps: 1) Blur theme needs some javascript to calculate initial background offsets for panels. That's why first thing you need to do is enable that code. This should be done in Angular **configuration block**. For example you can add following lines to `src/app/theme/theme.config.js`: ```javascript baConfigProvider.changeTheme({blur: true}); ``` 2) As well you need to change some colors. For example *Mint*'s default gray text color doesn't look good on blurred panels. For our blur theme we use following configuration: ```javascript baConfigProvider.changeColors({ default: 'rgba(#000000, 0.2)', defaultText: '#ffffff', dashboard: { white: '#ffffff', }, }); ``` 3) CSS should also be recompiled. Before running build command, we suggest you to switch to *blur* color profile. To do this replace theme in file `src/sass/theme/common.scss`: ```scss @import 'theme/conf/colorScheme/mint'; ``` to ```scss @import 'theme/conf/colorScheme/blur'; ``` 3.1) If you would like to use some different background, replace following images: - `src/app/assets/img/blur-bg.jpg` (main background image) - `src/app/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels) We suggest using 10px Gaussian blur to blur original image. _________________________________________ That's it! You have successfully blurred your theme! Run `gulp serve` and check it out. ================================================ FILE: docs/contents/articles/051-sidebar/index.md ================================================ --- title: Sidebar author: vl sort: 900 group: Components template: article.jade --- Sidebar is used to provide convenient way of navigation in the application. Application support only one sidebar per angular application. That means sidebar is basically a singletone object. Currently sidebar supports level 1 and 2 sub menus. Sidebar can be created using `baSidebar` directive: ```html ``` For now it support only javascript configuration. Though it can be configured manually or via `ui-router` states. This methods can be used either together or one at a time. ## Manual configuration For manual configuration you need to use `baSidebarServiceProvider` provider in angular [configuration block](https://docs.angularjs.org/guide/module#configuration-blocks). The provider has `addStaticItem` method, which receives menuItem object as an argument, which can have following properties:
property type meaning
title String Name of the menu item
icon String Icon (it's a class name) to be displayed near title
stateRef String `ui-router` state associated with this menu item
fixedHref String Url associated with this menu item
blank String Specifies if following Url should be opened in new browser tab
subMenu Array of menu items List of menu items to be displayed as next level submenu
Sample manual configuration: ```javascript baSidebarServiceProvider.addStaticItem({ title: 'Menu Level 1', icon: 'ion-ios-more' }); ``` ## Route configuration By default sidebar iterates through all **ui-router** states you defined in your application and searches for `sidebarMeta` object in them. For each state, which has this property, sidebar element is created. States are being grouped hierarchically. That means if there's a parent abstract state for some state and they both have `sidebarMeta` property, it will be displayed as a sub item of that abstract state's menu item. Name of the item is taken from `state`'s `title` property. Sample state configuration, which will add an item to sidebar: ```javascript $stateProvider .state('dashboard', { url: '/dashboard', templateUrl: 'app/pages/dashboard/dashboard.html', title: 'Dashboard', sidebarMeta: { icon: 'ion-android-home', order: 0, }, }); ``` `sidebarMeta` object can have following properties:
property type meaning
icon String Icon (it's a class name) to be displayed near title
order Number Element's order in current hierarchy
================================================ FILE: docs/contents/articles/091-downloads/index.md ================================================ --- title: Downloads author: vl sort: 900 group: Other template: article.jade --- If you have problems installing node.js and/or other tools to build and run BlurAdmin on your machine and you just want to download html/js/css files, you can find links for download on this page. Development (non-compressed) files can be found in `{ARCHIVE_ROOT}/blur-admin-{VERSION}/dev-release` directory. Compressed files are in `{ARCHIVE_ROOT}/blur-admin-{VERSION}/release` directory. Then you can just open `index.html` to view your local version. **Please note**: *As chrome doesn't support AJAX requests, when you open HTML file via **file** protocol, you might need to disable web security to have your template running.* Sample command on OS X: ```bash open -a Google\ Chrome --args --disable-web-security --user-data-dir=~/ChromeDevSession/ ``` Sample command on Linux: ```bash google-chrome --user-data-dir="~/chrome-dev-session" --disable-web-security ``` Sample command on Windows: ```bash start chrome --user-data-dir="C:/Chrome dev session" --disable-web-security ``` ## Links for downloads [BlurAdmin 1.3.1](/blur-admin/downloads/blur-admin-1.3.1.zip) [BlurAdmin 1.2.0](/blur-admin/downloads/blur-admin-1.2.0.zip) ================================================ FILE: docs/contents/css/main.css ================================================ html { font-family: 'Source Sans Pro', sans-serif; color: #484848; line-height: 1.28 } p { margin: 0 0 10px } .subHeader { font-size: 21px; font-weight: 200; line-height: 30px; margin-bottom: 10px } em { font-style: italic } h1, h2, h3, h4, h5, h6 { margin: 10px 0; font-family: inherit; font-weight: bold; line-height: 20px; color: inherit; text-rendering: optimizelegibility } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; color: #7b7b7b } h1, h2, h3 { line-height: 40px } h1 { font-size: 39px } h2 { font-size: 31px } h3 { font-size: 23px } h4 { font-size: 16px } h5 { font-size: 14px } h6 { font-size: 11px } h1 small { font-size: 24px } h2 small { font-size: 18px } h3 small { font-size: 16px } h4 small { font-size: 14px } ul, ol { margin: 0 0 10px 25px; padding: 0 } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0 } li { line-height: 20px } a { color: #c05b4d; text-decoration: none } a:hover, a:focus { color: #a5473a; text-decoration: underline } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px } .center { text-align: center } html * { color-profile: sRGB; rendering-intent: auto } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; margin: 0; padding: 0 } html { background: #f9f9f9 } .left { float: left } .right { float: right } .container { padding-top: 50px; min-width: 960px } .wrap { width: 960px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } .skinnyWrap { width: 690px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } hr { height: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #eee } ul, li { margin-left: 20px } li + li { margin-top: 10px } h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor { margin-top: -50px; position: absolute } h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link { display: inline } .hash-link { color: #aaa; display: none } .nav-main { background: #222; color: #fafafa; position: fixed; top: 0; height: 50px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); width: 100%; z-index: 100 } .nav-main:after { content: ""; display: table; clear: both } .nav-main a { color: #e9e9e9; text-decoration: none } .nav-main .nav-site-internal { margin: 0 0 0 20px } .nav-main .nav-site-external { float: right; margin: 0 } .nav-main .nav-site li { margin: 0 } .nav-main .nav-site li > a { box-sizing: content-box; padding: 0 10px; line-height: 50px; display: inline-block; height: 50px; color: #ddd } .nav-main .nav-site li > a:hover { color: #fff } .nav-main .nav-site li > a.active { color: #fafafa; border-bottom: 3px solid #cc7a6f; background: #333 } .nav-main .nav-home { color: #ffffff; font-size: 24px; line-height: 50px; height: 50px; display: inline-block } .nav-main .nav-home .blur-label { color: #209e91; } .nav-main .nav-logo { vertical-align: middle; display: inline-block } .nav-main ul { display: inline-block; vertical-align: top } .nav-main li { display: inline } .hero { padding-bottom: 75px; } .hero .hero-content { color: #e9e9e9; font-weight: 300; background: #313131; padding-top: 50px; } .hero .text { font-size: 64px; text-align: center } .hero .minitext { font-size: 16px; text-align: center; text-transform: uppercase } .hero strong { color: #209e91; font-weight: 400 } .white-text { color: rgb(249, 249, 249); } .hero .admin-screenshots { margin-top: 40px; display: flex; flex-direction: row; } .hero .admin-screenshot { width: 50%; padding: 0 15px; text-align: center; height: 250px; } .admin-screenshot img { width: 100%; } .demo-link { display: block; position: relative; line-height: 0; } .demo-link:before { content: ''; position: absolute; width: 100%; bottom: 0; left: 0; height: 52px; background-image: linear-gradient(to bottom, transparent, rgb(249,259,249)); } .demo-link .demo-link-label { display: flex; align-items: center; justify-content: center; content: 'Demo'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); color: rgb(249, 249, 249); font-size: 32px; opacity: 0; transition: opacity 0.3s ease-out; } .demo-link:hover .demo-link-label { opacity: 1; } .buttons-unit { margin-top: 60px; text-align: center } .buttons-unit a { color: #61dafb } .buttons-unit .button { font-size: 24px; background: #cc7a6f; color: #fafafa } .buttons-unit .button:active { background: #c5695c } .buttons-unit.downloads { margin: 30px 0 } .index-block { padding:40px 0; } .index-block h1 { text-align: center; } .index-block.black { background: #f2f2f2; } .why-items { display: flex; flex-direction: row; align-items: baseline; margin-top: 15px; padding-top: 15px; } .why-item { flex: 33%; text-align: center; padding: 0 15px; } .why-item img { width: 110px; } .nav-docs { color: #2d2d2d; font-size: 14px; float: left; width: 210px } .nav-docs ul { list-style: none; margin: 0 } .nav-docs ul ul { margin: 6px 0 0 20px } .nav-docs li { line-height: 16px; margin: 0 0 6px } .nav-docs h3 { text-transform: uppercase; font-size: 14px } .nav-docs a { color: #666; display: block } .nav-docs a:hover { text-decoration: none; color: #cc7a6f } .nav-docs a.active { color: #cc7a6f } .nav-docs a.external:after { content: ""; display: inline-block; width: 10px; height: 10px; padding-left: 5px; background-image: url("../img/external.png"); background-position: 100% 0; background-repeat: no-repeat; font-size: 10px; line-height: 1em; opacity: 0.5 } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) { .nav-docs a.external:after { background-image: url("../img/external_2x.png"); background-size: 10px 10px } } .nav-docs .nav-docs-section { border-bottom: 1px solid #ccc; border-top: 1px solid #eee; padding: 12px 0 } .nav-docs .nav-docs-section:first-child { padding-top: 0; border-top: 0 } .nav-docs .nav-docs-section:last-child { padding-bottom: 0; border-bottom: 0 } .nav-blog li { margin-bottom: 5px } .nav-docs-right { display: block; float: right; line-height: 50px; } .nav-docs-right a { color: #c05b4d; text-decoration: none; } .nav-docs-right a:hover { text-decoration: underline; } .home-section { margin: 50px 0 } .home-divider { border-top-color: #bbb; margin: 0 auto; width: 400px } .skinny-row:after { content: ""; display: table; clear: both } .skinny-col { float: left; margin-left: 40px; width: 305px } .skinny-col:first-child { margin-left: 0 } .marketing-row { margin: 50px 0 } .marketing-row:after { content: ""; display: table; clear: both } .marketing-col { float: left; margin-left: 40px; width: 280px } .marketing-col h3 { color: #2d2d2d; font-size: 24px; font-weight: normal; text-transform: uppercase } .marketing-col p { font-size: 16px } .marketing-col:first-child { margin-left: 0 } #examples h3, .home-presentation h3 { color: #2d2d2d; font-size: 24px; font-weight: normal; margin-bottom: 5px } #examples p { margin: 0 0 25px 0; max-width: 600px } #examples .example { margin-top: 60px } #examples #todoExample { font-size: 14px } #examples #todoExample ul { list-style-type: square; margin: 0 0 10px 0 } #examples #todoExample input { border: 1px solid #ccc; font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; padding: 3px; width: 150px } #examples #todoExample button { font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; margin-left: 5px; padding: 4px 10px } #examples #markdownExample textarea { border: 1px solid #ccc; font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; margin-bottom: 10px; padding: 5px } .home-bottom-section { margin-bottom: 100px } .docs-nextprev:after { content: ""; display: table; clear: both } .jsxCompiler { margin: 0 auto; padding-top: 20px; width: 1220px } .jsxCompiler label.compiler-option { display: block; margin-top: 5px } .jsxCompiler #jsxCompiler { margin-top: 20px } .jsxCompiler .playgroundPreview { padding: 0; width: 600px; word-wrap: break-word } .jsxCompiler .playgroundPreview pre { font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.5 } .jsxCompiler .playgroundError { padding: 15px 20px } .docs-prev { float: left } .docs-next { float: right } footer { font-size: 13px; font-weight: 600; margin-top: 36px; margin-bottom: 18px; overflow: auto } section.black content { padding-bottom: 18px } .blogContent { padding-top: 20px } .blogContent:after { content: ""; display: table; clear: both } .blogContent blockquote { padding: 5px 15px; margin: 20px 0; background-color: #f8f5ec; border-left: 5px solid #f7ebc6 } .blogContent h2 > code { font-size: inherit; line-height: inherit; color: #555; background-color: rgba(0, 0, 0, 0.04) } .documentationContent { padding-top: 20px } .documentationContent:after { content: ""; display: table; clear: both } .documentationContent .subHeader { font-size: 24px } .documentationContent h2 { margin-top: 30px } .documentationContent blockquote { padding: 15px 30px 15px 15px; margin: 20px 0; background-color: rgba(204, 122, 111, 0.1); border-left: 5px solid rgba(191, 87, 73, 0.2) } .documentationContent blockquote h4 { margin-top: 0 } .documentationContent blockquote p { margin-bottom: 0 } .documentationContent blockquote p:first-child { font-weight: bold; font-size: 17.5px; line-height: 20px; margin-top: 0; text-rendering: optimizelegibility } .docs-prevnext { padding-top: 40px; padding-bottom: 40px } .button { background: -webkit-linear-gradient(#9a9a9a, #646464); background: linear-gradient(#9a9a9a, #646464); border-radius: 4px; padding: 8px 16px; font-size: 18px; font-weight: 400; margin: 0 12px; display: inline-block; color: #fafafa; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-decoration: none } .button:hover { text-decoration: none } .button:active { box-shadow: none } .hero .button { box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3) } .button.blue { background: -webkit-linear-gradient(#77a3d2, #4783c2); background: linear-gradient(#77a3d2, #4783c2) } .row { padding-bottom: 4px } .row .span4 { width: 33.33%; display: table-cell } .row .span8 { width: 66.66%; display: table-cell } .row .span6 { width: 50%; display: table-cell } p { margin: 10px 0 } .highlight { padding: 10px; margin-bottom: 20px } figure { text-align: center } .inner-content { float: right; width: 650px } .nosidebar .inner-content { float: none; margin: 0 auto } .inner-content img { max-width: 100%; } .inner-content table { border-collapse: collapse; width: 100%; } .inner-content th, .inner-content td { padding: 0.25rem; text-align: left; border: 1px solid #ccc; } .inner-content tbody tr:nth-child(odd) { background: #eee; } h1:after { content: ""; display: table; clear: both } .edit-page-link { float: right; font-size: 16px; font-weight: normal; line-height: 20px; margin-top: 17px } .post-list-item + .post-list-item { margin-top: 60px } /* code styling */ code { font-family: 'Anonymous Pro', sans-serif; font-size: 0.85em; color: #000; } pre code { display: block; line-height: 1.1; color: #333333; background: #f8f5ec; padding: 30px 14px 14px; position: relative; overflow-x: auto; } pre code:before { position: absolute; top: 0; right: 0; left: 0; padding: 3px 7px; font-size: 12px; font-weight: bold; color: #c2c0bc; background-color: #f1ede4; content: "Code"; } p code { padding: 0.1em 0.3em 0.2em; border-radius: 0.3em; position: relative; background: #fffff3; white-space: nowrap; } /* syntax hl stuff */ code.lang-markdown { color: #424242; } code.lang-markdown .header, code.lang-markdown .strong { font-weight: bold; } code.lang-markdown .emphasis { font-style: italic; } code.lang-markdown .horizontal_rule, code.lang-markdown .link_label, code.lang-markdown .code, code.lang-markdown .header, code.lang-markdown .link_url { color: #555; } code.lang-markdown .blockquote, code.lang-markdown .bullet { color: #bbb; } /* Tomorrow Theme */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ /* Original theme - https://github.com/chriskempson/tomorrow-theme */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ .tomorrow-comment, pre .comment, pre .title { color: #8e908c; } .tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { color: #c82829; } .tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { color: #f5871f; } .tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { color: #eab700; } .tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { color: #718c00; } .tomorrow-aqua, pre .css .hexcolor { color: #3e999f; } .tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { color: #4271ae; } .tomorrow-purple, pre .keyword, pre .javascript .function { color: #8959a8; } /* media queries */ @media screen and (max-width: 960px) { .nav-main { position: static } .container { padding-top: 0 } } ================================================ FILE: docs/contents/index.json ================================================ { "template": "index.jade", "activeHome": true } ================================================ FILE: docs/package.json ================================================ { "dependencies": { "moment": "2.3.x", "underscore": "1.4.x", "typogr": "0.5.x" }, "private": "true" } ================================================ FILE: docs/plugins/paginator.coffee ================================================ module.exports = (env, callback) -> ### Paginator plugin. Defaults can be overridden in config.json e.g. "paginator": {"perPage": 10} ### defaults = template: 'index.jade' # template that renders pages articles: 'articles' # directory containing contents to paginate first: 'index.html' # filename/url for first page filename: 'page/%d/index.html' # filename for rest of pages perPage: 2 # number of articles per page groupSort: {} # assign defaults any option not set in the config file options = env.config.paginator or {} for key, value of defaults options[key] ?= defaults[key] getArticles = (contents) -> # helper that returns a list of articles found in *contents* # note that each article is assumed to have its own directory in the articles directory articles = contents[options.articles]._.directories.map (item) -> item.index # skip articles that does not have a template associated articles = articles.filter (item) -> item.template isnt 'none' # sort article by date articles.sort (a, b) -> b.metadata.sort - a.metadata.sort groupedArticlesObj = articles.reduce (acc, curr) -> groupName = curr.metadata.group if not acc[groupName] acc[groupName] = groupName: groupName items: [] acc[groupName].items.push curr return acc , {} groupedArticles = (val for key, val of groupedArticlesObj) groupedArticles.sort (a, b) -> (options.groupSort[b.groupName] || 0) - (options.groupSort[a.groupName] || 0) return groupedArticles # add the article helper to the environment so we can use it later env.helpers.getGroupedArticles = getArticles # tell the plugin manager we are done callback() ================================================ FILE: docs/templates/article.jade ================================================ extends layout block title | BlurAdmin documentation - #{page.title] block content section.content.wrap.documentationContent div.nav-docs each group in groupedArticles div.nav-docs.section h3=group.groupName ul each article in group.items li a(href=article.url)(class= locals.page === article ? 'active': '')= article.title div.inner-content h1=locals.page.title div.subHeader != typogr(page.html).typogrify() ================================================ FILE: docs/templates/index.jade ================================================ extends layout block title | BlurAdmin angular admin dashboard template block content div.hero div.hero-content div.wrap div.text strong Blur#[span.white-text Admin] div.minitext Angular admin panel front-end framework div.buttons-unit a.button(href=installationArticleUrl) Installation guidelines a.button(href=firstArticleUrl) Documentation div.admin-screenshots div.admin-screenshot h3 Mint version a.demo-link(href='http://akveo.com/blur-admin-mint/',target='_blank') img(src=contents.images['blur-preview-mint.jpg'].url) span.demo-link-label Demo div.admin-screenshot h3 Blur version (experimental) a.demo-link(href='http://akveo.com/blur-admin/',target='_blank') img(src=contents.images['blur-preview.jpg'].url) span.demo-link-label Demo div.index-block div.wrap h1 Why BlurAdmin? div.why-items div.why-item img(src=contents.images['why-structure.svg'].url) h4 Awesome structure p Feature-based structure has proven itself as a good choice for large angular applications. div.why-item img(src=contents.images['why-design.svg'].url) h4 Neat design p We have put a lot of efforts and carefully selected each color and character for this template! div.why-item img(src=contents.images['why-practices.svg'].url) h4 Ease of customization p Check out #[a(href='/blur-admin/articles/011-changing-color-scheme') our article], where we describe how you can create different look in just 2 minutes! div.index-block.black div.wrap h1 Is it free? p Blur admin is completely free and MIT licensed. That means you can do whatever you want with it. p | Initially we planned to sell it on template markets. | But they #[a(href='http://akveo.com/blog/why-i-hate-template-markets/',target='_blank') rejected us several times]. | That's why we decided to make it open-source. And honestly, we have completely no regrets about it! | And we suggest you to not waste your money and use our template instead of paid ones! | Trust us, it's better than large number of them. div.index-block div.wrap h1 How can I support you guys? p Here's what you can do: ul li Star #[a(href='https://github.com/akveo/blur-admin',target='_blank') our GitHub repo] li Create pull requests, submit bugs, suggest new features li Follow #[a(href='https://twitter.com/akveo_inc',target='_blank') us on Twitter] li Like #[a(href='https://www.facebook.com/akveo/',target='_blank') our page on Facebook] div.index-block.black div.wrap h1 Can I hire you? p Yes! We are available for hire. Visit #[a(href='http://akveo.com',target='_blank') our homepage] | or simply leave us a note to #[a(href='mailto:contact@akveo.com') contact@akveo.com]. | We will be happy to work with you! ================================================ FILE: docs/templates/layout.jade ================================================ doctype html block vars - var bodyclass = null; - var groupedArticles = env.helpers.getGroupedArticles(contents); - var firstArticleUrl = groupedArticles[0].items[0].url - var installationArticleUrl = groupedArticles[0].items[1].url html(lang='en') head block head meta(charset='utf-8') meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1') meta(name='viewport', content='width=device-width') meta(name='keywords', content='admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript') title block title = locals.name link(rel='alternate', href=locals.url+'/feed.xml', type='application/rss+xml', title=locals.description) link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic') link(rel='stylesheet', href=contents.css['main.css'].url) link(rel='shortcut icon', href=contents.images['favicon.png'].url) | | | body(class=bodyclass) | | | div.container div.nav-main div.wrap a.nav-home(href=contents['index'].url) img.nav-logo(src=contents.images['blur-admin-logo.png'].url, width=36,height=36) | #[span.blur-label Blur]Admin ul.nav-site.nav-site-internal li a(class= locals.page.metadata.activeHome ? 'active': '')(href=contents['index'].url) Home li a(class= !locals.page.metadata.activeHome ? 'active': '')(href=firstArticleUrl) Docs span.nav-docs-right | Need some help? Let us know! #[a(href='mailto:contact@akveo.com') contact@akveo.com] block content h2 Welcome to blur admin! footer.wrap div.left Powered by Angular, Bootstrap, Gulp and more... div.right | © 2015–2016 Akveo LLC
| Documentation licensed under #[a(href='https://creativecommons.org/licenses/by/4.0/') CC BY 4.0]. a(href='https://github.com/akveo/blur-admin') img(style='position: fixed; top: 0; right: 0; border: 0; z-index: 1000;',src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67',alt='Fork me on GitHub',data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png') ================================================ FILE: gulp/build.js ================================================ 'use strict'; var path = require('path'); var gulp = require('gulp'); var conf = require('./conf'); var $ = require('gulp-load-plugins')({ pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del'] }); gulp.task('partials', function () { return gulp.src([ path.join(conf.paths.src, '/app/**/*.html'), path.join(conf.paths.tmp, '/serve/app/**/*.html') ]) .pipe($.minifyHtml({ empty: true, spare: true, quotes: true })) .pipe($.angularTemplatecache('templateCacheHtml.js', { module: 'BlurAdmin', root: 'app' })) .pipe(gulp.dest(conf.paths.tmp + '/partials/')); }); gulp.task('html', ['inject', 'partials'], function () { var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false }); var partialsInjectOptions = { starttag: '', ignorePath: path.join(conf.paths.tmp, '/partials'), addRootSlash: false }; var htmlFilter = $.filter('*.html', { restore: true, dot:true}); var jsFilter = $.filter('**/*.js', { restore: true, dot:true}); var cssFilter = $.filter('**/*.css', { restore: true, dot:true}); var assets; return gulp.src(path.join(conf.paths.tmp, '/serve/*.html')) .pipe($.inject(partialsInjectFile, partialsInjectOptions)) .pipe(assets = $.useref.assets()) .pipe($.rev()) .pipe(jsFilter) .pipe($.sourcemaps.init()) .pipe($.ngAnnotate()) .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify')) .pipe($.sourcemaps.write('maps')) .pipe(jsFilter.restore) .pipe(cssFilter) .pipe($.sourcemaps.init()) .pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/')) .pipe($.minifyCss({ processImport: false })) .pipe($.sourcemaps.write('maps')) .pipe(cssFilter.restore) .pipe(assets.restore()) .pipe($.useref()) .pipe($.revReplace()) .pipe(htmlFilter) .pipe($.minifyHtml({ empty: true, spare: true, quotes: true, conditionals: true })) .pipe(htmlFilter.restore) .pipe(gulp.dest(path.join(conf.paths.dist, '/'))) .pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true })); }); // Only applies for fonts from bower dependencies // Custom fonts are handled by the "other" task gulp.task('fonts', function () { return gulp.src($.mainBowerFiles('**/*.{eot,svg,ttf,woff,woff2}')) .pipe($.flatten()) .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/'))); }); gulp.task('other', ['copyVendorImages'], function () { var fileFilter = $.filter(function (file) { return file.stat.isFile(); }); return gulp.src([ path.join(conf.paths.src, '/**/*'), path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss,md}'), path.join(conf.paths.tmp, '/serve/**/assets/img/theme/vendor/**/*') ]) .pipe(fileFilter) .pipe(gulp.dest(path.join(conf.paths.dist, '/'))); }); gulp.task('clean', function () { return $.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp, '/')]); }); gulp.task('build', ['html', 'fonts', 'other']); ================================================ FILE: gulp/conf.js ================================================ /** * This file contains the variables used in other gulp files * which defines tasks * By design, we only put there very generic config values * which are used in several places to keep good readability * of the tasks */ var gutil = require('gulp-util'); /** * The main paths of your project handle these with care */ exports.paths = { src: 'src', dist: 'release', devDist: 'dev-release', tmp: '.tmp', e2e: 'e2e' }; /** * Wiredep is the lib which inject bower dependencies in your project * Mainly used to inject script tags in the index.html but also used * to inject css preprocessor deps and js files in karma */ exports.wiredep = { exclude: [/\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/require\.js/], directory: 'bower_components' }; /** * Common implementation for an error handler of a Gulp plugin */ exports.errorHandler = function(title) { 'use strict'; return function(err) { gutil.log(gutil.colors.red('[' + title + ']'), err.toString()); this.emit('end'); }; }; ================================================ FILE: gulp/devRelease.js ================================================ 'use strict'; var path = require('path'); var gulp = require('gulp'); var conf = require('./conf'); var $ = require('gulp-load-plugins')({ pattern: ['gulp-*', 'main-bower-files'] }); var _ = require('lodash'); gulp.task('dev-fonts', function () { return gulp.src($.mainBowerFiles()) .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}')) .pipe($.flatten()) .pipe(gulp.dest(path.join(conf.paths.devDist, 'fonts'))); }); gulp.task('dev-copy-lib', function () { var assets = require('wiredep')(_.extend({}, conf.wiredep)); var srcList = []; srcList.push.apply(srcList, assets.js); srcList.push.apply(srcList, assets.css); return gulp .src(srcList/*, { base: '.' }*/) /* .pipe($.rename(function (p) { p.dirname = p.dirname.replace(/\\/g, '/').replace('bower_components/', ''); if (p.dirname.indexOf('/') !== -1) { p.dirname = p.dirname.substr(0, p.dirname.indexOf('/')); } }))*/ .pipe(gulp.dest(path.join(conf.paths.devDist, 'lib'))); }); gulp.task('dev-css-replace', ['dev-copy-assets'], function() { return gulp.src(path.join(conf.paths.devDist, '*.html')) .pipe($.replace(//g, '')) .pipe(gulp.dest(conf.paths.devDist)); }); gulp.task('dev-js-replace', ['dev-copy-assets'], function() { return gulp.src(path.join(conf.paths.devDist, '.html')) .pipe($.replace(/ Blur Admin
================================================ FILE: src/reg.html ================================================ Blur Admin

Sign up to Blur Admin

Already have a Blur Admin account? Sign in!
or Sign up with one click
================================================ FILE: src/sass/404.scss ================================================ @import "common.scss"; html { position: relative; min-width: 320px; } html, body { min-height: 100%; height: 100%; } body { font: 12px/16px $font-family; color: $default-text; @include main-background(); display: flex; align-items: center; } .page-not-found-modal { width: 638px; margin: 0 auto; @include bg-translucent-dark(0.5); border-radius: 5px; font-weight: $font-light; color: #ffffff; padding: 32px; text-align: center; h1 { font-weight: $font-light; margin-bottom: 32px; } p { font-size: 16px; line-height: 24px; } a { text-decoration: none; outline: none; transition: all 0.2s ease; color: $primary; display: inline-block; &:hover { color: $primary-dark; } } } ================================================ FILE: src/sass/README.md ================================================ ================================================ FILE: src/sass/app/_alerts.scss ================================================ .alert{ color: $label-text; font-size: 13px; font-weight: $font-light; strong{ font-weight: $font-normal; } .close{ margin-top: -3px; } .alert-link{ font-weight: $font-normal; } .control-alert{ padding-top:10px ; button{ margin-right: 10px; } } } .closeable{ button{ color: $input-border; } } .bg-success { background-color: rgba($success,0.85); color: $label-text; a{ color: $danger-dark; &:hover{ color: $danger; } } } .bg-info { background-color: rgba($info,0.85); color: $label-text; a{ color: $warning-light; &:hover{ color: $warning; } } } .bg-warning { background-color: rgba($warning,0.85); color: $label-text; a{ color: $danger-dark; &:hover{ color: $danger; } } } .bg-danger { background-color: rgba($danger,0.85); color: $label-text; a{ color: $warning-light; &:hover{ color: $warning; } } } ================================================ FILE: src/sass/app/_buttonsPage.scss ================================================ .basic-btns { padding-top: 8px; margin-bottom: -8px; h5 { line-height: 35px; font-size: 12px; &.row-sm { line-height: 30px; } &.row-xs { line-height: 22px; } } & > .row { padding-bottom: 4px; } } .btns-row { & > div { margin-bottom: 12px; } } .btns-same-width-sm { .btn { width: 48px; } } .btns-same-width-md { .btn { width: 79px; } } .btns-same-width-lg { .btn { width: 112px; } } ul.btn-list { margin: 0 0 0 -18px; padding: 0; padding-top: 6px; clear: both; li { margin: 0px 0 12px 18px; padding: 0; list-style: none; float: left; } } .btn-group-wrapper { margin-bottom: 12px; } $btn-icon-size: 34px; .btn-icon { width: $btn-icon-size; height: $btn-icon-size; line-height: $btn-icon-size; padding: 0; text-align: center; } .btn-group-example { float: left; margin-right: 30px; margin-bottom: 12px; } .btn-toolbar-example { float: left; } .progress-buttons-container { text-align: center; font-size: 16px; span.button-title { display: inline-block; width: 100%; line-height: 1; font-size: 14px; margin-bottom: 10px; margin-top: 10px; } .row + .row { margin-top: 30px; } } .button-panel{ height: 315px; .btn{ width: 150px; } } .large-buttons-panel{ height: 202px; } .button-panel.df-size-button-panel{ .btn-xs{ width: 60px; } .btn-sm{ width: 90px; } .btn-mm{ width: 120px; } .btn-md{ width: 150px; } .btn-xm{ width: 175px; } .btn-lg{ width: 200px; } } .button-wrapper{ text-align: center; margin: 5px 0; } ================================================ FILE: src/sass/app/_chartsPage.scss ================================================ .admin-chart { width: 100%; height: 500px; font-size: 11px; } .amcharts-export-menu-top-right { top: 10px; right: 0; } #funnelChart, #lineChart { } #pieChart { max-width: 1120px; } .amcharts-pie-slice { transform: scale(1); transform-origin: 50% 50%; transition-duration: 0.3s; transition: all .3s ease-out; cursor: pointer; box-shadow: 0 0 30px 0 #000; } .amcharts-pie-slice:hover { transform: scale(1.1); filter: url(#shadow); } .amChartsButtonSelected { background-color: #CC0000; border: 1px solid #CC0000; color: $default-text; -moz-border-radius: 5px; border-radius: 5px; margin: 1px; } .amChartsButton { background-color: #EEEEEE; border: 1px solid #CCCCCC; color: #000000; border-radius: 5px; margin: 1px; } .ct-area { fill-opacity: .5; } .ct-label{ color: $default-text; opacity: 0.9; fill: $default-text; } .ct-chart .ct-label{ font-size: 1em; } .ct-chart svg{ width: 100%; display: block; } .ct-series-a { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { stroke: $primary; } .ct-slice-pie, .ct-area{ fill: $primary; } } .ct-series-b { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { stroke: $success; } .ct-slice-pie, .ct-area{ fill: $success; } } .ct-series-c { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { stroke: $danger; } .ct-slice-pie, .ct-area{ fill: $danger; } } .ct-series-d { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { stroke: $warning; } .ct-slice-pie, .ct-area{ fill: $warning; } } .ct-series-e { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { stroke: $info; } .ct-slice-pie, .ct-area{ fill: $info; } } @media screen and (min-width: 992px) { .row.morris-up { > div { margin-top: -434px; } } } .area-morris-header{ margin-top: 20px; } .stacked-bar .ct-bar{ stroke-width: 30px; } .amChartsCompareList { border: 1px solid #CCCCCC; } .pie-chart-panel { padding: 0; } .chart-panel{ height: 495px; } #filterChart { width : 96%; font-size : 11px; margin-left: auto; margin-right: auto; margin-top:15px; } .amcharts-graph-g1 .amcharts-graph-fill { filter: url(#blur); } .amcharts-graph-g2 .amcharts-graph-fill { filter: url(#blur); } .amcharts-cursor-fill { filter: url(#shadow); } .chartist h5 { font-weight: $font-normal; } .chartjs-canvas-holder-first-row { height: 300px; } .chartjs-canvas-holder-second-row { height: 350px; } .chartjs-canvas-holder-third-row { height: 250px; } ================================================ FILE: src/sass/app/_dashboard.scss ================================================ @media screen and (min-width: 1620px) { .row.shift-up { > div { margin-top: -573px; } } } @media screen and (max-width: 1620px) { .panel.feed-panel.large-panel { height: 824px; } } .user-stats-panel { .panel-title { padding: 0 0 15px; } } .blurCalendar{ height: 475px; } ================================================ FILE: src/sass/app/_email.scss ================================================ .letter-layout { margin-top: -15px; margin-right: -22px; } .mail-panel { &.panel > .panel-body { padding-left: 0; } } .mail-navigation-container { float: left; position: relative; height: 550px; transition: width 0.5s; color: $default-text; width: 200px; overflow: hidden; padding: 0; .mail-navigation { cursor: pointer; font-weight: $font-light; font-size: 16px; text-align: left; padding: 10px 10px 10px 30px; margin-left: 0; transition: 0.8s padding ease; .new-mails { position: absolute; left: 150px; padding: 1px 6px; border: 1px solid; background-color: transparent; margin-top: -2px; font-size: 12px; margin-right: 5px; border-radius: 10px; transition: 0.8s left ease; } &.active { background: rgba(black, 0.2); color: white; transition: background-color .5s ease; &:hover { background-color: rgba(black, 0.3); } .new-mails { background-color: transparent; } } &:hover { background-color: rgba(black, 0.1); } } .btn.compose-button { width: 140px; font-weight: $font-light; border: $border 2px solid; background-color: transparent; margin: 15px 0 ; } } .labels { margin-top: 14px; } .labels-container { margin-top: 16px; text-align: center; padding-right: 28px; padding-left: 20px; .label-item { display: inline-block; } } .labels-title { padding-left: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12); .label-header { line-height: 24px; } } .label-item { margin: 5px; } .add-label-container { margin-top: 10px; text-align: center; font-size: 16px; font-weight: $font-light; .label-input-stub { font-size: 14px; margin-left: 5px; } i { cursor: pointer; } } .margin-left { margin-left: 10px; } .mail-messages-control { padding: 10px; ul.dropdown-menu { margin-top: 5px; } .btn { background-color: transparent; width: auto; &:focus, &:hover, &:active { color: $default-text; opacity: 0.8; box-shadow: none; } } .more-button { width: 60px; font-size: 14px; padding: 6px 5px; } .refresh-button { margin-left: 10px; } span.select-all-label { font-size: 13px; font-weight: $font-light; } } .message-container, .side-message-navigation { float: left; padding: 0 15px; position: relative; height: 550px; transition: width 0.5s; width: calc(100% - 200px); border-bottom-right-radius: 5px; border-top-right-radius: 5px; border-left: 1px solid rgba(0, 0, 0, 0.12); box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.12); } .side-message-navigation { padding: 0; width: calc(100% - 200px); .side-message-navigation-item { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } } .mail-body-part { width: calc(100% - 30px); text-overflow: ellipsis; height: 16px; overflow: hidden; margin-top: 3px; margin-left: 5px; opacity: .8; } .mail-tag.tag.label { display: inline-block; font-size: 14px; text-transform: uppercase; width: 65px; } .phone-email { i { color: $default-text; } } .message-container { padding: 15px 15px 10px 15px; overflow-x: hidden; } .little-human { cursor: pointer; transition: border-left 1.5s ease; font-weight: 300; .little-human-picture { width: 45px; height: 45px; border-radius: 23px; margin: 7px 0px 7px 7px; transition: all .2s ease-in-out; } .name { font-size: 14px; vertical-align: super; white-space: nowrap; } .name-wrap { margin-left: 10px; } .date { float: right; margin: 10px 10px 0 5px; display: inline-block; font-size: 13px; white-space: nowrap; } .tag { vertical-align: super; } .subject { white-space: nowrap; margin: 0 30px; font-size: 16px; } &:hover { .little-human-picture { animation: rotateReturnAnimation 0.5s; } background-color: rgba(255, 255, 255, 0.1); } } .back-button { margin-left: 45px; } .name-container { margin-left: 10px; } .mail-checkbox { margin-top: 5px; margin-left: 6px; .custom-checkbox { margin-left: 5px; } } .mail-panel .tag { text-transform: lowercase; font-size: 11px; font-weight: $font-light; width: 45px; cursor: pointer; display: inline-block; &.label { padding: .2em .5em; border-radius: 2px; line-height: 1.1; } &.work { background-color: $primary; } &.study { background-color: $warning; } &.family { background-color: $success; } &.friend { background-color: $danger; } } .messages { overflow: auto; table { width: 100%; } } @media screen and (min-width: 1199px) { .photo-td { width: 55px; } .check-td { width: 35px; } } .important { color: $warning; } .message-control-icon { cursor: pointer; font-size: 16px; margin-right: 5px; } .person-info { padding: 0 0 10px 45px; margin-top: 10px; .human-picture { width: 80px; height: 80px; border-radius: 40px; margin-top: -65px; } .name { display: inline-block; margin-left: 10px; margin-top: 5px; h2 { font-weight: 300; margin-bottom: 0; font-size: 24px; } .second-name { margin: 5px 0; } } } .no-padding { padding: 0; } .contact-info { display: inline-block; div { margin-top: 10px; } &.phone-email { .ion-iphone { font-size: 32px; width: 27px; display: inline-block; } .phone { font-size: 19px; font-weight: $font-light; vertical-align: super; } .ion-email { font-size: 24px; width: 27px; display: inline-block; } .email { font-size: 16px; font-weight: $font-light; vertical-align: super; } } &.position-address { div { margin-top: 17px; } .position { font-size: 20px; font-weight: $font-light; } .address { font-size: 16px; font-weight: $font-light; } } } .message-details { margin: 5px 0; padding: 5px 0 5px 30px; .subject { font-size: 20px; margin-right: 10px; font-weight: $font-light; } .control-icons { float: right; font-size: 20px; margin-right: 40px; i { cursor: pointer; } } .date { white-space: nowrap; font-size: 12px; } } .message-body { margin: 20px 0; padding-left: 30px; font-weight: $font-light; line-height: 18px; p { margin-bottom: 0; } } .attachment { margin: 5px 0; padding-left: 30px; .file-icon { font-size: 24px; cursor: pointer; } .file-name { font-size: 14px; margin-left: 3px; position: relative; top: -3px; font-weight: $font-light; } .file-links { font-size: 14px; } } .line { height: 1px; background-color: $input-border; opacity: 0.3; } .answer-button { margin-left: 20px; color: white; font-size: 16px; font-weight: $font-light; padding-left: 40px; padding-right: 40px; background-color: $dribble-color; &:hover { color: white; } &:focus { color: white; } } .answer-container { float: right; margin-top: 10px; .btn { margin-top: 3px; background-color: $primary-light; border: none; color: white; width: 100px; transition: none; &:hover { transform: none; background-color: $danger; } } } @keyframes rotateReturnAnimation { 0% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } } @media screen and (max-width: 1199px) { .name-h { display: inline; } .person-info { .human-picture { margin-top: -35px; } .name { margin-top: 20px; } .mail-tag { margin-top: 10px; } } .second-name { margin-top: 0; } } @media screen and (max-width: 990px) { .person-info .human-picture { width: 150px; height: 150px; border-radius: 75px; margin: 5px auto; display: block; } .person-info, .message-details, .message-body, .attachment { padding-left: 10px; } .message-container { padding-left: 15px; } .back-button, .contact-info { margin-left: 15px; } .additional-info { display: none; } .little-human .date { font-size: 10px; } .margin-left { margin-left: 5px; } } @media screen and (max-width: 760px) { .mail-navigation-container { width: 175px; .mail-navigation { padding-left: 19px; .new-mails { left: 137px; } } } .side-message-navigation { width: calc(100% - 175px); } .message-container { width: calc(100% - 175px); } .mail-body-part { display: none; } .little-human .little-human-picture { width: 30px; height: 30px; } .messages-control .more-button { width: 50px; } } @media screen and (max-width: 560px) { .mail-navigation-container { padding: 0; width: 0; &.expanded { width: 155px; } .mail-navigation { font-size: 14px; padding-left: 23px; .new-mails { left: 116px; padding: 0px 5px; margin-top: 0px; font-size: 12px; } .labels { margin-left: 10px; } } .compose-button { width: 110px; } } .mail-messages-control { .custom-checkbox { margin-left: 5px; margin-top: -2px; } } .side-message-navigation, .message-container { &.expanded { width: 100%; border: none; box-shadow: none; } width: calc(100% - 155px); } div.toggle-navigation-container { display: inline-block; } .little-human { .name { white-space: inherit; } .little-human-picture { display: none; } } .add-label-container { padding-left: 0; font-size: 13px; font-weight: $font-light; } } .compose-header { padding: 8px 3px 8px 10px; color: white; font-weight: $font-light; font-size: 13px; background-color: $github-color; } .header-controls { display: inline-block; float: right; i { margin-right: 5px; font-size: 14px; cursor: pointer; &:hover { color: $primary-light; } } } .compose-container .ta-scroll-window > .ta-bind { height: 290px; overflow-y: scroll; } .modal-compose input.form-control.compose-input { background-color: transparent; border-bottom: 1px solid rgba(0, 0, 0, .2); border-radius: 0; } .compose-footer { padding: 2px 4px; background-color: $mail-box; .btn-send { background-color: $primary-light; color: white; padding: 2px 10px; margin: 3px; font-weight: $font-light; } .btn-default { background-color: transparent; border: none; } } .footer-controls { float: right; margin: 6px; } .compose-footer-icon { font-size: 18px; margin-right: 5px; cursor: pointer; color: $dropdown-text; &:hover { color: $primary-light; } } .compose-container { background-color: $mail-box; .ta-text.ta-editor { background-color: $input-border; div { &:focus { outline: none; } } } } .footer-control-first { border-right: 2px solid $help-text; display: inline-block; padding-right: 9px; } .toggle-navigation-container { display: none; vertical-align: middle; margin-left: -1px; &.detail-page { margin-left: 10px; } } .collapse-navigation-link { font-size: 32px; color: $default-text; &:visited { color: $default-text; } &:hover { color: $warning; opacity: .8; } } .collapsed { width: 0; } .modal .modal-dialog.modal-compose { max-width: 398px; position: fixed; bottom: 0; right: 0; max-height: 474px; .form-control, .bootstrap-tagsinput input { @include placeholderStyle($dropdown-text, 1); color: $dropdown-text; border-radius: 0; } .ta-toolbar { .btn { border-radius: 0; color: $dropdown-text; border: 1px transparent; &.active { box-shadow: none; background-color: rgba(0, 0, 0, .12); } } } @include overrideColors($dropdown-text) } @media (max-width: 640px) { .modal .modal-dialog.modal-compose { max-height: 600px; } } ================================================ FILE: src/sass/app/_form.scss ================================================ .label { border-radius: 0; } .label-primary { background: $primary; } .label-info { background: $primary-light; } .label-success { background: $success; } .label-warning { background: $warning; } .label-danger { background: $danger; } .form-horizontal { label { line-height: 34px; margin-bottom: 0; padding-top: 0 !important; } } .form-group { label { margin-bottom: 5px; color: $default-text; font-weight: $font-normal; font-size: 13px; } } .form-control { color: $default-text; @include placeholderStyle($default-text, 0.7); border: 1px solid $input-border; border-radius: 5px; background-color: $input-background; box-shadow: none; &:focus { box-shadow: none; border-color: $primary-bg; background: $input-background; } } select.form-control { padding-left: 8px; } textarea.form-control { height: 96px; } .form-inline { .form-group { input { width: 100%; } label { margin-right: 12px; } } button[type="submit"] { margin-left: 12px; } label.custom-checkbox > span { display: block; margin-top: -13px; margin-right: 10px; } } @mixin setSwitchBorder($color) { .bootstrap-switch.bootstrap-switch-on { border-color: $color; } } @mixin setSwitcherColor($color) { border: solid 1px $color; .handle.handle-on { background-color: $color; } } .switcher-container { margin-right: 10px; font-weight: normal; input { display: none; } .switcher { &.primary { @include setSwitcherColor($primary); } &.success { @include setSwitcherColor($success); } &.warning { @include setSwitcherColor($warning); } &.danger { @include setSwitcherColor($danger); } &.info { @include setSwitcherColor($primary-light); } position: relative; display: inline-block; width: 84px; overflow: hidden; border-radius: 6px; box-sizing: border-box; /* this fixes the overflow:hidden in Chrome */ -webkit-transform: translateZ(0); /* Hide default HTML checkbox */ input { display: none; } .handle-container { position: relative; width: 126px; cursor: pointer; transform: translate3d(-42px, 0, 0); transition: transform .2s linear; .handle { width: 42px; float: left; line-height: 28px; height: 28px; font-size: 12px; text-align: center; color: white; &.handle-off { background: $border; color: black; } } } } input:checked + .switcher { border: solid 1px $border; .handle-container { transform: translate3d(0, 0, 0); } } } .switch-container { display: inline-block; &.primary { @include setSwitchBorder($primary); } &.success { @include setSwitchBorder($success); } &.warning { @include setSwitchBorder($warning); } &.danger { @include setSwitchBorder($danger); } &.info { @include setSwitchBorder($primary-light); } } .bootstrap-switch { border-radius: 5px; border: 1px solid $default; transition: border-color ease-in-out .7s, box-shadow ease-in-out .7s; &:focus { outline: none; } &.bootstrap-switch-off { border-color: $border; } &.bootstrap-switch-focused { box-shadow: none; &.bootstrap-switch-off { border-color: $border; } } .bootstrap-switch-container { border-radius: 0; &:focus { outline: none; } } .bootstrap-switch-handle-on { border-radius: 0; &.bootstrap-switch-default { background: $default; } &.bootstrap-switch-success { background: $success; } &.bootstrap-switch-primary { background: $primary; } &.bootstrap-switch-warning { background: $warning; } &.bootstrap-switch-danger { background: $danger; } &.bootstrap-switch-info { background: $primary-light; } } .bootstrap-switch-handle-off { border-radius: 0; } .bootstrap-switch-label { background: transparent; } &.bootstrap-switch-animate .bootstrap-switch-container { transition: margin-left .2s; } } .switches { margin-left: -12px; margin-bottom: -12px; .switch-container { float: left; margin-left: 12px; margin-bottom: 12px; } } .input-group { width: 100%; margin-bottom: 15px; & > span { border-radius: 0; } } label.custom-checkbox { padding-right: 0; padding-left: 0; margin-bottom: 0; & > input { height: 0; z-index: -100 !important; opacity: 0; position: absolute; &:checked { & + span { &:before { content: "\f00c"; font-weight: $font-light; } } } &:disabled { & + span { color: $disabled; cursor: not-allowed; &:before { border-color: $disabled !important; cursor: not-allowed; } } } } & > span { position: relative; display: inline-block; margin: 0; line-height: 16px; font-weight: $font-light; cursor: pointer; padding-left: 22px; width: 100%; &:before { cursor: pointer; font-family: fontAwesome; font-weight: $font-light; font-size: 12px; color: $default-text; content: "\a0"; background-color: transparent; border: 1px solid $border; border-radius: 0; display: inline-block; text-align: center; height: 16px; line-height: 14px; min-width: 16px; margin-right: 6px; position: relative; top: 0; margin-left: -22px; float: left; } &:hover { &:before { border-color: $primary-bg; } } } } .nowrap { white-space: nowrap; } .cut-with-dots { overflow: hidden; text-overflow: ellipsis; display: block; } label.custom-radio { @extend .custom-checkbox; & > input { &:checked { & + span { &:before { content: "\f111"; } } } } & > span { &:before { border-radius: 16px; font-size: 9px; } } } @mixin customInput($color) { & > span { &:before { color: $color; } &:hover { &:before { border-color: $color; } } } } label.custom-input-primary { @include customInput($primary); } label.custom-input-success { @include customInput($success); } label.custom-input-warning { @include customInput($warning) } label.custom-input-danger { @include customInput($danger) } .form-horizontal { .radio, .checkbox, .radio-inline, .checkbox-inline { padding-top: 0px; } } .input-demo { line-height: 25px; } @mixin validationState($color, $focusColor) { .control-label { color: $default-text; } .form-control { border: 1px solid $color; &:focus { box-shadow: none; border-color: $focusColor; } } label.custom-checkbox { color: $color; & > span { &:before { color: $color; } &:hover { &:before { border-color: $color; } } } } .form-control-feedback { color: $color; } .input-group-addon { background-color: $color; color: $label-text; } } .has-success { @include validationState($success-bg, $success); } .has-warning { @include validationState($warning-bg, $warning); } .has-error { @include validationState($danger-bg, $danger); } .has-feedback label ~ .form-control-feedback { top: 21px; font-size: 18px; } .bootstrap-select { .btn-default { &:focus { color: $default-text; } } > .dropdown-toggle { &.btn-primary, &.btn-warning, &.btn-danger, &.btn-success, &.btn-inverse, &.btn-info { color: #fff; &:hover, &:focus { color: #fff; } } } } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: $input-background; color: $disabled; border-color: $disabled-bg; @include placeholderStyle($default-text, 0.5); } .form-control-rounded { border-radius: 16px; } .help-block { color: $help-text; } .help-block.error-block { display: none; .has-error &.basic-block { display: block; } } @mixin groupAddon($color) { background: $color; color: $label-text; border-color: $color; } .input-group-addon-danger { @include groupAddon($danger); } .input-group-addon-warning { @include groupAddon($warning); } .input-group-addon-success { @include groupAddon($success); } .input-group-addon-primary { @include groupAddon($primary); } .checkbox-demo-row { margin-bottom: 12px; } .dropdown-menu { border-radius: 5px; } .bootstrap-select.btn-group { button.btn.btn-default { background: transparent; color: $default-text; &:hover { background: $default; box-shadow: none; outline: 0 !important; } &:active { background: $default; box-shadow: none; } } &.open { > .btn.btn-default.dropdown-toggle { background: $default; box-shadow: none; border-color: $border; } > .btn { border-radius: 5px 5px 0 0; } .dropdown-menu.open { border: 1px solid $border-light; border-top: none; border-radius: 0 0 5px 5px; } } &.with-search.open .btn-default + .dropdown-menu { .bs-searchbox .form-control { background-color: $default; border: 1px solid $input-border; } .no-results { color: $dropdown-text; } } .notify { color: $dropdown-text; } } .bootstrap-tagsinput { color: $default-text; background-color: $input-background; border: 1px solid $input-border; border-radius: 5px; box-shadow: none; max-width: 100%; font-size: 14px; line-height: 26px; width: 100%; &.form-control { display: block; width: 100%; } .tag { border-radius: 3px; font-weight: $font-normal; font-size: 11px; padding: 4px 8px; & [data-role="remove"]:hover { box-shadow: none; } } input { background-color: $input-background; border: 1px solid $input-border; border-radius: 5px; @include placeholderStyle($default-text, 0.8); line-height: 22px; font-size: 11px; min-width: 53px; } } .ui-select-multiple.ui-select-bootstrap { min-height: 34px; padding: 4px 3px 0 12px; } .progress { background: $progress-background; } .progress-bar-primary { background-color: $primary; } .progress-bar-success { background-color: $success-light; } .progress-bar-warning { background-color: $warning; } .progress-bar-danger { background-color: $danger; } .has-success .input-group-addon { border: none; } .input-group > span.addon-left { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .input-group > span.addon-right { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .with-primary-addon:focus { border-color: $primary; } .with-warning-addon:focus { border-color: $warning; } .with-success-addon:focus { border-color: $success; } .with-danger-addon:focus { border-color: $danger; } .sub-little-text { font-size: 12px; } ================================================ FILE: src/sass/app/_grid.scss ================================================ .show-grid div[class^=col-]{ padding: 10px; box-sizing: border-box; div { color: $default-text; text-align: center; font-size: 18px; background-color: rgba($default-text, 0.3); padding: 12px 5px; } } .grid-h{ margin-top: 40px; margin-bottom: 0; &:first-child{ margin-top: 0; } } ================================================ FILE: src/sass/app/_iconsPage.scss ================================================ @mixin icon-hover($color) { i:hover { color: $color; } } .icons-list { & > div { text-align: center; margin-bottom: 32px; } i { font-weight: $font-normal; font-size: 18px; cursor: pointer; } &.primary { @include icon-hover($primary); } &.success { @include icon-hover($success); } &.warning { @include icon-hover($warning); } &.danger { @include icon-hover($danger); } } a.see-all-icons { float: right; } .awesomeIcons { height: 308px; } .kameleon-row { display: inline-block; min-width: 102px; width: 20%; .kameleon-icon { padding:0 10px; img { width: 81px; } } } @media (max-width: 750px) { .kameleon-row { width: 25%; } } @media (max-width: 550px) { .kameleon-row { width: 33%; } } @media (max-width: 430px) { .kameleon-row { width: 50%; } } .kameleon-icon-tabs { max-width: 84px; img { width: 100%; min-width: 81px; min-height: 81px; } } .kameleon-icon { text-align: center; margin: 0 auto; img { width: 100%; } span { display: block; text-align: center; white-space: nowrap; } } @mixin setImgBg($color) { img { background: $color; } } .with-round-bg { margin-bottom: 6px; img { border-radius: 50%; margin-bottom: 4px; } @include setImgBg($default); &.success { @include setImgBg($success); } &.danger { @include setImgBg($danger); } &.warning { @include setImgBg($warning); } &.info { @include setImgBg($info); } &.primary { @include setImgBg($primary); } } ================================================ FILE: src/sass/app/_modalNotifications.scss ================================================ .toast { background-color: $primary; } .toast-success { background-color: $success; } .toast-error { background-color: $danger; } .toast-info { background-color: $info; } .toast-warning { background-color: $warning; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { margin: 5px auto; } ================================================ FILE: src/sass/app/_modals.scss ================================================ .modal-content { border-radius: 5px; border: none; color: $dropdown-text; } .modal-header { color: $label-text; border-top-left-radius: 5px; border-top-right-radius: 5px; .modal-title { color: $dropdown-text; } } .modal-buttons { margin-top: -12px; margin-right: -22px; button { float: left; margin-right: 24px; margin-top: 12px; } &.same-width { button { width: 160px; text-align: center; } } } $modal-input-border: #e7e7e7; .modal { text-align: center; .modal-dialog { display: inline-block; text-align: left; margin: 0 auto; .form-control{ color: $github-color; background-color: transparent; border: 1px solid $modal-input-border; @include placeholderStyle($dropdown-text, 0.9); } .modal-body p, .modal-body div, .modal-body span{ color: $dropdown-text; } } .modal-header { border: none; .close{ margin-top: -5px; } } .modal-footer { border: none; padding-top: 0; } .modal-icon{ margin-right: 3px; } .sn-link-close { color: $dropdown-text; font-size: 30px; &:hover { color: $danger; } } } @media screen and (min-width: $resM) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .message-modal { .modal-header { text-align: center; i { font-size: 32px; } } .modal-title { text-align: center; font-size: 18px; margin-bottom: 12px; margin-top: 18px; } .modal-body { text-align: center; padding: 0; font-size: 14px; } .modal-footer { margin: 24px 0 12px; text-align: center; } } ================================================ FILE: src/sass/app/_notifications.scss ================================================ .control { margin-bottom: 10px; .form-control { width: 75%; } span { white-space: pre-line; } } .notification-panel { .control, .radio, label, label.custom-checkbox > span, label.custom-radio > span { font-weight: $font-light; } } .radio-controls .custom-radio{ margin-top: 5px; } @media (max-width: 991px) { .toastr-radio-setup { margin-left: 22px; } } .radio-header { margin-bottom: 0; &.position-header { margin-top: 15px; } } .button-row { line-height: 37px; button { width: 125px; } } .result-toastr { border-radius: 5px; color: rgba(255, 255, 255, 0.9); background-color: rgba(0, 0, 0, 0.33); border: none; } .sub-label { margin-top: 5px; } .toast-title { font-weight: $font-normal; } .toast-message { font-weight: $font-light; } #toast-container.toast-top-center, #toast-container.toast-bottom-center{ .toast{ margin-bottom: 5px; } } ================================================ FILE: src/sass/app/_profile.scss ================================================ h3.with-line { border-bottom: 1px solid $border; color: $default-text; font-weight: $font-normal; padding-top: 30px; margin-bottom: 14px; line-height: 39px; width: 100%; } .panel .panel-body h3 { &.with-line { margin-bottom: 14px; margin-top: 0; } } .profile-block { background: $default; .nav-tabs > li { & > a { border-radius: 0; transition: background, 0s, ease !important; } } .progress { border-radius: 0; margin-bottom: 6px; } .progress-info { margin-bottom: 8px; margin-top: -2px; } .tab-content { padding: 15px 15px 25px; } .progress-bar-primary { background-color: $primary-light; } .form-group { margin-bottom: 14px; label { text-align: right; } } .form-control { font-size: 13px; } } .notification { .form-group { label { text-align: left; padding-left: 26px; } } } .userpic { border: 1px dashed #b8b8b8; width: 202px; height: 202px; position: relative; cursor: pointer; .userpic-wrapper { width: 200px; height: 200px; overflow: hidden; display: flex; justify-content: center; align-items: center; } img { max-width: 100%; max-height: 100%; } i { display: none; position: absolute; font-size: 32px; background: $default; cursor: pointer; color: $primary; top: -11px; right: -11px; height: 26px; border-radius: 50%; &:before { line-height: 26px; } &:hover { color: $danger; } } a.change-userpic { display: none; width: 202px; background: rgba(0, 0, 0, 0.7); transition: all 200ms ease-in-out; color: $default-text; text-decoration: none; position: absolute; bottom: -1px; left: -1px; line-height: 32px; text-align: center; } &:hover { i { display: block; } .change-userpic { display: block; } } } .save-profile { margin: 23px 0 12px 12px; } $snColor: $primary; $snPadding: 8px; a.sn-link { transition: none; display: block; border-radius: 5px; background-color: transparent; padding: $snPadding; color: $default-text; border: 1px solid transparent; margin-bottom: 23px; width: 100%; position: relative; cursor: pointer; text-decoration: none !important; i.socicon { padding: 6px; border-radius: 50%; width: auto; font-size: 17px; margin-right: 8px; background-color: rgba(0,0,0,.15); color: $default-text; } span { } span { font-size: 14px; line-height: 29px; } @mixin activeSn() { border-color: $snColor; border-width: 2px; padding: $snPadding - 1; span { color: $default-text; } i { background: $snColor; } } &.connected { @include activeSn(); em { display: block; } } &:hover { @include activeSn(); } .socicon { background: transparent; } } .close { opacity: 1; box-shadow: none; outline: none !important; &:hover, &:focus, &:active { opacity: 1; } } .connected .sn-link-close { position: absolute; top: 1px; right: 0; width: 45px; line-height: 45px; text-align: center; font-size: 32px; color: $snColor; transition: all 0.1s ease; outline: none; &:hover { color: $danger; transform: scale(1.2); } } .social-profiles { padding-top: 3px; margin-bottom: -3px; padding-left: 12px; } .profile-page { .form-group { label { line-height: 34px; font-size: 14px; font-weight: $font-light; } input{ font-weight: $font-light; } } } ================================================ FILE: src/sass/app/_slider.scss ================================================ .slider-box{ min-height: 86px; } .irs-bar, .irs-bar-edge, .irs-line-left, .irs-line-mid, .irs-line-right, .irs-slider { background-image: url(../assets/img/theme/vendor/ionrangeslider/img/sprite-skin-flat.png); background-repeat: repeat-x; } ================================================ FILE: src/sass/app/_table.scss ================================================ .table-panel { height: 295px; } ================================================ FILE: src/sass/app/_tabsPage.scss ================================================ .tabset-group { > div + div { margin-top: 15px; } } .panel.tabs-panel{ .panel-body{ padding: 0; } .dropdown-menu{ min-width: 132px; top: auto; border: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } &.with-scroll .panel-body{ height: 100%; } } .xsmall-panel { .nav-tabs, .tab-content{ height: 100%; } } .inline-icon{ display: inline-block; margin: 20px 5px; } .panel.horizontal-tabs { .tab-content{ height: calc(100% - 40px); } } ================================================ FILE: src/sass/app/_tplSkinPanel.scss ================================================ .tpl-skin-panel { width: 300px; .tpl-skin-option { padding: 10px; line-height: 83px; color: $default-text; &:hover { cursor: pointer; background-color: $primary; } + .tpl-skin-option { border-top: 1px solid $border-light; } } .skin-thumbnail { width: 100%; } } ================================================ FILE: src/sass/app/_tree.scss ================================================ .tree-node{ line-height: 25px; cursor: pointer; &.selected{ background-color: $border-light ; } .control{ cursor: pointer; font-size: 16px; padding-left: 5px; } &:hover{ background-color: $input-border; } } .jstree-default a.jstree-clicked, .jstree-default a.jstree-hovered { background-color: rgba(0, 0, 0, 0.25); } .jstree-default a.jstree-anchor, .jstree-default a.jstree-wholerow{ &:hover{ background-color: rgba(0, 0, 0, 0.15); } } .control-side > div { margin-top: 5px; margin-bottom: 10px; .btn{ width: 100px; } } #tree-root{ border-left: 1px solid $border-light; padding-left: 10px; } .tree-panel{ height: 500px; } .search-container{ margin-top: 10px; } ================================================ FILE: src/sass/app/_typography.scss ================================================ h1, h2, h3, h4, h5, h6 { font-family: $font-family; width: 100%; margin-top: 0; } h1.color, h2.color, h3.color, h4.color, h5.color, h6.color { color: $danger; } body a { color: $activelink; text-decoration: none !important; transition: color 0.2s ease; &:hover { color: $hoverlink; } } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 15px; } .typography-document-samples { p { margin: 0; } .typography-widget { height: 100%; .panel { height: 620px; } .panel-title{ text-align: center; width: 100%; } .panel.with-scroll .panel-body{ height: calc(100% - 45px); } .panel-content{ padding: 15px 22px 5px 22px; } } } .heading-widget { h1, h2, h3, h4, h5, h6 { width: 100%; font-weight: $font-light; text-align: center; } p { line-height: 16px; font-weight: $font-normal; text-align: center; } } .more-text-widget { text-align: center; font-size: 14px; p { line-height: 17px; } .gray { color: #767676; } .black { color: #585858; } .light-text { font-weight: $font-light; } .regular-text { font-weight: $font-normal; } .upper-text { text-transform: uppercase; } .bold-text { font-weight: $font-bold; } .small-text { padding: 5px 0 0 0; p { font-size: 9px; font-weight: $font-light; line-height: 10px; } } } .color-widget { text-align: center; font-size: 14px; font-weight: $font-normal; p { line-height: 17px; } .section-block { margin: 14px 0; } .yellow-text p { color: $warning; } .red-text p { color: $danger; } .links { h3 { margin-bottom: 10px; } p { margin-bottom: 0; &.hovered { a { color: $hoverlink; } } } } } .lists-widget { font-weight: $font-normal; .list-header { width: 100%; text-align: center; } .accent { margin-top: 30px; color: $warning-bg; line-height: 14px; font-size: 14px; padding-left: 11px; border-left: 4px solid $warning-bg; margin-left: 13px; } ul.blur, ol.blur { padding-left: 13px; margin-bottom: 19px; list-style: none; padding-top: 1px; li { margin-top: 5px; font-size: 14px; ul, ol { padding-left: 20px; margin-bottom: 0; list-style: none; } } } ul.blur { li { &:before { content: "• "; color: $warning-bg; width: 10px; display: inline-block; } } } ol.blur { counter-reset: section; li { color: $warning-bg; padding-left: 0; line-height: 14px; position: relative; span { color: $default-text; display: block; } ol { padding-left: 0; margin-left: 12px; } &:before { content: counters(section, ".") "."; counter-increment: section; width: 19px; position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } & > li { span { padding-left: 14px; } } ol { counter-reset: section; & > li { &:before { width: 30px; } span { padding-left: 27px } } ol { & > li { &:before { width: 40px; } span { padding-left: 40px; } } } } } } .columns-section { background-color: $default; } p { margin-bottom: 12px; font-family: $font-family; font-size: 14px; } p.small-text { color: $help-text; font-size: 12px; line-height: 16px; margin-bottom: 8px; } .cols-two { margin-bottom: 50px; & > div { float: left; width: 350px; margin-left: 40px; &:first-child { margin-left: 0; } } } .cols-three { margin-bottom: 50px; & > div { float: left; width: 222px; margin-left: 40px; &:first-child { margin-left: 0; } } } a.learn-more { font-size: 14px; font-weight: $font-bold; text-decoration: none; line-height: 24px; } .img-wrapper { margin-bottom: 19px; margin-top: 5px; overflow: hidden; height: 180px; img { width: 100%; } } .cols-three p { margin-bottom: 10px; } .banner { position: relative; margin-bottom: 20px; } .large-banner-wrapper { overflow: hidden; height: 400px; img { height: 100%; width: 100%; display: block } } .banner-text-wrapper { margin-top: -400px; height: 400px; text-align: center; } .banner-text { padding: 85px 90px 60px; display: inline-block; margin: 67px auto; background: $default; min-width: 432px; overflow: hidden; background: rgba(0, 0, 0, 0.75); h1 { font-weight: $font-bold; width: 100%; color: $label-text; margin-bottom: 10px; } p { font-size: 24px; line-height: 30px; font-weight: $font-light; color: $primary; margin-bottom: 0px; } } @media (max-width: 600px) { .banner-text { padding: 55px 60px 30px; min-width: 0; h1 { font-size: 24px; } p { font-size: 16px; } } } @media (max-width: 400px) { .banner-text { min-width: 0; width: 100%; height: 100%; margin: 0; } } .photo-desc { margin-top: 12px; text-align: center; } .text-info { width: 90%; p { margin-bottom: 10px; } } .section-block { padding-bottom: 12px; } .separator { height: 1px; background: $border-light; width: 100%; margin-bottom: 19px; margin-top: 16px; } .section { padding: 0 20px 50px 20px; } .panel.banner-column-panel { padding: 0; margin-bottom: 90px; .panel-body{ padding: 0; } } @media screen and (min-width: 1620px) { .col-xlg-1{ width: 8.33333333%; } .col-xlg-2{ width: 16.66666667%; } .col-xlg-3{ width: 25%; } .col-xlg-4{ width: 33.33333333%; } .col-xlg-5{ width: 41.66666667%; } .col-xlg-6{ width: 50%; } .col-xlg-7{ width: 58.33333333%; } .col-xlg-8{ width: 66.66666667%; } .col-xlg-9{ width: 75%; } .col-xlg-10{ width: 83.33333333%; } .col-xlg-11{ width: 91.66666667%; } .col-xlg-12{ width: 100%; } } ================================================ FILE: src/sass/app/maps/_google-maps.scss ================================================ #google-maps { width: 100%; height: calc(100vh - 283px); } ================================================ FILE: src/sass/app/maps/_leaflet.scss ================================================ #leaflet-map { height: calc(100vh - 283px); } /* required styles */ .leaflet-map-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-pane, .leaflet-tile-container, .leaflet-overlay-pane, .leaflet-shadow-pane, .leaflet-marker-pane, .leaflet-popup-pane, .leaflet-overlay-pane svg, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; -ms-touch-action: none; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } /* map is broken in FF if you have max-width: 100% on tiles */ .leaflet-container img { max-width: none !important; } /* stupid Android 2 doesn't understand "max-width: none" properly */ .leaflet-container img.leaflet-image-layer { max-width: 15000px !important; } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-tile-pane { z-index: 2; } .leaflet-objects-pane { z-index: 3; } .leaflet-overlay-pane { z-index: 4; } .leaflet-shadow-pane { z-index: 5; } .leaflet-marker-pane { z-index: 6; } .leaflet-popup-pane { z-index: 7; } .leaflet-vml-shape { width: 1px; height: 1px; } .lvml { behavior: url(#default#VML); display: inline-block; position: absolute; } /* control positioning */ .leaflet-control { position: relative; z-index: 7; pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } /* zoom and fade animations */ .leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup { opacity: 0; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-tile-loaded, .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-anim .leaflet-zoom-animated { transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile, .leaflet-touching .leaflet-zoom-animated { transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } /* cursors */ .leaflet-clickable { cursor: pointer; } .leaflet-container { cursor: -webkit-grab; cursor: -moz-grab; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-container, .leaflet-dragging .leaflet-clickable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; } /* visual tweaks */ .leaflet-container { background: #ddd; outline: 0; } .leaflet-container a { color: #0078A8; } .leaflet-container a.leaflet-active { outline: 2px solid orange; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255, 255, 255, 0.5); } /* general toolbar styles */ .leaflet-bar { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); a { background-color: $primary-dark; border-bottom: 1px solid #ccc; display: block; text-align: center; text-decoration: none; opacity: 0.8; color: $default-text; font-size: 17px; width: 20px; height: 20px; line-height: 18px; font-family: Lato; font-weight: $font-thin; &:hover { background-color: $danger; } &:last-child { border-bottom: none; } &.leaflet-control-zoom-out { line-height: 16px; } } } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: $disabled-bg; color: $disabled; } /* zoom control */ .leaflet-bar .leaflet-control-zoom-in, .leaflet-bar .leaflet-control-zoom-out { line-height: 18px; &:hover{ width: 20px; height: 20px; } } .leaflet-control-zoom-out { font-size: 20px; } .leaflet-touch .leaflet-control-zoom-in { font-size: 22px; } .leaflet-touch .leaflet-control-zoom-out { font-size: 24px; } /* layers control */ .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); background: $default; } .leaflet-control-layers-toggle { background-image: url(../img/layers.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(../img/layers-2x.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; } .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; } .leaflet-control-layers-expanded .leaflet-control-layers-list { display: block; position: relative; } .leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: $default; } .leaflet-control-layers-selector { margin-top: 2px; position: relative; top: 1px; } .leaflet-control-layers label { display: block; } .leaflet-control-layers-separator { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; } /* attribution and scale controls */ .leaflet-container .leaflet-control-attribution { background: $default; background: rgba(255, 255, 255, 0.7); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover { text-decoration: underline; } .leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale { font-size: 11px; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; font-size: 11px; white-space: nowrap; overflow: hidden; -moz-box-sizing: content-box; box-sizing: content-box; background: $default; background: rgba(255, 255, 255, 0.5); } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: none; background-clip: padding-box; } /* popup */ .leaflet-popup { position: absolute; text-align: center; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; } .leaflet-popup-content { margin: 13px 19px; line-height: 1.4; color: $dropdown-text; } .leaflet-popup-content p { margin: 18px 0; } .leaflet-popup-tip-container { margin: 0 auto; width: 40px; height: 20px; position: relative; overflow: hidden; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; padding: 4px 4px 0 0; text-align: center; width: 18px; height: 14px; font: 16px/14px Tahoma, Verdana, sans-serif; color: #c3c3c3; text-decoration: none; font-weight: $font-bold; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover { color: #999; } .leaflet-popup-scrolled { overflow: auto; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } .leaflet-oldie .leaflet-popup-content-wrapper { zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-popup-tip-container { margin-top: -1px; } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } /* div icon */ .leaflet-div-icon { background: $default; border: 1px solid #666; } ================================================ FILE: src/sass/app/maps/_map-bubbles.scss ================================================ #map-bubbles { width: 100%; height: calc(100vh - 283px); font-size : 11px; } /* #chartdiv1 { background: #3f3f4f; color:#ffffff; width : 100%; height : 500px; font-size : 11px; }*/ ================================================ FILE: src/sass/app/maps/_map-lines.scss ================================================ #map-lines { width: 100%; height: calc(100vh - 283px); } ================================================ FILE: src/sass/auth.scss ================================================ @import "common.scss"; @import "theme/_socicon.scss"; @import "theme/_layout.scss"; @import 'theme/buttons.scss'; @import 'app/form.scss'; html { min-height: 520px; height: 100%; } body { @include main-background(); height: 100%; } $text-color: #ffffff; .form-control, .form-control:focus { @include placeholderStyle($text-color, 0.9); background-color: rgba(0, 0, 0, .4); border-radius: 5px; color: $text-color; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { @include placeholderStyle($text-color, 0.6); } .auth-main { display: flex; align-items: center; height: 100%; width: 100%; } .auth-block { width: 540px; margin: 0 auto; border-radius: 5px; @include bg-translucent-dark(0.55); color: #fff; padding: 32px; h1 { font-weight: $font-light; margin-bottom: 28px; text-align: center; } p { font-size: 16px; } a { text-decoration: none; outline: none; transition: all 0.2s ease; color: $primary; &:hover { color: $primary-dark; } } .control-label { padding-top: 11px; color: $text-color; } .form-group { margin-bottom: 12px; } } .auth-input { width: 300px; margin-bottom: 24px; input { display: block; width: 100%; border: none; font-size: 16px; padding: 4px 10px; outline: none; } } a.forgot-pass { display: block; text-align: right; margin-bottom: -20px; float: right; z-index: 2; position: relative; } .auth-link { display: block; font-size: 16px; text-align: center; margin-bottom: 33px; } .auth-sep { margin-top: 36px; margin-bottom: 24px; line-height: 20px; font-size: 16px; text-align: center; display: block; position: relative; & > span { display: table-cell; width: 30%; white-space: nowrap; padding: 0 24px; color: $text-color; & > span { margin-top: -12px; display: block; } } &:before, &:after { border-top: solid 1px $text-color; content: ""; height: 1px; width: 35%; display: table-cell; } } .al-share-auth { text-align: center; .al-share { float: none; margin: 0; padding: 0; display: inline-block; li { margin-left: 24px; &:first-child { margin-left: 0; } i { font-size: 24px; } } } } .btn-auth { color: #ffffff!important; } ================================================ FILE: src/sass/common.scss ================================================ @import 'theme/conf/mixins'; @import 'theme/conf/colorScheme/mint'; @import 'theme/conf/variables'; ================================================ FILE: src/sass/main.scss ================================================ @import 'common'; // injector // endinjector ================================================ FILE: src/sass/theme/_blur-admin-theme.scss ================================================ .label { border-radius: 0; } .label-primary { background: $primary; } .label-info { background: $primary-light; } .label-success { background: $success; } .label-warning { background: $warning; } .label-danger { background: $danger; } ================================================ FILE: src/sass/theme/_buttons.scss ================================================ $hover: 24; .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; } .btn { border-radius: 5px; transition: all 0.1s ease; } .btn:hover { transform: scale(1.2); } @mixin styleButton($color, $borderColor) { background: $color; border-color: $borderColor; } @mixin buttonColor($color, $borderColor) { @include styleButton($color, $borderColor); &.disabled, &[disabled], fieldset[disabled] &, &.disabled:hover, &[disabled]:hover, fieldset[disabled] &:hover, &.disabled:focus, &[disabled]:focus, fieldset[disabled] &:focus, &.disabled.focus, &[disabled].focus, fieldset[disabled] &.focus, &.disabled:active, &[disabled]:active, fieldset[disabled] &:active, &.disabled.active, &[disabled].active, fieldset[disabled] &.active { @include styleButton($color, $borderColor + $hover/2); &:hover { transform: none; } } &:hover, &:focus, &.focus, &:active, &.active { @include styleButton($color, $borderColor - $hover); } } @mixin openDropdownButton($color, $dark-color) { @include styleButton($color, $color - $hover); background-color: $dark-color; border-color: $dark-color; } .open > .btn.dropdown-toggle { &.btn.btn-primary { @include openDropdownButton($primary, $primary-dark) } &.btn-success { @include openDropdownButton($success, $success-dark) } &.btn-info { @include openDropdownButton($info, $info-dark) } &.btn-warning { @include openDropdownButton($warning, $warning-dark) } &.btn-danger { @include openDropdownButton($danger, $danger-dark) } } button.btn.btn-primary { @include buttonColor($primary, $primary); &:active, &:target { background-color: $primary-dark; } } button.btn.btn-default { border-width: 1px; color: $default-text; @include buttonColor(transparent, $border); &:active, &:target { background-color: rgba(0, 0, 0, 0.2); color: $default-text; } } button.btn.btn-success { @include buttonColor($success, $success); &:active, &:target { background-color: $success-dark; } } button.btn.btn-info { @include buttonColor($info, $info); &:active, &:target { background-color: $info-dark; } } button.btn.btn-warning { @include buttonColor($warning, $warning); &:active, &:target { background-color: $warning-dark; } } button.btn.btn-danger { @include buttonColor($danger, $danger); &:active, &:target { background-color: $danger-dark; } } button.btn.btn-inverse { @include buttonColor($help-text, $help-text); color: $label-text; &:active, &:target, &:hover { background-color: $help-text; color: $label-text; } } .btn-with-icon { i { margin-right: 10px; } } .btn-group, .btn-toolbar { :hover { transform: none; } } @mixin buttonGroupColor($color) { border-color: $color - $hover/2; &:hover { border-color: $color - $hover; } } .btn-group { button.btn.btn-primary { @include buttonGroupColor($primary); } button.btn.btn-danger { @include buttonGroupColor($danger); } button.btn.btn-info { @include buttonGroupColor($info); } button.btn.btn-success { @include buttonGroupColor($success); } button.btn.btn-warning { @include buttonGroupColor($warning); } .dropdown-menu { margin-top: 0px; } } .btn-toolbar { display: inline-block; } .btn .caret { margin-left: 2px; } @mixin progressButtonColor($btnColor) { border-radius: 0; .content { &:after, &:before { color: darken($btnColor, 40); } } &.progress-button-style-move-up, &.progress-button-style-slide-down { .content { background-color: darken($btnColor, 10); } } &.progress-button-style-lateral-lines .progress-inner { border-color: darken($btnColor, 10); background: 0 0; } .progress { background-color: darken($btnColor, 10); box-shadow: 0 1px 0 darken($btnColor, 10); } .progress-inner { background-color: darken($btnColor, 20); } &.progress-button-perspective { background: none; .content { background-color: $btnColor; } } } button.progress-button { .progress { margin-bottom: 0; border-radius: 0; } &:hover { transform: none; } &.progress-button-style-shrink.btn.disabled.progress-button-dir-horizontal:hover { transform: scaleY(.3); } &.progress-button-style-shrink.btn.disabled.progress-button-dir-vertical:hover { transform: scaleX(.1); } &.btn.btn-primary { @include progressButtonColor($primary); } &.btn.btn-default { @include progressButtonColor($default); } &.btn.btn-success { @include progressButtonColor($success); } &.btn.btn-info { @include progressButtonColor($info); } &.btn.btn-warning { @include progressButtonColor($warning); } &.btn.btn-danger { @include progressButtonColor($danger); } } .btn-raised { box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35); } .btn-mm { padding: 5px 11px; font-size: 13px; } .btn-xm { padding: 8px 14px; font-size: 16px; } .dropdown button.btn.btn-default.dropdown-toggle { color: $default-text; border: 1px solid $border; background-color: transparent; &:focus, &:active { background-color: $default; } } .bootstrap-select { .dropdown-toggle:focus { outline: none !important; } button.btn-default:focus { color: $default; } .btn { transition: none; } } ================================================ FILE: src/sass/theme/_datePicker.scss ================================================ .datepicker { .btn:hover { transform: scale(1); } button.btn.btn-default { background-color: transparent; } button.btn.btn-default.active { background-color: $info; color: white; } button.btn.active span.ng-binding.text-info { color: white; } } .uib-datepicker-wrap { min-height:270px; } .uib-datepicker span.ng-binding.text-muted { color: $default-text; } .uib-datepicker-popup { background-color: $bootstrap-panel-bg; border-width: 0; color: black; button.btn { color: black; .text-muted { color: black; } } .glyphicon { color: rgba($progress-background, 1); } } ================================================ FILE: src/sass/theme/_icons.scss ================================================ @mixin svg-icon($url, $width:'', $height:'') { display: inline-block; background: url($url) no-repeat center; background-size: contain; vertical-align: middle; @if ($width != '') { width: $width + px; } @if ($height != '') { height: $height + px; } } @mixin svg-icon-class($iconName, $width:'', $height:'') { .#{'i-' + $iconName} { @include svg-icon($images-root + $iconName + '.svg', $width, $height); } } @include svg-icon-class('face', 80, 80); @include svg-icon-class('money', 80, 80); @include svg-icon-class('person', 80, 80); @include svg-icon-class('refresh', 80, 80); @mixin png-icon($url, $width, $height) { display: inline-block; width: $width + px; height: $height + px; background: url($url) no-repeat center center; background-size: $width + px $height + px; } @mixin png-icon-class($iconName, $width, $height) { .#{'i-' + $iconName} { @include png-icon($images-root + $iconName + '.png', $width, $height); } } //@include icon-png-class('arrival-icon', 11, 11); ================================================ FILE: src/sass/theme/_layout.scss ================================================ $left-space: 180px; @include scrollbars(.5em, #d9d9d9, rgba(0,0,0,0)); html { position: relative; min-width: 320px; } html, body { min-height: 100%; min-width: $resMin; } body { font: 14px/16px $font-family; color: $default-text; background-color: $body-bg; &.blur-theme { @include main-background(); } } body.mobile{ background: none; .body-bg{ display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-attachment: inherit; background-color: $body-bg; } &.blur-theme .body-bg{ @include main-background(); } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { html{ overflow: hidden; height: 100%; } body{ overflow: auto; height: 100%; } } a { transition: color 0.5s ease; outline: 0 !important; } .body-bg{ display: none; } .al-header { display: block; height: 49px; margin: 0; background-repeat: repeat-x; position: relative; z-index: 905; color: #444444; } .al-main { margin-left: $left-space; padding: 66px 0 34px 0; min-height: 500px; } .al-footer { height: 34px; padding: 0px 18px 0 $left-space; width: 100%; position: absolute; display: block; bottom: 0; font-size: 13px; color: $default-text; transition: padding-left 0.5s ease; } .al-footer-main { float: left; margin-left: 15px; } .al-copy { float: left; } .al-footer-right { float: right; margin-right: 12px; i { margin: 0 4px; color: $danger; font-size: 12px; } a { margin-left: 4px; color: $default-text; &:hover { color: $danger; } } } .al-share { margin: -6px 0 0 12px; padding: 0; list-style: none; float: left; li { list-style: none; float: left; margin-left: 16px; i { cursor: pointer; transition: all 0.1s ease; color: white; padding: 6px; box-sizing: content-box; font-size: 16px; &:hover { transform: scale(1.2); } } i.fa-facebook-square { color: $facebook-color; } i.fa-twitter-square { color: $twitter-color; } i.fa-google-plus-square { color: $google-color; } } } .al-content { padding: 8px 32px 8px 40px; } @media screen and (max-width: $resXS) { .al-content { padding: 8px 20px; } } .vis-hidden { visibility: hidden; position: absolute; top: -9999px; left: -9999px; } .icon-up, .icon-down { width: 5px; height: 13px; display: block; } .icon-up { @include bg-nr('arrow-green-up.svg'); } .icon-down { @include bg-nr('arrow-red-down.svg'); } .disable-text-selection { -webkit-touch-callout: none; user-select: none; } .align-right { text-align: right } .amcharts-chart-div > a { font-size: 6px !important; } .content-panel { padding-left: 22px; padding-top: 26px; } @media (max-width: 590px) { .al-footer-right { float: none; margin-bottom: 19px; margin-right: 0; } .al-footer { height: 76px; text-align: center; } .al-main { padding-bottom: 76px; } .al-footer-main { float: none; display: inline-block; } } .full-invisible { visibility: hidden!important; * { visibility: hidden!important; } } .irs-grid-text { color: $default-text; } ================================================ FILE: src/sass/theme/_preloader.scss ================================================ @-webkit-keyframes spin { 0% { transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); /* Firefox 16+*/ } 100% { -moz-transform: rotate(360deg); /* Firefox 16+*/ } } @keyframes spin { 0% { transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: #000000; backface-visibility: hidden; & > div { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: $danger; backface-visibility: hidden; transform: translate3d(0, 0, 0); backface-visibility: hidden; animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ &:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: $primary; -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } &:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: $warning; animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } } } ================================================ FILE: src/sass/theme/_socicon.scss ================================================ @font-face { font-family: 'socicon'; src: url('#{$fonts-root}socicon.eot'); src: url('#{$fonts-root}socicon.eot?#iefix') format('embedded-opentype'), url('#{$fonts-root}socicon.woff') format('woff'), url('#{$fonts-root}socicon.woff2') format('woff2'), url('#{$fonts-root}socicon.ttf') format('truetype'), url('#{$fonts-root}socicon.svg#sociconregular') format('svg'); font-weight: $font-normal; font-style: normal; text-transform: initial; } .socicon { font-family: 'socicon' !important; } .socicon { position: relative; top: 1px; display: inline-block; font-family: 'socicon'; font-style: normal; font-weight: $font-normal; line-height: 1; -webkit-font-smoothing: antialiased; } .socicon:empty { width: 1em; } @mixin socicon($background, $content) { background-color: $background; &:before { content: $content; } } .socicon-twitter { @include socicon($twitter-color, "a"); } .socicon-facebook { @include socicon($facebook-color, "b"); } .socicon-google { @include socicon($google-color, "c"); } .socicon-linkedin { @include socicon($linkedin-color, "j"); } .socicon-github { @include socicon($github-color, "Q"); } .socicon-stackoverflow { @include socicon($stackoverflow-color, "("); } .socicon-dribble { @include socicon($dribble-color, "D"); } .socicon-behace { @include socicon($behace-color, "H"); } ================================================ FILE: src/sass/theme/_table.scss ================================================ .table { margin-bottom: 0px; & > thead { & > tr { & > th { border-bottom: 1px solid $border-light; white-space: nowrap; &:first-child { text-align: center; } &:last-child { padding-right: 16px; } } } } & > tbody { & > tr { & > tr:first-child { padding-top: 1px; } & > td { padding: 0px 8px; line-height: 35px; border-top: 1px solid $border-light; &:first-child { text-align: center; } &:last-child { padding-right: 16px !important; } } } } } .table-id { text-align: left !important; width: 40px; } .table-arr { width: 5px; padding: 10px 8px 8px 0 !important; } .table-no-borders { border: none; td, th, tr { border: none !important; } } .editable-wrap .btn-group.form-control { background-color: transparent; } .editable-tr-wrap { .editable-wrap { vertical-align: super; } .editable-controls input.editable-input { width: 110px; } td { width: 20%; } } .editable-table-button { width: 70px; } .add-row-editable-table { margin-bottom: 10px; } .add-row-editable-table + table { margin-bottom: 5px; } .select-page-size-wrap { width: 150px; } .table .header-row th { vertical-align: middle; padding: 0 8px; } tr.editable-row { input.form-control { vertical-align: middle; } } .select-td .editable-select { margin-bottom: 1px; } @media screen and (max-width: 1199px) { .editable-tr-wrap { .editable-wrap { vertical-align: middle; } } } .browser-icons { width: 41px; } .st-sort-ascent, .st-sort-descent { position: relative; } .st-sort-ascent:after, .st-sort-descent:after { width: 0; height: 0; border-bottom: 4px solid $default-text; border-top: 4px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; margin-bottom: 2px; } .st-sort-descent:after { transform: rotate(-180deg); margin-bottom: -2px; } .sortable { th { cursor: pointer; &:after { content: ''; display: inline-block; width: 8px; margin-left: 8px; } } } a.email-link { color: $default-text; &:hover { color: $danger; } } input.search-input { margin-left: -8px; padding-left: 8px; } .table .pagination { margin: 4px 0 -12px 0; a { cursor: pointer; } } .vertical-scroll { max-height: 214px; } .pagination > li > a, .pagination > li > span { background: transparent; } .pagination > li:first-child > a, .pagination > li:first-child > span { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .status-button { width: 60px; } .table { .editable-wrap .editable-controls, .editable-wrap .editable-error { vertical-align: sub; .btn { &.dropdown-toggle { padding: 3px 20px; margin-top: 3px; } padding: 3px 8px; } input { line-height: 1px; height: 30px; } } } .form-inline button[type="submit"].editable-table-button { margin-left: 0; } .table { & > thead { & > tr { & > th { border-bottom: none; } } } & > tbody { & > tr.no-top-border { &:first-child > td { border-top: none; } } } } .black-muted-bg { background-color: rgba(0, 0, 0, 0.1); } .table-hover { > tbody > tr:hover { background-color: rgba(0, 0, 0, 0.1); } } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td{ border: 1px solid $border-light; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.1); } @mixin color-row($color) { background-color: rgba($color, 0.7); color: $label-text; border: none; a.email-link { color: $label-text; &:hover { color: $danger; } } } .table > tbody > tr.primary > td { @include color-row($primary); } .table > tbody > tr.success > td { @include color-row($success); } .table > tbody > tr.warning > td { @include color-row($warning); } .table > tbody > tr.danger > td { @include color-row($danger); } .table > tbody > tr.info > td { @include color-row($info); } .editable-click, a.editable-click { color: $default-text; border-bottom: dashed 1px $border; } th { font-weight: $font-normal; } .editable-empty { color: $danger-dark; } .table > tbody > tr > th { border: none; } .table-striped > tbody > tr > td { border: none; } .pagination > li > a, .pagination > li > span{ color: $default-text; border-color: $border; } .pagination > li:first-of-type > a, .pagination > li:first-of-type > span{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .pagination > li:last-of-type > a, .pagination > li:last-of-type > span{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: $primary; border-color: $border; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{ background-color: rgba(0,0,0,.2); color: $default-text; } .editable-buttons .btn-with-icon i { margin-right: 0; } .table-responsive { margin-top: 10px; } ================================================ FILE: src/sass/theme/_tree.scss ================================================ ================================================ FILE: src/sass/theme/bootstrap-overrides/_panel.scss ================================================ $panel-title-height: 44px; $panel-heading-font-size: 16px; .panel { @include scrollbars(.4em, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7)); color: $default-text; background-color: $default; border: none; border-radius: 5px; position: relative; margin-bottom: 24px; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); &.animated { animation-duration: 0.5s; } &.small-panel { height: $small-panel-height; } &.xsmall-panel { height: $xsmall-panel-height; } &.medium-panel { height: $medium-panel-height; } &.xmedium-panel { height: $extra-medium-panel-height; } &.large-panel { height: $large-panel-height; } &.viewport100 { height: calc(100vh - 218px); } &.with-scroll { .panel-body { height: calc(100% - #{$panel-title-height}); overflow-y: auto; } } } .panel.panel-blur { $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg'; background: url($blurredBgUrl); transition: none; background-attachment: fixed; } .panel { > .panel-body { padding: 15px 22px; height: 100%; } > .panel-heading { color: $default-text; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } > .panel-footer { color: $default-text; } } .panel-heading, .panel-footer { border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12); height: $panel-title-height; font-size: $panel-heading-font-size; $vertical-padding: ($panel-title-height - $panel-heading-font-size) / 2; padding: $vertical-padding 22px; } .panel-title { font-weight: $font-normal; text-transform: uppercase; opacity: 0.9; } .panel-default { > .panel-heading { color: $bootstrap-panel-text; } > .panel-footer { color: $bootstrap-panel-text; } } .panel-primary { > .panel-heading { background-color: $primary-bg; border-color: $primary-bg; } } .panel-success { > .panel-heading { background-color: $success-bg; border-color: $success-bg; } } .panel-info { > .panel-heading { background-color: $info-bg; border-color: $info-bg; } } .panel-warning { > .panel-heading { background-color: $warning-bg; border-color: $warning-bg; } } .panel-danger { > .panel-heading { background-color: $danger-bg; border-color: $danger-bg; } } .bootstrap-panel{ background-color: $bootstrap-panel-bg; .panel-body{ color: $bootstrap-panel-text; } } .accordion-panel.panel { &.panel-primary, &.panel-success, &.panel-info, &.panel-warning, &.panel-danger { .panel-heading { p, div, span { color: rgba(255, 255, 255, 0.8); } } } } .panel-group .panel.accordion-panel { .panel-heading { border-bottom: 0; } } .panel-group .panel { .panel-heading { border-bottom: 1px solid #ddd; } } .p-with-code { line-height: 1.5em; } .contextual-example-panel { height: 120px; } .footer-panel { height: 142px; } .light-text { font-weight: $font-light; } /* .panel-group .panel { border-radius: 0; }*/ ================================================ FILE: src/sass/theme/bootstrap-overrides/_tabs.scss ================================================ /** Different tabs positions, which were removed from bootstrap */ .tabs-below, .tabs-right, .tabs-left { .nav-tabs { border-bottom: 0; } } .tabs-right, .tabs-left { .nav-tabs { min-width: 100px; } .tab-content { width: calc(100% - 100px); overflow-y: auto; } } .tabs-right .tab-content { margin-right: 100px; } .tabs-left .tab-content { margin-left: 100px; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .tabs-below { > .nav-tabs { > li { margin-top: -1px; margin-bottom: 0; > a { &:hover, &:focus { } } } > .active a { &, &:hover, &:focus { } } } } .tabs-left, .tabs-right { height: 100%; > .nav-tabs > li { float: none; margin-bottom: 0; > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } } } .tabs-left > .nav-tabs { float: left; border-bottom-left-radius: 5px; > li > a { margin-right: -1px; &:hover, &:focus { } } > .active a { &, &:hover, &:focus { } } } .tabs-right > .nav.nav-tabs { float: right; border-top-left-radius: 0; border-bottom-right-radius: 5px; > li > a { &:hover, &:focus { } } & > li:first-of-type a { border-top-left-radius: 0; } > .active a { &, &:hover, &:focus { } } } /** /Different tabs positions, which were removed from bootstrap */ .nav-tabs > li.with-dropdown { > a { padding: 0; } .dropdown-toggle { padding: 10px 15px; display: inline-block; cursor: pointer; } } .tab-content { padding: 15px 15px 5px 15px; background: transparent; color: $default-text; .tab-pane p { color: $default-text; } } .nav.nav-tabs { border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid transparent; background-color: $primary-light; a { color: $label-text; &:hover { color: $label-text; } } & > li > a { margin-right: 0; margin-bottom: 0; border-radius: 0; border: none; &:hover, &:focus { border: none; background-color: $primary-light; } } & > li.active > a { color: $label-text; background-color: $primary; } > li:first-of-type a { border-top-left-radius: 5px; } .dropdown-menu > li > a { color: $dropdown-text; &:hover { color: $dropdown-text; } } } .blur-theme { .nav.nav-tabs { background-color: rgba(0, 0, 0, 0.2); a { color: $default-text; &:hover { color: $default-text; } } & > li > a:hover { background-color: rgba(0, 0, 0, 0.2); } & > li.active > a { color: $default-text; background-color: rgba(0, 0, 0, 0.25); } } } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: none; } .accordion-panel { .panel-heading { border-radius: 3px; } &.panel-open .panel-heading { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } &:not(.panel-open) .panel-heading { transition-delay: .3s; } > .panel-heading + .panel-collapse > .panel-body { border-top: none; } } .accordion-panel .panel-heading { padding: 0; .accordion-toggle { display: inline-block; width: 100%; padding: 14px 22px; } } ================================================ FILE: src/sass/theme/components/_accordion.scss ================================================ /* .panel-group { > .panel { > .panel-heading { padding: 0; > h4.panel-title { height: 50px; width: 100%; padding: 0; > a { display: block; padding: 15px 22px; width: 100%; } } } } } .panel-collapse { transition: height $default-animation-duration $default-animation-style; .panel-body { padding: 15px; } }*/ ================================================ FILE: src/sass/theme/components/_baWizard.scss ================================================ .ba-wizard-progress { margin-top: 10px; height: 10px; } .ba-wizard-pager { .previous { float: left; } .next { float: right; } } .ba-wizard-navigation-container { display: table; table-layout: fixed; width: 100%; padding: 15px 0; .ba-wizard-navigation { cursor: pointer; display: table-cell; line-height: 1; text-align: center; font-weight: $font-light; font-size: 18px; opacity: 0.7; &.active { opacity: 0.95; } } } ================================================ FILE: src/sass/theme/components/_backTop.scss ================================================ $height: 52px; .back-top { width: $height; height: $height; cursor: pointer; z-index: 9999; display: none; text-decoration: none; right: (180px - $height) / 2; bottom: 40px !important; font-size: 45px; text-align: center; opacity: 0.4; color: $primary; background-color: rgba(0, 0, 0, 0.75); border-radius: 50%; line-height: 46px; &:hover { opacity: 0.8; } } ================================================ FILE: src/sass/theme/components/_contentTop.scss ================================================ .content-top { padding-top: 13px; padding-bottom: 27px; } h1.al-title { font-weight: $font-bold; color: $default-text; float: left; width: auto; margin: 0; padding: 0; font-size: 24px; text-transform: uppercase; opacity: 0.9; } .al-breadcrumb { background: none; color: $default-text; padding: 0; margin: 0; float: right; padding-top: 11px; li { font-size: 18px; font-weight: $font-normal; } } .al-look { float: right; margin-right: 10px; padding-top: 10px; > a { font-size: 19px; } } ================================================ FILE: src/sass/theme/components/_msgCenter.scss ================================================ /* msg center */ @-webkit-keyframes pulsate { 30% { -webkit-transform: scale(0.1, 0.1); opacity: 0.0; } 35% { opacity: 1.0; } 40% { -webkit-transform: scale(1.2, 1.2); opacity: 0.0; } } .al-msg-center { float: right; padding: 0; list-style: none; margin: 13px 47px 0 0; li { list-style: none; float: left; margin-left: 30px; &:first-child { margin-left: 0; } & > a { color: $sidebar-text; text-decoration: none; font-size: 13px; position: relative; span { display: inline-block; min-width: 10px; padding: 2px 4px 2px 4px; color: $sidebar-text; vertical-align: baseline; white-space: nowrap; text-align: center; border-radius: 13px; text-shadow: none; line-height: 11px; background-color: $danger; position: absolute; top: -5px; right: -14px; font-size: 11px; } .notification-ring { border: 1px solid $danger; border-radius: 100px; height: 40px; width: 40px; position: absolute; top: -18px; right: -27px; animation: pulsate 8s ease-out; animation-iteration-count: infinite; opacity: 0.0 } &:hover { color: $danger; &.msg { color: $primary; } } &.msg { span { background-color: $primary; } .notification-ring { border-color: $primary; } } } &.open { & > a { color: $danger; &.msg { color: $primary; } } } } } @media (max-width: $resXXS) { .al-msg-center { margin-right: 20px; li { margin-left: 20px; &:first-child { margin-left: 0; } } } } .msg-block-header { display: inline-block; padding: 0; font-size: 13px; margin: 0 0 0 6px; } .top-dropdown-menu { width: 316px; left: auto; right: -47px; top: 26px; @include scrollbars(.4em, rgba(0,0,0,0.5), #fff); .header { padding: 10px 12px; border-bottom: 1px solid $default; font-size: 12px; strong { float: left; color: $dropdown-text; } & > a { float: right; margin-left: 12px; text-decoration: none; &:hover { color: $dropdown-text; } } } .msg-list { max-height: 296px; overflow: scroll; overflow-x: hidden; & > a { border-top: 1px solid $default; padding: 10px 12px; display: block; text-decoration: none; color: $dropdown-text; font-size: 12px; &:first-child { border-top: none; } .img-area { float: left; width: 36px; img { width: 36px; height: 36px; &.photo-msg-item{ border-radius: 18px; } } & > div { width: 36px; height: 36px; border-radius: 4px; font-size: 24px; text-align: center; &.comments { color: $warning; } &.orders { color: $warning; } i { width: 36px; line-height: 36px; } } } .msg-area { float: right; width: 230px; div { max-height: 34px; overflow: hidden; text-overflow: ellipsis; } span { font-style: italic; text-align: right; display: block; font-size: 11px; } } &:hover { background: #E2F0FF; } } } & > a { border-top: 1px solid $default; display: block; text-align: center; padding: 10px; font-size: 12px; text-decoration: none; &:hover { color: $dropdown-text; } } &.profile-dropdown { width: 145px; top: 55px; right: -25px; a { text-align: left; border: none; text-decoration: none; color: $dropdown-text; padding: 4px 16px 4px 20px; &.signout { border-top: 1px solid $default; } i { margin-right: 10px; } &:hover { background: #f4fcff; } } i.dropdown-arr { right: 25px; } } i.dropdown-arr { position: absolute; top: -22px; right: 42px; display: block; width: 0; height: 0; border: 11px solid transparent; border-bottom-color: rgba(0, 0, 0, .15); &:after { top: -9px; left: 0px; margin-left: -10px; content: " "; position: absolute; display: block; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: $default; } } } @media (max-width: 415px) { .top-dropdown-menu { right: -81px; i.dropdown-arr { right: 75px; } } } ================================================ FILE: src/sass/theme/components/_pageTop.scss ================================================ .page-top { background-color: $sidebar; position: fixed; z-index: 904; box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5); height: 66px; width: 100%; min-width: $resMin; padding: 0 32px 0 40px; &.scrolled { background-color: rgba(black, 0.85) } } a.al-logo { color: $sidebar-text; display: block; font-size: 24px; font-family: $font-family; white-space: nowrap; float: left; outline: none !important; line-height: 60px; span { color: $primary; } } .user-profile { float: right; min-width: 230px; margin-top: 10px; } .al-user-profile { float: right; margin-right: 12px; transition: all .15s ease-in-out; padding: 0; width: 36px; height: 36px; border: 0; opacity: 1; position: relative; a { display: block; } img { width: 45px; height: 45px; border-radius: 50%; } } a.refresh-data { color: $sidebar-text; font-size: 13px; text-decoration: none; font-weight: $font-normal; float: right; margin-top: 13px; margin-right: 26px; &:hover { color: $warning !important; } } a.collapse-menu-link { font-size: 31px; cursor: pointer; display: block; text-decoration: none; line-height: 42px; color: $sidebar-text; padding: 0; float: left; margin: 11px 0 0 25px; &:hover { text-decoration: none; color: $warning; } } .al-skin-dropdown { float: right; margin-top: 14px; margin-right: 26px; .tpl-skin-panel { max-height: 300px; overflow-y: scroll; overflow-x: hidden; } } .icon-palette { display: inline-block; width: 14px; height: 13px; @include bg('theme/palette.png'); background-size: cover; } .search { text-shadow: none; color: $sidebar-text; font-size: 13px; line-height: 25px; transition: all 0.5s ease; white-space: nowrap; overflow: hidden; width: 162px; float: left; margin: 20px 0 0 30px; label { cursor: pointer; } i { width: 16px; display: inline-block; cursor: pointer; padding-left: 1px; font-size: 16px; margin-right: 13px; } input { background: none; border: none; outline: none; width: 120px; padding: 0; margin: 0 0 0 -3px; height: 27px; } } @media screen and (max-width: $resS) { .search { display: none; } } @media screen and (max-width: $resXS) { .page-top { padding: 0 20px; } } @media (max-width: $resXXS) { .user-profile{ min-width: 136px; } a.refresh-data { margin-right: 10px; } a.collapse-menu-link { margin-left: 10px; } .al-skin-dropdown { display: none; } } .profile-toggle-link{ cursor: pointer; } ================================================ FILE: src/sass/theme/components/_progressRound.scss ================================================ svg.progress-bar-round circle { transition: 0.5s; } .percentage { font-size: 46px; } .loading { font-size: 16px; } .progress-bar-round { margin-top: 15px; } ================================================ FILE: src/sass/theme/components/_sidebar.scss ================================================ $sidebar-width: 180px; $angle-left: "\f100"; $angle-right: "\f101"; .al-sidebar { width: $sidebar-width; top: $top-height; left: 0; z-index: 904; display: block; min-height: 100%; background-color: $sidebar; height: 100%; position: fixed; } .al-sidebar-list { margin: 0; padding: 18px 0 0 0; list-style: none; } .al-sidebar-sublist .subitem-submenu-list { padding-left: 15px; } .subitem-submenu-link { .fa { top: 7px; } } .al-sidebar-list-item { display: block; position: relative; float: none; padding: 0; &.selected:not(.with-sub-menu) { background-color: $primary; a.al-sidebar-list-link { color: $sidebar-text; b { color: $sidebar-text; } } } } .al-sidebar-list-item, .ba-sidebar-sublist-item { &.ba-sidebar-item-expanded { > .al-sidebar-list-link { b { transform: rotate(180deg); } } > .al-sidebar-sublist { display: block; } } } a.al-sidebar-list-link { display: block; height: 42px; padding-left: 18px; text-shadow: none; font-size: 13px; text-decoration: none; color: $sidebar-text; line-height: 42px; white-space: nowrap; overflow: hidden; cursor: pointer; &:hover { color: $primary; b { color: $primary; } } i { margin-right: 18px; width: 16px; display: inline-block; } b { display: block; opacity: 1; width: 14px; height: 14px; line-height: 14px; text-shadow: none; font-size: 18px; position: absolute; right: 10px; top: 12px; padding: 0; text-align: center; color: $sidebar-text; transition: transform 0.2s linear; } } .slimScrollBar, .slimScrollRail { border-radius: 0px !important; width: 4px !important; left: 176px; } @mixin layout-collapsed() { .al-main { margin-left: 50px; } .al-footer { padding-left: 83px } } @mixin default-sublist() { padding: 0; list-style: none; position: relative; display: none; &.expanded { display: block; } > li { display: block; float: none; padding: 0; border-bottom: none; position: relative; a { display: block; text-shadow: none; font-size: 13px; text-decoration: none; color: $sidebar-text; padding-left: 52px; height: auto; line-height: 29px; &:hover { color: $primary; } } &.selected:not(.with-sub-menu) > a { border: none; background-color: $primary; &:hover { color: $sidebar-text; } } } } .al-sidebar-sublist { @include default-sublist(); } .sidebar-hover-elem{ width: 4px; background: $primary; position: absolute; top: -150px; left: 176px; transition: all 0.5s ease; transition-property: top, height; height: 42px; display: block; } .sidebar-select-elem { display: block; top: 94px; } @mixin sidebar-collapsed() { .al-sidebar { width: 52px; .fa-angle-down, .fa-angle-up { opacity: 0; } .al-sidebar-sublist { position: absolute; top: -1px; left: 52px; @include bg-translucent-dark(0.8); width: 0; display: block; overflow: hidden; transition: width 0.5s ease; &.slide-right { width: 135px; } &:before { display: none; } li { &:before { display: none; } a { padding-left: 18px; padding-right: 18px; min-width: 130px; white-space: nowrap; } } } .sidebar-hover-elem, .sidebar-select-elem { left: 48px; } } } @mixin sidebar-hidden() { .al-sidebar { width: 0; } .sidebar-hover-elem, .sidebar-select-elem { display: none; } } @mixin sidebar-overlap() { .al-sidebar { width: $sidebar-width; @include bg-translucent-dark(0.75); transition: width 0.5s ease; .fa-angle-down, .fa-angle-up { opacity: 1; } .al-sidebar-sublist { @include default-sublist(); top: auto; left: auto; background: none; width: auto; overflow: visible; transition: none; } .sidebar-hover-elem, .sidebar-select-elem { left: $sidebar-width - 4; transition: left 0.5s ease; } } } @media (min-width: 1200px) { .menu-collapsed { @include layout-collapsed(); } } @media (min-width: $resXS + 1) { .menu-collapsed { @include sidebar-collapsed(); } } @media (max-width: 1200px) and (min-width: $resXS) { @include layout-collapsed(); } @media (max-width: 1200px) { @include sidebar-overlap(); } @media (max-width: $resXS) { .menu-collapsed { @include sidebar-hidden(); } .al-main { margin-left: 0; } .al-footer { padding-left: 0; } } ================================================ FILE: src/sass/theme/components/_widgets.scss ================================================ .widgets { transform: translate3d(0, 0, 0); backface-visibility: hidden; } .full-width { margin: 0 -22px -16px; } .horizontal-scroll { overflow-x: auto; overflow-y: visible; } .panel-subtitle { font-size: 15px; margin-bottom: 16px; } .panel-nav { position: absolute; top: 12px; right: 15px; z-index: 2; i { cursor: pointer; font-size: 14px; color: #bfbfbf; margin-left: 11px; display: inline-block; &.fa-minus { margin-bottom: -1px; vertical-align: bottom; } &:hover { color: $default-text; } } } ================================================ FILE: src/sass/theme/conf/_mixins.scss ================================================ /// Slightly lighten a color /// @access public /// @param {Color} $color - color to tint /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function tint($color, $percentage) { @return mix(white, $color, $percentage); } /// Slightly darken a color /// @access public /// @param {Color} $color - color to shade /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function shade($color, $percentage) { @return mix(black, $color, $percentage); } @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { ::-webkit-scrollbar { width: $size; height: $size; } ::-webkit-scrollbar-thumb { background: $foreground-color; cursor: pointer; } ::-webkit-scrollbar-track { background: $background-color; } // For Internet Explorer body { scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; } } @mixin bg-nr($relativeUrl) { background: url($images-root + $relativeUrl) no-repeat 0 0; } @mixin bg($relativeUrl) { background: url($images-root + $relativeUrl); } @mixin bg-image($relativeUrl) { background-image: url($images-root + $relativeUrl); } @mixin main-background() { $mainBgUrl: $images-root + 'blur-bg.jpg'; &::before { content: ''; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: url($mainBgUrl) no-repeat center center; background-size: cover; will-change: transform; z-index: -1; } } @mixin bg-translucent-dark($opacity) { background: rgba(0, 0, 0, $opacity); } @mixin placeholderStyle($color, $opacity) { &::-webkit-input-placeholder { color: $color; opacity: $opacity; } &:-moz-placeholder { /* Firefox 18- */ color: $color; opacity: $opacity; } &::-moz-placeholder { /* Firefox 19+ */ color: $color; opacity: $opacity; } &:-ms-input-placeholder { color: $color; opacity: $opacity; } } @mixin overrideColors($color) { p, h1,h2,h3,h4,h5,h6, .pie-chart-item, .panel-heading>.dropdown .dropdown-toggle, .panel-title, ol.blur span, ul.blur, .popular-app-cost, .popular-app-info, .panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a, .traffic-text span, .form-group label, .help-block{ color: $color; } .feed-message .message-time, .text-muted { color: darken($color, 20); } } ================================================ FILE: src/sass/theme/conf/_variables.scss ================================================ $font-family: 'Roboto', sans-serif; $activelink: $primary; $hoverlink: $primary-dark; $resXXL: 1280px; $resXL: 1170px; $resL: 991px; $resM: 768px; $resS: 660px; $resXS: 500px; $resXXS: 435px; $resMin: 320px; $top-height: 66px; $small-panel-height: 114px; $xsmall-panel-height: 187px; $medium-panel-height: 400px; $extra-medium-panel-height: 550px; $large-panel-height: 974px; $default-animation-duration: 0.2s; $default-animation-style: ease-out; $assets-root: '../assets/'; $images-root: $assets-root + 'img/'; $fonts-root: $assets-root + 'fonts/'; $font-thin: 100; $font-light: 300; $font-normal: 400; $font-bold: 700; $font-ultraBold: 900; $facebook-color: #3b5998; $twitter-color: #55acee; $google-color: #dd4b39; $linkedin-color: #0177B5; $github-color: #6b6b6b; $stackoverflow-color: #2F96E8; $dribble-color: #F26798; $behace-color: #0093FA; ================================================ FILE: src/sass/theme/conf/colorScheme/_blur.scss ================================================ $default: rgba(#000000, 0.2); $body-bg: #F0F3F4; $default-text: #ffffff; $help-text: #eeeeee; $label-text: #ffffff; $disabled: #dddddd; $disabled-bg: transparent; $border: #ffffff; $border-light: rgba(#ffffff, 0.2); $input-border: transparent; $input-background: rgba(#000000, 0.15); $sidebar: rgba(#000000, 0.5); $sidebar-text: #ffffff; $dropdown-text: #7d7d7d; $bootstrap-panel-text: #7d7d7d; $bootstrap-panel-bg: #ffffff; $mail-box: whitesmoke; $auth-panel-background: rgba(#000000, 0.55); $progress-background: rgba(#000000, 0.15); $progress-default: #ffffff; $primary: #209e91 !default; $info: #2dacd1 !default; $success: #90b900 !default; $warning: #dfb81c !default; $danger: #e85656 !default; $primary-light: tint($primary, 30%); $info-light: tint($info, 30%); $success-light: tint($success, 30%); $warning-light: tint($warning, 30%); $danger-light: tint($danger, 30%); $primary-dark: shade($primary, 15%); $info-dark: shade($info, 15%); $success-dark: shade($success, 15%); $warning-dark: shade($warning, 15%); $danger-dark: shade($danger, 15%); $primary-bg: tint($primary, 20%); $info-bg: tint($info, 20%); $success-bg: tint($success, 20%); $warning-bg: tint($warning, 20%); $danger-bg: tint($danger, 20%); ================================================ FILE: src/sass/theme/conf/colorScheme/_mint.scss ================================================ $default: #ffffff; $body-bg: #F0F3F4; $default-text: #666666; $help-text: #949494; $label-text: #ffffff; $disabled: #dddddd; $disabled-bg: tint($disabled, 15%); $border: #d6d6d6; $border-light: tint($border, 15%); $input-border: shade($border, 5%); $input-background: #ffffff; $sidebar: #1C2B36; $sidebar-text: #ffffff; $dropdown-text: #7d7d7d; $bootstrap-panel-text: #7d7d7d; $bootstrap-panel-bg: #ffffff; $mail-box: whitesmoke; $auth-panel-background: #ffffff; $progress-background: rgba(#000000, 0.07); $progress-default: rgba(#000000, 0.15); $primary: #209e91 !default; $info: #2dacd1 !default; $success: #90b900 !default; $warning: #dfb81c !default; $danger: #e85656 !default; $primary-light: tint($primary, 30%); $info-light: tint($info, 30%); $success-light: tint($success, 30%); $warning-light: tint($warning, 30%); $danger-light: tint($danger, 30%); $primary-dark: shade($primary, 15%); $info-dark: shade($info, 15%); $success-dark: shade($success, 15%); $warning-dark: shade($warning, 15%); $danger-dark: shade($danger, 15%); $primary-bg: tint($primary, 20%); $info-bg: tint($info, 20%); $success-bg: tint($success, 20%); $warning-bg: tint($warning, 20%); $danger-bg: tint($danger, 20%); ================================================ FILE: src/sass/theme/dashboard/_amChart.scss ================================================ #amchart { width: 100%; height: 350px; margin-top: -20px; } ================================================ FILE: src/sass/theme/dashboard/_amChartMap.scss ================================================ #amChartMap { width: 100%; height: 315px; } ================================================ FILE: src/sass/theme/dashboard/_blurFeed.scss ================================================ .feed-panel .panel-body{ padding: 10px 0; } .feed-message { $text-message-color: $default-text; $video-message-color: $danger; $image-message-color: $success; $geo-message-color: $primary; padding: 10px 0 ; border-bottom: 1px solid rgba(0,0,0,0.12); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); &:first-child { padding-top: 0; } .message-icon { cursor: pointer; width: 60px; height: 60px; float: left; position: relative; margin-left: 20px; > img, .media-icon { border-radius: 30px; width: 100%; height: 100%; } .sub-photo-icon { display: inline-block; padding: 4px; &:after { content: ''; display: inline-block; width: 22px; height: 22px; background-size: contain; } &.video-message { background: $video-message-color; &:after { @include bg-image('theme/icon/feed/feed-video.svg'); } } &.image-message { background: $image-message-color; &:after { width: 21px; height: 21px; margin-top: 1px; margin-left: 1px; border-radius: 5px; @include bg-image('theme/icon/feed/feed-image.svg'); } } &.geo-message { background: $geo-message-color; &:after { width: 22px; height: 22px; @include bg-image('theme/icon/feed/feed-location.svg'); } } } .sub-photo-icon { position: absolute; width: 30px; height: 30px; right: -2px; bottom: -4px; border-radius: 15px; } } .text-block { cursor: pointer; position: relative; border-radius: 5px; margin: 0 0 0 80px; padding: 5px 20px; color: $default-text; width: 280px; height: 70px; &.text-message { font-size: 12px; width: inherit; max-width: calc(100% - 80px); height: inherit; min-height: 60px; &:before { display: block; } .message-content { font-size: 12px; line-height: 15px; font-weight: $font-light; } } &.small-message { width: 155px; height: 145px; .preview { bottom: 0; top: initial; height: 87px; img { width: 155px; height: 87px; border-radius: 0 0 5px 5px; } } } } .message-header { font-size: 12px; padding-bottom: 5px; .author { font-size: 13px; padding-right: 5px; } } .message-content { font-size: 18px; line-height: 20px; } .preview { transition: 0s linear all; display: inline-block; img { padding-top: 10px; width: 100%; height: auto; float: none!important; } } .message-time { width: 100%; left: 0; font-size: 11px; padding-top: 10px; color: $help-text; margin-bottom: 5px; .post-time { float: left; } .ago-time { float: right; } } } .line-clamp { display : block; display : -webkit-box; -webkit-box-orient : vertical; position : relative; line-height : 1.2; overflow : hidden; text-overflow : ellipsis; padding : 0 !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { .line-clamp:after { content : '...'; text-align : right; bottom : 0; right : 0; width : 25%; display : block; position : absolute; height : calc(1em * 1.2); } } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display : none !important; } } .line-clamp-1 { -webkit-line-clamp : 1; height : calc(1em * 1.2 * 1); } .line-clamp-2 { -webkit-line-clamp : 2; height : calc(1em * 1.2 * 2); } .line-clamp-3 { -webkit-line-clamp : 3; height : calc(1em * 1.2 * 3); } .line-clamp-4 { -webkit-line-clamp : 4; height : calc(1em * 1.2 * 4); } .line-clamp-5 { -webkit-line-clamp : 5; height : calc(1em * 1.2 * 5); } ================================================ FILE: src/sass/theme/dashboard/_calendar.scss ================================================ div.blurCalendar{ font-size: 12px; } .fc { direction: ltr; text-align: left; button { box-sizing: border-box; margin: 0; height: 2.1em; padding: 0 .6em; font-size: 1em; white-space: nowrap; cursor: pointer; &::-moz-focus-inner { margin: 0; padding: 0; } .fc-icon { position: relative; top: 0; margin: 0; } } .fc-button-group { & > * { float: left; margin: 0 0 0 -1px; } & > :first-child { margin-left: 0; } } hr { height: 0; margin: 0; padding: 0 0 2px; border-style: solid; border-width: 1px 0; } table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; font-size: 1em; } th { text-align: center; } th, td { border: 1px solid rgba(255,255,255,0.3); padding: 0; vertical-align: top; } td.fc-today { border-style: double; } .fc-row { border: 0 solid; } .fc-toolbar { & > * { & > * { float: left; margin-left: .75em; } & > :first-child { margin-left: 0; } } } .fc-axis { vertical-align: middle; padding: 0 4px; white-space: nowrap; } } .fc-rtl { text-align: right; } .fc-unthemed { th, td, hr, thead, tbody, .fc-row, .fc-popover { border-color: rgba($border, 0.3); } .fc-popover { background-color: $default; border: 1px solid; .fc-header { background: #eee; .fc-close { color: #666666; font-size: 25px; margin-top: 4px; } } } hr { background: #eee; } .fc-today { background: rgba(255,255,255,0.15); } } .fc-highlight { background: rgba(255,255,255,0.25); opacity: .3; } .fc-icon { display: inline-block; font-size: 2em; font-family: "Courier New", Courier, monospace; } .fc-icon-left-single-arrow:after { content: "\02039"; font-weight: $font-bold; font-size: 100%; } .fc-icon-right-single-arrow:after { content: "\0203A"; font-weight: $font-bold; font-size: 100%; } .fc-icon-left-double-arrow:after { content: "\000AB"; } .fc-icon-right-double-arrow:after { content: "\000BB"; } .fc-icon-x:after { content: "\000D7"; } .fc-state-default { border: 1px solid; outline: none; background: #f5f5f5 repeat-x; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); color: #333333; &.fc-corner-left { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } &.fc-corner-right { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } } .fc-state-hover, .fc-state-down, .fc-state-active, .fc-state-disabled { color: #333333; background-color: $disabled-bg; } .fc-state-hover { color: #333333; text-decoration: none; background-position: 0 -15px; transition: background-position 0.1s linear; } .fc-state-down, .fc-state-active { background: #cccccc none; } .fc-state-disabled { cursor: default; background-image: none; opacity: 0.65; box-shadow: none; } .fc-button-group { display: inline-block; } .fc-popover { position: absolute; .fc-header { padding: 2px 4px; } .fc-header .fc-title { margin: 0 2px; } .fc-header .fc-close { cursor: pointer; } } .fc-ltr .fc-popover .fc-header .fc-title, .fc-rtl .fc-popover .fc-header .fc-close { float: left; } .fc-rtl .fc-popover .fc-header .fc-title, .fc-ltr .fc-popover .fc-header .fc-close { float: right; } .fc-popover > .ui-widget-header + .ui-widget-content { border-top: 0; } .fc-clear { clear: both; } .fc-bg, .fc-highlight-skeleton, .fc-helper-skeleton { position: absolute; top: 0; left: 0; right: 0; } .fc-bg { bottom: 0; } .fc-bg table { height: 100%; } .fc-row { position: relative; table { border-left: 0 hidden transparent; border-right: 0 hidden transparent; border-bottom: 0 hidden transparent; } &:first-child table { border-top: 0 hidden transparent; } .fc-bg { z-index: 1; } .fc-highlight-skeleton { z-index: 2; bottom: 0; table { height: 100%; } td { border-color: transparent; } } .fc-content-skeleton { position: relative; z-index: 3; padding-bottom: 2px; } .fc-helper-skeleton { z-index: 4; } .fc-content-skeleton td, .fc-helper-skeleton td { background: none; border-color: transparent; border-bottom: 0; } .fc-content-skeleton tbody td, .fc-helper-skeleton tbody td { border-top: 0; } } .fc-scroller { //overflow-y: scroll; //overflow-x: hidden; & > * { //position: relative; //width: 100%; //overflow: hidden; //height: 100%; } } .fc-event { position: relative; display: block; font-size: .85em; line-height: 1.3; border: 1px solid $primary; background-color: $primary; font-weight: $font-normal; } .fc-event, .fc-event:hover, .ui-widget .fc-event { color: $label-text; text-decoration: none; } .fc-event[href], .fc-event.fc-draggable { cursor: pointer; } .fc-day-grid-event { margin: 1px 2px 0; padding: 0 1px; } .fc-ltr .fc-day-grid-event.fc-not-start, .fc-rtl .fc-day-grid-event.fc-not-end { margin-left: 0; border-left-width: 0; padding-left: 1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .fc-ltr .fc-day-grid-event.fc-not-end, .fc-rtl .fc-day-grid-event.fc-not-start { margin-right: 0; border-right-width: 0; padding-right: 1px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .fc-day-grid-event > .fc-content { white-space: nowrap; overflow: hidden; } .fc-day-grid-event .fc-time { font-weight: $font-bold; } .fc-day-grid-event .fc-resizer { position: absolute; top: 0; bottom: 0; width: 7px; } .fc-ltr .fc-day-grid-event .fc-resizer { right: -3px; cursor: e-resize; } .fc-rtl .fc-day-grid-event .fc-resizer { left: -3px; cursor: w-resize; } a.fc-more { margin: 1px 3px; font-size: .85em; cursor: pointer; text-decoration: none; &:hover { text-decoration: underline; } } .fc-limited { display: none; } .fc-day-grid .fc-row { z-index: 1; } .fc-more-popover { z-index: 2; width: 220px; .fc-event-container { padding: 10px; } } .fc-toolbar { text-align: center; margin-bottom: 1em; .fc-left { float: left; } .fc-right { float: right; } .fc-center { display: inline-block; } h2 { margin: 0; font-size: 24px; width: 100%; line-height: 26px; } button { position: relative; } .fc-state-hover, .ui-state-hover { z-index: 2; } .fc-state-down { z-index: 3; } .fc-state-active, .ui-state-active { z-index: 4; } button:focus { z-index: 5; } } .fc-view-container *, .fc-view-container *:before, .fc-view-container *:after { box-sizing: content-box; } .fc-view, .fc-view > table { position: relative; z-index: 1; } .fc-basicWeek-view .fc-content-skeleton, .fc-basicDay-view .fc-content-skeleton { padding-top: 1px; padding-bottom: 1em; } .fc-basic-view tbody .fc-row { min-height: 4em; max-height: 70px; } .fc-row.fc-rigid { overflow: hidden; } .fc-row.fc-rigid .fc-content-skeleton { position: absolute; top: 0; left: 0; right: 0; } .fc-basic-view .fc-week-number, .fc-basic-view .fc-day-number { padding: 0 2px; } .fc-basic-view td.fc-week-number span, .fc-basic-view td.fc-day-number { padding-top: 2px; padding-bottom: 2px; } .fc-basic-view .fc-week-number { text-align: center; } .fc-basic-view .fc-week-number span { display: inline-block; min-width: 1.25em; } .fc-ltr .fc-basic-view .fc-day-number { text-align: right; } .fc-rtl .fc-basic-view .fc-day-number { text-align: left; } .fc-day-number.fc-other-month { opacity: 0.3; } .fc-agenda-view .fc-day-grid { position: relative; z-index: 2; } .fc-agenda-view .fc-day-grid .fc-row { min-height: 3em; } .fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton { padding-top: 1px; padding-bottom: 1em; } .fc-ltr .fc-axis { text-align: right; } .fc-rtl .fc-axis { text-align: left; } .ui-widget td.fc-axis { font-weight: $font-normal; } .fc-time-grid-container, .fc-time-grid { position: relative; z-index: 1; } .fc-time-grid { min-height: 100%; } .fc-time-grid table { border: 0 hidden transparent; } .fc-time-grid > .fc-bg { z-index: 1; } .fc-time-grid .fc-slats, .fc-time-grid > hr { position: relative; z-index: 2; } .fc-time-grid .fc-highlight-skeleton { z-index: 3; } .fc-time-grid .fc-content-skeleton { position: absolute; z-index: 4; top: 0; left: 0; right: 0; } .fc-time-grid > .fc-helper-skeleton { z-index: 5; } .fc-slats { td { height: 1.5em; border-bottom: 0; } .fc-minor td { border-top-style: dotted; } .ui-widget-content { background: none; } } .fc-time-grid .fc-highlight-container { position: relative; } .fc-time-grid .fc-highlight { position: absolute; left: 0; right: 0; } .fc-time-grid .fc-event-container { position: relative; } .fc-ltr .fc-time-grid .fc-event-container { margin: 0 2.5% 0 2px; } .fc-rtl .fc-time-grid .fc-event-container { margin: 0 2px 0 2.5%; } .fc-time-grid .fc-event { position: absolute; z-index: 1; } .fc-time-grid-event { overflow: hidden; &.fc-not-start { border-top-width: 0; padding-top: 1px; border-top-left-radius: 0; border-top-right-radius: 0; } &.fc-not-end { border-bottom-width: 0; padding-bottom: 1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } & > .fc-content { position: relative; z-index: 2; } .fc-title { padding: 0 1px; } .fc-time { padding: 0 1px; font-size: .85em; white-space: nowrap; } .fc-bg { z-index: 1; background: $default; opacity: .25; filter: alpha(opacity=25); } &.fc-short { .fc-content { white-space: nowrap; } .fc-time { display: inline-block; vertical-align: top; span { display: none; } &:before { content: attr(data-start); } &:after { content: "\000A0-\000A0"; } } .fc-title { display: inline-block; vertical-align: top; font-size: .85em; padding: 0; } } .fc-resizer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 8px; overflow: hidden; line-height: 8px; font-size: 11px; font-family: monospace; text-align: center; cursor: s-resize; &:after { content: "="; } } } .fc-day-grid-container.fc-scroller { height: auto!important; } .calendar-panel.panel .panel-body{ padding: 0; } .fc-body > tr > .fc-widget-content{ border: none; } .fc-head{ color: $label-text; background-color: $primary; td, th{ border:none; } div.fc-widget-header{ padding: 5px 0; } } .fc-today-button, .fc-month-button, .fc-agendaWeek-button, .fc-agendaDay-button { display: none; } .blurCalendar{ margin-top: 15px; } .fc-prev-button, .fc-next-button{ position: absolute; background: transparent; box-shadow: none; border: none; color: $default-text; } .fc-next-button { left: 30px; } .fc-prev-button { } .fc-day-number{ color: $default-text; opacity: 0.9; } ================================================ FILE: src/sass/theme/dashboard/_pieCharts.scss ================================================ .pie-charts { color: $default-text; .pie-chart-item-container { position: relative; padding: 0 15px; float: left; box-sizing: border-box; .panel { height: $small-panel-height; } } @media screen and (min-width: 1325px) { .pie-chart-item-container { width: 25%; } } @media screen and (min-width: 700px) and (max-width: 1325px) { .pie-chart-item-container { width: 50%; } } @media screen and (max-width: 700px) { .pie-chart-item-container { width: 100%; } } .pie-chart-item { position: relative; .chart-icon { position: absolute; right: 0px; top: 3px; z-index: -1; } } @media screen and (min-width: 1325px) and (max-width: 1650px), (min-width: 700px) and (max-width: 830px), (max-width: 400px) { .chart-icon { display: none; } } .chart { position: relative; display: inline-block; width: 84px; height: 84px; text-align: center; float: left; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; line-height: 84px; z-index: 2; font-size: 16px; } .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em; } .description { display: inline-block; padding: 20px 0 0 20px; font-size: 18px; opacity: 0.9; .description-stats { padding-top: 8px; font-size: 24px; } } .angular { margin-top: 100px; } .angular .chart { margin-top: 0; } } ================================================ FILE: src/sass/theme/dashboard/_popularApp.scss ================================================ .panel.popular-app { &>.panel-body { padding: 0; } .popular-app-img-container { position: relative; padding: 30px 0; height: 260px; border-top-right-radius: 5px; border-top-left-radius: 5px; .popular-app-img { width: 260px; position: absolute; transform: translateY(-50%) translate(-50%); top: 50%; left: 50%; .logo-text { display: inline-block; margin: 10px; font-size: 26px; color: $default-text; } } } .popular-app-cost { font-size: 20px; padding: 20px 22px; border-bottom: 1px solid $border-light; border-top: 1px solid $border-light; } .popular-app-info { padding: 20px 22px; font-size: 20px; text-align: center; .info-label { font-size: 12px; } } .row { margin: 0; > div { padding: 0; } } } .blur-theme .panel.popular-app .popular-app-img-container { background: rgba(0, 0, 0, 0.5); } ================================================ FILE: src/sass/theme/dashboard/_timeline.scss ================================================ #cd-timeline { margin-top: 15px; position: relative; &:before { content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed; } } .cd-timeline-block { position: relative; margin: 2em 0; &:after { content: ""; display: table; clear: both; } &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } .cd-timeline-img { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; } @media only screen and (min-width: $resXL) { .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; animation: cd-bounce-1 0.6s; } } @keyframes cd-bounce-1 { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.2); } 100% { transform: scale(1); } } .cd-timeline-content { position: relative; margin-left: 60px; background: $primary; padding: 1em; border-radius: 5px; &:after { content: ""; display: table; clear: both; } h2 { color: #303e49; margin: 0; font-size: 18px; } .cd-read-more, .cd-date { font-size: 13px; display: inline-block; } p { font-size: 13px; margin-bottom: 0; } .cd-read-more { float: right; padding: .8em 1em; background: #acb7c0; color: white; border-radius: 0.25em; } .cd-date { float: left; padding: .8em 0; opacity: .7; } &:before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white; } } @mixin cd-timeline-color($color) { background: $color; } @mixin cd-timeline-left-color($color) { &:before { border-left-color: $color; } } @mixin cd-timeline-right-color($color) { &::before { border-right-color: $color; } } .cd-timeline-content.warning { @include cd-timeline-color(rgba($warning, 0.2)); } .cd-timeline-content.danger { @include cd-timeline-color(rgba($danger, 0.2)); } .cd-timeline-content.primary { @include cd-timeline-color(rgba($primary, 0.2)); } .no-touch .cd-timeline-content .cd-read-more:hover { background-color: $border; } @media only screen and (min-width: $resXL) { #cd-timeline::before { left: 50%; margin-left: -2px; } .cd-timeline-block { margin: 4em 0; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } .cd-timeline-content { margin-left: 0; padding: 1.6em; width: 42%; &::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .cd-read-more { float: left; } .cd-date { position: absolute; width: 100%; left: 137%; top: 6px; font-size: 16px; } } .cd-timeline-content.warning { @include cd-timeline-left-color(rgba($warning, 0.2)); } .cd-timeline-content.danger { @include cd-timeline-left-color(rgba($danger, 0.2)); } .cd-timeline-content.primary { @include cd-timeline-left-color(rgba($primary, 0.2)); } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) { .cd-timeline-content { &::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } &.cd-timeline-content.warning { @include cd-timeline-right-color(rgba($warning, 0.2)); } &.cd-timeline-content.danger { @include cd-timeline-right-color(rgba($danger, 0.2)); } &.cd-timeline-content.primary { @include cd-timeline-right-color(rgba($primary, 0.2)); } } } .cd-timeline-block:nth-child(even) { .cd-timeline-content { .cd-read-more { float: right; } .cd-date { left: auto; right: 137%; text-align: right; } } } .cssanimations .cd-timeline-content { &.is-hidden { visibility: hidden; } &.bounce-in { visibility: visible; animation: cd-bounce-2 0.6s; } } } @media only screen and (min-width: $resXL) { /* inverse bounce effect on even content blocks */ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { animation: cd-bounce-2-inverse 0.6s; } } @keyframes cd-bounce-2 { 0% { opacity: 0; transform: translateX(-100px); } 60% { opacity: 1; transform: translateX(20px); } 100% { transform: translateX(0); } } @keyframes cd-bounce-2-inverse { 0% { opacity: 0; transform: translateX(100px); } 60% { opacity: 1; transform: translateX(-20px); } 100% { transform: translateX(0); } } ================================================ FILE: src/sass/theme/dashboard/_todo.scss ================================================ input.task-todo { margin-bottom: 8px; } ul.todo-list { margin: 0; padding: 0; .placeholder, .ui-sortable-placeholder { } li { margin: 0 0 -1px 0; padding: 12px; list-style: none; position: relative; border: 1px solid $input-border; cursor: grab; height: 42px; i.remove-todo { position: absolute; cursor: pointer; top: 0px; right: 12px; font-size: 32px; transition: color 0.2s; color: rgba($input-border, 0.5); visibility: hidden; line-height: 42px; &:hover { color: $input-border; } } &:hover { i.remove-todo { visibility: visible; } } &.checked { .todo-text { color: $default-text; } &:before { background: $input-border !important; } } i.mark { display: block; position: absolute; top: -1px; left: -1px; height: 42px; min-width: 4px; background: $input-border; cursor: pointer; transition: min-width 0.3s ease-out; } &.active { i.mark { min-width: 40px; } label.todo-checkbox > span { &:before { color: white; content: '\f10c'; margin-right: 20px; transition: margin-right 0.1s ease-out; transition-delay: 0.2s; float: none; } } label.todo-checkbox > input:checked + span:before { content: '\f00c'; } } } } label.todo-checkbox { width: 100%; padding-right: 25px; min-height: 16px; cursor: pointer; > span { white-space: nowrap; height: 16px; &:before { border: none; color: $help-text; transition: all 0.15s ease-out; } } } .add-item-icon { display: none; } .task-todo-container.transparent { .todo-panel.panel { color: white; opacity: 0.9; } input.task-todo { color: white; width: calc(100% - 25px); border-radius: 0; border: none; background: transparent; &:focus { outline: none; background-color: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); } } .add-item-icon { display: block; float: right; margin-top: -45px; margin-right: 5px; font-size: 25px; cursor: pointer; } ul.todo-list { li { margin: 0; border: none; font-weight: $font-light; .blur-container{ height: 40px; position: absolute; width: calc(100% + 40px);; top: 0; left: -25px; overflow-y: hidden; } &:hover{ .blur-container{ box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); } .blur-box { height: 100%; background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); -webkit-filter: blur(3px); } } i.remove-todo { color: white; opacity: 0.4; &:hover { color: white; opacity: 0.95; } } i.mark { min-width: 40px; display: none; } label.todo-checkbox > span { &:before { position: absolute; color: $default-text; content: '\f10c'; float: none; margin-right: 6px; transition: none; } } &.checked { label.todo-checkbox > span { &:before { content: '\f00c'; } } } } } .box-shadow-border{ border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); width: calc(100% + 44px); margin-left: -22px; } } ================================================ FILE: src/sass/theme/dashboard/_trafficChart.scss ================================================ .channels-block { width: 100%; position: relative; } .channels-block.transparent { .traffic-chart canvas{ border: 10px solid rgba(0,0,0,0.35); box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset; border-radius: 150px; } .chart-bg { background-color: rgba(0,0,0,0.35); } } .chart-bg { position: absolute; width: 180px; height: 180px; left: 60px; top: 60px; border-radius: 100px; background-color: transparent; } .channels-info { display: inline-block; width: calc(100% - 370px); margin-left: 70px; margin-top: -20px; } .small-container { .channels-info { display: none; } } .channels-info-item { p { margin-bottom: 9px; font-size: 18px; opacity: 0.9; } .channel-number{ display: inline-block; float: right; } } .traffic-chart { width: 300px; position: relative; min-height: 300px; float: left; } .traffic-legend { display: inline-block; padding: 70px 0 0 0px; width: 160px; } .traffic-legend ul.doughnut-legend { li { list-style: none; font-size: 12px; margin-bottom: 12px; line-height: 16px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 120px; span { float: left; display: inline-block; width: 16px; height: 16px; margin-right: 10px; } } } .canvas-holder { display: inline-block; width: 300px; height: 300px; position: relative; float: left; } .traffic-text { width: 100%; height: 40px; position: absolute; top: 50%; left: 0; margin-top: -24px; line-height: 24px; text-align: center; font-size: 18px; span { display: block; font-size: 18px; color: $default-text; } } .channel-change { display: block; margin-bottom: 12px; } .channel-progress { height: 4px; border-radius: 0; width: 100%; margin-bottom: 0; background-color: $progress-background; box-shadow: none; .progress-bar{ height: 4px; background-color: $progress-default; box-shadow: none; } } .legend-color{ width: 30px; height: 30px; box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.25); position: relative; top: 27px; border-radius: 15px; left: -45px; } @media (max-width: $resM) { div.channels-info{ display: block; width: calc(100% - 88px); margin-top: -65px; margin-bottom: 10px; } .panel.medium-panel.traffic-panel{ height: auto; } .traffic-chart{ position: inherit; float: none; margin: 0 auto; } .chart-bg{ left: calc(50% - 90px); } } @media (max-width: 1465px) and (min-width: 1199px){ .channels-info{ display: none; } .traffic-chart{ position: inherit; float: none; margin: 0 auto; } .chart-bg{ left: calc(50% - 90px); } } @media (max-width: 380px){ .traffic-chart{ width: 240px; } .canvas-holder{ width: 240px; height: 240px; } .chart-bg { top: 30px; } } @media (max-width: 320px){ .chart-bg { left: 50px; top: 50px; width: 142px; height: 142px; } } ================================================ FILE: src/sass/theme/dashboard/_weather.scss ================================================ .weather-wrapper { height: 100%; .weather-main-info { min-height: 140px; div i { display: inline-block; width: 48px; text-align: center; } .city-date { display: flex; flex-wrap: wrap; justify-content: space-between; } } .temp-by-time { height: calc(100% - 210px); } .select-day { display: table; table-layout: fixed; width: 100%; height: 70px; .day { display: table-cell; line-height: 1; text-align: center; cursor: pointer; i.weatherIcon { transition: color 0.5s ease; } .select-day-info { vertical-align: super; } } .day:hover { i.weatherIcon { color: #40BDE8; } } } .rightHeading { display: block; float: right; } .weather-info { display: inline-block; vertical-align: super; } .font-x1dot25 { font-size: 1.5em; } .font-x1dot5 { font-size: 1.5em; } .font-x2 { font-size: 2em; } .font-x3 { font-size: 3em; } }