Dotnetify freeze
This commit is contained in:
Sipke Schoorstra
parent
4b45325d12
commit
98f40cbbc1
12
.gitignore
vendored
12
.gitignore
vendored
|
|
@ -34,9 +34,19 @@ packages/
|
|||
|
||||
#Ignore git-related files
|
||||
*.orig
|
||||
.gitattributes
|
||||
|
||||
#Rider
|
||||
.idea
|
||||
|
||||
#wwwroot
|
||||
wwwroot/
|
||||
wwwroot/
|
||||
|
||||
#npm
|
||||
node_modules/
|
||||
.babelrc
|
||||
.stylelintrc.yml
|
||||
.eslintrc.yml
|
||||
|
||||
#github
|
||||
.github/
|
||||
6725
src/Flowsharp.Web.Components/ClientApp/package-lock.json
generated
Normal file
6725
src/Flowsharp.Web.Components/ClientApp/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
32
src/Flowsharp.Web.Components/ClientApp/package.json
Normal file
32
src/Flowsharp.Web.Components/ClientApp/package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "flowsharp-components",
|
||||
"scripts": {
|
||||
"build": "webpack"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"env",
|
||||
"react"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"dotnetify": "~3.0.3",
|
||||
"react": "~16.5.0",
|
||||
"react-dom": "~16.5.0",
|
||||
"jsplumb": "^2.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"aspnet-webpack": "^3.0.0",
|
||||
"babel-core": "~6.26.3",
|
||||
"babel-loader": "~7.1.4",
|
||||
"babel-preset-env": "~1.7.0",
|
||||
"babel-preset-react": "~6.24.1",
|
||||
"open-browser-webpack-plugin": "0.0.5",
|
||||
"webpack": "^4.21.0",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-dev-middleware": "^3.4.0",
|
||||
"webpack-dev-server": "^3.1.9",
|
||||
"webpack-hot-middleware": "^2.24.3",
|
||||
"html-webpack-plugin": "^3.2.0"
|
||||
}
|
||||
}
|
||||
18
src/Flowsharp.Web.Components/ClientApp/src/js/Activity.js
Normal file
18
src/Flowsharp.Web.Components/ClientApp/src/js/Activity.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
import dotnetify from 'dotnetify';
|
||||
|
||||
export default class Activity extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
dotnetify.react.connect('Activity', this);
|
||||
this.state = { Title: 'Activity 1' };
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="activity">
|
||||
<div>Content</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import React from 'react';
|
||||
import dotnetify from 'dotnetify';
|
||||
import { jsPlumb, jsPlumbInstance, Connection, ConnectionMadeEventInfo } from 'jsplumb';
|
||||
import * as ReactDOM from "react-dom";
|
||||
import * as Flowsharp from './flowsharp';
|
||||
import Activity from "./Activity";
|
||||
|
||||
export default class WorkflowCanvas extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
dotnetify.react.connect('WorkflowCanvas', this);
|
||||
|
||||
this.state = { workflow: null };
|
||||
|
||||
jsPlumb.ready(() => {
|
||||
this.container = ReactDOM.findDOMNode(this);
|
||||
this.plumber = WorkflowCanvas.createPlumber(this.container);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='workflow-canvas'>
|
||||
Workfow Canvas
|
||||
<Activity/>
|
||||
<Activity/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
static createPlumber(container: HTMLDivElement){
|
||||
return jsPlumb.getInstance({
|
||||
Anchor: "Continuous",
|
||||
DragOptions: {
|
||||
cursor: 'pointer', zIndex: 2000
|
||||
},
|
||||
EndpointStyles: [{ fillStyle: '#225588' }],
|
||||
Endpoints: [["Dot", { radius: 7 }], ["Blank"]],
|
||||
ConnectionOverlays: [
|
||||
['Arrow', {
|
||||
location: 1,
|
||||
visible: true,
|
||||
width: 11,
|
||||
length: 11
|
||||
}],
|
||||
['Label', {
|
||||
location: 0.5,
|
||||
id: 'label',
|
||||
cssClass: 'connection-label'
|
||||
}]
|
||||
],
|
||||
ConnectorZIndex: 5,
|
||||
Container: container
|
||||
});
|
||||
}
|
||||
|
||||
static setupJsPlumb(plumber: jsPlumbInstance){
|
||||
|
||||
// Listen for new connections.
|
||||
plumber.bind('connection', function (connectionInfo: ConnectionMadeEventInfo, originalEvent: Event) {
|
||||
const connection: Connection = connectionInfo.connection;
|
||||
const endpoint: Flowsharp.Endpoint = connection.getParameters().endpoint;
|
||||
const label: any = connection.getOverlay('label');
|
||||
label.setLabel(endpoint.Name);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import dotnetify from 'dotnetify';
|
||||
import WorkflowCanvas from "./WorkflowCanvas";
|
||||
|
||||
export default class WorkflowEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
dotnetify.react.connect('WorkflowEditor', this);
|
||||
this.state = { Greetings: '', ServerTime: '' };
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>{this.state.Greetings}</p>
|
||||
<p>Server time is: {this.state.ServerTime}</p>
|
||||
<WorkflowCanvas/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const Endpoint = {
|
||||
Name: ''
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
Endpoint: Endpoint
|
||||
};
|
||||
5
src/Flowsharp.Web.Components/ClientApp/src/js/index.js
Normal file
5
src/Flowsharp.Web.Components/ClientApp/src/js/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import WorkflowEditor from './WorkflowEditor';
|
||||
|
||||
ReactDOM.render(<WorkflowEditor/>, document.getElementById('FlowsharpWorkflowEditor'));
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
.workflow-container {
|
||||
.workflow-canvas-container {
|
||||
border: 1px solid #e4e5e6;
|
||||
border-radius: 0.25em;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-activities {
|
||||
h4.card-title {
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workflow-canvas {
|
||||
overflow: auto !important;
|
||||
position: relative;
|
||||
touch-action: none;
|
||||
min-height: 400px;
|
||||
|
||||
.activity {
|
||||
display: none;
|
||||
border: 1px solid #346789;
|
||||
box-shadow: 2px 2px 19px #aaa;
|
||||
-o-box-shadow: 2px 2px 9px #aaa;
|
||||
-webkit-box-shadow: 2px 2px 9px #aaa;
|
||||
-moz-box-shadow: 2px 2px 9px #aaa;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
opacity: 0.8;
|
||||
min-width: 80px;
|
||||
min-height: 80px;
|
||||
text-align: left;
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
background-color: #eeeeef;
|
||||
color: #000000;
|
||||
font-family: helvetica, sans-serif;
|
||||
padding: 1em;
|
||||
font-size: 0.7em;
|
||||
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
|
||||
-moz-transition: -moz-box-shadow 0.15s ease-in;
|
||||
-o-transition: -o-box-shadow 0.15s ease-in;
|
||||
transition: box-shadow 0.15s ease-in;
|
||||
|
||||
&.activity-task {
|
||||
border: 1px solid #7ab02c;
|
||||
}
|
||||
|
||||
&.activity-event {
|
||||
border: 1px solid #3a8acd;
|
||||
}
|
||||
|
||||
&.activity-start, &.activity-blocking {
|
||||
background-color: #7ab02c;
|
||||
color: #ffffff;
|
||||
border: 1px solid #507b11;
|
||||
}
|
||||
|
||||
header {
|
||||
h4 {
|
||||
font-size: 1.4em;
|
||||
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jtk-connector {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.jtk-endpoint, .endpointTargetLabel, .endpointSourceLabel {
|
||||
z-index: 21;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.endpointTargetLabel, .endpointSourceLabel {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.jtk-overlay {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.connection-label {
|
||||
z-index: 31;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 0 0.5em;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
20
src/Flowsharp.Web.Components/ClientApp/webpack.config.js
Normal file
20
src/Flowsharp.Web.Components/ClientApp/webpack.config.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
'use strict';
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
entry: { main: './src/js/index.js' },
|
||||
output: {
|
||||
path: __dirname + '/../wwwroot',
|
||||
publicPath: '/'
|
||||
},
|
||||
resolve: {
|
||||
modules: [ 'src', 'node_modules' ]
|
||||
},
|
||||
module: {
|
||||
rules: [ { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ } ]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin()
|
||||
]
|
||||
};
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
using Microsoft.AspNetCore.Builder;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.AspNetCore.StaticFiles;
|
||||
using Microsoft.Extensions.FileProviders;
|
||||
using Microsoft.Extensions.Options;
|
||||
|
||||
namespace Flowsharp.Web.Components.Configuration
|
||||
{
|
||||
internal class EmbeddedFilesConfigureOptions : IPostConfigureOptions<StaticFileOptions>
|
||||
{
|
||||
private readonly IHostingEnvironment environment;
|
||||
|
||||
public EmbeddedFilesConfigureOptions(IHostingEnvironment environment)
|
||||
{
|
||||
this.environment = environment;
|
||||
}
|
||||
|
||||
public void PostConfigure(string name, StaticFileOptions options)
|
||||
{
|
||||
options.ContentTypeProvider = options.ContentTypeProvider ?? new FileExtensionContentTypeProvider();
|
||||
options.FileProvider = options.FileProvider ?? environment.WebRootFileProvider;
|
||||
var embeddedFileProvider = new ManifestEmbeddedFileProvider(GetType().Assembly, "wwwroot");
|
||||
options.FileProvider = new CompositeFileProvider(options.FileProvider, embeddedFileProvider);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
using DotNetify;
|
||||
using Flowsharp.Web.Components.ViewModels;
|
||||
|
||||
// ReSharper disable once CheckNamespace
|
||||
namespace Microsoft.AspNetCore.Builder
|
||||
{
|
||||
public static class ApplicationBuilderExtensions
|
||||
{
|
||||
public static IApplicationBuilder UseFlowsharpComponents(this IApplicationBuilder app)
|
||||
{
|
||||
return app
|
||||
.UseWebSockets()
|
||||
.UseSignalR(routes => routes.MapDotNetifyHub())
|
||||
.UseDotNetify(options => options.RegisterAssembly(typeof(WorkflowEditor).Assembly));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
using DotNetify;
|
||||
using Flowsharp.Web.Components.Configuration;
|
||||
|
||||
// ReSharper disable once CheckNamespace
|
||||
namespace Microsoft.Extensions.DependencyInjection
|
||||
{
|
||||
public static class ServiceCollectionExtensions
|
||||
{
|
||||
public static IServiceCollection AddFlowsharpComponents(this IServiceCollection services)
|
||||
{
|
||||
services.AddSignalR();
|
||||
services.ConfigureOptions(typeof(EmbeddedFilesConfigureOptions));
|
||||
|
||||
return services
|
||||
.AddMemoryCache()
|
||||
.AddDotNetify();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,21 +7,21 @@
|
|||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="DotNetify.SignalR" Version="3.1.0"/>
|
||||
<PackageReference Include="DotNetify.SignalR" Version="3.1.0" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.1.3" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.1.1"/>
|
||||
<PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="2.1.0"/>
|
||||
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.1.1" />
|
||||
<PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="2.1.0" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<EmbeddedResource Include="wwwroot\**\*"/>
|
||||
<EmbeddedResource Include="wwwroot\**\*" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Content Update="Pages\_ViewImports.cshtml">
|
||||
<Pack>$(IncludeRazorContentInPack)</Pack>
|
||||
</Content>
|
||||
<Content Remove="ClientApp\node_modules\**"/>
|
||||
<Content Remove="ClientApp\node_modules\**" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
|
@ -30,15 +30,15 @@
|
|||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Compile Remove="ClientApp\node_modules\**"/>
|
||||
<Compile Remove="ClientApp\node_modules\**" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<EmbeddedResource Remove="ClientApp\node_modules\**"/>
|
||||
<EmbeddedResource Remove="ClientApp\node_modules\**" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<None Remove="ClientApp\node_modules\**"/>
|
||||
<None Remove="ClientApp\node_modules\**" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
|
|
|||
11
src/Flowsharp.Web.Components/ViewModels/Activity.cs
Normal file
11
src/Flowsharp.Web.Components/ViewModels/Activity.cs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
using DotNetify;
|
||||
|
||||
namespace Flowsharp.Web.Components.ViewModels
|
||||
{
|
||||
public class Activity : BaseVM
|
||||
{
|
||||
public Activity()
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/Flowsharp.Web.Components/ViewModels/WorkflowCanvas.cs
Normal file
11
src/Flowsharp.Web.Components/ViewModels/WorkflowCanvas.cs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
using DotNetify;
|
||||
|
||||
namespace Flowsharp.Web.Components.ViewModels
|
||||
{
|
||||
public class WorkflowCanvas : BaseVM
|
||||
{
|
||||
public WorkflowCanvas()
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/Flowsharp.Web.Components/ViewModels/WorkflowEditor.cs
Normal file
24
src/Flowsharp.Web.Components/ViewModels/WorkflowEditor.cs
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
using System;
|
||||
using System.Threading;
|
||||
using DotNetify;
|
||||
|
||||
namespace Flowsharp.Web.Components.ViewModels
|
||||
{
|
||||
public class WorkflowEditor : BaseVM
|
||||
{
|
||||
private Timer _timer;
|
||||
public string Greetings => "Hello World!";
|
||||
public DateTime ServerTime => DateTime.Now;
|
||||
|
||||
public WorkflowEditor()
|
||||
{
|
||||
_timer = new Timer(state =>
|
||||
{
|
||||
Changed(nameof(ServerTime));
|
||||
PushUpdates();
|
||||
}, null, 0, 1000);
|
||||
}
|
||||
|
||||
public override void Dispose() => _timer.Dispose();
|
||||
}
|
||||
}
|
||||
33
src/Flowsharp.Web.Dashboard/ClientApp/.editorconfig
Normal file
33
src/Flowsharp.Web.Dashboard/ClientApp/.editorconfig
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# -----------------------------
|
||||
# General
|
||||
# -----------------------------
|
||||
|
||||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
|
||||
|
||||
# -----------------------------
|
||||
# All Files
|
||||
# -----------------------------
|
||||
|
||||
[*]
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
|
||||
|
||||
# -----------------------------
|
||||
# Markdown Files
|
||||
# -----------------------------
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
32
src/Flowsharp.Web.Dashboard/ClientApp/.gitignore
vendored
Normal file
32
src/Flowsharp.Web.Dashboard/ClientApp/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
# ----------------------------
|
||||
# Generated Files & Folders
|
||||
# ----------------------------
|
||||
|
||||
# [1] : Windows thumbnail cache files.
|
||||
# [2] : Folder config file.
|
||||
# [3] : Recycle Bin used on file shares.
|
||||
|
||||
.idea
|
||||
.DS_Store
|
||||
.sass-cache
|
||||
Thumbs.db # [1]
|
||||
ehthumbs.db # [1]
|
||||
Desktop.ini # [2]
|
||||
$RECYCLE.BIN # [3]
|
||||
|
||||
# ----------------------------
|
||||
# Packaging
|
||||
# ----------------------------
|
||||
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
node_modules
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
|
||||
# ----------------------------
|
||||
# Project Folders
|
||||
# ----------------------------
|
||||
|
||||
build/
|
||||
5
src/Flowsharp.Web.Dashboard/ClientApp/CHANGELOG.md
Normal file
5
src/Flowsharp.Web.Dashboard/ClientApp/CHANGELOG.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
### Changelog
|
||||
|
||||
#### 1.0.0
|
||||
|
||||
- Intial release
|
||||
46
src/Flowsharp.Web.Dashboard/ClientApp/CODE_OF_CONDUCT.md
Normal file
46
src/Flowsharp.Web.Dashboard/ClientApp/CODE_OF_CONDUCT.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support at colorlib.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
||||
21
src/Flowsharp.Web.Dashboard/ClientApp/LICENSE
Normal file
21
src/Flowsharp.Web.Dashboard/ClientApp/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2018 Aigars Silkalns
|
||||
|
||||
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.
|
||||
167
src/Flowsharp.Web.Dashboard/ClientApp/README.md
Normal file
167
src/Flowsharp.Web.Dashboard/ClientApp/README.md
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
# Adminator HTML5 Admin Template
|
||||
**Adminator** is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
|
||||
|
||||
# Preview
|
||||
|
||||
### Screenshot
|
||||
|
||||
|
||||
|
||||
### Demo Site: [Here](https://colorlib.com/polygon/adminator/index.html)
|
||||
|
||||
## TOC
|
||||
- [Getting Started](#getting-started)
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [Installing & Local Development](#installing--local-development)
|
||||
- [Files/Folder Structure](#filesfolders-structure)
|
||||
- [Deployment](#deployment)
|
||||
- [Built With](#built-with)
|
||||
- [Changelog](#changelog)
|
||||
- [Authors](#authors)
|
||||
- [License](#license)
|
||||
|
||||
|
||||
## Getting Started
|
||||
In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below.
|
||||
|
||||
#### Prerequisites
|
||||
- Node.js
|
||||
- Yarn or NPM
|
||||
- Git
|
||||
- libpng-dev *linux only*
|
||||
|
||||
#### Installing & Local Development
|
||||
Start by typing the following commands in your terminal in order to get **Adminator** full package on your machine and starting a local development server with live reload feature.
|
||||
|
||||
```
|
||||
> git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
|
||||
> cd adminator
|
||||
> npm install
|
||||
> npm run dev
|
||||
```
|
||||
|
||||
|
||||
## Files/Folders Structure
|
||||
Here is a brief explanation of the template folder structure and some of its main files usage:
|
||||
|
||||
```
|
||||
└── src # Contains all template source files.
|
||||
│ └── assets # Contains JS, CSS, images and icon fonts.
|
||||
│ │ └── scripts # Contains all JavaScript files.
|
||||
│ │ │ └── charts # Chart.js, Sparkline & Pie Chart plugins init.
|
||||
│ │ │ └── chat # All chat app JS code.
|
||||
│ │ │ └── constants # Template constant values like color values.
|
||||
│ │ │ └── datatable # Date table plugin init.
|
||||
│ │ │ └── datepicker # Bootstrap datepicker init.
|
||||
│ │ │ └── email # All email app code.
|
||||
│ │ │ └── fullcalendar # Fullcalendar plugin init.
|
||||
│ │ │ └── googleMaps # Google maps API integration code.
|
||||
│ │ │ └── masonry # Masonry layout code.
|
||||
│ │ │ └── popover # Bootstrap popover plugin init.
|
||||
│ │ │ └── scrollbar # Perfect scrollbar plugin init.
|
||||
│ │ │ └── search # Topbar toggle search init.
|
||||
│ │ │ └── sidebar # Sidebar JS code.
|
||||
│ │ │ └── skycons # Animated icons plugin init.
|
||||
│ │ │ └── utils # Basic utils used for proper rendering.
|
||||
│ │ │ └── vectorMaps # Vector maps plugin init.
|
||||
│ │ │ └── index.js # Indicator file.
|
||||
│ │ │
|
||||
│ │ └── static # Contains the non-code files.
|
||||
│ │ │ └── fonts # Contains icon fonts.
|
||||
│ │ │ └── images # Contains all template images/svg.
|
||||
│ │ │
|
||||
│ │ └── styles # Contains all SCSS files.
|
||||
│ │ └── spec # Contains custom SCSS files.
|
||||
│ │ │ └── components # Contains all template components.
|
||||
│ │ │ └── generic # Contains basic scaffolding styles.
|
||||
│ │ │ └── screens # Contains views specific styles.
|
||||
│ │ │ └── settings # Contains all template variables.
|
||||
│ │ │ └── tools # Contains all mixins.
|
||||
│ │ │ └── utils # Contains helper classes.
|
||||
│ │ │ └── index.scss # Indicator file.
|
||||
│ │ │
|
||||
│ │ └── vendor # Contains all plugin files & custom styles.
|
||||
│ │ └── index.scss # Indicator file.
|
||||
│ │
|
||||
│ └── *.html # All HTML pages files .
|
||||
└── webpack # Contains Webpack init code.
|
||||
│ └── plugins # Contains all Webpack plugins config.
|
||||
│ └── rules # Contains Loaders config code.
|
||||
│ └── config.js # Contains Webpack config object.
|
||||
│ └── devServer.js # Webpack dev server config code.
|
||||
│ └── manifest.js # All build system constants.
|
||||
│
|
||||
└── .babelrc # Babel ES6 Transpiler.
|
||||
└── .editorconfig # Keep same coding styles between code editors.
|
||||
└── .eslintrc.yml # JavaScript Linting.
|
||||
└── .gitattributes # Git Attributes.
|
||||
└── .gitignore # Ignored files in Git.
|
||||
└── .stylelintrc.yml # SCSS/CSS Linting.
|
||||
└── browserslist # Supported Browsers.
|
||||
└── CHANGELOG.md # Versioning.
|
||||
└── package.json # Package metadata.
|
||||
└── README.md # Manual file.
|
||||
└── webpack.config.js # Webpack main config file.
|
||||
└── yarn.lock # Yarn metadata.
|
||||
```
|
||||
|
||||
## Deployment
|
||||
In deployment process, you have two commands:
|
||||
|
||||
1. Build command
|
||||
Used to generate the final result of compiling src files into build folder. This can be achieved by running the following command:
|
||||
```
|
||||
> npm run build
|
||||
```
|
||||
|
||||
2. Preview command
|
||||
Used to create a local dev server in order to preview the final output of build process. This can be achieved by running the following command:
|
||||
```
|
||||
> npm run preview
|
||||
```
|
||||
|
||||
## Built With
|
||||
- [Babel](https://babeljs.io/)
|
||||
- [Webpack](https://webpack.js.org/)
|
||||
- [Eslint](https://eslint.org/)
|
||||
- [Sass](http://sass-lang.com/)
|
||||
- [Postcss](http://postcss.org/)
|
||||
- [Stylelint](https://stylelint.io/)
|
||||
- [Bootstrap](http://getbootstrap.com/)
|
||||
- [Chart.js](http://www.chartjs.org/)
|
||||
- [Datatables](https://datatables.net/)
|
||||
- [Easy Pie Chart](http://rendro.github.io/easy-pie-chart/)
|
||||
- [Fullcalendar](https://fullcalendar.io/)
|
||||
- [Jquery](https://jquery.com/)
|
||||
- [Jquery Sparkline](https://omnipotent.net/jquery.sparkline/)
|
||||
- [Jvectormap](http://jvectormap.com/)
|
||||
- [Load Google Maps API](https://github.com/yuanqing/load-google-maps-api)
|
||||
- [Lodash](https://lodash.com/)
|
||||
- [Masonry](https://masonry.desandro.com/)
|
||||
- [Moment](https://momentjs.com/)
|
||||
- [Perfect Scrollbar](https://github.com/utatti/perfect-scrollbar)
|
||||
- [Skycons](https://darkskyapp.github.io/skycons/)
|
||||
- [Fontawesome](http://fontawesome.io/)
|
||||
- [Themify Icons](https://themify.me/themify-icons)
|
||||
- [Roboto Font](https://fonts.google.com/specimen/Roboto)
|
||||
- [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/)
|
||||
|
||||
## Changelog
|
||||
#### V 1.0.0
|
||||
Initial Release
|
||||
|
||||
## Authors
|
||||
[Colorlib](https://colorlib.com)
|
||||
|
||||
## More info
|
||||
- [Boostrap Dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)
|
||||
- [Bootstrap Templates](https://colorlib.com/wp/free-bootstrap-templates/)
|
||||
- [HTML Templates](https://colorlib.com/wp/free-html-website-templates/)
|
||||
- [Free Admin Dashboards](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)
|
||||
- [Website Templates](https://colorlib.com/wp/templates/)
|
||||
- [Free CSS Templates](https://colorlib.com/wp/free-css-website-templates/)
|
||||
- [WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)
|
||||
|
||||
## License
|
||||
|
||||
Adminator is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.
|
||||
1
src/Flowsharp.Web.Dashboard/ClientApp/browserslist
Normal file
1
src/Flowsharp.Web.Dashboard/ClientApp/browserslist
Normal file
|
|
@ -0,0 +1 @@
|
|||
Last 3 versions
|
||||
70
src/Flowsharp.Web.Dashboard/ClientApp/package.json
Normal file
70
src/Flowsharp.Web.Dashboard/ClientApp/package.json
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"name": "adminator",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "HTML Admin Template",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"dev": "webpack-dashboard -t 'Project' -- webpack-dev-server",
|
||||
"clean": "shx rm -rf ./build",
|
||||
"build": "npm run clean && cross-env NODE_ENV=\"production\" webpack",
|
||||
"preview": "cross-env NODE_ENV=\"production\" webpack-dev-server",
|
||||
"lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
|
||||
"lint:scss": "stylelint ./src/**/*.scss --syntax scss",
|
||||
"lint": "npm run lint:js && npm run lint:scss"
|
||||
},
|
||||
"devDependencies": {
|
||||
"aspnet-webpack": "^3.0.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-eslint": "^8.0.1",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"copy-webpack-plugin": "^4.2.0",
|
||||
"cross-env": "^5.1.0",
|
||||
"css-loader": "^0.28.7",
|
||||
"eslint": "^4.9.0",
|
||||
"eslint-config-airbnb-base": "^12.1.0",
|
||||
"eslint-plugin-import": "2.7.0",
|
||||
"extract-text-webpack-plugin": "^3.0.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"imagemin-webpack-plugin": "^1.5.2",
|
||||
"node-sass": "^4.5.3",
|
||||
"postcss-cssnext": "^3.0.2",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"sass-loader": "^6.0.6",
|
||||
"shx": "^0.2.2",
|
||||
"style-loader": "^0.19.0",
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint-config-standard": "^17.0.0",
|
||||
"webpack": "^3.8.1",
|
||||
"webpack-dashboard": "^1.0.0",
|
||||
"webpack-dev-server": "^2.9.3",
|
||||
"webpack-hot-middleware": "^2.24.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"bootstrap": "^4.0.0",
|
||||
"bootstrap-datepicker": "^1.7.1",
|
||||
"chart.js": "^2.7.1",
|
||||
"datatables": "^1.10.13",
|
||||
"easy-pie-chart": "^2.1.7",
|
||||
"file-loader": "^1.1.5",
|
||||
"fullcalendar": "^3.6.2",
|
||||
"jquery": "^3.2.1",
|
||||
"jquery-sparkline": "^2.4.0",
|
||||
"jvectormap": "^2.0.4",
|
||||
"load-google-maps-api": "^1.0.0",
|
||||
"lodash": "^4.17.4",
|
||||
"masonry-layout": "^4.2.0",
|
||||
"moment": "^2.19.1",
|
||||
"perfect-scrollbar": "^1.1.0",
|
||||
"popper.js": "^1.12.6",
|
||||
"skycons": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
import Chart from 'chart.js';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
export default (function () {
|
||||
// ------------------------------------------------------
|
||||
// @Line Charts
|
||||
// ------------------------------------------------------
|
||||
|
||||
const lineChartBox = document.getElementById('line-chart');
|
||||
|
||||
if (lineChartBox) {
|
||||
const lineCtx = lineChartBox.getContext('2d');
|
||||
lineChartBox.height = 80;
|
||||
|
||||
new Chart(lineCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label : 'Series A',
|
||||
backgroundColor : 'rgba(237, 231, 246, 0.5)',
|
||||
borderColor : COLORS['deep-purple-500'],
|
||||
pointBackgroundColor : COLORS['deep-purple-700'],
|
||||
borderWidth : 2,
|
||||
data : [60, 50, 70, 60, 50, 70, 60],
|
||||
}, {
|
||||
label : 'Series B',
|
||||
backgroundColor : 'rgba(232, 245, 233, 0.5)',
|
||||
borderColor : COLORS['blue-500'],
|
||||
pointBackgroundColor : COLORS['blue-700'],
|
||||
borderWidth : 2,
|
||||
data : [70, 75, 85, 70, 75, 85, 70],
|
||||
}],
|
||||
},
|
||||
|
||||
options: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// @Bar Charts
|
||||
// ------------------------------------------------------
|
||||
|
||||
const barChartBox = document.getElementById('bar-chart');
|
||||
|
||||
if (barChartBox) {
|
||||
const barCtx = barChartBox.getContext('2d');
|
||||
|
||||
new Chart(barCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label : 'Dataset 1',
|
||||
backgroundColor : COLORS['deep-purple-500'],
|
||||
borderColor : COLORS['deep-purple-800'],
|
||||
borderWidth : 1,
|
||||
data : [10, 50, 20, 40, 60, 30, 70],
|
||||
}, {
|
||||
label : 'Dataset 2',
|
||||
backgroundColor : COLORS['light-blue-500'],
|
||||
borderColor : COLORS['light-blue-800'],
|
||||
borderWidth : 1,
|
||||
data : [10, 50, 20, 40, 60, 30, 70],
|
||||
}],
|
||||
},
|
||||
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// @Area Charts
|
||||
// ------------------------------------------------------
|
||||
|
||||
const areaChartBox = document.getElementById('area-chart');
|
||||
|
||||
if (areaChartBox) {
|
||||
const areaCtx = areaChartBox.getContext('2d');
|
||||
|
||||
new Chart(areaCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
backgroundColor : 'rgba(3, 169, 244, 0.5)',
|
||||
borderColor : COLORS['light-blue-800'],
|
||||
data : [10, 50, 20, 40, 60, 30, 70],
|
||||
label : 'Dataset',
|
||||
fill : 'start',
|
||||
}],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// @Scatter Charts
|
||||
// ------------------------------------------------------
|
||||
|
||||
const scatterChartBox = document.getElementById('scatter-chart');
|
||||
|
||||
if (scatterChartBox) {
|
||||
const scatterCtx = scatterChartBox.getContext('2d');
|
||||
|
||||
Chart.Scatter(scatterCtx, {
|
||||
data: {
|
||||
datasets: [{
|
||||
label : 'My First dataset',
|
||||
borderColor : COLORS['red-500'],
|
||||
backgroundColor : COLORS['red-500'],
|
||||
data: [
|
||||
{ x: 10, y: 20 },
|
||||
{ x: 30, y: 40 },
|
||||
{ x: 50, y: 60 },
|
||||
{ x: 70, y: 80 },
|
||||
{ x: 90, y: 100 },
|
||||
{ x: 110, y: 120 },
|
||||
{ x: 130, y: 140 },
|
||||
],
|
||||
}, {
|
||||
label : 'My Second dataset',
|
||||
borderColor : COLORS['green-500'],
|
||||
backgroundColor : COLORS['green-500'],
|
||||
data: [
|
||||
{ x: 150, y: 160 },
|
||||
{ x: 170, y: 180 },
|
||||
{ x: 190, y: 200 },
|
||||
{ x: 210, y: 220 },
|
||||
{ x: 230, y: 240 },
|
||||
{ x: 250, y: 260 },
|
||||
{ x: 270, y: 280 },
|
||||
],
|
||||
}],
|
||||
},
|
||||
});
|
||||
}
|
||||
}())
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import * as $ from 'jquery';
|
||||
import 'easy-pie-chart/dist/jquery.easypiechart.min.js';
|
||||
|
||||
export default (function () {
|
||||
if ($('.easy-pie-chart').length > 0) {
|
||||
$('.easy-pie-chart').easyPieChart({
|
||||
onStep(from, to, percent) {
|
||||
this.el.children[0].innerHTML = `${Math.round(percent)} %`;
|
||||
},
|
||||
});
|
||||
}
|
||||
}())
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import './chartJS';
|
||||
import './easyPieChart';
|
||||
import './sparkline';
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
import * as $ from 'jquery';
|
||||
import 'jquery-sparkline';
|
||||
import { debounce } from 'lodash';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
export default (function () {
|
||||
// ------------------------------------------------------
|
||||
// @Dashboard Sparklines
|
||||
// ------------------------------------------------------
|
||||
|
||||
const drawSparklines = () => {
|
||||
if ($('#sparklinedash').length > 0) {
|
||||
$('#sparklinedash').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
|
||||
type: 'bar',
|
||||
height: '20',
|
||||
barWidth: '3',
|
||||
resize: true,
|
||||
barSpacing: '3',
|
||||
barColor: '#4caf50',
|
||||
});
|
||||
}
|
||||
|
||||
if ($('#sparklinedash2').length > 0) {
|
||||
$('#sparklinedash2').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
|
||||
type: 'bar',
|
||||
height: '20',
|
||||
barWidth: '3',
|
||||
resize: true,
|
||||
barSpacing: '3',
|
||||
barColor: '#9675ce',
|
||||
});
|
||||
}
|
||||
|
||||
if ($('#sparklinedash3').length > 0) {
|
||||
$('#sparklinedash3').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
|
||||
type: 'bar',
|
||||
height: '20',
|
||||
barWidth: '3',
|
||||
resize: true,
|
||||
barSpacing: '3',
|
||||
barColor: '#03a9f3',
|
||||
});
|
||||
}
|
||||
|
||||
if ($('#sparklinedash4').length > 0) {
|
||||
$('#sparklinedash4').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
|
||||
type: 'bar',
|
||||
height: '20',
|
||||
barWidth: '3',
|
||||
resize: true,
|
||||
barSpacing: '3',
|
||||
barColor: '#f96262',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
drawSparklines();
|
||||
|
||||
// Redraw sparklines on resize
|
||||
$(window).resize(debounce(drawSparklines, 150));
|
||||
|
||||
// ------------------------------------------------------
|
||||
// @Other Sparklines
|
||||
// ------------------------------------------------------
|
||||
|
||||
$('#sparkline').sparkline(
|
||||
[5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7],
|
||||
{
|
||||
type: 'line',
|
||||
resize: true,
|
||||
height: '20',
|
||||
}
|
||||
);
|
||||
|
||||
$('#compositebar').sparkline(
|
||||
'html',
|
||||
{
|
||||
type: 'bar',
|
||||
resize: true,
|
||||
barColor: '#aaf',
|
||||
height: '20',
|
||||
}
|
||||
);
|
||||
|
||||
$('#compositebar').sparkline(
|
||||
[4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: 'red',
|
||||
resize: true,
|
||||
height: '20',
|
||||
}
|
||||
);
|
||||
|
||||
$('#normalline').sparkline(
|
||||
'html',
|
||||
{
|
||||
fillColor: false,
|
||||
normalRangeMin: -1,
|
||||
resize: true,
|
||||
normalRangeMax: 8,
|
||||
height: '20',
|
||||
}
|
||||
);
|
||||
|
||||
$('.sparktristate').sparkline(
|
||||
'html',
|
||||
{
|
||||
type: 'tristate',
|
||||
resize: true,
|
||||
height: '20',
|
||||
}
|
||||
);
|
||||
|
||||
$('.sparktristatecols').sparkline(
|
||||
'html',
|
||||
{
|
||||
type: 'tristate',
|
||||
colorMap: {
|
||||
'-2': '#fa7',
|
||||
resize: true,
|
||||
'2': '#44f',
|
||||
height: '20',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const values = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
|
||||
const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];
|
||||
|
||||
$('.sparkline').sparkline(values, {
|
||||
type: 'line',
|
||||
barWidth: 4,
|
||||
barSpacing: 5,
|
||||
fillColor: '',
|
||||
lineColor: COLORS['red-500'],
|
||||
lineWidth: 2,
|
||||
spotRadius: 3,
|
||||
spotColor: COLORS['red-500'],
|
||||
maxSpotColor: COLORS['red-500'],
|
||||
minSpotColor: COLORS['red-500'],
|
||||
highlightSpotColor: COLORS['red-500'],
|
||||
highlightLineColor: '',
|
||||
tooltipSuffix: ' Bzzt',
|
||||
tooltipPrefix: 'Hello ',
|
||||
width: 100,
|
||||
height: undefined,
|
||||
barColor: '9f0',
|
||||
negBarColor: 'ff0',
|
||||
stackedBarColor: ['ff0', '9f0', '999', 'f60'],
|
||||
sliceColors: ['ff0', '9f0', '000', 'f60'],
|
||||
offset: '30',
|
||||
borderWidth: 1,
|
||||
borderColor: '000',
|
||||
});
|
||||
|
||||
$('.sparkbar').sparkline(values, {
|
||||
type: 'bar',
|
||||
barWidth: 4,
|
||||
barSpacing: 1,
|
||||
fillColor: '',
|
||||
lineColor: COLORS['deep-purple-500'],
|
||||
tooltipSuffix: 'Celsius',
|
||||
width: 100,
|
||||
barColor: '39f',
|
||||
negBarColor: COLORS['deep-purple-500'],
|
||||
stackedBarColor: ['ff0', '9f0', '999', 'f60'],
|
||||
sliceColors: ['ff0', '9f0', '000', 'f60'],
|
||||
offset: '30',
|
||||
borderWidth: 1,
|
||||
borderColor: '000',
|
||||
});
|
||||
|
||||
$('.sparktri').sparkline(valuesAlt, {
|
||||
type: 'tristate',
|
||||
barWidth: 4,
|
||||
barSpacing: 1,
|
||||
fillColor: '',
|
||||
lineColor: COLORS['light-blue-500'],
|
||||
tooltipSuffix: 'Celsius',
|
||||
width: 100,
|
||||
barColor: COLORS['light-blue-500'],
|
||||
posBarColor: COLORS['light-blue-500'],
|
||||
negBarColor: 'f90',
|
||||
zeroBarColor: '000',
|
||||
stackedBarColor: ['ff0', '9f0', '999', 'f60'],
|
||||
sliceColors: ['ff0', '9f0', '000', 'f60'],
|
||||
offset: '30',
|
||||
borderWidth: 1,
|
||||
borderColor: '000',
|
||||
});
|
||||
|
||||
$('.sparkdisc').sparkline(values, {
|
||||
type: 'discrete',
|
||||
barWidth: 4,
|
||||
barSpacing: 5,
|
||||
fillColor: '',
|
||||
lineColor: '9f0',
|
||||
tooltipSuffix: 'Celsius',
|
||||
width: 100,
|
||||
barColor: '9f0',
|
||||
|
||||
negBarColor: 'f90',
|
||||
|
||||
stackedBarColor: ['ff0', '9f0', '999', 'f60'],
|
||||
sliceColors: ['ff0', '9f0', '000', 'f60'],
|
||||
offset: '30',
|
||||
borderWidth: 1,
|
||||
borderColor: '000',
|
||||
});
|
||||
|
||||
$('.sparkbull').sparkline(values, {
|
||||
type: 'bullet',
|
||||
barWidth: 4,
|
||||
barSpacing: 5,
|
||||
fillColor: '',
|
||||
lineColor: COLORS['amber-500'],
|
||||
tooltipSuffix: 'Celsius',
|
||||
height: 'auto',
|
||||
width: 'auto',
|
||||
targetWidth: 'auto',
|
||||
barColor: COLORS['amber-500'],
|
||||
negBarColor: 'ff0',
|
||||
stackedBarColor: ['ff0', '9f0', '999', 'f60'],
|
||||
sliceColors: ['ff0', '9f0', '000', 'f60'],
|
||||
offset: '30',
|
||||
borderWidth: 1,
|
||||
borderColor: '000',
|
||||
});
|
||||
|
||||
$('.sparkbox').sparkline(values, {
|
||||
type: 'box',
|
||||
barWidth: 4,
|
||||
barSpacing: 5,
|
||||
fillColor: '',
|
||||
lineColor: '9f0',
|
||||
tooltipSuffix: 'Celsius',
|
||||
width: 100,
|
||||
barColor: '9f0',
|
||||
negBarColor: 'ff0',
|
||||
stackedBarColor: ['ff0', '9f0', '999', 'f60'],
|
||||
sliceColors: ['ff0', '9f0', '000', 'f60'],
|
||||
offset: '30',
|
||||
borderWidth: 1,
|
||||
borderColor: '000',
|
||||
});
|
||||
}())
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import * as $ from 'jquery';
|
||||
|
||||
export default (function () {
|
||||
$('#chat-sidebar-toggle').on('click', e => {
|
||||
$('#chat-sidebar').toggleClass('open');
|
||||
e.preventDefault();
|
||||
});
|
||||
}())
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
const COLORS = {
|
||||
'white' : '#ffffff',
|
||||
'red-50' : '#ffebee',
|
||||
'red-100' : '#ffcdd2',
|
||||
'red-200' : '#ef9a9a',
|
||||
'red-300' : '#e57373',
|
||||
'red-400' : '#ef5350',
|
||||
'red-500' : '#f44336',
|
||||
'red-600' : '#e53935',
|
||||
'red-700' : '#d32f2f',
|
||||
'red-800' : '#c62828',
|
||||
'red-900' : '#b71c1c',
|
||||
'red-a100' : '#ff8a80',
|
||||
'red-a200' : '#ff5252',
|
||||
'red-a400' : '#ff1744',
|
||||
'red-a700' : '#d50000',
|
||||
'pink-50' : '#fce4ec',
|
||||
'pink-100' : '#f8bbd0',
|
||||
'pink-200' : '#f48fb1',
|
||||
'pink-300' : '#f06292',
|
||||
'pink-400' : '#ec407a',
|
||||
'pink-500' : '#e91e63',
|
||||
'pink-600' : '#d81b60',
|
||||
'pink-700' : '#c2185b',
|
||||
'pink-800' : '#ad1457',
|
||||
'pink-900' : '#880e4f',
|
||||
'pink-a100' : '#ff80ab',
|
||||
'pink-a200' : '#ff4081',
|
||||
'pink-a400' : '#f50057',
|
||||
'pink-a700' : '#c51162',
|
||||
'purple-50' : '#f3e5f5',
|
||||
'purple-100' : '#e1bee7',
|
||||
'purple-200' : '#ce93d8',
|
||||
'purple-300' : '#ba68c8',
|
||||
'purple-400' : '#ab47bc',
|
||||
'purple-500' : '#9c27b0',
|
||||
'purple-600' : '#8e24aa',
|
||||
'purple-700' : '#7b1fa2',
|
||||
'purple-800' : '#6a1b9a',
|
||||
'purple-900' : '#4a148c',
|
||||
'purple-a100' : '#ea80fc',
|
||||
'purple-a200' : '#e040fb',
|
||||
'purple-a400' : '#d500f9',
|
||||
'purple-a700' : '#aa00ff',
|
||||
'deep-purple-50' : '#ede7f6',
|
||||
'deep-purple-100' : '#d1c4e9',
|
||||
'deep-purple-200' : '#b39ddb',
|
||||
'deep-purple-300' : '#9575cd',
|
||||
'deep-purple-400' : '#7e57c2',
|
||||
'deep-purple-500' : '#673ab7',
|
||||
'deep-purple-600' : '#5e35b1',
|
||||
'deep-purple-700' : '#512da8',
|
||||
'deep-purple-800' : '#4527a0',
|
||||
'deep-purple-900' : '#311b92',
|
||||
'deep-purple-a100' : '#b388ff',
|
||||
'deep-purple-a200' : '#7c4dff',
|
||||
'deep-purple-a400' : '#651fff',
|
||||
'deep-purple-a700' : '#6200ea',
|
||||
'indigo-50' : '#e8eaf6',
|
||||
'indigo-100' : '#c5cae9',
|
||||
'indigo-200' : '#9fa8da',
|
||||
'indigo-300' : '#7986cb',
|
||||
'indigo-400' : '#5c6bc0',
|
||||
'indigo-500' : '#3f51b5',
|
||||
'indigo-600' : '#3949ab',
|
||||
'indigo-700' : '#303f9f',
|
||||
'indigo-800' : '#283593',
|
||||
'indigo-900' : '#1a237e',
|
||||
'indigo-a100' : '#8c9eff',
|
||||
'indigo-a200' : '#536dfe',
|
||||
'indigo-a400' : '#3d5afe',
|
||||
'indigo-a700' : '#304ffe',
|
||||
'blue-50' : '#e3f2fd',
|
||||
'blue-100' : '#bbdefb',
|
||||
'blue-200' : '#90caf9',
|
||||
'blue-300' : '#64b5f6',
|
||||
'blue-400' : '#42a5f5',
|
||||
'blue-500' : '#2196f3',
|
||||
'blue-600' : '#1e88e5',
|
||||
'blue-700' : '#1976d2',
|
||||
'blue-800' : '#1565c0',
|
||||
'blue-900' : '#0d47a1',
|
||||
'blue-a100' : '#82b1ff',
|
||||
'blue-a200' : '#448aff',
|
||||
'blue-a400' : '#2979ff',
|
||||
'blue-a700' : '#2962ff',
|
||||
'light-blue-50' : '#e1f5fe',
|
||||
'light-blue-100' : '#b3e5fc',
|
||||
'light-blue-200' : '#81d4fa',
|
||||
'light-blue-300' : '#4fc3f7',
|
||||
'light-blue-400' : '#29b6f6',
|
||||
'light-blue-500' : '#03a9f4',
|
||||
'light-blue-600' : '#039be5',
|
||||
'light-blue-700' : '#0288d1',
|
||||
'light-blue-800' : '#0277bd',
|
||||
'light-blue-900' : '#01579b',
|
||||
'light-blue-a100' : '#80d8ff',
|
||||
'light-blue-a200' : '#40c4ff',
|
||||
'light-blue-a400' : '#00b0ff',
|
||||
'light-blue-a700' : '#0091ea',
|
||||
'cyan-50' : '#e0f7fa',
|
||||
'cyan-100' : '#b2ebf2',
|
||||
'cyan-200' : '#80deea',
|
||||
'cyan-300' : '#4dd0e1',
|
||||
'cyan-400' : '#26c6da',
|
||||
'cyan-500' : '#00bcd4',
|
||||
'cyan-600' : '#00acc1',
|
||||
'cyan-700' : '#0097a7',
|
||||
'cyan-800' : '#00838f',
|
||||
'cyan-900' : '#006064',
|
||||
'cyan-a100' : '#84ffff',
|
||||
'cyan-a200' : '#18ffff',
|
||||
'cyan-a400' : '#00e5ff',
|
||||
'cyan-a700' : '#00b8d4',
|
||||
'teal-50' : '#e0f2f1',
|
||||
'teal-100' : '#b2dfdb',
|
||||
'teal-200' : '#80cbc4',
|
||||
'teal-300' : '#4db6ac',
|
||||
'teal-400' : '#26a69a',
|
||||
'teal-500' : '#009688',
|
||||
'teal-600' : '#00897b',
|
||||
'teal-700' : '#00796b',
|
||||
'teal-800' : '#00695c',
|
||||
'teal-900' : '#004d40',
|
||||
'teal-a100' : '#a7ffeb',
|
||||
'teal-a200' : '#64ffda',
|
||||
'teal-a400' : '#1de9b6',
|
||||
'teal-a700' : '#00bfa5',
|
||||
'green-50' : '#e8f5e9',
|
||||
'green-100' : '#c8e6c9',
|
||||
'green-200' : '#a5d6a7',
|
||||
'green-300' : '#81c784',
|
||||
'green-400' : '#66bb6a',
|
||||
'green-500' : '#4caf50',
|
||||
'green-600' : '#43a047',
|
||||
'green-700' : '#388e3c',
|
||||
'green-800' : '#2e7d32',
|
||||
'green-900' : '#1b5e20',
|
||||
'green-a100' : '#b9f6ca',
|
||||
'green-a200' : '#69f0ae',
|
||||
'green-a400' : '#00e676',
|
||||
'green-a700' : '#00c853',
|
||||
'light-green-50' : '#f1f8e9',
|
||||
'light-green-100' : '#dcedc8',
|
||||
'light-green-200' : '#c5e1a5',
|
||||
'light-green-300' : '#aed581',
|
||||
'light-green-400' : '#9ccc65',
|
||||
'light-green-500' : '#8bc34a',
|
||||
'light-green-600' : '#7cb342',
|
||||
'light-green-700' : '#689f38',
|
||||
'light-green-800' : '#558b2f',
|
||||
'light-green-900' : '#33691e',
|
||||
'light-green-a100' : '#ccff90',
|
||||
'light-green-a200' : '#b2ff59',
|
||||
'light-green-a400' : '#76ff03',
|
||||
'light-green-a700' : '#64dd17',
|
||||
'lime-50' : '#f9fbe7',
|
||||
'lime-100' : '#f0f4c3',
|
||||
'lime-200' : '#e6ee9c',
|
||||
'lime-300' : '#dce775',
|
||||
'lime-400' : '#d4e157',
|
||||
'lime-500' : '#cddc39',
|
||||
'lime-600' : '#c0ca33',
|
||||
'lime-700' : '#afb42b',
|
||||
'lime-800' : '#9e9d24',
|
||||
'lime-900' : '#827717',
|
||||
'lime-a100' : '#f4ff81',
|
||||
'lime-a200' : '#eeff41',
|
||||
'lime-a400' : '#c6ff00',
|
||||
'lime-a700' : '#aeea00',
|
||||
'yellow-50' : '#fffde7',
|
||||
'yellow-100' : '#fff9c4',
|
||||
'yellow-200' : '#fff59d',
|
||||
'yellow-300' : '#fff176',
|
||||
'yellow-400' : '#ffee58',
|
||||
'yellow-500' : '#ffeb3b',
|
||||
'yellow-600' : '#fdd835',
|
||||
'yellow-700' : '#fbc02d',
|
||||
'yellow-800' : '#f9a825',
|
||||
'yellow-900' : '#f57f17',
|
||||
'yellow-a100' : '#ffff8d',
|
||||
'yellow-a200' : '#ffff00',
|
||||
'yellow-a400' : '#ffea00',
|
||||
'yellow-a700' : '#ffd600',
|
||||
'amber-50' : '#fff8e1',
|
||||
'amber-100' : '#ffecb3',
|
||||
'amber-200' : '#ffe082',
|
||||
'amber-300' : '#ffd54f',
|
||||
'amber-400' : '#ffca28',
|
||||
'amber-500' : '#ffc107',
|
||||
'amber-600' : '#ffb300',
|
||||
'amber-700' : '#ffa000',
|
||||
'amber-800' : '#ff8f00',
|
||||
'amber-900' : '#ff6f00',
|
||||
'amber-a100' : '#ffe57f',
|
||||
'amber-a200' : '#ffd740',
|
||||
'amber-a400' : '#ffc400',
|
||||
'amber-a700' : '#ffab00',
|
||||
'orange-50' : '#fff3e0',
|
||||
'orange-100' : '#ffe0b2',
|
||||
'orange-200' : '#ffcc80',
|
||||
'orange-300' : '#ffb74d',
|
||||
'orange-400' : '#ffa726',
|
||||
'orange-500' : '#ff9800',
|
||||
'orange-600' : '#fb8c00',
|
||||
'orange-700' : '#f57c00',
|
||||
'orange-800' : '#ef6c00',
|
||||
'orange-900' : '#e65100',
|
||||
'orange-a100' : '#ffd180',
|
||||
'orange-a200' : '#ffab40',
|
||||
'orange-a400' : '#ff9100',
|
||||
'orange-a700' : '#ff6d00',
|
||||
'deep-orange-50' : '#fbe9e7',
|
||||
'deep-orange-100' : '#ffccbc',
|
||||
'deep-orange-200' : '#ffab91',
|
||||
'deep-orange-300' : '#ff8a65',
|
||||
'deep-orange-400' : '#ff7043',
|
||||
'deep-orange-500' : '#ff5722',
|
||||
'deep-orange-600' : '#f4511e',
|
||||
'deep-orange-700' : '#e64a19',
|
||||
'deep-orange-800' : '#d84315',
|
||||
'deep-orange-900' : '#bf360c',
|
||||
'deep-orange-a100' : '#ff9e80',
|
||||
'deep-orange-a200' : '#ff6e40',
|
||||
'deep-orange-a400' : '#ff3d00',
|
||||
'deep-orange-a700' : '#dd2c00',
|
||||
'brown-50' : '#efebe9',
|
||||
'brown-100' : '#d7ccc8',
|
||||
'brown-200' : '#bcaaa4',
|
||||
'brown-300' : '#a1887f',
|
||||
'brown-400' : '#8d6e63',
|
||||
'brown-500' : '#795548',
|
||||
'brown-600' : '#6d4c41',
|
||||
'brown-700' : '#5d4037',
|
||||
'brown-800' : '#4e342e',
|
||||
'brown-900' : '#3e2723',
|
||||
'grey-50' : '#fafafa',
|
||||
'grey-100' : '#f5f5f5',
|
||||
'grey-200' : '#eeeeee',
|
||||
'grey-300' : '#e0e0e0',
|
||||
'grey-400' : '#bdbdbd',
|
||||
'grey-500' : '#9e9e9e',
|
||||
'grey-600' : '#757575',
|
||||
'grey-700' : '#616161',
|
||||
'grey-800' : '#424242',
|
||||
'grey-900' : '#212121',
|
||||
'blue-grey-50' : '#eceff1',
|
||||
'blue-grey-100' : '#cfd8dc',
|
||||
'blue-grey-200' : '#b0bec5',
|
||||
'blue-grey-300' : '#90a4ae',
|
||||
'blue-grey-400' : '#78909c',
|
||||
'blue-grey-500' : '#607d8b',
|
||||
'blue-grey-600' : '#546e7a',
|
||||
'blue-grey-700' : '#455a64',
|
||||
'blue-grey-800' : '#37474f',
|
||||
'blue-grey-900' : '#263238',
|
||||
};
|
||||
|
||||
const GREYS = {
|
||||
'grey-100' : '#f9fafb',
|
||||
'grey-200' : '#f2f3f5',
|
||||
'grey-300' : '#e6eaf0',
|
||||
'grey-400' : '#d3d9e3',
|
||||
'grey-500' : '#b9c2d0',
|
||||
'grey-600' : '#7c8695',
|
||||
'grey-700' : '#72777a',
|
||||
'grey-800' : '#565a5c',
|
||||
'grey-900' : '#313435',
|
||||
};
|
||||
|
||||
export {
|
||||
COLORS,
|
||||
GREYS,
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import * as $ from 'jquery';
|
||||
import 'datatables';
|
||||
|
||||
export default (function () {
|
||||
$('#dataTable').DataTable();
|
||||
}());
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import * as $ from 'jquery';
|
||||
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
|
||||
import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
|
||||
|
||||
export default (function () {
|
||||
$('.start-date').datepicker();
|
||||
$('.end-date').datepicker();
|
||||
}())
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import * as $ from 'jquery';
|
||||
|
||||
export default (function () {
|
||||
$('.email-side-toggle').on('click', e => {
|
||||
$('.email-app').toggleClass('side-active');
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$('.email-list-item, .back-to-mailbox').on('click', e => {
|
||||
$('.email-content').toggleClass('open');
|
||||
e.preventDefault();
|
||||
});
|
||||
}())
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import * as $ from 'jquery';
|
||||
import 'fullcalendar/dist/fullcalendar.min.js';
|
||||
import 'fullcalendar/dist/fullcalendar.min.css';
|
||||
|
||||
export default (function () {
|
||||
const date = new Date();
|
||||
const d = date.getDate();
|
||||
const m = date.getMonth();
|
||||
const y = date.getFullYear();
|
||||
|
||||
const events = [{
|
||||
title : 'All Day Event',
|
||||
start : new Date(y, m, 1),
|
||||
desc : 'Meetings',
|
||||
bullet : 'success',
|
||||
}, {
|
||||
title : 'Long Event',
|
||||
start : new Date(y, m, d - 5),
|
||||
end : new Date(y, m, d - 2),
|
||||
desc : 'Hangouts',
|
||||
bullet : 'success',
|
||||
}, {
|
||||
title : 'Repeating Event',
|
||||
start : new Date(y, m, d - 3, 16, 0),
|
||||
allDay : false,
|
||||
desc : 'Product Checkup',
|
||||
bullet : 'warning',
|
||||
}, {
|
||||
title : 'Repeating Event',
|
||||
start : new Date(y, m, d + 4, 16, 0),
|
||||
allDay : false,
|
||||
desc : 'Conference',
|
||||
bullet : 'danger',
|
||||
}, {
|
||||
title : 'Birthday Party',
|
||||
start : new Date(y, m, d + 1, 19, 0),
|
||||
end : new Date(y, m, d + 1, 22, 30),
|
||||
allDay : false,
|
||||
desc : 'Gathering',
|
||||
}, {
|
||||
title : 'Click for Google',
|
||||
start : new Date(y, m, 28),
|
||||
end : new Date(y, m, 29),
|
||||
url : 'http ://google.com/',
|
||||
desc : 'Google',
|
||||
bullet : 'success',
|
||||
}];
|
||||
|
||||
$('#full-calendar').fullCalendar({
|
||||
events,
|
||||
height : 800,
|
||||
editable : true,
|
||||
header: {
|
||||
left : 'month,agendaWeek,agendaDay',
|
||||
center : 'title',
|
||||
right : 'today prev,next',
|
||||
},
|
||||
});
|
||||
}())
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import * as $ from 'jquery';
|
||||
import loadGoogleMapsAPI from 'load-google-maps-api';
|
||||
|
||||
export default (function () {
|
||||
if ($('#google-map').length > 0) {
|
||||
loadGoogleMapsAPI({
|
||||
key: 'AIzaSyDW8td30_gj6sGXjiMU0ALeMu1SDEwUnEA',
|
||||
}).then(() => {
|
||||
const latitude = 26.8206;
|
||||
const longitude = 30.8025;
|
||||
const mapZoom = 5;
|
||||
const { google } = window;
|
||||
|
||||
const mapOptions = {
|
||||
center : new google.maps.LatLng(latitude, longitude),
|
||||
zoom : mapZoom,
|
||||
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
||||
styles: [{
|
||||
'featureType': 'landscape',
|
||||
'stylers': [
|
||||
{ 'hue' : '#FFBB00' },
|
||||
{ 'saturation' : 43.400000000000006 },
|
||||
{ 'lightness' : 37.599999999999994 },
|
||||
{ 'gamma' : 1 },
|
||||
],
|
||||
}, {
|
||||
'featureType': 'road.highway',
|
||||
'stylers': [
|
||||
{ 'hue' : '#FFC200' },
|
||||
{ 'saturation' : -61.8 },
|
||||
{ 'lightness' : 45.599999999999994 },
|
||||
{ 'gamma' : 1 },
|
||||
],
|
||||
}, {
|
||||
'featureType': 'road.arterial',
|
||||
'stylers': [
|
||||
{ 'hue' : '#FF0300' },
|
||||
{ 'saturation' : -100 },
|
||||
{ 'lightness' : 51.19999999999999 },
|
||||
{ 'gamma' : 1 },
|
||||
],
|
||||
}, {
|
||||
'featureType': 'road.local',
|
||||
'stylers': [
|
||||
{ 'hue' : '#FF0300' },
|
||||
{ 'saturation' : -100 },
|
||||
{ 'lightness' : 52 },
|
||||
{ 'gamma' : 1 },
|
||||
],
|
||||
}, {
|
||||
'featureType': 'water',
|
||||
'stylers': [
|
||||
{ 'hue' : '#0078FF' },
|
||||
{ 'saturation' : -13.200000000000003 },
|
||||
{ 'lightness' : 2.4000000000000057 },
|
||||
{ 'gamma' : 1 },
|
||||
],
|
||||
}, {
|
||||
'featureType': 'poi',
|
||||
'stylers': [
|
||||
{ 'hue' : '#00FF6A' },
|
||||
{ 'saturation' : -1.0989010989011234 },
|
||||
{ 'lightness' : 11.200000000000017 },
|
||||
{ 'gamma' : 1 },
|
||||
],
|
||||
}],
|
||||
};
|
||||
|
||||
const map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
|
||||
|
||||
new google.maps.Marker({
|
||||
map,
|
||||
position : new google.maps.LatLng(latitude, longitude),
|
||||
visible : true,
|
||||
});
|
||||
});
|
||||
}
|
||||
}())
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import '../styles/index.scss';
|
||||
|
||||
import './masonry';
|
||||
import './popover';
|
||||
import './scrollbar';
|
||||
import './search';
|
||||
import './sidebar';
|
||||
import './skycons';
|
||||
import './datatable';
|
||||
import './datepicker';
|
||||
import './utils';
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import * as $ from 'jquery';
|
||||
import Masonry from 'masonry-layout';
|
||||
|
||||
export default (function () {
|
||||
window.addEventListener('load', () => {
|
||||
if ($('.masonry').length > 0) {
|
||||
new Masonry('.masonry', {
|
||||
itemSelector: '.masonry-item',
|
||||
columnWidth: '.masonry-sizer',
|
||||
percentPosition: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
}());
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import * as $ from 'jquery';
|
||||
import 'bootstrap';
|
||||
|
||||
export default (function () {
|
||||
// ------------------------------------------------------
|
||||
// @Popover
|
||||
// ------------------------------------------------------
|
||||
|
||||
$('[data-toggle="popover"]').popover();
|
||||
|
||||
// ------------------------------------------------------
|
||||
// @Tooltips
|
||||
// ------------------------------------------------------
|
||||
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
}());
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import * as $ from 'jquery';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
|
||||
export default (function () {
|
||||
const scrollables = $('.scrollable');
|
||||
if (scrollables.length > 0) {
|
||||
scrollables.each((index, el) => {
|
||||
new PerfectScrollbar(el);
|
||||
});
|
||||
}
|
||||
}());
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import * as $ from 'jquery';
|
||||
|
||||
export default (function () {
|
||||
$('.search-toggle').on('click', e => {
|
||||
$('.search-box, .search-input').toggleClass('active');
|
||||
$('.search-input input').focus();
|
||||
e.preventDefault();
|
||||
});
|
||||
}());
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import * as $ from 'jquery';
|
||||
|
||||
export default (function () {
|
||||
// Sidebar links
|
||||
$('.sidebar .sidebar-menu li a').on('click', function () {
|
||||
const $this = $(this);
|
||||
|
||||
if ($this.parent().hasClass('open')) {
|
||||
$this
|
||||
.parent()
|
||||
.children('.dropdown-menu')
|
||||
.slideUp(200, () => {
|
||||
$this.parent().removeClass('open');
|
||||
});
|
||||
} else {
|
||||
$this
|
||||
.parent()
|
||||
.parent()
|
||||
.children('li.open')
|
||||
.children('.dropdown-menu')
|
||||
.slideUp(200);
|
||||
|
||||
$this
|
||||
.parent()
|
||||
.parent()
|
||||
.children('li.open')
|
||||
.children('a')
|
||||
.removeClass('open');
|
||||
|
||||
$this
|
||||
.parent()
|
||||
.parent()
|
||||
.children('li.open')
|
||||
.removeClass('open');
|
||||
|
||||
$this
|
||||
.parent()
|
||||
.children('.dropdown-menu')
|
||||
.slideDown(200, () => {
|
||||
$this.parent().addClass('open');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Sidebar Activity Class
|
||||
const sidebarLinks = $('.sidebar').find('.sidebar-link');
|
||||
|
||||
sidebarLinks
|
||||
.each((index, el) => {
|
||||
$(el).removeClass('active');
|
||||
})
|
||||
.filter(function () {
|
||||
const href = $(this).attr('href');
|
||||
const pattern = href[0] === '/' ? href.substr(1) : href;
|
||||
return pattern === (window.location.pathname).substr(1);
|
||||
})
|
||||
.addClass('active');
|
||||
|
||||
// ٍSidebar Toggle
|
||||
$('.sidebar-toggle').on('click', e => {
|
||||
$('.app').toggleClass('is-collapsed');
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
/**
|
||||
* Wait untill sidebar fully toggled (animated in/out)
|
||||
* then trigger window resize event in order to recalculate
|
||||
* masonry layout widths and gutters.
|
||||
*/
|
||||
$('#sidebar-toggle').click(e => {
|
||||
e.preventDefault();
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(window.EVENT);
|
||||
}, 300);
|
||||
});
|
||||
}());
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import SkyconsInit from 'skycons';
|
||||
|
||||
const Skycons = SkyconsInit(window);
|
||||
|
||||
export default (function () {
|
||||
const icons = new Skycons({ 'color': '#ff6849' });
|
||||
const list = [
|
||||
'clear-day',
|
||||
'clear-night',
|
||||
'partly-cloudy-day',
|
||||
'partly-cloudy-night',
|
||||
'cloudy',
|
||||
'rain',
|
||||
'sleet',
|
||||
'snow',
|
||||
'wind',
|
||||
'fog',
|
||||
];
|
||||
let i = list.length;
|
||||
|
||||
while (i--) {
|
||||
const
|
||||
weatherType = list[i],
|
||||
elements = document.getElementsByClassName(weatherType);
|
||||
let j = elements.length;
|
||||
|
||||
while (j--) {
|
||||
icons.set(elements[j], weatherType);
|
||||
}
|
||||
}
|
||||
|
||||
icons.play();
|
||||
}());
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import * as $ from 'jquery';
|
||||
|
||||
export default (function () {
|
||||
// ------------------------------------------------------
|
||||
// @Window Resize
|
||||
// ------------------------------------------------------
|
||||
|
||||
/**
|
||||
* NOTE: Register resize event for Masonry layout
|
||||
*/
|
||||
const EVENT = document.createEvent('UIEvents');
|
||||
window.EVENT = EVENT;
|
||||
EVENT.initUIEvent('resize', true, false, window, 0);
|
||||
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
/**
|
||||
* Trigger window resize event after page load
|
||||
* for recalculation of masonry layout.
|
||||
*/
|
||||
window.dispatchEvent(EVENT);
|
||||
});
|
||||
|
||||
// ------------------------------------------------------
|
||||
// @External Links
|
||||
// ------------------------------------------------------
|
||||
|
||||
// Open external links in new window
|
||||
$('a')
|
||||
.filter('[href^="http"], [href^="//"]')
|
||||
.not(`[href*="${window.location.host}"]`)
|
||||
.attr('rel', 'noopener noreferrer')
|
||||
.attr('target', '_blank');
|
||||
|
||||
// ------------------------------------------------------
|
||||
// @Resize Trigger
|
||||
// ------------------------------------------------------
|
||||
|
||||
// Trigger resize on any element click
|
||||
document.addEventListener('click', () => {
|
||||
window.dispatchEvent(window.EVENT);
|
||||
});
|
||||
}());
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import * as $ from 'jquery';
|
||||
import 'jvectormap';
|
||||
import 'jvectormap/jquery-jvectormap.css';
|
||||
import './jquery-jvectormap-world-mill.js';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
export default (function () {
|
||||
const vectorMapInit = () => {
|
||||
if ($('#world-map-marker').length > 0) {
|
||||
// This is a hack, as the .empty() did not do the work
|
||||
$('#vmap').remove();
|
||||
|
||||
// we recreate (after removing it) the container div, to reset all the data of the map
|
||||
$('#world-map-marker').append(`
|
||||
<div
|
||||
id="vmap"
|
||||
style="
|
||||
height: 490px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
"
|
||||
>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$('#vmap').vectorMap({
|
||||
map: 'world_mill',
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#fff',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 0,
|
||||
color: '#e6e6e6',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#e4ecef',
|
||||
},
|
||||
},
|
||||
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 7,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 2,
|
||||
'stroke-opacity': 0.4,
|
||||
},
|
||||
},
|
||||
|
||||
markers : [{
|
||||
latLng : [21.00, 78.00],
|
||||
name : 'INDIA : 350',
|
||||
}, {
|
||||
latLng : [-33.00, 151.00],
|
||||
name : 'Australia : 250',
|
||||
}, {
|
||||
latLng : [36.77, -119.41],
|
||||
name : 'USA : 250',
|
||||
}, {
|
||||
latLng : [55.37, -3.41],
|
||||
name : 'UK : 250',
|
||||
}, {
|
||||
latLng : [25.20, 55.27],
|
||||
name : 'UAE : 250',
|
||||
}],
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
'US': 298,
|
||||
'SA': 200,
|
||||
'AU': 760,
|
||||
'IN': 200,
|
||||
'GB': 120,
|
||||
},
|
||||
scale: ['#03a9f3', '#02a7f1'],
|
||||
normalizeFunction: 'polynomial',
|
||||
}],
|
||||
},
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
zoomOnScroll: false,
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
selectedColor: '#c9dfaf',
|
||||
selectedRegions: [],
|
||||
enableZoom: false,
|
||||
hoverColor: '#fff',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
vectorMapInit();
|
||||
$(window).resize(debounce(vectorMapInit, 150));
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 B |
Binary file not shown.
|
After Width: | Height: | Size: 148 B |
Binary file not shown.
|
After Width: | Height: | Size: 201 B |
Binary file not shown.
|
After Width: | Height: | Size: 158 B |
Binary file not shown.
|
After Width: | Height: | Size: 146 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3388.25 3014.2"><title>react-1</title><circle cx="1694.17" cy="1504.25" r="302.6" fill="#fff"/><path d="M1806.5,1191.9c406.2,0,783.6,58.3,1068.1,156.2,342.8,118,553.6,296.9,553.6,458.9,0,168.8-223.4,358.9-591.5,480.8-278.3,92.2-644.6,140.4-1030.2,140.4-395.4,0-769.7-45.2-1051.2-141.4C399.2,2165.1,184.7,1972.6,184.7,1807c0-160.7,201.3-338.2,539.3-456,285.6-99.5,672.3-159.1,1082.5-159.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271,1501.3c202.9-351.9,442-649.7,669-847.2,273.5-238,533.8-331.2,674.1-250.3,146.2,84.3,199.3,372.8,121,752.7-59.2,287.2-200.4,628.5-393.1,962.6-197.5,342.5-423.7,644.2-647.6,840-283.3,247.7-557.3,337.3-700.7,254.6-139.2-80.3-192.4-343.3-125.7-695,56.4-297.4,198-662.1,403-1017.4Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271.5,2119.8C1068,1768.2,929.4,1412.4,871.6,1117.1c-69.6-355.8-20.4-627.9,119.8-709,146.1-84.6,422.5,13.5,712.5,271,219.3,194.7,444.4,487.5,637.6,821.3,198.1,342.2,346.6,688.8,404.3,980.5,73.1,369.2,13.9,651.3-129.4,734.2-139.1,80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
@import 'spec/settings/index';
|
||||
@import 'spec/tools/index';
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import 'spec/index';
|
||||
@import 'vendor/index';
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.easy-pie-chart {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
footer {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
.checkbox label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 17px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkbox label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: -12px;
|
||||
border: 1px solid $grey-300;
|
||||
border-radius: 3px;
|
||||
background-color: $md-white;
|
||||
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox label::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
text-align: center;
|
||||
font-size: 10px !important;
|
||||
line-height: 17px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: -12px;
|
||||
color: $grey-500;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:focus + label::before {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:checked + label::after {
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f00c";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:disabled + label::before {
|
||||
background-color: $grey-400;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.checkbox.checkbox-circle label::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.checkbox.checkbox-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:checked + label::before {
|
||||
background-color: $default-primary;
|
||||
border-color: $default-primary;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:checked + label::before {
|
||||
background-color: $default-danger;
|
||||
border-color: $default-danger;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:checked + label::after {
|
||||
color: $md-white;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:checked + label::before {
|
||||
background-color: $default-info;
|
||||
border-color: $default-info;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:checked + label::after {
|
||||
color: $md-white;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:checked + label::before {
|
||||
background-color: $default-warning;
|
||||
border-color: $default-warning;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:checked + label::after {
|
||||
color: $md-white;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:checked + label::before {
|
||||
background-color: $default-success;
|
||||
border-color: $default-success;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:checked + label::after {
|
||||
color: $md-white;
|
||||
}
|
||||
|
||||
.radio {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.radio label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.radio label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
-webkit-transition: border 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.radio label::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
background-color: #555555;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-ms-transform: scale(0, 0);
|
||||
-o-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
}
|
||||
|
||||
.radio input[type="radio"] {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:focus + label::before {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:checked + label::after {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:disabled + label::before {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio.radio-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.radio-primary input[type="radio"] + label::after {
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
.radio-primary input[type="radio"]:checked + label::before {
|
||||
border-color: #428bca;
|
||||
}
|
||||
|
||||
.radio-primary input[type="radio"]:checked + label::after {
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
.radio-danger input[type="radio"] + label::after {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.radio-danger input[type="radio"]:checked + label::before {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.radio-danger input[type="radio"]:checked + label::after {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.radio-info input[type="radio"] + label::after {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.radio-info input[type="radio"]:checked + label::before {
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
|
||||
.radio-info input[type="radio"]:checked + label::after {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.radio-warning input[type="radio"] + label::after {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.radio-warning input[type="radio"]:checked + label::before {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.radio-warning input[type="radio"]:checked + label::after {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.radio-success input[type="radio"] + label::after {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.radio-success input[type="radio"]:checked + label::before {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.radio-success input[type="radio"]:checked + label::after {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@import 'sidebar';
|
||||
@import 'topbar';
|
||||
@import 'pageContainer';
|
||||
@import 'progressBar';
|
||||
@import 'forms';
|
||||
@import 'masonry';
|
||||
@import 'loader';
|
||||
@import 'footer';
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
#loader {
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
display: default;
|
||||
}
|
||||
|
||||
#loader.fadeOut {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-scaleout {
|
||||
0% { -webkit-transform: scale(0) }
|
||||
100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-scaleout {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// + @Page Container
|
||||
// + @Main Content
|
||||
// + @Full Container
|
||||
// + @Collapsed State
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Page Container
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
padding-left: $offscreen-size;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
padding-left: $collapsed-size;
|
||||
}
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Main Content
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.main-content {
|
||||
padding: 85px 20px 20px;
|
||||
min-height: calc(100vh - 61px);
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
padding: 85px 5px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.remain-height {
|
||||
height: calc(100vh - 126px);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Full Container
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.full-container {
|
||||
left: $offscreen-size;
|
||||
min-height: calc(100vh - #{$header-height});
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $header-height;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
left: 0;
|
||||
padding-left: $collapsed-size;
|
||||
}
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Collapsed State
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.is-collapsed {
|
||||
.page-container {
|
||||
padding-left: $collapsed-size;
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
padding-left: $offscreen-size;
|
||||
}
|
||||
}
|
||||
|
||||
.full-container {
|
||||
left: $collapsed-size;
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
left: $offscreen-size;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.progress {
|
||||
height: 4px;
|
||||
background-color: #eaeef3;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// + @Sidebar
|
||||
// + @Sidebar Inner
|
||||
// + @Sidebar Header
|
||||
// + @Sidebar Menu
|
||||
// + @Sidebar Collapsed
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Sidebar
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.sidebar {
|
||||
background-color: $default-white;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all 0.2s ease;
|
||||
width: $offscreen-size;
|
||||
z-index: 1000;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
width: $collapsed-size;
|
||||
|
||||
.sidebar-inner {
|
||||
.sidebar-logo {
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
.logo {
|
||||
background-position: center center;
|
||||
width: $collapsed-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
overflow-x: hidden;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.dropdown {
|
||||
.arrow {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.open {
|
||||
ul.dropdown-menu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $offscreen-size;
|
||||
|
||||
.sidebar-inner {
|
||||
.sidebar-logo {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
> li {
|
||||
> a {
|
||||
.title {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.dropdown {
|
||||
.arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
> ul.dropdown-menu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
left: -$offscreen-size;
|
||||
width: calc(#{$offscreen-size} - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Sidebar Inner
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.sidebar-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Sidebar Header
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.sidebar-logo {
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
line-height: 0;
|
||||
padding: 0 20px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.logo {
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
min-height: calc(#{$header-height} - 1px);
|
||||
width: 100%;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
color: $grey-900;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: none;
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
line-height: calc(#{$header-height} - 1px);
|
||||
|
||||
a {
|
||||
color: $default-text-color;
|
||||
}
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Sidebar Menu
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.sidebar-menu {
|
||||
@include clearfix;
|
||||
border-right: 1px solid $border-color;
|
||||
height: calc(100vh - #{$header-height});
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
&.active::before {
|
||||
background: $md-blue-500;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 8px;
|
||||
left: -4px;
|
||||
position: absolute;
|
||||
top: calc(50% - 4px);
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&.dropdown {
|
||||
.arrow {
|
||||
font-size: 10px;
|
||||
line-height: 40px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
transition: all 0.05s ease-in;
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
> a {
|
||||
color: $default-dark;
|
||||
|
||||
.icon-holder {
|
||||
color: $default-info;
|
||||
}
|
||||
|
||||
> .arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
|
||||
.dropdown-menu {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $default-text-color;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $default-dark;
|
||||
text-decoration: none;
|
||||
|
||||
.icon-holder {
|
||||
color: $default-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
&.dropdown {
|
||||
ul {
|
||||
&.dropdown-menu {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
float: none;
|
||||
padding-left: 50px;
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: $default-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $default-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 5px 15px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
.icon-holder {
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
font-size: 17px;
|
||||
height: 35px;
|
||||
left: 0;
|
||||
line-height: 35px;
|
||||
margin-right: 14px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Sidebar Collapsed
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.is-collapsed {
|
||||
.sidebar {
|
||||
@include from($breakpoint-xl) {
|
||||
width: $collapsed-size;
|
||||
|
||||
.sidebar-inner {
|
||||
.sidebar-logo {
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
overflow-x: hidden;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.dropdown {
|
||||
.arrow {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.open {
|
||||
ul.dropdown-menu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $offscreen-size;
|
||||
|
||||
.sidebar-inner {
|
||||
.sidebar-logo {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
> li {
|
||||
> a {
|
||||
.title {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.dropdown {
|
||||
.arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
> ul.dropdown-menu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
width: $offscreen-size;
|
||||
|
||||
.sidebar-inner {
|
||||
.sidebar-logo {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 0 20px;
|
||||
|
||||
> a {
|
||||
.logo {
|
||||
background-position: center left;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
> li {
|
||||
> a {
|
||||
.title {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.dropdown {
|
||||
.arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
> ul.dropdown-menu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
|
||||
// + @Topbar
|
||||
// + @Collapsed State
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Topbar
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.header {
|
||||
background-color: $default-white;
|
||||
border-bottom: 1px solid $border-color;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
transition: all 0.2s ease;
|
||||
width: calc(100% - #{$offscreen-size});
|
||||
z-index: 800;
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
width: calc(100% - #{$collapsed-size});
|
||||
}
|
||||
|
||||
.header-container {
|
||||
@include clearfix;
|
||||
|
||||
height: $header-height;
|
||||
|
||||
.nav-left,
|
||||
.nav-right {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
color: $default-text-color;
|
||||
display: block;
|
||||
line-height: $header-height;
|
||||
min-height: $header-height;
|
||||
padding: 0 15px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
i {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $default-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notifications {
|
||||
position: relative;
|
||||
|
||||
.counter {
|
||||
background-color: $default-danger;
|
||||
border-radius: 50px;
|
||||
color: $default-white;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
padding: 3px 5.5px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 350px;
|
||||
padding: 0;
|
||||
|
||||
@include to($breakpoint-sm) {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
margin: 0;
|
||||
transform-origin: top right;
|
||||
transform: scale(0, 0);
|
||||
transition: transform 0.15s ease-out;
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid $border-color;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> li {
|
||||
> a {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
.dropdown-menu {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
float: right;
|
||||
|
||||
.dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
> li {
|
||||
width: 100%;
|
||||
|
||||
> a {
|
||||
line-height: 1.5;
|
||||
min-height: auto;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
.search-icon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.search-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-icon-close {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
margin-top: 12px;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
|
||||
@include to($breakpoint-sm) {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
@include placeholder {
|
||||
color: lighten($default-text-color, 20%);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Collapsed State
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.is-collapsed {
|
||||
.header {
|
||||
width: calc(100% - #{$collapsed-size});
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include between($breakpoint-md, $breakpoint-xl) {
|
||||
width: calc(100% - #{$offscreen-size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
html, html a, body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-primary;
|
||||
font-size: 14px;
|
||||
color: $default-text-color;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.2px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-secondary;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
font-family: $font-secondary;
|
||||
}
|
||||
|
||||
small {
|
||||
font-weight: 300;
|
||||
color: lighten($default-dark, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-primary;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $default-info;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: darken($default-info, 10%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.text-gray {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $default-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'base';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import 'generic/index';
|
||||
@import 'components/index';
|
||||
@import 'utils/index';
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
#chat-sidebar {
|
||||
width: 250px;
|
||||
height: calc(100vh - #{$header-height} - 60px);
|
||||
overflow: auto;
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
transition: all 0.3s ease-in-out;
|
||||
margin-left: -250px;
|
||||
|
||||
&.open {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#chat-box {
|
||||
height: calc(100vh - #{$header-height} - 60px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
.email-app {
|
||||
.email-side-nav {
|
||||
background: $default-white;
|
||||
position: fixed;
|
||||
border-right: 1px solid $border-color;
|
||||
float: left;
|
||||
width: 250px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
z-index: 1;
|
||||
left: -250px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
min-height: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@include from($breakpoint-md) {
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.email-list {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
background-color: $default-white;
|
||||
height: calc(100vh - #{$header-height});
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
max-height: calc(100vh - 65px);
|
||||
}
|
||||
|
||||
@include from($breakpoint-md) {
|
||||
width: 40%;
|
||||
border-right: 1px solid $border-color;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.email-content {
|
||||
float: left;
|
||||
width: 60%;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: $default-white;
|
||||
// min-height: calc(100vh - #{$header-height});
|
||||
|
||||
&.no-inbox-view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include to($breakpoint-md) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
max-height: calc(100vh - #{$header-height});
|
||||
overflow-y: scroll;
|
||||
|
||||
&.open {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-compose {
|
||||
position: relative;
|
||||
.email-compose-body {
|
||||
padding: 30px 20px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.side-active {
|
||||
.email-side-nav {
|
||||
@include to($breakpoint-md) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.email-wrapper {
|
||||
@include to($breakpoint-md) {
|
||||
left: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import 'chat';
|
||||
@import 'email';
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// + @Greyscale Colors
|
||||
// + @Bootstrap Color System
|
||||
// + @Default Colors
|
||||
// + @Inverted Colors
|
||||
// + @Others
|
||||
// + @Header Themes
|
||||
// + @Social Networks Colors
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Greyscale Colors
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// Colors below are ordered from lightest to darkest
|
||||
|
||||
$grey-100 : #f9fafb;
|
||||
$grey-200 : #f2f3f5;
|
||||
$grey-300 : #e6eaf0;
|
||||
$grey-400 : #d3d9e3;
|
||||
$grey-500 : #b9c2d0;
|
||||
$grey-600 : #7c8695;
|
||||
$grey-700 : #72777a;
|
||||
$grey-800 : #565a5c;
|
||||
$grey-900 : #313435;
|
||||
|
||||
$grey-colors-alt: (
|
||||
grey-100 : #f9fafb,
|
||||
grey-200 : #f2f3f5,
|
||||
grey-300 : #e6eaf0,
|
||||
grey-400 : #d3d9e3,
|
||||
grey-500 : #b9c2d0,
|
||||
grey-600 : #7c8695,
|
||||
grey-700 : #72777a,
|
||||
grey-800 : #565a5c,
|
||||
grey-900 : #313435,
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Bootstrap Color System
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$blue : $md-blue-500;
|
||||
$indigo : $md-indigo-500;
|
||||
$purple : $md-purple-500;
|
||||
$pink : $md-pink-500;
|
||||
$red : $md-red-500;
|
||||
$orange : $md-orange-500;
|
||||
$yellow : $md-yellow-500;
|
||||
$green : $md-green-500;
|
||||
$teal : $md-teal-500;
|
||||
$cyan : $md-cyan-500;
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Default Colors
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$default-danger : #ff3c7e;
|
||||
$default-dark : #313435;
|
||||
$default-grey : #565a5c;
|
||||
$default-info : #0f9aee;
|
||||
$default-primary : #7774e7;
|
||||
$default-success : #37c936;
|
||||
$default-text-color : #72777a;
|
||||
$default-warning : #fc0;
|
||||
$default-white : #fff;
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Inverted Colors
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$inverse-danger : lighten($default-danger, 35%);
|
||||
$inverse-info : lighten($default-info, 45%);
|
||||
$inverse-primary : lighten($default-primary, 30%);
|
||||
$inverse-success : lighten($default-success, 45%);
|
||||
$inverse-warning : lighten($default-warning, 45%);
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Others
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$border-color : #e6ecf5;
|
||||
$collapsed-size : 70px;
|
||||
$header-height : 65px;
|
||||
$offscreen-size : 280px;
|
||||
$side-nav-dark : #313644;
|
||||
$side-nav-dark-border : rgba(120, 130, 140, 0.3);
|
||||
$side-nav-dark-font : #99abb4;
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Header Themes
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$theme-danger : #f53f61;
|
||||
$theme-dark : lighten($side-nav-dark, 10%);
|
||||
$theme-info : $default-info;
|
||||
$theme-primary : $default-primary;
|
||||
$theme-success : desaturate($default-success, 5%);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// ---------------------------------------------------------
|
||||
// @Borders
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$border-width: 1px;
|
||||
$border-color: rgba(0, 0, 0, 0.0625);
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,26 @@
|
|||
// ---------------------------------------------------------
|
||||
// @Breakpoints
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$breakpoint-xl : 1440px;
|
||||
$breakpoint-lg : 1200px;
|
||||
$breakpoint-md : 992px;
|
||||
$breakpoint-sm : 768px;
|
||||
$breakpoint-xs : 0;
|
||||
|
||||
$breakpoints: (
|
||||
"xl\\+" "screen and (min-width: #{$breakpoint-xl})",
|
||||
"lg\\+" "screen and (min-width: #{$breakpoint-lg})",
|
||||
"md\\+" "screen and (min-width: #{$breakpoint-md})",
|
||||
"sm\\+" "screen and (min-width: #{$breakpoint-sm})",
|
||||
"xs\\+" "screen and (min-width: #{$breakpoint-xs})",
|
||||
|
||||
"xl-" "screen and (max-width: #{$breakpoint-xl - 1px})",
|
||||
"lg-" "screen and (max-width: #{$breakpoint-lg - 1px})",
|
||||
"md-" "screen and (max-width: #{$breakpoint-md - 1px})",
|
||||
"sm-" "screen and (max-width: #{$breakpoint-sm - 1px})",
|
||||
|
||||
"lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})",
|
||||
"md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})",
|
||||
"sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})",
|
||||
);
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
$font-primary:
|
||||
Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
$font-secondary: $font-primary;
|
||||
$font-size-base: 0.875rem;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import 'breakpoints';
|
||||
@import 'fonts';
|
||||
@import 'brandColors';
|
||||
@import 'materialColors';
|
||||
@import 'baseColors';
|
||||
@import 'borders';
|
||||
|
|
@ -0,0 +1,550 @@
|
|||
$md-red-50 : #ffebee;
|
||||
$md-red-100 : #ffcdd2;
|
||||
$md-red-200 : #ef9a9a;
|
||||
$md-red-300 : #e57373;
|
||||
$md-red-400 : #ef5350;
|
||||
$md-red-500 : #f44336;
|
||||
$md-red-600 : #e53935;
|
||||
$md-red-700 : #d32f2f;
|
||||
$md-red-800 : #c62828;
|
||||
$md-red-900 : #b71c1c;
|
||||
$md-red-a100 : #ff8a80;
|
||||
$md-red-a200 : #ff5252;
|
||||
$md-red-a400 : #ff1744;
|
||||
$md-red-a700 : #d50000;
|
||||
|
||||
$md-pink-50 : #fce4ec;
|
||||
$md-pink-100 : #f8bbd0;
|
||||
$md-pink-200 : #f48fb1;
|
||||
$md-pink-300 : #f06292;
|
||||
$md-pink-400 : #ec407a;
|
||||
$md-pink-500 : #e91e63;
|
||||
$md-pink-600 : #d81b60;
|
||||
$md-pink-700 : #c2185b;
|
||||
$md-pink-800 : #ad1457;
|
||||
$md-pink-900 : #880e4f;
|
||||
$md-pink-a100 : #ff80ab;
|
||||
$md-pink-a200 : #ff4081;
|
||||
$md-pink-a400 : #f50057;
|
||||
$md-pink-a700 : #c51162;
|
||||
|
||||
$md-purple-50 : #f3e5f5;
|
||||
$md-purple-100 : #e1bee7;
|
||||
$md-purple-200 : #ce93d8;
|
||||
$md-purple-300 : #ba68c8;
|
||||
$md-purple-400 : #ab47bc;
|
||||
$md-purple-500 : #9c27b0;
|
||||
$md-purple-600 : #8e24aa;
|
||||
$md-purple-700 : #7b1fa2;
|
||||
$md-purple-800 : #6a1b9a;
|
||||
$md-purple-900 : #4a148c;
|
||||
$md-purple-a100 : #ea80fc;
|
||||
$md-purple-a200 : #e040fb;
|
||||
$md-purple-a400 : #d500f9;
|
||||
$md-purple-a700 : #aa00ff;
|
||||
|
||||
$md-deep-purple-50 : #ede7f6;
|
||||
$md-deep-purple-100 : #d1c4e9;
|
||||
$md-deep-purple-200 : #b39ddb;
|
||||
$md-deep-purple-300 : #9575cd;
|
||||
$md-deep-purple-400 : #7e57c2;
|
||||
$md-deep-purple-500 : #673ab7;
|
||||
$md-deep-purple-600 : #5e35b1;
|
||||
$md-deep-purple-700 : #512da8;
|
||||
$md-deep-purple-800 : #4527a0;
|
||||
$md-deep-purple-900 : #311b92;
|
||||
$md-deep-purple-a100 : #b388ff;
|
||||
$md-deep-purple-a200 : #7c4dff;
|
||||
$md-deep-purple-a400 : #651fff;
|
||||
$md-deep-purple-a700 : #6200ea;
|
||||
|
||||
$md-indigo-50 : #e8eaf6;
|
||||
$md-indigo-100 : #c5cae9;
|
||||
$md-indigo-200 : #9fa8da;
|
||||
$md-indigo-300 : #7986cb;
|
||||
$md-indigo-400 : #5c6bc0;
|
||||
$md-indigo-500 : #3f51b5;
|
||||
$md-indigo-600 : #3949ab;
|
||||
$md-indigo-700 : #303f9f;
|
||||
$md-indigo-800 : #283593;
|
||||
$md-indigo-900 : #1a237e;
|
||||
$md-indigo-a100 : #8c9eff;
|
||||
$md-indigo-a200 : #536dfe;
|
||||
$md-indigo-a400 : #3d5afe;
|
||||
$md-indigo-a700 : #304ffe;
|
||||
|
||||
$md-blue-50 : #e3f2fd;
|
||||
$md-blue-100 : #bbdefb;
|
||||
$md-blue-200 : #90caf9;
|
||||
$md-blue-300 : #64b5f6;
|
||||
$md-blue-400 : #42a5f5;
|
||||
$md-blue-500 : #2196f3;
|
||||
$md-blue-600 : #1e88e5;
|
||||
$md-blue-700 : #1976d2;
|
||||
$md-blue-800 : #1565c0;
|
||||
$md-blue-900 : #0d47a1;
|
||||
$md-blue-a100 : #82b1ff;
|
||||
$md-blue-a200 : #448aff;
|
||||
$md-blue-a400 : #2979ff;
|
||||
$md-blue-a700 : #2962ff;
|
||||
|
||||
$md-light-blue-50 : #e1f5fe;
|
||||
$md-light-blue-100 : #b3e5fc;
|
||||
$md-light-blue-200 : #81d4fa;
|
||||
$md-light-blue-300 : #4fc3f7;
|
||||
$md-light-blue-400 : #29b6f6;
|
||||
$md-light-blue-500 : #03a9f4;
|
||||
$md-light-blue-600 : #039be5;
|
||||
$md-light-blue-700 : #0288d1;
|
||||
$md-light-blue-800 : #0277bd;
|
||||
$md-light-blue-900 : #01579b;
|
||||
$md-light-blue-a100 : #80d8ff;
|
||||
$md-light-blue-a200 : #40c4ff;
|
||||
$md-light-blue-a400 : #00b0ff;
|
||||
$md-light-blue-a700 : #0091ea;
|
||||
|
||||
$md-cyan-50 : #e0f7fa;
|
||||
$md-cyan-100 : #b2ebf2;
|
||||
$md-cyan-200 : #80deea;
|
||||
$md-cyan-300 : #4dd0e1;
|
||||
$md-cyan-400 : #26c6da;
|
||||
$md-cyan-500 : #00bcd4;
|
||||
$md-cyan-600 : #00acc1;
|
||||
$md-cyan-700 : #0097a7;
|
||||
$md-cyan-800 : #00838f;
|
||||
$md-cyan-900 : #006064;
|
||||
$md-cyan-a100 : #84ffff;
|
||||
$md-cyan-a200 : #18ffff;
|
||||
$md-cyan-a400 : #00e5ff;
|
||||
$md-cyan-a700 : #00b8d4;
|
||||
|
||||
$md-teal-50 : #e0f2f1;
|
||||
$md-teal-100 : #b2dfdb;
|
||||
$md-teal-200 : #80cbc4;
|
||||
$md-teal-300 : #4db6ac;
|
||||
$md-teal-400 : #26a69a;
|
||||
$md-teal-500 : #009688;
|
||||
$md-teal-600 : #00897b;
|
||||
$md-teal-700 : #00796b;
|
||||
$md-teal-800 : #00695c;
|
||||
$md-teal-900 : #004d40;
|
||||
$md-teal-a100 : #a7ffeb;
|
||||
$md-teal-a200 : #64ffda;
|
||||
$md-teal-a400 : #1de9b6;
|
||||
$md-teal-a700 : #00bfa5;
|
||||
|
||||
$md-green-50 : #e8f5e9;
|
||||
$md-green-100 : #c8e6c9;
|
||||
$md-green-200 : #a5d6a7;
|
||||
$md-green-300 : #81c784;
|
||||
$md-green-400 : #66bb6a;
|
||||
$md-green-500 : #4caf50;
|
||||
$md-green-600 : #43a047;
|
||||
$md-green-700 : #388e3c;
|
||||
$md-green-800 : #2e7d32;
|
||||
$md-green-900 : #1b5e20;
|
||||
$md-green-a100 : #b9f6ca;
|
||||
$md-green-a200 : #69f0ae;
|
||||
$md-green-a400 : #00e676;
|
||||
$md-green-a700 : #00c853;
|
||||
|
||||
$md-light-green-50 : #f1f8e9;
|
||||
$md-light-green-100 : #dcedc8;
|
||||
$md-light-green-200 : #c5e1a5;
|
||||
$md-light-green-300 : #aed581;
|
||||
$md-light-green-400 : #9ccc65;
|
||||
$md-light-green-500 : #8bc34a;
|
||||
$md-light-green-600 : #7cb342;
|
||||
$md-light-green-700 : #689f38;
|
||||
$md-light-green-800 : #558b2f;
|
||||
$md-light-green-900 : #33691e;
|
||||
$md-light-green-a100 : #ccff90;
|
||||
$md-light-green-a200 : #b2ff59;
|
||||
$md-light-green-a400 : #76ff03;
|
||||
$md-light-green-a700 : #64dd17;
|
||||
|
||||
$md-lime-50 : #f9fbe7;
|
||||
$md-lime-100 : #f0f4c3;
|
||||
$md-lime-200 : #e6ee9c;
|
||||
$md-lime-300 : #dce775;
|
||||
$md-lime-400 : #d4e157;
|
||||
$md-lime-500 : #cddc39;
|
||||
$md-lime-600 : #c0ca33;
|
||||
$md-lime-700 : #afb42b;
|
||||
$md-lime-800 : #9e9d24;
|
||||
$md-lime-900 : #827717;
|
||||
$md-lime-a100 : #f4ff81;
|
||||
$md-lime-a200 : #eeff41;
|
||||
$md-lime-a400 : #c6ff00;
|
||||
$md-lime-a700 : #aeea00;
|
||||
|
||||
$md-yellow-50 : #fffde7;
|
||||
$md-yellow-100 : #fff9c4;
|
||||
$md-yellow-200 : #fff59d;
|
||||
$md-yellow-300 : #fff176;
|
||||
$md-yellow-400 : #ffee58;
|
||||
$md-yellow-500 : #ffeb3b;
|
||||
$md-yellow-600 : #fdd835;
|
||||
$md-yellow-700 : #fbc02d;
|
||||
$md-yellow-800 : #f9a825;
|
||||
$md-yellow-900 : #f57f17;
|
||||
$md-yellow-a100 : #ffff8d;
|
||||
$md-yellow-a200 : #ffff00;
|
||||
$md-yellow-a400 : #ffea00;
|
||||
$md-yellow-a700 : #ffd600;
|
||||
|
||||
$md-amber-50 : #fff8e1;
|
||||
$md-amber-100 : #ffecb3;
|
||||
$md-amber-200 : #ffe082;
|
||||
$md-amber-300 : #ffd54f;
|
||||
$md-amber-400 : #ffca28;
|
||||
$md-amber-500 : #ffc107;
|
||||
$md-amber-600 : #ffb300;
|
||||
$md-amber-700 : #ffa000;
|
||||
$md-amber-800 : #ff8f00;
|
||||
$md-amber-900 : #ff6f00;
|
||||
$md-amber-a100 : #ffe57f;
|
||||
$md-amber-a200 : #ffd740;
|
||||
$md-amber-a400 : #ffc400;
|
||||
$md-amber-a700 : #ffab00;
|
||||
|
||||
$md-orange-50 : #fff3e0;
|
||||
$md-orange-100 : #ffe0b2;
|
||||
$md-orange-200 : #ffcc80;
|
||||
$md-orange-300 : #ffb74d;
|
||||
$md-orange-400 : #ffa726;
|
||||
$md-orange-500 : #ff9800;
|
||||
$md-orange-600 : #fb8c00;
|
||||
$md-orange-700 : #f57c00;
|
||||
$md-orange-800 : #ef6c00;
|
||||
$md-orange-900 : #e65100;
|
||||
$md-orange-a100 : #ffd180;
|
||||
$md-orange-a200 : #ffab40;
|
||||
$md-orange-a400 : #ff9100;
|
||||
$md-orange-a700 : #ff6d00;
|
||||
|
||||
$md-deep-orange-50 : #fbe9e7;
|
||||
$md-deep-orange-100 : #ffccbc;
|
||||
$md-deep-orange-200 : #ffab91;
|
||||
$md-deep-orange-300 : #ff8a65;
|
||||
$md-deep-orange-400 : #ff7043;
|
||||
$md-deep-orange-500 : #ff5722;
|
||||
$md-deep-orange-600 : #f4511e;
|
||||
$md-deep-orange-700 : #e64a19;
|
||||
$md-deep-orange-800 : #d84315;
|
||||
$md-deep-orange-900 : #bf360c;
|
||||
$md-deep-orange-a100 : #ff9e80;
|
||||
$md-deep-orange-a200 : #ff6e40;
|
||||
$md-deep-orange-a400 : #ff3d00;
|
||||
$md-deep-orange-a700 : #dd2c00;
|
||||
|
||||
$md-brown-50 : #efebe9;
|
||||
$md-brown-100 : #d7ccc8;
|
||||
$md-brown-200 : #bcaaa4;
|
||||
$md-brown-300 : #a1887f;
|
||||
$md-brown-400 : #8d6e63;
|
||||
$md-brown-500 : #795548;
|
||||
$md-brown-600 : #6d4c41;
|
||||
$md-brown-700 : #5d4037;
|
||||
$md-brown-800 : #4e342e;
|
||||
$md-brown-900 : #3e2723;
|
||||
|
||||
$md-grey-50 : #fafafa;
|
||||
$md-grey-100 : #f5f5f5;
|
||||
$md-grey-200 : #eeeeee;
|
||||
$md-grey-300 : #e0e0e0;
|
||||
$md-grey-400 : #bdbdbd;
|
||||
$md-grey-500 : #9e9e9e;
|
||||
$md-grey-600 : #757575;
|
||||
$md-grey-700 : #616161;
|
||||
$md-grey-800 : #424242;
|
||||
$md-grey-900 : #212121;
|
||||
|
||||
$md-blue-grey-50 : #eceff1;
|
||||
$md-blue-grey-100 : #cfd8dc;
|
||||
$md-blue-grey-200 : #b0bec5;
|
||||
$md-blue-grey-300 : #90a4ae;
|
||||
$md-blue-grey-400 : #78909c;
|
||||
$md-blue-grey-500 : #607d8b;
|
||||
$md-blue-grey-600 : #546e7a;
|
||||
$md-blue-grey-700 : #455a64;
|
||||
$md-blue-grey-800 : #37474f;
|
||||
$md-blue-grey-900 : #263238;
|
||||
|
||||
$md-dark-text-primary : rgba(0, 0, 0, 0.87);
|
||||
$md-dark-text-secondary : rgba(0, 0, 0, 0.54);
|
||||
$md-dark-text-disabled : rgba(0, 0, 0, 0.38);
|
||||
$md-dark-text-dividers : rgba(0, 0, 0, 0.12);
|
||||
|
||||
$md-light-text-primary : rgba(255, 255, 255, 1);
|
||||
$md-light-text-secondary : rgba(255, 255, 255, 0.7);
|
||||
$md-light-text-disabled : rgba(255, 255, 255, 0.5);
|
||||
$md-light-text-dividers : rgba(255, 255, 255, 0.12);
|
||||
|
||||
$md-dark-icons-active : rgba(0, 0, 0, 0.54);
|
||||
$md-dark-icons-inactive : rgba(0, 0, 0, 0.38);
|
||||
|
||||
$md-light-icons-active : rgba(255, 255, 255, 1);
|
||||
$md-light-icons-inactive : rgba(255, 255, 255, 0.5);
|
||||
|
||||
$md-white : #ffffff;
|
||||
|
||||
$md-black : #000000;
|
||||
|
||||
$md-colors: (
|
||||
white : #ffffff,
|
||||
red-50 : #ffebee,
|
||||
red-100 : #ffcdd2,
|
||||
red-200 : #ef9a9a,
|
||||
red-300 : #e57373,
|
||||
red-400 : #ef5350,
|
||||
red-500 : #f44336,
|
||||
red-600 : #e53935,
|
||||
red-700 : #d32f2f,
|
||||
red-800 : #c62828,
|
||||
red-900 : #b71c1c,
|
||||
red-a100 : #ff8a80,
|
||||
red-a200 : #ff5252,
|
||||
red-a400 : #ff1744,
|
||||
red-a700 : #d50000,
|
||||
pink-50 : #fce4ec,
|
||||
pink-100 : #f8bbd0,
|
||||
pink-200 : #f48fb1,
|
||||
pink-300 : #f06292,
|
||||
pink-400 : #ec407a,
|
||||
pink-500 : #e91e63,
|
||||
pink-600 : #d81b60,
|
||||
pink-700 : #c2185b,
|
||||
pink-800 : #ad1457,
|
||||
pink-900 : #880e4f,
|
||||
pink-a100 : #ff80ab,
|
||||
pink-a200 : #ff4081,
|
||||
pink-a400 : #f50057,
|
||||
pink-a700 : #c51162,
|
||||
purple-50 : #f3e5f5,
|
||||
purple-100 : #e1bee7,
|
||||
purple-200 : #ce93d8,
|
||||
purple-300 : #ba68c8,
|
||||
purple-400 : #ab47bc,
|
||||
purple-500 : #9c27b0,
|
||||
purple-600 : #8e24aa,
|
||||
purple-700 : #7b1fa2,
|
||||
purple-800 : #6a1b9a,
|
||||
purple-900 : #4a148c,
|
||||
purple-a100 : #ea80fc,
|
||||
purple-a200 : #e040fb,
|
||||
purple-a400 : #d500f9,
|
||||
purple-a700 : #aa00ff,
|
||||
deep-purple-50 : #ede7f6,
|
||||
deep-purple-100 : #d1c4e9,
|
||||
deep-purple-200 : #b39ddb,
|
||||
deep-purple-300 : #9575cd,
|
||||
deep-purple-400 : #7e57c2,
|
||||
deep-purple-500 : #673ab7,
|
||||
deep-purple-600 : #5e35b1,
|
||||
deep-purple-700 : #512da8,
|
||||
deep-purple-800 : #4527a0,
|
||||
deep-purple-900 : #311b92,
|
||||
deep-purple-a100 : #b388ff,
|
||||
deep-purple-a200 : #7c4dff,
|
||||
deep-purple-a400 : #651fff,
|
||||
deep-purple-a700 : #6200ea,
|
||||
indigo-50 : #e8eaf6,
|
||||
indigo-100 : #c5cae9,
|
||||
indigo-200 : #9fa8da,
|
||||
indigo-300 : #7986cb,
|
||||
indigo-400 : #5c6bc0,
|
||||
indigo-500 : #3f51b5,
|
||||
indigo-600 : #3949ab,
|
||||
indigo-700 : #303f9f,
|
||||
indigo-800 : #283593,
|
||||
indigo-900 : #1a237e,
|
||||
indigo-a100 : #8c9eff,
|
||||
indigo-a200 : #536dfe,
|
||||
indigo-a400 : #3d5afe,
|
||||
indigo-a700 : #304ffe,
|
||||
blue-50 : #e3f2fd,
|
||||
blue-100 : #bbdefb,
|
||||
blue-200 : #90caf9,
|
||||
blue-300 : #64b5f6,
|
||||
blue-400 : #42a5f5,
|
||||
blue-500 : #2196f3,
|
||||
blue-600 : #1e88e5,
|
||||
blue-700 : #1976d2,
|
||||
blue-800 : #1565c0,
|
||||
blue-900 : #0d47a1,
|
||||
blue-a100 : #82b1ff,
|
||||
blue-a200 : #448aff,
|
||||
blue-a400 : #2979ff,
|
||||
blue-a700 : #2962ff,
|
||||
light-blue-50 : #e1f5fe,
|
||||
light-blue-100 : #b3e5fc,
|
||||
light-blue-200 : #81d4fa,
|
||||
light-blue-300 : #4fc3f7,
|
||||
light-blue-400 : #29b6f6,
|
||||
light-blue-500 : #03a9f4,
|
||||
light-blue-600 : #039be5,
|
||||
light-blue-700 : #0288d1,
|
||||
light-blue-800 : #0277bd,
|
||||
light-blue-900 : #01579b,
|
||||
light-blue-a100 : #80d8ff,
|
||||
light-blue-a200 : #40c4ff,
|
||||
light-blue-a400 : #00b0ff,
|
||||
light-blue-a700 : #0091ea,
|
||||
cyan-50 : #e0f7fa,
|
||||
cyan-100 : #b2ebf2,
|
||||
cyan-200 : #80deea,
|
||||
cyan-300 : #4dd0e1,
|
||||
cyan-400 : #26c6da,
|
||||
cyan-500 : #00bcd4,
|
||||
cyan-600 : #00acc1,
|
||||
cyan-700 : #0097a7,
|
||||
cyan-800 : #00838f,
|
||||
cyan-900 : #006064,
|
||||
cyan-a100 : #84ffff,
|
||||
cyan-a200 : #18ffff,
|
||||
cyan-a400 : #00e5ff,
|
||||
cyan-a700 : #00b8d4,
|
||||
teal-50 : #e0f2f1,
|
||||
teal-100 : #b2dfdb,
|
||||
teal-200 : #80cbc4,
|
||||
teal-300 : #4db6ac,
|
||||
teal-400 : #26a69a,
|
||||
teal-500 : #009688,
|
||||
teal-600 : #00897b,
|
||||
teal-700 : #00796b,
|
||||
teal-800 : #00695c,
|
||||
teal-900 : #004d40,
|
||||
teal-a100 : #a7ffeb,
|
||||
teal-a200 : #64ffda,
|
||||
teal-a400 : #1de9b6,
|
||||
teal-a700 : #00bfa5,
|
||||
green-50 : #e8f5e9,
|
||||
green-100 : #c8e6c9,
|
||||
green-200 : #a5d6a7,
|
||||
green-300 : #81c784,
|
||||
green-400 : #66bb6a,
|
||||
green-500 : #4caf50,
|
||||
green-600 : #43a047,
|
||||
green-700 : #388e3c,
|
||||
green-800 : #2e7d32,
|
||||
green-900 : #1b5e20,
|
||||
green-a100 : #b9f6ca,
|
||||
green-a200 : #69f0ae,
|
||||
green-a400 : #00e676,
|
||||
green-a700 : #00c853,
|
||||
light-green-50 : #f1f8e9,
|
||||
light-green-100 : #dcedc8,
|
||||
light-green-200 : #c5e1a5,
|
||||
light-green-300 : #aed581,
|
||||
light-green-400 : #9ccc65,
|
||||
light-green-500 : #8bc34a,
|
||||
light-green-600 : #7cb342,
|
||||
light-green-700 : #689f38,
|
||||
light-green-800 : #558b2f,
|
||||
light-green-900 : #33691e,
|
||||
light-green-a100 : #ccff90,
|
||||
light-green-a200 : #b2ff59,
|
||||
light-green-a400 : #76ff03,
|
||||
light-green-a700 : #64dd17,
|
||||
lime-50 : #f9fbe7,
|
||||
lime-100 : #f0f4c3,
|
||||
lime-200 : #e6ee9c,
|
||||
lime-300 : #dce775,
|
||||
lime-400 : #d4e157,
|
||||
lime-500 : #cddc39,
|
||||
lime-600 : #c0ca33,
|
||||
lime-700 : #afb42b,
|
||||
lime-800 : #9e9d24,
|
||||
lime-900 : #827717,
|
||||
lime-a100 : #f4ff81,
|
||||
lime-a200 : #eeff41,
|
||||
lime-a400 : #c6ff00,
|
||||
lime-a700 : #aeea00,
|
||||
yellow-50 : #fffde7,
|
||||
yellow-100 : #fff9c4,
|
||||
yellow-200 : #fff59d,
|
||||
yellow-300 : #fff176,
|
||||
yellow-400 : #ffee58,
|
||||
yellow-500 : #ffeb3b,
|
||||
yellow-600 : #fdd835,
|
||||
yellow-700 : #fbc02d,
|
||||
yellow-800 : #f9a825,
|
||||
yellow-900 : #f57f17,
|
||||
yellow-a100 : #ffff8d,
|
||||
yellow-a200 : #ffff00,
|
||||
yellow-a400 : #ffea00,
|
||||
yellow-a700 : #ffd600,
|
||||
amber-50 : #fff8e1,
|
||||
amber-100 : #ffecb3,
|
||||
amber-200 : #ffe082,
|
||||
amber-300 : #ffd54f,
|
||||
amber-400 : #ffca28,
|
||||
amber-500 : #ffc107,
|
||||
amber-600 : #ffb300,
|
||||
amber-700 : #ffa000,
|
||||
amber-800 : #ff8f00,
|
||||
amber-900 : #ff6f00,
|
||||
amber-a100 : #ffe57f,
|
||||
amber-a200 : #ffd740,
|
||||
amber-a400 : #ffc400,
|
||||
amber-a700 : #ffab00,
|
||||
orange-50 : #fff3e0,
|
||||
orange-100 : #ffe0b2,
|
||||
orange-200 : #ffcc80,
|
||||
orange-300 : #ffb74d,
|
||||
orange-400 : #ffa726,
|
||||
orange-500 : #ff9800,
|
||||
orange-600 : #fb8c00,
|
||||
orange-700 : #f57c00,
|
||||
orange-800 : #ef6c00,
|
||||
orange-900 : #e65100,
|
||||
orange-a100 : #ffd180,
|
||||
orange-a200 : #ffab40,
|
||||
orange-a400 : #ff9100,
|
||||
orange-a700 : #ff6d00,
|
||||
deep-orange-50 : #fbe9e7,
|
||||
deep-orange-100 : #ffccbc,
|
||||
deep-orange-200 : #ffab91,
|
||||
deep-orange-300 : #ff8a65,
|
||||
deep-orange-400 : #ff7043,
|
||||
deep-orange-500 : #ff5722,
|
||||
deep-orange-600 : #f4511e,
|
||||
deep-orange-700 : #e64a19,
|
||||
deep-orange-800 : #d84315,
|
||||
deep-orange-900 : #bf360c,
|
||||
deep-orange-a100 : #ff9e80,
|
||||
deep-orange-a200 : #ff6e40,
|
||||
deep-orange-a400 : #ff3d00,
|
||||
deep-orange-a700 : #dd2c00,
|
||||
brown-50 : #efebe9,
|
||||
brown-100 : #d7ccc8,
|
||||
brown-200 : #bcaaa4,
|
||||
brown-300 : #a1887f,
|
||||
brown-400 : #8d6e63,
|
||||
brown-500 : #795548,
|
||||
brown-600 : #6d4c41,
|
||||
brown-700 : #5d4037,
|
||||
brown-800 : #4e342e,
|
||||
brown-900 : #3e2723,
|
||||
grey-50 : #fafafa,
|
||||
grey-100 : #f5f5f5,
|
||||
grey-200 : #eeeeee,
|
||||
grey-300 : #e0e0e0,
|
||||
grey-400 : #bdbdbd,
|
||||
grey-500 : #9e9e9e,
|
||||
grey-600 : #757575,
|
||||
grey-700 : #616161,
|
||||
grey-800 : #424242,
|
||||
grey-900 : #212121,
|
||||
blue-grey-50 : #eceff1,
|
||||
blue-grey-100 : #cfd8dc,
|
||||
blue-grey-200 : #b0bec5,
|
||||
blue-grey-300 : #90a4ae,
|
||||
blue-grey-400 : #78909c,
|
||||
blue-grey-500 : #607d8b,
|
||||
blue-grey-600 : #546e7a,
|
||||
blue-grey-700 : #455a64,
|
||||
blue-grey-800 : #37474f,
|
||||
blue-grey-900 : #263238,
|
||||
) !global;
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'mixins/index';
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
//----------------------------------------------------------
|
||||
// @Clearfix
|
||||
//----------------------------------------------------------
|
||||
|
||||
@mixin clearfix {
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import 'placeholder';
|
||||
@import 'clearfix';
|
||||
@import 'mediaQueriesRanges';
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// + @General Media Query
|
||||
// + @All Above Media Query
|
||||
// + @All Under Media Query
|
||||
// + @Between Two Devices Media Query
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @General Media Query Mixin
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// Mixin used for custom rules that don't follow
|
||||
// any of the following premade media queries.
|
||||
|
||||
@mixin mq($condition) {
|
||||
@media #{$condition} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @All Above Media Query Mixin
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// Mixin used to match certain breakpoint
|
||||
// and all devices above it.
|
||||
|
||||
@mixin from($breakpoint) {
|
||||
@media screen and (min-width: $breakpoint){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @All Under Media Query Mixin
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// Mixin used to match all devices under certain breakpoint.
|
||||
|
||||
@mixin to($breakpoint) {
|
||||
@media screen and (max-width: $breakpoint - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Between Two Devices Media Query Mixin
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// Mixin used to match the devices between 2 breakpoints.
|
||||
|
||||
@mixin between($start, $end){
|
||||
@media screen and (min-width: $start) and (max-width: $end - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
//----------------------------------------------------------
|
||||
// @Placeholder
|
||||
//----------------------------------------------------------
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder { @content; }
|
||||
&:-moz-placeholder { @content; }
|
||||
&::-moz-placeholder { @content; }
|
||||
&:-ms-input-placeholder { @content; }
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// + @Material Color
|
||||
// + @Grey Colors
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Material Color
|
||||
// ---------------------------------------------------------
|
||||
|
||||
@each $item, $color in $md-colors {
|
||||
.c-#{$item}, .cH-#{$item}:hover { color: $color !important; }
|
||||
.bgc-#{$item}, .bgcH-#{$item}:hover { background-color: $color !important; }
|
||||
.bdc-#{$item}, .bdcH-#{$item}:hover { border-color: $color !important; }
|
||||
.fill-#{$item}, .fillH-#{$item}:hover { fill: $color !important; }
|
||||
.str-#{$item}, .strH-#{$item}:hover { stroke: $color !important; }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Grey Colors
|
||||
// ---------------------------------------------------------
|
||||
|
||||
@each $item, $color in $grey-colors-alt {
|
||||
.c-#{$item}, .cH-#{$item}:hover { color: $color !important; }
|
||||
.bgc-#{$item}, .bgcH-#{$item}:hover { background-color: $color !important; }
|
||||
.bdc-#{$item}, .bdcH-#{$item}:hover { border-color: $color !important; }
|
||||
.fill-#{$item}, .fillH-#{$item}:hover { fill: $color !important; }
|
||||
.str-#{$item}, .strH-#{$item}:hover { stroke: $color !important; }
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import 'layout/index';
|
||||
@import 'colors';
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// + @Quick Border Helpers
|
||||
// + @Border Width
|
||||
// + @Border Radius
|
||||
// + @Border Style
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Quick Border Helpers
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.bd { border: #{$border-width} solid #{$border-color} !important; }
|
||||
.bdT { border-top: #{$border-width} solid #{$border-color} !important; }
|
||||
.bdR { border-right: #{$border-width} solid #{$border-color} !important; }
|
||||
.bdB { border-bottom: #{$border-width} solid #{$border-color} !important; }
|
||||
.bdL { border-left: #{$border-width} solid #{$border-color} !important; }
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Border Width
|
||||
// ---------------------------------------------------------
|
||||
|
||||
@for $i from 0 through 5 {
|
||||
.bdw-#{$i} { border-width: #{$i}px !important; }
|
||||
.bdwT-#{$i} { border-top-width: #{$i}px !important; }
|
||||
.bdwR-#{$i} { border-right-width: #{$i}px !important; }
|
||||
.bdwB-#{$i} { border-bottom-width: #{$i}px !important; }
|
||||
.bdwL-#{$i} { border-left-width: #{$i}px !important; }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Border Radius
|
||||
// ---------------------------------------------------------
|
||||
|
||||
@for $i from 0 to 5 {
|
||||
.bdrs-#{$i} { border-radius: #{$i}px !important; }
|
||||
|
||||
.bdrsT-#{$i} {
|
||||
border-top-left-radius: #{$i}px !important;
|
||||
border-top-right-radius: #{$i}px !important;
|
||||
}
|
||||
|
||||
.bdrsR-#{$i} {
|
||||
border-top-right-radius: #{$i}px !important;
|
||||
border-bottom-right-radius: #{$i}px !important;
|
||||
}
|
||||
|
||||
.bdrsB-#{$i} {
|
||||
border-bottom-left-radius: #{$i}px !important;
|
||||
border-bottom-right-radius: #{$i}px !important;
|
||||
}
|
||||
|
||||
.bdrsL-#{$i} {
|
||||
border-top-left-radius: #{$i}px !important;
|
||||
border-bottom-left-radius: #{$i}px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bdrs-50p { border-radius: 50% !important; }
|
||||
.bdrs-10em { border-radius: 10em !important; }
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Border Style
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.bds-n { border-style: none !important; }
|
||||
.bds-s { border-style: solid !important; }
|
||||
.bds-dt { border-style: dotted !important; }
|
||||
.bds-ds { border-style: dashed !important; }
|
||||
.bds-db { border-style: double !important; }
|
||||
.bds-g { border-style: groove !important; }
|
||||
.bds-r { border-style: ridge !important; }
|
||||
.bds-i { border-style: inset !important; }
|
||||
.bds-o { border-style: outset !important; }
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
// ---------------------------------------------------------
|
||||
// @TOC
|
||||
// ---------------------------------------------------------
|
||||
|
||||
// + @Variables
|
||||
// + @Flex Wrap
|
||||
// + @Flex Direction
|
||||
// + @Flex
|
||||
// + @Flex Basis
|
||||
// + @Flex Grow
|
||||
// + @Flex Shrink
|
||||
// + @Flex Order
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Variables
|
||||
// ---------------------------------------------------------
|
||||
|
||||
$responsive: true;
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Display
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.d-f { display: flex; }
|
||||
.d-if { display: inline-flex; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.d-f\@#{$breakpointAlias} { display: flex; }
|
||||
.d-if\@#{$breakpointAlias} { display: inline-flex; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Flex Wrap
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.fxw-w { flex-wrap: wrap; }
|
||||
.fxw-wr { flex-wrap: wrap-reverse; }
|
||||
.fxw-nw { flex-wrap: nowrap; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.fxw-w\@#{$breakpointAlias} { flex-wrap: wrap; }
|
||||
.fxw-wr\@#{$breakpointAlias} { flex-wrap: wrap-reverse; }
|
||||
.fxw-nw\@#{$breakpointAlias} { flex-wrap: nowrap; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Flex Direction
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.fxd-c { flex-direction: column; }
|
||||
.fxd-cr { flex-direction: column-reverse; }
|
||||
.fxd-r { flex-direction: row; }
|
||||
.fxd-rr { flex-direction: row-reverse; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.fxd-c\@#{$breakpointAlias} { flex-direction: column; }
|
||||
.fxd-cr\@#{$breakpointAlias} { flex-direction: column-reverse; }
|
||||
.fxd-r\@#{$breakpointAlias} { flex-direction: row; }
|
||||
.fxd-rr\@#{$breakpointAlias} { flex-direction: row-reverse; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Align Items
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.ai-fs { align-items: flex-start; }
|
||||
.ai-fe { align-items: flex-end; }
|
||||
.ai-c { align-items: center; }
|
||||
.ai-b { align-items: baseline; }
|
||||
.ai-s { align-items: stretch; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.ai-fs\@#{$breakpointAlias} { align-items: flex-start; }
|
||||
.ai-fe\@#{$breakpointAlias} { align-items: flex-end; }
|
||||
.ai-c\@#{$breakpointAlias} { align-items: center; }
|
||||
.ai-b\@#{$breakpointAlias} { align-items: baseline; }
|
||||
.ai-s\@#{$breakpointAlias} { align-items: stretch; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Align Self
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.as-fs { align-self: flex-start; }
|
||||
.as-fe { align-self: flex-end; }
|
||||
.as-c { align-self: center; }
|
||||
.as-b { align-self: baseline; }
|
||||
.as-s { align-self: stretch; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.as-fs\@#{$breakpointAlias} { align-self: flex-start; }
|
||||
.as-fe\@#{$breakpointAlias} { align-self: flex-end; }
|
||||
.as-c\@#{$breakpointAlias} { align-self: center; }
|
||||
.as-b\@#{$breakpointAlias} { align-self: baseline; }
|
||||
.as-s\@#{$breakpointAlias} { align-self: stretch; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Align Content
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.ac-fs { align-content: flex-start; }
|
||||
.ac-fe { align-content: flex-end; }
|
||||
.ac-c { align-content: center; }
|
||||
.ac-s { align-content: stretch; }
|
||||
.ac-sb { align-content: space-between; }
|
||||
.ac-sa { align-content: space-around; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.ac-fs\@#{$breakpointAlias} { align-content: flex-start; }
|
||||
.ac-fe\@#{$breakpointAlias} { align-content: flex-end; }
|
||||
.ac-c\@#{$breakpointAlias} { align-content: center; }
|
||||
.ac-s\@#{$breakpointAlias} { align-content: stretch; }
|
||||
.ac-sb\@#{$breakpointAlias} { align-content: space-between; }
|
||||
.ac-sa\@#{$breakpointAlias} { align-content: space-around; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Justify Content
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.jc-fs { justify-content: flex-start; }
|
||||
.jc-fe { justify-content: flex-end; }
|
||||
.jc-c { justify-content: center; }
|
||||
.jc-sb { justify-content: space-between; }
|
||||
.jc-sa { justify-content: space-around; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.jc-fs\@#{$breakpointAlias} { justify-content: flex-start; }
|
||||
.jc-fe\@#{$breakpointAlias} { justify-content: flex-end; }
|
||||
.jc-c\@#{$breakpointAlias} { justify-content: center; }
|
||||
.jc-sb\@#{$breakpointAlias} { justify-content: space-between; }
|
||||
.jc-sa\@#{$breakpointAlias} { justify-content: space-around; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Flex
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.fx-n { flex: none; }
|
||||
.fx-1 { flex: 1; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.fx-n\@#{$breakpointAlias} { flex: none; }
|
||||
.fx-1\@#{$breakpointAlias} { flex: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Flex Basis
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.fxb-a { flex-basis: auto; }
|
||||
.fxb-0 { flex-basis: 0; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.fxb-a\@#{$breakpointAlias} { flex-basis: auto; }
|
||||
.fxb-0\@#{$breakpointAlias} { flex-basis: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Flex Grow
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.fxg-1 { flex-grow: 1; }
|
||||
.fxg-0 { flex-grow: 0; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.fxg-1\@#{$breakpointAlias} { flex-grow: 1; }
|
||||
.fxg-0\@#{$breakpointAlias} { flex-grow: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Flex Shrink
|
||||
// ---------------------------------------------------------
|
||||
|
||||
.fxs-1 { flex-shrink: 1; }
|
||||
.fxs-0 { flex-shrink: 0; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.fxs-1\@#{$breakpointAlias} { flex-shrink: 1; }
|
||||
.fxs-0\@#{$breakpointAlias} { flex-shrink: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// @Flex Order
|
||||
// ---------------------------------------------------------
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
.ord-#{$i} { order: $i; }
|
||||
|
||||
@if ($responsive == true) {
|
||||
@include generateResponsive() {
|
||||
.ord-#{$i}\@#{$breakpointAlias} { order: $i; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import 'flex';
|
||||
@import 'layout';
|
||||
@import 'lists';
|
||||
@import 'margin';
|
||||
@import 'objects';
|
||||
@import 'padding';
|
||||
@import 'positions';
|
||||
@import 'sizes';
|
||||
@import 'typography';
|
||||
@import 'border';
|
||||
@import 'pseudo';
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue