Template Sistemas Ipasgo

Estrutura SCSS

É utilizado a estrutura de pasta 7-1 tire scss

É utilizado Webpack para compilação de scss para css

Observação: Primeiro, você deve baixar e instalar node.js Você deve verificar a instalação no seu terminal usando estes comandos node --version and npm --version.

a versão do node compatível é a v16.15.1

Se você quiser usar scss, precisará seguir alguns passos para o processo de compilação

npm i comando (instalar node js)
Webpack style comando no seu terminal

scss
- base
  - _reset.scss
  - _typography.scss
- components
  - _according.scss
  - _add_post.scss
  - _alert.scss
  - _aos.scss
  - _apexchart.scss
  - _avatars.scss
  - _badge.scss
  - _blog.scss
  - _bookmark.scss
  - _breadcrumb.scss
  - _buttons.scss
  - _card.scss
  - _cart.scss
  - _checkout.scss
  - _color.scss
  - _dark.scss
  - _datatable.scss
  - _datepicker.scss
  - _dropdown.scss
  - _form-input.scss
  - _form-wizard.scss
  - _forms.scss
  - _gallery.scss
  - _grid.scss
  - _helpers.scss
  - _icons.scss
  - _list.scss
  - _modal.scss
  - _nav.scss
  - _order-history.scss
  - _range.scss
  - _rating.scss
  - _ribbon.scss
  - _scrollbar.scss
  - _switch.scss
  - _table.scss
  - _tabs.scss
  - _timeline.scss
  - _toasts.scss
  - _touchpin.scss
  - _tour.scss
  - _tree.scss
  - _typeahead-search.scss
  - _typeahead.scss
  - _user.scss
  - _wow.scss
- layout
  - _box-layout.scss
  - _footer.scss
  - _header.scss
  - _select2.scss
  - _sidebar.scss
- pages
  - _add-product.scss
  - _bookmark-app.scss
  - _chart.scss
  - _chat.scss
  - _checkout.scss
  - _choices.scss
  - _comingsoon.scss
  - _contacts.scss
  - _dashboard_2.scss
  - _dashboard_3.scss
  - _dashboard_default.scss
  - _ecommerce.scss
  - _email-application.scss
  - _errorpage.scss
  - _faq.scss
  - _file.scss
  - _general-widget.scss
  - _general.scss
  - _imgcrop.scss
  - _internationalization.scss
  - _invoice.scss
  - _jsgrid.scss
  - _kanban.scss
  - _knowledgebase.scss
  - _landing.scss
  - _letter_box.scss
  - _loader.scss
  - _login.scss
  - _megaoption.scss
  - _pages.scss
  - _pricing.scss
  - _print.scss
  - _progress.scss
  - _project.scss
  - _search.scss
  - _social-app.scss
  - _starterkit.scss
  - _supportticket.scss
  - _sweetalert.scss
  - _swiper.scss
  - _task.scss
  - _user-profile.scss
- themes
  - _rtl.scss
  - _theme-customizer.scss
  - _custom.scss
  - _update.scss
- utils
  - _key-frames.scss
  - _mixins.scss
  - _variables.scss
- _color-1.scss
- _color-2.scss
- _color-3.scss
- _color-4.scss
- _color-5.scss
- _color-6.scss
- _style.scss

Tips

Se você quiser adicionar novo scss você pode adicionar no arquivo _custom.scss

que irá efetuar o update template no futuro.

apenas um arquivo custom scss que você precisa colocar do seu lado

Personalização inteligente usando scss

Você pode alterar o assets/scss/utils/_variables.scss

Configurações comuns

Conjunto de variáveis	Contexto
--theme-body-font-color: `#2f2f3b;`	conjunto de cores da fonte do corpo do tema inteiro
--font-color: `#aaa3a0;`	conjunto de cores da fonte do corpo do tema inteiro

Para família de fontes

$body-font: 'Nunito Sans', sans-serif definir família de fontes do corpo

Para configurações de cores principais

--primary-color: `#308e87;`	Todas as configurações de modelo de cor
--secondary-color: `#f39159;`
--success-color: `#3eb95f;`
--info-color: `#02a2b9;`
--warning-color: `#ea9200;`
--danger-color: `#e74b2b;`
--light-color: `#f5f5f5;`

Para configurações da barra lateral

$sidebar-width: `253px;`	definir largura da barra lateral
$mobile-sidebar-width: `240px;`	definir largura da barra lateral móvel
$logo-shadow: `0px 4px 15px rgba(var(--black), 0.05);`	definir cor da sombra do logotipo
$sidebar-shadow: `0px 4px 40px rgba(var(--black), 0.1);`	definir cor da sombra da barra lateral

Para configurações de Cards

$card-padding: `20px;`	definir espaçamento de card comum
$card-border: `1px solid rgba(var(--light-gray),1);`	definir borda do card
$card-header-bg-color: `rgba(var(--white),1);`	definir fundo do cabeçalho do card
$card-box-shadow: `0 0 50px rgba(var(--black), 0.03);`	definir card-caixa-sombra