Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/styles/bootstrap.scss vendored Executable file
View File

@@ -0,0 +1 @@
@import '~@owczar/dashboard-style--airframe/scss/bootstrap/bootstrap';

28
app/styles/components/float-grid.scss Executable file
View File

@@ -0,0 +1,28 @@
@import './../variables.scss';
@import '~bootstrap/scss/mixins/breakpoints';
.float-grid-parent {
margin: 0 auto;
padding-left: $grid-gutter-width / 2;
padding-right: $grid-gutter-width / 2;
&.float-grid-parent__static {
@media (min-width: breakpoint-min('sm', $grid-breakpoints)) {
width: map-get($container-max-widths, 'sm');
}
@media (min-width: breakpoint-min('md', $grid-breakpoints)) {
width: map-get($container-max-widths, 'md');
}
@media (min-width: breakpoint-min('lg', $grid-breakpoints)) {
width: map-get($container-max-widths, 'lg');
}
@media (min-width: breakpoint-min('xl', $grid-breakpoints)) {
width: map-get($container-max-widths, 'xl');
}
}
}
.float-col {
padding-left: $grid-gutter-width / 2;
padding-right: $grid-gutter-width / 2;
}

3
app/styles/components/theme-selector.scss Executable file
View File

@@ -0,0 +1,3 @@
.theme-config__body .custom-control .custom-control-label {
display: block;
}

81
app/styles/components/wizard.scss Executable file
View File

@@ -0,0 +1,81 @@
@import './../../styles/variables.scss';
@import '~bootstrap/scss/mixins/breakpoints';
.wizard {
display: flex;
align-items: center;
}
.wizard-step {
flex: 0 1 auto;
display: flex;
align-items: center;
text-decoration: none !important;
white-space: nowrap;
&--active {
.wizard-step__icon {
background: $primary;
}
.wizard-step__content {
color: $body-color;
}
}
&--disabled {
opacity: 0.4;
cursor: not-allowed;
}
&--complete {
.wizard-step__icon {
background: $success;
}
}
&__icon {
flex: 0 0 30px;
width: 30px;
height: 30px;
margin-right: 10px;
background: $gray-300;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
> * {
color: #fff;
}
}
&__content {
color: $text-muted;
}
+ .wizard-step {
margin-left: 20px;
}
}
@media (max-width: breakpoint-max('md', $grid-breakpoints)) {
.wizard {
flex-wrap: wrap;
}
.wizard-step {
flex: 0 1 50%;
padding: 0.5rem;
+ .wizard-step {
margin-left: 0;
}
}
}
@media (max-width: breakpoint-max('xs', $grid-breakpoints)) {
.wizard-step {
flex-basis: 100%;
}
}

1
app/styles/main.scss Executable file
View File

@@ -0,0 +1 @@
@import '~@owczar/dashboard-style--airframe/scss/style';

2
app/styles/plugins/_ag-grid.scss Executable file
View File

@@ -0,0 +1,2 @@
@import '~@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-grid';
@import '~@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-theme-bootstrap';

3
app/styles/plugins/_font-awesome.scss Executable file
View File

@@ -0,0 +1,3 @@
$fa-font-path: "~font-awesome/fonts/";
@import "~font-awesome/scss/font-awesome";

32
app/styles/plugins/_rc-slider.scss Executable file
View File

@@ -0,0 +1,32 @@
/* RC Sliders Overrides */
@import "./../variables.scss";
.rc-slider {
.rc-slider-track {
background-color: $primary;
}
.rc-slider-dot-active {
border-color: $primary !important;
}
.rc-slider-handle {
border-color: $primary;
&:active {
border-color: darken($primary, 10%);
box-shadow: 0 0 5px darken($primary, 10%);
}
&:hover {
border-color: darken($primary, 5%);
}
}
.rc-slider-rail {
background-color: $gray-400;
}
.rc-slider-dot {
background-color: $white;
border: 2px solid $gray-500;
}
}

