Brand

Simple usage

Bootstrap config

By default you can use only:

For including bootstrap modules uncomment sections in

            
                '~node_modules/pb-css-framework/sass/import-bootstrap-modules';

Application config

By default you can use only:

             
        
            

.select {
  --select-border-color: $select-border-color;
  --control-height: $control-height;
  --icon-size: 24px;
}
какой-то там текст ошибки
            

.control {
  --transform: translateY(calc(var(--shift) * -1)) scale(.75, .75);
  --inp-dis-bg-color: $inp-disabled-background-color;
  --inp-border-f-color: $inp-border-focus-color;
  --inp-border-h-color: $inp-border-hover-color;
  --inp-border-width: $inp-border-width;
  --inp-border-color: $inp-border-color;
  --inp-label-color: $inp-label-color;
  --inp-indent: $inp-indent;
  --inp-height: $inp-height;
  --shift: 12px;
}
.control-errors {
    color: var(--main-danger-color);
    text-indent: var(--inp-indent);
}
.control-label {
    transform-origin: var(--inp-indent);
    transition: var(--transition-time);
    text-indent: var(--inp-indent);
    color: var(--inp-label-color);
    height: var(--inp-height);
}
.control-label-icon {
    height: var(--icon-size);
    width: var(--icon-size);
}


            

.radio-label {
    --radio-border-h-color: $radio-border-h-color;
    --radio-container-size: $radio-container-size;
    --radio-border-color: $radio-border-color;
    --radio-border-width: $radio-circle-width;
    --radio-circle-size: $radio-circle-size;
}


            

.button {
  --btn-height: $btn-height;
}


            

.button-rounded {
    --btn-rounded-bg-dis-color: $btn-bg-disabled-color;
    --btn-rounded-height: $btn-rounded-height;
}


            

.checkbox-container {
    --checkbox-container-height: $checkbox-container-height;
    --checkbox-border-h-color: $checkbox-border-h-color;
    --checkbox-border-width: $checkbox-border-width;
    --checkbox-border-color: $checkbox-border-color;
    --checkbox-size: $checkbox-size;
}

shadow-menu-item

            

                    .#{$framework-prefix}shadow-menu-item {
  @include hover-shadow;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .02),
  0 4px 4px 0 rgba(0, 0, 0, .02),
  0 8px 8px 0 rgba(0, 0, 0, .02),
  0 16px 16px 0 rgba(0, 0, 0, .02),
  0 32px 32px 0 rgba(0, 0, 0, .02),
  0 64px 64px 0 rgba(0, 0, 0, .02);
}

shadow-widget


                     .#{$framework-prefix}shadow-widget {
  box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.05);
  @include hover-shadow;
}

shadow-thumb


                     .#{$framework-prefix}shadow-thumb {
  box-shadow: 0 12px 10px 0 rgba(0, 0, 0, 0.15);
}
header header header 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3 
            

.table {
    --tb-description-bg-color: $tb-description-bg-color;
    --tb-border-color: $tb-border-color;
    $tb-shown-rows: 5;
}

Tab Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur atque consequuntur dolor illum magnam mollitia nulla quos repellendus voluptatem. Architecto error fugiat harum neque provident quas, quos recusandae saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolor obcaecati quam reprehenderit sunt? At cum expedita fugiat magnam magni nemo, neque nesciunt, officia pariatur ratione repellendus voluptatibus? Omnis, quos.
Some content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet animi beatae consequatur delectus dolor ea facere, fuga nostrum pariatur quam quas recusandae similique suscipit tempora totam voluptate, voluptatibus. Porro? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut beatae cum ducimus ea eaque enim et fuga iure iusto, molestiae quaerat quibusdam quisquam, quos recusandae sequi, vel vero voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, cum doloremque fuga magni molestiae nihil quaerat quas quasi quia quo quos reprehenderit sed sint. Commodi fugit id quisquam vel voluptates? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eaque earum facere molestias neque obcaecati officia officiis optio, praesentium provident quam, quas qui quod sunt suscipit tenetur, unde voluptate voluptatum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at dolore dolores explicabo illum impedit numquam odit repudiandae saepe veniam. Aperiam beatae ea expedita fugiat molestiae sint suscipit veniam, voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eius, et eveniet excepturi labore laudantium maxime mollitia nam neque, nesciunt non officiis praesentium quae quasi quo repudiandae tenetur ut voluptatum.
Some content
Some content

Tab Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur atque consequuntur dolor illum magnam mollitia nulla quos repellendus voluptatem. Architecto error fugiat harum neque provident quas, quos recusandae saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolor obcaecati quam reprehenderit sunt? At cum expedita fugiat magnam magni nemo, neque nesciunt, officia pariatur ratione repellendus voluptatibus? Omnis, quos.
Some content
Some content
Some content
            

.tab {
    --tab-header-font-size: $tab-header-font-size;
    --tab-label-color: $tab-label-color;
}

Fonts

            

.fs {
  $font-sizes: 56 45 34 24 20 17 15 13 11;

  @each $fs in $font-sizes {
    &-#{$fs} {
      font-size: #{$fs}px;
    }
  }
}