Replace Bootstrap 3 with Bootstrap 4

This commit is contained in:
Andreas Nedbal 2020-04-19 21:08:58 +02:00
parent b47c0deb48
commit 7f74e844f5
6 changed files with 25 additions and 29 deletions

View File

@ -19,8 +19,7 @@ gem 'jbuilder', '~> 2.10'
gem 'bcrypt', '~> 3.1.7'
gem 'haml', '~> 5.0'
gem 'bootstrap-sass', '~> 3.4.0'
gem 'bootswatch-rails'
gem 'bootstrap', '~> 4.4', '>= 4.4.1'
gem 'sweetalert-rails'
gem 'will_paginate'
gem 'will_paginate-bootstrap'

View File

@ -79,16 +79,15 @@ GEM
erubi (>= 1.0.0)
rack (>= 0.9.0)
bindex (0.8.1)
bootstrap-sass (3.4.1)
autoprefixer-rails (>= 5.2.1)
sassc (>= 2.0.0)
bootstrap (4.4.1)
autoprefixer-rails (>= 9.1.0)
popper_js (>= 1.14.3, < 2)
sassc-rails (>= 2.0.0)
bootstrap3-datetimepicker-rails (4.7.14)
momentjs-rails (>= 2.8.1)
bootstrap_form (4.4.0)
actionpack (>= 5.0)
activemodel (>= 5.0)
bootswatch-rails (3.3.5)
railties (>= 3.1)
brakeman (4.8.1)
buftok (0.2.0)
builder (3.2.4)
@ -331,6 +330,7 @@ GEM
capybara (>= 2.1, < 4)
cliver (~> 0.3.1)
websocket-driver (>= 0.2.0)
popper_js (1.16.0)
pry (0.13.1)
coderay (~> 1.1)
method_source (~> 1.0)
@ -527,10 +527,9 @@ DEPENDENCIES
bcrypt (~> 3.1.7)
bcrypt_pbkdf (>= 1.0, < 2.0)
better_errors
bootstrap-sass (~> 3.4.0)
bootstrap (~> 4.4, >= 4.4.1)
bootstrap3-datetimepicker-rails (~> 4.7.14)
bootstrap_form
bootswatch-rails
brakeman
byebug
capistrano (~> 3.8)

View File

@ -1,8 +1,9 @@
#= require jquery
#= require jquery3
#= require jquery_ujs
#= require jquery.turbolinks
#= require jquery.arctic_scroll
#= require turbolinks
#= require popper
#= require bootstrap
#= require nprogress
#= require nprogress-turbolinks

View File

@ -16,7 +16,7 @@ $font-family-serif: Georgia, "DejaVu Serif", "Times New Roman", Times, ser
$font-family-monospace: "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: 14px;
$font-size-base: 1rem;
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
@ -27,6 +27,7 @@ $font-size-h4: ceil(($font-size-base * 1.25)); // ~18px
$font-size-h5: $font-size-base;
$font-size-h6: ceil(($font-size-base * 0.85)); // ~12px
$gray: #e2e2e2;
$brand-primary: #5e35b1;
$navbar-inverse-bg: #5e35b1;
$navbar-inverse-link-color: #ffffff;
@ -44,19 +45,15 @@ $navbar-inverse-toggle-hover-bg: #512da8;
$navbar-inverse-toggle-icon-bar-bg: #7e57c2;
$navbar-inverse-toggle-border-color: #512da8;
@import "bootswatch/cosmo/variables";
@import "bootstrap";
body { padding-top: $navbar-height; }
body { padding-top: 50px; }
@import 'bootstrap-datetimepicker';
.remove-native-picker::-webkit-calendar-picker-indicator{
display: none
}
@import "bootswatch/cosmo/bootswatch";
@import "base";
@import "font-awesome";

View File

@ -107,7 +107,7 @@ body {
}
.j2-delete {
color: $brand-danger;
color: theme-color('danger');
text-decoration: none;
}
@ -115,7 +115,7 @@ body {
margin-bottom: 0px;
}
@media (max-width: $screen-xs-max) {
@include media-breakpoint-down(xs) {
.j2-col-reset {
padding-left: 0px;
padding-right: 0px;
@ -277,7 +277,7 @@ body {
}
.colored-icon:before {
color: $brand-primary;
color: theme-color('primary');
}
.colored-icon {

View File

@ -42,8 +42,8 @@
}
.profile--panel .panel-heading {
color: $brand-primary;
border-bottom: 2px solid $brand-primary;
color: theme-color('primary');
border-bottom: 2px solid theme-color('primary');
background-color: #fff;
text-transform: uppercase;
}
@ -53,15 +53,15 @@
}
.inbox--panel .panel-heading {
color: $brand-info;
border-bottom: 2px solid $brand-info;
color: theme-color('info');
border-bottom: 2px solid theme-color('info');
background-color: #fff;
text-transform: uppercase;
}
.warning--panel .panel-heading {
color: $brand-danger;
border-bottom: 2px solid $brand-danger;
color: theme-color('danger');
border-bottom: 2px solid theme-color('danger');
background-color: #fff;
text-transform: uppercase;
}
@ -87,11 +87,11 @@
color: #fff;
}
$colours: danger $brand-danger,
$colours: danger theme-color('danger'),
default #BBB,
success $brand-success,
warning $brand-warning,
primary $brand-primary,
success theme-color('success'),
warning theme-color('warning'),
primary theme-color('primary'),
info #2980b9;
@each $colour in $colours {