71
app/styles/plugins/_react-big-calendar.scss Executable file
View File

@@ -0,0 +1,71 @@
/* React Big Calendar Overrides */
.rbc-month-view {
border: 1px solid $gray-300 !important;
}
.rbc-off-range-bg {
background: $gray-100 !important;
}
.rbc-header {
font-size: 12px !important;
font-weight: 500 !important;
}
.rbc-off-range {
color: $gray-400 !important;
}
.rbc-event {
background: $primary !important;
}
.rbc-day-slot .rbc-event {
border: 1px solid darken($primary, 15%) !important;
}
.rbc-show-more {
font-weight: normal !important;
}
.rbc-today {
background-color: lighten($primary, 40%) !important;
}
.rbc-date-cell.rbc-now {
color: $black !important;
font-weight: normal !important;
}
.rbc-toolbar-label {
color: $black !important;
}
.rbc-toolbar button {
color: $body-color !important;
font-size: 14px !important;
border: 1px solid $gray-300 !important;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
background-image: none;
color: $black !important;
box-shadow: none !important;
background-color: $gray-300 !important;
border-color: $gray-300 !important;
}
.rbc-toolbar button:hover {
background-color: lighten($gray-300, 5%) !important;
}
.rbc-header {
border-bottom: 1px solid $gray-300 !important;
}
.rbc-header + .rbc-header {
border-left: 1px solid $gray-300 !important;
}
.rbc-month-row + .rbc-month-row {
border-top: 1px solid $gray-300 !important;
}

24
app/styles/plugins/_react-bootstrap-table.scss Executable file
View File

@@ -0,0 +1,24 @@
/*@import "~react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";*/
@import "./../variables.scss";
.react-bootstrap-table th.sortable {
white-space: nowrap;
}
.react-bootstrap-table th,
.react-bootstrap-table td {
vertical-align: middle !important;
}
.react-bootstrap-table .table:not(.table-bordered) tbody tr:last-child td {
border-bottom: 1px solid $table-border-color;
}
.react-bootstrap-table-pagination {
padding: 0 0.75rem;
}
.react-bootstrap-table-pagination-list .pagination {
justify-content: flex-end;
}

8
app/styles/plugins/_react-bootstrap-typeahead.scss Executable file
View File

@@ -0,0 +1,8 @@
/* React Bootstrap Typeahead Overrides */
.rbt-token {
background-color: $primary !important;
color: $white !important;
}
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
color: darken($white,20%) !important;
}

80
app/styles/plugins/_react-datepicker.scss Executable file
View File

@@ -0,0 +1,80 @@
/* React Datepicker Overrides */
// Card
.react-datepicker {
border: solid 1px $gray-400 !important;
font-family: inherit !important;
box-shadow: $box-shadow;
}
.react-datepicker__header {
background-color: $gray-200 !important;
border-bottom: solid 0px $gray-400 !important;
}
// Card Header
.react-datepicker__navigation--next {
border-left-color: $gray-500 !important;
}
.react-datepicker__navigation--next:hover {
border-left-color: $gray-600 !important;
}
.react-datepicker__navigation--previous {
border-right-color: $gray-500 !important;
}
.react-datepicker__navigation--previous:hover {
border-right-color: $gray-600 !important;
}
// Month Header
.react-datepicker__current-month {
color: $black !important;
font-weight: 500 !important;
font-size: 14px !important;
}
.react-datepicker__day-name {
color: $body-color !important;
}
// Active Day
.react-datepicker__day--selected {
color: $white !important;
background-color: $primary !important;
}
// Hover Day
.react-datepicker__day:hover {
background-color: $primary !important;
color: $white !important;
}
// Day In Range
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
background-color: lighten($primary, 15%) !important;
color: $white !important;
}
.react-datepicker__day--in-range {
background-color: lighten($primary, 24%) !important;
color: $white !important;
}
// Day in Selecting Range
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
background-color: $primary !important;
color: $white !important;
}
// Triangle Top
[data-placement^="bottom"] .react-datepicker__triangle {
border-bottom-color: $gray-200 !important;
}
[data-placement^="bottom"] .react-datepicker__triangle::before {
border-bottom-color: $gray-400 !important;
}
// Triangle Bottom
[data-placement^="top"] .react-datepicker__triangle {
border-top-color: $gray-400 !important;
}
[data-placement^="top"] .react-datepicker__triangle::before {
border-top-color: $gray-400 !important;
}

