mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 21:06:06 +00:00
Improve css utilities
This commit is contained in:
Peter Maquiran
+218
-263
@@ -1,275 +1,232 @@
|
||||
.v-application .overflow-auto {
|
||||
overflow: auto !important;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.overflow-y-hidden {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
.d-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.d-block {
|
||||
display: block !important;
|
||||
}
|
||||
.d-table {
|
||||
display: table !important;
|
||||
}
|
||||
.d-table-row {
|
||||
display: table-row !important;
|
||||
}
|
||||
.d-table-cell {
|
||||
display: table-cell !important;
|
||||
}
|
||||
.d-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
.d-inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
.float-none {
|
||||
float: none !important;
|
||||
}
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
.flex-fill {
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-row-reverse {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
.flex-column-reverse {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
.flex-grow-0 {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
.flex-grow-1 {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
.flex-shrink-1 {
|
||||
flex-shrink: 1 !important;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
.flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
}
|
||||
.justify-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
.justify-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
.justify-space-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
.justify-space-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
.align-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
.align-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
.align-baseline {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
.align-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
.align-content-start {
|
||||
align-content: flex-start !important;
|
||||
}
|
||||
.align-content-end {
|
||||
align-content: flex-end !important;
|
||||
}
|
||||
.align-content-center {
|
||||
align-content: center !important;
|
||||
}
|
||||
.align-content-space-between {
|
||||
align-content: space-between !important;
|
||||
}
|
||||
.align-content-space-around {
|
||||
align-content: space-around !important;
|
||||
}
|
||||
.align-content-stretch {
|
||||
align-content: stretch !important;
|
||||
}
|
||||
.align-self-auto {
|
||||
align-self: auto !important;
|
||||
}
|
||||
.align-self-start {
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
.align-self-end {
|
||||
align-self: flex-end !important;
|
||||
}
|
||||
.align-self-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
.align-self-baseline {
|
||||
align-self: baseline !important;
|
||||
}
|
||||
.align-self-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
// overflow
|
||||
.v-application .overflow-auto {overflow: auto !important;}
|
||||
.overflow-hidden {overflow: hidden !important;}
|
||||
.overflow-visible {overflow: visible !important;}
|
||||
.overflow-x-auto {overflow-x: auto !important;}
|
||||
.overflow-x-hidden {overflow-x: hidden !important;}
|
||||
.overflow-y-auto {overflow-y: auto !important;}
|
||||
.overflow-y-hidden {overflow-y: hidden !important;}
|
||||
// display
|
||||
.d-none {display: none !important;}
|
||||
.d-inline {display: inline !important;}
|
||||
.d-inline-block {display: inline-block !important;}
|
||||
.d-block {display: block !important;}
|
||||
.d-table {display: table !important;}
|
||||
.d-table-row {display: table-row !important;}
|
||||
.d-table-cell {display: table-cell !important;}
|
||||
.d-flex {display: flex !important;}
|
||||
.d-inline-flex {display: inline-flex !important;}
|
||||
//float
|
||||
.float-none {float: none !important;}
|
||||
.float-left {float: left !important;}
|
||||
.float-right {float: right !important;}
|
||||
//flex
|
||||
.flex-fill {flex: 1 1 auto !important;}
|
||||
.flex-row {flex-direction: row !important;}
|
||||
.flex-column {flex-direction: column !important;}
|
||||
.flex-row-reverse {flex-direction: row-reverse !important;}
|
||||
.flex-column-reverse {flex-direction: column-reverse !important;}
|
||||
.flex-grow-0 {flex-grow: 0 !important;}
|
||||
.flex-grow-1 {flex-grow: 1 !important;}
|
||||
.flex-md-1{ flex: 1;}
|
||||
.flex-md-0{ flex: 0;}
|
||||
.flex-shrink-0 {flex-shrink: 0 !important;}
|
||||
.flex-shrink-1 {flex-shrink: 1 !important;}
|
||||
.flex-wrap {flex-wrap: wrap !important;}
|
||||
.flex-nowrap {flex-wrap: nowrap !important;}
|
||||
.flex-wrap-reverse {flex-wrap: wrap-reverse !important;}
|
||||
//justify
|
||||
.justify-start {justify-content: flex-start !important;}
|
||||
.justify-end {justify-content: flex-end !important;}
|
||||
.justify-center {justify-content: center !important;}
|
||||
.justify-space-between {justify-content: space-between !important;}
|
||||
.justify-space-around {justify-content: space-around !important;}
|
||||
//align
|
||||
.align-start {align-items: flex-start !important;}
|
||||
.align-end {align-items: flex-end !important;}
|
||||
.align-center {align-items: center !important;}
|
||||
.align-baseline {align-items: baseline !important;}
|
||||
.align-stretch {align-items: stretch !important;}
|
||||
//align-content
|
||||
.align-content-start {align-content: flex-start !important;}
|
||||
.align-content-end {align-content: flex-end !important;}
|
||||
.align-content-center {align-content: center !important;}
|
||||
.align-content-space-between {align-content: space-between !important;}
|
||||
.align-content-space-around {align-content: space-around !important;}
|
||||
.align-content-stretch {align-content: stretch !important;}
|
||||
// .align-self
|
||||
.align-self-auto {align-self: auto !important;}
|
||||
.align-self-start {align-self: flex-start !important;}
|
||||
.align-self-end {align-self: flex-end !important;}
|
||||
.align-self-center {align-self: center !important;}
|
||||
.align-self-baseline {align-self: baseline !important;}
|
||||
.align-self-stretch {align-self: stretch !important;}
|
||||
.flex-1{ flex: 1;}
|
||||
.flex-0{ flex: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.m-t-20 {
|
||||
margin-top: 20px;
|
||||
@media only screen and (min-width: 1024px) {
|
||||
// overflow
|
||||
.v-application-md .overflow-md-auto {overflow: auto !important;}
|
||||
.overflow-md-hidden {overflow: hidden !important;}
|
||||
.overflow-md-visible {overflow: visible !important;}
|
||||
.overflow-md-x-auto {overflow-x: auto !important;}
|
||||
.overflow-md-x-hidden {overflow-x: hidden !important;}
|
||||
.overflow-md-y-auto {overflow-y: auto !important;}
|
||||
.overflow-md-y-hidden {overflow-y: hidden !important;}
|
||||
//display
|
||||
.d-md-flex {display: flex !important;}
|
||||
.d-md-inline-flex {display: inline-flex !important;}
|
||||
.d-md-none {display: none !important;}
|
||||
.d-md-inline {display: inline !important;}
|
||||
.d-md-inline-block {display: inline-block !important;}
|
||||
.d-md-block {display: block !important;}
|
||||
.d-md-table {display: table !important;}
|
||||
.d-md-table-row {display: table-row !important;}
|
||||
.d-md-table-cell {display: table-cell !important;}
|
||||
.d-md-flex {display: flex !important;}
|
||||
.d-md-inline-flex {display: inline-flex !important;}
|
||||
//float
|
||||
.float-md-none {float: none !important;}
|
||||
.float-md-left {float: left !important;}
|
||||
.float-md-right {float: right !important;}
|
||||
//flex
|
||||
.flex-md-fill {flex: 1 1 auto !important;}
|
||||
.flex-md-row {flex-direction: row !important;}
|
||||
.flex-md-column {flex-direction: column !important;}
|
||||
.flex-md-row-reverse {flex-direction: row-reverse !important;}
|
||||
.flex-md-column-reverse {flex-direction: column-reverse !important;}
|
||||
.flex-md-grow-0 {flex-grow: 0 !important;}
|
||||
.flex-md-grow-1 {flex-grow: 1 !important;}
|
||||
.flex-md-1{ flex: 1;}
|
||||
.flex-md-0{ flex: 0;}
|
||||
.flex-md-shrink-0 {flex-shrink: 0 !important;}
|
||||
.flex-md-shrink-1 {flex-shrink: 1 !important;}
|
||||
.flex-md-wrap {flex-wrap: wrap !important;}
|
||||
.flex-md-nowrap {flex-wrap: nowrap !important;}
|
||||
.flex-md-wrap-reverse {flex-wrap: wrap-reverse !important;}
|
||||
// justify
|
||||
.justify-md-end{ justify-content: flex-end !important;}
|
||||
.justify-md-center{ justify-content: flex-start !important;}
|
||||
.justify-md-space-between{ justify-content: space-between !important;}
|
||||
.justify-md-space-around{ justify-content: space-around !important;}
|
||||
// align
|
||||
.align-md-start{ align-items: flex-start !important;}
|
||||
.align-md-end{align-items: flex-end !important;}
|
||||
.align-md-center{ align-items: center !important;}
|
||||
.align-md-baseline{ align-items: baseline !important;}
|
||||
.align-md-stretch{align-items: stretch !important;}
|
||||
// .align-self
|
||||
.align-self-md-start{ align-self: flex-start !important;}
|
||||
.align-self-md-end{ align-self: flex-end !important;}
|
||||
.align-self-md-center{ align-self: center !important;}
|
||||
.align-self-md-baseline{ align-self: baseline !important;}
|
||||
.align-self-md-auto{ align-self: auto !important;}
|
||||
.align-self-md-stretch{ align-self: stretch !important; }
|
||||
// flex wrap
|
||||
.flex-md-nowrap{ flex-wrap: nowrap !important;}
|
||||
.flex-md-wrap{ flex-wrap: wrap !important;}
|
||||
.flex-md-wrap-reverse{ flex-wrap: wrap-reverse !important;}
|
||||
// align content
|
||||
.align-md-content-start{ align-content: flex-start !important;}
|
||||
.align-md-content-end{ align-content: flex-end !important;}
|
||||
.align-md-content-center{ align-content: center !important;}
|
||||
.align-md-content-space-between{ align-content: space-between !important;}
|
||||
.align-md-content-space-around{ align-content: space-around !important;}
|
||||
.align-md-content-stretch{ align-content: stretch !important;}
|
||||
}
|
||||
|
||||
.m-b-20 {
|
||||
margin-bottom: 20px;
|
||||
@media only screen and (min-width: 1366px) {
|
||||
// overflow
|
||||
.v-application-lg .overflow-md-auto {overflow: auto !important;}
|
||||
.overflow-lg-hidden {overflow: hidden !important;}
|
||||
.overflow-lg-visible {overflow: visible !important;}
|
||||
.overflow-lg-x-auto {overflow-x: auto !important;}
|
||||
.overflow-lg-x-hidden {overflow-x: hidden !important;}
|
||||
.overflow-lg-y-auto {overflow-y: auto !important;}
|
||||
.overflow-lg-y-hidden {overflow-y: hidden !important;}
|
||||
//display
|
||||
.d-lg-flex {display: flex !important;}
|
||||
.d-lg-inline-flex {display: inline-flex !important;}
|
||||
.d-lg-none {display: none !important;}
|
||||
.d-lg-inline {display: inline !important;}
|
||||
.d-lg-inline-block {display: inline-block !important;}
|
||||
.d-lg-block {display: block !important;}
|
||||
.d-lg-table {display: table !important;}
|
||||
.d-lg-table-row {display: table-row !important;}
|
||||
.d-lg-table-cell {display: table-cell !important;}
|
||||
.d-lg-flex {display: flex !important;}
|
||||
.d-lg-inline-flex {display: inline-flex !important;}
|
||||
//float
|
||||
.float-lg-none {float: none !important;}
|
||||
.float-lg-left {float: left !important;}
|
||||
.float-lg-right {float: right !important;}
|
||||
//flex
|
||||
.flex-lg-fill {flex: 1 1 auto !important;}
|
||||
.flex-lg-row {flex-direction: row !important;}
|
||||
.flex-lg-column {flex-direction: column !important;}
|
||||
.flex-lg-row-reverse {flex-direction: row-reverse !important;}
|
||||
.flex-lg-column-reverse {flex-direction: column-reverse !important;}
|
||||
.flex-lg-grow-0 {flex-grow: 0 !important;}
|
||||
.flex-lg-grow-1 {flex-grow: 1 !important;}
|
||||
.flex-lg-1{ flex: 1;}
|
||||
.flex-lg-0{ flex: 0;}
|
||||
.flex-lg-shrink-0 {flex-shrink: 0 !important;}
|
||||
.flex-lg-shrink-1 {flex-shrink: 1 !important;}
|
||||
.flex-lg-wrap {flex-wrap: wrap !important;}
|
||||
.flex-lg-nowrap {flex-wrap: nowrap !important;}
|
||||
.flex-lg-wrap-reverse {flex-wrap: wrap-reverse !important;}
|
||||
// justify
|
||||
.justify-lg-end{ justify-content: flex-end !important;}
|
||||
.justify-lg-center{ justify-content: flex-start !important;}
|
||||
.justify-lg-space-between{ justify-content: space-between !important;}
|
||||
.justify-lg-space-around{ justify-content: space-around !important;}
|
||||
// align
|
||||
.align-lg-start{ align-items: flex-start !important;}
|
||||
.align-lg-end{align-items: flex-end !important;}
|
||||
.align-lg-center{ align-items: center !important;}
|
||||
.align-lg-baseline{ align-items: baseline !important;}
|
||||
.align-lg-stretch{align-items: stretch !important;}
|
||||
// .align-self
|
||||
.align-self-lg-start{ align-self: flex-start !important;}
|
||||
.align-self-lg-end{ align-self: flex-end !important;}
|
||||
.align-self-lg-center{ align-self: center !important;}
|
||||
.align-self-lg-baseline{ align-self: baseline !important;}
|
||||
.align-self-lg-auto{ align-self: auto !important;}
|
||||
.align-self-lg-stretch{ align-self: stretch !important; }
|
||||
// flex wrap
|
||||
.flex-lg-nowrap{ flex-wrap: nowrap !important;}
|
||||
.flex-lg-wrap{ flex-wrap: wrap !important;}
|
||||
.flex-lg-wrap-reverse{ flex-wrap: wrap-reverse !important;}
|
||||
// align content
|
||||
.align-lg-content-start{ align-content: flex-start !important;}
|
||||
.align-lg-content-end{ align-content: flex-end !important;}
|
||||
.align-lg-content-center{ align-content: center !important;}
|
||||
.align-lg-content-space-between{ align-content: space-between !important;}
|
||||
.align-lg-content-space-around{ align-content: space-around !important;}
|
||||
.align-lg-content-stretch{ align-content: stretch !important;}
|
||||
}
|
||||
|
||||
.m-l-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.m-l-auto {margin-left: auto;}
|
||||
.m-auto {margin: 0 auto;}
|
||||
|
||||
.m-l-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.text-bold {font-weight: 700;}
|
||||
.text-blue {color: #0d89d1;}
|
||||
.text-red {color: #d30a0a;}
|
||||
.text-dark-blue {color: #061b52;}
|
||||
.text-grey {color: #797979;}
|
||||
.text-white {color: white;}
|
||||
.text-black {color: black;}
|
||||
.text-center {text-align: center;}
|
||||
|
||||
.m-r-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pd-10 {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pd-t-20 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.pd-b-20 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.pd-r-20 {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.pd-l-20 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-blue {
|
||||
color: #0d89d1;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #d30a0a;
|
||||
}
|
||||
|
||||
.text-dark-blue {
|
||||
color: #061b52;
|
||||
}
|
||||
|
||||
.text-grey {
|
||||
color: #797979;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.width-100{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.height-100{
|
||||
height: 100%;
|
||||
}
|
||||
.height-fit-content{
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.width-50{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
.flex-1{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.flex-0{
|
||||
flex: 0;
|
||||
}
|
||||
.width-100{width: 100%;}
|
||||
.height-100{height: 100%;}
|
||||
.height-fit-content{height: fit-content;}
|
||||
.width-50{width: 50%;}
|
||||
|
||||
// system spacing
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@for $i from 0 through 10 {
|
||||
|
||||
$size: $i * 5;
|
||||
@@ -324,6 +281,4 @@
|
||||
}
|
||||
|
||||
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
.text-center{text-align: center;}
|
||||
Reference in New Issue
Block a user