Dashboard Module Management

Developer
Chris Evans
Size
9,257 Kb
Views
6,072
  1. Dashboard Module Management Previews
  2. Dashboard Module Management HTML Codes
  3. Dashboard Module Management CSS Codes

How do I make an dashboard module management?

What is a dashboard module management? How do you make a dashboard module management? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.

Dashboard Module Management Previews
IQ Test

Dashboard Module Management - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dashboard Module Management</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
</head>
<body> <header> <nav> <div class="nav__logo">Application <strong>Dashboard</strong></div> <div class="nav__profile"><span class="material-icons">person_pin</span><br/><strong>Tom Rozitsky</strong><br/>Administrator</div> <div class="nav__menu">MENU</div> </nav> </header> <main> <div class="grid grid--justify-center"> <div class="grid__col-8"> <section class="text--align-center"> <h1> <strong>Tom Rozitsky's </strong>Companies</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, sollicitudin a dictum id, vehicula in mauris. Morbi placerat semper velit id consequat.</p> </section> <div class="search"> <input/><i class="material-icons">search</i> </div> </div> </div> <div class="grid grid--justify-center"> <div class="grid__col-md-4"> <div class="action"><i class="material-icons">add</i></div> </div> </div> <div class="grid"> <div class="grid__col-md-4"> <div class="card card--company-showcase"> <h1>Nestle<br/><small>Business Administrator<br/><small>Purina</small></small></h1> </div> </div> <div class="grid__col-md-4"> <div class="card card--company-showcase"> <h1>Amazon<br/><small>Team Administrator<br/><small>Human Resources</small></small></h1> </div> </div> <div class="grid__col-md-4"> <div class="card card--company-showcase"> <h1>Hershey's<br/><small>Member</small></h1> </div> </div> <div class="grid__col-md-4"> <div class="card card--company-showcase"> <h1>Henkel<br/><small>Member</small></h1> </div> </div> <div class="grid__col-md-4"> <div class="card card--company-showcase"> <h1>Cadbury's<br/><small>Member</small></h1> </div> </div> </div> </main>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>

Dashboard Module Management - Script Codes CSS Codes