14
app/styles/plugins/_react-dropzone.scss Executable file
View File

@@ -0,0 +1,14 @@
@import "./../variables.scss";
.dropzone {
border: 2px dashed $gray-300;
padding: 20px;
text-align: center;
cursor: pointer;
&:hover,
&--active {
border-color: $primary;
background-color: rgba($primary, 0.1);
}
}

76
app/styles/plugins/_react-grid-layout.scss Executable file
View File

@@ -0,0 +1,76 @@
/* React Grid Layout Overrides */
@import "./../variables.scss";
.react-grid-layout {
margin: 0 (-$grid-gutter-width / 2);
.react-grid-item.react-grid-placeholder {
background: none;
z-index: 2;
transition-duration: 100ms;
user-select: none;
position: relative;
opacity: 0.7;
&:after {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
content: " ";
background: rgba($primary, 0.3);
border-radius: 4px;
border: 2px dashed $primary;
height: calc(100% - #{$grid-gutter-width / 2});
width: calc(100% - #{$grid-gutter-width});
}
}
}
.float-column {
display: flex;
flex-direction: column;
> .card {
flex: 1 1 auto;
margin-bottom: $grid-gutter-width / 2;
+ .react-resizable-handle {
bottom: $grid-gutter-width / 2;
right: $grid-gutter-width / 2;
}
> .card-header {
cursor: move;
user-select: none;
/*
&:before {
position: absolute;
font: normal normal normal 14px/1 FontAwesome;
content: "\f142";
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: $text-muted;
}
*/
}
}
}
// Internal Breakpoint System
//=====================================
.float-column {
// Reset column sizes
[class^="col-"] {
flex: 0 0 100%;
max-width: 100%;
}
&--size-lg {
.col-md-4 {
flex: 0 0 (100% / 3);
max-width: (100% / 3);
}
}
}

1
app/styles/plugins/_react-image-crop.scss Executable file
View File

@@ -0,0 +1 @@
@import '~react-image-crop/lib/ReactCrop.scss';

98
app/styles/plugins/_react-quill.scss Executable file
View File

@@ -0,0 +1,98 @@
/* React Quill Overrides */
@import "~bootstrap/scss/mixins/_border-radius.scss";
@import "./../variables.scss";
.card .quill {
display: flex;
flex-direction: column;
.ql-toolbar {
// START Bootstrap Card Header
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
+ .list-group {
.list-group-item:first-child {
border-top: 0;
}
}
// END Bootstrap Card Header
flex: 0 0 auto;
border-width: 0 0 1px 0;
background-color: $gray-100;
}
.ql-container {
font-family: inherit;
font-size: inherit;
flex: 1 1 auto;
border: none;
display: flex;
flex-direction: column;
.ql-editor {
flex: 1 1 auto;
color: $body-color;
background: $white;
}
}
.ql-snow .ql-stroke {
stroke: $body-color;
}
.ql-snow .ql-fill {
fill: $body-color;
}
}
// Button SVG modifiers
.quill .ql-snow {
.ql-stroke {
stroke: $gray-500;
}
.ql-fill {
fill: $gray-500;
}
}
// Hover button SVG modifiers
.quill .ql-snow.ql-toolbar button:hover {
.ql-stroke {
stroke: $primary;
}
.ql-fill {
fill: $primary;
}
}
// Active button SVG modifiers
.quill .ql-snow.ql-toolbar button.ql-active {
.ql-stroke {
stroke: $primary;
}
.ql-fill {
fill: $primary;
}
}
// Focus button SVG modifiers
.quill .ql-snow.ql-toolbar button:focus {
outline: none;
.ql-stroke {
stroke: $primary;
}
.ql-fill {
fill: $primary;
}
}

82
app/styles/plugins/_react-toastify.scss Executable file
View File

@@ -0,0 +1,82 @@
@import "~react-toastify/scss/main.scss";
@import "../variables.scss";
.Toastify__toast {
background-color: $white;
padding: 20px;
border-radius: 3px;
border-top: 1px solid $gray-300;
border-bottom: 1px solid $gray-300;
border-right: 1px solid $gray-300;
font-family: inherit;
}
.Toastify__toast p {
color: $body-color;
}
.Toastify__toast h6 {
color: $black;
font-weight: 500;
}
// Toastiy: "SUCCESS" Alert
.Toastify__toast--success .fa-check {
color: $success;
}
.Toastify__toast--success .fa-check-circle {
color: $success !important;
}
.Toastify__toast--success {
border-left: 3px solid $success;
}
.Toastify__close-button--success {
color: $gray-500;
}
// Toastiy: "INFO" Alert
.Toastify__toast--info .fa-info {
color: $primary;
}
.Toastify__toast--info {
background-color: $white;
border-left: 3px solid $primary;
}
.Toastify__close-button--info {
color: $gray-500;
}
// Toastiy: "WARNING" Alert
.Toastify__toast--warning .fa-exclamation {
color: $warning;
}
.Toastify__toast--warning {
background-color: $white;
border-left: 3px solid $warning;
}
.Toastify__close-button--warning {
color: $gray-500;
}
// Toastiy: "ERROR" Alert
.Toastify__toast--error .fa-close {
color: $danger;
}
.Toastify__toast--error {
background-color: $white;
border-left: 3px solid $danger;
}
.Toastify__close-button--error {
color: $gray-500;
}
// Toastiy: "DEFAULT" Alert
.Toastify__toast--default .fa-exclamation {
color: $dark;
}
.Toastify__toast--default {
background-color: $white;
border-left: 3px solid $secondary;
}
.Toastify__close-button--default {
color: $gray-500;
}

17
app/styles/plugins/_react-toggle.scss Executable file
View File

@@ -0,0 +1,17 @@
/* React Toggle Overrides */
.react-toggle-track {
.fa {
font-size: 12px;
}
}
.react-toggle-track {
background-color: $gray-500 !important;
}
.react-toggle-thumb {
border: 1px solid $gray-500 !important;
}
.react-toggle--checked .react-toggle-track {
background-color: $success !important;
}

8
app/styles/plugins/plugins.css Executable file
View File

@@ -0,0 +1,8 @@
@import "~react-toggle/style.css";
@import '~react-bootstrap-typeahead/css/Typeahead.css';
@import '~react-bootstrap-typeahead/css/Typeahead-bs4.css';
@import "~react-quill/dist/quill.snow.css";
@import "~react-datepicker/dist/react-datepicker.css";
@import "~react-big-calendar/lib/css/react-big-calendar.css";
@import "~react-grid-layout/css/styles.css";
@import "~rc-slider/assets/index.css";

17
app/styles/plugins/plugins.scss Executable file
View File

@@ -0,0 +1,17 @@
@import "ag-grid";
@import "font-awesome";
@import "react-toastify";
@import "react-image-crop";
@import "react-toggle";
@import "react-bootstrap-typeahead";
@import "react-quill";
@import "react-datepicker";
@import "font-awesome";
@import "react-big-calendar";
@import "font-awesome";
@import "react-grid-layout";
@import "font-awesome";
@import "react-dropzone";
@import "font-awesome";
@import "rc-slider.scss";
@import "react-bootstrap-table.scss";

1
app/styles/variables.scss Executable file
View File

@@ -0,0 +1 @@
@import "~@owczar/dashboard-style--airframe/scss/variables";