Popup
43 |-
44 |
45 |
Something went wrong.
; 22 | } 23 | 24 | return this.props.children; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scripts/TabsApp.js: -------------------------------------------------------------------------------- 1 | import 'react-devtools'; 2 | // var browser = require('./browser-polyfill.js'); 3 | var browser = require('webextension-polyfill'); 4 | import React from 'react'; 5 | import { render } from 'react-dom'; 6 | import ActiveTabs from './ActiveTabs'; 7 | import { getTabs } from './components/browserActions'; 8 | 9 | function onRemoved(tabId, removeInfo) { 10 | getTabs().then(tabs => { 11 | window.tabs = tabs.filter(tab => tab.id != tabId); 12 | window.activeTabs.setState({ tabs: window.tabs }); 13 | }); 14 | } 15 | getTabs().then(tabs => { 16 | window.tabs = tabs; 17 | }); 18 | 19 | browser.tabs.onRemoved.addListener(onRemoved); 20 | browser.tabs.onDetached.addListener(onRemoved); 21 | 22 | browser.tabs.onCreated.addListener(() => { 23 | getTabs().then(tabs => { 24 | // console.log('onCreated:', tabs); 25 | window.tabs = tabs; 26 | window.activeTabs.setState({ tabs }); 27 | }); 28 | }); 29 | browser.tabs.onAttached.addListener(() => { 30 | getTabs().then(tabs => { 31 | window.tabs = tabs; 32 | window.activeTabs.setState({ tabs }); 33 | }); 34 | }); 35 | browser.tabs.onUpdated.addListener((tabId, changeInfo, tabInfo) => { 36 | getTabs().then(tabs => { 37 | window.tabs = tabs; 38 | window.activeTabs.setState({ tabs }); 39 | }); 40 | }); 41 | 42 | browser.storage.local.get('preferences').then(result => { 43 | // console.log("Root",window.tabs,result.preferences,NODE_ENV); 44 | window.activeTabs = render( 45 |
4 |
20 | );
21 | export default Navigation;
--------------------------------------------------------------------------------
/src/scripts/react-components/options.js:
--------------------------------------------------------------------------------
1 | ////MESSAGING AND COMMUNICATION
2 | function packageData(sender:string,receiver:string,targetMethod:String,data: any): Object{
3 | let package :Object = {
4 | sender: sender,
5 | receiver: receiver,
6 | targetMethod:targetMethod,
7 | data: data
8 | };
9 | return package;
10 | }
11 |
12 | function packageAndBroadcast(sender:string = sender,receiver:string,targetMethod:String,data: any){
13 | chrome.runtime.sendMessage(packageData(sender,receiver,targetMethod,data));
14 | }
15 | chrome.runtime.onConnect.addListener(function(port){
16 |
17 | console.assert(port.name == "ActiveTabsConnection");
18 | if (port.name == "ActiveTabsConnection") {
19 | port.onMessage.addListener(function(msg) {
20 | console.log("msg",msg);
21 | if(!jQuery.isEmptyObject(msg))
22 | {
23 | tabsList = msg.tabs;
24 | $('.active-tab-count').html(msg.tabs.length);
25 | ActiveTabs.setState({data: msg.tabs});
26 | }
27 | });
28 | }
29 | });
30 |
31 |
32 | // Saves options to chrome.storage.sync.
33 | function save_options(e) {
34 | e.preventDefault();
35 | let pref = {};
36 | pref.filterType = $('#filter-type-option-id').val();
37 | pref.filterCase = $('#filterCase-option-id').prop('checked');
38 | pref.sortAnimation = $('#sort-animation-option-id').val();
39 | console.log(pref)
40 | chrome.storage.local.set({
41 | pref: pref
42 | }, function () {
43 | // Update status to let user know options were saved.
44 | console.log(pref);
45 | let status = document.getElementById('status');
46 | $('#status>span').text('Options Saved');
47 | $('#status').fadeIn('slow')
48 | // status.textContent = 'Options saved.';
49 | setTimeout(function () {
50 | $('#status').fadeOut('slow')
51 | $('#status>span').text('');
52 | }, 2500);
53 | });
54 |
55 | }
56 | // Restores select box and checkbox state using the preferences
57 | // stored in chrome.storage.
58 | function restore_options() {
59 | chrome.storage.local.get("pref", function (items) {
60 | console.log(items);
61 | $('#filter-type-option-id').val(items.pref.filterType)
62 | $('#sort-animation-option-id').val(items.pref.sortAnimation)
63 | $('#filterCase-option-id').prop('checked': items.pref.filterCase)
64 | });
65 | }
66 | document.addEventListener('DOMContentLoaded', restore_options);
67 | // document.getElementById('save').addEventListener('click', save_options);
68 | $('#save').on('click',save_options);
69 | $('#go-to-tabs').on('click',function(){
70 | packageAndBroadcast('options','background','openExcitedGemPage',null);
71 | });
72 |
73 |
--------------------------------------------------------------------------------
/src/scripts/sessions-container.js:
--------------------------------------------------------------------------------
1 | //Vendors
2 | const $ = (jQuery = require('jquery'));
3 | const bootstrap = require('bootstrap');
4 | import React from 'react';
5 | import ReactDOM from 'react-dom';
6 | // import * as general from './components/general.js';
7 | import Sessions from './react-components/session';
8 | import { saveSessions, getSessions } from './components/getsetSessions';
9 |
10 | //Styles
11 | import '../styles/fontawesome5/fa-solid.scss';
12 | import '../styles/fontawesome5/fa-light.scss';
13 | import '../styles/fontawesome5/fa-regular.scss';
14 | import '../styles/fontawesome5.scss';
15 | import '../styles/eg.scss';
16 |
17 | $(document).ready(function() {
18 | $('.collapse').collapse();
19 | window.sessions = ReactDOM.render(
5 | 
6 |
7 |
14 |
19 |
6 |
65 |
70 |
71 |
72 |
66 |
67 |
68 |
69 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/src/sessions.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html(lang="en")
3 | head
4 | title="Excited Gem"
5 | link(rel="stylesheet", href="css/bootstrap.css")
6 | link(rel="stylesheet", href="css/eg.css")
7 | //- link(rel="stylesheet", href="css/font-awesome.css")
8 | script(src="js/jquery.min.js")
9 | script(src="js/react/dist/react.js")
10 | script(src="js/react-dom/dist/react-dom.js")
11 | script(src="js/bootstrap.js")
12 | //- script(src="js/activetabs.js")
13 | script(src="js/sessions.js")
14 | //- script(src="js/readinglist.js")
15 | script(src="js/content.js")
16 | //- script(src="js/contentext.js")
17 | //- script(src="js/jquery-ui.js")
18 |
19 | style.
20 | .tabGroupTitleText {
21 | font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
22 | color: #444;
23 | }
24 |
25 |
26 | body.eg
27 | include navigation
28 | .container-fluid.sessions
29 | h1 Sessions
30 | #sessions-tab.tab-pane(role='tabpanel')
31 | .tabs-list-container.header
32 | .horizontal-block.context-actions
33 | ul.nav.nav-pills
34 | li(role='presentation')
35 | a#saveSessions-btn(href='#', title='Save Active Tabs opened in all Chrome windows')
36 | span.glyphicon.glyphicon-save(aria-hidden='true')
37 | | Save Session
38 | li(role='presentation')
39 | a#saveSessionsAndClose-btn(href='#', title='Save Active Tabs opened in all Chrome windows and close Chrome')
40 | span.glyphicon.glyphicon-save(aria-hidden='true')
41 | | Save Session and Close Chrome
42 | #all-sessions
43 | #react-container
44 | // Small modal
45 | #infoModal.modal.bs-example-modal-sm(tabindex='-1', role='dialog', aria-labelledby='mySmallModalLabel')
46 |
--------------------------------------------------------------------------------
/src/styles/bootstrap.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v4.1.3 (https://getbootstrap.com/)
3 | * Copyright 2011-2018 The Bootstrap Authors
4 | * Copyright 2011-2018 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | @import "bootstrap/functions";
9 | @import "bootstrap/variables";
10 | @import "bootstrap/mixins";
11 | @import "bootstrap/root";
12 | @import "bootstrap/reboot";
13 | @import "bootstrap/type";
14 | @import "bootstrap/images";
15 | //@import "bootstrap/code";
16 | @import "bootstrap/grid";
17 | //@import "bootstrap/tables";
18 | @import "bootstrap/forms";
19 | @import "bootstrap/buttons";
20 | @import "bootstrap/transitions";
21 | @import "bootstrap/dropdown";
22 | //@import "bootstrap/button-group";
23 | @import "bootstrap/input-group";
24 | @import "bootstrap/custom-forms";
25 | @import "bootstrap/nav";
26 | @import "bootstrap/navbar";
27 | @import "bootstrap/card";
28 | //@import "bootstrap/breadcrumb";
29 | //@import "bootstrap/pagination";
30 | @import "bootstrap/badge";
31 | //@import "bootstrap/jumbotron";
32 | @import "bootstrap/alert";
33 | //@import "bootstrap/progress";
34 | //@import "bootstrap/media";
35 | @import "bootstrap/list-group";
36 | @import "bootstrap/close";
37 | @import "bootstrap/modal";
38 | @import "bootstrap/tooltip";
39 | //@import "bootstrap/popover";
40 | @import "bootstrap/carousel";
41 | @import "bootstrap/utilities";
42 | //@import "bootstrap/print";
43 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_alert.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Base styles
3 | //
4 |
5 | .alert {
6 | position: relative;
7 | padding: $alert-padding-y $alert-padding-x;
8 | margin-bottom: $alert-margin-bottom;
9 | border: $alert-border-width solid transparent;
10 | @include border-radius($alert-border-radius);
11 | }
12 |
13 | // Headings for larger alerts
14 | .alert-heading {
15 | // Specified to prevent conflicts of changing $headings-color
16 | color: inherit;
17 | }
18 |
19 | // Provide class for links that match alerts
20 | .alert-link {
21 | font-weight: $alert-link-font-weight;
22 | }
23 |
24 |
25 | // Dismissible alerts
26 | //
27 | // Expand the right padding and account for the close button's positioning.
28 |
29 | .alert-dismissible {
30 | padding-right: ($close-font-size + $alert-padding-x * 2);
31 |
32 | // Adjust close link position
33 | .close {
34 | position: absolute;
35 | top: 0;
36 | right: 0;
37 | padding: $alert-padding-y $alert-padding-x;
38 | color: inherit;
39 | }
40 | }
41 |
42 |
43 | // Alternate styles
44 | //
45 | // Generate contextual modifier classes for colorizing the alert.
46 |
47 | @each $color, $value in $theme-colors {
48 | .alert-#{$color} {
49 | @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_badge.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | //
3 | // Requires one of the contextual, color modifier classes for `color` and
4 | // `background-color`.
5 |
6 | .badge {
7 | display: inline-block;
8 | padding: $badge-padding-y $badge-padding-x;
9 | font-size: $badge-font-size;
10 | font-weight: $badge-font-weight;
11 | line-height: 1;
12 | text-align: center;
13 | white-space: nowrap;
14 | vertical-align: baseline;
15 | @include border-radius($badge-border-radius);
16 |
17 | // Empty badges collapse automatically
18 | &:empty {
19 | display: none;
20 | }
21 | }
22 |
23 | // Quick fix for badges in buttons
24 | .btn .badge {
25 | position: relative;
26 | top: -1px;
27 | }
28 |
29 | // Pill badges
30 | //
31 | // Make them extra rounded with a modifier to replace v3's badges.
32 |
33 | .badge-pill {
34 | padding-right: $badge-pill-padding-x;
35 | padding-left: $badge-pill-padding-x;
36 | @include border-radius($badge-pill-border-radius);
37 | }
38 |
39 | // Colors
40 | //
41 | // Contextual variations (linked badges get darker on :hover).
42 |
43 | @each $color, $value in $theme-colors {
44 | .badge-#{$color} {
45 | @include badge-variant($value);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_breadcrumb.scss:
--------------------------------------------------------------------------------
1 | .breadcrumb {
2 | display: flex;
3 | flex-wrap: wrap;
4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5 | margin-bottom: $breadcrumb-margin-bottom;
6 | list-style: none;
7 | background-color: $breadcrumb-bg;
8 | @include border-radius($breadcrumb-border-radius);
9 | }
10 |
11 | .breadcrumb-item {
12 | // The separator between breadcrumbs (by default, a forward-slash: "/")
13 | + .breadcrumb-item {
14 | padding-left: $breadcrumb-item-padding;
15 |
16 | &::before {
17 | display: inline-block; // Suppress underlining of the separator in modern browsers
18 | padding-right: $breadcrumb-item-padding;
19 | color: $breadcrumb-divider-color;
20 | content: $breadcrumb-divider;
21 | }
22 | }
23 |
24 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
25 | // without `- `s. The `::before` pseudo-element generates an element
26 | // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
27 | //
28 | // To trick IE into suppressing the underline, we give the pseudo-element an
29 | // underline and then immediately remove it.
30 | + .breadcrumb-item:hover::before {
31 | text-decoration: underline;
32 | }
33 | // stylelint-disable-next-line no-duplicate-selectors
34 | + .breadcrumb-item:hover::before {
35 | text-decoration: none;
36 | }
37 |
38 | &.active {
39 | color: $breadcrumb-active-color;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_buttons.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable selector-no-qualifying-type
2 |
3 | //
4 | // Base styles
5 | //
6 |
7 | .btn {
8 | display: inline-block;
9 | font-weight: $btn-font-weight;
10 | text-align: center;
11 | white-space: nowrap;
12 | vertical-align: middle;
13 | user-select: none;
14 | border: $btn-border-width solid transparent;
15 | @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
16 | @include transition($btn-transition);
17 |
18 | // Share hover and focus styles
19 | @include hover-focus {
20 | text-decoration: none;
21 | }
22 |
23 | &:focus,
24 | &.focus {
25 | outline: 0;
26 | box-shadow: $btn-focus-box-shadow;
27 | }
28 |
29 | // Disabled comes first so active can properly restyle
30 | &.disabled,
31 | &:disabled {
32 | opacity: $btn-disabled-opacity;
33 | @include box-shadow(none);
34 | }
35 |
36 | // Opinionated: add "hand" cursor to non-disabled .btn elements
37 | &:not(:disabled):not(.disabled) {
38 | cursor: pointer;
39 | }
40 |
41 | &:not(:disabled):not(.disabled):active,
42 | &:not(:disabled):not(.disabled).active {
43 | @include box-shadow($btn-active-box-shadow);
44 |
45 | &:focus {
46 | @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
47 | }
48 | }
49 | }
50 |
51 | // Future-proof disabling of clicks on `` elements
52 | a.btn.disabled,
53 | fieldset:disabled a.btn {
54 | pointer-events: none;
55 | }
56 |
57 |
58 | //
59 | // Alternate buttons
60 | //
61 |
62 | @each $color, $value in $theme-colors {
63 | .btn-#{$color} {
64 | @include button-variant($value, $value);
65 | }
66 | }
67 |
68 | @each $color, $value in $theme-colors {
69 | .btn-outline-#{$color} {
70 | @include button-outline-variant($value);
71 | }
72 | }
73 |
74 |
75 | //
76 | // Link buttons
77 | //
78 |
79 | // Make a button look and behave like a link
80 | .btn-link {
81 | font-weight: $font-weight-normal;
82 | color: $link-color;
83 | background-color: transparent;
84 |
85 | @include hover {
86 | color: $link-hover-color;
87 | text-decoration: $link-hover-decoration;
88 | background-color: transparent;
89 | border-color: transparent;
90 | }
91 |
92 | &:focus,
93 | &.focus {
94 | text-decoration: $link-hover-decoration;
95 | border-color: transparent;
96 | box-shadow: none;
97 | }
98 |
99 | &:disabled,
100 | &.disabled {
101 | color: $btn-link-disabled-color;
102 | pointer-events: none;
103 | }
104 |
105 | // No need for an active state here
106 | }
107 |
108 |
109 | //
110 | // Button Sizes
111 | //
112 |
113 | .btn-lg {
114 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
115 | }
116 |
117 | .btn-sm {
118 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
119 | }
120 |
121 |
122 | //
123 | // Block button
124 | //
125 |
126 | .btn-block {
127 | display: block;
128 | width: 100%;
129 |
130 | // Vertically space out multiple block buttons
131 | + .btn-block {
132 | margin-top: $btn-block-spacing-y;
133 | }
134 | }
135 |
136 | // Specificity overrides
137 | input[type="submit"],
138 | input[type="reset"],
139 | input[type="button"] {
140 | &.btn-block {
141 | width: 100%;
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_close.scss:
--------------------------------------------------------------------------------
1 | .close {
2 | float: right;
3 | font-size: $close-font-size;
4 | font-weight: $close-font-weight;
5 | line-height: 1;
6 | color: $close-color;
7 | text-shadow: $close-text-shadow;
8 | opacity: .5;
9 |
10 | &:not(:disabled):not(.disabled) {
11 |
12 | @include hover-focus {
13 | color: $close-color;
14 | text-decoration: none;
15 | opacity: .75;
16 | }
17 |
18 | // Opinionated: add "hand" cursor to non-disabled .close elements
19 | cursor: pointer;
20 | }
21 | }
22 |
23 | // Additional properties for button version
24 | // iOS requires the button element instead of an anchor tag.
25 | // If you want the anchor version, it requires `href="#"`.
26 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
27 |
28 | // stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
29 | button.close {
30 | padding: 0;
31 | background-color: transparent;
32 | border: 0;
33 | -webkit-appearance: none;
34 | }
35 | // stylelint-enable
36 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_code.scss:
--------------------------------------------------------------------------------
1 | // Inline code
2 | code {
3 | font-size: $code-font-size;
4 | color: $code-color;
5 | word-break: break-word;
6 |
7 | // Streamline the style when inside anchors to avoid broken underline and more
8 | a > & {
9 | color: inherit;
10 | }
11 | }
12 |
13 | // User input typically entered via keyboard
14 | kbd {
15 | padding: $kbd-padding-y $kbd-padding-x;
16 | font-size: $kbd-font-size;
17 | color: $kbd-color;
18 | background-color: $kbd-bg;
19 | @include border-radius($border-radius-sm);
20 | @include box-shadow($kbd-box-shadow);
21 |
22 | kbd {
23 | padding: 0;
24 | font-size: 100%;
25 | font-weight: $nested-kbd-font-weight;
26 | @include box-shadow(none);
27 | }
28 | }
29 |
30 | // Blocks of code
31 | pre {
32 | display: block;
33 | font-size: $code-font-size;
34 | color: $pre-color;
35 |
36 | // Account for some code outputs that place code tags in pre tags
37 | code {
38 | font-size: inherit;
39 | color: inherit;
40 | word-break: normal;
41 | }
42 | }
43 |
44 | // Enable scrollable blocks of code
45 | .pre-scrollable {
46 | max-height: $pre-scrollable-max-height;
47 | overflow-y: scroll;
48 | }
49 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_functions.scss:
--------------------------------------------------------------------------------
1 | // Bootstrap functions
2 | //
3 | // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
4 |
5 | // Ascending
6 | // Used to evaluate Sass maps like our grid breakpoints.
7 | @mixin _assert-ascending($map, $map-name) {
8 | $prev-key: null;
9 | $prev-num: null;
10 | @each $key, $num in $map {
11 | @if $prev-num == null {
12 | // Do nothing
13 | } @else if not comparable($prev-num, $num) {
14 | @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
15 | } @else if $prev-num >= $num {
16 | @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
17 | }
18 | $prev-key: $key;
19 | $prev-num: $num;
20 | }
21 | }
22 |
23 | // Starts at zero
24 | // Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
25 | @mixin _assert-starts-at-zero($map) {
26 | $values: map-values($map);
27 | $first-value: nth($values, 1);
28 | @if $first-value != 0 {
29 | @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
30 | }
31 | }
32 |
33 | // Replace `$search` with `$replace` in `$string`
34 | // Used on our SVG icon backgrounds for custom forms.
35 | //
36 | // @author Hugo Giraudel
37 | // @param {String} $string - Initial string
38 | // @param {String} $search - Substring to replace
39 | // @param {String} $replace ('') - New value
40 | // @return {String} - Updated string
41 | @function str-replace($string, $search, $replace: "") {
42 | $index: str-index($string, $search);
43 |
44 | @if $index {
45 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
46 | }
47 |
48 | @return $string;
49 | }
50 |
51 | // Color contrast
52 | @function color-yiq($color) {
53 | $r: red($color);
54 | $g: green($color);
55 | $b: blue($color);
56 |
57 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
58 |
59 | @if ($yiq >= $yiq-contrasted-threshold) {
60 | @return $yiq-text-dark;
61 | } @else {
62 | @return $yiq-text-light;
63 | }
64 | }
65 |
66 | // Retrieve color Sass maps
67 | @function color($key: "blue") {
68 | @return map-get($colors, $key);
69 | }
70 |
71 | @function theme-color($key: "primary") {
72 | @return map-get($theme-colors, $key);
73 | }
74 |
75 | @function gray($key: "100") {
76 | @return map-get($grays, $key);
77 | }
78 |
79 | // Request a theme color level
80 | @function theme-color-level($color-name: "primary", $level: 0) {
81 | $color: theme-color($color-name);
82 | $color-base: if($level > 0, $black, $white);
83 | $level: abs($level);
84 |
85 | @return mix($color-base, $color, $level * $theme-color-interval);
86 | }
87 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_grid.scss:
--------------------------------------------------------------------------------
1 | // Container widths
2 | //
3 | // Set the container width, and override it for fixed navbars in media queries.
4 |
5 | @if $enable-grid-classes {
6 | .container {
7 | @include make-container();
8 | @include make-container-max-widths();
9 | }
10 | }
11 |
12 | // Fluid container
13 | //
14 | // Utilizes the mixin meant for fixed width containers, but with 100% width for
15 | // fluid, full width layouts.
16 |
17 | @if $enable-grid-classes {
18 | .container-fluid {
19 | @include make-container();
20 | }
21 | }
22 |
23 | // Row
24 | //
25 | // Rows contain and clear the floats of your columns.
26 |
27 | @if $enable-grid-classes {
28 | .row {
29 | @include make-row();
30 | }
31 |
32 | // Remove the negative margin from default .row, then the horizontal padding
33 | // from all immediate children columns (to prevent runaway style inheritance).
34 | .no-gutters {
35 | margin-right: 0;
36 | margin-left: 0;
37 |
38 | > .col,
39 | > [class*="col-"] {
40 | padding-right: 0;
41 | padding-left: 0;
42 | }
43 | }
44 | }
45 |
46 | // Columns
47 | //
48 | // Common styles for small and large grid columns
49 |
50 | @if $enable-grid-classes {
51 | @include make-grid-columns();
52 | }
53 |
--------------------------------------------------------------------------------
/src/styles/bootstrap/_images.scss:
--------------------------------------------------------------------------------
1 | // Responsive images (ensure images don't scale beyond their parents)
2 | //
3 | // This is purposefully opt-in via an explicit class rather than being the default for all `
- ,
- , or
.
4 |
5 | .list-group {
6 | display: flex;
7 | flex-direction: column;
8 |
9 | // No need to set list-style: none; since .list-group-item is block level
10 | padding-left: 0; // reset padding because ul and ol
11 | margin-bottom: 0;
12 | }
13 |
14 |
15 | // Interactive list items
16 | //
17 | // Use anchor or button elements instead of `li`s or `div`s to create interactive
18 | // list items. Includes an extra `.active` modifier class for selected items.
19 |
20 | .list-group-item-action {
21 | width: 100%; // For `