textarea,
select,
input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-appearance: none; background-color: #fff; color: #000; outline: 0; margin: 0; padding: 0; text-align: left; font-size: 1em; height: 1em; vertical-align: middle; border: none;
}
.card { display: block; background: #FFF; padding: 32px; margin: 16px; transition: height 500ms ease; overflow: hidden; height: 100%;
}
.card--company-showcase { position: relative; padding: 0.5em 48px 0.5em 2em; border-left: 5px solid #007F9A; cursor: pointer; transition: background 350ms ease, color 350ms ease;
}
.card--company-showcase:after, .card--company-showcase::after { font-family: 'Material Icons'; color: #333; content: 'chevron_right'; font-size: 48px; position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%);
}
.card--company-showcase:hover { background: #007F9A; color: #FFF;
}
.card--company-showcase:hover:after, .card--company-showcase:hover::after { color: #FFF;
}
.search { position: relative; display: table; margin: 0 auto;
}
.search i { z-index: 2; position: absolute; top: 50%; left: 60px; transform: translate(-50%, -50%); pointer-events: none; color: #FFF;
}
.search input { z-index: 1; display: table; position: relative; width: 120px; height: 120px; background-color: #333; border-radius: 50%; transition: background 350ms ease, width 350ms ease, color 350ms ease, border-radius 100ms ease 250ms; font-size: 48px; cursor: pointer; text-align: center; color: transparent;
}
.search input:hover { background: #007F9A;
}
.search input:focus, .search input:focus:hover { width: 50vw; padding: 1em 120px; background-color: #007F9A; color: #FFF; cursor: text; border-radius: 0; transition: width 350ms ease;
}
.action { display: table; position: relative; width: 80px; height: 80px; background: #FFF; border-radius: 50%; margin: 0 auto; top: 50%; transform: translatey(-50%); cursor: pointer; transition: background 350ms ease;
}
.action i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #737373; transition: color 350ms ease;
}
.action:hover { background: #007F9A;
}
.action:hover i { color: #FFF;
}
.text--align-center { text-align: center;
}
section { padding: 32px 0;
}
.section--inverse { background: #FFC04D; margin: 32px -32px -32px -32px; padding: 32px;
}
h1 { font-weight: 300;
}
hr { margin: 32px; border: none; border-bottom: 1px solid #FFC04D; background: none; outline: none;
}
select { padding: 1em; border: none; border-bottom: 1px solid #afafaf; color: #333; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 1em;
}
.material-icons { font-size: 48px !important;
}
body { font-family: 'Open Sans', sans-serif; color: #333; background-color: #EFEFEF;
}
body > header { position: fixed; top: 0; left: 0; right: 0; z-index: 999;
}
body > header nav { background: #333; border-bottom: 5px solid #b3b3b3; color: #EFEFEF; display: flex; justify-content: center; font-weight: 300; position: relative; padding: 1em;
}
body > header nav .nav__logo,
body > header nav .nav__profile,
body > header nav .nav__menu { flex: 1 1; padding: 1em; align-self: center;
}
body > header nav .nav__profile { text-align: center;
}
body > header nav .nav__menu { text-align: right;
}
body > main { display: block; margin-top: 150px;
}
/*! Reflex v1.2.0 - https://github.com/leejordan/reflex */
.grid,
.grid__cell { position: relative;
}
.grid,
.grid:after,
.grid:before,
.grid__cell-img { max-width: 100%;
}
.grid { display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; *display: inline; zoom: 1; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 0; width: 100%; letter-spacing: -0.31em !important; *letter-spacing: normal !important; word-spacing: -0.43em !important; list-style-type: none;
}
.grid:after,
.grid:before,
.grid:after,
.grid:before,
[class*=grid__col-] { letter-spacing: normal; word-spacing: normal; white-space: normal;
}
.grid .grid { -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto;
}
.grid *,
.grid:after,
.grid:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
[class*=grid__col-] { display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; *display: inline; zoom: 1; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; position: relative; width: 100%; vertical-align: top; padding: 1em;
}
.grid--bleed [class*=grid__col-],
.grid__col--bleed { padding: 0;
}
.grid__cell { display: block; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto;
}
:root .grid__cell,
_:-ms-fullscreen { width: 100%;
}
.grid__col-12 { width: 100%; *width: 99.9%;
}
.grid__col-11 { width: 91.66666667%; *width: 91.56667%;
}
.grid__col-10 { width: 83.33333333%; *width: 83.23333%;
}
.grid__col-9 { width: 75%; *width: 74.9%;
}
.grid__col-8 { width: 66.66666667%; *width: 66.56667%;
}
.grid__col-7 { width: 58.33333333%; *width: 58.23333%;
}
.grid__col-6 { width: 50%; *width: 49.9%;
}
.grid__col-5 { width: 41.66666667%; *width: 41.56667%;
}
.grid__col-4 { width: 33.33333333%; *width: 33.23333%;
}
.grid__col-3 { width: 25%; *width: 24.9%;
}
.grid__col-2 { width: 16.66666667%; *width: 16.56667%;
}
.grid__col-1 { width: 8.33333333%; *width: 8.23333%;
}
@media (min-width: 480px) { .grid__col-xs-12 { width: 100%; *width: 99.9%; } .grid__col-xs-11 { width: 91.66666667%; *width: 91.56667%; } .grid__col-xs-10 { width: 83.33333333%; *width: 83.23333%; } .grid__col-xs-9 { width: 75%; *width: 74.9%; } .grid__col-xs-8 { width: 66.66666667%; *width: 66.56667%; } .grid__col-xs-7 { width: 58.33333333%; *width: 58.23333%; } .grid__col-xs-6 { width: 50%; *width: 49.9%; } .grid__col-xs-5 { width: 41.66666667%; *width: 41.56667%; } .grid__col-xs-4 { width: 33.33333333%; *width: 33.23333%; } .grid__col-xs-3 { width: 25%; *width: 24.9%; } .grid__col-xs-2 { width: 16.66666667%; *width: 16.56667%; } .grid__col-xs-1 { width: 8.33333333%; *width: 8.23333%; }
}
@media (min-width: 768px) { .grid__col-sm-12 { width: 100%; *width: 99.9%; } .grid__col-sm-11 { width: 91.66666667%; *width: 91.56667%; } .grid__col-sm-10 { width: 83.33333333%; *width: 83.23333%; } .grid__col-sm-9 { width: 75%; *width: 74.9%; } .grid__col-sm-8 { width: 66.66666667%; *width: 66.56667%; } .grid__col-sm-7 { width: 58.33333333%; *width: 58.23333%; } .grid__col-sm-6 { width: 50%; *width: 49.9%; } .grid__col-sm-5 { width: 41.66666667%; *width: 41.56667%; } .grid__col-sm-4 { width: 33.33333333%; *width: 33.23333%; } .grid__col-sm-3 { width: 25%; *width: 24.9%; } .grid__col-sm-2 { width: 16.66666667%; *width: 16.56667%; } .grid__col-sm-1 { width: 8.33333333%; *width: 8.23333%; }
}
@media (min-width: 992px) { .grid__col-md-12 { width: 100%; *width: 99.9%; } .grid__col-md-11 { width: 91.66666667%; *width: 91.56667%; } .grid__col-md-10 { width: 83.33333333%; *width: 83.23333%; } .grid__col-md-9 { width: 75%; *width: 74.9%; } .grid__col-md-8 { width: 66.66666667%; *width: 66.56667%; } .grid__col-md-7 { width: 58.33333333%; *width: 58.23333%; } .grid__col-md-6 { width: 50%; *width: 49.9%; } .grid__col-md-5 { width: 41.66666667%; *width: 41.56667%; } .grid__col-md-4 { width: 33.33333333%; *width: 33.23333%; } .grid__col-md-3 { width: 25%; *width: 24.9%; } .grid__col-md-2 { width: 16.66666667%; *width: 16.56667%; } .grid__col-md-1 { width: 8.33333333%; *width: 8.23333%; }
}
@media (min-width: 1200px) { .grid__col-lg-12 { width: 100%; *width: 99.9%; } .grid__col-lg-11 { width: 91.66666667%; *width: 91.56667%; } .grid__col-lg-10 { width: 83.33333333%; *width: 83.23333%; } .grid__col-lg-9 { width: 75%; *width: 74.9%; } .grid__col-lg-8 { width: 66.66666667%; *width: 66.56667%; } .grid__col-lg-7 { width: 58.33333333%; *width: 58.23333%; } .grid__col-lg-6 { width: 50%; *width: 49.9%; } .grid__col-lg-5 { width: 41.66666667%; *width: 41.56667%; } .grid__col-lg-4 { width: 33.33333333%; *width: 33.23333%; } .grid__col-lg-3 { width: 25%; *width: 24.9%; } .grid__col-lg-2 { width: 16.66666667%; *width: 16.56667%; } .grid__col-lg-1 { width: 8.33333333%; *width: 8.23333%; }
}
@media (min-width: 1600px) { .grid__col-xlg-12 { width: 100%; *width: 99.9%; } .grid__col-xlg-11 { width: 91.66666667%; *width: 91.56667%; } .grid__col-xlg-10 { width: 83.33333333%; *width: 83.23333%; } .grid__col-xlg-9 { width: 75%; *width: 74.9%; } .grid__col-xlg-8 { width: 66.66666667%; *width: 66.56667%; } .grid__col-xlg-7 { width: 58.33333333%; *width: 58.23333%; } .grid__col-xlg-6 { width: 50%; *width: 49.9%; } .grid__col-xlg-5 { width: 41.66666667%; *width: 41.56667%; } .grid__col-xlg-4 { width: 33.33333333%; *width: 33.23333%; } .grid__col-xlg-3 { width: 25%; *width: 24.9%; } .grid__col-xlg-2 { width: 16.66666667%; *width: 16.56667%; } .grid__col-xlg-1 { width: 8.33333333%; *width: 8.23333%; }
}
.grid__col-auto { -ms-flex: 1 0 auto; -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%;
}
@media (min-width: 480px) { .grid__col-xs-auto { -ms-flex: 1 0 auto; -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; }
}
@media (min-width: 768px) { .grid__col-sm-auto { -ms-flex: 1 0 auto; -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; }
}
@media (min-width: 992px) { .grid__col-md-auto { -ms-flex: 1 0 auto; -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; }
}
@media (min-width: 1200px) { .grid__col-lg-auto { -ms-flex: 1 0 auto; -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; }
}
@media (min-width: 1600px) { .grid__col-xlg-auto { -ms-flex: 1 0 auto; -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; }
}
.grid--order-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12;
}
.grid--order-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11;
}
.grid--order-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10;
}
.grid--order-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9;
}
.grid--order-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8;
}
.grid--order-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7;
}
.grid--order-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6;
}
.grid--order-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5;
}
.grid--order-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4;
}
.grid--order-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3;
}
.grid--order-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2;
}
.grid--order-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1;
}
.grid--order-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0;
}
@media only screen and (min-width: 480px) { .grid--order-12-xs { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-xs { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-xs { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-xs { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-xs { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-xs { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-xs { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-xs { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-xs { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-xs { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-xs { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-xs { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-xs { -ms-flex-order: 0; -webkit-order: 0; order: 0; }
}
@media only screen and (min-width: 768px) { .grid--order-12-sm { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-sm { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-sm { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-sm { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-sm { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-sm { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-sm { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-sm { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-sm { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-sm { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-sm { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-sm { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-sm { -ms-flex-order: 0; -webkit-order: 0; order: 0; }
}
@media only screen and (min-width: 992px) { .grid--order-12-md { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-md { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-md { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-md { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-md { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-md { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-md { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-md { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-md { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-md { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-md { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-md { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-md { -ms-flex-order: 0; -webkit-order: 0; order: 0; }
}
@media only screen and (min-width: 1200px) { .grid--order-12-lg { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-lg { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-lg { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-lg { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-lg { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-lg { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-lg { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-lg { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-lg { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-lg { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-lg { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-lg { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-lg { -ms-flex-order: 0; -webkit-order: 0; order: 0; }
}
@media only screen and (min-width: 1600px) { .grid--order-12-xlg { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-xlg { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-xlg { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-xlg { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-xlg { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-xlg { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-xlg { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-xlg { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-xlg { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-xlg { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-xlg { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-xlg { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-xlg { -ms-flex-order: 0; -webkit-order: 0; order: 0; }
}
.grid--wrap { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.grid--no-wrap { -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
}
.grid--wrap-reverse { -ms-flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
}
.grid--direction-row { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row;
}
.grid--direction-row-reverse { -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse;
}
.grid--direction-column { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;
}
.grid--direction-column-reverse { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse;
}
.grid--align-start { -ms-flex-align: start; -ms-flex-align: flex-start; -webkit-align-items: flex-start; align-items: flex-start;
}
.grid--align-end { -ms-flex-align: end; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end;
}
.grid--align-end [class*=grid__col-] { vertical-align: bottom;
}
.grid--align-center { -ms-flex-align: center; -webkit-align-items: center; align-items: center;
}
.grid--align-center [class*=grid__col-] { vertical-align: middle;
}
.grid--align-baseline { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline;
}
.grid--align-baseline [class*=grid__col-] { vertical-align: baseline;
}
.grid--align-content-end [class*=grid__col-],
.grid--align-self-end { vertical-align: bottom;
}
.grid--align-content-start { -ms-flex-line-pack: start; -ms-flex-line-pack: flex-start; -webkit-align-content: flex-start; align-content: flex-start;
}
.grid--align-content-end { -ms-flex-line-pack: end; -ms-flex-line-pack: flex-end; -webkit-align-content: flex-end; align-content: flex-end;
}
.grid--align-content-center { -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center;
}
.grid--align-content-space-between { -ms-flex-line-pack: space-between; -webkit-align-content: space-between; align-content: space-between;
}
.grid--align-content-space-around { -ms-flex-line-pack: space-around; -webkit-align-content: space-around; align-content: space-around;
}
.grid--align-self-stretch { -ms-flex-item-align: stretch; -webkit-align-self: stretch; align-self: stretch;
}
.grid--align-self-start { -ms-flex-item-align: start; -ms-flex-item-align: flex-start; -webkit-align-self: flex-start; align-self: flex-start;
}
.grid--align-self-end { -ms-flex-item-align: end; -ms-flex-item-align: flex-end; -webkit-align-self: flex-end; align-self: flex-end;
}
.grid--align-self-center { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; vertical-align: middle;
}
.grid--align-self-baseline { -ms-flex-item-align: baseline; -webkit-align-self: baseline; align-self: baseline; vertical-align: baseline;
}
.grid--justify-start { text-align: left; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start;
}
.grid--justify-end { text-align: right; -moz-text-align-last: right; text-align-last: right; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end;
}
.grid--justify-end .grid__cell,
.grid--justify-end [class*=grid__col-] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial;
}
.grid--justify-center { text-align: center; -moz-text-align-last: center; text-align-last: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;
}
.grid--justify-center .grid__cell,
.grid--justify-center [class*=grid__col-] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial;
}
.grid--justify-space-between { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
}
.grid--justify-space-between .grid__cell,
.grid--justify-space-between [class*=grid__col-] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial;
}
.grid--justify-space-around { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around;
}
.grid--justify-space-around .grid__cell,
.grid--justify-space-around [class*=grid__col-] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial;
}
.grid__col--bleed-x { padding: 1em 0;
}
.grid__col--bleed-y { padding: 0 1em;
}
.grid__col--bg { background-repeat: no-repeat; background-position: center center; background-size: cover; padding-bottom: 50%;
}
.grid__cell--padding-sm { padding: 0.5em;
}
.grid__cell--padding-md { padding: 1em;
}
.grid__cell--padding-lg { padding: 2em;
}
.grid__cell-img { display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 0; margin-right: 0; width: 100%; height: auto;
}
.grid__cell-footer { display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; *display: inline; zoom: 1; width: 100%; margin-top: auto;
}
Dashboard Module Management - Script Codes
Dashboard Module Management - Script Codes
Home Page Home
Developer Chris Evans
Username anitorious
Uploaded December 27, 2022
Rating 3
Size 9,257 Kb
Views 6,072
Do you need developer help for Dashboard Module Management?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Evans (anitorious) Script Codes
Name
3D Interface
Single Field List Filter
A Forked Sky Full of Stars - Canvas Adaptation, Credit to JLNLJN
CSS Drawing - Life Ring
Searching for Answers
Dashboard Widgets
Natural Form Editing
Guidance Tooltip
CSS Grid Sandbox
Expanding Form
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!