create-nexaui-electron/scripts/assets/css/grid.css

Create Nexa App - Tool untuk membuat aplikasi Nexa Electron

/*!
 * Ngorei NesxaUI  v1.1.5 (https://ngorei.com/)
 * Copyright 2024-2025 The Ngorei NesxaUI Authors
 * Licensed under MIT (https://github.com/ngorei/main/LICENSE)
 */
/*START Grid*/
*,
::after,
::before {
    box-sizing: border-box
}
body {
  margin: 0;
  font-family: "Montserrat", serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  line-height: 1.5;
  color: #001737;
  text-align: left;
  background-color: #fff; 

}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }
address {
  margin-bottom: 1rem;
  line-height: inherit; }

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0; }

dt {
  font-weight: 700; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }

blockquote {
  margin: 0 0 1rem; }

b,
strong {
  font-weight: bolder; }

small {
  font-size: 80%; }

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
   }
hr {
  border-color: rgb(72 94 144 / 4%); }

strong {
  font-weight: 600; }
a {
  color: #0168fa;
  text-decoration: none;
  background-color: transparent; }
a:hover {
    color: #0148ae;
    text-decoration: none; 
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none; }
  a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none; }
  a:not([href]):not([tabindex]):focus {
    outline: 0; }

:root {
  --nx-card-border-radius: 0.375rem;
  --nx-card-border-color: #dee2e6;
  --nx-card-bg: #fff;
  --nx-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --nx-card-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  --nx-card-spacing: 1.25rem;

  --nx-white: #ffffff;
  --nx-tabel-25: #f8f9fa;
  --nx-tabel-50: #f3f4f6;
  --nx-tabel-75: #e5e7eb;
  --nx-tabel-600: #4b5563;
  --nx-tabel-700: #374151;
  --nx-text-primary: #00d1b2;
  --nx-primary-dark: #242526;
}
.container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}
.nx-container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

/* Styling untuk grid demo */
.nx-row {
    margin-bottom: 0.5rem;
    display: flex;
    gap: 2px; /* Menggunakan gap sebagai pengganti margin */
}
/* Row Small */
.row-sm {
  margin-left: -10px;
  margin-right: -10px;
}

.row-sm > div {
  padding-left: 10px;
  padding-right: 10px;
}

/* Row Extra Small */
.row-xs {
  margin-left: -5px;
  margin-right: -5px;
}

.row-xs > div {
  padding-left: 5px;
  padding-right: 5px;
}

/* Row Extra Extra Small */
.row-xxs {
  margin-left: -1px;
  margin-right: -1px;
}

.row-xxs > div {
  padding-left: 1px;
  padding-right: 1px;
}

