initial commit, have most of the categories crud methods
This commit is contained in:
Annika
@@ -0,0 +1,259 @@
|
||||
@each $color, $value in $colors {
|
||||
.bg-#{$color} {
|
||||
color: color-yiq($value);
|
||||
background-color: $value !important;
|
||||
}
|
||||
.text-#{$color} {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@each $num, $val in $color-ranges {
|
||||
.bg-#{$color}.darken-#{$num} {
|
||||
color: color-yiq(darken($value, $num));
|
||||
background-color: darken($value, $num) !important;
|
||||
}
|
||||
.text-#{$color}.darken-#{$num} {
|
||||
color: darken($value, $num) !important;
|
||||
}
|
||||
.bg-#{$color}.lighten-#{$num} {
|
||||
color: color-yiq(lighten($value, $num));
|
||||
background-color: lighten($value, $num) !important;
|
||||
}
|
||||
.text-#{$color}.lighten-#{$num} {
|
||||
color: lighten($value, $num) !important;
|
||||
}
|
||||
.bg-#{$color}.darken-#{$num}0 {
|
||||
color: color-yiq(darken($value, $num * 0.25));
|
||||
background-color: darken($value, $num * 0.25) !important;
|
||||
}
|
||||
.text-#{$color}.darken-#{$num}0 {
|
||||
color: darken($value, $num * 0.25) !important;
|
||||
}
|
||||
.bg-#{$color}.lighten-#{$num}0 {
|
||||
color: color-yiq(lighten($value, $num * 0.25));
|
||||
background-color: lighten($value, $num * 0.25) !important;
|
||||
}
|
||||
.text-#{$color}.lighten-#{$num}0 {
|
||||
color: lighten($value, $num * 0.25) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clip-text {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.action {
|
||||
cursor: pointer;
|
||||
}
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.scrollable-x {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.scrollable-y {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
// opacity: 0.65;
|
||||
&::after {
|
||||
cursor: not-allowed;
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.25rem;
|
||||
text-shadow: 1px 1px 0 #555, -1px -1px 0 #555, 1px -1px 0 #555, -1px 1px 0 #555, 1px 1px 0 #555;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(85, 85, 85, 0.37);
|
||||
&.text-disabled {
|
||||
content: "DISABLED";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.on-hover {
|
||||
transition: all 0.2s linear;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
*:hover > .on-hover {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.square {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.square-left {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
.square-right {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.square-top {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
.square-bottom {
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
.square-bottom-left {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
.square-bottom-right {
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.square-top-left {
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
.square-top-right {
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.selectable {
|
||||
position: relative;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:after {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
color: inherit;
|
||||
content: "";
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.elevation-1 {
|
||||
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.elevation-2 {
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.elevation-3 {
|
||||
box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.elevation-4 {
|
||||
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.elevation-5 {
|
||||
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 12px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.f-8 {
|
||||
font-size: 8pt !important;
|
||||
}
|
||||
.f-10 {
|
||||
font-size: 10pt !important;
|
||||
}
|
||||
.f-12 {
|
||||
font-size: 12pt !important;
|
||||
}
|
||||
.f-14 {
|
||||
font-size: 14pt !important;
|
||||
}
|
||||
.f-16 {
|
||||
font-size: 16pt !important;
|
||||
}
|
||||
.f-18 {
|
||||
font-size: 18pt !important;
|
||||
}
|
||||
.f-20 {
|
||||
font-size: 20pt !important;
|
||||
}
|
||||
.f-22 {
|
||||
font-size: 22pt !important;
|
||||
}
|
||||
.f-24 {
|
||||
font-size: 24pt !important;
|
||||
}
|
||||
.f-26 {
|
||||
font-size: 26pt !important;
|
||||
}
|
||||
.f-28 {
|
||||
font-size: 28pt !important;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.f-8 {
|
||||
font-size: 0.65rem !important;
|
||||
}
|
||||
|
||||
.f-10 {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.f-12 {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.f-14 {
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
.f-16 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.f-18 {
|
||||
font-size: 1.15rem !important;
|
||||
}
|
||||
|
||||
.f-20 {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.f-22 {
|
||||
font-size: 1.34rem !important;
|
||||
}
|
||||
|
||||
.f-24 {
|
||||
font-size: 1.45rem !important;
|
||||
}
|
||||
|
||||
.f-26 {
|
||||
font-size: 1.65rem !important;
|
||||
}
|
||||
|
||||
.f-28 {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
|
||||
.f-30 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user