Scribd
Upload
32 views

Better Css

The document contains CSS styles for Material UI components like buttons, cards, tabs, and charts. It defines colors, sizes, and other styling properties for various elements. Breakpoints are included for responsive design on different screen sizes. Font styles are also specified for consistency.

Uploaded by

akshay varve
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
32 views

Better Css

The document contains CSS styles for Material UI components like buttons, cards, tabs, and charts. It defines colors, sizes, and other styling properties for various elements. Breakpoints are included for responsive design on different screen sizes. Font styles are also specified for consistency.

Uploaded by

akshay varve
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

.

mat-button,
.mat-icon-button {
color: inherit;
background: 0 0
}
.mat-button.mat-accent,
.mat-icon-button.mat-accent {
color: #3f51b5
}
.mat-button.mat-warn,
.mat-icon-button.mat-warn {
color: #e91e63
}
.mat-button.mat-accent .mat-button-focus-overlay,
.mat-icon-button.mat-accent .mat-button-focus-overlay {
background-color: #3f51b5
}
.mat-button.mat-warn .mat-button-focus-overlay,
.mat-icon-button.mat-warn .mat-button-focus-overlay {
background-color: #e91e63
}
.mat-button-focus-overlay {
background: #000
}
.mat-fab {
color: #000000de;
background-color: #fff
}
.mat-fab.mat-accent,
.mat-fab.mat-warn {
color: #fff
}
.mat-fab.mat-accent {
background-color: #3f51b5
}
.mat-fab.mat-warn {
background-color: #e91e63
}
.mat-fab:not([class*=mat-elevation-z]) {
box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f
}
.mat-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
box-shadow: 0 7px 8px -4px #0003, 0 12px 17px 2px #00000024, 0 5px 22px 4px
#0000001f
}
.mat-card {
background: #fff;
color: #000000de
}
.mat-cardF {
background: #fff;
color: #000000de;
width: 150px;
height: 80px
}
.mat-card4 {
background: #fff;
color: #000000de;
height: 520px
}
.mat-card44 {
background: #fff;
color: #000000de;
height: 200px;
width: 340px
}
.mat-card44sec {
background: #fff;
color: #000000de;
height: 300px
}
.mat-card444 {
background: #fff;
color: #000000de;
height: 230px
}
.mat-card4444 {
background: #fff;
color: #000000de;
height: 230px
}
.mat-card {
box-shadow: 0 5px 20px #0000000d !important;
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, .05) !important;
margin: 15px;
padding: 0 !important;
border-radius: 4px
}
.mat-card .mat-card-subtitle {
font-weight: 400
}
.mat-card .mat-card-content {
font-size: 1rem;
line-height: 23px;
padding: 24px
}
.mat-card .mat-card-header {
padding: 12px;
border-radius: 4px 4px 0 0
}
.mat-card .mat-card-header .mat-card-subtitle,
.mat-card .mat-card-header .mat-card-subtitle:not(:first-child) {
margin-bottom: 0;
margin-top: 0;
font-size: 14px;
font-weight: 400
}
.mat-card .mat-card-subtitle {
margin-bottom: 20px
}
.row {
margin: 0 -10px
}
.button-row button {
margin-right: 2px;
margin-left: 2px
}
@keyframes heartbit {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(.1);
opacity: .1
}
50% {
transform: scale(.5);
opacity: .3
}
75% {
transform: scale(.8);
opacity: .5
}
to {
transform: scale(1);
opacity: 0
}
}
html .page-wrapper {
height: calc(100vh - 64px)
}

html .page-wrapper .page-content {


padding: 15px
}
@media (min-width:1700px) {
.page-wrapper .page-content {
margin: 0 -30px
}
}
.icon-box {
width: 20%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
@keyframes blow {
0% {
box-shadow: 0 0 #0000001a;
opacity: 1;
transform: scaleZ(.5)
}
50% {
box-shadow: 0 0 0 10px #0000001a;
opacity: 1;
transform: scaleZ(.5)
}
to {
box-shadow: 0 0 0 20px #0000001a;
opacity: 0;
transform: scaleZ(.5)
}
}
@media (min-width:1024px) {
.card-group {
padding: 0 15px;
display: flex;
flex-flow: row wrap
}
.card-group .mat-card {
margin: 15px 0 !important;
flex: 1 0 0%;
border-left: 1px solid rgba(120, 130, 140, .13)
}
.card-group .mat-card:first-child {
border: 0
}
}
@media (max-width:1023px) {
.card-group {
margin: 15px 0
}
.card-group .mat-card {
margin: 0 15px;
border-top: 1px solid rgba(120, 130, 140, .13)
}
.card-group .mat-card:first-child {
border: 0
}
}
@media (max-width:767px) {
.no-block {
display: flex
}
.icon-box {
width: 50%
}
}
@media print {
html .page-wrapper {
height: 100%
}
}
html body [dir=rtl] .m-r-5 {
margin-left: 5px
}
html body [dir=rtl] .m-r-10 {
margin-left: 10px
}
html body [dir=rtl] .m-r-15 {
margin-left: 15px
}
html body [dir=rtl] .m-r-20 {
margin-left: 20px
}
html body [dir=rtl] .m-r-30 {
margin-left: 30px
}
html body [dir=rtl] .m-r-40 {
margin-left: 40px
}
html body [dir=rtl] .mat-card .mat-card-content {
position: relative
}
.mat-button,
.mat-fab,
.mat-icon-button {
font-family: Poppins;
font-size: 14px;
font-weight: 500
}
.mat-card {
font-family: Poppins
}
.mat-card-content,
.mat-card-subtitle {
font-size: 14px
}
.mat-radio-button {
font-family: Poppins
}
.mat-ripple {
overflow: hidden;
position: relative
}
.mat-ripple:not(:empty) {
transform: translateZ(0)
}
.mat-focus-indicator {
position: relative
}
mat-card-header {
background: #3f51b5;
color: #fff
}
.content {
padding: 16px
}
.content>mat-card {
width: 200px
}
.mat-card-content>:first-child,
.mat-card>:first-child {
margin-top: 0
}
.mat-card-content>:last-child:not(.mat-card-footer),
.mat-card>:last-child:not(.mat-card-footer) {
margin-bottom: 0
}
.mat-tab-label:focus {
outline: 0
}
.mat-tab-label:focus:not(.mat-tab-disabled) {
opacity: 1
}
.mat-tab-label .mat-tab-label-content {
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap
}
@media (max-width:599px) {
.mat-tab-label {
padding: 0 12px
}
}
@media (max-width:959px) {
.mat-tab-label {
padding: 0 12px
}
}
.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label {
flex-basis: 0;
flex-grow: 1
}
.mat-tab-body-wrapper {
position: relative;
overflow: hidden;
display: flex;
transition: height .5s cubic-bezier(.35, 0, .25, 1)
}
.mat-tab-body {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
display: block;
overflow: hidden;
outline: 0;
flex-basis: 100%
}
::ng-deep.mat-tab-label,
::ng-deep.mat-tab-label-active {
min-width: 0 !important;
padding: 10px !important
}
.example-label {
display: table-cell;
font-size: 14px;
margin-left: 8px;
min-width: 120px
}
.example-button-row {
display: table-cell;
max-width: 600px
}
.hichartsiz {
width: 500px;
height: 300px;
display: block
}
.BUTTONB {
height: 60px;
width: 161px;
background-color: #3f51b5
}
.btncolour {
color: #fff
}

You might also like