/* Small Devices (≥576px) */
@media (min-width: 576px) {
  .row-xs--sm {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--sm > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--sm {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--sm > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--sm {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--sm > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Medium Devices (≥768px) */
@media (min-width: 768px) {
  .row-xs--md {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--md > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--md {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--md > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--md {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--md > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Large Devices (≥992px) */
@media (min-width: 992px) {
  .row-xs--lg {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--lg > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--lg {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--lg > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--lg {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--lg > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Extra Large Devices (≥1200px) */
@media (min-width: 1200px) {
  .row-xs--xl {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--xl > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--xl {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--xl > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--xl {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--xl > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.nx-row > [class*="nx-col"] {
    padding: 0.1rem;
    /* margin dihapus karena sudah menggunakan gap */
}

/* Responsive container */
@media (min-width: 576px) {
    .nx-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .nx-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .nx-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .nx-container {
        max-width: 1140px;
    }
}

/* Tambahkan style untuk offset */
.nx-offset-4 {
    margin-left: 33.333333%;
}

/* Tambahkan breakpoint untuk responsif */
@media (min-width: 768px) {
    .nx-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .nx-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .nx-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
/* Grid System */
    .nx-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.5rem;
        gap: 2px;
    }

    .nx-col {
        flex: 1 0 0%;
        min-width: 0;
    }

    /* Grid System Columns untuk Desktop */
    @media (min-width: 576px) {
        .nx-col-1 { width: calc(8.33333333% - 2px); }
        .nx-col-2 { width: calc(16.66666667% - 2px); }
        .nx-col-3 { width: calc(25% - 2px); }
        .nx-col-4 { width: calc(33.33333333% - 2px); }
        .nx-col-5 { width: calc(41.66666667% - 2px); }
        .nx-col-6 { width: calc(50% - 2px); }
        .nx-col-7 { width: calc(58.33333333% - 2px); }
        .nx-col-8 { width: calc(66.66666667% - 2px); }
        .nx-col-9 { width: calc(75% - 2px); }
        .nx-col-10 { width: calc(83.33333333% - 2px); }
        .nx-col-11 { width: calc(91.66666667% - 2px); }
        .nx-col-12 { width: calc(100% - 2px); }
    }

    /* Grid System Columns untuk Mobile */
    @media (max-width: 575.98px) {
        [class*="nx-col-"] {
            width: calc(100% - 2px) !important; /* Memaksa full width di mobile */
            flex: 0 0 100% !important;
        }
        
        /* Pengecualian untuk kolom yang lebih kecil di mobile */
        .nx-col-6[class*="nx-col-sm"],
        .nx-col-4[class*="nx-col-sm"],
        .nx-col-3[class*="nx-col-sm"] {
            width: calc(50% - 2px) !important; /* Membuat kolom setengah layar */
            flex: 0 0 50% !important;
        }
    }

    [class*="nx-col-"] {
        flex: 0 0 auto;
        width: var(--col-width);
    }

    .nx-col-1 { --col-width: calc(8.33333333% - 2px); }
    .nx-col-2 { --col-width: calc(16.66666667% - 2px); }
    .nx-col-3 { --col-width: calc(25% - 2px); }
    .nx-col-4 { --col-width: calc(33.33333333% - 2px); }
    .nx-col-5 { --col-width: calc(41.66666667% - 2px); }
    .nx-col-6 { --col-width: calc(50% - 2px); }
    .nx-col-7 { --col-width: calc(58.33333333% - 2px); }
    .nx-col-8 { --col-width: calc(66.66666667% - 2px); }
    .nx-col-9 { --col-width: calc(75% - 2px); }
    .nx-col-10 { --col-width: calc(83.33333333% - 2px); }
    .nx-col-11 { --col-width: calc(91.66666667% - 2px); }
    .nx-col-12 { --col-width: calc(100% - 2px); }

    /* Grid System untuk Mobile */
    @media (max-width: 576px) {
        .nx-col-1, .nx-col-2, .nx-col-3, .nx-col-4,
        .nx-col-5, .nx-col-6, .nx-col-7, .nx-col-8,
        .nx-col-9, .nx-col-10, .nx-col-11, .nx-col-12 {
            padding: 0.5rem;
        }

        /* Kolom spesifik untuk mobile */
        .nx-col-1 { width: calc(8.33333333% - 1rem); }
        .nx-col-2 { width: calc(16.66666667% - 1rem); }
        .nx-col-3 { width: calc(25% - 1rem); }
        .nx-col-4 { width: calc(33.33333333% - 1rem); }
        .nx-col-5 { width: calc(41.66666667% - 1rem); }
        .nx-col-6 { width: calc(50% - 1rem); }
        .nx-col-7 { width: calc(58.33333333% - 1rem); }
        .nx-col-8 { width: calc(66.66666667% - 1rem); }
        .nx-col-9 { width: calc(75% - 1rem); }
        .nx-col-10 { width: calc(83.33333333% - 1rem); }
        .nx-col-11 { width: calc(91.66666667% - 1rem); }
        .nx-col-12 { width: calc(100% - 1rem); }

        /* Mengatur gap yang lebih kecil untuk mobile */
        .nx-row {
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        /* Utility classes untuk mobile */
        .nx-hide-mobile {
            display: none !important;
        }
        
        .nx-show-mobile {
            display: block !important;
        }
        
        /* Mengatur margin dan padding yang lebih kecil */
        .nx-container {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }
        
        .doc-section {
            margin-bottom: 1.5rem;
        }
    }

    /* Breakpoint untuk tablet */
    @media (min-width: 577px) and (max-width: 768px) {
        .nx-sm-1 { width: calc(8.33333333% - 1rem); }
        .nx-sm-2 { width: calc(16.66666667% - 1rem); }
        .nx-sm-3 { width: calc(25% - 1rem); }
        .nx-sm-4 { width: calc(33.33333333% - 1rem); }
        .nx-sm-5 { width: calc(41.66666667% - 1rem); }
        .nx-sm-6 { width: calc(50% - 1rem); }
        .nx-sm-7 { width: calc(58.33333333% - 1rem); }
        .nx-sm-8 { width: calc(66.66666667% - 1rem); }
        .nx-sm-9 { width: calc(75% - 1rem); }
        .nx-sm-10 { width: calc(83.33333333% - 1rem); }
        .nx-sm-11 { width: calc(91.66666667% - 1rem); }
        .nx-sm-12 { width: calc(100% - 1rem); }
    }
    /* Spacing untuk form groups */
    .nx-row + .nx-row {
        margin-top: 1.5rem;
    }

    /* Form dalam grid */
    .nx-col-12 .form-nexa,
    .nx-col-md-6 .form-nexa,
    .nx-col-md-4 .form-nexa {
        height: 100%;
    }

    /* Grid System untuk Medium Devices (md) */
    @media (min-width: 768px) {
        .nx-md-1 { width: calc(8.33333333% - 2px); }
        .nx-md-2 { width: calc(16.66666667% - 2px); }
        .nx-md-3 { width: calc(25% - 2px); }
        .nx-md-4 { width: calc(33.33333333% - 2px); }
        .nx-md-5 { width: calc(41.66666667% - 2px); }
        .nx-md-6 { width: calc(50% - 2px); }
        .nx-md-7 { width: calc(58.33333333% - 2px); }
        .nx-md-8 { width: calc(66.66666667% - 2px); }
        .nx-md-9 { width: calc(75% - 2px); }
        .nx-md-10 { width: calc(83.33333333% - 2px); }
        .nx-md-11 { width: calc(91.66666667% - 2px); }
        .nx-md-12 { width: calc(100% - 2px); }
    }

    /* Grid System untuk Large Devices (lg) */
    @media (min-width: 992px) {
        .nx-lg-1 { width: calc(8.33333333% - 2px); }
        .nx-lg-2 { width: calc(16.66666667% - 2px); }
        .nx-lg-3 { width: calc(25% - 2px); }
        .nx-lg-4 { width: calc(33.33333333% - 2px); }
        .nx-lg-5 { width: calc(41.66666667% - 2px); }
        .nx-lg-6 { width: calc(50% - 2px); }
        .nx-lg-7 { width: calc(58.33333333% - 2px); }
        .nx-lg-8 { width: calc(66.66666667% - 2px); }
        .nx-lg-9 { width: calc(75% - 2px); }
        .nx-lg-10 { width: calc(83.33333333% - 2px); }
        .nx-lg-11 { width: calc(91.66666667% - 2px); }
        .nx-lg-12 { width: calc(100% - 2px); }
    }

    /* Grid System untuk Extra Large Devices (xl) */
    @media (min-width: 1200px) {
        .nx-xl-1 { width: calc(8.33333333% - 2px); }
        .nx-xl-2 { width: calc(16.66666667% - 2px); }
        .nx-xl-3 { width: calc(25% - 2px); }
        .nx-xl-4 { width: calc(33.33333333% - 2px); }
        .nx-xl-5 { width: calc(41.66666667% - 2px); }
        .nx-xl-6 { width: calc(50% - 2px); }
        .nx-xl-7 { width: calc(58.33333333% - 2px); }
        .nx-xl-8 { width: calc(66.66666667% - 2px); }
        .nx-xl-9 { width: calc(75% - 2px); }
        .nx-xl-10 { width: calc(83.33333333% - 2px); }
        .nx-xl-11 { width: calc(91.66666667% - 2px); }
        .nx-xl-12 { width: calc(100% - 2px); }
    }

    /* Flex properties untuk mendukung flexbox layout */
    @media (min-width: 768px) {
        .nx-md-1 { flex: 0 0 8.33333333%; }
        .nx-md-2 { flex: 0 0 16.66666667%; }
        .nx-md-3 { flex: 0 0 25%; }
        .nx-md-4 { flex: 0 0 33.33333333%; }
        .nx-md-5 { flex: 0 0 41.66666667%; }
        .nx-md-6 { flex: 0 0 50%; }
        .nx-md-7 { flex: 0 0 58.33333333%; }
        .nx-md-8 { flex: 0 0 66.66666667%; }
        .nx-md-9 { flex: 0 0 75%; }
        .nx-md-10 { flex: 0 0 83.33333333%; }
        .nx-md-11 { flex: 0 0 91.66666667%; }
        .nx-md-12 { flex: 0 0 100%; }
    }

    @media (min-width: 992px) {
        .nx-lg-1 { flex: 0 0 8.33333333%; }
        .nx-lg-2 { flex: 0 0 16.66666667%; }
        .nx-lg-3 { flex: 0 0 25%; }
        .nx-lg-4 { flex: 0 0 33.33333333%; }
        .nx-lg-5 { flex: 0 0 41.66666667%; }
        .nx-lg-6 { flex: 0 0 50%; }
        .nx-lg-7 { flex: 0 0 58.33333333%; }
        .nx-lg-8 { flex: 0 0 66.66666667%; }
        .nx-lg-9 { flex: 0 0 75%; }
        .nx-lg-10 { flex: 0 0 83.33333333%; }
        .nx-lg-11 { flex: 0 0 91.66666667%; }
        .nx-lg-12 { flex: 0 0 100%; }
    }

    @media (min-width: 1200px) {
        .nx-xl-1 { flex: 0 0 8.33333333%; }
        .nx-xl-2 { flex: 0 0 16.66666667%; }
        .nx-xl-3 { flex: 0 0 25%; }
        .nx-xl-4 { flex: 0 0 33.33333333%; }
        .nx-xl-5 { flex: 0 0 41.66666667%; }
        .nx-xl-6 { flex: 0 0 50%; }
        .nx-xl-7 { flex: 0 0 58.33333333%; }
        .nx-xl-8 { flex: 0 0 66.66666667%; }
        .nx-xl-9 { flex: 0 0 75%; }
        .nx-xl-10 { flex: 0 0 83.33333333%; }
        .nx-xl-11 { flex: 0 0 91.66666667%; }
        .nx-xl-12 { flex: 0 0 100%; }
    }
/*AND GRID*/